/* ═══════════════════════════════════════════════════════════════════
   Seriate. "The composing room." SHARED LAYER.
   Every page on get.seriate.io loads this file and only this file for
   the design system: tokens, typography, chrome (running head, rail,
   colophon), buttons, and the section primitives.

   Rules for this file:
   - Nothing here may be page-specific. If a rule only ever matches on
     one page, it belongs in that page's stylesheet, not in this one.
   - The home page consumes this file too. It adds ./home.css for its
     seven signatures; inner pages add ./page.css. There is no third
     copy of the chrome anywhere.
   - Chrome markup (the .head block and the .colophon block) is
     duplicated in every HTML file because a static site has no
     includes. Keep it byte-identical. See README.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:      #F2EFE4;
  --paper-2:    #E9E4D5;   /* verso: the darker leaf */
  --paper-hi:   #FAF8F1;
  --ink:        #16130E;
  --ink-2:      #625C4E;   /* marginalia, 5.1:1 on paper */
  --rule:       #C9C2AF;
  --rule-soft:  #DAD4C3;
  --violet:     #4F3DA0;   /* the only accent. structure, not decoration */
  --violet-ink: #3A2C78;

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --text:    "Spectral", Georgia, "Times New Roman", serif;
  --app:     "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(18px, 3vw, 40px);
  --col-gap: clamp(12px, 1.35vw, 26px);
  --rail: 8.5rem;

  /* mechanical, no overshoot */
  --mech:  cubic-bezier(.72,0,.16,1);
  --settle: cubic-bezier(.16,1,.3,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(16px,.42vw + 15px,18.5px);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}

/* faint laid-paper tooth. static, no glow, no gradient sheen */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(22,19,14,.024) 0 1px, transparent 1px 3px);
  opacity:.5;
}
body > *{ position:relative; z-index:1; }

img,svg{ max-width:100%; }

a{ color:inherit; text-underline-offset:.2em; }

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--violet); outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--violet); color:var(--paper-hi);
  font-family:var(--app); font-weight:600; font-size:.85rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.7rem 1.1rem;
}
.skip:focus{ left:0; }

/* ── the sheet: mobile is one column, the press grid arrives at 901px ── */
.sheet{
  max-width:1560px; margin-inline:auto;
  padding-inline:var(--gut);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:var(--col-gap);
}
.sheet > *{ min-width:0; }

/* ── apparatus type: folios, running heads, labels ────────────────── */
.app{
  font-family:var(--app);
  font-variation-settings:"wdth" 88;
  font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.folio{
  font-family:var(--app); font-variation-settings:"wdth" 75;
  font-size:.7rem; font-weight:700; letter-spacing:.2em;
  color:var(--violet);
}
/* the dateline sits under the running head on every page */
.dateline{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem 1.1rem;
  padding-bottom:.7rem;
}
.dateline .dot{ color:var(--violet); }

/* ── rules that rule in ───────────────────────────────────────────── */
.rule{
  display:block; height:1px; background:var(--rule);
  transform:scaleX(0); transform-origin:left;
  transition:transform .95s var(--mech) var(--rd,0s);
}
.rule-2{ height:2px; background:var(--ink); }
.rule-v{ background:var(--violet); height:2px; }
.is-set .rule{ transform:none; }

/* ── the running head (sticky nav). Shared chrome. ────────────────── */
.head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--rule);
}
.head-in{
  max-width:1560px; margin-inline:auto;
  padding:.62rem var(--gut);
  display:flex; align-items:center; gap:1.1rem;
}
.mark{
  display:flex; align-items:baseline; gap:.5rem;
  text-decoration:none; flex:0 0 auto;
}
.mark b{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:1.32rem; font-weight:700; letter-spacing:.01em;
}
.mark i{
  font-family:var(--app); font-style:normal;
  font-size:.6rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--violet);
}
.toc{ display:none; margin-left:auto; gap:1.35rem; }
.toc a{
  font-family:var(--app); font-size:.7rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2);
  display:flex; align-items:baseline; gap:.4rem;
  padding-block:.2rem; position:relative;
  transition:color .25s var(--settle);
}
.toc a:hover{ color:var(--ink); }
/* current page: marked by site.js from location.pathname, so the markup
   stays byte-identical between pages */
.toc a[aria-current="page"]{ color:var(--ink); }
.toc a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-.15rem;
  height:2px; background:var(--violet);
}
.head-cta{ margin-left:auto; display:flex; align-items:center; gap:.55rem; }
.toc + .head-cta{ margin-left:1.6rem; }

/* progress: a violet rule that fills as you read */
.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--violet); transform:scaleX(0); transform-origin:left;
}

