/*
  jmurphyau.com: one stylesheet for every page, no build step. Written with AI (Claude Code), James directing.

  Proportion: every length is a power of φ, the golden ratio. The steps are written out as numbers for
  any browser, then computed from φ with sqrt() and pow() where the browser has them.

  Tiers: the base rules work in any browser. Each newer feature sits behind @supports (or a check in the
  script) and only adds to what is there. A modern function inside a custom property or next to var()
  is always behind @supports: such a value fails at computed-value time, and then it does not fall back
  to the line before it, it falls back to nothing.
*/

/* ---- φ: the scale ---------------------------------------------------------------------------------- */

:root {
  --phi: 1.618034;
  --s-3: .236rem;  --s-2: .382rem;  --s-1: .618rem;  --s0: 1rem;
  --s1: 1.618rem;  --s2: 2.618rem;  --s3: 4.236rem;  --s4: 6.854rem;
  --page: 61.8rem;              /* 23.6 + 38.2 */
  --measure: 38.2rem;
  --gutter: 1rem;
  --lh: 1.618;
  --lh-tight: 1.236;            /* 2 / φ */
  --radius: .382rem;
  --golden-angle: 137.508;      /* 360° / φ², in degrees */

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}
@media (min-width: 38.2rem) { :root { --gutter: 1.618rem } }

/* φ as a registered number: the browser computes it, and the design page reads the result back. */
@property --phi { syntax: "<number>"; inherits: true; initial-value: 1.618034; }

@supports (width: calc(1px * pow(2, 2) * sqrt(4))) {
  :root {
    --phi: calc((1 + sqrt(5)) / 2);
    --s-3: calc(1rem * pow(var(--phi), -3));
    --s-2: calc(1rem * pow(var(--phi), -2));
    --s-1: calc(1rem / var(--phi));
    --s1:  calc(1rem * var(--phi));
    --s2:  calc(1rem * pow(var(--phi), 2));
    --s3:  calc(1rem * pow(var(--phi), 3));
    --s4:  calc(1rem * pow(var(--phi), 4));
    --page: calc(100rem / var(--phi));                   /* 61.8rem */
    --measure: calc(100rem / pow(var(--phi), 2));        /* 38.2rem */
    --lh: var(--phi);
    --lh-tight: calc(2 / var(--phi));
    --radius: var(--s-2);
    --golden-angle: calc(360 / pow(var(--phi), 2));
  }
}

/* ---- Colour ---------------------------------------------------------------------------------------- */

:root {
  --bg-l: #faf8f3;   --bg-d: #111216;
  --bg2-l: #f1ede4;  --bg2-d: #1a1b21;
  --fg-l: #1c1c21;   --fg-d: #eeebe3;
  --fg2-l: #5c5d65;  --fg2-d: #a6a39b;
  --line-l: #ddd8cc; --line-d: #2c2d35;
  --ink-l: #8a6100;  --ink-d: #f0c75e;    /* gold that reads as text */
  --gold: #e2b13c;                         /* gold that fills */

  --bg: var(--bg-l); --bg2: var(--bg2-l); --fg: var(--fg-l); --fg2: var(--fg2-l);
  --line: var(--line-l); --ink: var(--ink-l);
  color-scheme: light;
}

/* Browsers without light-dark(): the system's choice, or the one the script stored. */
@supports not (color: light-dark(#000, #fff)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: var(--bg-d); --bg2: var(--bg2-d); --fg: var(--fg-d); --fg2: var(--fg2-d);
      --line: var(--line-d); --ink: var(--ink-d);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: var(--bg-d); --bg2: var(--bg2-d); --fg: var(--fg-d); --fg2: var(--fg2-d);
    --line: var(--line-d); --ink: var(--ink-d);
    color-scheme: dark;
  }
}

