/* ===========================================================
   DEERWOOD POETICS
   A quiet, literary house for poems in three languages.
   Palette evolves the dusty-blue + parchment you love,
   adding a single antique-gold accent for warmth.
   =========================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

/* ---------- Theme tokens ---------- */
:root{
  /* default: "Parchment & Blue" */
  --paper:        #f4f0e7;
  --paper-2:      #ece6d8;
  --band:         #aebfcf;   /* the dusty blue, as a soft band */
  --band-ink:     #2c3a47;   /* deep ink-blue for text on band */
  --ink:          #15191f;   /* the deer's ink */
  --ink-soft:     #4a5159;
  --ink-faint:    rgba(21,25,31,.55);
  --accent:       #a4854f;   /* antique gold */
  --accent-deep:  #846836;
  --line:         rgba(21,25,31,.16);
  --line-soft:    rgba(21,25,31,.09);
  --card:         #faf7f0;

  --display: "Cormorant Garamond", Georgia, serif;
  --serif:   "EB Garamond", Georgia, serif;

  --maxw: 1180px;
  --read: 660px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --rise: 26px;            /* scroll-reveal travel; 0 when motion off */
  --dur: 1100ms;          /* hero timing */
}

[data-theme="mist"]{
  --paper:#eef1f4; --paper-2:#e3e8ed; --band:#b9c6d3; --band-ink:#27323d;
  --ink:#1a2027; --ink-soft:#515962; --ink-faint:rgba(26,32,39,.55);
  --accent:#5f7891; --accent-deep:#48607a; --line:rgba(26,32,39,.16);
  --line-soft:rgba(26,32,39,.08); --card:#f6f8fa;
}
[data-theme="forest"]{
  --paper:#f2eee2; --paper-2:#e7e1d0; --band:#aebcb1; --band-ink:#26302a;
  --ink:#171c18; --ink-soft:#49514a; --ink-faint:rgba(23,28,24,.55);
  --accent:#6e7d5b; --accent-deep:#566448; --line:rgba(23,28,24,.16);
  --line-soft:rgba(23,28,24,.08); --card:#f8f5ec;
}
[data-theme="ivory"]{
  --paper:#f6f4ef; --paper-2:#ebe7df; --band:#cfc8bb; --band-ink:#2a261f;
  --ink:#141310; --ink-soft:#4f4a42; --ink-faint:rgba(20,19,16,.55);
  --accent:#8c7a63; --accent-deep:#6f5f4b; --line:rgba(20,19,16,.16);
  --line-soft:rgba(20,19,16,.08); --card:#fbf9f4;
}

/* accent override (tweak) wins over theme accent */
:root[data-accent]{ }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--band); color:var(--ink); }

/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E");
}

/* ---------- Shared layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; }
section{ position:relative; z-index:1; }

.eyebrow{
  font-family:var(--serif); font-size:13px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--accent-deep);
  display:inline-flex; align-items:center; gap:14px; margin:0 0 22px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--accent); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:34px; height:1px; background:var(--accent); display:inline-block; }

h2.section-title{
  font-family:var(--display); font-weight:500; font-size:clamp(34px,4.6vw,58px);
  line-height:1.04; letter-spacing:-.01em; margin:0; color:var(--ink);
}
.lead{ font-size:clamp(19px,2vw,23px); line-height:1.7; color:var(--ink-soft); max-width:46ch; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; }
.reveal.in{ animation:dwReveal 1.1s var(--ease) both; }
@keyframes dwReveal{ from{ opacity:0; transform:translateY(var(--rise)); } to{ opacity:1; transform:none; } }
.reveal[data-d="1"].in{ animation-delay:.08s; }
.reveal[data-d="2"].in{ animation-delay:.16s; }
.reveal[data-d="3"].in{ animation-delay:.24s; }
.reveal[data-d="4"].in{ animation-delay:.32s; }
.reveal[data-d="5"].in{ animation-delay:.40s; }

/* ===========================================================
   NAV
   =========================================================== */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; transition:padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
header.nav.solid{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:13px 32px; box-shadow:0 1px 0 var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:13px; opacity:0; animation:dwDrop .9s var(--ease) .25s both; }
@keyframes dwDrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.brand img{ width:30px; height:auto; filter:drop-shadow(0 1px 0 rgba(0,0,0,.04)); }
.brand .bn{ font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:.16em; line-height:1; text-transform:uppercase; }
.brand .bn small{ display:block; font-size:9.5px; letter-spacing:.42em; color:var(--accent-deep); margin-top:3px; font-weight:500; }