/* ── buttons: set as press furniture, not pills ───────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--app); font-weight:700; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.72rem 1.05rem; text-decoration:none;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; position:relative; overflow:hidden;
  transition:color .28s var(--settle), border-color .28s var(--settle);
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--violet);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .34s var(--mech);
  z-index:-1;
}
.btn > span{ position:relative; z-index:1; }
.btn:hover{ color:var(--paper-hi); border-color:var(--violet); }
.btn:hover::after{ transform:none; }
.btn-solid{ background:var(--violet); border-color:var(--violet); color:var(--paper-hi); }
.btn-solid::after{ background:var(--ink); }
.btn-solid:hover{ color:var(--paper-hi); border-color:var(--ink); }
.btn-ghost{
  border-color:transparent; padding-inline:.4rem; color:var(--ink-2);
}
.btn-ghost:hover{ color:var(--violet); border-color:transparent; }
.btn-ghost::after{ display:none; }
.btn-lg{ padding:1rem 1.6rem; font-size:.82rem; }

/* ── the rail: folio column, desktop only. Every page lists its own
      signatures here; site.js marks the current one. ──────────────── */
.rail{
  display:none;
  position:fixed; top:0; height:100vh; width:var(--rail);
  left:max(var(--gut), calc(50vw - 780px + var(--gut)));
  z-index:40; pointer-events:none;
  padding-block:7.5rem 3rem;
  flex-direction:column; gap:.9rem;
}
/* a long document indexes more clauses than a short viewport has room for,
   so the list scrolls inside the rail rather than spilling out of it */
.rail ol{
  list-style:none; margin:0; padding:0; display:grid; gap:.62rem;
  pointer-events:auto; min-height:0; overflow-y:auto; scrollbar-width:thin;
}
.rail a{
  display:grid; grid-template-columns:1.9rem 1fr; align-items:baseline; gap:.35rem;
  text-decoration:none; font-family:var(--app);
  font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  /* opacity .5 composited --ink-2 to 2.12:1, which fails AA for navigation.
     At full opacity it is 5.8:1, and the resting/current step is still
     legible because current switches to --ink. */
  color:var(--ink-2); opacity:1;
  transition:opacity .3s var(--settle), color .3s var(--settle);
}
.rail a span:first-child{ font-variation-settings:"wdth" 70; color:var(--violet); }
.rail a:hover{ color:var(--ink); }
.rail li[aria-current="true"] a{ opacity:1; color:var(--ink); }
.rail-stick{
  position:relative; width:1px; background:var(--rule); flex:1; margin-left:.32rem;
}
.rail-stick i{
  position:absolute; inset:0 auto 0 -1px; width:3px; background:var(--violet);
  transform:scaleY(0); transform-origin:top;
}

/* ── signature (section) scaffold ─────────────────────────────────── */
.sig{ padding-block:clamp(3.6rem,7vw,7.5rem); }
.sig-head{ display:grid; gap:.9rem; margin-bottom:clamp(1.8rem,3vw,3rem); }
.sig-no{ display:flex; align-items:baseline; gap:.75rem; }
.sig-no .rule{ flex:1; }

h1,h2,h3{ margin:0; font-weight:400; }

.display{
  font-family:var(--display); font-optical-sizing:auto;
  font-weight:700; line-height:.94; letter-spacing:-.018em;
  font-variant-numeric:lining-nums;
}
h2.display{ text-wrap:balance; }

/* word-set masking */
.w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.09em .02em .2em; margin:-.09em -.02em -.2em;
}
.w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(112%);
  transition:transform 1s var(--mech) var(--wd,0s);
}
.set .w > i{ transform:none; }

.lift{
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--settle) var(--ld,0s), transform .8s var(--settle) var(--ld,0s);
}
.set .lift, .is-set .lift{ opacity:1; transform:none; }

/* ── figures: didone lining numerals, never mono ──────────────────── */
.figure{
  display:inline-flex; align-items:center;
  font-family:var(--display); font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
  line-height:1;
}
.figure .cur{ font-size:.52em; margin-right:.08em; align-self:flex-start; margin-top:.16em; }

/* ── the entry: a priced block. Used by the home plans and by any
      inner page that prints an allowance. ────────────────────────── */
