/* =====================  DUSKFIELD  ===================== */
/* Warm, quiet, minimalist. Desert palette + screen-print grain. */

:root{
  --sand:      #EDE4D3;   /* page ground */
  --cream:     #F5EEE1;   /* lighter panels */
  --paper:     #FBF7EE;   /* cards */
  --terra:     #C0684A;   /* terracotta accent */
  --rust:      #A8503A;   /* deeper accent */
  --ochre:     #D9A441;   /* sun */
  --ink:       #3D2B1F;   /* headings / body */
  --muted:     #7A6552;   /* secondary text */
  --line:      #DDCDB6;   /* hairlines */
  --max: 1120px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); background:var(--sand);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- screen-print grain overlay (brand identity) ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; 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='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.12; color:var(--ink); letter-spacing:-.01em}
p{color:var(--ink)}
a{color:var(--rust); text-decoration:none}
a:hover{color:var(--terra)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--sans); font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; font-size:.72rem; color:var(--terra)}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-family:var(--sans); font-weight:800;
  font-size:.92rem; letter-spacing:.02em; padding:14px 28px; border-radius:2px;
  border:1.5px solid var(--ink); cursor:pointer; transition:.18s ease}
.btn-primary{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.btn-primary:hover{background:var(--rust); border-color:var(--rust); color:#fff}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--cream)}
.btn-sm{padding:10px 20px; font-size:.82rem}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:50; background:rgba(237,228,211,.88);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:34px; width:auto; display:block}
.brand .wordmark{font-family:var(--serif); font-weight:600; font-size:1.25rem;
  letter-spacing:.18em; color:var(--ink); text-transform:uppercase}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-family:var(--sans); font-weight:700; font-size:.9rem;
  color:var(--ink); letter-spacing:.02em}
.nav-links a:hover{color:var(--terra)}
.nav-links a.btn-primary{color:var(--cream)}
.nav-links a.btn-primary:hover{color:#fff}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; font-size:1.5rem; color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative; padding:88px 0 76px; overflow:hidden}
.hero .wrap{position:relative; z-index:2; max-width:820px; text-align:center}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem); margin:18px 0 20px}
.hero .sub{font-size:1.18rem; color:var(--muted); max-width:600px; margin:0 auto 32px}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
/* arch + sun motif behind hero */
.hero-arch{position:absolute; top:38px; left:50%; transform:translateX(-50%);
  width:min(360px,72vw); height:460px; z-index:1; opacity:.5}
.hero-sun{position:absolute; top:150px; left:50%; transform:translateX(-50%);
  width:96px; height:96px; border-radius:50%; background:var(--ochre); z-index:0; opacity:.55;
  filter:blur(.3px)}

/* ---------- drop / hype band ---------- */
.dropband{background:var(--ink); color:var(--cream); padding:44px 0}
.dropband .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap}
.dropband .eyebrow{color:var(--ochre)}
.dropband h2{color:var(--cream); font-size:1.9rem; margin:6px 0 8px}
.dropband p{color:#E3D6C4; max-width:460px; margin:0}
.dropband .left{flex:1 1 320px}
.countdown{display:flex; gap:14px}
.cd-cell{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:4px; padding:14px 8px; min-width:76px; text-align:center}
.cd-num{font-family:var(--serif); font-size:2.1rem; line-height:1; color:#fff}
.cd-lbl{font-family:var(--sans); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ochre); margin-top:8px}
.palette-dots{display:flex; gap:7px; margin-top:14px}
.palette-dots span{width:16px; height:16px; border-radius:50%; display:block;
  border:1px solid rgba(255,255,255,.25)}

/* ---------- sections ---------- */
section{padding:80px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 48px}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem); margin:10px 0 14px}
.section-head p{color:var(--muted); font-size:1.08rem}
.alt{background:var(--cream)}

/* ---------- collection grid ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(61,43,31,.5)}
.card .art{aspect-ratio:4/5; background:var(--sand); overflow:hidden}
.card .art img{width:100%; height:100%; object-fit:cover; display:block}
.card .body{padding:20px 22px 24px}
.card h3{font-size:1.35rem; margin-bottom:4px}
.card .note{color:var(--muted); font-size:.95rem; min-height:44px}
.card .row{display:flex; align-items:center; justify-content:space-between; margin-top:14px}
.card .price{font-family:var(--serif); font-size:1.05rem; color:var(--ink)}

/* bundle callout */
.bundle{margin-top:40px; background:var(--ink); color:var(--cream);
  border-radius:6px; padding:34px 38px; display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap}