.nav-right{ display:flex; align-items:center; gap:34px; }
nav.links{ display:flex; gap:30px; }
nav.links a{
  font-size:14.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  position:relative; padding:4px 0; transition:color .3s; white-space:nowrap;
}
nav.links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .4s var(--ease); }
nav.links a:hover{ color:var(--ink); }
nav.links a:hover::after{ right:0; }

.lang{ display:flex; align-items:center; gap:2px; font-size:13px; letter-spacing:.08em; }
.lang button{
  background:none; border:none; cursor:pointer; font-family:var(--serif);
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  padding:5px 7px; transition:color .3s; border-radius:2px;
}
.lang button.active{ color:var(--ink); }
.lang button:hover{ color:var(--accent-deep); }
.lang .sep{ color:var(--line); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; position:relative; z-index:70; }
.nav-toggle span{ display:block; width:24px; height:1.5px; background:var(--ink); margin:5px 0; transition:transform .35s var(--ease), opacity .25s; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:88px 24px 60px; overflow:hidden; }
.hero-mist{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-mist::before, .hero-mist::after{
  content:""; position:absolute; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--band) 70%, transparent), transparent 68%);
  filter:blur(40px); opacity:.7;
}
.hero-mist::before{ width:70vw; height:60vh; top:8%; left:50%; transform:translateX(-50%); animation:drift1 26s var(--ease) infinite alternate; }
.hero-mist::after{ width:46vw; height:42vh; bottom:6%; left:30%; opacity:.45; animation:drift2 32s var(--ease) infinite alternate; }
@keyframes drift1{ from{ transform:translate(-52%,0) scale(1); } to{ transform:translate(-48%,3%) scale(1.08); } }
@keyframes drift2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6%,-4%) scale(1.12); } }

.hero-eyebrow{ font-size:13px; letter-spacing:.46em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 22px;
  opacity:0; animation:dwRise 1s var(--ease) .15s both; }

.hero-deer{ width:min(208px,38vw,30vh); height:auto; margin:0 auto;
  opacity:0; animation:dwRiseBig 1.5s var(--ease) .3s both; }

.hero-title{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(36px,6.4vw,84px); letter-spacing:.12em; line-height:.96; margin:20px 0 6px; }
.hero-title small{ display:block; font-size:.32em; letter-spacing:.62em; color:var(--accent-deep); margin-top:12px; padding-left:.62em;
  opacity:0; animation:dwRise 1s var(--ease) 1.15s both; }
.hero-title .ch{ display:inline-block; opacity:0; animation:dwRise .8s var(--ease) both; animation-delay:.5s; }

.hero-rule{ width:0; height:1px; background:var(--accent); margin:22px auto 18px; animation:dwGrow 1.1s var(--ease) 1s both; }

.hero-tag{ font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.6vw,30px); line-height:1.4; color:var(--ink-soft); max-width:22ch; margin:0 auto;
  opacity:0; animation:dwRise 1.2s var(--ease) 1.05s both; }

.hero-scroll{ position:relative; margin-top:clamp(40px,6vh,84px);
  font-size:11.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; animation:dwFade 1s var(--ease) 1.6s both; }
