/* ============================================================
   ORDOVA CHARTER — Founding Edition. The single design source.
   Authored once; injected by build.mjs into every page. Pages
   reference this file; the design is never copied per-page.

   Webfonts load online; offline-safe fallbacks (Iowan/Palatino/
   Georgia / SF Mono/Menlo) cover no-network.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ============================ TOKENS ============================ */
:root,[data-theme="paper"]{
  --od-bg:#e9e0ca; --od-bg-2:#e1d7bd; --od-panel:#f1ebda;
  --od-line:rgba(44,35,18,.20); --od-line-strong:rgba(44,35,18,.40); --od-rule:rgba(44,35,18,.30);
  --od-ink:#1d1910; --od-ink-2:#3a3225; --od-muted:#5e5440; --od-faint:#6c6149;
  --od-accent:#f2b65a; --od-accent-ink:#8c6210; --od-accent-soft:rgba(242,182,90,.18); --od-accent-line:rgba(140,98,16,.36);
  color-scheme:light;
}
[data-theme="dark"]{
  --od-bg:#15120c; --od-bg-2:#1c170f; --od-panel:#1a150e;
  --od-line:rgba(236,228,210,.13); --od-line-strong:rgba(236,228,210,.24); --od-rule:rgba(236,228,210,.18);
  --od-ink:#ece4d2; --od-ink-2:#d2c9b3; --od-muted:#9a9079; --od-faint:#8d8369;
  --od-accent:#f2b65a; --od-accent-ink:#f2b65a; --od-accent-soft:rgba(242,182,90,.12); --od-accent-line:rgba(242,182,90,.42);
  color-scheme:dark;
}
:root{
  --od-serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --od-mono:"IBM Plex Mono","SF Mono",Menlo,"Courier New",monospace;
  --od-ease:cubic-bezier(.2,.7,.2,1);
  --od-4:16px; --od-5:24px; --od-7:48px;
}

/* ============================ TYPE ROLES ============================ */
.od-display{font-family:var(--od-serif);font-weight:600;font-size:clamp(33px,4.8vw,60px);line-height:1.16;letter-spacing:.002em;color:var(--od-ink);margin:0}
.od-lead{font-family:var(--od-serif);font-weight:500;font-size:clamp(18px,1.7vw,20.5px);line-height:1.56;color:var(--od-ink-2)}
.od-lead em{font-style:italic;color:var(--od-ink)}
.od-h1{font-family:var(--od-serif);font-weight:600;font-size:clamp(27px,3.2vw,40px);line-height:1.08;letter-spacing:.004em;color:var(--od-ink);margin:0}
.od-body{font-family:var(--od-serif);font-weight:500;font-size:19px;line-height:1.56;color:var(--od-ink-2)}
.od-body em{font-style:italic;color:var(--od-ink)}
.od-eyebrow{font-family:var(--od-mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--od-muted)}
.od-meta{font-family:var(--od-mono);font-weight:400;font-size:12.5px;color:var(--od-faint)}
.od-label{font-family:var(--od-mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--od-faint)}
.od-margin{font-family:var(--od-mono);font-weight:400;font-size:11px;letter-spacing:.03em;color:var(--od-muted);line-height:1.75}

/* signature motif: the only thing that moves */
.od-cur{display:inline-block;width:.34em;height:.92em;background:var(--od-accent);vertical-align:-.06em;margin-left:.1em;animation:od-blink 1.2s steps(1) infinite}
@keyframes od-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.od-cur{animation:none}}

/* ============================ PAGE FRAME ============================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--od-bg);color:var(--od-ink);font-family:var(--od-serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sheet{max-width:1140px;margin:0 auto;padding:clamp(40px,7vw,104px) clamp(24px,6vw,72px) clamp(64px,8vw,120px)}

/* the shared two-column document grid: wide left marginalia, generous text column */
.row{display:grid;grid-template-columns:[marg] minmax(0,208px) [text] minmax(0,652px);column-gap:clamp(28px,5vw,64px);align-items:start}
.marg{grid-column:marg}
.col{grid-column:text}

