/*
Theme Name: Formwork
Theme URI: https://formwork.example
Author: Formwork
Description: A photography-led theme for a home renovation and remodeling studio — long-form showcase pages, a persistent GPU-rendered dust-and-light background, and zero drag-to-compare gimmicks. Every claim on the page is backed by a real project, not a slider.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: formwork

Design language, in five rules:
1. Photography carries the page. A section without a real project photo is a
   section that gets cut, not a section that gets a stock icon instead.
2. Comparison is shown, never dragged. Two photos side by side, both fully
   visible, is more honest than a slider that hides half the evidence behind
   a handle — and it is the one interaction pattern this theme refuses to
   build, on purpose.
3. One accent (--accent), used for the interactive layer only — links,
   buttons, active states. Never poured over a whole section as a wash.
4. The background is one continuous GPU scene, not a hero video that stops.
   Planks assemble once, on load; dust keeps drifting for as long as you
   scroll. It is rendered, not a looping clip.
5. Hairlines divide sections. Shadows are reserved for things that actually
   lift off the page — a card on hover, a sticky header — never decoration.
*/

/* =====================================================================
   Reset
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
input,textarea{font:inherit;color:inherit}

/* =====================================================================
   Tokens
   ===================================================================== */
:root{
  /* Paper-neutral base — the previous cream/tan tokens plus warm-toned photos
     and a golden-oak GPU floor all pushed the same direction and read as an
     undifferentiated yellow-brown wash. This palette keeps one warm signature
     (--accent) but everything around it is a true neutral, and the second
     accent is a cool, complementary slate-teal instead of another gold. */
  --bg:#F4F4F4; --bg-2:#E9E9E9; --panel:#FFFFFF; --panel-warm:#F8F8F8;
  --ink:#1E1E1E; --ink-2:rgba(30,30,30,.66); --ink-3:rgba(30,30,30,.42);
  --line:rgba(30,30,30,.12); --line-2:rgba(30,30,30,.22);
  --accent:#B5602A; --accent-2:#3D5A52; --accent-warm-2:#D98A5E; --accent-dim:rgba(181,96,42,.12);
  --brass:#6E7266; --ok:#4C7A5A; --bad:#A3432E;
  --ff-head:"Newsreader",Georgia,"Times New Roman",serif;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --w:1240px; --ease:cubic-bezier(.22,.68,0,1);
}

body{
  font-family:var(--ff-body); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.h1,.h2,.h3{font-family:var(--ff-head);font-weight:500;letter-spacing:-.012em;
  text-wrap:balance;color:var(--ink)}
::selection{background:var(--accent);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 32px;position:relative;z-index:1}
.rule{height:1px;background:var(--line)}
.sec{position:relative;padding:118px 0}
.sec--tight{padding:80px 0}
.sec--alt{background:var(--bg-2)}
@media (max-width:760px){.sec{padding:74px 0}.sec--tight{padding:54px 0}}

.eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}
.h1{font-size:64px;line-height:1.05}
.h2{font-size:42px;line-height:1.1}
.h3{font-size:24px;line-height:1.24}
.lede{margin-top:18px;font-size:18px;line-height:1.65;color:var(--ink-2);max-width:56ch}
@media (max-width:980px){.h1{font-size:44px}.h2{font-size:32px}}
@media (max-width:600px){.h1{font-size:34px}.h2{font-size:27px}.lede{font-size:16px}}

/* =====================================================================
   Persistent GPU background canvas
   ===================================================================== */
#fw-scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#fw-scene.ready{opacity:1}
#fw-scene{opacity:0;transition:opacity 1.1s var(--ease)}
.fw-poster{position:fixed;inset:0;z-index:0;background:var(--bg)}
/* The canvas paints over the poster once WebGL actually renders a frame
   (it goes opaque and sits later in DOM order); if THREE.js never loads,
   or reduced-motion hides the canvas outright, the poster is what a
   visitor sees — never a blank fixed layer. */
