/* =========================================================
   permaculture.studio
   Editorial regenerative design — Dover, Pennsylvania.
   Motion philosophy: nothing snaps. Everything settles,
   drifts, and draws — the way water finds its level.
   ========================================================= */

:root{
  --paper:#E7E8E2;
  --paper-deep:#DFE1DA;
  --ink:#14171A;
  --ink-soft:#3E454B;   /* body — lifted for contrast on the paper tone */
  --ink-faint:#6C726D;  /* meta / labels — legible but recessive */
  --rule:rgba(20,23,26,.18);
  --rule-strong:rgba(20,23,26,.42);
  --display:"Bodoni Moda",Georgia,serif;
  --book:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,.9,.28,1);
  --gutter:clamp(1.5rem,6vw,7rem);

  /* live values driven by JS pointer/scroll parallax */
  --px:0;   /* -1 .. 1 pointer x */
  --py:0;   /* -1 .. 1 pointer y */
  --scroll:0; /* 0 .. 1 page progress */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:1px}

.skip{
  position:fixed;top:.6rem;left:.6rem;z-index:50;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  padding:.6rem .9rem;border-radius:2px;
  transform:translateY(-160%);transition:transform .4s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* ---------- Living contour field ---------------------- */
.field{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  will-change:transform;
}
.field-inner{
  position:absolute;inset:-8% -6%;
  /* pointer parallax + gentle scroll drift, composited */
  transform:translate3d(calc(var(--px) * 26px), calc(var(--py) * 20px + var(--scroll) * -60px), 0);
  transition:transform .9s var(--ease-soft);
}
.field svg{width:180%;height:100%;display:block}
.field path{fill:none;stroke:var(--ink);stroke-width:.75;opacity:.11}
.drift-a{animation:drift 74s linear infinite}
.drift-b{animation:drift 112s linear infinite reverse}
.drift-c{animation:drift 92s linear infinite}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}

/* ---------- Tactile paper grain ----------------------- */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- Growth thread (scroll-drawn vine) --------- */
.thread{
  position:fixed;left:clamp(.7rem,2.4vw,2.1rem);top:16vh;bottom:14vh;
  width:12px;z-index:1;pointer-events:none;opacity:0;
  transition:opacity 1.2s var(--ease) .6s;
}
.is-ready .thread{opacity:.5}
.thread svg{width:100%;height:100%;display:block;overflow:visible}
.thread-line{
  fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:round;
  opacity:.5;
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--scroll));
  /* dash geometry set precisely in JS from path length */
}

/* ---------- Layout ------------------------------------ */
.wrap{position:relative;z-index:3;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft)}

.top{display:flex;justify-content:space-between;align-items:baseline;padding:2.2rem 0 0}
.top .mono{opacity:0;transform:translateY(-6px);animation:topin 1.1s var(--ease) .15s forwards}
.top-place{animation-delay:.28s}
@keyframes topin{to{opacity:1;transform:translateY(0)}}

/* line-mask reveal primitive */
.mask{display:block;overflow:hidden;padding-bottom:.04em}
.mask>*{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.up .mask>*{transform:translateY(0)}

/* ---------- Hero -------------------------------------- */
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:5rem 0 7.5rem;position:relative}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:1.7rem;padding-left:.1em}
.word{position:relative;display:inline-block;will-change:transform}
.word h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(4.5rem,17vw,12.5rem);line-height:.86;
  letter-spacing:-.025em;padding-right:.06em;
}
.strike{position:absolute;left:-4%;right:-4%;top:52%;height:40px;transform:translateY(-50%);pointer-events:none}
.strike path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.5s var(--ease) .95s}
.up .strike path{stroke-dashoffset:0}

.phon{margin-top:1.6rem;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-faint)}
.phon em{font-family:var(--display);font-style:italic;letter-spacing:0}
.def{
  margin-top:2.4rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5.4vw,4rem);line-height:1.12;letter-spacing:-.015em;max-width:20ch;
}
.pitch{
  margin-top:2.2rem;max-width:46ch;
  font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.5;color:var(--ink-soft);
  opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--ease) .95s,transform 1s var(--ease) .95s;
}
.up .pitch{opacity:1;transform:none}
.pitch b{font-weight:500;color:var(--ink)}

