/* ============================================================
   slopstopper.org — shared stylesheet, self-hosted, no external calls at runtime.
   Set in Bricolage Grotesque + IBM Plex Mono, self-hosted.
   ============================================================ */

@font-face{font-family:"Bricolage";src:url("fonts/bricolage-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage";src:url("fonts/bricolage-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage";src:url("fonts/bricolage-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage";src:url("fonts/bricolage-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"PlexMono";src:url("fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("fonts/plexmono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("fonts/plexmono-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#f5f4f2; --ink:#17171a; --red:#d1553f;
  --bg:var(--paper); --fg:var(--ink);
  --hair: color-mix(in srgb, var(--ink) 16%, transparent);
  --hair-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  --muted: color-mix(in srgb, var(--ink) 58%, transparent);
  --faint: color-mix(in srgb, var(--ink) 8%, transparent);
  --red-soft: color-mix(in srgb, var(--red) 14%, transparent);
  --gutter: clamp(2.75rem, 8vw, 7.5rem);
  --edge: clamp(1.1rem, 5vw, 4rem);
  --maxw: 1220px;
  --plumbL: clamp(300px, 62vh, 900px);   /* shorter line (owner, 2026-09-23): the bob hangs about two-thirds down, not at the foot of the viewport */
  --mono:"PlexMono", ui-monospace, "SF Mono", Menlo, monospace;
  --disp:"Bricolage", ui-sans-serif, system-ui, sans-serif;
}
html[data-theme="dark"]{
  --bg:var(--ink); --fg:var(--paper);
  --hair: color-mix(in srgb, var(--paper) 15%, transparent);
  --hair-strong: color-mix(in srgb, var(--paper) 30%, transparent);
  --muted: color-mix(in srgb, var(--paper) 60%, transparent);
  --faint: color-mix(in srgb, var(--paper) 6%, transparent);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* the one fluid scale: rem everywhere below follows it, so labels, descs and
     asides grow with body copy instead of sitting at a fixed 16px root */
  font-size:clamp(1rem,.88rem + .4vw,1.22rem)}   /* 16px at 360, ~18 at 1000, 19.5 from 1360 up */
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--disp); font-weight:400;
  font-size:1rem;
  line-height:1.62; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}
/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:multiply;
}
html[data-theme="dark"] body::before{mix-blend-mode:screen; opacity:.05}

::selection{background:var(--red); color:var(--paper)}

a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:2px}

/* ---------- layout scaffold ---------- */
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding-left:calc(var(--edge) + var(--gutter)); padding-right:var(--edge)}
@media(max-width:640px){ :root{--gutter:2.25rem} }

/* the plumb line — fixed to the viewport so it stays a true-vertical
   reference. Grab the bob (or the string) and swing it; pendulum physics
   (in JS) always settles it back to plumb. It finds true down. */
.plumb-mark{position:absolute; top:0; left:calc(var(--edge) + var(--gutter)*0.5);
  width:0; height:0; pointer-events:none}
.plumb{position:fixed; z-index:30; top:0; height:var(--plumbL); width:0;
  left:calc(max(0px, (100vw - var(--maxw)) / 2) + var(--edge) + var(--gutter)*0.5);
  transform-origin:top center; will-change:transform; pointer-events:none;
  transition:opacity .4s ease}
/* tuck the line away before it can cross the footer / closer text */
.plumb.tucked{opacity:0}
.plumb.tucked .grab,.plumb.tucked .bob{pointer-events:none}
.plumb .string{position:absolute; top:0; bottom:34px; left:-1px; width:2px; border-radius:2px;
  background:linear-gradient(var(--hair-strong), var(--red) 55%, var(--red))}
.plumb .bob{position:absolute; bottom:0; left:-8px; width:16px; height:34px; transition:transform .18s ease; pointer-events:auto; cursor:pointer;
  filter:drop-shadow(0 3px 7px color-mix(in srgb, var(--red) 45%, transparent))}
.plumb .grab{position:absolute; top:0; bottom:-14px; left:-24px; width:48px;
  pointer-events:auto; cursor:pointer; touch-action:pan-y}
