@font-face {
  font-family: "Libre Baskerville";
  src: url("assets/fonts/LibreBaskerville-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Han Serif SC";
  src: url("assets/fonts/SourceHanSerifSC-Regular-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #fbfaf6;
  --white: #fff;
  --soft: #faf7f2;
  --oat: #f0e6df;
  --ink: #25211f;
  --body: #403a37;
  --muted: #746c67;
  --line: #d9d3cc;
  --footer: #76513f;
  --cycle-width: 1764px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #e5e5e5; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #e5e5e5; font-family: "Source Han Serif SC", "Noto Serif SC", serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 100; left: 20px; top: 16px; padding: 9px 14px; color: #fff; background: var(--ink); transform: translateY(-80px); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.site { width: min(100%, 1440px); height: 4621px; margin: 0 auto; overflow: hidden; background: var(--paper); }
.site-header { position: relative; width: 100%; height: 176px; background: var(--white); border-bottom: 1px solid #f0ede8; }
.primary-nav { position: absolute; left: 24px; top: 72px; z-index: 2; display: flex; align-items: center; gap: 44px; height: 32px; font-size: 17px; line-height: 32px; letter-spacing: .01em; }
.primary-nav a { position: relative; white-space: nowrap; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px; background: currentColor; transition: right .24s ease; }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { right: 0; }
.brand-mark { position: absolute; left: 50%; top: 18px; width: 256px; height: 122px; transform: translateX(-50%); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.language { position: absolute; right: 25px; top: 68px; display: grid; place-items: center; width: 127px; height: 41px; padding: 0; border: 1px solid var(--line); background: transparent; font-size: 14px; cursor: pointer; }

.hero { position: relative; width: 100%; height: 676px; overflow: hidden; }
.hero img { position: absolute; left: -198.29%; top: -147.96%; width: 331.54%; height: 470.82%; max-width: none; object-fit: fill; }

.manifesto { position: relative; width: 100%; height: 282px; background: var(--white); }
.crown-crop { position: absolute; left: 50%; top: 63px; width: 58px; height: 48px; overflow: hidden; transform: translateX(-50%); }
.crown-crop img { position: absolute; left: -106px; top: -4px; width: 270px; height: 126px; max-width: none; object-fit: contain; }
.manifesto h1 { position: absolute; left: 130px; top: 32px; margin: 0; color: #4a4949; font-size: 34px; font-weight: 400; line-height: 59.5px; white-space: nowrap; }
.manifesto-copy { position: absolute; left: 130px; top: 92px; color: #4a4949; font-size: 18px; line-height: 31.5px; white-space: nowrap; }
.manifesto-copy p { margin: 0; }

.season-carousel { position: relative; width: 100%; height: 563px; background: var(--paper); }
.carousel-viewport { position: absolute; left: 132px; top: 84px; width: 1115px; height: 430px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.carousel-viewport.is-dragging { cursor: grabbing; }
.motion-track { position: absolute; left: 0; top: 0; width: 5268px; height: 430px; translate: 0 0; will-change: translate, width; animation: track-width 32.091522s linear infinite alternate, track-shift 32.091522s linear infinite alternate; }
.drag-layer { display: flex; width: 5268px; height: 430px; transform: translate3d(var(--drag-x, 0px), 0, 0); will-change: transform; }
.carousel-sequence { display: flex; flex: 0 0 var(--cycle-width); gap: 24px; width: var(--cycle-width); }
.carousel-card { position: relative; flex: 0 0 270px; width: 270px; height: 430px; margin: 0; overflow: hidden; }
.carousel-card img { width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.crop-card-01 img { position: absolute; left: -15.38%; top: -6.97%; width: 131%; height: 109.67%; object-fit: fill; }
.crop-card-03 img { position: absolute; left: -39.35%; top: -23.7%; width: 161%; height: 151.57%; object-fit: fill; }
.crop-card-05 img { position: absolute; left: -57%; top: -57.07%; width: 214%; height: 179.16%; object-fit: fill; }

@keyframes track-width {
  0% { width: 5268px; }
  96.3%, 100% { width: 4494.725px; }
}
@keyframes track-shift {
  0% { translate: 0 0; }
  100% { translate: -1764px 0; }
}

.chapter { position: relative; width: 100%; height: 700px; background: var(--paper); }
.chapter.reverse { background: var(--soft); }
.chapter-image { position: absolute; left: 132px; top: 82px; width: 548px; height: 500px; overflow: hidden; background: #eee9e4; }
.reverse .chapter-image { left: 694px; }
.chapter-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.chapter-crop-two img { position: absolute; left: -9.67%; top: -40.22%; width: 109.73%; height: 180.31%; object-fit: fill; }
.chapter-crop-three img { position: absolute; left: -23.25%; top: -78.11%; width: 165.6%; height: 242%; object-fit: fill; }
.chapter-copy { position: absolute; left: 812px; top: 82px; width: 430px; height: 503px; }
.reverse .chapter-copy { left: 132px; height: 500px; }
.chapter-three .chapter-copy { left: 825px; height: 500px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 15px; line-height: 26.25px; letter-spacing: 1.5px; }
.chapter h2 { margin: 14px 0 0; font-size: 34px; font-weight: 400; line-height: 40.8px; }
.chapter h2.english { font-family: "Libre Baskerville", serif; font-size: 38px; line-height: 45.6px; }
.body-copy { width: 430px; margin: 28px 0 0; color: var(--body); font-size: 18px; line-height: 36px; }
.chapter-link { position: absolute; left: 0; bottom: 0; padding: 0 4px 8px; border-bottom: 1px solid var(--ink); font-size: 15px; line-height: 18px; }
.chapter-link:hover { color: var(--muted); border-color: var(--muted); }

.values { position: relative; width: 100%; height: 430px; padding: 54px 92px 0; background: var(--oat); }
.values > h2 { margin: 0; font-size: 34px; font-weight: 400; line-height: 59.5px; }
.values-label { position: absolute; right: 92px; top: 67px; margin: 0; color: var(--muted); font-size: 15px; line-height: 26.25px; letter-spacing: 1.5px; }
.values-grid { position: absolute; left: 92px; top: 150px; display: grid; grid-template-columns: repeat(4, 270px); gap: 54px; }
.values-grid article { height: 159px; border-top: 1px solid var(--line); }
.values-grid h3 { margin: 25px 0 0; font-size: 28px; font-weight: 400; line-height: 49px; }
.values-grid p { width: 270px; margin: 28px 0 0; color: #4e4742; font-size: 15px; line-height: 28.5px; }

.site-footer { position: relative; width: 100%; height: 430px; color: #fffaf3; background: var(--footer); text-align: center; }
.footer-logo { position: absolute; left: 50%; top: 34px; width: 290px; height: 132px; transform: translateX(-50%); }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }
.footer-slogan { position: absolute; left: 0; top: 157px; width: 100%; margin: 0; font-size: 18px; line-height: 31.5px; letter-spacing: 1.26px; }
.footer-rule { position: absolute; left: 50%; top: 239px; width: 780px; height: 1px; transform: translateX(-50%); background: #a98c79; }
.footer-row { position: absolute; left: 50%; top: 266px; display: grid; grid-template-columns: repeat(3, 260px); width: 780px; transform: translateX(-50%); color: #f2e8e0; font-size: 15px; line-height: 26.25px; text-align: left; }
.footer-row > :nth-child(2) { text-align: center; }
.footer-row > :nth-child(3) { text-align: right; }
.footer-filings { position: absolute; left: 0; top: 309px; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; color: #cdbeb4; font-size: 13px; line-height: 22.75px; }
.footer-filing { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.footer-filing:hover, .footer-filing:focus-visible { color: #fffaf3; text-decoration: underline; text-underline-offset: 3px; }
.footer-filing--psb { gap: 7px; }
.footer-filing img { flex: 0 0 14px; width: 14px; height: 16px; max-width: none; object-fit: contain; }
.footer-legal { position: absolute; left: 0; top: 332px; width: 100%; margin: 0; color: #cdbeb4; font-size: 13px; line-height: 22.75px; }

@media (max-width: 900px) {
  .site { height: auto; }
  .site-header { height: 124px; }
  .brand-mark { top: 4px; width: 184px; height: 82px; }
  .primary-nav { left: 20px; right: 20px; top: 83px; height: 30px; gap: 26px; overflow-x: auto; font-size: 14px; line-height: 30px; scrollbar-width: none; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .language { display: none; }
  .hero { height: min(62vw, 520px); min-height: 320px; }
  .hero img { left: -198.29%; top: -147.96%; width: 331.54%; height: 470.82%; }
  .manifesto { height: 430px; padding: 0 24px; text-align: center; }
  .crown-crop { top: 42px; }
  .manifesto h1 { left: 50%; top: 98px; width: calc(100% - 48px); transform: translateX(-50%); font-size: clamp(25px, 7vw, 32px); line-height: 1.55; white-space: normal; }
  .manifesto-copy { left: 50%; top: 170px; width: calc(100% - 48px); transform: translateX(-50%); font-size: 15px; line-height: 28px; white-space: normal; }
  .season-carousel { height: 520px; }
  .carousel-viewport { left: 24px; right: 0; top: 54px; width: auto; }
  .chapter, .chapter.reverse { display: flex; flex-direction: column; gap: 38px; height: auto; min-height: 860px; padding: 64px 24px 70px; }
  .chapter-image, .reverse .chapter-image { position: relative; left: auto; top: auto; width: 100%; height: min(112vw, 500px); order: 1; }
  .chapter-copy, .reverse .chapter-copy, .chapter-three .chapter-copy { position: relative; left: auto; top: auto; width: 100%; height: 250px; order: 2; }
  .body-copy { width: 100%; font-size: 17px; line-height: 32px; }
  .values { height: auto; min-height: 650px; padding: 48px 24px 64px; }
  .values-label { right: 24px; top: 63px; }
  .values-grid { position: relative; left: auto; top: auto; margin-top: 42px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 24px; }
  .values-grid article { height: auto; min-height: 180px; }
  .values-grid p { width: auto; margin-top: 18px; }
  .site-footer { height: 410px; }
  .footer-logo { top: 24px; width: 240px; height: 112px; }
  .footer-slogan { top: 142px; font-size: 16px; }
  .footer-rule { top: 210px; width: calc(100% - 48px); }
  .footer-row { top: 236px; width: calc(100% - 48px); grid-template-columns: 1fr; gap: 11px; text-align: center; font-size: 13px; }
  .footer-row > * { text-align: center !important; }
  .footer-filings { top: 344px; flex-wrap: wrap; gap: 2px 12px; padding: 0 20px; font-size: 11px; line-height: 20px; }
  .footer-legal { top: 372px; font-size: 11px; }
}

@media (max-width: 520px) {
  .primary-nav { gap: 22px; }
  .manifesto { height: 460px; }
  .values-grid { grid-template-columns: 1fr; }
  .values { min-height: 1050px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .motion-track { animation: none; width: 5268px; translate: 0 0; }
}