.scroll-cue{
  position:absolute;left:0;bottom:1.4rem;display:inline-flex;align-items:center;gap:.7rem;
  color:var(--ink-faint);opacity:0;animation:cuein 1s var(--ease) 2.1s forwards;
}
.scroll-cue-line{position:relative;width:46px;height:1px;background:var(--rule-strong);overflow:hidden}
.scroll-cue-line::after{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateX(-100%);animation:cuewipe 2.6s var(--ease) 2.6s infinite}
@keyframes cuein{to{opacity:1}}
@keyframes cuewipe{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---------- Hero showcase: live tool deck ------------- */
.showcase{
  margin-top:clamp(2.6rem,5vw,4.2rem);
  opacity:0;transform:translateY(20px);
  transition:opacity 1.1s var(--ease) 1.15s,transform 1.1s var(--ease) 1.15s;
}
.up .showcase{opacity:1;transform:none}

.showcase-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--rule);
}
.showcase-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.showcase-nav{display:flex;align-items:center;gap:.85rem}
.deck-count{font-size:11.5px;letter-spacing:.12em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.deck-count [data-deck-index]{color:var(--ink)}
.deck-slash{opacity:.5;padding:0 .15em}
.deck-btn{
  width:30px;height:30px;display:grid;place-items:center;
  background:none;border:1px solid var(--rule);border-radius:50%;color:var(--ink-soft);
  cursor:pointer;transition:border-color .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.deck-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.deck-btn:hover,.deck-btn:focus-visible{border-color:var(--rule-strong);color:var(--ink)}
.deck-btn:active{transform:scale(.92)}
.deck-btn[disabled]{opacity:.3;cursor:default}
.deck-btn[disabled]:hover{border-color:var(--rule);color:var(--ink-soft)}

/* The deck itself — native snap scrolling, no library */
.deck{
  display:flex;gap:clamp(1rem,2.2vw,1.9rem);
  margin-top:clamp(1.4rem,2.6vw,2.2rem);
  padding:.4rem calc(100% - min(86vw,470px)) .4rem 0;   /* trailing room so the last card can center */
  position:relative;   /* offsetParent for the slides, so JS reads scroll offsets directly */
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.deck::-webkit-scrollbar{display:none}
.deck:focus-visible{outline-offset:8px}

.slide{
  flex:0 0 min(86vw,470px);scroll-snap-align:start;
  /* --near: 1 when centered, 0 when a full card away — set per frame in JS.
     Defaults to 1 so a deck with no JS reads at full strength. */
  --near:1;
  opacity:calc(.42 + var(--near) * .58);
  transform:scale(calc(.945 + var(--near) * .055));
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
  will-change:transform,opacity;
}
.slide-link{display:block}

/* The window: a hairline instrument case, not a browser chrome cliche */
.window{
  display:block;position:relative;
  border:1px solid var(--rule);border-radius:3px;
  background:var(--paper-deep);overflow:hidden;
  box-shadow:0 1px 0 rgba(20,23,26,.04);
  transition:border-color .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease);
}
.slide-link:hover .window,.slide-link:focus-visible .window{
  border-color:var(--rule-strong);
  box-shadow:0 18px 44px -28px rgba(20,23,26,.5);
  transform:translateY(-3px);
}
.window-bar{
  display:flex;align-items:center;gap:.55rem;
  padding:.55rem .8rem;border-bottom:1px solid var(--rule);
  background:linear-gradient(var(--paper),var(--paper-deep));
}
.window-live{
  width:5px;height:5px;border-radius:50%;background:var(--ink);flex:0 0 auto;
  animation:pulse 3.4s var(--ease-soft) infinite;
}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.window-url{
  font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Viewport: a desktop-width page, scaled to fit the card */
.window-view{
  display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--paper);
  container-type:inline-size;
}
.poster{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(20,23,26,.035) 27px 28px),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(20,23,26,.035) 27px 28px),
    var(--paper);
  transition:opacity .9s var(--ease);
}
.poster-name{font-family:var(--display);font-size:clamp(1.6rem,7cqw,2.6rem);line-height:1;letter-spacing:-.02em}
.poster-note{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.frame{
  position:absolute;top:0;left:0;z-index:2;
  width:1280px;height:800px;border:0;
  /* --k is the card-width / 1280 ratio, measured in JS */
  transform:scale(var(--k,.35));transform-origin:0 0;
  opacity:0;transition:opacity 1.1s var(--ease);
  pointer-events:none;   /* the card is the link; the page inside is a picture */
}
.slide.is-loaded .frame{opacity:1}
.slide.is-slow .frame{display:none}   /* a site that refuses framing keeps its poster */
.slide.is-loaded .poster{opacity:0}

.slide-meta{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"idx name cta" "idx desc desc";
  gap:.15rem .85rem;padding-top:1rem;
}
.slide-meta .idx{grid-area:idx;font-size:11px;letter-spacing:.14em;color:var(--ink-faint);padding-top:.42rem}
.slide-name{grid-area:name;font-family:var(--display);font-size:1.5rem;line-height:1.15;letter-spacing:-.015em}
.slide-cta{grid-area:cta;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  padding-top:.5rem;transition:color .5s var(--ease),transform .5s var(--ease)}
.slide-desc{grid-area:desc;font-size:14.5px;line-height:1.5;color:var(--ink-soft);max-width:42ch}
.slide-link:hover .slide-cta,.slide-link:focus-visible .slide-cta{color:var(--ink);transform:translateX(4px)}

/* Progress rail — reads the deck's real scroll position */
.deck-rail{position:relative;height:1px;margin-top:clamp(1.2rem,2.4vw,1.8rem);background:var(--rule)}
.deck-rail-run{
  position:absolute;left:0;top:-.5px;height:2px;background:var(--ink);
  width:var(--run-w,16%);transform:translateX(var(--run-x,0px));
  transition:transform .35s var(--ease-soft),width .35s var(--ease-soft);
}

@media (max-width:640px){
  .deck{padding-right:calc(100% - min(86vw,470px))}
  .slide-name{font-size:1.3rem}
  .slide-desc{font-size:13.5px}
}

/* ---------- Rules & sections -------------------------- */
.rule{height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease)}
.in .rule,.up .rule{transform:scaleX(1)}