.hero-scroll .dot{ width:1px; height:46px; background:linear-gradient(var(--ink-faint),transparent); animation:scrolldot 2.4s ease-in-out infinite; }
@keyframes scrolldot{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

@keyframes dwRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes dwRiseBig{ from{ opacity:0; transform:translateY(38px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes dwGrow{ from{ width:0; } to{ width:88px; } }
@keyframes dwFade{ from{ opacity:0; } to{ opacity:1; } }

/* Short viewports (13" laptops, landscape phones): keep the hero compact
   and retire the scroll cue so it can't collide with the tagline. */
@media (max-height:840px){
  .hero{ padding-top:78px; padding-bottom:40px; }
  .hero-eyebrow{ margin-bottom:16px; }
  .hero-deer{ width:min(168px,30vw,26vh); }
  .hero-title{ margin-top:14px; }
  .hero-rule{ margin:16px auto 14px; }
}
@media (max-height:820px){
  .hero-scroll{ display:none; }
}

/* ===========================================================
   MANIFESTO
   =========================================================== */
.manifesto{ padding:130px 0 120px; }
.manifesto .wrap{ max-width:880px; text-align:center; }
.manifesto p{ font-family:var(--display); font-weight:400; font-size:clamp(26px,3.4vw,40px); line-height:1.42; letter-spacing:-.005em; margin:0; color:var(--ink); }
.manifesto p .hl{ color:var(--accent-deep); font-style:italic; }
.manifesto .sig{ margin-top:42px; font-size:14px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); }

/* ===========================================================
   FEATURED POEM
   =========================================================== */
.featured{ background:var(--paper-2); padding:120px 0 130px; position:relative; }
.featured::before, .featured::after{ content:""; position:absolute; left:0; right:0; height:1px; background:var(--line-soft); }
.featured::before{ top:0; } .featured::after{ bottom:0; }
.featured .grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start; }
.featured .aside{ position:sticky; top:120px; }
.featured .aside .deer-min{ width:96px; opacity:.9; margin-bottom:30px; }
.featured h2{ font-family:var(--display); font-weight:500; font-size:clamp(40px,5.2vw,68px); line-height:1; margin:0 0 14px; }
.featured .meta{ font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.featured .meta .lang-tag{ color:var(--accent-deep); }
.featured .aside .blurb{ margin-top:28px; font-style:italic; color:var(--ink-soft); max-width:30ch; font-size:18px; }

.poem-body{ font-size:21px; line-height:1.95; }
.poem-body .mv{ font-family:var(--display); font-style:italic; font-size:25px; color:var(--accent-deep); margin:34px 0 14px; letter-spacing:.01em; }
.poem-body .mv:first-child{ margin-top:0; }
.poem-body .st{ margin:0 0 26px; }
.poem-body .st p{ margin:0; }
.poem-body .dropcap::first-letter{ initial-letter:2.2; font-family:var(--display); font-weight:600; color:var(--accent-deep); margin-right:10px; -webkit-initial-letter:2.2; }

/* ===========================================================
   COLLECTION
   =========================================================== */
.collection{ padding:130px 0 140px; }
.collection .head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; margin-bottom:14px; }
.filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filters button{
  background:none; border:1px solid var(--line); cursor:pointer; font-family:var(--serif);
  font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  padding:9px 18px; border-radius:100px; transition:.35s var(--ease);
}
.filters button:hover{ border-color:var(--ink-soft); color:var(--ink); }
.filters button.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.poem-grid{ margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.pcard{
  background:var(--card); padding:42px 34px 38px; cursor:pointer; position:relative;
  display:flex; flex-direction:column; min-height:300px; transition:background .5s var(--ease), transform .5s var(--ease);
  overflow:hidden;
}
.pcard::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); transition:width .5s var(--ease); }
.pcard:hover{ background:var(--paper); }
.pcard:hover::after{ width:100%; }
.pcard .tag{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:auto; }
.pcard h3{ font-family:var(--display); font-weight:500; font-size:31px; line-height:1.06; margin:26px 0 12px; letter-spacing:-.005em; }
.pcard .ex{ color:var(--ink-faint); font-style:italic; font-size:17px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pcard .open{ margin-top:24px; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:10px; transition:gap .4s var(--ease), color .4s; }
.pcard:hover .open{ gap:18px; color:var(--ink); }
.pcard .open .arr{ width:20px; height:1px; background:currentColor; position:relative; }
.pcard .open .arr::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }

.collection-empty{ grid-column:1/-1; text-align:center; padding:90px 20px; background:var(--card); }
.collection-empty .deer-min{ width:64px; margin:0 auto 24px; opacity:.6; }
.collection-empty p{ font-family:var(--display); font-style:italic; font-size:26px; color:var(--ink-soft); margin:0; }
.collection-empty small{ display:block; margin-top:12px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }

/* ===========================================================
   MODAL (reading view)
   =========================================================== */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.modal.open{ opacity:1; pointer-events:auto; }
.modal-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--ink) 42%, transparent); backdrop-filter:blur(3px); }
.modal-sheet{
  position:relative; background:var(--paper); width:min(760px,100%); min-height:100svh;
  padding:96px 56px 120px; box-shadow:0 0 80px rgba(0,0,0,.18);
  transform:translateY(40px); opacity:0; transition:transform .6s var(--ease), opacity .6s var(--ease);
  overflow:auto; max-height:100svh;
}
.modal.open .modal-sheet{ transform:none; opacity:1; }
.modal-close{ position:fixed; top:26px; right:28px; z-index:2; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:color-mix(in srgb,var(--paper) 80%, transparent); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.35s var(--ease); backdrop-filter:blur(6px); }
.modal-close:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); transform:rotate(90deg); }
.modal-close svg{ width:18px; height:18px; }
.modal-tag{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:20px; display:flex; gap:16px; align-items:center; justify-content:center; }
.modal h2{ font-family:var(--display); font-weight:500; font-size:clamp(40px,6vw,62px); line-height:1.02; text-align:center; margin:0 0 8px; }
.modal .by{ text-align:center; font-style:italic; color:var(--ink-faint); margin-bottom:18px; }
.modal-rule{ width:60px; height:1px; background:var(--accent); margin:0 auto 44px; }
.modal .poem-body{ max-width:var(--read); margin:0 auto; }
.modal-nav{ max-width:var(--read); margin:64px auto 0; padding-top:30px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:20px; }
.modal-nav button{ background:none; border:none; cursor:pointer; font-family:var(--serif); color:var(--ink-soft); text-align:left; transition:color .3s; max-width:46%; }
.modal-nav button:hover{ color:var(--ink); }
.modal-nav button.next{ text-align:right; }
.modal-nav .ml{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:6px; }
.modal-nav .mt{ font-family:var(--display); font-size:23px; }
.modal-nav button:disabled{ opacity:.25; cursor:default; }

