@import url("../fonts/fonts.css");

/* ============================================================
   Strathdee Williams — refined minimal, warmed.
   Light default; system-aware warm-charcoal dark.
   Palette in OKLCH, neutrals tinted toward the accent hue.
   ============================================================ */

:root {
  --paper:    oklch(0.982 0.006 78);
  --paper-2:  oklch(0.955 0.009 78);
  --ink:      oklch(0.24  0.014 62);
  --ink-2:    oklch(0.44  0.012 66);
  --ink-3:    oklch(0.51  0.011 70);
  --rule:     oklch(0.885 0.009 76);
  --green:    oklch(0.42  0.072 158);
  --green-2:  oklch(0.34  0.072 158);
  --on-green: oklch(0.985 0.008 158);
  --bronze:   oklch(0.52  0.078 68);

  --display: "Faustina", ui-serif, Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fixed steps for body, fluid for display. Ratio >= 1.25. */
  --t--1: 0.875rem;
  --t-0:  1.0625rem;
  --t-1:  clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --t-2:  clamp(1.5rem,  1.3rem  + 1vw,   2rem);
  --t-3:  clamp(2rem,    1.62rem + 1.9vw, 3rem);
  --t-4:  clamp(2.6rem,  1.85rem + 3.7vw, 4.75rem);

  /* 4pt scale, semantic names */
  --s-2xs: 4px;  --s-xs: 8px;  --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px;  --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px; --s-4xl: 96px;

  /* Measured, not guessed. 'ch' is the width of a zero, ~20% wider than the
     average character, so 65ch rendered as 83 characters per line. These are
     tuned against real character counts: ~68 for body, ~70 for 14px text. */
  --measure: 32rem;
  --measure-sm: 27rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-quart */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    oklch(0.20  0.024 62);
    --paper-2:  oklch(0.245 0.026 62);
    --ink:      oklch(0.93  0.008 78);
    --ink-2:    oklch(0.76  0.013 74);
    --ink-3:    oklch(0.63  0.014 72);
    --rule:     oklch(0.32  0.022 66);
    --green:    oklch(0.78  0.082 158);
    --green-2:  oklch(0.86  0.070 158);
    --on-green: oklch(0.18  0.012 158);
    --bronze:   oklch(0.76  0.068 70);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-0);
  line-height: 1.65;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 var(--s-md); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--green-2); }

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

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

/* ---------- shell ---------- */

.wrap {
  width: min(100% - 2 * var(--s-lg), 62rem);
  margin-inline: auto;
}
@media (min-width: 40rem) { .wrap { width: min(100% - 2 * var(--s-xl), 62rem); } }
.head .wrap { max-width: 74rem; width: min(100% - 2 * var(--s-lg), 74rem); }
@media (min-width: 40rem) { .head .wrap { width: min(100% - 2 * var(--s-xl), 74rem); } }

/* ---------- header: wordmark + one action. No hamburger. ---------- */

.head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.head[data-scrolled="true"] { border-bottom-color: var(--rule); }

.head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md);
  padding-block: var(--s-sm);
  min-height: 60px;
}

/* Wordmark: the name is supplied artwork (themed transparent PNG, alpha from
   the original's darkness). The descriptor is LIVE TEXT — at header size a raster
   descriptor sat around 6px tall and would not hold up. Text stays crisp at any
   size and honours the reader's own font settings.
   x-descriptors, not w: CSS then controls layout and the mark can shrink to fit
   rather than overflow a tight header. */
.mark { display: block; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.mark img {
  display: block;
  height: auto;
  max-height: 16px;          /* 16.961:1 -> about 271px wide */
  max-width: 100%;
  width: auto;
}
.mark__sub {
  display: block;
  margin-top: 6px;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .mark img { max-height: 13px; }
  .mark__sub { font-size: 0.625rem; letter-spacing: 0.1em; margin-top: 5px; }
  .head__in { min-height: 52px; }
  .head .wrap { width: calc(100% - 2 * var(--s-md)); }
}

.nav { display: none; gap: var(--s-lg); align-items: center; }
@media (min-width: 62rem) { .nav { display: flex; } }
.nav a {
  font-size: var(--t--1); color: var(--ink-2); text-decoration: none;
  letter-spacing: 0.01em;
}
.nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: var(--t--1);
  font-weight: 550;
  letter-spacing: 0.01em;
  padding: 11px 20px;
  border-radius: 2px;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--on-green);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--green-2); border-color: var(--green-2); color: var(--on-green); }
.btn:active { transform: translateY(1px); }
.btn--lg { font-size: var(--t-0); padding: 15px 28px; }
.btn--ghost {
  background: transparent; color: var(--green); border-color: var(--rule);
}
.btn--ghost:hover { background: transparent; border-color: var(--green); color: var(--green-2); }

/* ---------- section rhythm: a left rail carrying the running head ---------- */