.plumb.swingable .grab:hover ~ .bob{transform:scale(1.12)}
.plumb.poked .bob{transform:scale(0.86)}

/* ---------- masthead / nav ---------- */
.topbar{position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(1.1) blur(6px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--hair)}
.topbar .row{max-width:var(--maxw); margin:0 auto;
  padding:.75rem var(--edge); display:flex; align-items:center; gap:1.5rem}
.brand{display:flex; align-items:center; gap:.55rem; margin-right:auto}
.brand svg{height:19px; width:auto; display:block}
.brand svg .wm-letter,.brand svg .wm-plumb{fill:var(--fg)}
.brand svg .wm-bar{fill:var(--red)}
.brand .tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding-left:.65rem;
  border-left:1px solid var(--hair)}
@media(max-width:720px){.brand .tag{display:none}}
nav.links{display:flex; gap:1.35rem; align-items:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase}
nav.links a{color:var(--muted); position:relative; padding:.2rem 0}
nav.links a:hover{color:var(--fg)}
nav.links a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--red); transition:right .28s ease}
nav.links a:hover::after{right:0}
@media(max-width:860px){nav.links a.hideable{display:none}}
/* very narrow: tighten the bar so nothing spills off-screen */
@media(max-width:420px){
  .topbar .row{gap:.9rem}
  nav.links{gap:.95rem; font-size:.68rem}
  .ttog #tlbl{display:none}
  .ttog{padding:.35rem .45rem}
}
.ttog{font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; background:none; border:1px solid var(--hair);
  color:var(--muted); padding:.35rem .55rem; border-radius:100px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; transition:border-color .2s,color .2s}
.ttog:hover{border-color:var(--hair-strong); color:var(--fg)}
.ttog svg{width:13px; height:13px}

/* ---------- section chrome ---------- */
section{position:relative; padding-block:clamp(4.5rem,10vw,8.5rem)}
section + section{border-top:1px solid var(--hair)}
.eyebrow{font-family:var(--mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin:0 0 1.4rem}
h2{font-family:var(--disp); font-weight:700; letter-spacing:-0.03em; line-height:.98;
  font-size:clamp(2.15rem,6.2vw,3.8rem); margin:0 0 1.6rem; max-width:15ch}   /* cap in rem follows the root: ~74px at the top of the scale */
.lead{font-size:clamp(1.12rem,.95rem + .6vw,1.35rem); line-height:1.55; max-width:46ch; color:var(--fg)}
p{margin:0 0 1.1rem}
.muted{color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3.5rem,8vw,6.5rem); padding-bottom:clamp(4rem,9vw,7rem)}
.hero .mast{width:clamp(240px,52vw,540px); height:auto; display:block; margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.hero .mast .wm-letter,.hero .mast .wm-plumb{fill:var(--fg)}
.hero .mast .wm-bar{fill:var(--red)}
.epi{font-weight:500; letter-spacing:-0.03em; line-height:1.06;
  font-size:clamp(1.3rem,2.4vw,2rem); max-width:none; margin:0 0 1.9rem}
.epi > span{display:block; white-space:nowrap; opacity:0; transform:translateY(12px);
  animation:rise .9s cubic-bezier(.2,.75,.2,1) forwards}
.epi > span:nth-child(1){animation-delay:.12s}
.epi > span:nth-child(2){animation-delay:.24s}
.epi > span:nth-child(3){animation-delay:.36s}
.epi > span:nth-child(4){animation-delay:.48s}
.epi .k{color:var(--red)}
/* below tablet the long lines must wrap; keep them tidy */
@media(max-width:820px){
  .epi > span{white-space:normal}
  .epi{font-size:clamp(1.5rem,6.2vw,2rem); line-height:1.08}
}
@keyframes rise{to{opacity:1; transform:none}}
.hero .sub{max-width:52ch; font-size:clamp(1.05rem,.92rem + .45vw,1.2rem); color:var(--fg)}
.hero .sub b{font-weight:700}
.cta{display:flex; flex-wrap:wrap; gap:.8rem 1rem; align-items:center; margin-top:2rem}
.btn{font-family:var(--mono); font-size:.82rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.05rem;
  border:1px solid var(--fg); color:var(--fg); border-radius:2px; cursor:pointer;
  background:none; transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--fg); color:var(--bg); transform:translateY(-1px)}