/* One set of tokens; color-scheme picks the side. With scripts off, :has() reads the theme switch. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;
    --bg: light-dark(var(--bg-l), var(--bg-d));
    --bg2: light-dark(var(--bg2-l), var(--bg2-d));
    --fg: light-dark(var(--fg-l), var(--fg-d));
    --fg2: light-dark(var(--fg2-l), var(--fg2-d));
    --line: light-dark(var(--line-l), var(--line-d));
    --ink: light-dark(var(--ink-l), var(--ink-d));
  }
  :root[data-theme="light"] { color-scheme: light }
  :root[data-theme="dark"] { color-scheme: dark }
  :root:not([data-js]):has(#theme-light:checked) { color-scheme: light }
  :root:not([data-js]):has(#theme-dark:checked) { color-scheme: dark }
}

/* ---- Base ------------------------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: #faf8f3; background: var(--bg);
  scrollbar-gutter: stable;
  scrollbar-color: var(--line) transparent;
  interpolate-size: allow-keywords;
}
body {
  margin: 0;
  color: #1c1c21; color: var(--fg);
  font: 1rem/1.618 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: 650; letter-spacing: -.012em; text-wrap: balance }
p, li, dd { text-wrap: pretty }
p { margin: 0 }
a { color: inherit; text-decoration-color: var(--ink); text-decoration-thickness: .0618em; text-underline-offset: .236em }
a:hover { color: var(--ink) }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px }
code { font-family: var(--mono); font-size: .9em }
[hidden] { display: none !important }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap }
.label { font: 500 .75rem/1.236 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2) }
.small { font-size: .8125rem; color: var(--fg2) }
.go { font-weight: 600; text-decoration: none }
.go:hover { text-decoration: underline }

.page { max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter) }
.page { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)) }

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

.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s1); padding-block: var(--s1) var(--s0) }
.mark { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 .875rem/1 var(--mono); text-decoration: none }
.mark svg { width: 1.618rem; height: 1rem; flex: none }
.top nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s0); order: 3; width: 100% }
.top nav a { font-size: .875rem; color: var(--fg2); text-decoration: none; padding-block: var(--s-3) }
.top nav a:hover, .top nav a[aria-current] { color: var(--fg) }
.top nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .382em }
@media (min-width: 48rem) {
  .top nav { order: 0; width: auto; margin-inline-start: auto; gap: var(--s-2) var(--s1) }
}

/* The theme switch: shown when scripts run, or when :has() can work it without them. */
.theme { display: none; margin: 0; padding: 2px; border: 1px solid var(--line); border-radius: 2rem; gap: 2px }
:root[data-js] .theme { display: flex }
@supports selector(:has(*)) { .theme { display: flex } }
.theme legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.theme label { position: relative; cursor: pointer }
.theme input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer }
.theme span { display: block; padding: var(--s-3) var(--s-1); border-radius: 2rem; font: .75rem/1.618 var(--mono); color: var(--fg2) }
.theme input:checked + span { background: var(--fg); color: var(--bg) }
.theme input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px }

/* ---- The tiles: a 13 × 8 Fibonacci rectangle ------------------------------------------------------- */

