/* cc-on-demand field sheets — visual language reproduced from the
   alt-field-atlas plate (Altineris STU-07). Quantities are shown by
   count, never by scale; every label on a sheet names a real thing. */

/* ============ TOKENS ============ */
:root{
  --sky-0:#DFE5E4;
  --sky-1:#CBD4D2;
  --sand:#E9E1CF;        /* plate paper */
  --paper:#DFD4BC;       /* page ground — plates mount on this */
  --paper-deep:#D6C9AE;
  --ink:#37312A;
  --ink-70:rgba(55,49,42,.72);
  --ink-45:rgba(55,49,42,.45);
  --ink-18:rgba(55,49,42,.18);
  --ox:#7A3B2E;
  --pru:#2E4A66;
  --pru-deep:#243B52;
  --sans:'Work Sans',system-ui,sans-serif;
  --geo:'Jost','Futura','Century Gothic',sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --line:1.5px solid var(--ink);
  --hair:1px solid var(--ink-18);
  --maxw:1080px;
  --gutter:clamp(1.1rem,4vw,2.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--pru);color:var(--sand)}
a{color:inherit}
svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--mono)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ TOP BAR ============ */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--sand);
  border-bottom:var(--line);
  display:flex;justify-content:space-between;align-items:stretch;
  height:54px;
}
.bar a{
  display:flex;align-items:center;
  text-decoration:none;
  padding:0 clamp(1rem,3vw,1.8rem);
  min-height:36px;
}
.bar .mark{
  font-family:var(--geo);font-weight:600;font-size:.88rem;
  letter-spacing:.26em;text-indent:.26em;
  white-space:nowrap;
}
.bar .mark span{ color:var(--ox) }
.bar .idx{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  border-left:var(--line);
  color:var(--ink-70);
  white-space:nowrap;
}
.bar .idx:hover,.bar .idx:focus-visible{background:var(--ink);color:var(--sand)}
.bar a:focus-visible{outline:2px solid var(--pru);outline-offset:-4px}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding-top:54px;
  background:linear-gradient(180deg,var(--sky-0) 0%,var(--sky-1) 100%);
  border-bottom:var(--line);
  display:flex;flex-direction:column;
}
.hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(4rem,10vh,7.5rem);
  padding-bottom:clamp(3.5rem,8vh,6rem);
}
.hero-eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  color:var(--ink-70);
  margin-bottom:1.4rem;
}
.hero h1{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(2.7rem,8.5vw,6.4rem);
  line-height:.98;letter-spacing:-.02em;
  max-width:14ch;
}
.hero h1 em{font-style:italic}
.hero .lede{
  margin-top:1.6rem;
  max-width:46ch;
  font-size:clamp(.98rem,1.6vw,1.13rem);
  color:var(--ink-70);
}
.hero .hint{
  margin-top:1.1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  color:var(--ink-45);
}
.fig0{
  position:relative;z-index:2;
  border-top:1.5px solid var(--ink);
  background:transparent;
}
.fig0 .wrap{
  display:flex;flex-wrap:wrap;gap:.35rem 2rem;justify-content:space-between;
  padding-top:.7rem;padding-bottom:.7rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  color:var(--ink-70);
}
.fig0 b{color:var(--ox);font-weight:500}

/* ============ CHAPTERS ============ */
.chapter{padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(3rem,6vw,5rem)}
.ch-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.ch-kicker{
  display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
  font-family:var(--geo);font-weight:500;font-size:.78rem;
  letter-spacing:.3em;
  color:var(--pru);
  margin-bottom:1rem;
}
.ch-kicker::after{content:"";flex:1;border-top:1px solid var(--pru);opacity:.4;transform:translateY(-.2em)}
.ch-head h2{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.05;letter-spacing:-.015em;
  max-width:20ch;
}
.fieldnote{
  margin-top:1.3rem;
  max-width:58ch;
  font-style:italic;
  color:var(--ink-70);
  font-size:clamp(.95rem,1.4vw,1.06rem);
}
.fieldnote b{font-weight:400;font-style:normal}

/* ============ PLATES ============ */
.plate{
  background:var(--sand);
  border:var(--line);
  box-shadow:4px 4px 0 var(--ink-18);
  margin-bottom:clamp(2.4rem,5vw,3.8rem);
}
.phead{
  display:flex;align-items:stretch;
  border-bottom:var(--line);
}
.pnum{
  font-family:var(--geo);font-weight:600;font-size:.74rem;letter-spacing:.24em;
  color:var(--sand);background:var(--ox);
  display:flex;align-items:center;
  padding:.75rem 1.1rem;
  white-space:nowrap;
}
.ptitle{
  font-family:var(--geo);font-weight:500;
  font-size:clamp(.92rem,2vw,1.12rem);
  letter-spacing:.22em;
  display:flex;align-items:center;
  padding:.75rem 1.1rem;
  flex:1;
}
.pref{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--ink-45);
  display:flex;align-items:center;
  padding:.75rem 1.1rem;
  border-left:var(--hair);
  white-space:nowrap;
}
.pbody{padding:clamp(1.4rem,3.5vw,2.6rem)}
.pcap{
  border-top:var(--hair);
  padding:.75rem clamp(1.4rem,3.5vw,2.6rem);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;line-height:1.8;
  color:var(--ink-70);
}
.pcap b{color:var(--ox);font-weight:500}
.pbanner{
  border-top:var(--line);
  padding:.85rem 1.2rem;
  font-family:var(--geo);font-weight:600;font-size:.76rem;letter-spacing:.3em;
  color:var(--ox);
  text-align:center;
}

