/* ===========================================================================
   DECKLE — brochure site
   ---------------------------------------------------------------------------
   Implements docs/brochure-site-plan.md §12 verbatim. Every number here comes
   from that spec; do not "improve" one without changing the spec first.

   Hard rules, enforced throughout:
     · border-radius: 0 everywhere. No exceptions.
     · No box-shadow anywhere. Depth is hairlines + paper-sunk.
     · Nothing is centred except the 404 page.
     · Colour only from the six tokens below.
     · The accent (rubric) appears in exactly three places: specimen/plate
       numbers, prices, and the active/hovered nav item.
   =========================================================================== */

/* ---------- Fonts: self-hosted variable woff2 ---------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens — §12.3 / §12.4 / §12.5 ------------------------------- */

:root {
  /* Colour. Six. Contrast on paper: ink 15.6:1, ink-muted 4.77:1,
     rubric 4.53:1 (AA — never below 16px). */
  --paper:       #F4F1EA;
  --paper-sunk:  #EBE7DE;
  --ink:         #1A1917;
  --ink-muted:   #6E6A62;
  --rule:        #D6D1C4;
  --rubric:      #C4402A;

  /* Type families */
  --display: 'Fraunces', 'Times New Roman', serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale. The 148 ↔ 12 gap is the signature — do not soften it. */
  --t-display-xl: clamp(3.5rem, 9.6vw, 9.25rem);   /*  56 → 148 */
  --t-display-l:  clamp(2.25rem, 4.6vw, 4.5rem);   /*  36 →  72 */
  --t-display-m:  clamp(1.75rem, 2.6vw, 2.5rem);   /*  28 →  40 */
  --t-lede:       clamp(1.25rem, 1.7vw, 1.625rem); /*  20 →  26 */
  --t-body:       1.0625rem;                        /*  17      */
  --t-caption:    0.8125rem;                        /*  13      */
  --t-label:      0.75rem;                          /*  12      */

  /* Spacing — only these seven values exist. */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 104px; --s7: 168px;

  /* Grid */
  --maxw: 1360px;
  --margin: var(--s4);
  --gutter: var(--s3);

  /* Motion — §12.7. Three movements exist on this site. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  :root {
    --margin: 20px;
    --t-body: 1rem;
    --t-label: 0.6875rem;
  }
}

/* ---------- Reset ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; border-radius: 0; }
svg { display: block; }

/* Radius and shadow are banned globally. This is the enforcement. */
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--rubric);
  outline-offset: 3px;
}

::selection { background: var(--ink); color: var(--paper); }

/* ---------- Type styles — §12.4 ------------------------------------------ */

/* Optical size, deliberately held below the rendered size.
   ---------------------------------------------------------------------------
   Fraunces' opsz axis runs 9–144, and the convention is to match it to the
   point size you are setting. We do not, at the top end, and the reason is
   legibility: at opsz 144 the hairlines thin out to the point of disappearing
   on paper-coloured background. Capping the display sizes at opsz 72 keeps the
   high-contrast display character while giving the thin strokes enough weight
   to survive.

   Raising wght does NOT fix this — in a high-contrast serif the thick strokes
   grow faster than the thin ones, so more weight means more contrast. Tested
   side by side before choosing. Lowering opsz is the only lever that works.

   Below display sizes, opsz tracks the rendered size normally. */
.display-xl,
.display-l,
.display-m {
  font-family: var(--display);
  font-weight: 400;
  /* WONK 1 is the ownable detail. Self-hosting is what makes it available. */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 72, 'wght' 400;
  margin: 0;
  text-wrap: balance;
}

.display-xl { font-size: var(--t-display-xl); line-height: 0.92; letter-spacing: -0.03em;
              font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 72, 'wght' 400; }
.display-l  { font-size: var(--t-display-l);  line-height: 1;    letter-spacing: -0.02em;
              font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48, 'wght' 400; }
.display-m  { font-size: var(--t-display-m);  line-height: 1.1;  letter-spacing: -0.02em;
              font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 36, 'wght' 400; }