.btn.pri{border-color:var(--red); background:var(--red); color:var(--paper)}
.btn.pri:hover{background:transparent; color:var(--red)}
.btn .arr{transition:transform .2s} .btn:hover .arr{transform:translateX(3px)}

/* ---------- tools : datasheet rows ---------- */
.tool{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(1rem,4vw,3.5rem); padding:2.2rem 0; border-top:1px solid var(--hair);
  align-items:start; position:relative; transition:padding-left .3s ease}
.tool:first-of-type{border-top:1px solid var(--hair-strong)}
.tool:last-child{border-bottom:1px solid var(--hair)}
.tool:hover{padding-left:.9rem}
.tool::before{content:""; position:absolute; left:0; top:2.2rem; bottom:2.2rem; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .3s ease}
.tool:hover::before{transform:scaleY(1)}
.tool .tid{font-family:var(--mono); font-size:.72rem; color:var(--red); letter-spacing:.1em; margin-bottom:.7rem}
.tool h3{font-family:var(--disp); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1; margin:0 0 .55rem}
.tool .measures{font-family:var(--mono); font-size:.75rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted)}
.tool .measures b{color:var(--fg); font-weight:600}
.tool .desc{font-size:1.02rem; line-height:1.55; margin:.2rem 0 1.1rem}
.pills{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem}
.pill{font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--hair); border-radius:100px; padding:.22rem .6rem}
.pill.live{color:var(--red); border-color:var(--red-soft)}
.tlinks{display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; font-family:var(--mono); font-size:.78rem}
.tlinks a{display:inline-flex; align-items:center; gap:.4rem; color:var(--fg);
  border-bottom:1px solid var(--hair-strong); padding-bottom:1px; transition:color .2s,border-color .2s}
.tlinks a:hover{color:var(--red); border-color:var(--red)}
.tlinks a .arr{transition:transform .2s} .tlinks a:hover .arr{transform:translate(2px,-2px)}
@media(max-width:720px){.tool{grid-template-columns:1fr; gap:1.1rem}}

/* ---------- tools: run-together note ---------- */
.together{margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--hair);
  max-width:58ch; color:var(--muted); font-size:1.02rem}
.together b{color:var(--fg); font-weight:600}

/* ---------- recursion: applied to itself ---------- */
.recursion .lead{max-width:54ch}
.loops{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair);
  border:1px solid var(--hair); margin:2.6rem 0 2.2rem}
.loop{background:var(--bg); padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.9rem}
.loop .ln{font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--red);
  display:inline-flex; align-items:baseline; gap:.5rem}
.loop .rot{display:inline-block; font-size:1rem; transition:transform .6s cubic-bezier(.4,0,.2,1)}
.loop:hover .rot{transform:rotate(360deg)}
.loop p{margin:0; font-size:.96rem; line-height:1.55; color:var(--muted)}
.loop p b{color:var(--fg); font-weight:600}
.houserule{font-family:var(--disp); font-weight:500; letter-spacing:-0.015em;
  font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.4; max-width:52ch; color:var(--fg)}
.houserule b{color:var(--red); font-weight:600}
@media(max-width:720px){.loops{grid-template-columns:1fr}}

/* ---------- risk register ---------- */
.register{border-top:1px solid var(--hair-strong)}
.risk{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.6fr);
  gap:clamp(.6rem,3vw,2.5rem); padding:1.5rem 0; border-bottom:1px solid var(--hair); align-items:baseline}
.risk dt{font-family:var(--disp); font-weight:700; letter-spacing:-0.01em; font-size:1.22rem;
  display:flex; gap:.7rem; align-items:baseline}