/* pictograms */
.pic{width:46px;height:46px;color:var(--ink);flex:none}
.pic.planned{color:var(--ink-45)}
.pic.small{width:34px;height:34px}

/* stamp-in choreography */
.js .plate .st{opacity:0;transform:scale(.5) translateY(5px)}
.js .plate.in .st{
  opacity:1;transform:none;
  transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.45,.42,1);
  transition-delay:calc(var(--i,0)*70ms);
}
.js .plate.in .cnt .st{transition-delay:calc(var(--i,0)*40ms)}
@media (prefers-reduced-motion:reduce){
  .js .plate .st{opacity:1 !important;transform:none !important;transition:none !important}
}

/* rows (three-commitments grammar) */
.rows{display:flex;flex-direction:column}
.row{
  display:grid;grid-template-columns:66px 1fr auto;gap:1.4rem;align-items:center;
  padding:1.35rem 0;
}
.row + .row{border-top:var(--hair)}
.row h4{
  font-family:var(--geo);font-weight:500;font-size:clamp(.95rem,1.8vw,1.15rem);
  letter-spacing:.18em;
}
.row p{
  font-family:var(--mono);font-size:.7rem;line-height:1.7;letter-spacing:.02em;
  color:var(--ink-70);
  margin-top:.35rem;max-width:52ch;
}
.ridx{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--ink-45);
  align-self:start;padding-top:.2rem;
}

/* gate-cell grammar (preset cards) */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
.gate{
  border:var(--hair);
  padding:clamp(1.1rem,2.5vw,1.6rem);
  background:rgba(255,255,255,.22);
}
.gate .ghead{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.gate h4{font-family:var(--geo);font-weight:500;font-size:.94rem;letter-spacing:.22em}
.gate .gno{font-family:var(--mono);font-size:.6rem;color:var(--ink-45);margin-left:auto;letter-spacing:.1em}
.gate p{
  font-family:var(--mono);font-size:.66rem;line-height:1.75;letter-spacing:.02em;
  color:var(--ink-70);
}
.qcount{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-45)}

/* counted resources: each ▪ = 1 shared vCPU, each ● = 1 GB memory */
.cnt{display:flex;flex-direction:column;gap:.55rem;margin:1rem 0 .9rem}
.cline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cline .cl{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--ink-45);width:3.6em}
.cline i{width:13px;height:13px;background:var(--ink);display:block}
.cline i.dot{border-radius:50%}
.cline i.up{background:transparent;border:1.5px dashed var(--ink-45)}

/* instruments grammar (agent bench) */
.inst{
  display:grid;grid-template-columns:2.6rem 62px 1fr auto;gap:1.2rem;align-items:center;
  padding:1.15rem 0;
}
.inst + .inst{border-top:var(--hair)}
.inst .ino{font-family:var(--mono);font-size:.68rem;color:var(--ink-45);letter-spacing:.08em}
.inst h4{font-family:var(--geo);font-weight:500;font-size:clamp(.92rem,1.7vw,1.08rem);letter-spacing:.16em}
.inst p{font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--ink-70);margin-top:.3rem}
.inst.planned h4{color:var(--ink-45)}
.chip{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  color:var(--ox);border:1.5px solid var(--ox);
  padding:.34rem .7rem;
  white-space:nowrap;
}
.chip.planned{color:var(--ink-45);border-color:var(--ink-45);border-style:dashed}