.bundle h3{color:#fff; font-size:1.6rem; margin-bottom:6px}
.bundle p{color:#E3D6C4; margin:0; max-width:520px}

/* ---------- story ---------- */
.story{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.story img{width:100%; border-radius:6px; border:1px solid var(--line)}
.story h2{font-size:clamp(2rem,4vw,2.7rem); margin-bottom:18px}
.story p{color:var(--muted); font-size:1.06rem; margin-bottom:16px}
.story .ink{color:var(--ink)}

/* ---------- email signup ---------- */
.signup{background:var(--terra); color:#fff; text-align:center}
.signup h2{color:#fff; font-size:clamp(2rem,4vw,2.7rem)}
.signup p{color:#FBEDE2; max-width:520px; margin:14px auto 28px; font-size:1.08rem}
.signup .eyebrow{color:#FBEDE2}
.form{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.form input{flex:1 1 240px; padding:14px 18px; border:0; border-radius:2px;
  font-family:var(--sans); font-size:1rem; color:var(--ink)}
.form button{background:var(--ink); color:#fff; border:0; padding:14px 26px;
  border-radius:2px; font-family:var(--sans); font-weight:800; cursor:pointer}
.form button:hover{background:var(--rust)}
.form-note{margin-top:14px; font-size:.82rem; color:#FBEDE2; opacity:.9}
.form-embed{max-width:520px; margin:0 auto}
.beehiiv-embed{max-width:480px; margin:0 auto; min-height:52px}
.beehiiv-embed iframe{width:100% !important}

/* ---------- about page ---------- */
.page-hero{padding:72px 0 40px; text-align:center}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem); margin:14px 0 12px}
.page-hero p{color:var(--muted); font-size:1.15rem; max-width:620px; margin:0 auto}
.prose{max-width:680px; margin:0 auto}
.prose h2{font-size:1.7rem; margin:38px 0 12px}
.prose p{color:var(--ink); margin-bottom:16px; font-size:1.08rem}
.prose .lead{font-size:1.25rem; color:var(--muted); font-family:var(--serif)}
.values{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin:34px 0}
.value{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:24px}
.value h3{font-size:1.15rem; margin-bottom:6px}
.value p{color:var(--muted); font-size:.98rem; margin:0}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#D9C9B5; padding:56px 0 40px}
footer .wrap{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap}
footer .fbrand{max-width:300px}
footer .fbrand img{height:40px; margin-bottom:14px}
footer .fbrand p{color:#B49F88; font-size:.95rem}
footer .fcol h4{color:var(--cream); font-family:var(--sans); font-weight:800;
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; margin-bottom:14px}
footer .fcol a{display:block; color:#D9C9B5; margin-bottom:9px; font-size:.95rem}
footer .fcol a:hover{color:var(--ochre)}
.footer-base{max-width:var(--max); margin:38px auto 0; padding:22px 24px 0;
  border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:#9C876F;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .story{grid-template-columns:1fr; gap:32px}
  .story .story-img{order:-1}
}
@media(max-width:620px){
  .nav-links{position:fixed; top:63px; right:0; left:0; background:var(--sand);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px 24px 18px;
    display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--line)}
  .nav-links .btn{margin-top:10px; text-align:center}
  .nav-toggle{display:block}
  .grid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .dropband .wrap{flex-direction:column; align-items:flex-start}
  section{padding:60px 0}
  .cd-cell{min-width:64px}
}

/* =====================================================================
   MODERNIZATION PASS — added 2026-07-04
   Scroll-reveal motion · past-drops archive · in-the-room band · polish
   All on-brand: warm, minimal, quiet. Motion is subtle and optional.
   ===================================================================== */

/* ---------- scroll-reveal motion ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
}

/* Slightly warmer, calmer link + button feel */
a{transition:color .16s ease}
.card .art img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .art img{transform:scale(1.035)}

/* ---------- in-the-room feature band ---------- */
.roomband{background:var(--cream); padding:0}
.roomband .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  align-items:stretch; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; margin-top:0}
.roomband .room-img{position:relative; min-height:340px; background:var(--sand)}
.roomband .room-img img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block}
.roomband .room-copy{padding:52px 48px; display:flex; flex-direction:column;
  justify-content:center; background:var(--paper)}
.roomband .room-copy h2{font-size:clamp(1.8rem,3.4vw,2.5rem); margin:12px 0 14px}
.roomband .room-copy p{color:var(--muted); font-size:1.08rem; margin-bottom:22px; max-width:420px}

/* ---------- past-drops archive grid ---------- */
.archive .section-head{margin-bottom:40px}
.arch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.arch-card{display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:8px; overflow:hidden; color:var(--ink);
  transition:transform .22s ease, box-shadow .22s ease}
.arch-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 34px -22px rgba(61,43,31,.5); color:var(--ink)}
.arch-cover{display:block; aspect-ratio:4/3; background:var(--sand); overflow:hidden}
.arch-cover img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.arch-card:hover .arch-cover img{transform:scale(1.04)}
.arch-meta{padding:20px 22px 24px; display:flex; flex-direction:column; gap:4px}
.arch-eyebrow{font-family:var(--sans); font-weight:800; text-transform:uppercase;
  letter-spacing:.2em; font-size:.68rem; color:var(--terra)}
.arch-name{font-family:var(--serif); font-size:1.4rem; line-height:1.1; color:var(--ink)}
.arch-sub{color:var(--muted); font-size:.92rem; margin-top:2px}

/* ---------- archive responsive ---------- */
@media(max-width:860px){
  .arch-grid{grid-template-columns:repeat(2,1fr)}
  .roomband .wrap{grid-template-columns:1fr}
  .roomband .room-img{min-height:260px; order:-1}
  .roomband .room-copy{padding:40px 32px}
}
@media(max-width:620px){
  .arch-grid{grid-template-columns:1fr}
}

/* =====================================================================
   OVERNIGHT REFINEMENT PASS — added 2026-07-04
   Accessibility, conversion sections, quiet motion, 404, focus states.
   Still warm / minimal / quiet. Nothing loud.
   ===================================================================== */

/* ---------- accessibility: skip link + focus-visible ---------- */
.skip-link{position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 18px; border-radius:0 0 4px 0;
  font-family:var(--sans); font-weight:800; font-size:.85rem}
.skip-link:focus{left:0}
a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--ochre); outline-offset:3px; border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* ---------- quiet hero glow (very subtle; off for reduced-motion) ---------- */
@media(prefers-reduced-motion: no-preference){
  .hero-sun{animation:sunglow 7s ease-in-out infinite}
  @keyframes sunglow{
    0%,100%{opacity:.5; transform:translateX(-50%) scale(1)}
    50%{opacity:.62; transform:translateX(-50%) scale(1.04)}
  }
}

/* ---------- how it works (3-step band) ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:960px; margin:0 auto}
.step{background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:30px 26px; text-align:left; position:relative}
.step .num{font-family:var(--serif); font-size:1.1rem; color:#fff; background:var(--terra);
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; margin-bottom:16px}
.step h3{font-size:1.25rem; margin-bottom:6px}
.step p{color:var(--muted); font-size:.98rem; margin:0}

/* ---------- FAQ accordion ---------- */
.faq{max-width:760px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:22px 40px 22px 0; position:relative; font-family:var(--serif);
  font-size:1.18rem; color:var(--ink); line-height:1.3}
.faq-q::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-weight:700; font-size:1.5rem; color:var(--terra); transition:transform .25s ease}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-a p{color:var(--muted); font-size:1.02rem; padding:0 40px 22px 0; margin:0}
.faq-item.open .faq-a{max-height:320px}
@media(prefers-reduced-motion: reduce){ .faq-a{transition:none} }

/* ---------- back-to-top ---------- */
.to-top{position:fixed; right:22px; bottom:22px; z-index:60;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -14px rgba(61,43,31,.6);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s ease}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--ink); color:var(--cream)}

/* ---------- 404 ---------- */
.err{min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center}
.err h1{font-size:clamp(3rem,9vw,6rem); margin-bottom:6px; color:var(--terra)}
.err p{color:var(--muted); font-size:1.15rem; max-width:440px; margin:0 auto 26px}

/* ---------- steps/faq responsive ---------- */
@media(max-width:860px){ .steps{grid-template-columns:1fr; max-width:460px} }

/* =====================================================================
   WORLD-CLASS CRAFT PASS — added 2026-07-04 (overnight)
   Design tokens · refined type & rhythm · scroll-aware nav · new hero ·
   accessible lightbox · micro-interactions. Restraint is the brand.
   ===================================================================== */

:root{
  --radius-sm:4px; --radius:10px; --radius-lg:16px;
  --shadow-sm:0 2px 10px -6px rgba(61,43,31,.28);
  --shadow-md:0 14px 30px -18px rgba(61,43,31,.42);
  --shadow-lg:0 40px 80px -40px rgba(61,43,31,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sky-top:#F3EAD9; --sky-bot:#EDE1CC;
}

/* refined base rhythm */
body{font-size:1.02rem; letter-spacing:.002em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{padding-left:26px; padding-right:26px}

/* softer, deeper card + surface treatment */
.card{border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow-md)}
.card .art{cursor:zoom-in; position:relative}
.card .art::after{content:"View"; position:absolute; left:50%; bottom:14px; transform:translate(-50%,8px);
  background:rgba(61,43,31,.82); color:var(--cream); font-family:var(--sans); font-weight:800;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 14px; border-radius:999px;
  opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none}
.card:hover .art::after, .card:focus-within .art::after{opacity:1; transform:translate(-50%,0)}
.arch-card{border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.arch-card:hover{box-shadow:var(--shadow-md)}

/* buttons: subtle depth + tactile press */
.btn{box-shadow:var(--shadow-sm); transition:transform .16s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease)}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0); box-shadow:var(--shadow-sm)}