.hero { container: hero / inline-size; margin-block: var(--s0) var(--s2) }
.tiles {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.tile {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  padding: var(--s1); background: var(--bg2); color: inherit; text-decoration: none;
  font: inherit; text-align: start; border: 0; border-radius: 0;
}
a.tile:hover, button.tile:hover { color: inherit; background: var(--bg) }
.tile:focus-visible { outline-offset: -4px }
.ta, .tb { grid-column: 1 / -1 }
.ta h1 { font-size: 2.618rem; font-size: var(--s2); line-height: 1; margin-bottom: .146em }   /* φ⁻⁴: room for descenders */
.ta .lede { font-size: 1.125rem; max-width: 30rem }
.tile .big { font-size: 1.272rem; font-weight: 650; line-height: var(--lh-tight) }
.tile .desc { color: var(--fg2); font-size: .875rem; line-height: 1.5 }
.te, .tf { align-items: center; justify-content: center; cursor: pointer; font-size: 2rem; line-height: 1 }
.te { background: var(--gold); color: #1c1c21 }
a.tile.tf:hover { background: var(--gold); color: #1c1c21 }
button.tile.te:hover { background: var(--ink); color: var(--bg) }
.te span { font-family: Georgia, "Times New Roman", serif; font-style: italic }
.tf span { font-family: var(--mono) }
.spiral { display: none }

/* The tiling proper, where the browser has container queries: fixed proportions, text sized to each tile. */
@supports (container-type: size) {
  .tiles {
    aspect-ratio: 13 / 8;
    grid-template-columns: minmax(0, 8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
    grid-template-rows: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "a b b b" "a e f c" "a d d c";
  }
  .ta { grid-area: a } .tb { grid-area: b } .tc { grid-area: c } .td { grid-area: d } .te { grid-area: e } .tf { grid-area: f }
  .tile { container-type: size; padding: 9%; overflow: hidden }

  /* Each tile's text sits in the corner the spiral curls round. */
  .ta { justify-content: flex-end; gap: clamp(.618rem, 2.618cqi, 1.618rem); padding: 9% 9% 9% 15% }
  .tb { justify-content: flex-end; padding: 8% 20% 8% 8% }
  .tc { justify-content: flex-start; padding: 10% }
  .td { justify-content: flex-start; align-items: flex-end; text-align: end; padding: 10% }
  .te, .tf { padding: 0 }

  .ta .label { font-size: clamp(.618rem, 2.4cqi, .875rem) }
  .ta h1 { font-size: clamp(2rem, 11cqi, 4.236rem); letter-spacing: -.024em }
  .ta .lede { font-size: clamp(.9375rem, 4.236cqi, 1.618rem); line-height: 1.382; max-width: none }
  .tb .big { font-size: clamp(1.236rem, 10cqi, 2.618rem) }
  .tb .desc { font-size: clamp(.8125rem, 4.6cqi, 1.125rem) }
  .tc .big, .td .big { font-size: clamp(.875rem, 10cqi, 1.618rem) }
  .te span { font-size: 61.8cqi }
  .tf span { font-size: 38.2cqi }

  .spiral { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
  /* The line's width is in tile units (about 1.5px on a desktop, 1px on a phone), not screen pixels: with a
     non-scaling stroke, Chrome ignores pathLength and the dash animation below breaks into dashes. */
  .spiral path { fill: none; stroke: var(--ink); stroke-width: .022; stroke-linecap: round }
  .spiral .dot { display: none; stroke: var(--gold); stroke-width: 9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--gold)) }
  .spiral.port { display: none }

  /* On a narrow screen the rectangle stands on its end: 8 × 13, turned a quarter clockwise. */
  @container hero (width < 36rem) {
    .tiles {
      aspect-ratio: 8 / 13;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 5fr);
      grid-template-rows: minmax(0, 8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
      grid-template-areas: "a a a" "d e b" "d f b" "c c b";
    }
    .ta { padding: 9% 15% 9% 8% }
    .tb { justify-content: flex-start; padding: 9% 14% 9% 9% }
    .tc { justify-content: flex-start; align-items: flex-end; text-align: end; padding: 9% }
    .td { justify-content: flex-end; align-items: flex-end; padding: 10% }
    .spiral.land { display: none }
    .spiral.port { display: block }
  }
}

@supports (text-box: trim-both cap alphabetic) {
  .ta h1, .tile .big, .section-head h2, .page-head h1 { text-box: trim-both cap alphabetic }
}

/* ---- The φ note: a popover, tied to its tile ------------------------------------------------------- */

.note {
  width: min(23.6rem, calc(100vw - 2rem)); margin: var(--s0) 0 0; padding: var(--s1);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg2); color: var(--fg); font-size: .9375rem;
  box-shadow: 0 1.618rem 4.236rem -1.618rem rgb(0 0 0 / .382);
}
.note .phi { font: 600 1.272rem/1.236 var(--mono); margin-bottom: var(--s-1); color: var(--ink) }
.note p + p { margin-top: var(--s-1) }
.note .go { display: inline-block; margin-top: var(--s0) }
.note:popover-open { margin: auto }

@supports (anchor-name: --a) {
  .te { anchor-name: --phi-tile }
  .note:popover-open {
    position-anchor: --phi-tile; inset: auto; margin: var(--s-1);
    position-area: top span-all; justify-self: anchor-center;
    position-try-fallbacks: flip-block;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .note:popover-open {
    transition: opacity .382s, translate .382s cubic-bezier(.24, 1, .38, 1), overlay .382s allow-discrete, display .382s allow-discrete;
  }
  @starting-style { .note:popover-open { opacity: 0; translate: 0 .618rem } }
}

/* ---- Page heads (every page but the home page) ----------------------------------------------------- */

.page-head { padding-block: var(--s2) var(--s1) }
.page-head .num { display: block; font: 500 .8125rem/1 var(--mono); color: var(--ink); margin-bottom: var(--s0) }
.page-head h1 { font-size: 2.618rem; font-size: clamp(var(--s2), 1rem + 4vw, var(--s3)); letter-spacing: -.024em }
.page-head p { margin-top: var(--s0); color: var(--fg2); max-width: var(--measure); font-size: 1.125rem }
.page-head p + p { margin-top: var(--s-1) }
.centred { text-align: center; margin-inline: auto }
.centred p { margin-inline: auto }
.aside { margin-block: var(--s2) var(--s3) }   /* a closing line, clear of the footer rule below it */

/* ---- Sections -------------------------------------------------------------------------------------- */

.section { display: grid; gap: var(--s1); padding-block: var(--s2); border-top: 1px solid var(--line) }
.section-head .num { display: block; font: 500 .8125rem/1 var(--mono); color: var(--ink); margin-bottom: var(--s0) }
.section-head h2 { font-size: 1.618rem; font-size: clamp(var(--s1), 1rem + 3vw, var(--s2)) }
.section-head p { margin-top: var(--s0); color: var(--fg2); max-width: var(--measure) }
.body { min-width: 0 }
.body > p { max-width: var(--measure) }
.body > p + p, .body > ul + p, .body > p + ul { margin-top: var(--s0) }
.body > .cards + p, .body > .facts + p, .body > p + .cards, .body > p + .facts { margin-top: var(--s1) }
.body h3 { font-size: 1.125rem; margin-top: var(--s1) }
.body h3 + p { margin-top: var(--s-1) }
.body > ul:not([class]) { margin: 0; padding-left: 1.1em; max-width: var(--measure) }
.body > ul:not([class]) li + li { margin-top: var(--s-2) }
@media (min-width: 48rem) {
  .hero { margin-bottom: var(--s3) }
  .section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s2); padding-block: var(--s3) }
  .section-head { position: sticky; top: var(--s1); align-self: start }
}

/* ---- Cards ----------------------------------------------------------------------------------------- */

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s0); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.6rem), 1fr)) }
.card {
  --hue: var(--ink);
  display: flex; flex-direction: column; gap: var(--s-1); min-width: 0;
  padding: var(--s1); border: 1px solid var(--line); border-top: 3px solid var(--hue); border-radius: var(--radius); background: var(--bg2);
  color: inherit; text-decoration: none;
}
.card.wide { grid-column: 1 / -1 }
.card h3, .card h2 { font-size: 1.272rem }
.card h3 a { text-decoration: none }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--ink) }
.card p { color: var(--fg2); font-size: .9375rem; line-height: 1.5 }
.card .meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-1); margin-top: auto; padding-top: var(--s-2) }
.card .meta span { font: .75rem/1.618 var(--mono); padding-inline: var(--s-1); border: 1px solid var(--line); border-radius: 2rem; color: var(--fg2) }
a.card:hover { background: var(--bg); color: inherit }
a.card:hover h3, a.card:hover h2 { color: var(--ink) }
a.card .go { margin-top: auto; padding-top: var(--s-1); font-size: .9375rem }
.card .icon { width: 2.618rem; height: 2.618rem; color: var(--hue); margin-bottom: var(--s-2) }
.card .icon svg { width: 100%; height: 100%; display: block }
@supports (corner-shape: squircle) {
  .card, .tiles, .note, .facts > div, .ask-box, .answer { corner-shape: squircle; border-radius: var(--s0) }
}

