@font-face {
  font-family: "Source Han Serif Homepage";
  src: url("./assets/fonts/SourceHanSerifCN-Homepage.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "SSCD Brand Sans";
  src: url("./assets/fonts/SSCD-BrandSans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --paper: #f3eee6;
  --paper-deep: #e8dfd3;
  --ink: #261b20;
  --muted: #74686b;
  --wine: #87354b;
  --plum: #4b293b;
  --rose: #b97987;
  --line: rgba(68, 44, 52, .22);
  --serif: "Source Han Serif Homepage", "Songti SC", "STSong", serif;
  --brand-sans: "SSCD Brand Sans", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --sans: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --latin: "Bodoni 72", "Times New Roman", serif;
  --pad: clamp(24px, 5vw, 78px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper);
  font-family: var(--sans); font-weight: 300;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}
body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.intro-curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; }
.intro-panel { background: var(--plum); transition: transform 1.15s var(--ease); }
.intro-panel--left { transform-origin: left; }
.intro-panel--right { transform-origin: right; }
.intro-mark { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; color: var(--paper); transition: opacity .4s, transform .7s var(--ease); }
.intro-mark svg { width: 58px; height: 58px; margin-bottom: 18px; }
.intro-mark .fold-primary { fill: #f3eee6; }
.intro-mark .fold-secondary { fill: #c995a3; }
.intro-mark .fold-shadow { fill: #8f5063; }
.intro-mark span { font: 500 clamp(32px,4vw,54px)/1 var(--brand-sans); letter-spacing: .14em; }
.intro-mark i { margin-top: 18px; color: #cfaeb7; font: normal 9px/1 var(--serif); letter-spacing: .45em; }
body.is-loaded .intro-panel--left { transform: translateX(-101%); }
body.is-loaded .intro-panel--right { transform: translateX(101%); }
body.is-loaded .intro-mark { opacity: 0; transform: translateY(-12px); }
.scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: 60; width: 0; height: 2px; background: var(--wine); box-shadow: 0 0 12px rgba(135,53,75,.35); }
.cursor-glow { position: fixed; left: 0; top: 0; z-index: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle,rgba(181,113,130,.1),transparent 68%); transform: translate3d(-500px,-500px,0); }
.back-to-top { position: fixed; right: clamp(18px,2.4vw,36px); bottom: clamp(18px,2.4vw,34px); z-index: 45; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #f7eee8; background: rgba(75,41,59,.82); box-shadow: 0 10px 30px rgba(49,28,38,.18); backdrop-filter: blur(12px); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s var(--ease),visibility .35s,transform .35s var(--ease),background .25s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: rgba(135,53,75,.94); }
.back-to-top:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.back-to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; height: 96px; padding: 0 var(--pad); display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { width: 38px; height: 38px; flex: none; overflow: visible; filter: drop-shadow(0 4px 8px rgba(95,24,48,.08)); }
.brand-mark .fold-primary { fill: var(--wine); }
.brand-mark .fold-secondary { fill: #c77887; }
.brand-mark .fold-shadow { fill: #5f1830; }
.brand-mark--intro .fold-primary { fill: #f3eee6; }
.brand-mark--intro .fold-secondary { fill: #c995a3; }
.brand-mark--intro .fold-shadow { fill: #8f5063; }
.brand > span { display: flex; flex-direction: column; }
.brand strong { font: 500 23px/1.1 var(--brand-sans); letter-spacing: .08em; }
.brand i { margin-top: 5px; color: var(--wine); font: normal 11px/1.1 var(--sans); letter-spacing: .02em; }
.header-note { color: var(--muted); font: 300 10px/1 var(--serif); letter-spacing: .32em; }

.hero { min-height: min(900px,100svh); position: relative; display: grid; grid-template-columns: 47% 53%; }
.hero-copy { position: relative; z-index: 2; padding: clamp(150px,18vh,210px) 2vw 80px var(--pad); display: flex; flex-direction: column; align-items: flex-start; }
.hero-title-wrap { position: relative; width: max-content; max-width: 115%; }
.hero h1 { margin: 0; font: 400 clamp(50px,5.3vw,86px)/1.28 var(--serif); letter-spacing: .055em; }
.title-line { display: block; opacity: 0; transform: translateY(55px); animation: title-in 1.15s var(--ease) .9s forwards; }
.title-line:nth-child(2) { animation-delay: 1.05s; }
.title-line--indent { margin-left: clamp(22px,4vw,76px); white-space: nowrap; }
@keyframes title-in { to { opacity: 1; transform: none; } }
.scribble { width: 150px; margin: 15px 0 0 8px; overflow: visible; }
.scribble path { fill: none; stroke: var(--wine); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 230; stroke-dashoffset: 230; animation: draw 1.5s 1.65s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-intro { margin: 38px 0 27px; font: 300 16px/2 var(--serif); letter-spacing: .08em; }
.text-link { appearance: none; display: inline-flex; align-items: center; gap: 30px; padding: 11px 0 10px; border: 0; border-bottom: 1px solid var(--rose); background: none; color: var(--wine); cursor: pointer; font: 400 15px/1 var(--serif); letter-spacing: .12em; }
.text-link span:last-child { transition: transform .35s var(--ease); }
.text-link:hover span:last-child { transform: translateX(8px); }
.hero-media { position: relative; z-index: 1; min-height: 700px; overflow: hidden; }
.hero-image-mask { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 100% 0); animation: image-reveal 1.45s 1s var(--ease) forwards; }
@keyframes image-reveal { to { clip-path: inset(0); } }
.hero-media picture { height: 100%; }
.hero-media img { height: 108%; object-fit: cover; object-position: 56% center; transform: translate3d(var(--mouse-x,0),calc(var(--parallax-y,0px) + var(--mouse-y,0)),0) scale(1.055); transition: transform 1.4s var(--ease); }
.hero-media::before { content: ""; position: absolute; inset: 0 auto 0 -1px; z-index: 2; width: 32%; pointer-events: none; background: linear-gradient(90deg,var(--paper),rgba(243,238,230,.85) 28%,transparent); }
.image-caption { position: absolute; right: 21px; bottom: 105px; z-index: 3; margin: 0; color: rgba(255,255,255,.88); font: 300 11px/1 var(--serif); letter-spacing: .16em; writing-mode: vertical-rl; }
.ai-visual-note { position: absolute; right: 20px; bottom: 24px; z-index: 3; padding: 7px 9px 6px; border: 1px solid rgba(255,255,255,.38); color: rgba(255,255,255,.86); background: rgba(43,29,35,.22); backdrop-filter: blur(8px); font: 300 9px/1 var(--sans); letter-spacing: .18em; }
.ai-image-note { position: absolute; top: 16px; right: 16px; z-index: 4; padding: 7px 9px 6px; border: 1px solid rgba(255,255,255,.42); color: rgba(255,255,255,.94); background: rgba(39,25,31,.42); backdrop-filter: blur(8px); font: 300 9px/1 var(--sans); letter-spacing: .14em; }
.floating-words { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.floating-words span { position: absolute; color: rgba(116,74,89,.26); font: 300 12px/1 var(--serif); letter-spacing: .4em; animation: word-drift 8s ease-in-out infinite; }
.floating-words span:nth-child(1) { left: 39%; top: 28%; }
.floating-words span:nth-child(2) { left: 8%; bottom: 17%; animation-delay: -2.8s; }
.floating-words span:nth-child(3) { right: 4%; top: 44%; color: rgba(255,255,255,.38); animation-delay: -5.1s; }
@keyframes word-drift { 0%,100% { transform: translateY(0) rotate(-2deg); opacity: .45; } 50% { transform: translateY(-18px) rotate(2deg); opacity: 1; } }
.botanical { position: absolute; left: -15px; bottom: -40px; z-index: 2; width: 175px; height: 235px; pointer-events: none; animation: sway 7s ease-in-out infinite; transform-origin: bottom; }
.botanical svg { width: 100%; height: 100%; overflow: visible; }
.botanical path { fill: none; stroke: var(--rose); stroke-width: 1; opacity: .55; }
@keyframes sway { 50% { transform: rotate(2.5deg) translateX(4px); } }
.scroll-cue { position: absolute; left: 43.5%; bottom: 44px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; font: 300 10px/1 var(--serif); letter-spacing: .26em; writing-mode: vertical-rl; }
.scroll-cue i { display: block; width: 1px; height: 42px; background: var(--ink); transform-origin: top; animation: scroll-line 2s ease-in-out infinite; }
@keyframes scroll-line { 0%,100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

.poem-rail { position: relative; z-index: 3; overflow: hidden; border-block: 1px solid var(--line); padding: 15px 0; background: var(--paper); }
.poem-track { display: flex; gap: 55px; width: max-content; align-items: center; color: var(--muted); font: 300 12px/1 var(--serif); letter-spacing: .32em; animation: marquee 28s linear infinite; }
.poem-track b { color: var(--wine); }
@keyframes marquee { to { transform: translateX(-50%); } }

.feature { min-height: 820px; position: relative; display: grid; grid-template-columns: 13% 34% 43%; gap: 4%; align-items: center; padding: 110px var(--pad); overflow: hidden; color: #eee2d9; background: radial-gradient(circle at 76% 24%,rgba(177,111,133,.17),transparent 25%),linear-gradient(130deg,#3d2433,var(--plum) 50%,#35202e); }
.feature::after { content: ""; position: absolute; inset: 0; opacity: .25; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.feature > * { position: relative; z-index: 1; }
.feature-issue { height: 480px; display: flex; flex-direction: column; align-items: flex-start; }
.feature-issue span { font: 300 15px/1 var(--latin); letter-spacing: .14em; }
.feature-issue strong { margin-top: 10px; font: 300 27px/1 var(--latin); letter-spacing: .1em; }
.feature-issue i { display: block; width: 1px; height: 65px; margin: 24px 0; background: #cfadb0; }
.feature-issue em { font: normal 8px/1 var(--sans); letter-spacing: .42em; writing-mode: vertical-rl; }
.section-no { color: var(--rose); font-size: 11px; letter-spacing: .34em; }
.feature-copy h2 { margin: 18px 0 30px; font: 300 clamp(44px,4.3vw,72px)/1.2 var(--serif); letter-spacing: .12em; }
.feature-copy > p:last-of-type { max-width: 340px; color: #d9c8c8; font: 300 15px/2.1 var(--serif); letter-spacing: .06em; }
.text-link--light { margin-top: 18px; color: #e4c5ca; border-color: rgba(228,197,202,.45); }
.feature-media { margin: 0; justify-self: end; width: min(100%,480px); }
.feature-frame { position: relative; height: 580px; overflow: hidden; }
.feature-frame img { height: 112%; object-fit: cover; object-position: center; animation: portrait-breathe 12s ease-in-out infinite alternate; }
@keyframes portrait-breathe { to { transform: scale(1.035) translateY(-1.2%); } }
.feature-media figcaption { margin-top: 15px; text-align: right; color: #bfa8af; font: 300 10px/1 var(--serif); letter-spacing: .2em; }

.seasons { position: relative; background: var(--paper); }
.season-scroll { position: relative; height: 340vh; }
.season-stage { position: sticky; top: 0; height: 100vh; min-height: 720px; display: grid; grid-template-columns: 39% 61%; overflow: hidden; background: var(--season-bg,#f1eae1); transition: background 1s var(--ease); }
.season-stage[data-season-theme="spring"] { --season-bg: #f2ebe3; --season-accent: #9c4055; }
.season-stage[data-season-theme="summer"] { --season-bg: #eee5d4; --season-accent: #8b6339; }
.season-stage[data-season-theme="autumn"] { --season-bg: #ded1cd; --season-accent: #792f43; }
.season-stage[data-season-theme="winter"] { --season-bg: #e4e3df; --season-accent: #4e5860; }
.season-sidebar { position: relative; z-index: 3; padding: 8vh 5vw 6vh var(--pad); border-right: 1px solid var(--line); }
.season-numbers { position: absolute; left: var(--pad); top: 14vh; display: flex; flex-direction: column; gap: 13px; }
.season-numbers button { appearance: none; display: flex; align-items: center; gap: 10px; padding: 3px 0; border: 0; background: none; color: #827477; cursor: pointer; font: 300 13px/1 var(--latin); }
.season-numbers button::after { content: ""; width: 0; height: 1px; background: var(--season-accent); transition: width .35s var(--ease); }
.season-numbers button i { font: normal 9px/1 var(--serif); opacity: 0; }
.season-numbers button.is-active { color: var(--season-accent); }
.season-numbers button.is-active::after { width: 22px; }
.season-numbers button.is-active i { opacity: 1; }
.season-word { position: absolute; left: 30%; top: 4vh; color: var(--season-accent); transition: color .8s; }
.season-word span { display: block; font: 400 clamp(200px,25vw,390px)/1 var(--serif); transform: translateY(0); animation: season-word-in .85s var(--ease); }
@keyframes season-word-in { from { opacity: 0; transform: translateY(35px); } }
.season-heading { position: absolute; left: 26%; bottom: 10vh; max-width: 330px; }
.season-heading h2 { margin: 0 0 22px; font: 400 clamp(26px,2.6vw,42px)/1.45 var(--serif); letter-spacing: .08em; }
.season-heading p { margin: 0; color: var(--muted); font: 300 13px/2 var(--serif); letter-spacing: .05em; }
.ribbon-mark { position: absolute; left: var(--pad); bottom: 6vh; width: 47px; transition: color .8s; transform: rotate(-8deg); }
.ribbon-mark .fold-primary { fill: var(--season-accent); }
.ribbon-mark .fold-secondary { fill: color-mix(in srgb,var(--season-accent),white 38%); }
.season-visuals { position: relative; min-width: 0; }
.season-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: opacity .5s, visibility .5s, clip-path .72s var(--ease); }
.season-slide.is-active { opacity: 1; visibility: visible; clip-path: inset(0); z-index: 2; }
.season-slide picture { position: absolute; inset: 0; }
.season-slide img { height: 100%; object-fit: cover; transform: scale(1.035); transition: transform 8s linear; }
.season-slide.is-active img { transform: scale(1); }
.season-slide:nth-child(1) img { object-position: center; }
.season-slide:nth-child(2) img { object-position: 57% center; }
.season-slide:nth-child(3) img { object-position: center; }
.season-slide:nth-child(4) img { object-position: 60% center; }
.season-copy { position: absolute; z-index: 2; right: clamp(25px,5vw,80px); bottom: 8vh; width: min(380px,70%); padding: 28px 30px; background: rgba(32,24,26,.82); color: #f5eae4; backdrop-filter: blur(10px); }
.season-copy > p:first-child { margin: 0; color: #d6aab3; font: 300 10px/1 var(--serif); letter-spacing: .28em; }
.season-copy h3 { margin: 14px 0 18px; font: 300 clamp(30px,3.2vw,50px)/1.2 var(--serif); letter-spacing: .12em; }
.season-copy > p:nth-of-type(2) { margin: 0; color: #ddcecb; font: 300 13px/1.9 var(--serif); }
.open-story { appearance: none; margin-top: 20px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(231,194,203,.45); background: none; color: #e8c4cb; cursor: pointer; font: 300 12px/1 var(--serif); letter-spacing: .15em; }
.open-story span { display: inline-block; margin-left: 22px; transition: transform .3s; }
.open-story:hover span { transform: translateX(6px); }
.season-instruction { position: absolute; z-index: 4; left: calc(39% - 28px); bottom: 5vh; margin: 0; color: rgba(38,27,32,.5); font: 300 9px/1 var(--serif); letter-spacing: .24em; writing-mode: vertical-rl; }
.season-instruction span { display: inline-block; margin-top: 12px; animation: scroll-line 2s infinite; }
.season-sentinel { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.season-sentinel:nth-of-type(1) { top: 12.5%; }
.season-sentinel:nth-of-type(2) { top: 37.5%; }
.season-sentinel:nth-of-type(3) { top: 62.5%; }
.season-sentinel:nth-of-type(4) { top: 87.5%; }

.quote-section { min-height: 650px; position: relative; display: grid; place-content: center; overflow: hidden; text-align: center; color: #f1e4df; }
.quote-silk { position: absolute; inset: -8%; }
.quote-silk::after { content: ""; position: absolute; inset: 0; background: rgba(31,8,14,.26); }
.quote-silk picture,.quote-silk img { width: 100%; height: 100%; }
.quote-silk img { object-fit: cover; transform: translateY(var(--silk-y,0)) scale(1.08); animation: silk-breathe 14s ease-in-out infinite alternate; }
@keyframes silk-breathe { to { transform: translateY(var(--silk-y,0)) scale(1.14); } }
.quote-section blockquote { position: relative; z-index: 2; margin: 0; font: 300 clamp(38px,5vw,70px)/1.6 var(--serif); letter-spacing: .12em; text-shadow: 0 2px 25px rgba(0,0,0,.28); }
.quote-section > p { position: relative; z-index: 2; margin-top: 28px; color: #e2b9c2; font: 300 12px/1 var(--serif); letter-spacing: .35em; }
.quote-orbit { position: absolute; z-index: 1; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; animation: rotate 28s linear infinite; }
.quote-orbit span { position: absolute; inset: -22px; color: rgba(255,255,255,.38); font: 9px/1 var(--sans); letter-spacing: .26em; }
@keyframes rotate { to { transform: rotate(360deg); } }

.newsletter { position: relative; display: grid; grid-template-columns: .7fr 1.3fr 1fr; gap: 5vw; align-items: center; min-height: 390px; padding: 85px var(--pad); border-bottom: 1px solid var(--line); }
.letter-mark { position: relative; width: 180px; aspect-ratio: 1.5; border: 1px solid var(--line); transform: rotate(-5deg); display: grid; place-content: center; text-align: center; }
.letter-mark::before,.letter-mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); transform-origin: left; transform: rotate(32deg); }
.letter-mark::after { transform-origin: right; transform: rotate(-32deg); }
.letter-mark span,.letter-mark strong { position: relative; z-index: 1; background: var(--paper); }
.letter-mark span { font: 300 10px/1.5 var(--serif); letter-spacing: .3em; }
.letter-mark strong { font: 400 15px/1.5 var(--serif); letter-spacing: .12em; }
.newsletter h2 { margin: 0 0 18px; font: 300 clamp(30px,3vw,46px)/1.55 var(--serif); letter-spacing: .1em; }
.newsletter-copy p { color: var(--muted); font: 300 13px/1.8 var(--serif); letter-spacing: .06em; }
.newsletter-label { margin: 0 0 10px; color: var(--wine) !important; font: 500 9px/1 var(--sans) !important; letter-spacing: .22em !important; }
.subscribe-pending { position: relative; align-self: center; padding: 20px 0 18px; border-block: 1px solid var(--line); }
.subscribe-pending::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36%; height: 1px; background: var(--wine); }
.subscribe-pending span { display: block; margin-bottom: 13px; color: var(--wine); font: 500 9px/1 var(--sans); letter-spacing: .24em; }
.subscribe-pending strong { display: block; color: var(--ink); font: 300 15px/1.7 var(--serif); letter-spacing: .07em; }
.subscribe-pending p { margin: 7px 0 0; color: var(--muted); font: 300 12px/1.6 var(--serif); letter-spacing: .08em; }

.site-footer { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; padding: 72px var(--pad) 28px; }
.brand--footer strong { font-size: 28px; }
.site-footer > div:first-child > p { color: var(--muted); font: 300 11px/1.8 var(--serif); letter-spacing: .08em; }
.footer-poem { justify-self: end; margin: 0; text-align: right; color: var(--muted); font: 300 14px/2 var(--serif); letter-spacing: .12em; }
.friend-links { grid-column: 1/-1; display: flex; align-items: center; gap: 14px; margin-top: 28px; color: #978a8c; font-size: 10px; line-height: 1.6; letter-spacing: .12em; }
.friend-links span { color: #b0a4a6; }
.friend-links a { padding: 5px 0; color: #716668; transition: color .25s; }
.friend-links a:hover,.friend-links a:focus-visible { color: var(--wine); }
.footer-bottom { grid-column: 1/-1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: -26px; padding-top: 24px; border-top: 1px solid var(--line); color: #85787a; font-size: 10px; line-height: 1.6; letter-spacing: .12em; }
.footer-bottom a { transition: color .25s; }
.footer-bottom a:hover,.footer-bottom a:focus-visible { color: var(--wine); }

.story-dialog { width: min(1180px,calc(100vw - 50px)); max-width: none; height: min(760px,calc(100vh - 50px)); max-height: none; padding: 0; border: 0; color: var(--ink); background: transparent; overflow: visible; }
.story-dialog::backdrop { background: rgba(30,18,24,.82); backdrop-filter: blur(10px); }
.dialog-surface { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 38% 62%; overflow: hidden; background: var(--paper); box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.dialog-close { position: absolute; right: 24px; top: 20px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; background: rgba(243,238,230,.78); cursor: pointer; font: 300 11px/1 var(--serif); letter-spacing: .12em; }
.dialog-close i { position: relative; width: 18px; height: 18px; }
.dialog-close i::before,.dialog-close i::after { content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 1px; background: var(--ink); transform: rotate(45deg); }
.dialog-close i::after { transform: rotate(-45deg); }
.dialog-copy { position: relative; z-index: 2; padding: 54px 48px; overflow: hidden; }
.dialog-season-word { position: absolute; left: 30px; top: -35px; z-index: -1; color: rgba(135,53,75,.1); font: 500 300px/1 var(--serif); }
.dialog-label { margin: 115px 0 10px; color: var(--wine); font: 300 10px/1 var(--serif); letter-spacing: .3em; }
.dialog-copy h2 { margin: 0 0 35px; font: 400 46px/1.3 var(--serif); letter-spacing: .12em; }
.dialog-body p { margin: 0 0 18px; color: #5f5356; font: 300 14px/2 var(--serif); letter-spacing: .04em; }
.dialog-image { margin: 34px 0; overflow: hidden; border-radius: 150px 0 0 150px; }
.dialog-image img { width: 100%; height: 100%; object-fit: cover; }
.dialog-next { position: absolute; right: 35px; bottom: 25px; z-index: 4; padding: 12px 15px; border: 0; background: rgba(243,238,230,.86); color: var(--wine); cursor: pointer; font: 300 13px/1 var(--serif); letter-spacing: .1em; }
.dialog-next i { margin-left: 22px; font-style: normal; }
.story-dialog[open] { animation: dialog-in .6s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(25px) scale(.985); } }

[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease),transform 1s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .site-header { height: 78px; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { min-height: 620px; padding-top: 145px; padding-bottom: 70px; }
  .hero-media { min-height: 680px; }
  .hero-media::before { inset: -1px 0 auto; width: 100%; height: 20%; background: linear-gradient(var(--paper),transparent); }
  .scroll-cue { display: none; }
  .feature { grid-template-columns: 80px 1fr; padding-block: 90px; }
  .feature-media { grid-column: 2; justify-self: start; width: min(100%,520px); }
  .feature-copy { padding-bottom: 45px; }
  .feature-issue { grid-row: 1/3; }
  .season-stage { grid-template-columns: 42% 58%; }
  .season-word { left: 20%; top: 8vh; }
  .season-word span { font-size: clamp(150px,27vw,260px); }
  .season-heading { left: 20%; bottom: 12vh; padding-right: 20px; }
  .season-copy { right: 20px; bottom: 6vh; width: calc(100% - 40px); }
  .season-instruction { left: calc(42% - 22px); }
  .newsletter { grid-template-columns: .65fr 1.35fr; }
  .subscribe-pending { grid-column: 2; }
}

@media (max-width: 640px) {
  :root { --pad: 22px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand strong { font-size: 20px; }
  .header-note { max-width: 110px; text-align: right; line-height: 1.7; }
  .hero-copy { min-height: 560px; padding-top: 130px; }
  .hero h1 { font-size: clamp(43px,13vw,60px); line-height: 1.35; }
  .title-line--indent { margin-left: 0; white-space: normal; }
  .hero-intro { margin-top: 30px; font-size: 14px; }
  .hero-media { min-height: 560px; }
  .hero-media img { object-position: 63% center; }
  .ai-visual-note { right: 16px; bottom: 16px; }
  .botanical { width: 130px; opacity: .6; }
  .feature { display: block; padding-block: 75px; }
  .feature-issue { height: auto; flex-direction: row; align-items: baseline; gap: 8px; margin-bottom: 45px; }
  .feature-issue strong { margin-top: 0; font-size: 24px; }
  .feature-issue i,.feature-issue em { display: none; }
  .feature-copy { padding: 0 0 55px; }
  .feature-copy h2 { font-size: 46px; }
  .feature-frame { height: 500px; }
  .season-scroll { height: 320svh; }
  .season-stage { min-height: 640px; height: 100svh; display: block; }
  .season-sidebar { position: absolute; inset: 0; z-index: 5; padding: 0; border: 0; pointer-events: none; }
  .season-numbers { top: 22px; left: 22px; flex-direction: row; gap: 16px; pointer-events: auto; }
  .season-numbers button { gap: 4px; color: rgba(255,255,255,.65); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
  .season-numbers button::after,.season-numbers button i { display: none; }
  .season-numbers button.is-active { color: white; border-bottom: 1px solid white; }
  .season-word { left: 18px; top: 58px; color: rgba(255,255,255,.82); text-shadow: 0 4px 25px rgba(0,0,0,.2); }
  .season-word span { font-size: 145px; }
  .season-heading { display: none; }
  .ribbon-mark { display: none; }
  .season-visuals { height: 100%; }
  .season-slide img { object-position: center; }
  .season-slide:nth-child(2) img { object-position: 63% center; }
  .season-slide:nth-child(3) img { object-position: 44% center; }
  .season-slide:nth-child(4) img { object-position: 62% center; }
  .season-copy { right: 18px; left: 18px; bottom: 24px; width: auto; padding: 24px; background: rgba(29,22,24,.76); }
  .season-copy h3 { font-size: 38px; }
  .season-instruction { display: none; }
  .quote-section { min-height: 540px; }
  .quote-section blockquote { padding: 0 20px; font-size: 32px; }
  .quote-orbit { width: 270px; height: 270px; margin: -135px; }
  .newsletter { display: flex; flex-direction: column; align-items: flex-start; padding-block: 70px; }
  .letter-mark { width: 140px; }
  .subscribe-pending { width: 100%; margin-top: 8px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-poem { justify-self: start; text-align: left; }
  .friend-links { grid-column: auto; margin-top: 12px; font-size: 10.5px; }
  .footer-bottom { grid-column: auto; flex-direction: column; gap: 11px; font-size: 10.5px; line-height: 1.55; letter-spacing: .1em; }
  .story-dialog { width: 100vw; height: 100svh; }
  .dialog-surface { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .dialog-image { grid-row: 1; }
  .dialog-image { margin: 0; border-radius: 0; }
  .dialog-copy { grid-row: 2; padding: 25px 24px 70px; overflow-y: auto; }
  .dialog-season-word { left: 15px; top: -25px; font-size: 180px; }
  .dialog-label { margin: 0 0 8px; }
  .dialog-copy h2 { margin-bottom: 18px; font-size: 34px; }
  .dialog-body p { margin-bottom: 12px; font-size: 13px; line-height: 1.8; }
  .dialog-close { right: 12px; top: 12px; }
  .dialog-next { right: 16px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}