/* adamwier.studio stopgap. Built from Booker T (prototype v5) on 2026-09-29; standalone from here on. */
/* ============================================================
   beads — shared core
   tokens, page load, type scale, fades, form, footer
   ============================================================ */

:root{
  --ink:#0a0a0b;
  --ink-2:#121214;
  --paper:#e9e5df;
  --paper-dim:#cfc9c1;   /* secondary copy — light enough to hold over photography */
  --rule:rgba(233,229,223,.12);
  --olive:#8a853a;          /* accent, off the bead palette */
  --gutter:clamp(22px,5vw,80px);
  --frame:13px;                /* the catalogue border */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:"Helvetica Neue",Helvetica,Inter,system-ui,-apple-system,sans-serif;
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:clip;
}

/* ---------- page load: the v2/v4 plush veil ---------- */
.veil{
  position:fixed; inset:0; background:var(--ink); z-index:99;
  pointer-events:none; opacity:1; transition:opacity 1800ms var(--ease);
}
body.ready .veil{opacity:0}

.mark{
  position:fixed; top:clamp(22px,3.4vh,40px); left:calc(var(--gutter) + var(--frame));
  z-index:20; opacity:0; transition:opacity 1600ms var(--ease) 700ms; mix-blend-mode:difference;
}
body.ready .mark{opacity:1}

/* ---------- type ---------- */
.label{
  font-size:clamp(10px,.72vw,12px); letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-dim); font-weight:500; margin:0;
}
.lede{
  font-size:clamp(22px,2.35vw,38px); line-height:1.32; font-weight:300;
  letter-spacing:-.01em; margin:0;
}
.wall{
  font-size:clamp(15px,1.1vw,18px); line-height:1.75; color:var(--paper-dim);
  max-width:40ch; font-weight:400; margin:0;
}
.wall em{color:var(--paper); font-style:italic}
.stack{display:flex; flex-direction:column; gap:clamp(14px,2vh,24px)}

/* the opening line, set to break as:
     Three thousand two hundred forty-nine
     painted wooden beads, hand-woven into
     a single plane.
   measured in em so it holds at every step of the type scale */
.lede--hero{max-width:17.7em}

/* ---------- reveal ---------- */
.rise{
  opacity:0; transform:translate3d(0,30px,0);
  transition:opacity 1600ms var(--ease-out), transform 1600ms var(--ease-out);
}
.rise.in{opacity:1; transform:none}
.rise[data-d="1"]{transition-delay:360ms}
.rise[data-d="2"]{transition-delay:720ms}
.rise[data-d="3"]{transition-delay:1080ms}

/* ---------- blur-up plates ---------- */
.plate{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(22px); transition:filter 1700ms var(--ease); will-change:transform;
}
.plate.loaded{filter:blur(0)}

/* ---------- inquiry + footer ---------- */
.inquire{
  padding:clamp(110px,18vh,190px) calc(var(--gutter) + var(--frame)) clamp(60px,10vh,110px);
  max-width:1760px; margin-inline:auto;
  display:grid; gap:clamp(36px,5vw,90px); grid-template-columns:1fr;
}
@media (min-width:900px){.inquire{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
form{display:flex;flex-direction:column;gap:30px;max-width:560px}
fieldset{border:0;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:18px}
legend{padding:0;margin-bottom:16px}
.choices{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:inline-block;padding:11px 18px;border:1px solid var(--rule);border-radius:999px;
  font-size:14px;color:var(--paper-dim);cursor:pointer;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.choice span:hover{color:var(--paper);border-color:var(--paper-dim)}
.choice input:checked + span{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.choice input:checked + span:hover{background:var(--olive);border-color:var(--olive)}
.choice input:focus-visible + span{outline:2px solid var(--paper);outline-offset:3px}
.field{display:flex;flex-direction:column;gap:11px}
input[type=text],input[type=email],textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--paper);
  font:inherit;font-size:16px;padding:10px 0;border-radius:0;transition:border-color .5s var(--ease);
}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--paper)}
textarea{resize:vertical;min-height:96px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button{
  align-self:flex-start;margin-top:8px;background:transparent;color:var(--paper);
  border:1px solid var(--rule);border-radius:999px;padding:14px 30px;font:inherit;
  font-size:14px;letter-spacing:.06em;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
button:hover{background:var(--olive);color:var(--ink);border-color:var(--olive)}
footer{
  padding:28px calc(var(--gutter) + var(--frame)) 46px; max-width:1760px; margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:space-between;
}
footer a{color:var(--paper-dim);text-decoration:none}
footer a:hover{color:var(--paper)}


@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important; animation:none !important}
  .rise{opacity:1;transform:none}
}