/* Facts: small labelled boxes. */
.facts { display: grid; gap: var(--s-1); margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.09rem), 1fr)) }
.facts > div { padding: var(--s-1) var(--s0); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); min-width: 0 }
.facts > div.wide { grid-column: 1 / -1 }
.facts dt { font: 500 .6875rem/1.236 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2) }
.facts dd { margin: var(--s-2) 0 0; font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; line-height: 1.382 }
.facts dd small { display: block; margin-top: var(--s-3); font-weight: 400; color: var(--fg2); font-size: .8125rem }
.facts dd code { font-weight: 500 }

/* ---- Work: a timeline, one role open at a time ----------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0 }
.role summary {
  display: grid; grid-template-columns: 4.236rem minmax(0, 1fr) 1.618rem; align-items: baseline; gap: var(--s-3) var(--s-1);
  padding-block: var(--s-1); cursor: pointer; list-style: none;
}
.role summary::-webkit-details-marker { display: none }
.role summary:hover .org { color: var(--ink) }
.when { font: .8125rem/1.618 var(--mono); color: var(--fg2); font-variant-numeric: tabular-nums }
.org { font-weight: 650 }
.title { color: var(--fg2) }
.sign { justify-self: end; font: 1.125rem/1 var(--mono); color: var(--fg2) }
.role[open] .sign { rotate: 45deg }
.span {
  grid-column: 1 / -1; position: relative; height: .382rem; margin-block: var(--s-2) var(--s-3);
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}
.span::before, .span::after {
  content: ""; position: absolute; top: 0; bottom: 0; border-radius: 1rem; background: var(--ink);
  left: calc((var(--from) - 2005) / 22 * 100%); width: calc((var(--to) - var(--from)) / 22 * 100%);
}
.span::after { display: none }
.span[style*="--before"]::after {
  display: block; opacity: .382;
  left: calc((var(--before) - 2005) / 22 * 100%); width: calc((var(--from) - var(--before)) / 22 * 100%);
}
.role summary:hover .span::after { opacity: .75 }   /* the contract years, named in the row's title on hover */
.role .more { padding: 0 0 var(--s0) calc(4.236rem + var(--s-1)); color: var(--fg2); max-width: calc(var(--measure) + 4.236rem) }
.axis { position: relative; height: 1.618em; margin-top: var(--s-2); font: .6875rem/1.618 var(--mono); color: var(--fg2); font-variant-numeric: tabular-nums }
.axis span { position: absolute; left: calc((var(--y) - 2005) / 22 * 100%); padding-left: 3px; border-left: 1px solid var(--line) }
@media (max-width: 30rem) {
  .role .more { padding-left: 0 }
}
@supports selector(::details-content) {
  .role::details-content { block-size: 0; overflow: clip }
  .role[open]::details-content { block-size: auto }
}
@media (prefers-reduced-motion: no-preference) {
  .sign { transition: rotate .236s }
  .span::after { transition: opacity .236s }
  @supports selector(::details-content) {
    .role::details-content { transition: block-size .382s, content-visibility .382s allow-discrete }
  }
}

