/* Loomis Research — canonical design tokens
   Source of truth: working/Loomis_Research_Style_Guide/DESIGN.md
   Colours are read from logo/Loomis_Research.svg; paper/muted from the shipped tell sites.
   Contrast ratios in comments are against --paper. */

:root {
  color-scheme: light;

  /* ground */
  --paper:        #f6f1e8;
  --paper-raised: rgba(255, 255, 255, 0.30);

  /* supporting neutrals (brief §4.1) */
  --warm-white:   #fbf9f4;   /* cards, panels, alternate sections */
  --stone:        #d9ccba;   /* solid borders and dividers — the brief's alternative to rgba hairlines */
  --soft-gray:    #8c857b;   /* 3.3:1 — FAILS AA for text; decorative metadata only, use --muted for anything read */
  --teal-ground:  #0e2f35;   /* the one approved dark ground: reversed lockup, slide title card, seal */

  /* ink */
  --ink:          #1f2628;   /* 13.7:1 — text, headings, wordmark */
  --muted:        #64675f;   /*  5.1:1 — labels, metadata, secondary copy */
  --rule:         rgba(31, 38, 40, 0.18);
  --rule-strong:  rgba(31, 38, 40, 0.28);

  /* accents — punctuation, not paint */
  --teal:         #0e2f35;   /* 12.6:1 — brackets, hover, the frame */
  --rust:         #c45a37;   /*  3.8:1 — GRAPHICS ONLY: dots, underlines, marks, ≥18pt text */
  --rust-text:    #a8452a;   /*  5.3:1 — rust that must be read at body sizes */
  --ochre:        #d8a24a;   /*  2.0:1 — DECORATIVE ONLY: the bar, a highlight wash, a signal dot */
  --ochre-text:   #8a6420;   /*  4.8:1 — only if an ochre label is unavoidable */

  /* type */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Baskerville", Georgia, serif;
  --font-body:    Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* scale (web) */
  --text-hero:    clamp(3.35rem, 6vw, 5.85rem);
  --text-title:   clamp(2.1rem, 3.1vw, 3.6rem);
  --text-card:    clamp(1.2rem, 1.55vw, 1.45rem);
  --text-name:    clamp(1.38rem, 1.9vw, 2.05rem);
  --text-lede:    clamp(1rem, 1.1vw, 1.18rem);
  --text-body:    1rem;
  --text-label:   0.72rem;
  --track-label:  0.16em;
  --track-display:-0.04em;
  --leading-body: 1.65;
  --leading-lede: 1.55;

  /* space */
  --space-1: 0.5rem;  --space-2: 0.75rem; --space-3: 1rem;   --space-4: 1.5rem;
  --space-5: 2rem;    --space-6: 3rem;    --space-7: 4.5rem; --space-8: 7rem;

  /* shape */
  --max-width:    1380px;
  --text-max:     40rem;
  --radius-card:  14px;
  --shadow:       0 16px 40px rgba(31, 38, 40, 0.05);
  --transition:   180ms ease-out;   /* brief §11: 180–350ms, ease-out, no bounce */
  --transition-slow: 320ms ease-out;
  --focus-ring:   2px solid var(--rust);
}

/* ---- base ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);          /* 1rem, never 16px */
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--teal); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--paper);
}
::selection { background: rgba(196, 90, 55, 0.16); }
[role="list"] { list-style: none; margin: 0; padding: 0; }

/* ---- house classes -------------------------------------------------- */
/* Heading rule (v2, 2026-08-31): titles are Inter caps, tracked; the serif is reserved for quoted
   voice and one editorial line per page. .hero-title / .section-title below follow it; the v1 serif
   versions the tell sites shipped are kept as .hero-title--serif / .section-title--serif. */
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { position: static; display: inline-block; margin: .5rem; padding: .6rem 1rem; background: var(--paper); outline: var(--focus-ring); }

/* The institution's own display voice: the wordmark's face. Inter 700 for the word that carries,
   500 for the rest — the same step as LOOMIS / RESEARCH. */
.display-caps { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.1; }
.display-caps strong, .display-caps b { font-weight: 700; }
.display-caps--hero { font-size: clamp(1.6rem, 3.2vw, 2.9rem); letter-spacing: 0.12em; }
.display-caps--section { font-size: clamp(1rem, 1.5vw, 1.35rem); color: var(--rust-text); }

/* The framing gesture: brackets as behaviour. Wrap the one thing that matters. */
.frame { position: relative; display: inline-block; padding: .35em .55em; }
.frame::before, .frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: .55em; border: 2px solid var(--teal); }
.frame::before { left: 0; border-right: 0; }
.frame::after { right: 0; border-left: 0; }
.frame--rust::before, .frame--rust::after { border-color: var(--rust); }

/* Reversed ground: the only dark surface. Lockup goes all warm-white on it. */
.on-teal { background: var(--teal-ground); color: var(--warm-white); }
.on-teal .lab, .on-teal .eyebrow { color: rgba(251, 249, 244, 0.72); }

/* The hand note: one ochre hand-drawn annotation per surface. Inline the SVG from logo/hand-note.svg. */
.hand-note { display: block; width: clamp(6rem, 14vw, 12rem); margin: .4rem 0 0; }
.hand-note svg { width: 100%; height: auto; }

