/* ============================================================
   BOTANIA v4
   Intuitive Intelligence for Modern Business

   The thesis of the redesign: BOTANIA's existing venation engine
   already draws an organic branching network with information
   moving through it. v4 lets those branches terminate in named
   operational nodes. Same organism, now legible.

   Two layers, right tool for each:
     canvas  = ambient venation substrate (thousands of strokes)
     SVG     = the labelled system (real text, focusable nodes)
   ============================================================ */

:root{
  /* ---- ground ---- */
  --parchment:#F4F0E4;
  --parchment-deep:#E9E2CE;
  --canvas:#FAF8F1;          /* the system surface, LIGHTER than the page */

  /* ---- ink ---- */
  --bark:#1F1913;
  --bark-soft:#4A3F32;
  --bark-faint:#6F6152;   /* 5.3:1 on parchment */

  /* ---- semantic system colours ----
     Each hue has one job on the canvas, so colour carries
     information instead of decoration. */
  --forest:#2F4F35;          /* structure · triggers · primary CTA · logo */
  --forest-light:#4A7256;
  --sage:#7D9469;            /* connections at rest · ports · branch points */
  --mineral:#46585E;         /* intelligence · AI nodes · data in motion */
  --terracotta:#A6572F;      /* 24px and up only */
  --terracotta-ink:#8F4826;  /* human judgment · approval nodes · small text */
  --verdigris:#2F6B5E;       /* the travelling pulse. nothing else. */

  --hair:rgba(31,25,19,0.12);
  --hair-strong:rgba(31,25,19,0.2);
  --canvas-hair:rgba(31,25,19,0.09);

  /* ---- the BOTANIA corner ----
     One asymmetric radius, alternating direction. Used at page
     scale on cards and buttons, and at 1/8 scale on nodes. */
  --radius-a:2px 30px 2px 30px;
  --radius-b:30px 2px 30px 2px;
  --radius-sm-a:2px 16px 2px 16px;
  --radius-sm-b:16px 2px 16px 2px;

  --ease:cubic-bezier(.16,1,.3,1);
  --measure:66ch;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  background:var(--parchment);
  color:var(--bark);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-optical-sizing:auto;
  font-size:1rem;
  letter-spacing:0;
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- type scale ---------- */
h1,h2,h3,h4,.wordmark,.display{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--bark);
  font-optical-sizing:auto;
  font-variation-settings:'wdth' 100,'wght' 600;
}
h1{font-size:clamp(1.75rem,3.6vw,3rem);  line-height:1.08; letter-spacing:-.028em;}
h2{font-size:clamp(1.6875rem,3.7vw,2.625rem); line-height:1.12; letter-spacing:-.022em;}
h3{font-size:1.1875rem; line-height:1.35; letter-spacing:-.006em;}
h4{font-size:1.0625rem; line-height:1.4;  letter-spacing:-.004em;}
p{max-width:var(--measure);}

.mono,.eyebrow,.kicker{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.6875rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.eyebrow{color:var(--terracotta-ink); display:block; margin-bottom:1.25rem;}
.kicker{color:var(--terracotta-ink); display:block; margin-bottom:1.125rem;}

a{color:inherit; text-decoration:none;}
img,svg,canvas{display:block;}
:focus-visible{outline:2px solid var(--forest); outline-offset:3px; border-radius:2px;}

.wrap{max-width:72.5rem; margin:0 auto; padding:0 2.5rem; position:relative; z-index:2;}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- film grain ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  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='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   header
   ============================================================ */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(244,240,228,0.8);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--hair);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.125rem 2.5rem; max-width:72.5rem; margin:0 auto;
}
/* The wordmark carries 0.2em of letter-spacing, which leaves a trailing
   sliver after the final A. Cancelling it means the gap below is the
   real distance you see, not the gap plus that sliver. */