/* ---- Open source ----------------------------------------------------------------------------------- */

.oss { container-type: inline-size }
.oss-grid { display: grid; gap: var(--s1) }
.stat-num { font-size: 4.236rem; font-size: var(--s3); font-weight: 650; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.stat-label { margin-top: var(--s-1); color: var(--fg2); font-size: .875rem }
.oss ul { margin: var(--s0) 0 0; padding-left: 1.1em; color: var(--fg2) }
.oss li + li { margin-top: var(--s-2) }
.oss .go { display: inline-block; margin-top: var(--s0) }
@container (width > 30rem) {
  .oss-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr) }
}

/* ---- Design page ----------------------------------------------------------------------------------- */

.scale { display: flex; align-items: flex-end; gap: var(--s-1); margin-block: var(--s1); flex-wrap: wrap }
.scale figure { margin: 0; display: grid; justify-items: start; gap: var(--s-2) }
.scale i { display: block; background: var(--gold); border-radius: 1px }
.scale figcaption { font: .6875rem/1 var(--mono); color: var(--fg2) }
.specimen { list-style: none; margin: var(--s1) 0 0; padding: 0; border-top: 1px solid var(--line) }
.specimen li { display: flex; align-items: baseline; gap: var(--s0); padding-block: var(--s-1); border-bottom: 1px solid var(--line); line-height: 1.236 }
.specimen .size { flex: none; width: 4.236rem; font: .6875rem/1 var(--mono); color: var(--fg2) }
.specimen .big { font-size: 2.618rem; font-size: var(--s2); font-weight: 650; letter-spacing: -.024em }
.specimen .s1 { font-size: 1.618rem; font-size: var(--s1); font-weight: 650 }
.specimen .s0 { font-size: 1rem }
.specimen .s-1 { font-size: .8125rem; color: var(--fg2) }
.specimen .mono { font: 500 .75rem/1.236 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2) }
.specimen .serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 2.618rem; color: var(--ink) }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); margin-block: var(--s1); list-style: none; padding: 0 }
.swatches li { aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg2); display: grid; place-items: end start; padding: var(--s-2); font: .6875rem/1 var(--mono); color: var(--fg2) }
.tiling { display: block; width: min(100%, 23.6rem); height: auto; margin-block: var(--s1); font: 500 .5px/1 var(--mono) }
.tiling rect { fill: var(--bg2); stroke: var(--line); stroke-width: .06 }
.tiling text { fill: var(--fg2); font-size: .9px; font-family: ui-monospace, Menlo, Consolas, monospace }
.tiling text.s { font-size: .55px }
.tiling .arc { fill: none; stroke: var(--ink); stroke-width: .12; stroke-linecap: round }
.phi-live { font: 600 1.618rem/1.236 var(--mono); color: var(--ink); margin-block: var(--s0) var(--s-1); overflow-wrap: anywhere }

