@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/cormorant-400.woff2') format('woff2')}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-600.woff2') format('woff2')}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-500italic.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/playfair-700.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --ink:#05131e;--panel:#0a1c29;--panel-2:#0d2335;
  --navy:#0c3958;--ivory:#f5f2ea;--strong:#f5f2ea;--text:#e8e2d4;--dim:#aebfcd;
  --ember:#e2793f;--rose:#c4203a;--rose-bright:#ea6277;
  --line:#1c3344;--line-soft:rgba(196,32,58,.18);
  --shadow:0 2.2rem 4.5rem -1rem rgba(0,0,0,.65);
  --glow:0 0 3.5rem -0.5rem rgba(196,32,58,.35);
  --bg-glow-1:#0c395833;--bg-glow-2:#c4203a14;--bg-glow-3:#0a1c2944;
  --noise-blend:overlay;--noise-opacity:.045;
  --nav-bg-solid:rgba(5,19,30,.86);--nav-bg-blur:rgba(5,19,30,.6);
  --book-glow:rgba(196,32,58,.4);
  --ease:cubic-bezier(.22,1,.36,1)
}
:root[data-theme="light"]{
  color-scheme:light;
  --ink:#f5f2ea;--panel:#fbf9f3;--panel-2:#fdfcf8;
  --strong:#0c3958;--text:#1b2d3f;--dim:#46596b;
  --ember:#c25f26;--rose-bright:#a8172f;
  --line:rgba(12,57,88,.18);--line-soft:rgba(196,32,58,.26);
  --shadow:0 2.2rem 4.5rem -1rem rgba(12,57,88,.16);
  --glow:0 0 3.5rem -0.5rem rgba(196,32,58,.2);
  --bg-glow-1:#0c395814;--bg-glow-2:#c4203a0f;--bg-glow-3:#ffffff8c;
  --noise-blend:multiply;--noise-opacity:.05;
  --nav-bg-solid:rgba(245,242,234,.88);--nav-bg-blur:rgba(245,242,234,.65);
  --book-glow:rgba(196,32,58,.22)
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:no-preference){
  html.theming,html.theming *,html.theming *::before,html.theming *::after{transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),fill .35s var(--ease),stroke .35s var(--ease)!important}
}
body{background:var(--ink);color:var(--text);font:400 1.22rem/1.8 "Cormorant Garamond",Georgia,serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background-color .35s var(--ease)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(54rem 38rem at 86% 4%,var(--bg-glow-1),transparent 68%),
    radial-gradient(46rem 38rem at 4% 98%,var(--bg-glow-2),transparent 70%),
    radial-gradient(38rem 30rem at 50% 50%,var(--bg-glow-3),transparent 72%);
  animation:drift 24s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--noise-opacity);mix-blend-mode:var(--noise-blend);
  background-image:url('/assets/noise.webp');background-size:64px 64px}