.risk dt .rn{font-family:var(--mono); font-weight:400; font-size:.72rem; color:var(--red); flex:none}
.risk dd{margin:0; color:var(--muted); font-size:1.02rem; line-height:1.5}
@media(max-width:640px){.risk{grid-template-columns:1fr; gap:.35rem}}

/* ---------- more will follow : the three axes ---------- */
.axes{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair);
  border:1px solid var(--hair); margin:2.4rem 0}
.axis{background:var(--bg); padding:1.6rem 1.4rem}
.axis .n{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--red); margin-bottom:.8rem}
.axis h4{font-family:var(--disp); font-weight:700; font-size:1.15rem; margin:0 0 .4rem; letter-spacing:-0.01em}
.axis p{font-size:.92rem; color:var(--muted); margin:0; line-height:1.5}
.axis .soon{background:var(--faint)}
.axis .soon h4{color:var(--muted)}
@media(max-width:720px){.axes{grid-template-columns:1fr}}
.more .note{max-width:56ch; margin-top:1.6rem; color:var(--muted)}
.more .note a{border-bottom:1px solid var(--red); color:var(--fg)} .more .note a:hover{color:var(--red)}

/* ---------- install ---------- */
.install .grid{display:grid; grid-template-columns:1fr; gap:1rem; max-width:720px; margin-top:1.8rem; min-width:0}
.cmd{position:relative; min-width:0; border:1px solid var(--hair-strong); border-radius:3px; background:var(--faint)}
.cmd .h{display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  padding:.55rem .9rem; border-bottom:1px solid var(--hair); font-family:var(--mono);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cmd .h span{min-width:0}
/* wrap commands so the whole line fits the screen instead of being clipped */
.cmd pre{margin:0; padding:1rem .9rem; font-family:var(--mono); font-size:.86rem; line-height:1.7;
  white-space:pre-wrap; overflow-wrap:anywhere}
.cmd pre .p{color:var(--red)}
.copy{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid var(--hair); color:var(--muted); border-radius:100px;
  padding:.2rem .55rem; cursor:pointer; transition:.2s}
.copy:hover{color:var(--fg); border-color:var(--hair-strong)}
.copy.done{color:var(--red); border-color:var(--red)}
.install .aside{margin-top:1.4rem; max-width:52ch; color:var(--muted); font-size:.98rem}

/* ---------- status / closer ---------- */
.status .big{font-family:var(--disp); font-weight:700; letter-spacing:-0.03em; line-height:1.02;
  font-size:clamp(1.9rem,5.2vw,3.8rem); max-width:16ch; margin:0 0 1.8rem}
.status .big .s{color:var(--red)}
.status .honest{max-width:56ch; color:var(--muted)}
.status .honest strong{color:var(--fg); font-weight:600}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair-strong); padding-block:3rem 3.5rem;
  position:relative; z-index:1}
.fcols{max-width:var(--maxw); margin:0 auto; padding:0 var(--edge);
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:2rem}
@media(max-width:900px){.fcols{grid-template-columns:1fr 1fr}} @media(max-width:520px){.fcols{grid-template-columns:1fr}}
.fcols .about{max-width:34ch; color:var(--muted); font-size:.92rem}
.fcols .about svg{height:16px; margin-bottom:1rem; display:block}
.fcols .about svg .wm-letter,.fcols .about svg .wm-plumb{fill:var(--fg)}
.fcols .about svg .wm-bar{fill:var(--red)}
.fgroup h5{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin:0 0 .9rem}
.fgroup a{display:block; font-family:var(--mono); font-size:.82rem; color:var(--muted);
  padding:.28rem 0; transition:color .2s}
.fgroup a:hover{color:var(--fg)}
.colophon{max-width:var(--maxw); margin:2.6rem auto 0; padding:1.4rem var(--edge) 0;
  border-top:1px solid var(--hair); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.03em; color:var(--muted); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between}