.brand{display:flex; flex-direction:row-reverse; align-items:center; gap:9px; color:var(--forest);}
.brand svg{width:15.2px; height:17px; flex:none;}
.brand svg line,.brand svg path{stroke-width:1.5;}
.brand .wordmark{
  font-size:17px; letter-spacing:0.2em; margin-right:-0.2em; text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 600; color:var(--bark);
}
nav.links{display:flex; gap:1.75rem; align-items:center;}
nav.links a.textlink{
  font-size:13.5px; font-weight:450; color:var(--bark-soft);
  position:relative; padding:7px 14px; border-radius:var(--radius-b);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
nav.links a.textlink::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:var(--forest); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
nav.links a.textlink:hover{color:var(--bark);}
nav.links a.textlink:hover::after{transform:scaleX(1); transform-origin:left;}
nav.links a.textlink[aria-current="page"]{color:var(--bark);}
nav.links a.textlink[aria-current="page"]::after{transform:scaleX(1); transform-origin:left;}

/* ============================================================
   section nav
   A thin index under the header on the longer pages, so nobody
   has to scroll a whole page to find the part they want.
   --header-h and --chrome-h are measured in JS, because the
   header changes height across breakpoints.
   ============================================================ */
.sectionnav{
  position:sticky; top:var(--header-h, 4.0625rem); z-index:35;
  background:rgba(244,240,228,0.92);
  backdrop-filter:blur(10px) saturate(1.05);
  border-bottom:1px solid var(--hair);
}
.sectionnav-inner{max-width:72.5rem; margin:0 auto; padding:0 2.5rem;}
.sectionnav-scroll{
  display:flex; gap:0.25rem; align-items:center;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.sectionnav-scroll::-webkit-scrollbar{display:none;}
.sectionnav a{
  flex:none; position:relative;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.625rem; letter-spacing:0.13em; text-transform:uppercase;
  font-weight:500; color:var(--bark-faint);
  padding:0.875rem 0.75rem; white-space:nowrap;
  transition:color .3s var(--ease);
}
.sectionnav a::after{
  content:''; position:absolute; left:0.75rem; right:0.75rem; bottom:0;
  height:2px; background:var(--forest);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.sectionnav a:hover{color:var(--bark);}
.sectionnav a[aria-current="true"]{color:var(--forest);}
.sectionnav a[aria-current="true"]::after{transform:scaleX(1);}
.sectionnav a:focus-visible{outline-offset:-3px;}

/* ---------- buttons ---------- */
.btn{
  font-family:'Archivo',sans-serif;
  font-size:0.8125rem; letter-spacing:0.02em;
  font-variation-settings:'wdth' 100,'wght' 600;
  padding:0.875rem 1.75rem;
  border-radius:var(--radius-a);
  display:inline-block; white-space:nowrap; border:1px solid transparent;
  transition:transform 100ms ease-out, background-color .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease);
}
.btn:active{transform:scale(0.97);}
.btn-solid{background:var(--forest); color:var(--parchment); border-color:var(--forest);}
.btn-solid:hover{background:var(--bark); border-color:var(--bark);}
.btn-ghost{background:transparent; color:var(--bark); border-color:var(--hair-strong);}
.btn-ghost:hover{border-color:var(--forest); color:var(--forest);}
.btn-sm{padding:0.625rem 1.25rem; font-size:0.75rem; border-radius:var(--radius-b);}

/* ---------- inline link ---------- */
.textlink-inline{
  color:var(--terracotta-ink);
  border-bottom:1px solid rgba(143,72,38,0.34);
  transition:border-color .25s var(--ease);
}
.textlink-inline:hover{border-bottom-color:var(--terracotta-ink);}
.textlink-inline .arrow{display:inline-block; transition:transform .25s var(--ease);}
.textlink-inline:hover .arrow{transform:translateX(3px);}

/* ============================================================
   sections
   ============================================================ */
section{position:relative; padding:5.5rem 0; z-index:2;
  scroll-margin-top:calc(var(--chrome-h, 5.5rem) + 1.5rem);}
.section-head{max-width:44rem; margin-bottom:3rem;}
.section-head p{color:var(--bark-soft); font-size:1.0625rem; margin-top:1.125rem;}

/* ---------- hero ---------- */
.hero{padding:4rem 0 3.5rem; overflow:hidden;}
/* The headline needs a wider column than the reading copy underneath it.
   The lede keeps its own narrower measure, so only the h1 uses this. */
.hero-copy{max-width:53rem;}
/* Wide enough for the headline to set in two lines. At 19ch it broke
   into four, which read as a wall rather than a statement. */
.hero h1{max-width:34ch; text-wrap:balance; margin-bottom:1.5rem;}
.hero .lede{font-size:1.15rem; color:var(--bark-soft); max-width:54ch; margin-bottom:2.25rem;}
.hero .actions{display:flex; gap:0.875rem; flex-wrap:wrap; align-items:center;}
.hero-slogan{
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem;
  letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  color:var(--terracotta-ink); display:block; margin-bottom:1.75rem;
}

/* ---------- page hero, interior pages ---------- */
.page-hero{padding:5.5rem 0 3.5rem;}
/* At 68px on a 16ch measure this ran to four lines. Smaller, on a wider
   measure, keeps every page title to two. */
.page-hero h1{
  font-size:clamp(1.875rem,4.4vw,3.25rem);
  text-transform:uppercase;
  font-variation-settings:'wdth' 74,'wght' 440;
  letter-spacing:-.02em; margin-bottom:1.25rem; max-width:26ch;
  text-wrap:balance;
}
.page-hero .lede{font-size:1.125rem; color:var(--bark-soft); max-width:58ch;}
.page-hero .lede + .lede{margin-top:1rem;}

/* ============================================================
   SYSTEM CANVAS
   The signature surface. Sits lighter than the page, an
   inversion of the dark workflow-tool convention.
   ============================================================ */
.canvas-plate{
  position:relative;
  background:var(--canvas);
  border:1px solid var(--hair);
  border-radius:2px 34px 2px 34px;
  padding:1.5rem;
  overflow:hidden;
}
.canvas-plate .veins{position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(130% 115% at 0% 0%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 34%, rgba(0,0,0,0) 62%);
  mask-image:radial-gradient(130% 115% at 0% 0%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 34%, rgba(0,0,0,0) 62%);}
.canvas-plate .veins canvas{position:absolute; inset:0; width:100%; height:100%;}
.canvas-scroll{position:relative; z-index:1; overflow-x:auto; overflow-y:hidden;}
.canvas-scroll svg{display:block; max-width:100%; height:auto; margin:0 auto;}
.canvas-legend{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem;
  margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--canvas-hair);
}
.canvas-legend span{
  font-family:'IBM Plex Mono',monospace; font-size:0.625rem;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--bark-soft);
  display:flex; align-items:center; gap:0.5rem;
}
/* An author `display` beats the UA rule for [hidden], so a key the canvas
   does not use would keep painting without this. */