@keyframes drift{0%{opacity:.7}100%{opacity:1}}
a{color:inherit}
::selection{background:var(--rose);color:var(--ivory)}
:focus-visible{outline:2px solid var(--rose-bright);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.08;color:var(--strong);text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
.eyebrow{font:600 .82rem/1 "Cormorant Garamond",serif;letter-spacing:.3em;text-transform:uppercase;color:var(--rose-bright)}
.rule{width:4.8rem;height:1.1rem;margin:1.5rem 0;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 11'%3E%3Cpath d='M1 8c8-9 16-9 20-1s12 8 20 0 16-9 20-1' fill='none' stroke='%23c4203a' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
.muted{color:var(--dim)}
em{font-style:italic}

/* scroll reveal (progressive enhancement: only hides content once JS confirms it can reveal it again) */
html.js .reveal{opacity:0;transform:translateY(1.1rem);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* nav */
.nav-bar{position:sticky;top:0;z-index:40;background:var(--nav-bg-solid);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav-bar{background:var(--nav-bg-blur);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
}
nav{display:flex;align-items:center;gap:1.3rem;padding:1.3rem 0;position:relative}
nav .mark{display:inline-flex;align-items:center;gap:.8rem;font:600 1.28rem/1 "Cormorant Garamond",serif;letter-spacing:.01em;text-decoration:none;color:var(--strong);transition:color .25s var(--ease)}
nav .mark img{width:2.2rem;height:2.2rem;border-radius:3px;flex:none}
nav .mark:hover{color:var(--rose-bright)}
nav ul.nav-links{display:flex;gap:2.4rem;list-style:none;padding:0;margin-left:auto}
nav ul.nav-links a{position:relative;display:inline-block;padding:.4rem 0;text-decoration:none;color:var(--dim);font:600 .92rem/1 "Cormorant Garamond",serif;letter-spacing:.12em;text-transform:uppercase;transition:color .25s var(--ease)}
nav ul.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--rose-bright);transition:right .3s var(--ease)}
nav ul.nav-links a:hover{color:var(--strong)}
nav ul.nav-links a:hover::after{right:0}
.theme-toggle{display:none;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;flex:none;background:none;border:1px solid var(--line);color:var(--strong);cursor:pointer;padding:0;transition:border-color .25s var(--ease),color .25s var(--ease)}
html.js .theme-toggle{display:inline-flex}
.theme-toggle:hover{border-color:var(--rose);color:var(--rose-bright)}
.theme-toggle svg{overflow:visible}
.theme-toggle .moon,.theme-toggle .sun{transform-origin:12px 12px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.theme-toggle .sun{opacity:0;transform:rotate(-40deg) scale(.6)}
[data-theme="light"] .theme-toggle .moon{opacity:0;transform:rotate(40deg) scale(.6)}
[data-theme="light"] .theme-toggle .sun{opacity:1;transform:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:2.6rem;height:2.6rem;background:none;border:1px solid var(--line);cursor:pointer;padding:0}
.hamburger span{display:block;width:1.2rem;height:1px;background:var(--strong);margin:0 auto;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;padding:4rem 0 6rem;position:relative}
.hero::before{content:"";position:absolute;top:-4rem;right:-6rem;width:34rem;height:34rem;background:url('/assets/hero-mark.webp') center/contain no-repeat;opacity:.5;pointer-events:none;z-index:-1}
[data-theme="light"] .hero::before{background-image:url('/assets/hero-mark-light.webp');opacity:.1}
.hero h1{font-size:clamp(3rem,7.6vw,5.6rem);margin:1.2rem 0 .4rem}
.hero .by{font:italic 500 1.7rem "Cormorant Garamond",serif;color:var(--rose-bright)}
.hero p.lede{font-size:1.34rem;line-height:1.7;max-width:34rem;margin-top:1.3rem;color:var(--text)}
.herald{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;font-size:1rem;letter-spacing:.02em;color:var(--dim)}
.herald::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ember);box-shadow:0 0 .6rem .05rem var(--ember);flex:none;animation:pulse 2.6s ease-in-out infinite}
.herald a{color:var(--rose-bright);text-decoration:underline;text-underline-offset:.2rem;text-decoration-color:var(--line-soft)}
.herald a:hover{text-decoration-color:currentColor}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.cover{width:100%;height:auto;max-width:24rem;justify-self:end;box-shadow:var(--shadow),0 0 7rem -1rem rgba(12,57,88,.4);border-radius:2px;transition:transform .5s var(--ease)}
.cover:hover{transform:translateY(-.3rem) scale(1.01)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.3rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.85rem 1.7rem;border:1px solid var(--rose);color:var(--strong);text-decoration:none;font:600 .95rem/1 "Cormorant Garamond",serif;letter-spacing:.16em;text-transform:uppercase;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:hover,.btn.solid{background:var(--rose);color:var(--ivory)}
.btn.solid{box-shadow:var(--glow)}
.btn.solid:hover{background:transparent;color:var(--strong);box-shadow:none}

/* listen */
.listen{display:flex;align-items:center;gap:1rem;margin-top:2.1rem;color:var(--dim)}
.play{width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--rose);background:none;color:var(--rose-bright);cursor:pointer;font-size:1rem;flex:none;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.play:hover{background:var(--rose);color:var(--ivory);box-shadow:var(--glow)}

/* sections */
section{padding:5.5rem 0;position:relative}
section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,68rem);height:1px;background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent)}
section h2{font-size:clamp(2rem,4vw,2.8rem);margin:.8rem 0 1.4rem}
.quote{position:relative;font:italic 500 clamp(1.5rem,3.2vw,2.3rem)/1.5 "Cormorant Garamond",serif;color:var(--text);max-width:44rem;margin:0 auto;text-align:center;padding:0 1rem}
.quote::before{content:"\201C";position:absolute;top:-3rem;left:50%;transform:translateX(-50%);font:700 8rem/1 "Playfair Display",serif;color:var(--rose);opacity:.16;pointer-events:none}
.quote cite{display:block;margin-top:1.6rem;font-style:normal;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rose-bright)}