/* ---------- scroll-aware nav ---------- */
header.nav{transition:padding .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease)}
header.nav.scrolled{background:rgba(237,228,211,.94); box-shadow:0 6px 24px -18px rgba(61,43,31,.6)}
header.nav.scrolled .nav-inner{padding-top:9px; padding-bottom:9px}
.nav-inner{transition:padding .25s var(--ease)}

/* ---------- redesigned hero ---------- */
.hero{padding:0; min-height:clamp(580px,84vh,780px); display:flex; align-items:flex-start;
  padding-top:clamp(76px,13vh,140px);
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-bot) 58%, var(--cream) 100%)}
.hero-scene{position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:hidden}
.hero-scene svg{position:absolute; inset:0; width:100%; height:100%}
.hero .wrap{position:relative; z-index:3; padding-top:40px; padding-bottom:40px}
.hero .eyebrow{display:inline-block; background:rgba(255,255,255,.5); backdrop-filter:blur(3px);
  padding:7px 14px; border-radius:999px}
.hero h1{font-size:clamp(2.7rem,6.4vw,5rem); margin:20px auto 22px; max-width:14ch;
  font-weight:500; line-height:1.04}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.24rem)}
/* the old floating arch/sun are replaced by the scene; hide legacy nodes if present */
.hero > .hero-sun, .hero > .hero-arch{display:none}

