/* ============================================================
   AXIOM ATELIER — drawing-set design system
   Paper: concrete greys. Ink: blueprint blue, the only ink.
   Shadows are the only other colour.
   ============================================================ */

:root{
  --paper:      #e7e8e3;
  --paper-deep: #dcded7;
  --shadow:     #aab1bf;   /* the single shadow tone that floods drawings */
  --shadow-dim: #c6cad0;
  --ink:        #2038a0;   /* blueprint blue — every mark on the page */
  --ink-faint:  rgba(32,56,160,.34);
  --ink-hair:   rgba(32,56,160,.55);
  --frame:      1.5px;
  --sheet-pad:  clamp(20px, 4vw, 56px);
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:340;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:var(--ink); text-decoration:none; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* ---------- the page is a stack of drawing sheets ---------- */

.set{
  max-width:1520px;
  margin:0 auto;
  padding:clamp(10px,1.6vw,24px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.6vw,24px);
}

.sheet{
  position:relative;
  border:var(--frame) solid var(--ink);
  background:var(--paper);
  padding:var(--sheet-pad);
  padding-bottom:0;
}

/* registration crosses in the sheet corners */
.sheet::before,
.sheet::after{
  content:"";
  position:absolute;
  width:15px; height:15px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat;
  pointer-events:none;
}
.sheet::before{ top:7px; left:7px; }
.sheet::after{ bottom:7px; right:7px; }

/* sheet margin strip: number top-right */
.sheet-no{
  position:absolute;
  top:var(--sheet-pad);
  right:var(--sheet-pad);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  border:1px solid var(--ink);
  padding:.45em .8em .35em;
}

/* ---------- title block (bottom strip of every sheet) ---------- */

.tblock{
  margin-top:clamp(28px,4vw,56px);
  margin-left:calc(var(--sheet-pad) * -1);
  margin-right:calc(var(--sheet-pad) * -1);
  border-top:var(--frame) solid var(--ink);
  display:flex;
  flex-wrap:wrap;
  font-family:var(--mono);
}
.tblock > div{
  padding:.7em 1.1em .8em;
  border-right:1px solid var(--ink-faint);
  min-width:0;
}
.tblock > div:last-child{ border-right:none; }
.tblock .grow{ flex:1 1 220px; }
.tblock span{
  display:block;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.62;
  margin-bottom:.15em;
}
.tblock b{
  font-weight:400;
  font-size:12.5px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.tblock .grow b{ white-space:normal; }

/* ---------- type roles ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.display{
  font-family:var(--sans);
  font-weight:180;
  font-stretch:125%;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.015em;
}

h2.display{ font-size:clamp(30px,4.6vw,64px); }

.argument{
  font-family:var(--sans);
  font-weight:230;
  font-stretch:118%;
  font-size:clamp(21px,2.5vw,33px);
  line-height:1.24;
  max-width:21em;
}

p{ max-width:52ch; }

.data-col{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.5;
}
.data-col dt{
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.62;
  margin-top:1.1em;
}
.data-col dd{ margin:0; }

/* ---------- drawing area ---------- */

.drawing{
  position:relative;
}
.drawing svg{
  display:block;
  width:100%;
  height:auto;
  color:var(--ink);
  overflow:visible;
}

/* stroke weights — drafting convention: cut > profile > light */
.s2 { stroke:currentColor; stroke-width:2.1;  fill:none; stroke-linecap:square; }
.s1 { stroke:currentColor; stroke-width:1.1;  fill:none; stroke-linecap:square; }
.s05{ stroke:currentColor; stroke-width:.55; fill:none; stroke-linecap:round; opacity:.8; }
.ray{ stroke:currentColor; stroke-width:.5;  fill:none; opacity:.55; }
.dash{
  stroke:currentColor; stroke-width:.8; fill:none;
  stroke-dasharray:5 4;
}

/* index-table hover lights the matching elevation in the key strip */
.lit{ stroke-width:2.4; transition:stroke-width .18s ease; }
.strip-link:focus-visible{ outline:none; }
.strip-link:focus-visible path{ stroke-width:2.4; }

/* annotations (dims, labels, dashed geometry) settle in late,
   like dimension strings added after the linework */
.annot{
  opacity:0;
  transform:translateY(5px);
  transition:opacity .7s ease .1s, transform .8s cubic-bezier(.2,.6,.2,1) .1s;
}
svg.done .annot{ transform:none; }
.annot text{
  font-family:var(--mono);
  fill:currentColor;
  stroke:none;
}
svg.done .annot{ opacity:1; }

/* the flood: one shadow tone fills the drawing when fully drawn */
.flood *{
  fill:var(--shadow);
  stroke:none;
  opacity:0;
  transition:opacity 1.4s cubic-bezier(.3,0,.2,1);
}
svg.flooded .flood *{ opacity:.62; }
.flood .deep{ transition-delay:.25s; }
svg.flooded .flood .deep{ opacity:.85; }

/* ---------- fixed left index (binding edge) ---------- */

.binding{
  position:fixed;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
}
.binding a{
  padding:.4em .55em;
  opacity:.5;
  border-left:1px solid var(--ink-faint);
  transition:opacity .25s, border-color .25s;
}
.binding a.on{
  opacity:1;
  border-left:2px solid var(--ink);
  padding-left:calc(.55em - 1px);
}
@media (max-width:1160px){ .binding{ display:none; } }

/* ---------- footer strip ---------- */

.colophon{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  display:flex;
  flex-wrap:wrap;
  gap:.6em 2.2em;
  padding:1.1em .2em 1.4em;
  max-width:1520px;
  margin:0 auto;
}
.colophon a{ border-bottom:1px solid var(--ink-faint); padding-bottom:1px; }
.colophon a:hover{ border-bottom-color:var(--ink); }

/* ---------- shared small bits ---------- */

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  padding:1em 1.7em .9em;
  transition:background .25s, color .25s;
}
.btn:hover{ background:var(--ink); color:var(--paper); }

hr.rule{
  border:none;
  border-top:1px solid var(--ink-faint);
  margin:2.2em 0;
}

@media (prefers-reduced-motion: reduce){
  .annot, .flood *{ transition:none; }
}