/* detail-160's subject sits hard left — copy shown with it moves right
   so the cord and knot stay uncovered */
.copy-right{left:auto !important; right:calc(var(--gutter) + var(--frame)) !important;
            margin-left:auto !important; text-align:left}
@media (max-width:899px){
  .copy-right{left:var(--gutter) !important; right:var(--gutter) !important}
}

/* ---------- fitting the box to the words --------------------
   treatments (halo, cylindrical light) are drawn to the copy
   block, so a block sitting at its max-width while the longest
   line falls short shows shade where no text lives.
   fit-content shrinks the box to the longest rendered line;
   text-wrap evens the rag so the remaining gaps stay small. */
.stack, .col, .band__copy, .hero__type, .lab__type, .plate__cap,
.drift__type, .scan__type, .grade__type, .offset{
  width:fit-content; max-width:100%;
}
/* no balance on .lede — it re-breaks the hero's measured line structure */
.wall{text-wrap:pretty}
/* right-hung copy still needs to sit against the right edge */
.copy-right, .col--right{margin-left:auto}

/* body copy fills its block — the block is already measured by
   fit-content, so a second cap on .wall just left a gap on the right */
.stack > .wall, .col .wall, .band__copy .wall{max-width:none}
/* ============================================================
   beads — surface treatments
   ============================================================ */

/* ---------- HALO -------------------------------------------
   legibility from the letterforms. no container, no edge.
   the shade sits in its own layer BEHIND the words, always.   */
.fx-halo{position:relative; isolation:isolate; --halo:.70; --halo-x:42%; --halo-y:64%}
.fx-halo > *{position:relative; z-index:2}
.fx-halo::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  /* z-index:-1 inside the isolated context paints behind the element's
     own text, so this works whether .fx-halo is on a wrapper or on the
     paragraph itself. symmetric insets + a centred gradient keep the
     shade behind the block rather than off its left edge. */
  inset:calc(-1 * var(--halo-y)) calc(-1 * var(--halo-x));
  background:radial-gradient(closest-side ellipse at 50% 50%,
             rgba(6,6,7,var(--halo)) 0%,
             rgba(6,6,7,calc(var(--halo) * .6)) 44%,
             rgba(6,6,7,0) 78%);
}
.fx-halo .lede,
.fx-halo .wall,
.fx-halo .label,
.lede.fx-halo,.wall.fx-halo,.label.fx-halo{
  text-shadow:
    0 0 14px rgba(6,6,7,.92),
    0 0 34px rgba(6,6,7,.78),
    0 0 70px rgba(6,6,7,.62),
    0 1px 2px rgba(6,6,7,.9);
}

/* ---------- CYLINDRICAL LIGHT ------------------------------
   the rows read as tubes. pool shade between them so the page
   picks up the same corduroy the object has.                  */