/* ===========================================================
   THE BOOK
   =========================================================== */
.book{ background:var(--band); color:var(--band-ink); padding:130px 0; position:relative; }
.book .grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.book .eyebrow{ color:var(--band-ink); }
.book .eyebrow::before{ background:var(--band-ink); }
.book h2{ font-family:var(--display); font-weight:500; font-size:clamp(36px,4.8vw,60px); line-height:1.05; margin:0 0 24px; color:var(--band-ink); }
.book p{ color:color-mix(in srgb,var(--band-ink) 82%, transparent); max-width:42ch; font-size:19px; }
.book-form{ display:flex; gap:10px; margin-top:34px; max-width:420px; flex-wrap:wrap; }
.book-form input{ flex:1 1 200px; background:color-mix(in srgb,var(--paper) 60%, transparent); border:1px solid color-mix(in srgb,var(--band-ink) 30%, transparent);
  padding:15px 18px; font-family:var(--serif); font-size:16px; color:var(--band-ink); border-radius:2px; }
.book-form input::placeholder{ color:color-mix(in srgb,var(--band-ink) 50%, transparent); }
.book-form input:focus{ outline:none; border-color:var(--band-ink); }
.book-note{ margin-top:14px; font-size:13px; letter-spacing:.04em; color:color-mix(in srgb,var(--band-ink) 65%, transparent); font-style:italic; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--serif); font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 30px; border-radius:2px; cursor:pointer; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:.4s var(--ease); }
.btn:hover{ background:transparent; color:var(--ink); }
.btn.on-band{ border-color:var(--band-ink); background:var(--band-ink); color:var(--band); }
.btn.on-band:hover{ background:transparent; color:var(--band-ink); }

/* book cover mock */
.book-cover{ position:relative; aspect-ratio:3/4; max-width:380px; margin:0 auto; perspective:1400px; }
.book-cover .cv{
  position:absolute; inset:0; background:var(--paper); border-radius:3px 6px 6px 3px;
  box-shadow:-2px 0 0 rgba(0,0,0,.08) inset, 0 30px 60px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.18);
  transform:rotateY(-14deg); transform-origin:left center; transition:transform .8s var(--ease);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px 34px; text-align:center;
  border-left:5px solid var(--accent-deep);
}
.book-cover:hover .cv{ transform:rotateY(-6deg); }
.book-cover .cv img{ width:120px; margin-bottom:26px; }
.book-cover .cv .ct{ font-family:var(--display); font-weight:500; font-size:30px; line-height:1.1; color:var(--ink); }
.book-cover .cv .cs{ margin-top:14px; font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent-deep); }
.book-cover .cv .ca{ margin-top:auto; padding-top:24px; font-style:italic; color:var(--ink-faint); font-size:15px; }

/* ===========================================================
   ABOUT
   =========================================================== */
.about{ padding:130px 0; }
.about .grid{ display:grid; grid-template-columns:1fr; gap:0; justify-items:center; text-align:center; }
.about h2{ margin-bottom:22px; }
.about p{ color:var(--ink-soft); max-width:54ch; margin:0 auto 20px; }
.about p .name{ color:var(--ink); font-style:italic; }
.ig{ display:inline-flex; align-items:center; gap:11px; margin-top:14px; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); transition:color .3s; }
.ig:hover{ color:var(--ink); }
.ig svg{ width:18px; height:18px; }

/* ===========================================================
   FOLLOW / NEWSLETTER
   =========================================================== */
.follow{ background:var(--paper-2); padding:120px 0; text-align:center; position:relative; }
.follow::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line-soft); }
.follow .wrap{ max-width:620px; }
.follow .deer-min{ width:78px; margin:0 auto 30px; opacity:.85; }
.follow h2{ margin-bottom:18px; }
.follow p{ color:var(--ink-soft); margin:0 auto 34px; max-width:38ch; }
.follow-form{ display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; }
.follow-form input{ flex:1 1 220px; background:var(--card); border:1px solid var(--line); padding:15px 18px; font-family:var(--serif); font-size:16px; color:var(--ink); border-radius:2px; }
.follow-form input:focus{ outline:none; border-color:var(--ink-soft); }
.follow .ok{ margin-top:18px; font-style:italic; color:var(--accent-deep); height:1.4em; transition:opacity .4s; }