.canvas-legend span[hidden]{display:none;}
/* The swatch carries the semantic colour; the label stays at reading
   contrast. Sage type at 10px measured 3.1:1, enough for a stroke on
   the canvas, not enough for a word. */
.canvas-legend i{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--sage); flex:none;
}
.canvas-legend .k-ai i{border-color:var(--mineral);}
.canvas-legend .k-human i{border-color:var(--terracotta-ink);}
.canvas-legend .k-trigger i{border-color:var(--forest); background:var(--forest);}

/* node hover/focus: reveal the role */
.sysnode{cursor:default;}
.sysnode .n-body{transition:stroke .3s var(--ease), fill .3s var(--ease);}
.sysnode .n-halo{opacity:0; transition:opacity .3s var(--ease);}
.sysnode:hover .n-halo,.sysnode:focus-visible .n-halo{opacity:1;}
.sysnode:focus{outline:none;}
.sysnode:focus-visible .n-body{stroke-width:1.9;}
.node-role{
  position:absolute; z-index:3; pointer-events:none;
  background:var(--bark); color:var(--parchment);
  font-family:'Inter',sans-serif; font-size:0.75rem; line-height:1.45;
  padding:0.5rem 0.75rem; border-radius:var(--radius-sm-a);
  max-width:15rem; opacity:0; transform:translateY(3px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.node-role.show{opacity:1; transform:none;}

/* State 1 of the homepage transformation: the functions exist, but
   nothing connects them. Drained of the semantic colour, because at
   this point none of it means anything yet. */
.canvas-scroll svg.state-manual .n-body{stroke:rgba(31,25,19,.22);}
.canvas-scroll svg.state-manual .n-icon{stroke:rgba(31,25,19,.42);}
.canvas-scroll svg.state-manual .n-status{fill:rgba(31,25,19,.18);}
.canvas-scroll svg .n-body,
.canvas-scroll svg .n-icon,
.canvas-scroll svg .n-status{transition:stroke .55s var(--ease), fill .55s var(--ease);}

/* CTA hover: the branches lean toward the button they converge on. */
.cta-canvas svg .links,.cta-canvas svg .ports{
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.cta-canvas svg.lean .links,.cta-canvas svg.lean .ports{transform:translateY(5px);}

/* ---------- canvas controls (scenario tabs, state switch) ---------- */
.canvas-tabs{display:flex; flex-wrap:wrap; gap:0 0.25rem; margin-bottom:1.25rem;}
.canvas-tabs button{
  position:relative;
  font-family:'Archivo',sans-serif; font-size:0.8125rem;
  font-variation-settings:'wdth' 100,'wght' 550;
  color:var(--bark-soft); background:transparent; border:0;
  padding:0.5rem 0.125rem 0.6875rem; margin-right:1.5rem; cursor:pointer;
  transition:color .3s var(--ease);
}
.canvas-tabs button::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--forest); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.canvas-tabs button:hover{color:var(--bark);}
.canvas-tabs button[aria-selected="true"]{color:var(--forest);}
.canvas-tabs button[aria-selected="true"]::after{transform:scaleX(1);}
.pan-hint{
  display:none; margin-top:0.75rem;
  font-family:'IBM Plex Mono',monospace; font-size:0.5625rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--bark-faint);
}
.pan-hint.is-on{display:block;}
.canvas-caption{
  margin-top:1.25rem; font-size:0.9375rem; color:var(--bark-soft); max-width:62ch;
}
.canvas-replay{
  font-family:'IBM Plex Mono',monospace; font-size:0.625rem; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:500; color:var(--forest);
  background:transparent; border:1px solid rgba(47,79,53,.3);
  border-radius:var(--radius-sm-b); padding:0.5rem 0.875rem; cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.canvas-replay:hover{background:rgba(47,79,53,.07); border-color:rgba(47,79,53,.6);}
.plate-head{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1rem;
}
.plate-head .label{
  font-family:'IBM Plex Mono',monospace; font-size:0.625rem;
  letter-spacing:0.16em; text-transform:uppercase; font-weight:500;
  color:var(--terracotta-ink);
}

/* ============================================================
   problem
   ============================================================ */
.problem-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:5rem; align-items:start;}
.problem-grid h2{margin-bottom:1.5rem;}
.problem-grid p{color:var(--bark-soft); font-size:1.03125rem; margin-bottom:1.125rem;}
.problem-list{list-style:none; margin-top:4px;}
.problem-list li{
  padding:1.125rem 0 1.125rem 2rem;
  border-top:1px solid var(--hair);
  font-family:'Archivo',sans-serif; font-size:16px;
  font-variation-settings:'wdth' 100,'wght' 500;
  position:relative; line-height:1.45;
}
.problem-list li:last-child{border-bottom:1px solid var(--hair);}
.problem-list li::before{
  content:''; position:absolute; left:0; top:1.6rem;
  width:7px; height:7px; border-radius:50%; border:1.5px solid var(--sage);
}

/* ============================================================
   layer stack, "what we build"
   Six layers of ONE system, named by role, not by technology.
   ============================================================ */
.layers{
  border:1px solid var(--hair);
  border-radius:2px 30px 2px 30px;
  overflow:hidden; background:var(--canvas);
}
.layer{
  display:grid; grid-template-columns:11rem 1fr;
  gap:0 2.5rem; align-items:start;
  padding:2rem 2.25rem;
  border-top:1px solid var(--hair);
  transition:background-color .4s var(--ease);
}
.layer:first-child{border-top:0;}
.layer:hover{background:rgba(233,226,206,0.4);}
.layer-name{display:flex; align-items:baseline; gap:0.75rem;}
.layer-name h3{font-size:1.0625rem; letter-spacing:-.004em;}
.layer-body p{color:var(--bark-soft); font-size:0.96875rem; max-width:58ch;}
.layer-body .detail{
  margin-top:0.75rem; display:flex; flex-wrap:wrap; gap:0.375rem 0.5rem;
}
.layer-body .detail span{
  font-family:'IBM Plex Mono',monospace; font-size:0.625rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--bark-faint);
  border:1px solid var(--hair); border-radius:var(--radius-sm-a);
  padding:0.25rem 0.625rem;
}

