/* ============================================================
   ViberSpace — "Deployable Sheet" world core.
   The shared material of the world: faces, tokens, the printed
   ground, and every primitive that more than one surface needs
   (panel, spec list, controls, masthead, colophon, closing slab).

   Surface stylesheets (home_fold.css, docs_ladder.css,
   about_record.css) load on top of this and own only what is
   theirs. Depends on no base_* stylesheet; nothing here may
   reference a surface.
   ============================================================ */

/* ---------- Faces ---------- */
@font-face{
  font-family:"Chakra Petch"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/ChakraPetch-600-211a08c8.woff2") format("woff2");
}
@font-face{
  font-family:"Chakra Petch"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/ChakraPetch-700-f687eae2.woff2") format("woff2");
}
@font-face{
  font-family:"Chakra Petch"; font-style:italic; font-weight:700; font-display:swap;
  src:url("/assets/ChakraPetch-700i-9fec7713.woff2") format("woff2");
}
@font-face{
  font-family:"Azeret Mono"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/AzeretMono-a20821f0.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root{
  /* material */
  --sheet:#F7F7F5;
  --sheet-2:#EFEFEA;
  --foil:#D4AF37;
  --foil-deep:#B8942A;
  --foil-wash:#F5EBCB;
  --mountain:#A6A6A0;      /* decorative hairline + mountain crease. never a lone boundary */
  --rule:#7C7C74;          /* functional boundary, 3.92:1 on sheet */
  --valley:#CFE4F7;        /* valley tint fill */
  --valley-line:#6E9BD1;   /* valley crease stroke */
  --valley-ink:#35618F;    /* data values + links, 6.01:1 on sheet */
  --ink:#0E0E0E;           /* 18:1 */
  --ink-2:#4A4A46;         /* 8.3:1 */

  /* geometry — the whole surface is built on one 60° system */
  --slant:14px;            /* parallelogram lean */
  --cut:20px;              /* chamfer */
  --hair:1px;

  /* type */
  --display:"Chakra Petch",system-ui,sans-serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm */
  --gap:clamp(16px,2vw,24px);
  --bay:clamp(56px,7vw,104px);

  --ease:cubic-bezier(.16,1,.3,1);
}

/* Material. The world declares foil, sheet stock and pressed crease score;
   these render them as real grain rather than flat fills. */
:root{
  --grain: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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--sheet);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{max-width:100%}
a{color:var(--valley-ink)}

/* a branch, a sha, a literal the system knows — data blue, never decorated */
code{
  font-family:var(--mono); font-weight:700; font-size:.92em;
  color:var(--valley-ink); letter-spacing:.01em;
}

/* the parallelogram field, printed faintly under everything */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg,  transparent 0 63px, rgba(124,124,116,.13) 63px 64px),
    repeating-linear-gradient(-60deg, transparent 0 63px, rgba(124,124,116,.09) 63px 64px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.28) 60%,rgba(0,0,0,.5));
}
/* sheet stock: the ground is paper, so it carries grain */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:150px 150px;
  mix-blend-mode:multiply; opacity:.10;
}
body > *{position:relative; z-index:1}