.sec { padding-block: var(--s-3xl); border-top: 1px solid var(--rule); }
/* clear the sticky header when an anchor is followed */
.sec[id], .hero[id] { scroll-margin-top: 76px; }
.sec:first-of-type { border-top: 0; }
.sec--air { padding-block: var(--s-4xl); }

@media (min-width: 62rem) {
  .sec__in { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-2xl); align-items: start; }
}

.rail {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-md);
  padding-top: 0.35em;
}
@media (min-width: 62rem) { .rail { margin-bottom: 0; } }

.col { max-width: 40rem; }   /* wider than the prose measure so images keep their size */

h2 { font-size: var(--t-2); margin-bottom: var(--s-md); }
h3 { font-size: var(--t-1); margin-bottom: var(--s-xs); }

.lead { font-size: var(--t-1); line-height: 1.5; color: var(--ink); font-weight: 350; }

/* ---------- hero ---------- */

/* Hero shares the section grid so every left edge on the page lines up. */
.hero { padding-block: clamp(var(--s-2xl), 9vh, var(--s-3xl)) var(--s-2xl); }
/* the image now carries the break, so the first section needn't re-add a rule */
.heroshot + .sec { border-top: 0; padding-top: 0; }
@media (min-width: 62rem) {
  .hero__in { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-2xl); align-items: start; }
}
.hero__rule {
  display: none;
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0.9em 0 0;
}
@media (min-width: 62rem) { .hero__rule { display: block; } }

.hero__pos {
  font-family: var(--display);
  font-size: var(--t-1);
  color: var(--bronze);
  margin: 0 0 var(--s-lg);
  font-weight: 500;
}
.hero h1 { font-size: var(--t-4); max-width: 14ch; margin-bottom: var(--s-lg); }
.hero__sub {
  font-size: var(--t-1);
  color: var(--ink-2);
  max-width: 46ch;   /* needs ~501px; runs to one line on desktop, wraps when narrow */
  line-height: 1.45;
  margin-bottom: var(--s-2xl);
}

/* ---------- hero image: full bleed, aspect locked so nothing shifts ---------- */

/* On fractional-DPI displays (Windows at 125%/150%) a width:100% image can round
   up past the document by a sub-pixel and trigger a horizontal scrollbar.
   Clipping on the figure absorbs that. Scoped here on purpose: `overflow` on
   body or html would break the sticky header. */
/* Full-bleed bands. Each instance supplies its own two ratios, so the art
   direction is declared with the image rather than baked in here. */
.band { width: 100%; max-width: 100%; overflow: hidden; }
.band img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--ar-narrow);
  object-fit: cover;
  background: var(--paper-2);
}
@media (min-width: 46rem) {
  .band img { aspect-ratio: var(--ar-wide); }
}
/* these photographs are warm and bright; ease them back so they don't glare at night */
@media (prefers-color-scheme: dark) {
  .band img { filter: brightness(0.86) saturate(0.95); }
}

.heroshot { --ar-narrow: 1422 / 800; --ar-wide: 1942 / 809; margin: 0 0 var(--s-3xl); }
.band--vista { --ar-narrow: 1672 / 904; --ar-wide: 1672 / 697; margin: var(--s-3xl) 0 0; }

/* ---------- supporting image, held to the content column ---------- */

/* Ratio comes from each image's own width/height attributes rather than a
   hard-coded value here, so images of different shapes can share this class
   without shifting layout as they load. */
.shot { margin: var(--s-xl) 0; max-width: 100%; overflow: hidden; }
.shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--paper-2);
}
@media (prefers-color-scheme: dark) {
  .shot img { filter: brightness(0.88) saturate(0.95); }
}

/* ---------- the pull quote: metaphor, testimonial ---------- */

.quote {
  font-family: var(--display);
  font-size: var(--t-3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 0 var(--s-lg);
  font-weight: 450;
}
.quote em { font-style: italic; color: var(--bronze); }

/* Real testimonials run long, so this is set at reading size rather than the
   display size a one-line pull quote could carry. */
.said {
  font-family: var(--display);
  font-size: var(--t-1);
  font-style: italic;
  line-height: 1.45;
  max-width: var(--measure);
  margin: 0 0 var(--s-sm);
  padding-left: var(--s-lg);
  border-left: 1px solid var(--bronze);
  font-weight: 400;
  color: var(--ink);
}
/* space between one testimonial and the next, attributed or not */
.said + .said,
.attrib + .said { margin-top: var(--s-2xl); }
.said + .attrib {
  font-size: var(--t--1);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-left: var(--s-lg);
  margin: 0;
}

/* ---------- two roles: prose columns, hairline between. Not cards. ---------- */

.roles { display: grid; gap: var(--s-xl); margin-top: var(--s-lg); }
@media (min-width: 48rem) {
  .roles { grid-template-columns: 1fr 1fr; gap: var(--s-2xl); }
  .roles > div + div { border-left: 1px solid var(--rule); padding-left: var(--s-2xl); }
}
.roles p { font-size: var(--t-0); color: var(--ink-2); }
.roles h3 { color: var(--ink); }

.aside {
  max-width: var(--measure-sm);
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--rule);
  font-size: var(--t--1);
  color: var(--ink-3);
}

