/* Classical — the design system from the Claude Design handoff
   (_ds/classical-09611682-…). Scoped to `.classical` on purpose: base.html
   still carries the Industry system (Barlow, blue, square) that every other
   page is drawn in, and the two use the same variable names with different
   values. Scoping lets one page change without the other twelve moving.
   To adopt Classical site-wide, move the token block to :root and delete the
   `.classical ` prefixes.

   The upstream file opens with @import fonts.googleapis.com. That is dropped:
   it hands the visitor's IP to a third party on every page load, and these are
   federal contractors. Cormorant Garamond and Lora are vendored in
   static/fonts as variable woff2 — one file per family and subset, because
   Google serves the same bytes for 400 and 600. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/cormorant-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/cormorant-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lora;font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/lora-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/lora-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- tokens -------------------------------------------------------------- */
.classical{
  --color-bg:#f3f2f2; --color-surface:#eae9e9; --color-text:#201f1d;
  --color-accent:#b68235; --color-accent-2:#ac803e;
  --color-divider:color-mix(in srgb,#201f1d 16%,transparent);

  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7; --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6; --color-neutral-500:#9b9797; --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141; --color-neutral-900:#2d2b2b;

  --color-accent-100:#fff3e4; --color-accent-200:#ffe3bf; --color-accent-300:#facb8d;
  --color-accent-400:#e1ad66; --color-accent-500:#c28d41; --color-accent-600:#a06f24;
  --color-accent-700:#7d5411; --color-accent-800:#5a3b0a; --color-accent-900:#3a270d;

  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-heading-weight:600;
  --font-body:Lora,Georgia,serif;

  --space-1:4.6px; --space-2:9.2px; --space-3:13.8px;
  --space-4:18.4px; --space-6:27.6px; --space-8:36.8px;

  --radius-sm:2px; --radius-md:4px; --radius-lg:7px;

  --shadow-sm:0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);

  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
}

/* base.html wraps every page in `main.wrap` (max-width 1060, padded). The
   Classical page draws its own full-bleed rules and sticky nav, so the outer
   container has to stand down for this one page. */
body:has(.classical){background:#f3f2f2}
main:has(.classical){max-width:none;padding:0;padding-bottom:0}

/* --- typography ---------------------------------------------------------- */
.classical h1,.classical h2,.classical h3,.classical h4{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  line-height:1.12;letter-spacing:-.015em}
.classical a{color:var(--color-accent);text-underline-offset:3px}
.classical a:hover{color:var(--color-accent-700)}
.classical :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.classical ::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
/* Upstream uses font-feature-settings:"tnum"; the semantic property is the
   same figures and survives font fallback. */
.classical .num{font-variant-numeric:tabular-nums}

/* --- layout -------------------------------------------------------------- */
.classical .wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:40px}
.classical .step{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);
  gap:64px;align-items:start}
.classical .cols-2{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:72px}
.classical .field-row{display:flex;gap:12px;align-items:stretch}
.classical .hero-h1{font-size:clamp(40px,6.4vw,76px)}

@media(max-width:900px){
  .classical .step,.classical .cols-2{grid-template-columns:minmax(0,1fr);gap:32px}
  .classical .field-row{flex-direction:column}
  .classical .wrap{padding-inline:24px}
}

/* --- rules --------------------------------------------------------------- */
.classical .hr{height:1px;border:0;margin:var(--space-4) 0;background:var(--color-divider)}

/* --- buttons ------------------------------------------------------------- */
.classical .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:14px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3) * 1.2);
  border-radius:var(--radius-md)}
.classical .btn svg{display:block}
.classical .btn:disabled{opacity:.45;cursor:not-allowed}
.classical .btn-primary{color:var(--color-accent);border-color:var(--color-accent);background:transparent}
.classical .btn-primary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}
.classical .btn-primary:active{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.classical .btn-secondary{border-color:var(--color-divider);color:var(--color-text)}
.classical .btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.classical .btn-secondary:active{background:color-mix(in srgb,var(--color-text) 14%,transparent)}
.classical .btn-block{width:100%;margin-top:var(--space-2)}

/* --- forms --------------------------------------------------------------- */
.classical .field > label{display:block;font-size:12px;margin:0 0 5px;
  color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.classical .input{width:100%;min-height:36px;padding:6px 10px;font:inherit;
  font-size:14px;color:var(--color-text);caret-color:var(--color-accent);
  background:transparent;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.classical .input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.classical .input:focus-visible{border-color:var(--color-accent);outline-offset:0}
/* The dropzone hides a real file input; without this the picker is unreachable
   by keyboard. Clip rather than display:none so it stays focusable. */
.classical .file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.classical .dropzone:focus-within{border-color:var(--color-accent);
  outline:2px solid var(--color-accent);outline-offset:2px}

/* --- cards --------------------------------------------------------------- */
.classical .card{display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-3);border-radius:var(--radius-md);background:transparent;
  border:1px solid var(--color-divider);margin:0}
.classical .card-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-accent)}
.classical .card-body{margin:0;font-size:13px;opacity:.8;flex:1}
.classical .card-meta{display:flex;align-items:center;gap:6px;font-size:11px;
  color:color-mix(in srgb,var(--color-text) 50%,transparent)}

/* --- tags ---------------------------------------------------------------- */
.classical .tag{display:inline-flex;align-items:center;font-size:11px;
  letter-spacing:.02em;padding:3px 10px;border:0;background:transparent;
  border-radius:calc(var(--radius-md) * .75)}
.classical .tag-neutral{background:var(--color-neutral-100);color:var(--color-neutral-800)}
.classical .tag-outline{border:1px solid var(--color-accent);color:var(--color-accent)}

/* --- navigation ---------------------------------------------------------- */
.classical .nav{display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider)}
.classical .nav-brand{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:18px;margin-right:auto}
.classical .nav a{color:inherit;text-decoration:none;font-size:14px}
.classical .nav a:hover,.classical .nav a[aria-current=page]{color:var(--color-accent)}

/* --- tables -------------------------------------------------------------- */
.classical .table{width:100%;border-collapse:collapse;font-size:14px;margin:0}
.classical .table td{padding:var(--space-2);border-bottom:1px solid var(--color-divider);
  vertical-align:top}
.classical .table tbody tr:hover{background:color-mix(in srgb,var(--color-text) 4%,transparent)}
.classical .dropzone[data-over]{border-color:var(--color-accent);
  background:color-mix(in srgb,var(--color-accent) 8%,transparent)}

/* base.html flashes render as a direct child of the un-padded main. */
main:has(.classical) > .flash{max-width:1080px;margin:14px auto}