/* ============================================================
   process, understand / design / build / evolve
   ============================================================ */
.stages{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hair); border:1px solid var(--hair);
  border-radius:var(--radius-a); overflow:hidden;
}
.stage{background:var(--parchment); padding:2.25rem 1.75rem 2.5rem;
  transition:background .45s var(--ease);}
.stage:hover{background:var(--parchment-deep);}
.stage svg{width:30px; height:30px; color:var(--sage); margin-bottom:1.25rem;}
.stage h3{margin-bottom:0.625rem; font-size:1.1875rem;}
.stage p{color:var(--bark-soft); font-size:0.9375rem; letter-spacing:0.004em;}

/* ---------- quiet note, the sage rail ---------- */
.bridge{border-left:2px solid var(--sage); padding:0.5rem 0 0.5rem 1.75rem; max-width:42rem;}
.bridge p{color:var(--bark-soft); font-size:1.03125rem;}
.bridge p + p{margin-top:0.875rem;}
.bridge p.strong{
  color:var(--bark); font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 100,'wght' 550; letter-spacing:-.01em;
}

/* ============================================================
   notes list
   The same content the bordered rows carried, without the boxes.
   A hairline between items is enough separation.
   ============================================================ */
/* Same sage rail the closing sections use, so the run of sections reads as one. */
.notes{list-style:none; max-width:52rem;
  border-left:2px solid var(--sage); padding:0.25rem 0 0.25rem 1.75rem;}
