/* ==========================================================================
   STRUXURE — design system
   Field guide × design studio × practical AI workshop.
   Palette: eastern North Carolina at dusk. Ratio ≈ 70 ink / 20 bone / 7 green / 3 clay+brass.
   ========================================================================== */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* ---------- tokens ---------- */
:root{
  --ink:#0B1712;          /* Ink Pine — main ground */
  --ink-deep:#07110D;
  --ink-raise:#101D16;    /* a half-step lighter, for bands */
  --swamp:#24382B;        /* secondary surfaces */
  --longleaf:#314A35;
  --bone:#EEE9DD;         /* text on dark, paper sections */
  --bone-2:rgba(238,233,221,.74);
  --bone-3:rgba(238,233,221,.52);
  --bone-4:rgba(238,233,221,.3);
  --rule:rgba(238,233,221,.13);
  --rule-2:rgba(238,233,221,.22);
  --clay:#EFA78D;         /* precious human accent */
  --clay-deep:#C9694A;    /* clay on paper */
  --lichen:#9CB68B;       /* organic secondary */
  --brass:#C7A368;        /* tiny details only */
  --paper:#EEE9DD; --paper-ink:#0B1712; --paper-2:#3B463F; --paper-rule:rgba(11,23,18,.16);

  --serif:"DM Serif Display","Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1200px; --gutter:clamp(20px,4vw,48px);
  --section:clamp(88px,11vw,156px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:92px;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--bone-2);font:400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;color:var(--bone);letter-spacing:-.012em;text-wrap:balance}
em{font-style:italic}
::selection{background:var(--clay);color:var(--ink)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--bone);color:var(--ink);padding:10px 14px;font-weight:600}
.skip:focus{top:12px}

