/* ==========================================================================
   SEVENTIES REVIVAL — one page. Loaded on a/seventies-revival.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A sun-arch rises from a brown horizon; the record continues as horizontal
   bands of flat, grained earth colour, warmest leading, an arch at each head;
   the page closes with the arch setting into the ground. The shell (rail,
   top bar, community drawer) is never restyled: every rule here is scoped to
   .sv-hero or .sv-rec.

   NO BRIGHT ACCENT exists in this file. The five values below are the only
   hex colours in it, declared first and in this order, because the record's
   colour row measures them (model/measured.ts reads every #RRGGBB here, in
   declaration order). Anything else is rgba or color-mix of these five.

   Contrast (WCAG, on flat colour): cream on orange 5.4:1, on avocado 5.6:1,
   on brown 10.4:1; brown on mustard 5.3:1, on cream 10.4:1. Mustard is never
   text. The grain sits BEHIND text, as a background layer on each band:
   brown specks on the dark bands (which darkens the ground under cream text)
   and cream specks on mustard (which lightens it under brown text), so it
   can only raise contrast. Motionless: no animation, no transition.
   ========================================================================== */
.sv-page {
  --sv-or: #9A4318;
  --sv-av: #56641F;
  --sv-mu: #C99A2E;
  --sv-br: #4A2E1C;
  --sv-cr: #EFE2C4;
  --sv-display: "FrauncesSV", "Cooper Black", Georgia, serif;
  --sv-body: "DMSansSV", "Helvetica Neue", Arial, sans-serif;
  --sv-grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .29 0 0 0 0 .18 0 0 0 0 .11 0 0 0 .34 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --sv-grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .94 0 0 0 0 .89 0 0 0 0 .77 0 0 0 .3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background: var(--paper); /* shell mat; the room ground lives on main */
}