.fx-cyl{
  position:relative; isolation:isolate;
  /* how far the effect's box spreads past the copy, per side.
     the box ends up 100% + 2x these. these are chosen so the spread
     lands at a similar number of pixels on both axes, since the copy
     blocks are far wider than they are tall. */
  --spread-x:38%;
  --spread-y:70%;
  /* peak darkness of a band. the trough and the shoulder are struck
     from it, so one number moves the whole rhythm. */
  --band:.94;
  /* how far the field holds before the perimeter dissolves */
  --fade:54%;
}
.fx-cyl--dim{--band:.84}
.fx-cyl--soft{--band:.73}
.fx-cyl--bare{--band:.012}
.fx-cyl > *{position:relative; z-index:2}
.fx-cyl::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  /* the pseudo's own box — nothing here touches the copy's space */
  inset:calc(-1 * var(--spread-y)) calc(-1 * var(--spread-x));
  background-image:repeating-linear-gradient(
      to bottom,
      rgba(6,6,7,var(--band)) 0px, rgba(6,6,7,var(--band)) 3px,
      rgba(6,6,7,calc(var(--band) * .66)) 7px,
      rgba(6,6,7,calc(var(--band) * .91)) 12px,
      rgba(6,6,7,var(--band)) 16px);
  /* a centred ellipse with an eased falloff, so the perimeter dissolves
     rather than ramping to a visible edge */
  -webkit-mask-image:radial-gradient(ellipse var(--fade) calc(var(--fade) - 2%) at 50% 50%,
      rgba(0,0,0,1) 5%, rgba(0,0,0,.70) 30%, rgba(0,0,0,.30) 55%,
      rgba(0,0,0,.08) 75%, transparent 95%);
  mask-image:radial-gradient(ellipse var(--fade) calc(var(--fade) - 2%) at 50% 50%,
      rgba(0,0,0,1) 5%, rgba(0,0,0,.70) 30%, rgba(0,0,0,.30) 55%,
      rgba(0,0,0,.08) 75%, transparent 95%);
}



/* ============================================================
   GLASS
   frost that is not a panel behind text
   ============================================================ */

/* --- glass as horizon ----------------------------------
   the lower part of the frame frosts over a long falloff.
   atmosphere rather than a container.                        */
.fx-glass-horizon{
  position:absolute; left:0; right:0; bottom:0; height:62%;
  pointer-events:none; z-index:2;
  background:linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.15));
  -webkit-backdrop-filter:blur(22px) saturate(1.22);
  backdrop-filter:blur(22px) saturate(1.22);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 26%, #000 72%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 26%, #000 72%);
}

/* ---------- TRAVELLING LIGHT -------------------------------
   one slow source crossing the page. the object never moves;
   the light does.                                             */
.sweep{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  mix-blend-mode:soft-light; opacity:.85;
  background:
    radial-gradient(ellipse 58% 44% at 18% 8%, rgba(255,246,228,.34) 0%, rgba(255,246,228,0) 64%),
    radial-gradient(ellipse 70% 60% at 86% 92%, rgba(90,110,150,.22) 0%, rgba(90,110,150,0) 62%);
  animation:daylight 190s var(--ease) infinite alternate;
}
@keyframes daylight{
  0%  {background-position: 0% 0%,  100% 100%; filter:hue-rotate(0deg)  brightness(1)}
  50% {background-position: 46% 18%, 58% 78%;  filter:hue-rotate(-6deg) brightness(1.06)}
  100%{background-position: 92% 34%, 14% 58%;  filter:hue-rotate(5deg)  brightness(.95)}
}
.sweep--spec{
  mix-blend-mode:overlay; opacity:.30; animation-duration:74s;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 66%);
  background-size:260% 260%;
}

@media (prefers-reduced-motion:reduce){
  .sweep{animation:none}
}
body{background:var(--ink-2)}
/* one left rail: the wordmark, the hero line and every copy block
   share it, so nothing shifts sideways as you scroll */
:root{--rail:calc(var(--frame) + clamp(30px,4vw,68px))}
.mark{left:var(--rail)}
/* full-bleed hero, then everything below is framed */
.hero{position:relative; height:100svh; overflow:visible}
/* the hero picture is pinned to the screen and the rest of the page
   scrolls up over it. the section still reserves its 100svh, so
   nothing below moves. */
.hero .plate{position:fixed; inset:-12% 0; z-index:0}
/* an even grade over the whole hero, under the copy. it rides with the
   picture, so the two stay together while the copy scrolls away. */
