/* ==========================================================================
   Varinta — styles.css
   Static site. No build step. No dependencies. No JavaScript.

   NO ANIMATION RULE
   There are no transitions, transforms, keyframes, scroll effects, or sticky
   elements anywhere in this file. The only state change on an interactive
   element is a flat color change on :hover and :focus-visible. Nothing on
   this site moves. See README.md → Design system for why.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PALETTE

   Three palettes. ONE is active (Graphite & Brass, below). To switch:
   comment out the active :root block by wrapping it in slash-star / star-slash,
   then delete the comment markers around the block you want. Nothing else in
   this file needs to change — every color comes from these variables.

   Contrast ratios below were measured against --color-bg (WCAG 2.1).
   -------------------------------------------------------------------------- */

/* ---------- Palette 1 — "Graphite & Brass" (ACTIVE) ----------
   Dark graphite paper, parchment ink, aged brass accent.          */
:root {
  --color-bg:          #12141a;  /* page background */
  --color-surface:     #1b1e26;  /* recessed panels, form fields */
  --color-rule:        #2a2e38;  /* 1px hairline rules */
  --color-rule-strong: #3a3f4c;  /* dashed placeholder outlines */
  --color-text:        #e8e4da;  /* parchment body text — 14.50:1 on bg */
  --color-muted:       #9a9daa;  /* secondary text —      6.82:1 on bg */
  --color-accent:      #8b5e34;  /* aged brass. RULES AND BORDERS ONLY:
                                    3.29:1 on bg, too low for body text. */
  --color-link:        #b07a45;  /* brass, lightened for text — 5.01:1 on bg,
                                    4.54:1 on --color-surface. Passes AA. */
  --color-link-hover:  #d0a070;  /* hover/focus — 8.09:1 on bg */
  --color-on-accent:   #12141a;  /* text on a filled brass surface */
}

/* ---------- Palette 2 — "Oxblood" ----------
   Same graphite paper; the brass is replaced by a deep oxblood red.
   NOTE: the natural link red for this palette, #b04848, measures only
   3.39:1 on the background and fails AA for body-size text, so the link
   token below is lightened to #c86a6a (5.02:1). #b04848 is kept as the
   structural border accent, where 3:1 is sufficient.

:root {
  --color-bg:          #12141a;
  --color-surface:     #1b1e26;
  --color-rule:        #2a2e38;
  --color-rule-strong: #3a3f4c;
  --color-text:        #e8e4da;
  --color-muted:       #9a9daa;
  --color-accent:      #7a2b2b;
  --color-link:        #c86a6a;
  --color-link-hover:  #e09090;
  --color-on-accent:   #12141a;
}
---------------------------------------------------- */

/* ---------- Palette 3 — "Ivory" ----------
   Light inverse escape hatch: parchment paper, graphite ink, the same brass.
   Use if the dark site ever reads as too severe for a given audience.

:root {
  --color-bg:          #f4f1ea;
  --color-surface:     #eae6dc;
  --color-rule:        #d5cfc2;
  --color-rule-strong: #b8b1a1;
  --color-text:        #1c1b19;
  --color-muted:       #5c574f;
  --color-accent:      #8b5e34;
  --color-link:        #7a5126;
  --color-link-hover:  #4e3418;
  --color-on-accent:   #f4f1ea;
}
---------------------------------------------------- */

/* --------------------------------------------------------------------------
   Type and scale tokens (palette-independent)
   -------------------------------------------------------------------------- */
:root {
  --font-serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  --measure:    66ch;    /* 60–70 character line length */
  --width-page: 60rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;    /* section padding, mobile */
  --space-8: 5rem;    /* section padding, desktop */
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* No smooth scrolling. Jumps are instant. */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;   /* 17px mobile */
  line-height: 1.6;
  font-variant-numeric: oldstyle-num proportional-nums;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48em) {
  body { font-size: 1.125rem; }  /* 18px desktop */
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h1 { font-size: 2rem; letter-spacing: -0.005em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1875rem; font-weight: 600; }

@media (min-width: 48em) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 1.75rem; }
}

p, ul, ol, dl { margin: 0 0 var(--space-4); }

strong { font-weight: 600; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}
a:hover,
a:focus { color: var(--color-link-hover); }

:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

hr,
.rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--color-muted);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 40em) {
  .container { padding-inline: var(--space-6); }
}

.section { padding-block: var(--space-7); }

@media (min-width: 48em) {
  .section { padding-block: var(--space-8); }
}

/* A hairline rule between every stacked block. This is the only structure
   on the site — there are no cards, boxes, or shadows. */
.section + .section,
.hero + .section { border-top: 1px solid var(--color-rule); }

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }

.lead {
  font-size: 1.125rem;
  color: var(--color-muted);
  max-width: var(--measure);
}

@media (min-width: 48em) {
  .lead { font-size: 1.25rem; }
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  text-decoration: underline;
  z-index: 10;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Header — static, top of page. Never sticky, never fixed.
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
}

.wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: 0.08em;
  color: var(--color-text);
  text-decoration: none;
}

.site-header .wordmark {
  font-size: 1.7875rem; /* 30% larger than the footer wordmark */
}
.wordmark:hover,
.wordmark:focus { color: var(--color-link); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a:focus { color: var(--color-text); }

.site-nav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* Below 640px the nav stacks as a plain, always-visible list.
   There is no hamburger and no toggle. */
@media (max-width: 39.99em) {
  .site-header__inner {
    display: block;
    padding-block: var(--space-4);
  }
  .wordmark { display: block; margin-bottom: var(--space-3); }
  .site-nav ul {
    display: block;
  }
  .site-nav li { margin-bottom: var(--space-2); }
  .site-nav a { display: inline-block; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--space-7) var(--space-7); }

@media (min-width: 48em) {
  .hero { padding-block: var(--space-8) var(--space-8); }
}

.hero h1 { max-width: 22ch; }

/* --------------------------------------------------------------------------
   Call to action — one per page. A text link, not a button.
   -------------------------------------------------------------------------- */
.cta {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cta:hover,
.cta:focus { color: var(--color-link-hover); }

/* --------------------------------------------------------------------------
   Two-column definition lists — label left, text right.
   The prospectus layout. Used instead of card grids.
   -------------------------------------------------------------------------- */
.deflist {
  margin: 0;
  max-width: 52rem;
}

.deflist > div {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.deflist > div:last-child { border-bottom: 1px solid var(--color-rule); }

@media (min-width: 44em) {
  .deflist > div {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--space-6);
    align-items: start;
  }
}

.deflist dt {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

@media (min-width: 44em) {
  .deflist dt { margin-bottom: 0; }
}

.deflist dd {
  margin: 0;
  color: var(--color-muted);
  max-width: var(--measure);
}
.deflist dd > :last-child { margin-bottom: 0; }

/* Narrower label column for short contact facts. */
.deflist--facts > div { padding-block: var(--space-4); }
@media (min-width: 44em) {
  .deflist--facts > div { grid-template-columns: 11rem 1fr; }
}
.deflist--facts dt {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}
.deflist--facts dd { color: var(--color-text); }

/* --------------------------------------------------------------------------
   Numbered steps — plain, no circles, no timeline graphic
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.steps > li {
  counter-increment: step;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-rule);
}
.steps > li:last-child { border-bottom: 1px solid var(--color-rule); }
.steps > li > :last-child { margin-bottom: 0; }

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: var(--space-2);
}

.steps h3 { margin-bottom: var(--space-3); }
.steps p { color: var(--color-muted); }

/* --------------------------------------------------------------------------
   Plain lists
   -------------------------------------------------------------------------- */
.list-plain {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}
.list-plain > li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
}
.list-plain > li:last-child { border-bottom: 1px solid var(--color-rule); }
.list-plain strong { color: var(--color-text); }

/* Ordered lists inside prose */
.prose ol { padding-left: 1.25rem; color: var(--color-muted); }
.prose ol li { margin-bottom: var(--space-3); }
.prose ul { padding-left: 1.25rem; }

/* --------------------------------------------------------------------------
   Placeholder blocks — visible only until Robert fills them in.
   Deliberately unstyled and plain so they never read as design.
   -------------------------------------------------------------------------- */
.placeholder {
  border: 1px dashed var(--color-rule-strong);
  padding: var(--space-5);
  margin-top: var(--space-6);
  max-width: 44rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
}
.placeholder > :last-child { margin-bottom: 0; }
.placeholder__tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Letter (About page)
   -------------------------------------------------------------------------- */
.letter { max-width: var(--measure); }
.letter p { margin-bottom: var(--space-5); }

.signature {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.signature__name {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  margin: 0 0 var(--space-1);
}
.signature__title {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form { max-width: 32rem; }

.field { margin-bottom: var(--space-5); }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
}

.field .hint {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-rule-strong);
  border-radius: 0;
  padding: var(--space-3);
}

.field input:focus,
.field textarea:focus { border-color: var(--color-link); }

.field textarea { min-height: 9rem; resize: vertical; }

/* Flat rectangular submit. 1px accent border, accent text, fills on hover. */
.btn {
  display: inline-block;
  background: transparent;
  color: var(--color-link);
  border: 1px solid var(--color-link);
  border-radius: 0;
  padding: var(--space-3) var(--space-6);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.btn:hover,
.btn:focus {
  background: var(--color-link);
  color: var(--color-on-accent);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-6);
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 44em) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.site-footer .wordmark {
  font-size: 1.125rem;
  display: block;
  margin-bottom: var(--space-2);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer a { color: var(--color-muted); }
.site-footer a:hover,
.site-footer a:focus { color: var(--color-text); }

.site-footer__legal {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-size: 0.875rem;
}

/* Utilities */
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--space-6); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}