.notes li{padding:1.125rem 0 1.1875rem; border-bottom:1px solid var(--hair);}
.notes li:last-child{border-bottom:0; padding-bottom:0.25rem;}
.notes b{
  display:block; margin-bottom:0.375rem;
  font-family:'Archivo',sans-serif; font-size:1.0625rem; line-height:1.35;
  font-variation-settings:'wdth' 100,'wght' 600; letter-spacing:-.006em; color:var(--bark);
}
.notes span{display:block; color:var(--bark-soft); font-size:0.96875rem; line-height:1.62; max-width:62ch;}
.notes li[data-accent="ai"] b{color:var(--mineral);}
.notes li[data-accent="human"] b{color:var(--terracotta-ink);}

/* ============================================================
   founder
   ============================================================ */
.about-grid{display:grid; grid-template-columns:18.75rem 1fr; gap:4rem; align-items:start;}
.about-photo{
  width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--radius-b); border:1px solid var(--hair);
}
.about-photo img{width:100%; height:100%; object-fit:cover;}
.about-copy p{color:var(--bark-soft); font-size:1.03125rem; margin-bottom:1.25rem;}
.about-copy p:last-child{margin-bottom:0;}

/* ---------- practice list ---------- */
/* Sits inside the founder copy column, so it shares that column's
   left and right edges and follows it when the grid collapses. */