/* ---------- Skip link ---------- */
.skip{
  position:absolute; left:8px; top:-100px; z-index:100;
  background:var(--ink); color:var(--sheet);
  padding:10px 16px; font:600 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{top:8px}

/* ---------- Shell ---------- */
.wrap{ width:min(1440px,100% - 2*clamp(16px,3vw,44px)); margin-inline:auto }

/* ---------- Primitives ---------- */

/* hairline-bordered panel with a true chamfer.
   outer paints the rule, inner paints the face, both clipped. */
.panel{
  --panel-face:var(--sheet);
  background:var(--rule);
  padding:var(--hair);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.panel > .face{
  background:var(--panel-face);
  height:100%;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.panel--sunk{ --panel-face:var(--sheet-2) }
.panel--flag > .face{ position:relative }
/* the gold corner notch: the world's "this one is live" mark */
.panel--flag > .face::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:var(--foil);
  clip-path:polygon(100% 0,100% 100%,0 0);
}

/* data list — the spec block that appears throughout the world */
.spec{ margin:0; font:500 12.5px/1.9 var(--mono) }
.spec div{ display:flex; gap:12px; align-items:baseline }
.spec dt{ color:var(--ink-2); letter-spacing:.12em; text-transform:uppercase; font-size:11px; flex:0 0 auto }
.spec dd{ margin:0; color:var(--valley-ink); font-weight:700; margin-left:auto; text-align:right; white-space:nowrap }
.spec .dots{ flex:1; border-bottom:1px dotted var(--mountain); transform:translateY(-4px) }
/* nothing stands behind this one, so it is not dressed as a value the system knows */
.spec dd.none{ color:var(--ink-2); font-weight:500 }
/* A value can be as long as whatever the reader gave us. On a phone it wraps
   inside the panel rather than running out of it — nowrap is a tidiness for
   figures, never a licence to overflow the sheet. */
@media (max-width:560px){
  .spec dd{ white-space:normal; overflow-wrap:anywhere }
}

/* ---------- Document head bar ----------
   The world's answer-on-the-heading-line device: a hairline-bottomed bar of
   printed caps carrying its referent — an about section's letter, a contact
   desk's routing answer, a sign-in counterfoil's ordinal, a privacy part's
   number — on the heading line itself in full ink, followed by a middot. The
   referent is the thing the surface is keyed to, so it is information on the
   line rather than a label floating above it.

   Declared here at the fourth surface, which is the threshold this world's
   convention names. The three that predate the extraction keep their own
   scoped selector for their one delta and nothing else. */
.dhead{
  --dhead-gap:11px;
  display:flex; align-items:baseline; gap:var(--dhead-gap); margin:0; padding:15px 20px;
  font:700 11px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--mountain);
}
.dhead .ref{ color:var(--ink); letter-spacing:.16em; flex:0 0 auto }
.dhead .ref::after{ content:" ·"; color:var(--ink-2) }

/* ---------- Controls ---------- */
.btn{
  --slant-local:var(--slant);
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border:0; cursor:pointer; white-space:nowrap;
  font:700 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); background:var(--foil);
  clip-path:polygon(var(--slant-local) 0,100% 0,calc(100% - var(--slant-local)) 100%,0 100%);
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.btn .glyph{ width:15px; height:15px; flex:0 0 auto }
.btn:hover{ background:var(--foil-deep); transform:translateX(2px) }
.btn:active{ transform:translateX(0) }

.btn--ghost{
  background:transparent; color:var(--ink);
  padding:0; /* the rule is drawn by the wrapper below */
}
/* ghost button needs a visible edge; gold alone is 1.96:1 so it never carries a boundary */
.btn-edge{
  display:inline-block; background:var(--rule); padding:var(--hair);
  clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.btn-edge > .btn--ghost{
  display:flex; align-items:center; gap:12px; padding:14px 26px; white-space:nowrap;
  background:var(--sheet);
  clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
}
.btn-edge:hover{ background:var(--valley-ink); transform:translateX(2px) }
.btn-edge:hover > .btn--ghost{ color:var(--valley-ink) }

/* On foil, the primary inverts to ink so it still reads as the one action. */
.btn--ink{ background:var(--ink); color:var(--sheet) }
.btn--ink:hover{ background:#26261f }

/* focus: a real ring, never a blur. sits outside the clip so it is never cut off. */
.btn:focus-visible,
.btn-edge:has(:focus-visible),
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:2px solid var(--valley-ink);
  outline-offset:3px;
}
.btn-edge:has(:focus-visible) > .btn--ghost:focus-visible{ outline:none }

/* ---------- Fields ----------
   A field on this sheet is a ruled box on paper: square, hairlined in the
   functional grey, filled by the reader. There is no alarm hue in this world
   and none is added here: a field that needs correcting is marked by the
   weight of its own line, never by a field colour. */
.field{ margin:0 0 clamp(16px,2vw,22px) }
.flabel{
  display:block; margin:0 0 9px;
  font:700 10.5px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2);
}
.flabel .opt{ letter-spacing:.14em; color:var(--ink-2); font-weight:500 }
.fin{
  display:block; width:100%; margin:0;
  padding:13px 14px;
  background:var(--sheet); color:var(--ink);
  border:1px solid var(--rule); border-radius:0;
  font:500 14px/1.5 var(--mono); letter-spacing:.01em;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.fin::placeholder{ color:var(--ink-2); opacity:1 }
.fin:hover{ border-color:var(--ink-2) }
.fin:focus-visible{ border-color:var(--valley-ink); outline-offset:2px }
.fin--area{ resize:vertical; min-height:94px }
.fhint{ margin:9px 0 0; font:500 12.5px/1.6 var(--mono); color:var(--ink-2) }

/* A field that needs correcting is marked by weight of line, not by a field
   colour: foil wash means earned, live and selected everywhere else in this
   world, and a wrong answer is none of those. The edge doubles to ink — the
   strongest neutral on the sheet — and the padding gives the extra pixel back
   so nothing below it shifts. That doubled edge is the whole mark; the message
   under it carries no second one. */
.field--bad .fin{ border-color:var(--ink); border-width:2px; padding:12px 13px }
/* The recovery is a sentence a person wrote, so it is set at reading size in
   mixed case: an example address has to render as the address it is asking for.
   Full ink against the secondary-ink hint it replaces is the difference. */
.ferr{
  margin:9px 0 0;
  font:500 12.5px/1.6 var(--mono); color:var(--ink);
}
/* a field kept out of sight of people and left in sight of bots */
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* said to a screen reader, drawn for nobody */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Masthead ---------- */
.mast{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--sheet) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--mountain);
}
.mast .bar{ display:flex; align-items:stretch; gap:clamp(12px,2vw,32px) }