@media(max-width:720px){.fcols{grid-template-columns:1fr 1fr} .fcols .about{grid-column:1/-1}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1)}
.reveal.in{opacity:1; transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  .epi > span{opacity:1; transform:none}
}
/* ---------- writing list ---------- */
.pieces{list-style:none; margin:1.5rem 0 0; padding:0; max-width:60ch}
.pieces li{padding:.6rem 0; border-top:1px solid var(--hair); display:flex; gap:1.1rem; align-items:baseline; flex-wrap:wrap}
.pieces li:last-child{border-bottom:1px solid var(--hair)}
.pieces .d{font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.04em; white-space:nowrap}
.pieces a{border-bottom:1px solid var(--red)}
.pieces a:hover{color:var(--red)}

/* current page in the top nav (body[data-page] set per page, template stays identical) */
body[data-page^="plumb-line"] nav.links a[data-nav="plumb-line"]{color:var(--fg)}
body[data-page^="plumb-line"] nav.links a[data-nav="plumb-line"]::after{right:0}

/* ---------- plumb-line page ---------- */
.plhero{display:grid; grid-template-columns:minmax(140px,200px) 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.plfig{display:flex; justify-content:center}
.plfig svg{width:100%; max-width:200px; height:auto; display:block; overflow:visible}
.plh1{font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.15; letter-spacing:-.01em; margin:0 0 1.2rem}
@media(max-width:720px){.plhero{grid-template-columns:1fr} .plfig svg{max-width:140px}}
.law-code{margin:1.6rem 0} .law-code pre .c{color:var(--muted)}
.deeper{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.7rem}
.deeper a{display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.85rem 1rem;
  border:1px solid var(--hair-strong); border-radius:3px; color:var(--fg); font-family:var(--mono); font-size:.8rem}
.deeper a:hover{color:var(--red); border-color:var(--red)}
/* one plumb thing per page: site.js moves Plumb from the hero into the gutter
   line so the character IS the plumb bob (owner decision 2026-09-23, all
   viewports). Without JS the grounded hero Plumb stays and the line is hidden. */
body[data-page="plumb-line"]:not(.pl-hanging) .plumb,
body[data-page="plumb-line"]:not(.pl-hanging) .plumb-mark{display:none}
body.pl-hanging .plfig{display:none}
body.pl-hanging .plhero{grid-template-columns:1fr}
.plumb--character .string{bottom:93px}
.plumb--character .hang{position:absolute; bottom:0; left:-36px; width:72px; height:108px}
.plumb--character .hang svg{width:72px; height:108px; display:block; overflow:visible; pointer-events:auto; cursor:pointer;
  filter:drop-shadow(0 3px 7px color-mix(in srgb, var(--ink) 25%, transparent))}
.plumb--character .grab{left:-40px; width:80px}
@media(max-width:760px){
  .plumb--character .hang{left:-24px; width:48px; height:72px}
  .plumb--character .hang svg{width:48px; height:72px}
  .plumb--character .string{bottom:62px}
  .plumb--character .grab{left:-28px; width:56px}
}
@media(max-width:640px){ body[data-page="plumb-line"]{--gutter:3.5rem} }   /* room for the 48px figure beside the text column */
body.pl-hanging #plumb{animation:none}                 /* no weight-shift on a pendulum: keeps the string centred on the bob */
body.pl-hanging #plumb #head,body.pl-hanging #plumb #body{animation:none}   /* no breathing either: scaling from the feet moved the body against the fixed bob */

/* ---------- Plumb: grounded idle (no-JS hero), detection flash, limb physics hooks ---------- */
#plumb #head,#plumb #body{transform-box:view-box; transform-origin:300px 800px; animation:pl-breathe 4s ease-in-out infinite}
#plumb{animation:pl-shift 6s ease-in-out infinite}
#plumb #eye-l,#plumb #eye-r{transform-box:fill-box; transform-origin:center; animation:pl-blink 4s infinite}
#plumb #eye-r{animation-delay:.05s}
#plumb #bob{transition:fill .08s}
#plumb #arm-l,#plumb #arm-r,#plumb #leg-l,#plumb #leg-r{transform-box:view-box}   /* limbs: origins and rotation set by the limb physics in site.js */
#plumb.detect #bob{fill:var(--pl-amber)}
#plumb.detect #rays{transform-box:fill-box; transform-origin:center; animation:pl-rays 1.4s ease-out forwards}
@keyframes pl-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.015)}}
@keyframes pl-shift{0%,100%{transform:translateX(0)}50%{transform:translateX(1.2px)}}
@keyframes pl-blink{0%,93%,100%{transform:scaleY(1)}95.5%,97%{transform:scaleY(.06)}}
@keyframes pl-rays{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){
  #plumb,#plumb #head,#plumb #body,#plumb #eye-l,#plumb #eye-r{animation:none}
  #plumb.detect #rays{animation:none; opacity:0}
}

