/*
 * The Lemmatic brand page.
 *
 * One stylesheet, hand-written, no build step beyond being copied. It is the
 * only stylesheet the page loads, and `style-src 'self'` is one of three
 * allowances in a `default-src 'none'` policy.
 *
 * **The tokens below are transcribed from the frozen Design export** —
 * `design/_ds/lemmatic-site-129a8fc2…/tokens/` — narrowed to what this page
 * actually uses. The export is the reference; it is never edited by hand and
 * this file is never the place a new value is invented. When the design
 * changes, a new export lands in `design/` whole and this file follows it.
 *
 * Three rules govern everything here:
 *
 * 1. **Nothing is fetched from anywhere but us.** No @import, no url() to
 *    another origin, no font service. The five faces are in `fonts/`, served
 *    from our own origin, and `font-src 'self'` means the browser would refuse
 *    a font from anywhere else.
 * 2. **One palette, light.** `color-scheme: light`, and no prefers-color-scheme
 *    block. The reader this page was built for is a web-filter reviewer
 *    deciding what this domain is; they should see what we reviewed.
 * 3. **Rubric marks, it never decorates.** The one accent is an oxide red,
 *    after rubrication — the red scribes used to set off the operative parts of
 *    a legal text. It is on the call to action and on links, and nowhere else.
 */

/* ------------------------------------------------------------------ */
/* The five faces. Nine exist in the design system; these are the five  */
/* this page sets. See docs/PLAN-site.md §2 for why the other four are  */
/* not shipped, and fonts/OFL-*.txt for the licences, which the OFL     */
/* requires to travel with the fonts wherever they are served.          */
/* ------------------------------------------------------------------ */

@font-face{font-family:"Lemmatic Sans";src:url("fonts/PublicSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lemmatic Sans";src:url("fonts/PublicSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lemmatic Sans";src:url("fonts/PublicSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Lemmatic Serif";src:url("fonts/SourceSerif4-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lemmatic Mono";src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root{
  color-scheme: light;

  /* Every family keeps a full local fallback stack, so the page is readable
     on its first paint and stays readable if a face never arrives. */
  --font-sans:"Lemmatic Sans","Public Sans","Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
  --font-serif:"Lemmatic Serif","Source Serif 4","Iowan Old Style","Charter",Georgia,serif;
  --font-mono:"Lemmatic Mono","IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --text-3xs:11px;
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:14px;
  --text-md:15px;
  --text-xl:20px;
  --text-3xl:30px;
  --text-5xl:48px;

  --leading-tight:1.08;
  --leading-normal:1.45;
  --leading-body:1.6;
  --leading-loose:1.75;

  --tracking-tight:-0.015em;
  --tracking-label:0.08em;
  --measure:64ch;

  /* Paper — warm near-whites. Not #FFF: the page is paper, not a screen. */
  --paper-0:#FFFFFF;
  --paper-1:#FCFCFA;
  --paper-4:#E4E2DB;

  /* Slate — ink through hairline */
  --slate-12:#14181B;
  --slate-11:#1E2429;
  --slate-8:#5E6971;
  --slate-7:#7C868D;
  --slate-4:#D3D8DB;

  /* Rubric — the single accent */
  --rubric-12:#48160F;
  --rubric-10:#8A2E20;
  --rubric-9:#9C3A2B;
  --rubric-4:#EBD3CD;

  --surface-page:var(--paper-1);
  --text-body:var(--slate-11);
  --text-strong:var(--slate-12);
  --text-muted:var(--slate-8);
  --text-faint:var(--slate-7);
  --text-link:var(--rubric-10);
  --text-link-hover:var(--rubric-12);
  --text-on-accent:#FFFFFF;
  --action-accent-bg:var(--rubric-9);
  --action-accent-bg-hover:var(--rubric-10);
  --action-accent-bg-active:var(--rubric-11,#6E251A);

  --color-border:var(--slate-4);
  --color-rule:var(--paper-4);
  --radius-1:2px;
  --radius-2:3px;
  --focus-ring:0 0 0 2px var(--paper-1),0 0 0 4px var(--rubric-9);

  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-9:40px;
  --space-10:56px;
  --space-11:72px;
  --space-12:96px;

  --page-margin:32px;
  --control-h-lg:42px;

  --dur-fast:120ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms}}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

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

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:var(--text-md);
  line-height:var(--leading-body);
  font-weight:var(--weight-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2{margin:0;font-weight:var(--weight-semibold);color:var(--text-strong);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);text-wrap:pretty}

p{margin:0 0 var(--space-5);max-width:var(--measure);text-wrap:pretty}

a{
  color:var(--text-link);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  transition:color var(--dur-fast) var(--ease-out);
}
a:hover{color:var(--text-link-hover);text-decoration-thickness:1.5px}
a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-1)}

::selection{background:var(--rubric-4);color:var(--rubric-12)}

/* ------------------------------------------------------------------ */
/* The page                                                            */
/* ------------------------------------------------------------------ */

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--page-margin)}

header{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-7) 0 var(--space-9)}

/* The mark is the tripod: three legs, one bowl — the thing an argument rests
   on. Ink only, never in Rubric, never in a tile. The drawn cut at 22px. */