body>*:not(#fw-scene):not(.fw-poster){position:relative;z-index:1}

/* fine paper grain over everything — the difference between flat and lived-in */
body::after{content:"";position:fixed;inset:0;z-index:2;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='140' height='140'%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")}

/* =====================================================================
   Nav
   ===================================================================== */
.nav{position:sticky;top:0;z-index:50;height:76px;
  background:rgba(244,244,244,.86);backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid var(--line)}
.nv{max-width:var(--w);margin:0 auto;padding:0 32px;height:100%;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--ff-head);font-size:20px;font-weight:600}
.logo i{width:30px;height:30px;flex:none;border-radius:3px;position:relative;
  background:linear-gradient(155deg,var(--accent),var(--accent-warm-2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.logo i::after{content:"";position:absolute;inset:7px;border:1.4px solid rgba(255,255,255,.75);border-radius:1px}
.links{display:flex;gap:34px;justify-self:center}
.links a{font-size:14.5px;color:var(--ink-2);transition:color .18s var(--ease);position:relative;padding:6px 0}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.4px;background:var(--accent);
  transition:right .22s var(--ease)}
.links a:hover,.links .current-menu-item>a{color:var(--ink)}
.links a:hover::after,.links .current-menu-item>a::after{right:0}
.navr{display:flex;gap:10px;justify-self:end;align-items:center}
.phone{display:flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:13px;color:var(--ink-2)}
.solid{font-size:13.5px;font-weight:600;color:#fff;background:var(--ink);padding:11px 20px;border-radius:3px;
  transition:background .18s var(--ease)}
.solid:hover{background:var(--accent)}
.navtoggle{display:none}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:160px 0 90px;overflow:hidden}
/* the plank scene behind this text is a mid-toned wood floor — a scrim
   guarantees the heading reads regardless of exactly how warm/dark that
   render comes out, instead of hoping a fixed ink color always wins. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(18,18,18,.4) 78%,rgba(18,18,18,.62) 100%)}
.hero .wrap{width:100%;position:relative;z-index:1}
/* the scrim above darkens toward the bottom where this text sits, so the
   heading/lede go light here — the one place on the site they aren't ink. */
.hero-kicker{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.hero-kicker span{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bg);border:1px solid rgba(244,244,244,.4);padding:6px 13px;border-radius:100px;background:rgba(30,30,30,.35)}
.hero h1{max-width:15ch;color:var(--bg)}
.hero h1 em{font-style:italic;color:var(--accent-2)}
.hero .lede{font-size:20px;max-width:46ch;color:rgba(244,244,244,.82)}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.b1{font-size:14.5px;font-weight:600;color:#fff;background:var(--ink);padding:16px 26px;border-radius:3px;
  display:inline-flex;align-items:center;gap:9px;transition:background .18s var(--ease),transform .18s var(--ease)}
.b1:hover{background:var(--accent);transform:translateY(-1px)}
.b2{font-size:14.5px;font-weight:600;color:var(--ink);padding:16px 22px;border:1px solid var(--line-2);border-radius:3px;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .18s var(--ease),background .18s var(--ease)}
.b2:hover{border-color:var(--ink);background:rgba(255,255,255,.5)}
.hero .b2{color:var(--bg);border-color:rgba(244,244,244,.35)}
.hero .b2:hover{border-color:var(--bg);background:rgba(244,244,244,.1)}
.hero-scroll{position:absolute;right:32px;bottom:40px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,244,.55)}
.hero-scroll i{width:1px;height:46px;background:linear-gradient(rgba(244,244,244,.55),transparent);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--accent);
  animation:fw-drip 2.2s ease-in-out infinite}
@keyframes fw-drip{0%{top:-100%}100%{top:100%}}
@media (max-width:760px){.hero{padding:130px 0 70px}.hero-scroll{display:none}}

/* =====================================================================
   Trust strip — a marquee of licences/certifications
   ===================================================================== */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;
  background:var(--panel-warm)}
.trust-track{display:flex;gap:64px;width:max-content;animation:fw-marquee 34s linear infinite}
.js .trust-track{animation-play-state:running}
.trust:hover .trust-track{animation-play-state:paused}
@keyframes fw-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust-item{display:flex;align-items:center;gap:10px;font-family:var(--ff-mono);font-size:12.5px;
  letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
.trust-item b{color:var(--ink-2);font-weight:500}
@media (prefers-reduced-motion:reduce){.trust-track{animation:none}}

/* =====================================================================
   Story / about split
   ===================================================================== */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:80px;align-items:center}