/* ---- Your browser: the feature table --------------------------------------------------------------- */

.features { list-style: none; margin: var(--s1) 0 0; padding: 0; border-top: 1px solid var(--line) }
.features li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s0);
  padding-block: var(--s-1); border-bottom: 1px solid var(--line); font-size: .9375rem;
}
.features .f-name { font-weight: 600 }
.features .f-use { grid-column: 1; color: var(--fg2); font-size: .875rem; line-height: 1.5 }
.features .f-base { grid-column: 1; font: .75rem/1.5 var(--mono); color: var(--fg2) }
.features .f-you { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 600 .75rem/1.618 var(--mono); padding-inline: var(--s-1); border-radius: 2rem; border: 1px solid var(--line); white-space: nowrap }
.f-you[data-state="yes"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.f-you[data-state="partly"] { border-color: var(--ink); color: var(--ink) }
.f-you[data-state="no"] { color: var(--fg2) }
.tally { font-weight: 600 }
.tally output { color: var(--ink) }

/* ---- Resumes --------------------------------------------------------------------------------------- */

.resumes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.18rem), 1fr)); gap: var(--s1) }
.resumes .card { padding: var(--s2) var(--s1) }
.resumes h2 { font-size: 1.618rem; font-size: var(--s1); line-height: 1.1 }
.resumes .focus { color: var(--ink); font-weight: 600; font-size: .9375rem }
.resumes .pdf {
  display: inline-flex; align-items: center; gap: var(--s-2); align-self: start; margin-top: auto;
  padding: var(--s-2) var(--s0); border-radius: 2rem; background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.resumes .pdf:hover { background: var(--ink); color: var(--bg) }
.resumes .pdf small { font-weight: 400; opacity: .72 }

/* ---- Ask: one box in the middle -------------------------------------------------------------------- */

.ask-box {
  max-width: 38.2rem; max-width: var(--measure); margin: var(--s1) auto 0; padding: var(--s2) var(--s1);
  border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); background: var(--bg2);
}
.ask-box form { display: grid; gap: var(--s0) }
.ask-box label { font-weight: 650 }
.ask-box textarea {
  width: 100%; font: inherit; line-height: 1.5; padding: var(--s-1) var(--s0); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); resize: vertical; min-height: 4.236rem; max-height: 14.6rem; field-sizing: content;
}
.ask-box textarea:focus-visible { outline-offset: 0; border-color: var(--ink) }
.ask-box .combo { position: relative; display: grid }
.ask-box [role="listbox"] {
  position: absolute; z-index: 2; top: calc(100% + var(--s-3)); inset-inline: 0; margin: 0; padding: var(--s-2) 0; list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1.618rem 4.236rem -1.618rem rgb(0 0 0 / .382);
}
.ask-box [role="option"] { padding: var(--s-2) var(--s0); cursor: pointer; font-size: .9375rem }
.ask-box [role="option"]:hover, .ask-box [role="option"][aria-selected="true"] { background: var(--bg2); color: var(--ink) }
.ask-box .hint { font-size: .8125rem; color: var(--fg2); margin-top: calc(-1 * var(--s-1)) }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; padding: 0; margin: 0 }
.chips legend, .chips p { width: 100%; padding: 0; margin: 0 0 var(--s-2); font: 500 .75rem/1.236 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2) }
.chips button {
  font: inherit; font-size: .8125rem; line-height: 1.382; text-align: start; padding: var(--s-2) var(--s-1); cursor: pointer;
  border: 1px solid var(--line); border-radius: 2rem; background: var(--bg); color: var(--fg);
}
.chips button:hover { border-color: var(--ink); color: var(--ink) }
.btn {
  justify-self: start; font: inherit; font-weight: 650; padding: var(--s-2) var(--s1); cursor: pointer;
  border: 0; border-radius: 2rem; background: var(--fg); color: var(--bg);
}
.btn:hover { background: var(--ink); color: var(--bg) }
.btn:disabled { opacity: .5; cursor: default }
.answer { display: block; white-space: pre-wrap; min-height: 4.236rem; padding: var(--s0) var(--s1); border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line) }
.answer[data-idle] { color: var(--fg2) }
.ask-box .caution { display: flex; gap: var(--s-2); align-items: baseline; font-size: .8125rem; color: var(--fg2) }
.ask-box .caution b { color: var(--ink); font-weight: 650 }
.no-js { display: none }