.lede {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24, 'wght' 400;
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
  max-width: 34ch;
}

.body   { font-size: var(--t-body); line-height: 1.6; max-width: 62ch; margin: 0; }
.body + .body { margin-top: var(--s3); }

/* Inline links inside running text need an affordance. A hairline underline
   is the only one available to us — there is no link colour in the palette,
   because the accent is reserved for three things (§12.2⑤). */
.body a, .faq__a a, .lede a {
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms var(--ease);
}
.body a:hover, .faq__a a:hover, .lede a:hover { border-bottom-color: var(--ink); }

.caption {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'wght' 400;
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--ink-muted);
}

.label {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0;
}

/* Rubric — the accent lives here and nowhere else. §12.2⑤ */
.rubric { color: var(--rubric); }

.price {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--rubric);
  letter-spacing: 0.02em;
}

/* ---------- Grid — §12.5 -------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;   /* centres the container, not the content inside it */
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* The asymmetric 4/8 split. The left rail is mostly empty — that emptiness
   is a decision, not an unfilled slot. */
.split { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.rail  { grid-column: 1 / 5; }
.field { grid-column: 5 / 13; }

@media (max-width: 899px) {
  .rail  { grid-column: 1 / -1; }
  .field { grid-column: 1 / -1; }
}

section { padding-block: var(--s7); }
@media (max-width: 767px) { section { padding-block: var(--s5); } }

/* Hairline — the only separator. Never a background-colour change. */
.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
  transform-origin: left center;
}

/* ---------- Header -------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
}

.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 36, 'wght' 400;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.nav { display: flex; gap: var(--s3); align-items: baseline; }

.nav a {
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--rubric);
  border-bottom-color: var(--rubric);
}

/* ---------- Buttons — text + rule, or a 1px box. Never a pill. ----------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color 250ms var(--ease), color 250ms var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: transparent; color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.link-under {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color 200ms var(--ease);
}
.link-under:hover { border-bottom-color: var(--ink); }

/* ---------- Specimen index (landing grid) — §12.2① ----------------------- */

.specimen-list { display: grid; gap: 0; }

.specimen {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding-block: var(--s5);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.specimen:last-child { border-bottom: 1px solid var(--rule); }

.specimen__meta { grid-column: 1 / 5; }
.specimen__body { grid-column: 5 / 13; }

.specimen__figure {
  display: block;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  overflow: hidden;
  margin-bottom: var(--s3);
}
.specimen__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform 400ms var(--ease);
}
.specimen:hover .specimen__figure img { transform: scale(1.01); }

.specimen__name {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s1);
}

@media (max-width: 899px) {
  .specimen__meta, .specimen__body { grid-column: 1 / -1; }
  .specimen__meta { margin-bottom: var(--s3); }
}

/* ---------- Plate captions — §12.2② -------------------------------------- */

figure { margin: 0; }

.plate {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  margin-top: var(--s2);
  flex-wrap: wrap;
}
.plate__no {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rubric);
  white-space: nowrap;
}
.plate__name {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'wght' 400;
  font-size: var(--t-caption);
  color: var(--ink-muted);
}

.figure-frame {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.figure-frame img { width: 100%; display: block; }
.figure-frame--wide img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.figure-frame--tall img { aspect-ratio: 4 / 5;  object-fit: cover; object-position: top center; }

/* Full-bleed: the one place the grid is allowed to break. §12.8
   It is a direct child of <main>, so plain width:100% already spans the page.
   The usual 100vw + translateX trick would shift it left by the scrollbar
   width, because 100vw counts the scrollbar and 100% does not. */
.bleed {
  width: 100%;
  background: var(--paper-sunk);
  border-block: 1px solid var(--rule);
}
.bleed img {
  width: 100%;
  max-height: 82vh;
  object-fit: cover;
  object-position: top center;
}

/* ---------- Spec table — §12.2③ ------------------------------------------ */

.spec { width: 100%; border-collapse: collapse; text-align: left; }
.spec caption { text-align: left; }
.spec tr { border-top: 1px solid var(--rule); }
.spec tr:last-child { border-bottom: 1px solid var(--rule); }
.spec tbody tr:nth-child(even) { background: var(--paper-sunk); }

.spec th {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding: var(--s2) var(--s2) var(--s2) var(--s1);
  vertical-align: baseline;
  width: 38%;
  white-space: nowrap;
}
.spec td {
  font-family: var(--display);
  font-variation-settings: 'opsz' 20, 'wght' 400;
  font-size: 1.0625rem;
  padding: var(--s2) var(--s1);
  vertical-align: baseline;
}

@media (max-width: 599px) {
  .spec th { white-space: normal; width: 44%; font-size: 0.6875rem; }
}

/* ---------- Numbered steps — serif numerals, never icons. §12.6 ---------- */

.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s3);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__no {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 48, 'wght' 400;
  font-size: 3rem;
  line-height: 0.9;
  color: var(--rubric);
}
.step__title { font-weight: 600; margin: 0 0 var(--s1); font-size: 1.0625rem; }