/* ---------- signup band: richer gradient ---------- */
.signup{background:linear-gradient(150deg,#C86A4B 0%, #B0563C 55%, #9A4C34 100%)}

/* ---------- countdown cells: refined ---------- */
.cd-cell{border-radius:8px; backdrop-filter:blur(2px)}
.cd-num{font-variant-numeric:tabular-nums}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:5vh 4vw; background:rgba(38,26,18,.86); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s var(--ease)}
.lightbox.open{opacity:1; visibility:visible}
.lb-figure{max-width:1040px; width:100%; display:grid; grid-template-columns:1.35fr .65fr;
  gap:0; background:var(--paper); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); transform:translateY(12px) scale(.98); transition:transform .3s var(--ease)}
.lightbox.open .lb-figure{transform:none}
.lb-img{background:var(--sand); display:flex; align-items:center; justify-content:center; min-height:320px}
.lb-img img{width:100%; height:100%; max-height:78vh; object-fit:cover; display:block}
.lb-meta{padding:40px 38px; display:flex; flex-direction:column; justify-content:center}
.lb-meta .eyebrow{margin-bottom:12px}
.lb-meta h3{font-size:1.9rem; margin-bottom:10px}
.lb-meta .note{color:var(--muted); font-size:1.05rem; margin-bottom:8px}
.lb-meta .price{font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin-bottom:22px}
.lb-close{position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.25); color:#fff; font-size:1.4rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s var(--ease)}
.lb-close:hover{background:rgba(0,0,0,.5)}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.28); color:#fff; font-size:1.6rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s var(--ease); z-index:2}
.lb-nav:hover{background:rgba(0,0,0,.5)}
.lb-prev{left:max(18px,3vw)} .lb-next{right:max(18px,3vw)}
@media(prefers-reduced-motion: reduce){
  .lightbox,.lightbox .lb-figure{transition:none}
}
@media(max-width:760px){
  .lb-figure{grid-template-columns:1fr; max-width:520px}
  .lb-img img{max-height:52vh}
  .lb-meta{padding:26px 26px 32px}
  .lb-nav{width:44px; height:44px}
}

/* ---------- gentle staggered reveal for grids handled inline via JS delay ---------- */

/* ---------- print niceties ---------- */
@media print{
  header.nav,.to-top,.signup,.dropband,.beehiiv-embed{display:none !important}
  body::before{display:none}
}