.split.rev{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.split.rev .split-media{order:2}
.split-media{position:relative}
.split-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.split-badge{position:absolute;left:-28px;bottom:-28px;background:var(--ink);color:#fff;border-radius:4px;
  padding:22px 26px;box-shadow:0 22px 50px -18px rgba(30,30,30,.5)}
.split-badge b{display:block;font-family:var(--ff-head);font-size:34px;font-variant-numeric:tabular-nums}
.split-badge span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.split-body .h2{max-width:14ch}
.split-facts{margin-top:32px;display:grid;gap:0}
.split-fact{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.split-fact:last-child{border-bottom:1px solid var(--line)}
.split-fact i{flex:none;width:20px;height:20px;margin-top:2px;color:var(--accent)}
.split-fact h4{font-size:15.5px;font-weight:600}
.split-fact p{margin-top:5px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:1fr;gap:40px}
  .split.rev .split-media{order:0}
  .split-badge{left:16px;bottom:-22px;padding:16px 20px}
  .split-badge b{font-size:26px}
}

/* =====================================================================
   Services grid
   ===================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:56px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.svc{position:relative;background:var(--panel-warm);padding:38px 34px;min-height:280px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.svc-photo{position:absolute;inset:0;opacity:0;transform:scale(1.08);
  transition:opacity .5s var(--ease),transform .7s var(--ease)}
.svc-photo img{width:100%;height:100%;object-fit:cover}
.svc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,30,.1),rgba(16,16,16,.82))}
.svc:hover .svc-photo{opacity:1;transform:scale(1)}
.svc u{position:relative;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);text-decoration:none}
.svc:hover u{color:var(--accent-2)}
.svc h3{position:relative;margin-top:10px;font-size:23px;transition:color .3s var(--ease)}
.svc:hover h3{color:#fff}
.svc p{position:relative;margin-top:10px;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:32ch;
  transition:color .3s var(--ease)}
.svc:hover p{color:rgba(255,255,255,.78)}
.svc-arrow{position:relative;margin-top:18px;width:34px;height:34px;border-radius:100px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease)}
.svc:hover .svc-arrow{border-color:rgba(255,255,255,.4);background:var(--accent);transform:translateX(4px)}
.svc:hover .svc-arrow svg{stroke:#fff}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* =====================================================================
   Portfolio — filterable grid, no drag anywhere
   ===================================================================== */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:36px}
.chip{font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;padding:9px 16px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--ink-2);transition:all .18s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip.on,a.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.pf-card{display:block}
.pf-media{position:relative;aspect-ratio:5/4;border-radius:4px;overflow:hidden;background:var(--line)}
.pf-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pf-card:hover .pf-media img{transform:scale(1.045)}
.pf-tag{position:absolute;top:14px;left:14px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(251,246,236,.92);color:var(--ink);padding:6px 11px;border-radius:100px}
.pf-meta{margin-top:16px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.pf-meta h3{font-size:19px}
.pf-meta span{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.pf-loc{margin-top:5px;font-size:13.5px;color:var(--ink-2)}
@media (max-width:980px){.pf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}}

/* honest before/after — both photos shown in full, side by side. no handle to drag. */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:4px;overflow:hidden}
.compare figure{position:relative;margin:0;aspect-ratio:1/1}
.compare img{width:100%;height:100%;object-fit:cover}
.compare figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--ff-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(16,16,16,.68);color:#fff;padding:6px 12px;border-radius:100px}
@media (max-width:640px){.compare{grid-template-columns:1fr}}

/* =====================================================================
   Single project — spec sheet + photo gallery
   ===================================================================== */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  margin:36px 0 0}