.sec{padding:clamp(5rem,12vw,9.5rem) 0 0}
.eyebrow{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:1.1rem}

.stanzas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(2rem,5vw,4.5rem);padding-top:3.2rem}
.stanza{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.in .stanza{opacity:1;transform:none}
.in .stanza:nth-child(2){transition-delay:.13s}
.in .stanza:nth-child(3){transition-delay:.26s}
.stanza p{font-size:17px;line-height:1.62;color:var(--ink-soft);max-width:32ch}
.stanza p b{font-weight:500;color:var(--ink)}

.lead{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.25;
  letter-spacing:-.01em;max-width:26ch;padding-top:2.6rem;
  opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .1s,transform 1s var(--ease) .1s}
.in .lead{opacity:1;transform:none}
.lead-quiet{color:var(--ink-soft)}

/* ---------- FAQ as an aged book leaf ------------------ */
.book{
  --bk-ink:#33291a;--bk-soft:#4b3f2c;--bk-faint:#8a7a58;--bk-rule:rgba(74,58,30,.28);
  position:relative;max-width:730px;
  margin:clamp(2.4rem,6vw,4rem) auto 0;
  padding:clamp(2.4rem,5.5vw,4.6rem) clamp(1.7rem,5vw,4.3rem);
  font-family:var(--book);color:var(--bk-soft);
  border-radius:3px;
  background-color:#eae0c8;
  background-image:
    radial-gradient(130% 92% at 50% -12%, rgba(255,251,240,.55), rgba(255,251,240,0) 55%),
    radial-gradient(120% 120% at 50% 116%, rgba(92,72,38,.20), rgba(92,72,38,0) 55%),
    radial-gradient(46% 34% at 17% 20%, rgba(120,96,52,.07), rgba(120,96,52,0) 62%),
    radial-gradient(42% 30% at 84% 74%, rgba(120,96,52,.06), rgba(120,96,52,0) 62%),
    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='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:auto,auto,auto,auto,180px 180px;
  background-blend-mode:normal,normal,normal,normal,multiply;
  box-shadow:
    0 2px 0 #ded2b3,
    0 5px 0 -1px #d5c9aa,
    0 8px 0 -2px #cabd9c,
    0 44px 60px -38px rgba(38,28,10,.6),
    inset 0 0 0 1px rgba(74,58,30,.10),
    inset 0 0 70px rgba(74,58,30,.05);
  opacity:0;transform:translateY(26px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.in .book{opacity:1;transform:none}

.book-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-style:italic;font-size:clamp(.95rem,1.5vw,1.1rem);color:var(--bk-faint);
  padding-bottom:1.1rem;margin-bottom:2.2rem;border-bottom:1px solid var(--bk-rule)}
.book-title{font-style:normal;font-variant:small-caps;letter-spacing:.09em}
.book-folio{font-style:normal;font-variant:small-caps;letter-spacing:.16em}

.epigraph{text-align:center;font-style:italic;line-height:1.4;color:var(--bk-soft);
  font-size:clamp(1.18rem,2.1vw,1.5rem);max-width:32ch;margin:0 auto 2.6rem}

.entry{margin:0}
.q{font-style:italic;font-weight:500;color:var(--bk-ink);
  font-size:clamp(1.22rem,2.2vw,1.55rem);line-height:1.2;margin-bottom:.55rem}
.a{font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.62;color:var(--bk-soft);
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.a b{font-weight:400;font-style:italic;color:var(--bk-ink)}
.a em{font-style:italic}
.entry--lead .a::first-letter{
  float:left;font-weight:500;font-size:4.1em;line-height:.76;
  padding-right:.09em;margin-top:.02em;color:var(--bk-ink)}

.fleuron{height:22px;margin:2.1rem auto;background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='20' viewBox='0 0 74 20'%3E%3Cg fill='none' stroke='%238a7a58' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M4 10 H27'/%3E%3Cpath d='M70 10 H47'/%3E%3Cpath d='M37 5 C32 5 30 8 29 10 C30 12 32 15 37 15 C42 15 44 12 45 10 C44 8 42 5 37 5 Z'/%3E%3Cpath d='M37 5 V15'/%3E%3C/g%3E%3Ccircle cx='37' cy='10' r='1.3' fill='%238a7a58'/%3E%3C/svg%3E")}

.book-foot{display:flex;justify-content:space-between;gap:1rem;
  font-style:italic;font-variant:small-caps;letter-spacing:.09em;
  font-size:clamp(.85rem,1.4vw,1rem);color:var(--bk-faint);
  border-top:1px solid var(--bk-rule);margin-top:2.7rem;padding-top:1.2rem}

@media (max-width:640px){
  .a{text-align:left;hyphens:manual}
  .entry--lead .a::first-letter{font-size:3.4em}
}

/* ---------- Founder bio ------------------------------- */
.bio-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,6vw,5.5rem);align-items:start;
  padding-top:clamp(2.6rem,6vw,4rem);
}
.bio-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-.02em;
  max-width:15ch;
}
.bio-place{
  margin-top:1.6rem;font-size:11px;letter-spacing:.12em;color:var(--ink-faint);
  opacity:0;transform:translateY(10px);
  transition:opacity 1s var(--ease) .3s,transform 1s var(--ease) .3s;
}
.in .bio-place{opacity:1;transform:none}

.bio-body{max-width:48ch}
.bio-para{
  font-size:clamp(1.02rem,1.7vw,1.18rem);line-height:1.62;color:var(--ink-soft);
  margin-bottom:1.4rem;
  opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.in .bio-para{opacity:1;transform:none}
.in .bio-para:nth-child(2){transition-delay:.12s}
.in .bio-para:nth-child(3){transition-delay:.24s}
.bio-para b{font-weight:500;color:var(--ink)}
.bio-sign{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.65rem);line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);margin-top:.4rem;
  opacity:0;transform:translateY(18px);
  transition:opacity 1s var(--ease) .34s,transform 1s var(--ease) .34s;
}
.in .bio-sign{opacity:1;transform:none}