.creds{
  margin-top:2.5rem;
  /* font-size is here only so the ch unit resolves against the same
     size as the paragraphs above, putting both right edges on one line. */
  font-size:1.03125rem; max-width:var(--measure);
}
.creds .creds-label{
  display:block; margin-bottom:0.9375rem;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.625rem;
  letter-spacing:0.16em; text-transform:uppercase; font-weight:500;
  color:var(--bark-faint);
}
.creds ul{list-style:none;}
.creds li{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem; padding:0.34375rem 0;
}
.creds .name{
  font-family:'Inter',system-ui,sans-serif; font-size:0.875rem; line-height:1.5;
  color:var(--bark-faint);
}
.creds .by{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.625rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--bark-faint);
  white-space:nowrap; flex:none; opacity:.8;
}

/* ============================================================
   build page, the intake
   ============================================================ */
.build-grid{display:grid; grid-template-columns:1fr 22rem; gap:4.5rem; align-items:start;}
.form-field{margin-bottom:1.5rem;}
.form-field label{
  display:block; margin-bottom:0.5rem;
  font-family:'Archivo',sans-serif; font-size:0.9375rem;
  font-variation-settings:'wdth' 100,'wght' 550;
}
.form-field .hint{
  display:block; margin-bottom:0.625rem;
  font-size:0.875rem; color:var(--bark-faint); font-weight:400;
  font-family:'Inter',sans-serif;
}
.form-field input,.form-field textarea,.form-field select{
  width:100%; font-family:'Inter',sans-serif; font-size:1rem; color:var(--bark);
  background:var(--canvas); border:1px solid var(--hair-strong);
  border-radius:var(--radius-sm-a); padding:0.8125rem 1rem;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.form-field textarea{min-height:7.5rem; resize:vertical; line-height:1.6;}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none; border-color:var(--forest); background:#FFF;
}
.form-field input:focus-visible,.form-field textarea:focus-visible,.form-field select:focus-visible{
  outline:2px solid var(--forest); outline-offset:2px;
}
.form-note{font-size:0.875rem; color:var(--bark-faint); margin-top:1rem;}
.build-aside{
  background:var(--canvas); border:1px solid var(--hair);
  border-radius:2px 28px 2px 28px; padding:2rem 1.875rem;
}
.build-aside h3{margin-bottom:0.875rem;}
.build-aside p{font-size:0.9375rem; color:var(--bark-soft); margin-bottom:1.25rem;}
.build-aside ul{list-style:none; display:flex; flex-direction:column; gap:0.625rem; margin-bottom:1.5rem;}
.build-aside li{
  display:flex; gap:0.75rem; font-size:0.9375rem; color:var(--bark-soft); line-height:1.5;
}
.build-aside li::before{
  content:''; width:5px; height:5px; flex:none; margin-top:0.5625rem;
  border:1px solid var(--sage); border-radius:50%;
}

/* ============================================================
   final cta
   ============================================================ */
.final-cta{padding:5rem 0 6.5rem; text-align:center;}
.final-cta .inner{max-width:46rem; margin:0 auto;}
.final-cta h2{
  font-size:clamp(1.75rem,4vw,2.875rem); margin-bottom:1.25rem;
  text-transform:uppercase; font-variation-settings:'wdth' 82,'wght' 560;
  letter-spacing:-.03em; text-wrap:balance;
}
.final-cta p{color:var(--bark-soft); font-size:1.0625rem; margin:0 auto 2.25rem;}
.final-cta .eyebrow{text-align:center;}
.cta-actions{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; align-items:center;}
/* The closing diagram is a coda, not a feature. */
.cta-canvas{max-width:33rem; margin:0 auto 2.25rem; overflow:hidden;}
.cta-canvas svg{display:block; max-width:100%; height:auto; margin:0 auto;}