@font-face {
  font-family: "FrauncesSV";
  src: url("fonts/fraunces-soft.woff2") format("woff2-variations"), url("fonts/fraunces-soft.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "DMSansSV";
  src: url("fonts/dm-sans.woff2") format("woff2-variations"), url("fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "DMSansSV";
  src: url("fonts/dm-sans-italic.woff2") format("woff2-variations"), url("fonts/dm-sans-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@media (max-width: 60rem) { .sv-page { --sv-bleed: var(--s4); } }
.sv-page main { background: var(--sv-cr); color: var(--sv-br); overflow-x: clip; }
/* The record is present, never arriving: outranks site.css's .js-reveal. */
.sv-page main > section.sv-rec { opacity: 1; transform: none; transition: none; will-change: auto; }
/* The bands run edge to edge of the room, through main's gutter. */
.sv-hero, .sv-rec { margin-inline: calc(-1 * var(--sv-bleed, var(--s6))); }
.sv-hero, .sv-rec { font: 400 1.125rem/1.6 var(--sv-body); letter-spacing: 0; }
/* Zero-specificity defaults: every classed link below outranks them. */
:where(.sv-hero, .sv-rec) a { color: inherit; text-decoration-color: var(--sv-line, var(--sv-or)); text-decoration-thickness: 3px; text-underline-offset: 3px; }
:where(.sv-rec) p { margin: 0 0 16px; }
.sv-hero :focus-visible, .sv-rec :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 8px; }

/* ---- the sun-arch: concentric bands on a horizon ---- */
.sv-sky { position: relative; overflow: hidden; }
.sv-arch { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); aspect-ratio: 2 / 1; }
.sv-arch__b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 999px 999px 0 0; background-image: var(--sv-grain-dark); }
.sv-arch__b--1 { background-color: var(--sv-av); }
.sv-arch__b--2 { background-color: var(--sv-mu); }
.sv-arch__b--3 { background-color: var(--sv-or); }
.sv-arch__b--4 { background-color: var(--sv-br); }
.sv-arch__b--5 { background-color: var(--sv-or); }
.sv-arch__b--6 { background-color: var(--sv-mu); }
.sv-arch__b--7 { background-color: var(--sv-cr); }

/* ---- hero: the arch rises, the name stands on the ground ---- */
.sv-hero { display: flex; flex-direction: column; min-height: max(460px, min(88vh, 760px)); background: var(--sv-grain-dark), var(--sv-cr); color: var(--sv-cr); }
.sv-hero .sv-sky { flex: 1 1 auto; min-height: clamp(220px, 40vw, 520px); }
.sv-arch--rise { width: max(140%, 520px); max-width: 1400px; }
.sv-ground { position: relative; z-index: 1; padding: clamp(24px, 4vw, 40px) 16px 8px; text-align: center; background: var(--sv-grain-dark), var(--sv-br); }
.sv-h1 { margin: 0; font: 900 clamp(52px, 10vw, 132px)/0.92 var(--sv-display); letter-spacing: -0.02em; color: var(--sv-cr); overflow-wrap: anywhere; }
.sv-def { margin: 16px auto 0; max-width: 34ch; font-size: clamp(17px, 2vw, 21px); font-weight: 500; line-height: 1.45; color: var(--sv-cr); }
/* Found in research: the faces and the colour the revival draws on. Cream on brown, 10.4:1. */
.sv-doc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; max-width: 60rem; margin: clamp(28px, 4vw, 44px) auto 0; padding: 20px 0 8px; border-top: 3px solid color-mix(in srgb, var(--sv-cr) 30%, transparent); text-align: left; color: var(--sv-cr); }
.sv-doc div { min-width: 0; }
.sv-doc dt { margin: 0 0 4px; font: 700 13px/1.3 var(--sv-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sv-doc dd { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 700px) { .sv-doc { grid-template-columns: 1fr; } }

/* ---- the record: bands ---- */
.sv-rec { position: relative; overflow: clip; }
.sv-band { padding: clamp(48px, 8vw, 96px) clamp(16px, 5vw, 60px); background: var(--sv-grain-dark), var(--sv-bg); color: var(--sv-fg); }
.sv-band--br { --sv-bg: var(--sv-br); --sv-fg: var(--sv-cr); --sv-line: var(--sv-mu); --sv-g1: var(--sv-or); --sv-g2: var(--sv-mu); --sv-g3: var(--sv-cr); }
.sv-band--or { --sv-bg: var(--sv-or); --sv-fg: var(--sv-cr); --sv-line: var(--sv-cr); --sv-g1: var(--sv-mu); --sv-g2: var(--sv-br); --sv-g3: var(--sv-cr); }
.sv-band--mu { --sv-bg: var(--sv-mu); --sv-fg: var(--sv-br); --sv-line: var(--sv-or); --sv-g1: var(--sv-or); --sv-g2: var(--sv-br); --sv-g3: var(--sv-cr); background: var(--sv-grain-light), var(--sv-bg); }
.sv-band--av { --sv-bg: var(--sv-av); --sv-fg: var(--sv-cr); --sv-line: var(--sv-mu); --sv-g1: var(--sv-mu); --sv-g2: var(--sv-or); --sv-g3: var(--sv-cr); }
.sv-band--cr { --sv-bg: var(--sv-cr); --sv-fg: var(--sv-br); --sv-line: var(--sv-or); --sv-g1: var(--sv-av); --sv-g2: var(--sv-mu); --sv-g3: var(--sv-or); }
.sv-w { max-width: 900px; margin: 0 auto; }
.sv-w > :last-child { margin-bottom: 0; }
.sv-glyph { display: block; width: 60px; height: 32px; margin: 0 0 14px; }
.sv-glyph__1 { fill: var(--sv-g1); }
.sv-glyph__2 { fill: var(--sv-g2); }
.sv-glyph__3 { fill: var(--sv-g3); }
.sv-band h2 { margin: 0 0 20px; font: 900 clamp(34px, 5vw, 56px)/1 var(--sv-display); letter-spacing: -0.01em; }
.sv-lbl { display: block; margin: 0 0 8px; font: 700 13px/1.4 var(--sv-body); letter-spacing: 0.12em; text-transform: uppercase; }

.sv-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin: 0; }
.sv-meta dt { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sv-meta dd { margin: 2px 0 0; font-weight: 500; }

.sv-big { font: 900 clamp(32px, 5.4vw, 60px)/1.02 var(--sv-display); letter-spacing: -0.01em; }
:where(.sv-rec) .sv-big { margin-bottom: 20px; }
.sv-refuse { margin-top: 24px; padding: 18px 22px; border-radius: 24px; background: var(--sv-cr); color: var(--sv-br); }
.sv-refuse b { display: block; font: 900 22px/1.2 var(--sv-display); color: var(--sv-or); margin-bottom: 4px; }
.sv-dx { padding: 20px 24px; border-radius: 24px; background: var(--sv-grain-dark), var(--sv-br); color: var(--sv-cr); font: 900 clamp(22px, 3vw, 30px)/1.25 var(--sv-display); }

/* what carries the look */
.sv-tw { overflow-x: auto; }
.sv-ct, .sv-rt { width: 100%; border-collapse: collapse; }
.sv-ct th, .sv-ct td, .sv-rt th, .sv-rt td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 2px solid color-mix(in srgb, currentColor 28%, transparent); }
.sv-ct th { width: 28%; font-weight: 700; }
.sv-ct th a { display: inline-flex; align-items: center; min-height: 44px; }
.sv-ct td { padding-top: 18px; }
.sv-ct small { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sv-nl { font-style: italic; }
.sv-spec { display: block; margin-bottom: 4px; font: 900 32px/1.1 var(--sv-display); }
.sv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid currentColor; border-radius: 999px; text-decoration: none; }
.sv-tags a:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.sv-swatch { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.sv-swatch figure { margin: 0; width: 78px; text-align: center; }
.sv-swatch i { display: block; width: 64px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 55%, transparent); }
.sv-swatch figcaption { margin-top: 8px; font-size: 14px; line-height: 1.35; }
.sv-meter { position: relative; height: 28px; margin: 22px 0 6px; border-radius: 999px; background: linear-gradient(90deg, #000, #fff); box-shadow: 0 0 0 2px currentColor; }
.sv-meter i { position: absolute; top: -8px; bottom: -8px; width: 4px; margin-left: -2px; border-radius: 2px; background: currentColor; }
.sv-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
:where(.sv-rec) .sv-ends { margin: 0; }

/* rules: arch-topped tiles in the earth tones */
.sv-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sv-rule { padding: 34px 26px 24px; border-radius: 160px 160px 24px 24px / 70px 70px 24px 24px; background: var(--sv-grain-dark), var(--sv-tile); color: var(--sv-cr); }
.sv-rule:nth-child(3n+1) { --sv-tile: var(--sv-or); }
.sv-rule:nth-child(3n+2) { --sv-tile: var(--sv-av); }
.sv-rule:nth-child(3n) { --sv-tile: var(--sv-br); }
.sv-rules > .sv-rule:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sv-rule h3 { margin: 0 0 12px; text-align: center; font: 900 clamp(26px, 3vw, 32px)/1.05 var(--sv-display); }
.sv-rule__one + .sv-rule__one { margin-top: 16px; padding-top: 16px; border-top: 2px solid color-mix(in srgb, var(--sv-cr) 35%, transparent); }
.sv-rule__one p { margin: 8px 0 0; }
.sv-k { display: inline-block; padding: 2px 12px; border: 2px solid var(--sv-cr); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-ev { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; }

/* what stands behind it */
.sv-firm { font-weight: 700; }
.sv-note { padding: 16px 20px; border-radius: 20px; border: 2px solid color-mix(in srgb, currentColor 45%, transparent); }
.sv-note b { display: block; font: 900 20px/1.2 var(--sv-display); margin-bottom: 4px; }
.sv-rt { margin-top: 12px; }
.sv-rt thead th { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }

/* often confused with: cream arch tiles on the band */
.sv-conf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.sv-conf > a, .sv-conf > div { display: block; padding: 34px 26px 26px; border-radius: 160px 160px 24px 24px / 70px 70px 24px 24px; background: var(--sv-grain-dark), var(--sv-cr); color: var(--sv-br); text-decoration: none; }
.sv-conf > a:hover { background: var(--sv-grain-light), var(--sv-mu); }
.sv-conf b { display: block; text-align: center; font: 900 clamp(28px, 3.4vw, 36px)/1.05 var(--sv-display); }
.sv-conf i { display: block; margin: 6px 0 12px; text-align: center; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sv-conf span { display: block; }

/* use it */
.sv-use { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-bottom: 22px; }
.sv-use > a { display: block; min-height: 44px; padding: 20px 24px; border-radius: 28px; background: var(--sv-grain-dark), var(--sv-br); color: var(--sv-cr); text-decoration: none; }
.sv-use > a:hover { background: var(--sv-grain-dark), var(--sv-or); }
.sv-use b { display: block; margin-bottom: 4px; font: 900 24px/1.15 var(--sv-display); }
.sv-mach { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.sv-mach span { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sv-mach a { display: inline-flex; align-items: center; min-height: 44px; }

/* the foot: the arch setting into the ground */
.sv-foot { background: var(--sv-grain-dark), var(--sv-cr); }
.sv-sky--set { height: clamp(110px, 16vw, 190px); }
.sv-arch--set { width: clamp(300px, 48vw, 560px); bottom: -22%; }
.sv-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin: 0; padding: 28px 16px 40px; background: var(--sv-grain-dark), var(--sv-br); color: var(--sv-cr); position: relative; z-index: 1; --sv-line: var(--sv-mu); }
.sv-foot__links a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 700px) {
  .sv-hero { min-height: 0; }
  .sv-hero .sv-sky { flex: none; height: clamp(240px, 70vw, 380px); min-height: 0; }
  .sv-meta { grid-template-columns: 1fr 1fr; }
  .sv-rules { grid-template-columns: 1fr; }
  .sv-ct th { width: 34%; }
}
@media (max-width: 460px) {
  .sv-meta { grid-template-columns: 1fr; }
  .sv-ct, .sv-ct tbody, .sv-ct tr, .sv-ct th, .sv-ct td { display: block; width: auto; }
  .sv-ct th { border-bottom: 0; padding-bottom: 0; }
  .sv-ct td { padding-top: 4px; }
  .sv-ends span:nth-child(2) { display: none; }
  /* the research table keeps its three columns in the panel without scrolling */
  .sv-rt th, .sv-rt td { padding-inline: 5px; }
}
@media (forced-colors: active) {
  .sv-rule, .sv-conf > a, .sv-use > a, .sv-dx, .sv-refuse, .sv-note { border: 2px solid CanvasText; }
}