/* ---------- the honest list ---------- */

.fits { list-style: none; margin: var(--s-lg) 0 0; padding: 0; max-width: var(--measure); }
.fits li {
  padding-block: var(--s-md);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
.fits li:first-child { border-top: 0; padding-top: 0; }
.fits strong { color: var(--ink); font-weight: 550; }

.turn {
  margin-top: var(--s-xl);
  padding-top: var(--s-lg);
  border-top: 2px solid var(--ink);
  max-width: var(--measure);
}
.turn p { font-family: var(--display); font-size: var(--t-1); line-height: 1.4; color: var(--ink); }

/* ---------- credentials ---------- */

/* Grouped credentials: four labelled sets rather than one long list, so the
   block reads as a reference someone can scan instead of a stack of claims. */
.creds-head {
  font-size: var(--t--1);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--s-xl) 0 var(--s-xs);
}
.creds-head + .creds { margin-top: 0; }

.creds { list-style: none; margin: var(--s-lg) 0 0; padding: 0; max-width: var(--measure-sm); }
/* Absolute-positioned marker with a hanging indent, NOT a two-column grid.
   Grid makes every inline child its own grid item, so any <em> inside an item
   breaks onto its own row and the text wraps one word per line. */
.creds li {
  font-size: var(--t--1);
  color: var(--ink-2);
  padding-block: var(--s-xs);
  padding-left: 1.15rem;
  position: relative;
  line-height: 1.55;
}
/* A small drawn square rather than a dash: the prose already uses em dashes, so
   a typographic mark competed with them. Drawn, not a glyph, so its weight and
   alignment are exact. */
.creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s-xs) + 0.62em);
  width: 4px;
  height: 4px;
  background: var(--bronze);
}

/* ---------- form ---------- */

.form { max-width: 34rem; margin-top: var(--s-lg); }
.field { margin-bottom: var(--s-lg); }
.field label {
  display: block;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-2xs);
}
.field .why { display: block; font-size: var(--t--1); font-weight: 400; color: var(--ink-3); margin-bottom: var(--s-xs); max-width: 46ch; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: var(--t-0);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 11px 13px;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field input:focus, .field textarea:focus { background: var(--paper); border-color: var(--green); }
.field textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--bronze); }
.err { display: none; font-size: var(--t--1); color: var(--bronze); margin-top: var(--s-2xs); }
.field[data-invalid="true"] .err { display: block; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note { font-size: var(--t--1); color: var(--ink-3); max-width: 46ch; margin-top: var(--s-md); }

.msg { padding: var(--s-lg); border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-2); max-width: 34rem; }
.msg h3 { font-size: var(--t-1); margin-bottom: var(--s-xs); }
.msg p { color: var(--ink-2); }

/* ---------- long-form legal text ---------- */

.legal h2 { font-size: var(--t-1); margin: var(--s-xl) 0 var(--s-sm); }
.legal h3 { font-size: var(--t-0); font-family: var(--body); font-weight: 650; letter-spacing: 0.01em; margin: var(--s-lg) 0 var(--s-xs); color: var(--ink); }
.legal h4 { font-size: var(--t--1); font-family: var(--body); font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: var(--s-md) 0 var(--s-2xs); }
.legal p { font-size: var(--t--1); color: var(--ink-2); line-height: 1.65; }
.legal ul { margin: 0 0 var(--s-md); padding-left: 1.15em; max-width: var(--measure); }
.legal li { font-size: var(--t--1); color: var(--ink-2); margin-bottom: var(--s-2xs); }
.legal li::marker { color: var(--ink-3); }
.legal li p { margin-bottom: var(--s-2xs); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal > p:first-of-type { color: var(--ink-3); font-size: var(--t--2); letter-spacing: 0.03em; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--rule); padding-block: var(--s-2xl) var(--s-xl); margin-top: var(--s-2xl); }
.foot__in { display: grid; gap: var(--s-lg); }
@media (min-width: 48rem) { .foot__in { grid-template-columns: 1fr auto; align-items: end; } }
.foot p { font-size: var(--t--1); color: var(--ink-3); margin-bottom: var(--s-2xs); }
.foot a { color: var(--ink-2); }

/* Land acknowledgement. lək̓ʷəŋən uses U+0313 (combining comma above) and
   U+02B7, which are outside the Latin subsets of the self-hosted faces, so the
   stack names fonts with real IPA coverage before falling back. Without this the
   browser can render the word as boxes, which would be worse than omitting it. */
.foot__land {
  margin: var(--s-lg) 0 0;
  padding-top: var(--s-md);
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  font-family: var(--body), "Segoe UI", "Gentium Plus", "Charis SIL",
               "Lucida Sans Unicode", "Arial Unicode MS", sans-serif;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---------- motion: quiet ---------- */

/* Content is visible by default. Only a page that has proven it can run JS is
   allowed to hide it — otherwise a script failure blanks the whole site. */
.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .rise.in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}