@media (max-width: 599px) {
  .step { grid-template-columns: 3rem 1fr; gap: var(--s2); }
  .step__no { font-size: 2rem; }
}

/* ---------- Points list -------------------------------------------------- */

.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.point {
  padding: var(--s4) var(--s3) var(--s4) 0;
  border-top: 1px solid var(--rule);
}
.point h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 var(--s1); }
.point p  { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }

@media (max-width: 767px) { .points { grid-template-columns: 1fr; } }

/* ---------- FAQ ----------------------------------------------------------- */

.faq { display: grid; gap: 0; }
.faq__item { border-top: 1px solid var(--rule); padding-block: var(--s3); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24, 'wght' 400;
  font-size: 1.25rem;
  margin: 0 0 var(--s1);
  letter-spacing: -0.01em;
}
.faq__a { margin: 0; color: var(--ink-muted); max-width: 62ch; }

/* ---------- Prose (legal pages) ------------------------------------------ */

.prose h2 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 28, 'wght' 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: var(--s5) 0 var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose p  { max-width: 62ch; margin: 0 0 var(--s2); }
.prose ul { max-width: 62ch; margin: 0 0 var(--s2); padding-left: 1.1em; }
.prose li { margin-bottom: var(--s1); }
.prose li::marker { color: var(--rubric); }
.prose a  { border-bottom: 1px solid var(--rule); }
.prose a:hover { border-bottom-color: var(--ink); }

/* ---------- Newsletter / contact block ----------------------------------- */

.notify { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: stretch; }
.notify input[type='email'] {
  flex: 1 1 18rem;
  font-family: var(--body);
  font-size: var(--t-body);
  padding: 13px var(--s2);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
}
.notify input::placeholder { color: var(--ink-muted); }
.notify input:focus { border-color: var(--ink); outline: none; }

/* ---------- Colophon — §12.2④ -------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: var(--s6) var(--s4);
}
.colophon__body {
  font-family: var(--display);
  font-variation-settings: 'opsz' 20, 'wght' 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0;
}
.colophon__body a { border-bottom: 1px solid var(--rule); }
.colophon__body a:hover { border-bottom-color: var(--ink); }

.colophon__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.colophon__links { display: flex; gap: var(--s3); flex-wrap: wrap; }
.colophon__links a:hover { color: var(--rubric); }

/* ---------- 404 — the only centred page ---------------------------------- */

.notfound {
  min-height: 68vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s3);
}

/* ---------- Motion — §12.7. Exactly three movements. --------------------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.rule--draw { transform: scaleX(0); }
.rule--draw.is-in { transform: scaleX(1); transition: transform 800ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .rule--draw { opacity: 1; transform: none; }
  .reveal.is-in, .rule--draw.is-in { transition: none; }
  .specimen:hover .specimen__figure img { transform: none; }
}

/* ---------- Utilities ----------------------------------------------------- */

.stack-1 > * + * { margin-top: var(--s1); }
.stack-2 > * + * { margin-top: var(--s2); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-5 > * + * { margin-top: var(--s5); }

.muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2);
  z-index: 100;
}
.skip:focus { left: 0; }