.bio-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(3rem,7vw,5rem);padding-top:2rem;border-top:1px solid var(--rule);
}
.bio-fact{display:flex;flex-direction:column;gap:.55rem;
  opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .bio-fact{opacity:1;transform:none}
.in .bio-fact:nth-child(2){transition-delay:.11s}
.in .bio-fact:nth-child(3){transition-delay:.22s}
.bio-fact-n{
  font-family:var(--display);font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1;
  letter-spacing:-.02em;color:var(--ink);
}
.bio-fact-l{font-size:14px;line-height:1.5;color:var(--ink-faint);max-width:26ch}

@media (max-width:760px){
  .bio-grid{grid-template-columns:1fr;gap:2.2rem}
  .bio-name{max-width:20ch}
  .bio-facts{grid-template-columns:1fr;gap:1.6rem}
  .bio-fact{flex-direction:row;align-items:baseline;gap:1rem}
  .bio-fact-n{font-size:1.9rem;white-space:nowrap;flex:0 0 auto;min-width:5.5rem}
  .bio-fact-l{max-width:none}
}

/* ---------- Tools (editorial index) ------------------- */
.tools{padding-top:3rem}
.tool{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "idx name state"
    "idx desc desc";
  column-gap:clamp(1.1rem,3vw,2.4rem);row-gap:.65rem;
  align-items:baseline;
  padding:2rem 0;border-bottom:1px solid var(--rule);position:relative;
  opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .tool{opacity:1;transform:none}
.in .tool:nth-child(2){transition-delay:.11s}
.in .tool:nth-child(3){transition-delay:.22s}
.in .tool:nth-child(4){transition-delay:.33s}
.in .tool:nth-child(5){transition-delay:.44s}
.in .tool:nth-child(6){transition-delay:.55s}
.tool:first-child{border-top:1px solid var(--rule)}
.tool .idx{grid-area:idx;color:var(--ink-faint);font-size:12px;letter-spacing:.14em;
  padding-top:.55rem;transition:color .45s var(--ease)}
.tool .name{grid-area:name;font-family:var(--display);font-size:clamp(1.65rem,3.3vw,2.3rem);
  line-height:1.02;letter-spacing:-.012em;transition:transform .55s var(--ease);
  transform:translateX(0);will-change:transform}
.tool .state{grid-area:state;justify-self:end;font-family:var(--mono);font-size:11px;
  letter-spacing:.11em;color:var(--ink-faint);white-space:nowrap;
  transition:color .45s var(--ease),transform .55s var(--ease)}
.tool .desc{grid-area:desc;color:var(--ink-soft);font-size:16px;line-height:1.55;max-width:54ch;
  transition:color .45s var(--ease)}
.tool::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
a.tool:hover .name,a.tool:focus-visible .name{transform:translateX(12px)}
a.tool:hover .idx,a.tool:focus-visible .idx{color:var(--ink)}
a.tool:hover .desc,a.tool:focus-visible .desc{color:var(--ink)}
a.tool:hover .state,a.tool:focus-visible .state{color:var(--ink);transform:translateX(5px)}
a.tool:hover::after,a.tool:focus-visible::after{transform:scaleX(1)}

/* ---------- Close ------------------------------------- */
.close{padding:clamp(6rem,14vw,11rem) 0 clamp(4rem,9vw,7rem)}
.close-body{padding-top:3.2rem}
.close h2{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,8vw,6rem);
  line-height:1.02;letter-spacing:-.022em;max-width:14ch}
.contact{display:inline-flex;align-items:baseline;gap:.7rem;margin-top:3rem;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;position:relative;padding-bottom:.4rem;
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s}
.up .contact{opacity:1;transform:none}
.contact::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.contact:hover::after,.contact:focus-visible::after{transform:scaleX(1);transform-origin:left}

.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.6rem 0 3rem;border-top:1px solid var(--rule);margin-top:clamp(4rem,10vw,8rem)}

/* ---------- Responsive -------------------------------- */
@media (max-width:640px){
  .stanzas{padding-top:2.4rem}
  .tool{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "idx name"
      "desc desc"
      "state state";
    row-gap:.5rem;
  }
  .tool .state{justify-self:start}
  .tool .idx{padding-top:.35rem}
  .thread{display:none}
  .scroll-cue{display:none}
}

/* ---------- Reduced motion ---------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .field-inner{transform:none}
  .mask>*{transform:none}
  .strike path{stroke-dashoffset:0}
  .thread-line{stroke-dashoffset:0}
  .rule{transform:scaleX(1)}
  .stanza,.tool,.lead,.contact,.pitch,.book{opacity:1;transform:none}
  .showcase{opacity:1;transform:none}
  .deck{scroll-behavior:auto}
  .slide{opacity:1;transform:none;transition:none}
  .window-live{animation:none;opacity:.8}
  .deck-rail-run{transition:none}
  .bio-place,.bio-para,.bio-sign,.bio-fact{opacity:1;transform:none}
  .top .mono{opacity:1;transform:none}
  .scroll-cue{opacity:1;animation:none}
}