/* ---------- forms (feedback page) ---------- */
.form{max-width:44rem}
.form label{display:block; font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg); margin:1.6rem 0 .45rem}
.form label .hint{display:block; font-family:inherit; text-transform:none; letter-spacing:0; font-size:.76rem; color:var(--muted); margin-top:.25rem}
.form input[type=text],.form input[type=email],.form select,.form textarea{width:100%; font:inherit; font-size:.95rem; color:var(--fg);
  background:var(--faint); border:1px solid var(--hair-strong); border-radius:3px; padding:.7rem .8rem}
.form textarea{min-height:7.5rem; resize:vertical}
.form textarea.code{font-family:var(--mono); font-size:.84rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--red); outline-offset:2px; border-color:var(--red)}
.form .checks{display:grid; gap:.5rem}
.form .checks label{display:flex; align-items:flex-start; gap:.6rem; text-transform:none; letter-spacing:0; font-family:inherit; font-size:.95rem; margin:0}
.form .checks input{margin-top:.25rem; accent-color:var(--red)}
.form .hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form .notice{font-size:.9rem; color:var(--muted); margin:2rem 0 1rem}
.form .notice a{color:var(--fg); border-bottom:1px solid var(--red)}
.sent{display:none; border:1px solid var(--red); border-radius:3px; padding:1.1rem 1.2rem; margin:0 0 2rem; background:var(--red-soft)}
.sent.show{display:block}
/* privacy: the home page's tool-row layout, compact; no scroll-reveal on legal text */
.privacy .hero{padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.privacy #notice{padding-top:0}
.privacy .tool{padding-block:1.6rem} .privacy .tool::before{top:1.6rem; bottom:1.6rem}
.privacy .tool h3{font-size:clamp(1.05rem,1.6vw,1.3rem); margin:0}
.privacy .tool .desc{margin:0 0 .9rem} .privacy .tool .desc:last-child{margin-bottom:0}
.privacy .meta{font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.privacy .reveal{opacity:1; transform:none; transition:none}


/* ---------- home: featured plumb-line row with Plumb peeking ---------- */
a.tool.featured{color:inherit; text-decoration:none; display:grid}
a.tool.featured .golink{display:inline-flex; align-items:center; gap:.4rem; color:var(--fg); font-family:var(--mono); font-size:.8rem; padding:.35rem .6rem; border:1px solid var(--hair-strong); border-radius:3px; margin-top:.9rem}
a.tool.featured:hover .golink{color:var(--red); border-color:var(--red)}
.peekwrap{display:inline-block; width:1.9em; height:1.1em; vertical-align:-.12em; margin-right:.2em; overflow:visible; position:relative}
.peekwrap .peek{position:absolute; left:0; bottom:-.15em; width:1.9em; height:1.9em; transform:rotate(-8deg); transform-origin:50% 90%; transition:transform .35s cubic-bezier(.2,.75,.2,1)}
a.tool.featured:hover .peekwrap .peek{transform:translateY(-.12em) rotate(4deg)}
.peek .pk-eye{transform-box:fill-box; transform-origin:center; animation:pl-blink 4s infinite}
.peek .pk-eye-r{animation-delay:.05s}
@media(prefers-reduced-motion:reduce){.peek .pk-eye{animation:none} .peekwrap .peek{transition:none}}