/* ============ TERMINAL SPECIMEN ============ */
.footage{padding:clamp(3rem,7vw,5.5rem) 0;background:var(--sand);border-bottom:var(--line)}
.footage .fhead{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ox);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.term{border:2px solid var(--ink);margin-top:.9rem;background:var(--ink);color:var(--sand)}
.term .tbar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.55rem .9rem;
  border-bottom:1px solid rgba(233,225,207,.28);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  color:rgba(233,225,207,.55);text-transform:uppercase;
}
.term pre{
  font-family:var(--mono);font-size:clamp(.68rem,1.7vw,.8rem);line-height:1.95;
  padding:1.1rem 1.2rem 1.3rem;
  overflow-x:auto;
}
.term .dim{color:rgba(233,225,207,.5)}
.term .ac{color:#C08A6B}
.caret{
  display:inline-block;width:.6em;height:1.05em;
  background:var(--sand);vertical-align:-.12em;
  animation:blink 1.1s steps(1,end) infinite;
}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
.term .fcap{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.55rem .9rem;
  border-top:2px solid rgba(233,225,207,.28);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  color:rgba(233,225,207,.5);text-transform:uppercase;
}

/* ============ WIRING (architecture SVG) ============ */
.wiring{width:100%;height:auto}
.wiring text{font-family:var(--mono)}
.wire-facts{
  margin-top:1.4rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;line-height:1.9;
  color:var(--ink-70);
  list-style:none;
}
.wire-facts li::before{content:"— ";color:var(--ink-45)}

/* ============ LEGAL SHEETS ============ */
.legal{padding-top:calc(54px + clamp(3.5rem,8vw,6rem));padding-bottom:clamp(3rem,6vw,5rem)}
.legal .doc{max-width:72ch}
.legal .effect{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--ink-70);
  margin:1.2rem 0 0;
}
.legal section{margin-top:clamp(2.2rem,4vw,3.2rem)}
.legal h3{
  font-family:var(--geo);font-weight:500;font-size:1rem;letter-spacing:.2em;
  text-transform:uppercase;
  display:flex;gap:1rem;align-items:baseline;
  border-bottom:var(--hair);
  padding-bottom:.5rem;margin-bottom:1rem;
}
.legal h3 .no{font-family:var(--mono);font-size:.66rem;color:var(--ink-45);letter-spacing:.08em}
.legal p{font-size:.95rem;color:var(--ink);margin-bottom:.9rem;font-weight:300}
.legal p.note{font-family:var(--mono);font-size:.66rem;line-height:1.8;letter-spacing:.04em;color:var(--ink-70)}
.legal ul{margin:0 0 .9rem 1.2rem}
.legal li{font-size:.95rem;margin-bottom:.45rem;font-weight:300}
.legal li b,.legal p b{font-weight:500}
.legal a{color:var(--pru);text-decoration-color:var(--ink-45)}

/* ============ CTA ============ */
.cta{
  background:var(--pru);
  color:var(--sand);
  border-top:var(--line);border-bottom:var(--line);
  padding:clamp(4.5rem,9vw,7rem) 0;
}
.cta ::selection{background:var(--sand);color:var(--pru)}
.cta .eyebrow{
  font-family:var(--geo);font-weight:500;font-size:.74rem;letter-spacing:.3em;
  color:rgba(233,225,207,.62);
  margin-bottom:1.2rem;
}
.cta h2{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(2rem,5vw,3.3rem);line-height:1.08;letter-spacing:-.015em;
  max-width:22ch;
}
.cta .sub{
  margin-top:1.3rem;max-width:52ch;
  color:rgba(233,225,207,.75);
  font-size:clamp(.95rem,1.4vw,1.05rem);
}
.btn{
  display:inline-flex;align-items:center;gap:.9rem;
  margin-top:2.4rem;
  font-family:var(--geo);font-weight:600;font-size:.86rem;letter-spacing:.26em;text-indent:.26em;
  color:var(--pru);background:var(--sand);
  border:1.5px solid var(--sand);
  padding:1.05rem 2.2rem;
  text-decoration:none;
  min-height:44px;
  transition:background .18s ease,color .18s ease;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--sand)}
.btn:focus-visible{outline:2px solid var(--sand);outline-offset:4px}
.cta .fine{
  margin-top:1.6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;line-height:2;
  color:rgba(233,225,207,.55);
}

/* ============ FOOTER TITLE BLOCK ============ */
footer{background:var(--paper-deep);padding:clamp(3rem,6vw,4.5rem) 0 2.2rem}
.tblock{
  border:var(--line);
  background:var(--sand);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.tcell{padding:1rem 1.2rem;border-right:var(--hair)}
.tcell:last-child{border-right:none}
.tcell .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-45);margin-bottom:.35rem}
.tcell .v{font-family:var(--geo);font-weight:500;font-size:.82rem;letter-spacing:.14em}
.tbanner{
  grid-column:1/-1;
  border-top:var(--line);
  padding:.85rem 1.2rem;
  font-family:var(--geo);font-weight:600;font-size:.76rem;letter-spacing:.3em;
  color:var(--ox);
  text-align:center;
}
.colophon{
  margin-top:1.4rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;line-height:2;
  color:var(--ink-45);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.colophon a{color:var(--ink-70);text-decoration-color:var(--ink-45)}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .gates{grid-template-columns:1fr}
  .row{grid-template-columns:52px 1fr;gap:1rem}
  .ridx{display:none}
  .pic{width:40px;height:40px}
  .inst{grid-template-columns:48px 1fr;grid-template-rows:auto auto;row-gap:.6rem}
  .inst .ino{display:none}
  .inst .chip{grid-column:2;justify-self:start}
  .pref{display:none}
  .tblock{grid-template-columns:1fr 1fr}
  .tcell:nth-child(2){border-right:none}
  .tcell{border-bottom:var(--hair)}
  .tbanner{border-top:var(--line)}
}