/* ============================================================
   ORDOVA CANON — face-specific structure.

   The shared design definition lives in tokens.css, which is a
   byte-identical copy of ordova-site/tokens/tokens.css and is
   hash-gated at deploy. Do not restate ground, ink, accent, type
   family or type scale here; take them from there.

   What belongs in this file is only what makes the canon a canon:
   the two-column document grid with its wide left marginalia, the
   article numerals and glosses, the immutable article's treatment,
   the keystone, the ratification block, and the index entry rows.
   ============================================================ */

/* The canon reads as a document, not a column: a wider measure than the
   880px the rest of the surface uses, so the marginalia has somewhere to
   live. The topbar picks this up too, so chrome and sheet stay aligned. */
:root{ --wrap:1140px }

/* Type roles the shared file has no use for. The canon needs a metadata
   role (seals, colophon), a section label, and a marginalia role. */
.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}

/* ============================ PAGE FRAME ============================ */
.sheet{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,6vw,80px) clamp(24px,5vw,40px) clamp(56px,7vw,96px)}

/* 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 ---- */
/* The brand lockup moved to the shared topbar, so the masthead carries only
   the page's own identity: eyebrow, display title, standfirst, seal. */
.masthead{margin-bottom:clamp(24px,3vw,40px)}
.masthead .eyebrow-line{margin-top:0}
.masthead .title{margin-top:12px}
.masthead .standfirst{margin-top:var(--od-5);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-primary);border:1px solid var(--od-accent-line);border-radius:var(--radius-pill);padding:3px 9px}

/* hairline statute dividers. .rule itself comes from tokens.css; the canon
   adds only the variant that sits in the text column of the document grid. */
.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-primary)}
.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-primary);margin:0 0 var(--od-5)}
.keystone blockquote{margin:0;font-family:var(--od-serif);font-weight:700;font-size:clamp(34px,5.2vw,64px);line-height:1.08;letter-spacing:-.005em;color:var(--od-slate);text-wrap:balance}
.keystone blockquote .forever{font-style:italic;color:var(--od-primary)}
.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 var(--dur) var(--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. This used to be a blinking cursor, the canon's one
   moving thing. The rest of the surface holds still, so the tell is now a
   static accent bar that appears at the title's tail on hover. */
.entry .pick{display:inline-block;width:.28em;height:.9em;background:var(--od-primary);vertical-align:-.06em;margin-left:.18em;opacity:0;transition:opacity var(--dur) var(--ease)}
.entry[href]:not([href="#"]):hover{background:var(--od-accent-soft)}
.entry[href]:not([href="#"]):hover .pick{opacity:1}
.entry[href]:not([href="#"]):hover .etitle{color:var(--od-ink)}
.entry[href]:not([href="#"]):hover .depth{color:var(--od-primary)}
.entry[href="#"]{cursor:default}
.entry[href="#"] .etitle{color:var(--od-ink-2)}

/* ============================ 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}
}