.spec div{padding:22px 24px;border-right:1px solid var(--line);background:var(--panel-warm)}
.spec div:last-child{border-right:0}
.spec label{display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.spec b{font-size:16.5px;font-weight:600}
@media (max-width:760px){.spec{grid-template-columns:1fr 1fr}.spec div:nth-child(2n){border-right:0}}

.gallery{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:20px}
.gallery figure{margin:0;border-radius:4px;overflow:hidden}
.gallery figure img{width:100%;height:100%;object-fit:cover}
.gallery .g-main{grid-row:span 2}
.gallery .g-stack{display:grid;gap:20px}
@media (max-width:760px){.gallery{grid-template-columns:1fr}.gallery .g-main{grid-row:auto}}

/* =====================================================================
   Process timeline
   ===================================================================== */
.tl{position:relative;margin-top:60px;padding-left:2px}
.tl::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.tl-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:28px;padding:0 0 52px}
.tl-step:last-child{padding-bottom:0}
.tl-dot{width:48px;height:48px;border-radius:100px;background:var(--panel-warm);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:14px;color:var(--accent);
  position:relative;z-index:1}
.tl-step.on .tl-dot{background:var(--ink);border-color:var(--ink);color:var(--accent-2)}
.tl-body h3{font-size:21px}
.tl-body p{margin-top:9px;font-size:15px;color:var(--ink-2);line-height:1.6;max-width:58ch}
.tl-body span{display:inline-block;margin-top:12px;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-3);
  letter-spacing:.05em;text-transform:uppercase}

/* =====================================================================
   Proof / stats
   ===================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stat{padding:38px 30px;border-right:1px solid var(--line);background:var(--panel-warm)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--ff-head);font-size:46px;font-weight:500;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat b i{font-style:normal;font-size:22px;color:var(--ink-3);margin-left:2px}
.stat p{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}}
@media (max-width:600px){.stats{grid-template-columns:1fr}}

/* =====================================================================
   Testimonials — auto-fade rotation, dot navigation. no swipe/drag.
   ===================================================================== */
.tsm{position:relative;max-width:820px}
.tsm-slide{display:none}
.tsm-slide.on{display:block;animation:fw-fade .6s var(--ease)}
@keyframes fw-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tsm-quote{font-family:var(--ff-head);font-size:28px;line-height:1.42;color:var(--ink)}
.tsm-who{margin-top:26px;display:flex;align-items:center;gap:14px}
.tsm-who img{width:48px;height:48px;border-radius:100px;object-fit:cover}
.tsm-who b{display:block;font-size:14.5px}
.tsm-who span{font-size:13px;color:var(--ink-3)}
.tsm-dots{display:flex;gap:9px;margin-top:36px}
.tsm-dots button{width:8px;height:8px;border-radius:100px;background:var(--line-2);transition:all .2s var(--ease)}
.tsm-dots button.on{width:22px;background:var(--accent)}

/* =====================================================================
   Journal peek
   ===================================================================== */
.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}
.jr-card img{aspect-ratio:16/10;object-fit:cover;border-radius:4px;width:100%}
.jr-card .eyebrow{margin-top:20px;color:var(--brass)}
.jr-card .eyebrow::before{background:var(--brass)}
.jr-card h3{margin-top:10px;font-size:19px;line-height:1.3}
.jr-card p{margin-top:9px;font-size:14px;color:var(--ink-2);line-height:1.55}
@media (max-width:900px){.jr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.jr-grid{grid-template-columns:1fr}}

/* =====================================================================
   CTA band
   ===================================================================== */
.ctaband{position:relative;background:var(--ink);color:#fff;text-align:center;padding:110px 0;overflow:hidden;
  border-radius:4px}
.ctaband .h2{color:#fff;max-width:20ch;margin:0 auto}
.ctaband p{color:rgba(255,255,255,.66);margin-top:16px;max-width:52ch;margin-left:auto;margin-right:auto;font-size:16.5px}
.ctaband .hero-cta{justify-content:center;margin-top:34px}
.ctaband .b2{color:#fff;border-color:rgba(255,255,255,.28)}
.ctaband .b2:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* =====================================================================
   Footer
   ===================================================================== */
.foot{border-top:1px solid var(--line);padding:70px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px}
.fgrid h4{margin:0 0 16px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400}
.fgrid a{display:block;font-size:13.5px;color:var(--ink-2);padding:6px 0;transition:color .18s var(--ease)}
.fgrid a:hover{color:var(--accent)}
.flic{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);margin-top:16px;line-height:1.7}
.fbot{display:flex;align-items:center;gap:18px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.fdisc{margin-left:auto;max-width:56ch;text-align:right;line-height:1.6}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}.fdisc{text-align:left;margin-left:0}}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}}