.hero::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:rgba(10,10,11,.32);
}
/* everything after the hero is the cover: without its own surface the
   pinned picture shows through the gaps between bands */
.sheet, .opt, footer{position:relative; z-index:2; background:var(--ink-2)}
/* an even grade over the whole hero, under the copy */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(10,10,11,.32);
}
.hero .plate{inset:-12% 0}
/* v3.2's hero treatment: the row banding, at that page's hero values */
.hero__type{--spread-x:48%; --spread-y:57%; --band:.93; --fade:54%}
/* the hero line sits in the right third, centred vertically */
.hero__type{
  position:absolute; z-index:3; left:auto;
  right:calc(var(--gutter) + 100px); top:50%; transform:translateY(-50%);
  width:min(620px,52vw);
}
/* flow-root: without it the first band's top margin collapses out of
   the sheet, so its background starts below the gap and the pinned
   hero shows through as a strip */
.sheet{padding:0 var(--frame) var(--frame); display:flow-root}
.band{
  /* the gap between bands is the frame, four times over: still the
     same system, with room to breathe */
  /* the same surface as the page behind it. the deeper --ink made the
     bands read as cards mounted on a different material. --ink-2 is
     the matte of the two. */
  position:relative; background:var(--ink-2); margin-top:calc(var(--frame) * 8);
  display:grid; grid-template-columns:1fr; align-items:stretch;
  /* one height for every band, so the page has a rhythm rather than
     three different rules producing three different sizes */
  min-height:84svh;
}
.band__media{position:relative; overflow:hidden; min-height:46svh}
.band__media .plate{inset:-10% 0}
.band__copy{
  display:flex; flex-direction:column; justify-content:center; gap:24px;
  padding:clamp(72px,11vh,140px) clamp(38px,5vw,84px);
}
@media (min-width:900px){
  .band--split{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .band--split.band--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .band--split.band--flip .band__media{order:2}
  .band--tall .band__media{min-height:0}
}
.band--full .band__media{min-height:0}
/* a graded wash of black over the closing picture */
.band--full .band__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,10,11,0) 0%, rgba(10,10,11,.18) 42%,
    rgba(10,10,11,.52) 76%, rgba(10,10,11,.78) 100%);
}
.band--full .band__copy{z-index:2}
.band--full .band__copy{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  /* core.css gives .band__copy width:fit-content, which shrinks this
     box away from the frame it is supposed to fill */
  width:auto; max-width:none; padding:0; text-align:center;
}
.band--full .band__copy .lede{margin:0; max-width:31ch}
@media (max-width:899px){
  .band--full .band__copy{max-width:none; position:static}
  .hero__type{max-width:none}
}
/* 200px off the space above the footer copy, and nothing off the
   bottom: the section is sized directly rather than centred, so the
   two gaps are set independently. */
section.opt{
  min-height:0; align-items:flex-start;
  padding-top:214px; padding-bottom:315px;
}
/* ---------- phones and small tablets ----------
   the pictures carry the page, so they get the height; copy is set
   close under each one instead of floating in a padded box */
@media (max-width:899px){
  .hero__type{
    left:var(--gutter); right:var(--gutter); top:auto; transform:none;
    bottom:clamp(56px,11svh,110px); width:auto;
  }
  .hero__type .lede--hero{font-size:clamp(24px,6.6vw,32px)}
  .band{min-height:0; margin-top:calc(var(--frame) * 4)}
  .band__media{min-height:64svh}
  .band__copy{padding:40px calc(var(--gutter) - var(--frame)) 52px; gap:18px}
  /* the closer keeps its words on the picture, low, in the dark of the wash */
  .band--full .band__media{min-height:80svh}
  .band--full .band__copy{
    position:absolute; inset:auto 0 0 0; align-items:flex-end; justify-content:flex-start;
    padding:0 calc(var(--gutter) - var(--frame)) 44px; text-align:left;
  }
  section.opt{padding-top:96px; padding-bottom:120px}
}