.entry{ border-top:2px solid var(--ink); padding-top:1.1rem; display:grid; gap:.9rem; align-content:start; }
.entry h3{ font-family:var(--display); font-size:1.5rem; font-weight:700; }
.entry .price{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.entry .price .figure{ font-size:clamp(2.8rem,5vw,4rem); }
.entry .per{ font-family:var(--app); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); max-width:17ch; line-height:1.4; }
.entry ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.entry li{ padding-left:1.1rem; position:relative; font-size:.97rem; line-height:1.45; }
.entry li::before{ content:""; position:absolute; left:0; top:.62em; width:.5rem; height:1.5px; background:var(--violet); }
.entry .fine{ font-size:.84rem; color:var(--ink-2); line-height:1.5; margin:0; }
.entry-main{ border-top-color:var(--violet); }
.entry-main li::before{ background:var(--ink); }
.flag{
  font-family:var(--app); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-hi); background:var(--violet);
  padding:.24rem .55rem; justify-self:start;
}

/* ── the catalogue: a numbered definition list. Used by the home
      catalogue and by the features sheet. Placement lives with the
      page; only the setting is shared. ───────────────────────────── */
.cat{ margin:0; padding:0; }
.cat-item{ break-inside:avoid; padding:1.1rem 0; border-top:1px solid var(--rule-soft); }
.cat-item:first-child{ border-top:0; padding-top:0; }
.cat-item dt{
  font-family:var(--display); font-weight:700; font-size:1.22rem; line-height:1.18;
  letter-spacing:-.01em; display:flex; gap:.6rem; align-items:baseline;
}
.cat-item dt span{
  font-family:var(--app); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  color:var(--violet); flex:0 0 auto; position:relative; top:-.1em;
  font-variation-settings:"wdth" 70;
}
.cat-item dd{ margin:.4rem 0 0 2.1rem; font-size:.98rem; color:var(--ink-2); line-height:1.55; }
.cat-item dd a{ color:var(--violet-ink); text-decoration:underline; }
.cat-item dd a:hover{ color:var(--violet); }

/* the specimen figure: one number set enormous, with its caption */
.spec-no{
  font-family:var(--display); font-weight:700; line-height:.8;
  font-size:clamp(5rem,15vw,11rem); letter-spacing:-.03em;
  font-variant-numeric:lining-nums;
}
.spec-cap{ margin-top:.6rem; max-width:24ch; font-size:.94rem; color:var(--ink-2); }

/* ── the colophon (footer). Shared chrome. ────────────────────────── */
.colophon{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(2.4rem,4vw,3.6rem);
}
.colophon .app{ color:color-mix(in srgb,var(--paper) 62%, var(--ink)); }
.colophon a{ color:var(--paper); }
.colophon p{ margin:0; font-size:.92rem; line-height:1.55; color:color-mix(in srgb,var(--paper) 78%, var(--ink)); }
.colo-nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.colo-nav.stack{ flex-direction:column; gap:.45rem; }
.colo-nav a{
  font-family:var(--app); font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  color:color-mix(in srgb,var(--paper) 80%, var(--ink));
}
.colo-nav a:hover{ color:var(--paper); text-decoration:underline; }
.colo-mark{ font-family:var(--display); font-size:2.6rem; font-weight:700; line-height:1; }
.colo-a p{ margin-top:.6rem; }
.colo-group + .colo-group{ margin-top:1.3rem; }
.colo-group .app{ display:block; margin-bottom:.5rem; }

/* ═══ the press grid arrives ═══════════════════════════════════════ */
@media (min-width:901px){
  .sheet{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .toc{ display:flex; }
  .toc + .head-cta{ margin-left:1.6rem; }

  .dateline{ grid-column:1 / 13; }
  .sig-head{ grid-column:1 / 13; }
  .sig-head.narrow{ grid-column:1 / 7; }

  .colo-a{ grid-column:1 / 4; }
  .colo-b{ grid-column:4 / 8; }
  .colo-c{ grid-column:8 / 11; }
  .colo-d{ grid-column:11 / 13; }
}

@media (min-width:1180px){
  .rail{ display:flex; }
  .sheet{ padding-left:calc(var(--gut) + var(--rail)); }
  .head-in{ padding-left:calc(var(--gut) + var(--rail)); }
}

@media (max-width:900px){
  .cat-item dd{ margin-left:0; }
  .spec-cap{ max-width:52ch; }
  .colo-b, .colo-c, .colo-d{ margin-top:1.8rem; }
}

@media (max-width:470px){
  .mark i{ display:none; }
  .head-in{ gap:.6rem; padding-inline:14px; }
  .btn{ padding:.62rem .8rem; font-size:.7rem; letter-spacing:.07em; }
  .btn-lg{ padding:.85rem 1.1rem; font-size:.74rem; }
  .sig-no .rule{ min-width:2rem; }
}

/* ── the settled state ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rule{ transform:none !important; transition:none !important; }
  .w > i{ transform:none !important; transition:none !important; }
  .lift{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn::after{ transition:none !important; }
  *{ scroll-behavior:auto !important; }
}