/* =====================================================================
   Mobile nav disclosure — a real menu, not a slide-out drawer over content
   ===================================================================== */
@media (max-width:860px){
  .links{display:none}
  .phone{display:none}
  .nv{grid-template-columns:auto 1fr auto}
  .navtoggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--ff-mono);
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
    border:1px solid var(--line-2);border-radius:100px;padding:9px 15px}
  .navtoggle[aria-expanded="true"]{color:#fff;background:var(--ink);border-color:var(--ink)}
  [data-mnav]{position:absolute;left:0;right:0;top:76px;display:none;background:var(--panel-warm);
    border-bottom:1px solid var(--line);box-shadow:0 22px 40px -22px rgba(30,30,30,.3)}
  [data-mnav].open{display:block}
  [data-mnav] .links{display:flex;flex-direction:column;gap:0;padding:6px 32px 20px;width:100%}
  [data-mnav] .links li+li{border-top:1px solid var(--line)}
  [data-mnav] .links a{display:block;padding:16px 0;font-size:16px;color:var(--ink)}
  [data-mnav] .links a::after{display:none}
}
.mnav-cta{display:none}
/* the hamburger toggle and the header CTA button can't both fit next to the
   logo below ~460px — drop the persistent button and surface the same CTA
   as the first thing in the open mobile menu instead, so it never overflows
   the header row on a phone screen. */
@media (max-width:480px){
  .navr .solid{display:none}
  .mnav-cta{display:block;margin:16px 32px 4px;padding:14px 18px;text-align:center;font-size:14.5px;
    font-weight:600;color:#fff;background:var(--ink);border-radius:3px}
}

/* =====================================================================
   Prose (journal single, pages)
   ===================================================================== */
.prose{max-width:70ch;font-size:17px;line-height:1.75;color:var(--ink-2)}
.prose h2{font-family:var(--ff-head);font-size:28px;margin:1.6em 0 .5em;color:var(--ink)}
.prose h3{font-family:var(--ff-head);font-size:21px;margin:1.4em 0 .4em;color:var(--ink)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.2em}
.prose ul,.prose ol{margin:0 0 1.3em 1.3em;padding:0}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent)}
.prose img{border-radius:4px;margin:1.6em 0}
.prose blockquote{margin:0 0 1.4em;padding:2px 0 2px 20px;border-left:2px solid var(--accent);
  font-family:var(--ff-head);font-size:19px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   Archive / single scaffolding shared across templates
   ===================================================================== */
.pghero{padding:150px 0 70px}
.pghero .h1{max-width:20ch}
.crumb{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);margin-bottom:20px}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--accent)}

.nav-links{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 32px;max-width:var(--w);margin:0 auto}
.nav-links .page-numbers{font-family:var(--ff-mono);font-size:12px;padding:9px 14px;border:1px solid var(--line-2);
  border-radius:4px;color:var(--ink-2)}
.nav-links .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

.asearch{display:flex;gap:10px;max-width:440px}
.asearch input[type="search"]{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line-2);
  border-radius:4px;padding:12px 14px;color:var(--ink);font-family:var(--ff-body);font-size:14px}
.asearch input:focus{outline:none;border-color:var(--accent)}
.asearch button{border:0;border-radius:4px;padding:12px 18px;background:var(--ink);color:#fff;
  font-family:var(--ff-body);font-size:13.5px;font-weight:600;cursor:pointer}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:16px;top:16px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* =====================================================================
   Motion — one reveal layer on entry, killed under reduced-motion
   ===================================================================== */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.08s}
.js .rv[data-d="2"]{transition-delay:.16s}
.js .rv[data-d="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv{opacity:1;transform:none}
  #fw-scene{display:none}
}