/* editions */
.editions{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.ed{position:relative;background:var(--panel);border:1px solid var(--line);padding:2.6rem;display:flex;flex-direction:column;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.ed:hover{transform:translateY(-.3rem);border-color:var(--line-soft);box-shadow:var(--shadow)}
.ed.feature{border-color:var(--rose);background:var(--panel-2);box-shadow:var(--glow)}
.ed.feature::before{content:"Complete set";position:absolute;top:0;right:0;transform:translateY(-50%);background:var(--rose);color:var(--ivory);font:600 .72rem/1 "Cormorant Garamond",serif;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .9rem}
.ed h3{font-size:1.7rem}
.ed p.muted{font-size:1.1rem}
.ed .price{font:700 2.6rem "Playfair Display",serif;color:var(--rose-bright);margin:.6rem 0 .2rem}
.ed ul{padding-left:1.2rem;margin:1.2rem 0 2rem;flex:1;font-size:1.12rem;color:var(--text)}
.ed li{margin:.45rem 0}
.ed li::marker{color:var(--rose)}
.ed .btn{text-align:center}

/* poems */
.parts{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem}
.parts > div{border-left:1px solid var(--line-soft);padding-left:1.2rem}
.parts h3{font-size:1.1rem;color:var(--rose-bright);letter-spacing:.06em;margin-bottom:.9rem}
.parts ol{padding-left:1.3rem;color:var(--text);font-size:1.1rem}
.parts li{margin:.32rem 0}
.parts li::marker{color:var(--rose);font-size:.85em}

/* video */
.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(5,19,30,.25),rgba(5,19,30,.72) 72%);pointer-events:none}
.video .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border:0;background:none;padding:0;cursor:pointer;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));transition:transform .2s ease}
.video .play-btn:hover,.video .play-btn:focus-visible{transform:translate(-50%,-50%) scale(1.08)}
.video .play-btn circle{fill:var(--rose);opacity:.92}
.video .play-btn path{fill:var(--ivory)}
.video-note{margin-top:1.1rem;font-size:1.05rem}

/* shelf (home) */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:3rem 2.6rem;align-items:start}
.book{text-decoration:none;display:block;min-width:0}
.book picture{display:block;overflow:hidden;border-radius:2px;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.book img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.book:hover picture{transform:translateY(-.5rem);box-shadow:var(--shadow),0 0 5rem -1rem var(--book-glow)}
.book h3{font-size:1.35rem;margin-top:1.3rem}
.book span{color:var(--dim);font-size:1.02rem}
.book.soon{pointer-events:none;min-width:0}
.book.soon div{position:relative;aspect-ratio:2/3;border:1px dashed var(--line);display:grid;place-items:center;color:var(--dim);font-style:italic;overflow:hidden}
.book.soon div::before{content:"";position:absolute;width:5rem;height:5rem;border-radius:50%;background:radial-gradient(circle,#c4203a33,transparent 70%);animation:flicker 4s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

footer{border-top:1px solid var(--line);padding:3.2rem 0;text-align:center;color:var(--dim);font-size:1.05rem;position:relative;z-index:1}
footer a{display:inline-block;padding:.5rem .8rem;text-decoration:none;transition:color .25s var(--ease)}
footer a:hover{color:var(--strong)}

@media (max-width:900px){
  nav ul.nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--panel);border:1px solid var(--line);border-top:none;box-shadow:var(--shadow);max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  nav ul.nav-links.open{max-height:24rem}
  nav ul.nav-links li{width:100%}
  nav ul.nav-links a{display:block;padding:1.05rem 1.5rem;border-top:1px solid var(--line)}
  nav ul.nav-links a::after{display:none}
  html.js .theme-toggle{margin-left:auto}
  .hamburger{display:flex}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:3rem;padding-top:2rem;text-align:center}
  .hero::before{opacity:.3;width:26rem;height:26rem;top:-2rem;right:-8rem}
  .hero .rule{margin:1.6rem auto}.hero p.lede{margin:1.2rem auto 0}
  .btns,.listen,.herald{justify-content:center}
  .cover{justify-self:center;max-width:17rem;order:-1}
  .editions{grid-template-columns:1fr}
  .parts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:1.15rem}
  .hero p.lede{max-width:28rem}
  nav{gap:.6rem}
  nav .mark{font-size:1.05rem;gap:.5rem}
  nav .mark img{width:1.9rem;height:1.9rem}
  .theme-toggle,.hamburger{width:2.3rem;height:2.3rem}
  .parts{grid-template-columns:1fr}
  .parts>div{padding-left:1rem}
}