/* ===========================================================
   FOOTER
   =========================================================== */
footer.foot{ background:var(--ink); color:color-mix(in srgb,var(--paper) 78%, transparent); padding:70px 0 40px; }
footer.foot .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; }
footer.foot .flock{ width:120px; opacity:.94; }
footer.foot .ftag{ font-family:var(--display); font-style:italic; font-size:21px; color:color-mix(in srgb,var(--paper) 70%, transparent); max-width:26ch; }
footer.foot .fnav{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
footer.foot .fnav a{ color:color-mix(in srgb,var(--paper) 62%, transparent); transition:color .3s; }
footer.foot .fnav a:hover{ color:var(--paper); }
footer.foot .fline{ width:100%; max-width:340px; height:1px; background:color-mix(in srgb,var(--paper) 18%, transparent); }
footer.foot .copy{ font-size:12.5px; letter-spacing:.1em; color:color-mix(in srgb,var(--paper) 42%, transparent); }
footer.foot .copy a{ color:color-mix(in srgb,var(--paper) 60%, transparent); }

/* deer-min uses the engraving png; tint not needed (already ink). On footer (dark) we need a light version */
footer.foot .flock{ filter:invert(1) brightness(1.6); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1000px){
  .featured .grid{ grid-template-columns:1fr; gap:40px; }
  .featured .aside{ position:static; }
  .book .grid{ grid-template-columns:1fr; gap:54px; }
  .book-cover{ order:-1; }
  .about .grid{ grid-template-columns:1fr; gap:44px; }
  .portrait{ max-width:380px; }
  .poem-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  body{ font-size:18px; }
  .wrap{ padding:0 22px; }
  nav.links{ display:none; }
  .nav-toggle{ display:block; }
  /* keep brand + EN·FR·ES + menu button from colliding on phones */
  .brand .bn{ font-size:18px; }
  .brand img{ width:27px; }
  .nav-right{ gap:14px; }
  .lang{ gap:0; font-size:12px; }
  .lang button{ font-size:12px; padding:6px 5px; }
  /* fullscreen menu overlay */
  header.nav.menu-open nav.links{
    display:flex; position:fixed; inset:0; z-index:60; background:var(--paper);
    flex-direction:column; align-items:center; justify-content:center; gap:30px;
  }
  header.nav.menu-open nav.links a{ font-family:var(--display); font-size:30px; letter-spacing:.04em; text-transform:none; color:var(--ink); }
  /* hamburger morphs into an X, staying tappable above the overlay */
  header.nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
  header.nav.menu-open .nav-toggle span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }
  /* keep language switch reachable while the menu is open */
  header.nav.menu-open .lang{ position:fixed; bottom:46px; left:0; right:0; z-index:62; justify-content:center; }
  .poem-grid{ grid-template-columns:1fr; }
  .pcard{ min-height:0; padding:38px 30px 34px; }   /* compact, gap-free cards on every phone */
  .modal-sheet{ padding:84px 26px 90px; }
  .featured{ padding:90px 0; }
  .manifesto{ padding:90px 0; }
  .collection{ padding:90px 0; }
  .book,.about,.follow{ padding:90px 0; }
  .hero-title{ letter-spacing:.08em; }
}

/* ---------- Small phones (≤400px) ---------- */
@media (max-width:400px){
  .wrap{ padding:0 18px; }
  header.nav{ padding:16px 18px; }
  header.nav.solid{ padding:11px 18px; }
  .brand img{ width:26px; }
  .brand .bn{ font-size:18px; }
  .nav-right{ gap:16px; }
  .lang button{ padding:5px 5px; }
  .hero{ padding-left:18px; padding-right:18px; }
  .hero-tag{ max-width:18ch; }
  .featured .grid,.book .grid{ gap:36px; }
  .pcard{ padding:34px 24px 30px; min-height:0; }
  .modal-sheet{ padding:78px 20px 80px; }
  .modal-nav{ gap:14px; }
  .modal-nav .mt{ font-size:19px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  :root{ --rise:0px; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; }
  .hero-mist{ display:none; }
}
.no-motion :root, .no-motion{ --rise:0px; }
.no-motion *{ animation-duration:1ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; }
.no-motion .hero-mist{ display:none; }
.no-motion .hero-scroll .dot{ animation:none; }