.page { width: min(var(--max-width), calc(100vw - 2 * clamp(18px, 3vw, 40px))); margin: 0 auto; }
.section { border-top: 1px solid var(--rule); padding-block: clamp(2.2rem, 4.8vw, 4.8rem); }
.section[id] { scroll-margin-top: 6rem; }

.display { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-display); line-height: 1; }
.hero-title { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; font-size: clamp(1.6rem, 3.2vw, 2.9rem); line-height: 1.1; letter-spacing: 0.12em; max-width: 22ch; margin: 0; text-wrap: balance; }
.section-title { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; font-size: clamp(1.1rem, 1.8vw, 1.6rem); line-height: 1.15; letter-spacing: 0.14em; margin: 0; }
.hero-title strong, .section-title strong, .hero-title b, .section-title b { font-weight: 700; }
.card-title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.25; margin: 0; }
.editorial { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.35; }   /* the one serif line per page */
.hero-title--serif { font-family: var(--font-display); font-weight: 500; text-transform: none; font-size: var(--text-hero); line-height: 0.9; letter-spacing: -0.045em; max-width: 14ch; }
.section-title--serif { font-family: var(--font-display); font-weight: 500; text-transform: none; font-size: var(--text-title); line-height: 1; letter-spacing: -0.04em; }
.lede { font-size: var(--text-lede); line-height: var(--leading-lede); max-width: 38rem; }
.copy { max-width: var(--text-max); color: var(--muted); }
.voice { font-family: var(--font-display); }   /* the object's own words are always serif */

.label, .eyebrow, .chip, .topline, .site-nav {
  font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1.15rem; }
.eyebrow::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: var(--rust); box-shadow: 0 0 0 1px rgba(196, 90, 55, 0.2);
}
.hero-accent { width: 2.8rem; height: 0.14rem; margin: 1.1rem 0 1.3rem; background: var(--rust); }

.chip {
  display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper-raised);
  padding: 0.55rem 0.85rem; letter-spacing: 0.08em; transition: transform var(--transition), border-color var(--transition);
}
.chip:hover, .chip:focus-visible { transform: translateY(-1px); border-color: rgba(31, 38, 40, 0.32); }

.card {
  border: 1px solid var(--rule-strong); border-radius: var(--radius-card);
  background: var(--paper-raised); padding: 1.15rem 1rem 1rem;
}
.card--specimen { box-shadow: var(--shadow); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; }
.kv dt { font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.kv dd { margin: 0; }
.kv dt, .kv dd { padding: 0.45rem 0; border-top: 1px solid var(--rule); }

.mark { color: var(--rust); font-size: 1.15rem; line-height: 1; font-family: var(--font-display); }   /* ○ ● ◌ ✧ ↓ — a status vocabulary, always aria-hidden */
.brackets { font-family: var(--font-display); color: var(--teal); }   /* [ specimen ] frame device */
.hl { background: linear-gradient(transparent 55%, rgba(216, 162, 74, 0.45) 55%); } /* one word per page, at most */

.site-header {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px);
  background: rgba(246, 241, 232, 0.97); border-bottom: 1px solid var(--rule);
}
.site-header .page { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; padding-block: 1rem 0.95rem; }
.brand-mark { width: clamp(168px, 15vw, 220px); }
.brand-mark img { width: 100%; height: auto; }
.project-title { display: flex; align-items: baseline; gap: 0.8rem; min-width: 0; }
.project-title .name { font-family: var(--font-display); font-size: var(--text-name); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.9rem 1.2rem; }
.site-nav a { position: relative; padding-bottom: 0.15rem; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: -0.1rem; width: 100%; height: 1px; background: var(--rust); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }

.footer-mark { width: clamp(124px, 12vw, 180px); }

@media (max-width: 720px) {
  .site-header .page { grid-template-columns: 1fr; gap: 0.6rem; }
  .site-nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- print ---------------------------------------------------------- */
@media print {
  :root {
    --paper: #ffffff;
    --ink: #000000;             /* pure black on white stock */
    --paper-raised: transparent;
    --rule: rgba(23, 25, 24, 0.13);
    --rule-strong: rgba(23, 25, 24, 0.26);
  }
  @page { size: Letter; margin: 0; }
  html, body { background: #fff; color: #000; }
  body { font-size: 8.6pt; line-height: 1.45; }
  .site-header, .site-nav, .chip { display: none; }
  .kicker  { font-size: 7.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .brand   { font-family: var(--font-display); font-size: 20pt; letter-spacing: -0.02em; line-height: 1; }
  .title   { font-family: var(--font-display); font-size: 18pt; line-height: 1.03; }
  .id      { font-size: 15pt; letter-spacing: 0.06em; }
  .meta    { font-size: 8.8pt; line-height: 1.45; color: var(--muted); }
  .voice   { font-family: var(--font-display); font-size: 10.2pt; line-height: 1.45; }
  .label   { font-size: 7.5pt; letter-spacing: 0.12em; }
  .mark    { font-size: 26pt; color: var(--rust); }
  .rust-text { color: var(--rust-text); }
  a { color: inherit; }
}