@media (min-width:900px){
  .hero__type{
    left:calc(var(--gutter) + var(--frame)); right:auto;
    top:auto; bottom:clamp(70px,16vh,180px); transform:none;
    width:auto; max-width:min(760px,52vw);
  }
  .mark{left:calc(var(--gutter) + var(--frame))}
}
.opt{
  min-height:100svh; display:flex; align-items:center;
  padding:clamp(80px,12vh,150px) calc(var(--gutter) + var(--frame, 0px));
  border-bottom:1px solid rgba(233,229,223,.10);
}
.opt__inner{
  width:100%; max-width:1760px; margin-inline:auto;
  display:grid; gap:clamp(36px,5vw,90px); grid-template-columns:1fr;
}
@media (min-width:900px){ .opt__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)} }
.opt__num{color:var(--paper-dim); margin-bottom:22px}
/* one measure for the whole copy column, in rem so the heading and the
   paragraph fill the same width instead of each finding its own. no
   balancing: balance broke the heading early and left the paragraph
   running 200px further, which is what read as ragged. */
.opt__inner > div{max-width:34rem}
.opt .lede{max-width:none; text-wrap:normal; margin-bottom:22px}
.opt .wall{max-width:none}

/* choosing is not the same job as sending, so it does not look like the
   send button: a plain radio list. */
.radios{display:flex; flex-direction:column; gap:16px; margin-top:22px}
.radio{display:flex; align-items:center; gap:13px; cursor:pointer; font-size:15px}
.radio input{position:absolute; opacity:0; width:0; height:0}
.radio i{
  width:15px; height:15px; border-radius:50%; border:1px solid var(--rule);
  flex:none; position:relative; transition:border-color .3s var(--ease);
}
.radio i::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:var(--olive); transform:scale(0); transition:transform .3s var(--ease);
}
.radio:hover i{border-color:var(--paper-dim)}
.radio input:checked + i{border-color:var(--olive)}
.radio input:checked + i::after{transform:scale(1)}
.radio input:focus-visible + i{outline:2px solid var(--paper); outline-offset:3px}