/* grain — one quiet texture for the whole site */
body::before{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type roles ---------- */
.display{font-family:var(--serif);font-size:clamp(3.1rem,7.1vw,7.2rem);line-height:.94;letter-spacing:-.022em;color:var(--bone)}
.h2{font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.02}
.h3{font-size:clamp(1.55rem,2.2vw,2rem);line-height:1.1}
.lede{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.55;color:var(--bone-2);max-width:34em}
.body-s{font-size:.96rem;line-height:1.6;color:var(--bone-3)}
.warm{font-style:italic;color:var(--clay)}
.it{font-style:italic}

/* technical label: the bridge between nature and systems */
.label{font:500 .6875rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}
.label--lichen{color:var(--lichen)}
.label--clay{color:var(--clay)}
.label--brass{color:var(--brass)}
.label-rule{display:inline-flex;align-items:center;gap:14px}
.label-rule::before{content:"";width:36px;height:1px;background:currentColor;opacity:.7}
.fig{font:500 .625rem/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.9em;min-height:54px;padding:0 30px;border-radius:9px;
  font:600 1rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .2s var(--ease),color .2s,border-color .2s,transform .15s var(--ease)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--clay{background:var(--clay);color:var(--ink)}
.btn--clay:hover{background:#F4B9A3}
.btn--line{border-color:var(--rule-2);color:var(--bone)}
.btn--line:hover{border-color:var(--bone-3);background:rgba(238,233,221,.04)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:var(--swamp)}
.link{display:inline-flex;align-items:center;gap:.5em;min-height:48px;color:var(--bone);text-decoration:none;font-weight:500;
  background:linear-gradient(currentColor,currentColor) left calc(100% - 12px)/0 1px no-repeat;transition:background-size .3s var(--ease)}
.link:hover{background-size:100% 1px}
.link .arr{transition:transform .25s var(--ease)}.link:hover .arr{transform:translateX(4px)}

/* ---------- header (masthead) ---------- */
.mast{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h);transition:height .3s var(--ease),background-color .3s,border-color .3s}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.mast.is-scrolled{--header-h:68px;background:rgba(7,17,13,.86);backdrop-filter:blur(14px) saturate(110%);-webkit-backdrop-filter:blur(14px) saturate(110%)}
.mast .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;min-width:0}
.brand img{height:34px;width:auto;transition:height .3s var(--ease)}
.mast.is-scrolled .brand img{height:28px}
.brand .tag{font:500 .625rem/1.35 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);padding-left:18px;border-left:1px solid var(--rule-2);white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(24px,3vw,44px)}
.nav a{font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2);text-decoration:none;padding:10px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:var(--bone)}.nav a:hover::after{transform:scaleX(1)}
.mast .btn{min-height:44px;padding:0 18px;font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.menu-btn{display:none;min-height:44px;min-width:44px;background:none;border:1px solid var(--rule-2);border-radius:3px;color:var(--bone);font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:0 14px;cursor:pointer}
.menu-panel{position:fixed;inset:0;z-index:70;background:var(--ink-deep);display:flex;flex-direction:column;padding:28px var(--gutter);gap:8px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.menu-panel.open{opacity:1;visibility:visible}
.menu-panel .mp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.menu-panel a.mp-link{font:400 2.4rem/1.2 var(--serif);color:var(--bone);text-decoration:none;padding:10px 0;border-bottom:1px solid var(--rule)}
.menu-panel .btn{margin-top:28px}
@media(max-width:1060px){.brand .tag{display:none}}
@media(max-width:860px){.nav,.mast .btn{display:none}.menu-btn{display:inline-flex;align-items:center}:root{--header-h:72px}.brand img{height:30px}}

/* ---------- sections ---------- */
.sec{position:relative;padding:var(--section) 0}
.sec + .sec{border-top:1px solid var(--rule)}
.sec--raise{background:var(--ink-raise)}
.sec--deep{background:var(--ink-deep)}
.sec--paper{background:var(--paper);color:var(--paper-2)}
.sec--paper h2,.sec--paper h3{color:var(--paper-ink)}
.sec--paper .label{color:rgba(11,23,18,.55)}
.sec-head{display:grid;gap:22px;max-width:46rem}

/* ---------- motion primitives ---------- */
[data-reveal]{opacity:0;transform:translateY(6px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="2"]{transition-delay:.12s}[data-reveal="3"]{transition-delay:.24s}[data-reveal="4"]{transition-delay:.36s}
.draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 2.2s var(--ease)}
.is-in .draw,.draw.is-in{stroke-dashoffset:0}
.pulse-once{transform-box:fill-box;transform-origin:center}
.is-in .pulse-once{animation:pulseOnce 1.6s var(--ease) .9s 1 both}
@keyframes pulseOnce{0%{transform:scale(1)}40%{transform:scale(1.9);opacity:.55}100%{transform:scale(1);opacity:1}}

/* hand underline */
.hand-u{position:relative;display:inline-block;white-space:nowrap}
.hand-u svg{position:absolute;left:-3%;bottom:-.14em;width:106%;height:.22em;overflow:visible}
.hand-u path{fill:none;stroke:var(--lichen);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:handDraw 1.6s var(--ease) 1.1s forwards}
@keyframes handDraw{to{stroke-dashoffset:0}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:56px 0 64px;background:var(--ink-deep)}
.foot .wrap{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:end}
.foot .f-brand{display:grid;gap:14px}
.foot .f-brand img{height:30px;width:auto}
.foot .f-links{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:flex-end}
.foot .f-links a{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);text-decoration:none;padding:12px 0}
.foot .f-links a:hover{color:var(--bone)}
.foot .f-made{grid-column:1/-1;display:flex;align-items:center;gap:10px;font:italic 400 1rem/1 var(--serif);color:var(--bone-3)}
.foot .f-made i{width:5px;height:5px;border-radius:50%;background:#F4D58A;box-shadow:0 0 10px 3px rgba(244,213,138,.45)}
@media(max-width:640px){.foot .wrap{grid-template-columns:1fr}.foot .f-links{justify-content:flex-start}}

/* ---------- fireflies toggle (from /assets/sprinkles.js) ---------- */
.sprk-toggle{font-family:var(--mono)!important;letter-spacing:.14em!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .draw{stroke-dashoffset:0;transition:none}
  .is-in .pulse-once{animation:none}
  .hand-u path{animation:none;stroke-dashoffset:0}
}

/* v6: buttons speak in tracked caps, like the mockup */
.btn{font:600 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.btn--line{border-color:rgba(199,163,104,.45)}
.btn--line:hover{border-color:var(--brass)}