/* ============================================================
   footer
   ============================================================ */
footer{padding:3rem 0 3.5rem; border-top:1px solid var(--hair); position:relative; z-index:2;}
.footer-inner{
  max-width:72.5rem; margin:0 auto; padding:0 2.5rem;
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
}
.footer-brand{display:flex; flex-direction:column; gap:0.5rem;}
footer .wordmark{font-size:14px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bark);}
/* The mark sits to the right of the wordmark, as it does in the header. */
.footer-brandline{display:flex; align-items:center; gap:7.7px; color:var(--forest);}
.footer-brandline .wordmark{margin-right:-0.2em;}
/* The viewBox is cropped to the drawing, so centring now centres the mark
   itself rather than a box that is a third empty. Height matches the
   wordmark's font size, and the strokes are thickened a little because
   at this scale the original 1.1 renders at about half a pixel. */
.footer-brandline svg{width:12.6px; height:14px; flex:none;}
.footer-brandline svg line,.footer-brandline svg path{stroke-width:1.8;}
footer .meta{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--bark-soft); letter-spacing:0.08em;
}
.footer-nav{display:flex; gap:1.5rem; flex-wrap:wrap;}
.footer-nav a{font-size:13.5px; color:var(--bark-soft); transition:color .3s var(--ease);}
.footer-nav a:hover{color:var(--bark);}
footer a.mail{color:var(--terracotta-ink); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);}
footer a.mail:hover{border-bottom-color:var(--terracotta-ink);}

/* ============================================================
   reveal
   ============================================================ */
/* The hidden state is applied only once JS has confirmed it is running.
   Without this, a script failure leaves every .reveal element invisible
   forever, the content layer must never depend on the animation layer. */
html.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
html.js .reveal.in{opacity:1; transform:none;}

/* Same reasoning: an empty canvas plate is worse than no plate. */
html:not(.js) .canvas-plate,
html:not(.js) .cta-canvas{display:none;}

/* ============================================================
   mobile nav toggle
   ============================================================ */