.link{
  background:none; border:0; border-radius:0; padding:0; margin:0; align-self:auto;
  font:inherit; font-size:15px; letter-spacing:0; cursor:pointer;
  color:var(--paper); text-decoration:none; border-bottom:1px solid var(--rule);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.link:hover{background:none; color:var(--paper); border-bottom-color:var(--paper)}

/* start over: a quiet text link with the conventional reset glyph */
.link--reset{
  display:inline-flex; align-items:center; gap:8px;
  border-bottom:0; color:var(--paper-dim); font-size:14px;
  transition:color .35s var(--ease);
}
.link--reset svg{width:14px; height:14px; flex:none; transition:transform .5s var(--ease)}
.link--reset span{border-bottom:1px solid var(--rule); transition:border-color .35s var(--ease)}
.link--reset:hover{background:none; color:var(--paper)}
.link--reset:hover span{border-bottom-color:var(--paper)}
.link--reset:hover svg{transform:rotate(-120deg)}
.link--reset:focus-visible{outline:2px solid var(--paper); outline-offset:4px}
/* the appointment link is the live thing once available work is chosen */
.branch.on .link{color:var(--olive); border-bottom-color:rgba(138,133,58,.5)}
.branch.on .link:hover{border-bottom-color:var(--olive)}
/* the trail and its undo share a line: start over belongs to the
   crumbs, not to the question below them, so it stays out of the
   vertical run of trail -> question -> answer */
/* the questions stay at the top of the column so the thing you click is
   always in the same place. the answers collect underneath. */
.trail{position:relative; margin:34px 0 28px}
/* the crumbs grow and wrap; the undo does not move with them. it is
   pinned to the top right of the trail, level with the first row, so
   it stays in one place for the whole flow. */
.trail .crumbs{margin-bottom:0; padding-right:124px}
/* quieter than an answer, and it arrives on its own clock so it reads
   as a different kind of thing */
.trail .link--reset{
  position:absolute; right:0; top:9px;
  font-size:12px; color:var(--paper-dim); opacity:0;
  transition:opacity 1400ms var(--ease) 600ms, color .35s var(--ease);
}
.trail:not([hidden]) .link--reset{opacity:.62}
.trail .link--reset:hover{opacity:1; color:var(--paper)}
.trail .link--reset svg{width:12px; height:12px}
@media (max-width:560px){
  .trail .crumbs{padding-right:0}
  .trail .link--reset{position:static; margin-top:16px}
}
.opt form{margin:0}
/* progressive questions: each answered step stays visible above the next */
.step{
  opacity:0; max-height:0; overflow:hidden; pointer-events:none;
  transition:opacity 700ms var(--ease-out), max-height 700ms var(--ease-out);
}
.step.on{opacity:1; max-height:320px; pointer-events:auto}
.step .label{display:block; margin-bottom:16px}
.answered{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline}
.answered .label{margin:0}
.answered b{font-weight:400; color:var(--paper)}
.ref{color:var(--paper-dim); font-size:13px; margin-top:10px; display:none}
.ref.on{display:block}
.step:not([data-step="hang"]) .ref{display:block}

/* answered questions collapse to a line of crumbs you can click back into */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.crumb{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--rule); border-radius:999px; padding:7px 14px;
  font-size:13px; color:var(--paper); background:transparent; cursor:pointer;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.crumb:hover{border-color:var(--olive)}
.crumb:hover span{color:var(--olive)}
.crumb span{color:var(--paper-dim); font-size:10px; letter-spacing:.18em; text-transform:uppercase}
.crumb b{font-weight:400}
.step{display:none}
.step.on{display:block}
.step .label{display:block; margin-bottom:16px}
.branch{display:none; margin-bottom:26px}
.branch.on{display:block}
.branch .wall + .field, .branch p + .field{margin-top:26px}

/* two ways in: a segmented control rather than a radio list. both
   choices stay on screen, so nothing is hidden behind a selection.
   it is a div, not a fieldset: chrome lays fieldset contents out in an
   anonymous box and the absolutely positioned indicator inside one
   ignores percentage transforms. */
.seg{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--rule); border-radius:999px; padding:0; margin:0 0 34px;
  overflow:hidden;
}
.seg__lede{margin:0 0 14px}
.seg__ind{
  position:absolute; inset:0 50% 0 0; background:var(--olive);
  /* square ends: the track's own radius and overflow clip the outer
     end into the pill, and the centre stays flat in either state. */
  border-radius:0;
  transition:transform .42s var(--ease);
}
.seg:has(.seg__opt:last-of-type input:checked) .seg__ind{transform:translateX(100%)}
.seg__opt{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:19px 20px; cursor:pointer; font-size:16px;
  color:var(--paper-dim); transition:color .42s var(--ease);
}
.seg__opt input{position:absolute; opacity:0; width:0; height:0}
.seg__opt:has(input:checked){color:var(--ink)}
.seg__opt:has(input:focus-visible){outline:2px solid var(--paper); outline-offset:3px}
@media (max-width:560px){ .seg__opt{font-size:14px; padding:16px 12px} }

/* the outer box never moves; only the contents cross over, so the
   footer below it does not lurch. */
.panes{position:relative; display:grid}
.pane{
  grid-area:1 / 1; display:flex; flex-direction:column; gap:26px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .38s var(--ease), visibility .38s;
}
.pane.on{opacity:1; visibility:visible; pointer-events:auto}
.sketch{color:var(--paper-dim); opacity:.65; margin-top:6px}
.branch .field{display:flex; flex-direction:column; gap:11px}
.tailfields{display:none; flex-direction:column; gap:26px}
.tailfields.on{display:flex}

/* ---------- live form: sending, sent, and a failure that says what to do ---------- */
.cf-turnstile{min-height:0}
.status{font-size:14px; color:var(--paper-dim); min-height:1.5em; margin:0}
.flow.sending button[type=submit]{opacity:.5; pointer-events:none}
.thanks{display:none}
.thanks .lede{margin-bottom:22px}
.flow.sent{display:none}
.flow.sent + .thanks{display:block}