/* ---- masthead ---- */
.masthead{margin-bottom:clamp(24px,3vw,40px)}
.lockup{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.lockup .wordmark{font-family:var(--od-mono);font-weight:500;font-size:25px;letter-spacing:.24em;color:var(--od-ink);line-height:1;white-space:nowrap}
.lockup .wordmark .od-cur{width:.3em;height:1em;vertical-align:-.04em}
.masthead .eyebrow-line{margin-top:clamp(28px,4vw,44px)}
.masthead .title{margin-top:var(--od-5)}
.masthead .standfirst{margin-top:var(--od-7);color:var(--od-ink-2);max-width:600px}
.masthead .standfirst em{font-style:italic;color:var(--od-ink)}
.masthead .seal{margin-top:var(--od-5)}
.seal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.seal .sep{color:var(--od-faint)}
.badge{font-family:var(--od-mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--od-accent-ink);border:1px solid var(--od-accent-line);border-radius:2px;padding:2px 7px}

/* hairline statute dividers */
.rule{border:0;border-top:1px solid var(--od-rule);margin:clamp(28px,3.5vw,48px) 0}
.rule--marg{grid-column:text;border:0;border-top:1px solid var(--od-rule);margin:clamp(28px,3.5vw,48px) 0}
.section-label{margin:clamp(36px,5vw,64px) 0 clamp(4px,1vw,12px)}

/* ============================ DETAIL PAGES ============================ */
/* article marginalia: roman numeral + gloss + ratification mark */
.article .marg{padding-top:.5em}
.marg .numeral{font-family:var(--od-serif);font-weight:600;font-size:clamp(34px,4vw,52px);line-height:.9;letter-spacing:.01em;color:var(--od-faint)}
.marg .gloss{margin-top:var(--od-4);max-width:170px;color:var(--od-muted);line-height:1.5}
.marg .ratif{margin-top:var(--od-4);display:block;color:var(--od-faint)}

/* preamble */
.preamble .body{margin-top:var(--od-4)}
.preamble .body p{margin:0 0 var(--od-4)}
.preamble .body p:last-child{margin-bottom:0}

/* articles */
.article{margin:clamp(40px,6vw,80px) 0}
.article .lede{margin-top:var(--od-4)}
.article .body{margin-top:var(--od-4)}
.article .body p{margin:0 0 12px}
.article .body p:last-child{margin-bottom:0}
.article .term{margin-top:var(--od-5);font-family:var(--od-mono);font-size:.74em;color:var(--od-muted);letter-spacing:.01em;line-height:1.7}

/* the immutable article (on-reversibility only): set apart without shouting */
.article--bound .marg .numeral,.article--bound .marg .ratif{color:var(--od-accent-ink)}
.bound-edge{grid-column:text;border-top:1px solid var(--od-accent-line);padding-top:8px;margin-top:8px}

/* keystone (on-reversibility only) */
.keystone{margin-top:clamp(28px,4vw,48px)}
.keystone .mark-rule{width:64px;border:0;border-top:2px solid var(--od-accent-ink);margin:0 0 var(--od-5)}
.keystone blockquote{margin:0;font-family:var(--od-serif);font-weight:600;font-size:clamp(34px,5.2vw,64px);line-height:1.08;letter-spacing:.002em;color:var(--od-ink);text-wrap:balance}
.keystone blockquote .forever{font-style:italic;color:var(--od-accent-ink)}
.keystone .attribution{margin-top:var(--od-5);color:var(--od-faint)}

/* ratification */
.ratification{margin-top:clamp(48px,7vw,96px)}
.ratification .body{margin-top:var(--od-4);max-width:560px;color:var(--od-ink-2)}
.signoff{margin-top:var(--od-7);display:flex;align-items:center;gap:var(--od-4);flex-wrap:wrap}
.signoff .line{color:var(--od-faint)}

/* ============================ INDEX PAGES ============================ */
/* one entry style serves both list kinds:
     home      -> .e-marg holds .path ; .e-col holds .etitle/.egloss/.depth
     amendments-> .e-marg holds .num + .status ; .e-col holds .etitle/.egloss */
.canon-list{margin-top:clamp(4px,1vw,12px)}
.entry{
  display:grid;
  grid-template-columns:[marg] minmax(0,208px) [text] minmax(0,652px);
  column-gap:clamp(28px,5vw,64px);
  align-items:start;
  padding:clamp(18px,2.3vw,28px) 0;
  border-top:1px solid var(--od-line);
  text-decoration:none;color:inherit;
  transition:background .2s var(--od-ease,ease);
}
.entry:last-child{border-bottom:1px solid var(--od-line)}
.entry .e-marg{grid-column:marg;padding-top:.2em;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--od-4)}
.entry .e-col{grid-column:text}
.entry .num{font-family:var(--od-serif);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:.9;letter-spacing:.01em;color:var(--od-faint);min-width:1.6em}
.entry .status{font-family:var(--od-mono);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--od-faint);max-width:130px}
.entry .path{font-family:var(--od-mono);font-weight:400;font-size:11.5px;letter-spacing:.02em;color:var(--od-faint);line-height:1.5;word-break:break-word}
.entry .etitle{font-family:var(--od-serif);font-weight:600;font-size:clamp(21px,2.1vw,27px);line-height:1.12;color:var(--od-ink)}
.entry .egloss{font-family:var(--od-serif);font-weight:500;font-size:17px;line-height:1.5;color:var(--od-muted);margin-top:6px;max-width:580px}
.entry .depth{font-family:var(--od-mono);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--od-faint);margin-top:12px}

/* the hover affordance: the system awaiting your selection. a cursor appears at the title's tail */
.entry .pick{display:inline-block;width:.32em;height:.92em;background:var(--od-accent);vertical-align:-.06em;margin-left:.18em;opacity:0;transition:opacity .18s}
.entry[href]:not([href="#"]):hover{background:var(--od-accent-soft)}
.entry[href]:not([href="#"]):hover .pick{opacity:1;animation:od-blink 1.2s steps(1) infinite}
.entry[href]:not([href="#"]):hover .etitle{color:var(--od-ink)}
.entry[href]:not([href="#"]):hover .depth{color:var(--od-accent-ink)}
.entry[href="#"]{cursor:default}
.entry[href="#"] .etitle{color:var(--od-ink-2)}

/* ============================ THEME TOGGLE ============================ */
.ground{position:fixed;top:clamp(16px,2.5vw,28px);right:clamp(16px,3vw,40px);z-index:10;display:inline-flex;background:var(--od-bg-2);border:1px solid var(--od-line);border-radius:100px;padding:3px}
.ground button{font-family:var(--od-mono);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--od-muted);background:transparent;border:0;border-radius:100px;padding:6px 14px;cursor:pointer;transition:color .2s,background .2s}
.ground button[aria-pressed="true"]{color:var(--od-ink);background:var(--od-bg);box-shadow:0 1px 4px -2px rgba(0,0,0,.4)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:720px){
  .row,.entry{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .marg,.col,.rule--marg,.bound-edge,.entry .e-marg,.entry .e-col{grid-column:1}
  .article .marg{padding-top:0;display:flex;align-items:baseline;gap:var(--od-4);flex-wrap:wrap}
  .article .marg .numeral{font-size:34px}
  .article .marg .gloss,.article .marg .ratif{margin-top:0}
  .entry .e-marg{padding-top:0}
  .ground{position:absolute}
}