.nav-toggle{
  display:none; position:relative; z-index:2;
  width:2.625rem; height:2.375rem;
  align-items:center; justify-content:center; gap:5px; flex-direction:column;
  background:transparent; border:1px solid var(--hair-strong);
  border-radius:var(--radius-b); cursor:pointer;
  transition:border-color .3s var(--ease);
}
.nav-toggle:hover{border-color:var(--forest);}
.nav-toggle span{display:block; width:17px; height:1.5px; background:var(--bark);
  transition:transform .35s var(--ease), opacity .25s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1060px){
  nav.links{gap:0.875rem;}
  nav.links a.textlink{padding:7px 9px;}
  nav.links a.textlink::after{left:9px; right:9px;}
  nav.links .btn-sm{padding:0.625rem 0.875rem;}
}
@media (max-width:980px){
  .problem-grid{grid-template-columns:1fr; gap:2.75rem;}
  .stages{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:15rem 1fr; gap:2.5rem;}
  .build-grid{grid-template-columns:1fr; gap:2.5rem;}
  .layer{grid-template-columns:1fr; gap:0.75rem;}
}
@media (max-width:800px){
  .nav-toggle{display:flex; width:2.75rem; height:2.75rem;}
  .brand{min-height:2.75rem;}
  nav.links .btn-sm{padding:0.875rem 1.25rem;}
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:0.875rem 1.375rem 1.375rem;
    background:var(--parchment);
    border-bottom:1px solid var(--hair);
    box-shadow:0 18px 40px -24px rgba(31,25,19,0.35);
    display:flex;
    opacity:0; visibility:hidden; transform:translateY(-0.5rem);
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
  }
  nav.links.open{opacity:1; visibility:visible; transform:none;
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility 0s;}
  nav.links a.textlink{padding:0.8125rem 0.875rem; font-size:15px;
    border-bottom:1px solid var(--hair); border-radius:0;}
  nav.links a.textlink::after{display:none;}
  nav.links a.textlink[aria-current="page"]{border-bottom-color:var(--forest);}
  nav.links .btn{margin-top:0.875rem; text-align:center;}
  .about-grid{grid-template-columns:1fr; gap:2.125rem;}
  .about-photo{max-width:17.5rem;}
}
@media (max-width:720px){
  .sectionnav-inner{padding:0 1.375rem;}
  .sectionnav a{padding:0.8125rem 0.625rem; font-size:0.5938rem;}
  .wrap{padding:0 1.375rem;}
  .nav{padding:0.9375rem 1.375rem;}
  section{padding:3.5rem 0;}
  .hero{padding:2.25rem 0 2.5rem;}
  .page-hero{padding:3.25rem 0 2.25rem;}
  .stages{grid-template-columns:1fr;}
  .footer-inner{padding:0 1.375rem; flex-direction:column; gap:1.5rem;}
  .final-cta{padding:3.5rem 0 4.5rem;}
  .canvas-plate{padding:1rem; border-radius:2px 24px 2px 24px;}
  .layer{padding:1.5rem 1.375rem;}
  .build-aside{padding:1.5rem 1.375rem;}
  /* Below this width the desktop figures would scale to illegibility.
     The hero swaps to its own vertical layout and fits; the wider
     scenario canvases hold a minimum and pan instead. */
  .canvas-scroll{ -webkit-overflow-scrolling:touch; }
  #scenarioCanvas,#humanCanvas,#transformCanvas{min-width:660px;}
}

/* On very narrow phones the two columns cannot share a line, so the
   issuer drops under the name rather than wrapping raggedly. */
@media (max-width:380px){
  .creds li{flex-direction:column; gap:0.125rem; align-items:flex-start; padding:0.5rem 0;}
  .creds .by{opacity:1;}
}

/* ============================================================
   accessibility preferences
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sectionnav a::after,.canvas-tabs button::after{transition:none;}
  html.js .reveal{opacity:0; transform:none; transition:opacity .3s ease;}
  html.js .reveal.in{opacity:1;}
  .btn{transition:background-color .2s ease, color .2s ease, border-color .2s ease;}
  .btn:active{transform:none;}
  .layer:hover,.stage:hover{transition:none;}
  .textlink-inline:hover .arrow{transform:none;}
  nav.links{transform:none; transition:opacity .2s ease, visibility 0s linear .2s;}
  nav.links.open{transform:none; transition:opacity .2s ease, visibility 0s;}
  .node-role{transition:opacity .15s ease; transform:none;}
  .node-role.show{transform:none;}
}
@media (prefers-reduced-transparency:reduce){
  header{background:var(--parchment); backdrop-filter:none;}
  .sectionnav{background:var(--parchment); backdrop-filter:none;}
  nav.links{background:var(--parchment); backdrop-filter:none;}
}
@media (prefers-contrast:more){
  header{background:var(--parchment); backdrop-filter:none; border-bottom-color:var(--bark-soft);}
  .sectionnav{background:var(--parchment); backdrop-filter:none; border-bottom-color:var(--bark-soft);}
  .sectionnav a[aria-current="true"]{color:var(--bark);}
  nav.links{background:var(--parchment); backdrop-filter:none;}
  .layers,.layer,.stages,.problem-list li,.canvas-plate,.notes li{border-color:var(--bark-soft);}
  .btn-ghost{border-color:var(--bark);}
  .textlink-inline{border-bottom-color:var(--terracotta-ink);}
  .canvas-tabs button{border-color:var(--bark-soft);}
}