/* veldon - reakce na poptavku (koder + UX/UI designer role)
   Binding contract: _spec/DESIGN.md. Conceit: predavaci protokol. */

:root{
  --paper:#F6F4EF;
  --paper-2:#EFEBE3;
  --ink:#16181C;
  --ink-soft:#5A5F69;
  --rule:#DAD5CB;
  --accent:#1F4E79;
  --seam:#C2571F;

  --f-disp:"Archivo",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --measure:68ch;
  --gut:7.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(1rem,0.96rem + 0.2vw,1.0625rem)/1.62 var(--f-body);
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:600;letter-spacing:-0.018em;margin:0}
p{margin:0 0 1.05em}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.11em}
strong{font-weight:500}
em{font-style:italic}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--ink);color:var(--paper);padding:.6rem .9rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:min(100% - 2.5rem,74rem);margin-inline:auto}
.measure{max-width:var(--measure)}
.sheet{padding-block:clamp(2.75rem,6vw,4.75rem)}

/* ---------- protocol head + cover ---------- */
#cover{padding-top:clamp(1.75rem,4vw,3rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.protocol-head{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline}
.plabel,.pmeta{
  font:400 .72rem/1.5 var(--f-mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:0;
}
.pmeta-k{color:var(--rule);margin-right:.45rem}
.sep{color:var(--rule);padding-inline:.3rem}

.rule-draw{margin:.85rem 0 clamp(2rem,5vw,3.25rem);height:1px;background:var(--rule)}
.rule-draw i{display:block;height:1px;background:var(--accent);width:100%;transform-origin:left center}

.verdict{
  font-size:clamp(2.1rem,1.15rem + 4.3vw,4.25rem);
  line-height:1.02;letter-spacing:-0.032em;max-width:16ch;
}
.verdict em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
.verdict em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.075em;
  background:var(--accent);opacity:.28;
}
.lead{
  margin-top:1.35rem;max-width:46ch;
  font-size:clamp(1.0625rem,1rem + .38vw,1.3rem);line-height:1.5;color:var(--ink-soft);
}
.cover-foot{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:baseline;
  margin-top:clamp(2.5rem,6vw,4rem);padding-top:.9rem;border-top:1px solid var(--rule);
}
.sig{
  font-family:var(--f-disp);font-weight:700;font-size:1.05rem;letter-spacing:-0.03em;
  margin:0;display:inline-flex;flex-direction:column;
}
.sig-rule{display:block;height:2px;background:var(--accent);width:100%;margin-top:.16rem;transform-origin:left center}

/* ---------- their checklist (M5) ---------- */
.band{background:var(--paper-2);border-block:1px solid var(--rule);padding-block:clamp(1.9rem,4vw,2.6rem)}
.shead-min{
  font:500 .72rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1.1rem;
}
.checklist{
  list-style:none;margin:0;padding:0;counter-reset:cl;
  display:grid;gap:.55rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
}
.checklist li{
  display:flex;align-items:baseline;gap:.6rem;
  font:400 .875rem/1.45 var(--f-mono);color:var(--ink-soft);
}
.tick{
  flex:0 0 auto;width:.85rem;height:.85rem;border:1px solid var(--rule);border-radius:1px;
  position:relative;background:var(--paper);translate:0 .1rem;
}
.tick::after{
  content:"";position:absolute;inset:0;margin:auto;width:.4rem;height:.2rem;
  border-left:1.5px solid var(--seam);border-bottom:1.5px solid var(--seam);
  rotate:-45deg;translate:0 -.04rem;opacity:0;
}
.checklist li.is-done{color:var(--ink)}
.checklist li.is-done .tick{border-color:var(--seam)}
.checklist li.is-done .tick::after{opacity:1}

/* ---------- sections ---------- */
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem}
.gutter .num{
  font:500 .78rem/1 var(--f-mono);letter-spacing:.1em;color:var(--accent);
}
.body h2{
  font-size:clamp(1.45rem,1.2rem + 1.1vw,2.05rem);line-height:1.12;
  padding-bottom:.7rem;border-bottom:1px solid var(--rule);margin-bottom:1.5rem;
}
.lede-min{font-size:1.06em;color:var(--ink)}

@media (min-width:64rem){
  .sec{grid-template-columns:var(--gut) minmax(0,1fr);gap:0 2.5rem}
  .gutter{position:sticky;top:2rem;align-self:start;padding-top:.42rem}
}

/* ---------- callout ---------- */
.callout{
  border-left:3px solid var(--seam);padding:.15rem 0 .15rem 1.05rem;margin:0 0 1.5rem;
  font-family:var(--f-disp);font-weight:600;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  letter-spacing:-0.02em;line-height:1.25;
}
.callout-k{
  display:block;font:400 .68rem/1.5 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--seam);margin-bottom:.22rem;
}

