/* Self-hosted fonts (SIL Open Font License, see fonts/). Latin subset, woff2 only.
   Public Sans is one variable file covering every weight from 100 to 900. */
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Page transitions. The browser keeps the old page on screen until the new one is ready,
   then crossfades. The header has its own name, so it stays still while the page changes under it. */
@view-transition { navigation: auto; }
.top { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

:root {
  --paper: #FFFFFF;
  --ink: #1D2433;
  --ink-2: #4A5363;
  --rule: #D6DAE2;
  --hover: #F2F4F7; /* hover wash on header buttons */
  --track: #7D8696; /* switch track when off: 3.7:1 on white, 3.3:1 on --hover */
  --spec: #1A5FD0;
  --a11y: #A3195B;
  --font: "Public Sans", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --measure: 680px;
  --size: 1.0625rem;
}
.a11y {
  --font: "Atkinson Hyperlegible", system-ui, sans-serif;
  --size: 1.25rem;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 96px; scroll-behavior: smooth;}
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--size)/1.65 var(--font); }
.a11y body { line-height: 1.75; letter-spacing: 0.01em; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
.a11y a { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--spec); outline-offset: 3px; }
.a11y :focus-visible { outline: 4px solid var(--a11y); outline-offset: 4px; box-shadow: 0 0 0 9px #fff; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

.skip { position: absolute; left: 16px; top: -80px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 10; }
.skip:focus { top: 12px; }

.col { max-width: var(--measure); margin: 0 auto; padding: 0 16px; position: relative; }
.a11y .col { max-width: 760px; }

/* Annotations */
.note {
  position: absolute; width: 190px; font: 400 11.5px/1.55 var(--mono); color: var(--spec);
}
.note::before { content: ""; position: absolute; top: 8px; width: 48px; border-top: 1px solid currentColor; }
.note.r { left: calc(100% + 56px); }
.note.r::before { left: -56px; }
.note.l { right: calc(100% + 56px); text-align: right; }
.note.l::before { right: -56px; }
.note.a { color: var(--a11y); display: none; }
.a11y .note.a { display: block; }
.a11y .note.s { display: none; }
.notes-off .note { display: none !important; }

.measure-line { position: absolute; left: 16px; right: 16px; top: -28px; border-top: 1px solid var(--spec); text-align: center; font: 11px var(--mono); color: var(--spec); }
.measure-line span { position: relative; top: -9px; background: var(--paper); padding: 0 8px; }
.measure-line::before, .measure-line::after { content: ""; position: absolute; top: -5px; height: 9px; border-left: 1px solid var(--spec); }
.measure-line::after { right: 0; }
.notes-off .measure-line, .a11y .measure-line { display: none; }

/* Accessibility view: landmarks and heading levels */
.a11y [data-landmark] { outline: 1px dashed var(--a11y); outline-offset: -6px; }
.a11y [data-landmark]:not(.top) { position: relative; }
.a11y main[data-landmark] { outline-offset: -2px; }
.a11y [data-landmark]::after {
  content: attr(data-landmark); position: absolute; top: 12px; left: 12px; z-index: 3;
  font: 400 11px/1 var(--mono); color: #fff; background: var(--a11y); padding: 4px 6px; white-space: nowrap;
}
.a11y .top[data-landmark]::after, .a11y nav[data-landmark]::after { top: calc(100% + 4px); left: 6px; }
.a11y nav[data-landmark] { outline-offset: 4px; }
.a11y main[data-landmark]::after { left: auto; right: 12px; }
.a11y h1::before, .a11y h2::before, .a11y h3::before {
  font: 400 11px/1 var(--mono); color: #fff; background: var(--a11y); padding: 3px 5px;
  margin-right: 10px; vertical-align: 0.35em; letter-spacing: 0;
}
.a11y h1::before { content: "H1"; }
.a11y h2::before { content: "H2"; }
.a11y h3::before { content: "H3"; }
.notes-off.a11y [data-landmark] { outline: 0; }
.notes-off.a11y [data-landmark]::after, .notes-off.a11y h1::before, .notes-off.a11y h2::before, .notes-off.a11y h3::before { display: none; }

/* Header */
.top { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.top .bar { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.top .home { font-weight: 600; text-decoration: none; margin-right: auto; white-space: nowrap; }
.top nav ul { display: flex; gap: 22px; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); text-decoration: underline; }
/* View controls: plain text buttons with a pill switch. State shows by thumb position, not colour alone. */
.views { display: flex; gap: 4px; align-items: center; }
.view {
  --c: var(--spec);
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
  font: 500 14px var(--font); transition: background-color .15s ease, color .15s ease;
}
.view.acc { --c: var(--a11y); }
.view svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.view:hover { background: var(--hover); color: var(--ink); }
/* On state follows the class prefs.js sets before paint, so a saved "off" never flashes "on" while main.js loads */
:is(:root:not(.notes-off) #notes-toggle, :root.a11y #a11y-toggle) { color: var(--ink); }
:is(:root:not(.notes-off) #notes-toggle, :root.a11y #a11y-toggle) svg { stroke: var(--c); }
.pill { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--track); flex: none; transition: background-color .2s ease; }
.pill::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 1px 2px rgb(29 36 51 / .25); transition: transform .2s cubic-bezier(.3,.7,.4,1);
}
:is(:root:not(.notes-off) #notes-toggle, :root.a11y #a11y-toggle) .pill { background: var(--c); }
:is(:root:not(.notes-off) #notes-toggle, :root.a11y #a11y-toggle) .pill::after { transform: translateX(12px); }
.view .short { display: none; }
@media (max-width: 1100px) { .view .short { display: inline; } .view .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 560px) {
  .view .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .view { padding: 0 8px; gap: 6px; }
  .view::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap;
    background: var(--ink); color: #fff; font: 400 12px var(--font); padding: 5px 8px; border-radius: 4px;
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
  }
  .view:hover::after, .view:focus-visible::after { opacity: 1; }
}

/* Before and after: design file vs shipped */
.compare {
  position: relative; max-width: 1040px; margin: 88px auto 0; height: 380px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); user-select: none;
}
.layer { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 64px 24px 0; }
.layer.shipped { background: var(--paper); }
.layer.design {
  background: #F1F2F4; clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  background-image: radial-gradient(#D9DCE2 1px, transparent 1px); background-size: 16px 16px;
}
.cmp { width: 340px; flex: none; display: grid; gap: 8px; font-family: "Public Sans", sans-serif; }
.c-label { font-weight: 600; font-size: 15px; }
.c-input {
  display: flex; align-items: center; height: 48px; padding: 0 14px; border: 2px solid var(--ink);
  background: #fff; font-size: 16px; color: var(--ink);
}
.c-input.is-focus { outline: 2px solid var(--spec); outline-offset: 3px; }
.caret { width: 1.5px; height: 20px; background: var(--ink); margin-left: 1px; }
@media (prefers-reduced-motion: no-preference) { .caret { animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }
.c-list { display: grid; border: 1px solid var(--rule); background: #fff; margin-top: 4px; }
.c-opt { padding: 10px 14px; font-size: 15px; line-height: 1.35; }
.c-opt + .c-opt { border-top: 1px solid #EEF0F3; }
.c-opt.is-active { background: #EEF3FC; box-shadow: inset 3px 0 0 var(--spec); }
.c-status { font-size: 13px; color: var(--ink-2); }
.c-input.ghost {
  border: 1px solid #C4C8D0; color: #6B7280; justify-content: space-between; padding-right: 6px;
}
.c-input.ghost b { font-weight: 600; font-size: 14px; color: #fff; background: #6B7280; padding: 7px 14px; }
.c-notes { position: absolute; top: 66px; left: calc(50% + 214px); width: 230px; }
.frame-name { position: absolute; top: 18px; left: 56px; font: 400 11px var(--mono); color: #7A8290; }
.frame-note { position: absolute; bottom: 18px; left: 56px; font: 400 11px var(--mono); color: #7A8290; }
.c-notes { display: grid; gap: 14px; font: 400 11.5px/1.5 var(--mono); color: var(--spec); }
.c-notes li { position: relative; padding-left: 40px; }
.c-notes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 28px; border-top: 1px solid currentColor; }
.tag { position: absolute; top: -12px; font: 400 11px var(--mono); background: var(--paper); padding: 2px 8px; color: var(--ink-2); }
.tag { transition: opacity .2s ease; }
.tag.left { left: 40px; } .tag.right { right: 40px; color: var(--spec); }
.compare.only-shipped .tag.left, .compare.only-design .tag.right { opacity: 0; }
.handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; border-left: 1px solid var(--ink); pointer-events: none; }
.handle::after {
  content: ""; position: absolute; top: 50%; left: -19px; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2433' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
  background-size: 20px; background-repeat: no-repeat; background-position: center;
}
.range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(.range:focus-visible) .handle::after { outline: 2px solid var(--spec); outline-offset: 3px; }
.a11y .compare:has(.range:focus-visible) .handle::after { outline: 4px solid var(--a11y); outline-offset: 4px; }
.compare figcaption { position: absolute; top: calc(100% + 14px); left: 0; right: 0; font-size: 14px; color: var(--ink-2); max-width: 68ch; margin: 0 auto; padding: 0 16px; }
.hero { padding-bottom: 150px; }
@media (max-width: 820px) {
  .compare { height: 620px; margin-top: 64px; }
  .layer { flex-direction: column; align-items: center; gap: 28px; padding: 56px 24px 0; }
  .c-notes { position: static; width: min(340px, 100%); }
  .cmp { width: min(340px, 100%); }
  .frame-name, .frame-note { left: 24px; }
  .hero { padding-bottom: 190px; }
}

/* Live inspect (design notes on, accessibility view off) */
#inspect { position: fixed; inset: 0; pointer-events: none; z-index: 8; display: none; }
#inspect.on { display: block; }
#inspect .box { position: absolute; }
#inspect .m { background: rgb(26 95 208 / .07); }
#inspect .pd { background: rgb(26 95 208 / .13); }
#inspect .ct { outline: 1px solid var(--spec); }
#inspect .tag-size { position: absolute; font: 400 10.5px var(--mono); color: #fff; background: var(--spec); padding: 2px 6px; white-space: nowrap; }
#inspect .gap { position: absolute; width: 0; border-left: 1px solid var(--spec); }
#inspect .gap::before, #inspect .gap::after { content: ""; position: absolute; left: -4px; width: 7px; border-top: 1px solid var(--spec); }
#inspect .gap::before { top: 0; } #inspect .gap::after { bottom: 0; }
#inspect .gap span { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font: 400 10.5px var(--mono); color: var(--spec); background: var(--paper); padding: 0 3px; }
#inspect .card {
  position: absolute; width: 248px; background: var(--paper); border: 1px solid var(--spec);
  font: 400 11.5px/1.6 var(--mono); color: var(--ink); padding: 10px 12px; box-shadow: 0 8px 24px -12px rgb(29 36 51 / .25);
}
#inspect .card b { display: block; color: var(--spec); font-weight: 400; margin-bottom: 4px; }
#inspect .card dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 1px 8px; margin: 0; }
#inspect .card dt { color: var(--ink-2); }
#inspect .card dd { margin: 0; overflow-wrap: anywhere; }
#inspect .sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
#inspect .pass { color: #116329; } #inspect .fail { color: #A3195B; }
.inspect-hint { position: fixed; left: 16px; bottom: 16px; z-index: 6; font: 400 11px var(--mono); color: var(--spec); background: var(--paper); padding: 4px 8px; display: none; }
.inspect-hint .touch { display: none; }
@media (hover: none) { .inspect-hint .mouse { display: none; } .inspect-hint .touch { display: inline; } }
html:not(.notes-off):not(.a11y) .inspect-hint { display: block; }
@media (max-width: 1180px) { .inspect-hint { left: 50%; transform: translateX(-50%); white-space: nowrap; } }
/* On small screens the hint would sit over content, so it shows briefly and then gets out of the way */
@media (max-width: 820px) { .inspect-hint { animation: hint-out .4s ease 5s forwards; } }
@keyframes hint-out { to { opacity: 0; visibility: hidden; } }

/* Accessibility tree panel */
.sr-btn.tree { margin-left: 4px; }
.sr-btn.tree[aria-pressed="true"] { background: #fff; color: var(--ink); }
#ax-tree {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; z-index: 9; display: none; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--rule); box-shadow: -12px 0 32px -24px rgb(29 36 51 / .4);
}
.a11y.ax-open #ax-tree { display: flex; }
.ax-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--rule); }
.ax-head p { font: 600 15px var(--font); margin: 0; }
.ax-head span { display: block; font: 400 11px var(--mono); color: var(--ink-2); margin-top: 2px; }
.ax-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.ax-close:hover { background: var(--hover); }
.ax-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.ax-list { list-style: none; margin: 0; padding: 8px 0 180px; overflow-y: auto; flex: 1; }
.ax-row {
  display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 5px 14px 5px calc(18px + var(--depth) * 16px); font: 400 13.5px/1.4 var(--font); color: var(--ink);
  border-left: 3px solid transparent; min-height: 32px;
}
.ax-row:hover { background: #F6F7F9; }
.ax-row.is-focus { background: rgb(163 25 91 / .07); border-left-color: var(--a11y); }
.ax-row .r { font: 400 11px var(--mono); color: var(--a11y); flex: none; }
.ax-row .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-row.lm .r { font-weight: 400; }
.ax-row.lm .n { font-weight: 700; }
.a11y.ax-open .note { position: static; width: auto; margin: 10px 0 0; padding-left: 14px; border-left: 1px solid currentColor; text-align: left !important; }
.a11y.ax-open .note::before { display: none; }
.ax-hl { outline: 2px solid var(--a11y) !important; outline-offset: 4px; }
@media (min-width: 1000px) {
  .a11y.ax-open body { padding-right: 360px; }
  .a11y.ax-open .captions { left: calc((100% - 360px) / 2); width: min(760px, calc(100% - 392px)); }
  .a11y.ax-open .top .bar { padding-right: 24px; }
}
@media (max-width: 999px) { #ax-tree { width: 100%; top: auto; height: 60vh; border-left: 0; border-top: 1px solid var(--rule); } .ax-list { padding-bottom: 24px; } }

/* Tab order map */
#taborder { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 6; display: none; overflow: visible; }
.a11y #taborder { display: block; }
.notes-off #taborder { display: none; }
#taborder path { fill: none; stroke: var(--a11y); stroke-width: 1.25; opacity: .5; }
#taborder circle { fill: var(--a11y); }
#taborder text { fill: #fff; font: 600 10px var(--mono); text-anchor: middle; dominant-baseline: central; }
@media (prefers-reduced-motion: no-preference) {
  #taborder .draw { animation: trace 1.6s ease-out both; }
  @keyframes trace { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* External links open in a new tab: a small arrow shows it, the hidden text says it */
a[target="_blank"]::after { content: "\2197"; content: "\2197" / ""; display: inline-block; margin-left: 0.2em; font-size: 0.85em; text-decoration: none; }

/* Screen reader simulator (accessibility view) */
.captions {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 7;
  width: min(760px, calc(100% - 32px)); display: none; align-items: center; gap: 20px;
  background: var(--ink); color: #fff; padding: 12px 12px 12px 16px; font: 400 15px/1.45 var(--font);
  border-left: 4px solid var(--a11y);
}
.a11y .captions { display: flex; }
.a11y body { padding-bottom: 160px; }
.cap-text { flex: 1; min-width: 0; }
.captions small { display: block; font: 400 11px var(--mono); color: #C9CFDA; margin-bottom: 4px; }
.captions b { font-weight: 700; }
.cap-ctrl { display: flex; align-items: center; gap: 4px; flex: none; }
.sr-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.sr-btn:hover { background: rgb(255 255 255 / .12); }
.sr-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-btn.play { width: 44px; height: 44px; background: #fff; color: var(--ink); }
.sr-btn.play:hover { background: #E8EBF0; }
.sr-btn.play svg { fill: currentColor; stroke: none; }
.sr-btn .i-pause, .sr-btn[data-state="playing"] .i-play { display: none; }
.sr-btn[data-state="playing"] .i-pause { display: block; }
.sr-by {
  margin-left: 6px; height: 36px; padding: 0 8px; background: transparent; color: #fff;
  border: 1px solid rgb(255 255 255 / .45); border-radius: 6px; font: 400 13px var(--font);
}
.sr-by option { color: var(--ink); }
.captions :focus-visible, .a11y .captions :focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: none; }
.sr-current { outline: 3px solid var(--a11y) !important; outline-offset: 6px; background: rgb(163 25 91 / .06); }
@media (max-width: 640px) {
  .captions { flex-direction: column; align-items: stretch; gap: 8px; bottom: 12px; }
  .cap-ctrl { justify-content: space-between; }
}
/* Site menu: inline on wide screens, a disclosure panel under the header on narrow ones */
.menu { display: flex; align-items: center; gap: 28px; }
/* A hairline between where to go (nav) and how to view the page (toggles) */
.menu .views { padding-left: 20px; border-left: 1px solid var(--rule); }
.menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-right: -8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font: 500 15px var(--font);
}
.menu-btn:hover { background: var(--hover); }
.menu-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.menu-btn .i-close, .menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
@media (max-width: 820px) {
  .top .bar { padding: 10px 16px; gap: 12px; position: relative; }
  .menu-btn { display: inline-flex; }
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 8px;
    background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 16px 20px;
    box-shadow: 0 16px 24px -20px rgb(29 36 51 / .35);
  }
  .menu.is-open { display: flex; }
  .top nav ul { flex-direction: column; gap: 0; }
  .top nav a { display: flex; align-items: center; min-height: 52px; font-size: 1.25rem; color: var(--ink); border-bottom: 1px solid var(--rule); }
  .top nav a[aria-current] { text-decoration: none; box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px; }
  .views { padding-top: 8px; justify-content: space-between; }
  .menu .views { padding-left: 0; border-left: 0; }
  .menu .view .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .menu .view::after { display: none; }
}

/* Hero */
.hero { padding-top: 120px; } /* bottom padding is set with the slider, to leave room for its caption */
.hero h1 { font-weight: 300; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.a11y .hero h1 { font-weight: 400; letter-spacing: -0.01em; }
.hero .lede { margin-top: 28px; color: var(--ink-2); font-size: 1.2em; line-height: 1.55; max-width: 34em; }
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; position: relative; }
.button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 600;
}
.button.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Sections */
section { padding: 72px 0; border-top: 1px solid var(--rule); }
/* Section headings outrank project titles. The number above each one works like a Figma frame label. */
main { counter-reset: part; }
section > .col > h2 {
  counter-increment: part; margin-bottom: 48px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}
.a11y section > .col > h2 { font-weight: 400; }
section > .col > h2::before {
  content: counter(part, decimal-leading-zero); content: counter(part, decimal-leading-zero) / "";
  display: block; margin-bottom: 14px; font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--spec);
}

.entry { position: relative; padding: 0 0 40px; }
.entry + .entry { padding-top: 32px; border-top: 1px solid var(--rule); }
.entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.entry h3 { font-size: 1.45em; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.entry .when { color: var(--ink-2); font-size: 0.9em; white-space: nowrap; }
.entry .org { color: var(--ink-2); margin-top: 2px; }
.entry p.body { margin-top: 12px; }
.entry ul.points { margin-top: 14px; display: grid; gap: 8px; }
.entry ul.points li { padding-left: 22px; position: relative; color: var(--ink-2); }
.entry ul.points li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; border-top: 1px solid var(--ink); }
.stack { margin-top: 14px; font-size: 0.9em; color: var(--ink-2); }
.stack b { color: var(--ink); font-weight: 600; }
.more { margin-top: 16px; display: inline-block; font-weight: 600; }
.featured h3 { font-size: 1.6em; font-weight: 300; letter-spacing: -0.015em; }
.a11y .featured h3 { font-weight: 400; }

.group { margin: 56px 0 8px; font-size: 1em; font-weight: 600; color: var(--ink-2); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.pair .entry { padding: 24px 0; border-top: 1px solid var(--rule); }
.pair .entry h3 { font-size: 1.15em; }
.pair .entry p { color: var(--ink-2); margin-top: 8px; font-size: 0.95em; }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } }


.about { display: grid; grid-template-columns: 132px 1fr; gap: 32px; align-items: start; position: relative; }
.about img { width: 100px; height: 100px; object-fit: cover; }
.about p + p { margin-top: 14px; color: var(--ink-2); }
.edu { margin-top: 28px; border-top: 1px solid var(--rule); }
.edu li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.95em; }
.edu span { color: var(--ink-2); }
@media (max-width: 560px) { .about { grid-template-columns: 1fr; } }

.contact h2 + p { font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; }
.a11y .contact h2 + p { font-weight: 400; }
.contact .email { display: inline-block; margin-top: 24px; font-size: 1.3em; }
.contact .links { margin-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; }

footer { border-top: 1px solid var(--rule); padding: 32px 0 56px; color: var(--ink-2); font-size: 0.9em; }
footer .copy { margin-top: 8px; }

/* Narrow screens: annotations sit inline under their element */
@media (max-width: 1180px) {
  .note { position: static; width: auto; margin: 10px 0 0; padding-left: 14px; border-left: 1px solid currentColor; text-align: left !important; }
  .note::before { display: none; }
  .measure-line { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .note { animation: draw .35s ease-out both; }
  @keyframes draw { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Note offsets, so each note lines up with the element it describes */
.hero .col > .note { top: 8px; }
.actions > .note { top: 6px; }
.featured > .note { top: 340px; }
.about > .note { top: 0; }

.compare { --pos: 50%; }
.c-label.is-spacer { visibility: hidden; }
.contact > .col > h2 { margin-bottom: 24px; }

/* Logos: one inline sprite, monochrome, inherits the text colour */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { width: 18px; height: 18px; flex: none; fill: currentColor; }
.logo.ph {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px dashed currentColor;
  font: 400 10px/1 var(--mono);
}

/* Stack on each project */
.stack-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 0.875rem; color: var(--ink-2); }
.stack-list li { display: inline-flex; align-items: center; gap: 7px; }

/* Skills as an index: tool, leader dots, where it was used */
#skills .intro { color: var(--ink-2); margin-bottom: 40px; max-width: 46ch; }
.index h3 { font-size: 0.95em; font-weight: 600; margin: 40px 0 6px; }
.index h3:first-child { margin-top: 0; }
.tools li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.t-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; align-self: center; }
.t-name .logo { color: var(--ink-2); }
.tools li:hover .t-name .logo { color: var(--ink); }
.t-dots { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); }
.t-used { text-align: right; color: var(--ink-2); font-size: 0.95em; }
.t-used a { color: var(--ink); }
@media (max-width: 560px) {
  .tools li { flex-wrap: wrap; gap: 2px 12px; }
  .t-dots { display: none; }
  .t-used { flex-basis: 100%; text-align: left; padding-left: 28px; }
}

/* Arriving from the index: mark the project you jumped to */
.entry:target h3 { text-decoration: underline 2px var(--spec); text-underline-offset: 6px; }
.a11y .entry:target h3 { text-decoration-color: var(--a11y); }

/* Skills: core tools up front, the wider set in one line, the full index on request */
.core { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.core li { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15em; font-weight: 500; }
.core .logo { width: 22px; height: 22px; }
.core .logo.ph { font-size: 11px; }
.also { margin-top: 28px; color: var(--ink-2); max-width: 60ch; }
.also-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.index-more { margin-top: 32px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.index-more summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer;
  font-weight: 600; list-style: none;
}
.index-more summary::-webkit-details-marker { display: none; }
.index-more summary::after {
  content: ""; width: 12px; height: 12px; flex: none; margin-right: 4px;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform .2s ease;
}
.index-more[open] summary::after { transform: rotate(45deg); }
.index-more[open] .index { padding: 8px 0 32px; }

/* How I work with AI */
.approach-lede { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 26ch; }
.a11y .approach-lede { font-weight: 400; }
.approach-body { margin-top: 20px; color: var(--ink-2); }
.approach-body code { font: 400 0.88em var(--mono); color: var(--ink); }

/* Case study page */
.cs-head { padding: 72px 0 56px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.9em; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 8px; }
.crumbs a { color: var(--ink-2); }
.cs-head h1 { margin-top: 32px; font-weight: 300; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.a11y .cs-head h1 { font-weight: 400; letter-spacing: -0.01em; }
.cs-head .lede { margin-top: 28px; color: var(--ink-2); font-size: 1.2em; line-height: 1.55; }
.spec { margin-top: 48px; border-top: 1px solid var(--rule); }
.spec div { display: grid; grid-template-columns: 7rem 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font: 400 12px/2 var(--mono); color: var(--ink-2); }
.a11y .spec dt { font: 700 0.9em/1.75 var(--font); color: var(--ink); }

.cs-wrap { border-top: 1px solid var(--rule); padding-top: 72px; }
.cs-body { max-width: var(--measure); margin: 0 auto; padding: 0 16px 96px; position: relative; counter-reset: sec; }
.a11y .cs-body { max-width: 760px; }
.cs-body > * + * { margin-top: 18px; }
.cs-body > h2 {
  counter-increment: sec; position: relative; margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--rule);
  font-size: 1.65em; font-weight: 300; line-height: 1.2; letter-spacing: -0.015em;
}
.cs-body > h2:first-child { margin-top: 0; }
.a11y .cs-body > h2 { font-weight: 400; }
.cs-body > h2::after {
  content: counter(sec, decimal-leading-zero); content: counter(sec, decimal-leading-zero) / "";
  position: absolute; top: -9px; left: 0; padding-right: 10px; background: var(--paper);
  font: 400 11px/1.5 var(--mono); color: var(--ink-2); letter-spacing: 0;
}
.cs-body > h3 { margin-top: 32px; font-size: 1.1em; font-weight: 600; }
.cs-body > h3 + p { margin-top: 6px; }
.cs-body code { font: 400 0.85em var(--mono); }
.dash { display: grid; gap: 10px; }
.dash li { position: relative; padding-left: 22px; }
.dash li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; border-top: 1px solid var(--ink); }

.figure-num { display: flex; align-items: center; gap: 24px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cs-body > .figure-num { margin: 32px 0; }
.figure-num .n { flex: none; font-weight: 300; font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.a11y .figure-num .n { font-weight: 400; }
.figure-num .t { color: var(--ink-2); max-width: 30ch; line-height: 1.45; }

.path { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.cs-body > .path { margin-top: 28px; }
.path caption { text-align: left; padding-bottom: 10px; font: 400 12px var(--mono); color: var(--ink-2); }
.a11y .path caption { font: 700 0.95em var(--font); color: var(--ink); }
.path th { text-align: left; font-weight: 600; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--ink); }
.path td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.path td:first-child { color: var(--ink-2); width: 45%; }

.steps { counter-reset: st; display: grid; gap: 10px; }
.steps li { counter-increment: st; position: relative; padding-left: 40px; }
.steps li::before {
  content: counter(st, lower-roman); content: counter(st, lower-roman) / "";
  position: absolute; left: 0; top: 0.45em; font: 400 11px/1.5 var(--mono); color: var(--ink-2);
}
.fields { display: flex; flex-wrap: wrap; gap: 8px; }
.fields code { display: inline-block; padding: 6px 10px; border: 1px solid var(--rule); font-size: 13px; }

.cs-end { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 40px; border-top: 1px solid var(--rule); }
.cs-body > .cs-end { margin-top: 80px; }

/* Contents: a sticky column on wide screens, a block above the text on narrow ones */
.toc[hidden] { display: none; }
.toc { max-width: var(--measure); margin: 0 auto 56px; padding: 0 16px; }
.toc p:first-child { font-weight: 600; font-size: 0.9em; margin-bottom: 10px; }
.toc ol { border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: 0.9em; line-height: 1.35; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc a[aria-current] { color: var(--ink); border-left-color: var(--ink); }
.toc-note { margin-top: 14px; font: 400 11px/1.55 var(--mono); color: var(--spec); }
.notes-off .toc-note, .a11y .toc-note { display: none; }
@media (min-width: 1181px) {
  .cs-wrap { display: grid; grid-template-columns: 1fr minmax(0, var(--measure)) 1fr; align-items: start; }
  .toc { grid-column: 1; grid-row: 1; justify-self: end; width: 180px; margin: 0 48px 0 0; padding: 0; position: sticky; top: 96px; }
  .a11y nav.toc[data-landmark] { position: sticky; }
  .cs-body { grid-column: 2; grid-row: 1; width: 100%; }
}
@media (min-width: 1181px) { .a11y .cs-wrap { grid-template-columns: 1fr minmax(0, 760px) 1fr; } }
@media (max-width: 560px) { .spec div { grid-template-columns: 5.25rem 1fr; gap: 12px; } }

/* Experience: scope sentence, then a mono "Delivered" label over the achievements */
.entry p.delivered { margin-top: 20px; font: 400 12px/1.5 var(--mono); color: var(--spec); }
.entry p.delivered + ul.points { margin-top: 8px; }

/* Hero on phones: headline, intro and both buttons fit in the first screen (375 x 667) */
@media (max-width: 560px) {
  .hero { padding-top: 20px; }
  .hero h1 { font-size: 2rem; line-height: 1.08; }
  .hero .lede { margin-top: 16px; font-size: 1.05em; line-height: 1.5; }
  .hero .lede + .lede { margin-top: 8px; }
  .actions { margin-top: 20px; gap: 10px; }
}

/* Demo recording on project pages: wider than the text column, reserved aspect ratio, poster until play */
.cs-body .demo { margin-top: 24px; }
.cs-body .demo video { display: block; width: 100%; height: auto; aspect-ratio: 19 / 12; border: 1px solid var(--rule); background: var(--paper); }
.cs-body .demo figcaption { margin-top: 10px; font-size: 0.9em; color: var(--ink-2); }
/* Screenshots on project pages */
.cs-body .shot { margin-top: 24px; }
.cs-body .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--paper); }
.cs-body .shot-phone { max-width: 320px; }
.cs-body .links { margin-top: 12px; }
.cs-body .links .sep { margin: 0 6px; color: var(--ink-2); }
.cs-body .shot figcaption { margin-top: 10px; font-size: 0.9em; color: var(--ink-2); }
.entry .sep { margin: 0 6px; color: var(--ink-2); }