.glyph{display:block;width:22px;height:22px}

.word{
  font-size:var(--text-md);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-strong);
}

/* The fold: at 1280x800 the first lines of the Authorities paragraph sit
   above it. */
h1{font-size:var(--text-5xl);max-width:20ch;letter-spacing:-0.02em;padding-bottom:var(--space-6)}

.beam{height:2px;background:var(--slate-12)}

.bays{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--space-11)}
.bay{padding-bottom:var(--space-12)}
.post{width:2px;height:var(--space-9);background:var(--slate-12)}

/* The product names are real h2s set to look like labels: a crawler deciding
   what this domain is reads the heading outline, and this page exists to be
   read by one. */
.label{
  margin-top:var(--space-6);
  font-size:var(--text-3xs);
  font-weight:var(--weight-regular);
  text-transform:uppercase;
  letter-spacing:var(--tracking-label);
  color:var(--text-muted);
  line-height:var(--leading-normal);
}

/* Source Serif 4 carries the two product clauses and the About text. */
.clause{
  margin-top:var(--space-3);
  font-family:var(--font-serif);
  font-size:var(--text-xl);
  font-weight:var(--weight-regular);
  letter-spacing:0;
  color:var(--text-strong);
}

.bay p{margin:var(--space-5) 0 0;font-size:var(--text-md);line-height:var(--leading-loose);color:var(--text-body);max-width:58ch}

.cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:var(--control-h-lg);
  margin-top:var(--space-7);
  padding:0 18px;
  background:var(--action-accent-bg);
  color:var(--text-on-accent);
  font-size:var(--text-md);
  font-weight:var(--weight-medium);
  border-radius:var(--radius-2);
  text-decoration:none;
  transition:var(--transition-control);
}
.cta:hover{background:var(--action-accent-bg-hover);color:var(--text-on-accent);text-decoration:none}
.cta:active{background:var(--action-accent-bg-active)}
.arw{font-family:var(--font-mono)}

/* The manifest excerpt — mono carries filenames, tokens and counts. */
.manifest{margin-top:var(--space-9)}
.manifest .name{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-strong);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
.manifest .excerpt{color:var(--text-faint)}
.mrow{
  display:grid;
  grid-template-columns:3ch minmax(0,1fr) 15ch 4ch 13ch;
  gap:var(--space-4);
  align-items:baseline;
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-rule);
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  line-height:var(--leading-normal);
}
.mrow .id{color:var(--text-faint)}
.mrow .case{color:var(--text-body)}
.mrow .cite{color:var(--text-muted)}
.mrow .yr{color:var(--text-faint)}
.mrow .tok{color:var(--text-strong);text-align:right;white-space:nowrap}

/* Outline is the quieter post. */
.bay.quiet .clause{font-size:var(--text-md)}
.bay.quiet p{font-size:var(--text-sm);color:var(--text-muted);max-width:34ch}

.footing{border-top:1px solid var(--color-rule);padding-top:var(--space-9);display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:var(--space-9)}
.footing .label{margin-top:0}
.footing p{margin:0;font-family:var(--font-serif);font-size:var(--text-md);line-height:var(--leading-loose);color:var(--text-body);max-width:var(--measure)}
.footing .contact{margin-top:var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm)}

footer{margin-top:var(--space-10);padding:var(--space-6) 0 var(--space-10);border-top:1px solid var(--color-rule);font-size:var(--text-xs);color:var(--text-faint)}

/* ------------------------------------------------------------------ */
/* The 404, which is the same shell with one sentence in it            */
/* ------------------------------------------------------------------ */

.notice{border-top:1px solid var(--color-rule);padding-top:var(--space-9);padding-bottom:var(--space-12)}
.notice h2{font-size:var(--text-xl);margin-bottom:var(--space-4)}
.notice p{color:var(--text-body)}

/* ------------------------------------------------------------------ */
/* Phone: the beam is turned on its side. It becomes the spine the two  */
/* posts hang off, so the structure still bears weight when the bays    */
/* stack.                                                               */
/* ------------------------------------------------------------------ */

@media (max-width:720px){
  .wrap{padding:0 var(--space-6)}
  h1{font-size:var(--text-3xl);padding-bottom:var(--space-7)}
  header{padding-bottom:var(--space-9)}
  .beam{display:none}
  .bays{grid-template-columns:1fr;gap:0;border-left:2px solid var(--slate-12)}
  .bay{padding-left:var(--space-6);padding-bottom:var(--space-10)}
  .post{width:var(--space-5);height:2px;margin-left:calc(-1 * var(--space-6))}
  .label{margin-top:var(--space-5)}
  .bay.quiet p,.bay p{max-width:none}
  .mrow{grid-template-columns:3ch auto auto minmax(0,1fr);gap:var(--space-2) var(--space-4)}
  .mrow .case{grid-column:2/5;grid-row:1}
  .mrow .cite{grid-column:2;grid-row:2}
  .mrow .yr{grid-column:3;grid-row:2}
  .mrow .tok{grid-column:4;grid-row:2;text-align:left}
  .footing{grid-template-columns:1fr;gap:var(--space-4)}
}