/* ---------- seam diagram (M2) ---------- */
.seam{margin:2rem 0 1.9rem;padding:0}
.seam svg{width:100%;height:auto;max-width:40rem;display:block;overflow:visible}
.sv-lane,.sv-out,.sv-arrow{fill:none;stroke:var(--ink-soft);stroke-width:1.4}
.sv-out{stroke:var(--seam);stroke-width:2}
.sv-arrow{stroke:var(--ink-soft);stroke-width:1.4;stroke-dasharray:3 3}
.sv-head{fill:var(--ink-soft)}
.sv-join{stroke:var(--ink)}
.sv-lab{font:500 11px/1 var(--f-mono);fill:var(--ink);letter-spacing:.09em;text-transform:uppercase}
.sv-role{font:400 11px/1 var(--f-mono);fill:var(--ink-soft)}
.sv-note{font:400 11px/1 var(--f-mono);fill:var(--ink-soft)}
.sv-weld{fill:var(--seam);r:4}   /* base: visible without JS and under reduced motion */
.seam figcaption{
  font:400 .8rem/1.5 var(--f-mono);color:var(--ink-soft);max-width:52ch;margin-top:.85rem;
}

/* ---------- lanes ---------- */
.lanes{
  display:grid;gap:1.6rem 2.5rem;margin-bottom:1.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
}
.lane-h{
  font:500 .72rem/1.5 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
  padding-bottom:.5rem;border-bottom:1px solid var(--rule);margin-bottom:.85rem;
}
.lane-l{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.lane-l li{padding-left:1.1rem;position:relative}
.lane-l li::before{
  content:"";position:absolute;left:0;top:.66em;width:.45rem;height:1px;background:var(--accent);
}

/* ---------- works ---------- */
.works{list-style:none;margin:0 0 1.9rem;padding:0;display:grid;gap:0}
.works li{padding:.95rem 0;border-top:1px solid var(--rule)}
.works li:last-child{border-bottom:1px solid var(--rule)}
.works a{font-family:var(--f-mono);font-size:.9rem;font-weight:500}
.works p{margin:.3rem 0 0;max-width:60ch;color:var(--ink-soft);font-size:.95rem}
.works em{color:var(--seam);font-style:italic}

/* ---------- stack ---------- */
.stack{margin:0;display:grid;gap:0}
.stack>div{
  display:grid;gap:.15rem .5rem;grid-template-columns:minmax(0,1fr);
  padding:.8rem 0;border-top:1px solid var(--rule);
}
.stack>div:last-child{border-bottom:1px solid var(--rule)}
.stack dt{font:500 .72rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.stack dd{margin:0;color:var(--ink)}
@media (min-width:44rem){
  .stack>div{grid-template-columns:11rem minmax(0,1fr);align-items:baseline}
}

/* ---------- offer + cta ---------- */
.offer{
  padding:.85rem 1rem;background:var(--paper-2);border-left:3px solid var(--seam);
  font-size:1.03em;
}
.cta-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.4rem}
.btn{
  display:inline-block;font:500 .9rem/1 var(--f-mono);letter-spacing:.01em;
  padding:.85rem 1.15rem;border-radius:2px;text-decoration:none;border:1px solid var(--accent);
}
.btn.primary{background:var(--accent);color:var(--paper)}
.btn.primary:hover{background:#183d60}
.btn.ghost{color:var(--accent);background:transparent}
.btn.ghost:hover{background:rgba(31,78,121,.07)}

/* ---------- colophon ---------- */
.colophon{padding-block:clamp(2rem,4vw,2.75rem) clamp(2.5rem,5vw,3.5rem)}
.colophon p{
  margin:0;font:400 .8rem/1.6 var(--f-mono);color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:.15rem .55rem;align-items:baseline;
}
.colophon .sig{font-size:.95rem}
.cl-sep{color:var(--rule)}

/* ================= motion: base state is fully visible ================= */
@media (prefers-reduced-motion:no-preference){
  /* M1: rules draw themselves in. CSS-only, so it needs no JS to reach its end state. */
  .rule-draw i{animation:ruleIn .85s cubic-bezier(.4,0,.25,1) .12s both}
  .sig-rule{animation:ruleIn .7s cubic-bezier(.4,0,.25,1) .6s both}
  @keyframes ruleIn{from{scale:0 1}to{scale:1 1}}

  .verdict,.lead,.protocol-head{animation:riseIn .7s cubic-bezier(.32,0,.24,1) both}
  .protocol-head{animation-delay:.05s}
  .verdict{animation-delay:.22s}
  .lead{animation-delay:.36s}
  @keyframes riseIn{from{opacity:0;translate:0 .6rem}to{opacity:1;translate:0 0}}

  .tick::after{transition:opacity .22s ease}
  .checklist li{transition:color .22s ease}
  .tick{transition:border-color .22s ease}

  /* M2 seam: lanes stitch once, on reach.
     Scoped to .js so a JS-off render keeps the diagram fully drawn. */
  .js .sv-join,.js .sv-out{stroke-dasharray:1;stroke-dashoffset:1}
  .js .sv-weld{r:0;transition:r .3s cubic-bezier(.2,1.4,.4,1) 1s}
  .js .seam.is-on .sv-join{animation:stitch .8s cubic-bezier(.4,0,.3,1) both}
  .js .seam.is-on .sv-join-b{animation-delay:.12s}
  .js .seam.is-on .sv-out{animation:stitch .5s ease .8s both}
  .js .seam.is-on .sv-weld{r:4}
  @keyframes stitch{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

}

/* checklist is a scroll state, so with JS off it must read as plain, not as unmet */
html:not(.js) .tick{display:none}
html:not(.js) .checklist li{color:var(--ink)}

@media print{
  body{background:#fff}
}