.brand{
  display:flex; align-items:center; gap:11px;
  padding:14px 30px 14px 18px; margin-left:calc(-1 * clamp(16px,3vw,44px));
  background:var(--foil); color:var(--ink); text-decoration:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);
  flex:0 0 auto;
}
/* The mark takes the tab's ink through currentColor — see shared/_logo. */
.brand .logo-mark{ width:24px; height:24px; display:block }
/* The pinned wordmark split, carried by the world's own roman/oblique pair
   rather than a one-step weight change that reads as a single word. */
.brand .word{ font:italic 700 18px/1 var(--display); letter-spacing:.01em }
.brand .word .b{ font-style:normal; font-weight:700; letter-spacing:0 }

.mast nav{ display:flex; align-items:center; gap:clamp(10px,1.6vw,26px); margin-left:auto }
.mast nav a{
  font:700 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; padding:8px 2px;
  border-bottom:2px solid transparent;
}
.mast nav a:hover{ color:var(--ink); border-bottom-color:var(--foil) }
/* the surface you are on, marked in the world's own live colour */
.mast nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--foil) }
.mast .bar > .btn,
.mast .bar > .btn-edge{ align-self:center; margin-left:8px }

.mast-toggle{ display:none }

/* ---------- Type ---------- */
h1{
  font:italic 700 clamp(38px,5.4vw,70px)/1.0 var(--display);
  letter-spacing:-0.02em; text-transform:uppercase;
  margin:0 0 22px; text-wrap:balance;
}
h1 .thin{ font-style:normal; font-weight:600; display:block; color:var(--ink-2) }

.lede{
  font-size:clamp(15px,1.5vw,17.5px); line-height:1.75; color:var(--ink-2);
  max-width:52ch; margin:0 0 30px;
}
.lede strong{ color:var(--ink); font-weight:700 }

/* One bay between sections, never two stacked paddings. */
section{ padding:0 0 var(--bay) }
h2.head{
  font:italic 700 clamp(26px,3.6vw,46px)/1.03 var(--display);
  letter-spacing:-0.015em; text-transform:uppercase; margin:0 0 16px; text-wrap:balance;
}
.sub{ color:var(--ink-2); max-width:60ch; margin:0 0 clamp(26px,3.4vw,44px); font-size:15px; line-height:1.75 }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }

/* the invitation truth, stated as a fact of the system, not an apology */
.gate{
  display:flex; align-items:center; gap:10px; margin:26px 0 0;
  font:500 11.5px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.gate .lamp{
  width:8px; height:8px; flex:0 0 auto; background:var(--foil);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

/* a flash message, stated the way the gate line is stated */
.flash-note{
  display:flex; align-items:center; gap:10px;
  margin:22px 0 0; padding:13px 18px;
  background:var(--foil-wash); border:1px solid var(--rule);
  font:500 12px/1.5 var(--mono); letter-spacing:.06em; color:var(--ink);
}
.flash-note .lamp{
  width:8px; height:8px; flex:0 0 auto; background:var(--foil);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

/* crease legend */
.legend{
  display:flex; gap:20px; flex-wrap:wrap; margin-top:18px;
  font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.legend span{ display:flex; align-items:center; gap:8px }
.legend i{ width:26px; height:0; border-top:2px solid var(--mountain); display:block }
.legend .v i{ border-top:2px dashed var(--valley-line) }

/* ---------- Status readout (signature) ---------- */
.readout .face{ display:grid; grid-template-columns:repeat(4,1fr); }
.readout .cell{ padding:18px 22px; border-left:1px solid var(--mountain) }
.readout .cell:first-child{ border-left:0 }
.readout .k{
  display:block; font:700 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:9px;
}
.readout .v{ font:700 14px/1.35 var(--mono); color:var(--ink) }
.readout .v em{ font-style:normal; color:var(--valley-ink) }

/* synthetic-depiction badge */
.synthetic{
  display:inline-block; margin-top:12px;
  font:700 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--mountain); padding:5px 8px;
}

/* ---------- Close — the page ends on a field, not on empty ground ---------- */
.close{ padding-bottom:var(--bay) }
/* The close is the world's own saturated field — foil, not an inverted ground.
   The thesis refuses the dark page; the ending may not smuggle it back in. */
.close .slab{
  position:relative; overflow:hidden; text-align:center;
  color:var(--ink);
  background:
    linear-gradient(103deg,
      rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 20%,
      rgba(120,88,10,.14) 46%, rgba(255,255,255,.26) 60%,
      rgba(255,255,255,0) 78%, rgba(120,88,10,.18) 100%),
    var(--foil);
  padding:clamp(44px,6vw,88px) clamp(22px,4vw,64px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.close .slab::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg,  transparent 0 47px, rgba(14,14,14,.10) 47px 48px),
    repeating-linear-gradient(-60deg, transparent 0 47px, rgba(14,14,14,.07) 47px 48px);
  mask-image:radial-gradient(120% 92% at 50% 0%,rgba(0,0,0,.95),transparent 74%);
}
.close .slab::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:150px 150px;
  mix-blend-mode:overlay; opacity:.26;
}
.close .slab > *{ position:relative; z-index:1 }
.close .head{ margin-inline:auto; color:var(--ink) }
.close .sub{ margin-inline:auto; color:rgba(14,14,14,.76) }
.close .hero-actions{ justify-content:center }
.close .gate{ justify-content:center; color:rgba(14,14,14,.72) }
.close .gate .lamp{ background:var(--ink) }
.close .btn-edge{ background:var(--ink) }
.close .btn-edge > .btn--ghost{ background:var(--foil); color:var(--ink) }
.close .btn-edge:hover{ background:var(--ink) }
.close .btn-edge:hover > .btn--ghost{ background:var(--foil-wash); color:var(--ink) }

/* ---------- Colophon ---------- */
.colophon{ border-top:1px solid var(--rule); padding:34px 0 44px; background:var(--sheet-2) }
.colophon .bar{ display:flex; align-items:center; gap:20px; flex-wrap:wrap }
/* The colophon is a quiet band; the mark sits at its neighbours' weight. */
.colophon .logo-mark{ width:20px; height:20px; display:block; color:var(--ink-2) }
.colophon .c{ font:500 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.colophon nav{ display:flex; gap:20px; flex-wrap:wrap; margin-left:auto }
.colophon nav a{
  font:500 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
}
.colophon nav a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px }

/* ---------- Adaptation ---------- */
@media (max-width:760px){
  .mast nav{
    position:absolute; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0;
    min-width:230px; background:var(--sheet); border:1px solid var(--rule); border-top:0;
    padding:8px; display:none;
  }
  .mast nav a{ padding:12px 14px; border-bottom:0 }
  .mast nav a:hover{ background:var(--sheet-2) }
  .mast nav a[aria-current="page"]{ background:var(--foil-wash) }
  .mast[data-open="true"] nav{ display:flex }
  .mast .bar{ position:relative; align-items:center }
  .mast-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; margin-left:auto;
    background:var(--sheet); border:1px solid var(--rule); cursor:pointer; color:var(--ink);
  }
  .mast .bar > .btn,
  .mast .bar > .btn-edge{ margin-left:10px }
  .mast .bar > .btn{ padding:13px 16px }

  .readout .face{ grid-template-columns:1fr 1fr }
  .readout .cell{ border-left:0; border-top:1px solid var(--mountain) }
  .readout .cell:nth-child(-n+2){ border-top:0 }
  .readout .cell:nth-child(even){ border-left:1px solid var(--mountain) }

  .hero-actions .btn,
  .hero-actions .btn-edge{ flex:1 1 100%; justify-content:center }
  .hero-actions .btn-edge > .btn--ghost{ justify-content:center }
  .colophon nav{ margin-left:0; width:100%; gap:14px }
}

@media (max-width:520px){
  :root{ --cut:14px; --slant:10px }
  .legend{ gap:14px }
  h1{ font-size:clamp(32px,9.4vw,44px) }
}

/* ---------- Motion ---------- */
/* Content is visible by default. Motion is an enhancement, never a gate. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

@media print{
  .mast,.mast-toggle{ position:static }
  body::before{ display:none }
}