/* ---- Footer ---------------------------------------------------------------------------------------- */

.foot { padding-block: var(--s3) var(--s2); border-top: 1px solid var(--line) }
.foot .hello { font-size: 1.618rem; font-size: clamp(var(--s1), 1rem + 1.2vw, var(--s2)); font-weight: 600; line-height: 1.236; letter-spacing: -.012em; overflow-wrap: anywhere }
.foot .hello a { text-decoration-thickness: .05em }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s1); list-style: none; margin: var(--s1) 0 0; padding: 0 }
.foot .small { margin-top: var(--s2) }

/* ---- Colour by the golden angle, where the browser has relative colours ----------------------------- */

@supports (color: oklch(from red l c h)) and (color: light-dark(#000, #fff)) {
  .tile { --i: 0 }
  .tb { --i: 1 } .tc { --i: 2 } .td { --i: 3 } .tf { --i: 5 }
  .ta, .tb, .tc, .td, .tf {
    background: light-dark(
      oklch(from var(--gold) 95.5% .028 calc(h + var(--i) * var(--golden-angle))),
      oklch(from var(--gold) 22.5% .032 calc(h + var(--i) * var(--golden-angle))));
  }
  a.tile.tb:hover, a.tile.tc:hover, a.tile.td:hover {
    background: light-dark(
      oklch(from var(--gold) 92% .05 calc(h + var(--i) * var(--golden-angle))),
      oklch(from var(--gold) 27% .05 calc(h + var(--i) * var(--golden-angle))));
  }
  .cards > :nth-child(1), .swatches > :nth-child(1) { --i: 0 } .cards > :nth-child(2), .swatches > :nth-child(2) { --i: 1 }
  .cards > :nth-child(3), .swatches > :nth-child(3) { --i: 2 } .cards > :nth-child(4), .swatches > :nth-child(4) { --i: 3 }
  .cards > :nth-child(5), .swatches > :nth-child(5) { --i: 4 } .cards > :nth-child(6), .swatches > :nth-child(6) { --i: 5 }
  .card { --hue: light-dark(oklch(from var(--gold) 58% .13 calc(h + var(--i) * var(--golden-angle))), oklch(from var(--gold) 76% .13 calc(h + var(--i) * var(--golden-angle)))) }
  .swatches li {
    background: light-dark(
      oklch(from var(--gold) 95.5% .028 calc(h + var(--i) * var(--golden-angle))),
      oklch(from var(--gold) 22.5% .032 calc(h + var(--i) * var(--golden-angle))));
    border-top: 3px solid light-dark(oklch(from var(--gold) 58% .13 calc(h + var(--i) * var(--golden-angle))), oklch(from var(--gold) 76% .13 calc(h + var(--i) * var(--golden-angle))));
  }
}
@supports (z-index: sibling-index()) {
  .cards > :nth-child(n), .swatches > :nth-child(n) { --i: calc(sibling-index() - 1) }
}
@supports (color: contrast-color(red)) {
  .te { color: contrast-color(var(--gold)) }
}

/* ---- Motion ---------------------------------------------------------------------------------------- */

.progress { display: none }
@media (prefers-reduced-motion: no-preference) {
  /* The spiral draws itself from the outside in, a gold dot leading the line. */
  @supports (container-type: size) {
    .spiral path.line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.618s .382s cubic-bezier(0, 0, .58, 1) forwards }
    .spiral .dot { display: block; animation: dot 2.618s .382s cubic-bezier(0, 0, .58, 1) both }
  }
  @supports (z-index: sibling-index()) {
    .tile { animation: tile-in .618s calc((sibling-index() - 1) * 97ms) both cubic-bezier(.24, 1, .38, 1) }
  }
  @supports (animation-timeline: scroll()) {
    .progress {
      display: block; position: fixed; inset: 0 0 auto; height: 2px; z-index: 10; background: var(--gold);
      transform-origin: 0 50%; animation: progress linear both; animation-timeline: scroll(root);
    }
    .section-head, .cards > li, .stat, .facts > div {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 61.8%;
    }
  }
  /* The theme change: a circle sweeps the new theme in from the switch. Page to page, the default cross-fade. */
  html.theming::view-transition-old(root), html.theming::view-transition-new(root) { animation: none; mix-blend-mode: normal }
  html.theming::view-transition-new(root) { animation: reveal .618s cubic-bezier(.38, 0, .24, 1) }
}
@keyframes draw { to { stroke-dashoffset: 0 } }
@keyframes dot { 0% { opacity: 0 } 4% { opacity: 1 } 90% { opacity: 1 } 100% { opacity: 0 } }
@keyframes tile-in { from { opacity: 0; scale: .94 } }
@keyframes progress { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes rise { from { opacity: 0; translate: 0 1.618rem } }
@keyframes reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)) }
  to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)) }
}

/* Page to page: the header stays put while the rest cross-fades, where the browser has it. */
@view-transition { navigation: auto }
.mark { view-transition-name: mark }
.top nav { view-transition-name: nav }
.theme { view-transition-name: theme }

@media print {
  .theme, .progress, .spiral, .note, .top nav, .chips, .btn, .answer { display: none !important }
  .tiles { aspect-ratio: auto !important; display: block !important; border: 0 }
  .tile { display: block; padding: 0 0 var(--s0) !important; background: none !important }
  .te, .tf { display: none }
  .section { break-inside: avoid-page }
  .role .more { display: block }
  .resumes .pdf::after { content: " r.jmurphyau.com" attr(href); font-weight: 400 }
}