/* Fewthings — brand system: amber lead, Geist, 12-column grid, 8 px rhythm.
   Sizes are in rem so the page grows with the visitor's text-size setting. 1rem = 16px by default.

   The rules this file is checked against:
   - Spacing only from 4, 8, 16, 24, 32, 48, 64, 96, 128 (as --tight … --section).
   - Between sections: 64 / 96 / 128. The top of a page and the hero use one step less (48 / 64 / 96).
   - Type only from 96, 72, 56, 40, 28, 20, 16, 14, 12; line heights are multiples of 4.
   - Radii only 8, 16, 24 or pill; app icons 24 % of their width.
   - Three depths: flat, resting (--depth-1), floating (--depth-2).
   - Sections are separated by space or by a change of background, never by a line. Lines only in the footer.
   - One amber action per view. Amber elsewhere only as illustration.
   - Things that are not clickable do not react.
   - A surface colour appears at least twice on a page, or not at all. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #e8e8ed;
  --rule: #d2d2d7;
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --ink: #1d1d1f;
  --amber: #f0b233;
  --amber-300: #ffd27a;
  --amber-400: #f5bd45;
  --amber-600: #b57a00;
  --amber-700: #8a5a00;
  --amber-50: #fff6df;
  --on-amber: #1a1200;
  --dark: #0b0b0a;
  --dark-2: #2c2c2e;
  --dark-3: #3a3a3c;
  --on-dark: #f5f5f7;

  /* roles that change between light and dark */
  --raised: #ffffff;                    /* small raised pieces: chips, cards on the warm band */
  --seg-on: #ffffff;
  --glow: 1;
  --tint: var(--amber-50);              /* the warm surface */
  --accent-text: var(--amber-700);      /* amber as text: links, the hero word */
  --on-ink: #ffffff;                    /* text on an ink-coloured fill */
  --hover: rgba(29,29,31,0.06);
  --glass: rgba(255,255,255,0.78);
  --glass-edge: rgba(255,255,255,0.7);
  --feature-bg: var(--dark);            /* the one contrasting card */
  --feature-fg: var(--on-dark);
  --feature-sub: var(--faint);
  --feature-sq: var(--dark-2);
  --panel-bg: var(--dark);

  /* vertical rhythm */
  --tight: 0.25rem;   /* 4  a label and its value */
  --close: 0.5rem;    /* 8  parts of one component */
  --related: 1rem;    /* 16 a headline and its paragraph */
  --group: 1.5rem;    /* 24 text and its buttons; between cards */
  --inset: 2rem;      /* 32 padding inside a large card */
  --block: 3rem;      /* 48 a section's title and its content */
  --lead: 3rem;       /* 48 / 64 / 96 top of a page; around the hero */
  --section: 4rem;    /* 64 / 96 / 128 between sections */
  --gutter: 1rem;     /* 16 / 40 / 80 page margin */
  --max: 80rem;       /* 1280 */
  --bar: 4.5rem;      /* the menu: 16 from the top + 56 tall */

  --depth-1: 0 1px 2px rgba(29,29,31,0.05), 0 8px 24px -8px rgba(29,29,31,0.10);
  --depth-2: 0 2px 4px rgba(29,29,31,0.06), 0 24px 48px -16px rgba(29,29,31,0.24);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;
  color-scheme: light dark;
}
/* Dark: the apps' own surfaces. Follows the device setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0a;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --rule: #3a3a3c;
    --muted: #a1a1a6;
    --ink: #f5f5f7;
    --raised: #2c2c2e;
    --seg-on: #3a3a3c;
    --tint: #211a0a;
    --glow: 0.6;
    --accent-text: var(--amber);
    --on-ink: #0b0b0a;
    --hover: rgba(255,255,255,0.1);
    --glass: rgba(28,28,30,0.78);
    --glass-edge: rgba(255,255,255,0.1);
    --feature-bg: #f5f5f7;
    --feature-fg: #1d1d1f;
    --feature-sub: #6e6e73;
    --feature-sq: #d2d2d7;
    --panel-bg: #1c1c1e;
    --depth-1: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5);
    --depth-2: 0 2px 4px rgba(0,0,0,0.3), 0 24px 48px -16px rgba(0,0,0,0.6);
  }
}
@media (min-width: 48rem) { :root { --lead: 4rem; --section: 6rem; --gutter: 2.5rem; } }
@media (min-width: 75rem) { :root { --lead: 6rem; --section: 8rem; --gutter: 5rem; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
html.locked { overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 0.5rem; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.skip { position: absolute; top: var(--close); left: var(--close); z-index: 40; padding: var(--close) var(--related); border-radius: 0.5rem; background: var(--ink); color: var(--on-ink); font-weight: 600; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Type: steps of the scale per screen size, never in-between values */
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
h1 { font-size: 2.5rem; line-height: 2.75rem; letter-spacing: -0.045em; }
h2 { font-size: 1.75rem; line-height: 2rem; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 48rem) { h1 { font-size: 4.5rem; line-height: 4.75rem; } h2 { font-size: 2.5rem; line-height: 2.75rem; } }
@media (min-width: 75rem) { h1 { font-size: 6rem; line-height: 6rem; } }
.label { font-family: var(--mono); font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 1.25rem; line-height: 1.75rem; color: var(--muted); max-width: 28rem; }
.amber-text { color: var(--accent-text); }

/* Buttons: feedback on press, instantly */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--close); min-height: 3rem; padding: 0 var(--group); border: 0; border-radius: 999px; font-size: 1rem; font-weight: 600; background: var(--amber); color: var(--on-amber); transition: background-color 120ms ease-out, box-shadow 240ms var(--ease), transform 100ms ease-out; }
.btn:hover { background: var(--amber-400); box-shadow: 0 8px 24px -8px rgba(240,178,51,0.9); }
.btn:active { transform: scale(0.97); background: var(--amber-600); box-shadow: none; }
.btn.quiet { background: var(--surface); color: var(--ink); }
.btn.quiet:hover { background: var(--surface-2); box-shadow: none; }
.btn.quiet:active { background: var(--rule); }
.btn.on-dark { background: var(--dark-2); color: var(--on-dark); }
.btn.on-dark:hover { background: var(--dark-3); box-shadow: none; }
.btn.on-dark.done { background: var(--on-dark); color: var(--dark); }
.btn svg { width: 1rem; height: 1rem; }
.btn-row { display: flex; gap: var(--related); flex-wrap: wrap; }

/* Header: sits on the grid at the top, condenses to a floating pill on scroll */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: var(--related) var(--gutter) 0; pointer-events: none; }
.float { pointer-events: auto; max-width: var(--max); margin: 0 auto; min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--related); padding: var(--close) 0; border-radius: 999px; background: rgba(255,255,255,0); box-shadow: 0 0 0 rgba(0,0,0,0); transition: max-width 420ms var(--ease), padding 420ms var(--ease), background-color 240ms ease-out, box-shadow 240ms ease-out; }
.condensed .float { max-width: 45rem; padding: var(--close) var(--close) var(--close) var(--related); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--hover), var(--depth-2); }
.brand { display: inline-flex; align-items: center; gap: var(--close); font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.02em; }
.brand svg { width: 1.5rem; height: 1.5rem; }
.nav { display: flex; align-items: center; gap: var(--close); }
.nav a { display: none; align-items: center; min-height: 2.5rem; padding: 0 var(--related); border-radius: 999px; font-size: 0.875rem; font-weight: 500; transition: background-color 120ms ease-out, transform 100ms ease-out; }
.nav a:hover { background: var(--hover); }
.nav a:active { transform: scale(0.97); }
.nav a.current { background: var(--hover); }
.nav a.cta { display: inline-flex; background: var(--ink); color: var(--on-ink); font-weight: 600; }
.nav a.cta:hover { background: var(--ink); opacity: 0.86; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: var(--surface); transition: background-color 120ms ease-out, transform 100ms ease-out; }
.menu-btn:active { transform: scale(0.94); }
.menu-btn svg { width: 1.25rem; height: 1.25rem; }
/* 40 tall to the eye, 48 to the finger */
.nav a, .menu-btn { position: relative; }
.nav a::after, .menu-btn::after { content: ""; position: absolute; inset: -0.25rem 0; }
@media (min-width: 48rem) { .nav a { display: inline-flex; } .menu-btn { display: none; } }

/* Phone menu: a full page that grows out of the button and closes back into it */
.sheet { position: fixed; inset: 0; z-index: 30; background: var(--dark); color: var(--on-dark); display: flex; flex-direction: column; padding: var(--related) var(--gutter) var(--block); clip-path: circle(0 at var(--mx, 90%) var(--my, 2.75rem)); visibility: hidden; transition: clip-path 520ms var(--ease), visibility 0s linear 520ms; }
.sheet.open { clip-path: circle(150% at var(--mx, 90%) var(--my, 2.75rem)); visibility: visible; transition: clip-path 520ms var(--ease), visibility 0s; }
.sheet .row { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
.sheet .menu-btn { display: inline-flex; background: var(--dark-2); color: var(--on-dark); }
.sheet nav { margin-top: auto; display: flex; flex-direction: column; gap: var(--close); }
.sheet nav a { font-size: 2.5rem; line-height: 3rem; font-weight: 700; letter-spacing: -0.03em; opacity: 0; transform: translateY(1rem); transition: opacity 300ms ease-out, transform 420ms var(--ease); }
.sheet.open nav a { opacity: 1; transform: none; }
.sheet nav a:active { color: var(--amber); }
@media (hover: hover) { .sheet nav a:hover { color: var(--amber); } }
.sheet.open nav a:nth-child(1) { transition-delay: 120ms; }
.sheet.open nav a:nth-child(2) { transition-delay: 170ms; }
.sheet.open nav a:nth-child(3) { transition-delay: 220ms; }
.sheet.open nav a:nth-child(4) { transition-delay: 270ms; }
.sheet .small { margin-top: var(--block); color: var(--faint); font-size: 0.875rem; line-height: 1.25rem; }

/* Sections: one --section of space between them. Two plain sections in a row share it; a coloured band keeps its own. */
section { padding: var(--section) 0; }
.plain + .plain { padding-top: 0; }
.band { background: var(--tint); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--group); row-gap: var(--block); }

/* Hero */
.hero { padding: calc(var(--bar) + var(--lead)) 0 var(--lead); }
.hero .grid { align-items: center; }
.hero .copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { margin-top: var(--related); }
.hero .lead, .hero .btn-row { margin-top: var(--group); }
@media (min-width: 62.5rem) { .hero .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .hero .copy { grid-column: span 7; } .hero .stack { grid-column: span 5; } }

/* Icon stack: an illustration. It arrives once and then stays still. */
.stack { position: relative; width: min(27.5rem, 76vw); aspect-ratio: 1; justify-self: center; }
@media (min-width: 62.5rem) { .stack { justify-self: end; } }
.stack .glow { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,178,51,0.55) 0%, rgba(255,210,122,0.25) 55%, rgba(255,210,122,0) 100%); opacity: var(--glow); }
.tile-in { position: absolute; }
/* The entrance plays on larger screens only: on phones the hero is complete at first paint. */
@media (min-width: 48rem) { .tile-in { animation: glide 600ms var(--ease) both; } }
.tile-in.a { left: 2%; top: 10%; width: 44%; height: 44%; animation-delay: 80ms; }
.tile-in.b { right: 0; top: 34%; width: 40%; height: 40%; animation-delay: 160ms; }
.tile-in.c { left: 24%; top: 30%; width: 56%; height: 56%; animation-delay: 240ms; }
@keyframes glide { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
.tile { width: 100%; height: 100%; border-radius: 24%; display: grid; place-items: center; color: var(--amber); background: radial-gradient(120% 120% at 30% 0%, var(--dark-2) 0%, var(--dark) 62%); box-shadow: var(--depth-2), inset 0 0 0 1px rgba(255,255,255,0.08); transform: rotate(var(--r, 0deg)); }
.tile svg { width: 44%; height: 44%; }
.tile.main { color: var(--on-amber); background: radial-gradient(120% 120% at 30% 0%, var(--amber-300) 0%, var(--amber) 60%); box-shadow: var(--depth-2), inset 0 1px 0 rgba(255,255,255,0.5); }
.tile-in.a .tile { --r: -9deg; } .tile-in.b .tile { --r: 11deg; } .tile-in.c .tile { --r: 3deg; }

/* Section heads: headline, 16, paragraph; then 48 to the content */
.head { display: flex; flex-direction: column; gap: var(--related); max-width: 35rem; margin-bottom: var(--block); }
@media (min-width: 62.5rem) { .head { max-width: calc((100% - 11 * var(--group)) / 2 + 5 * var(--group)); } .duo .head { max-width: none; } .hero .stack { width: 100%; } }
.head p { color: var(--muted); font-size: 1.25rem; line-height: 1.75rem; }

/* Approach: four cards. Picture, 24, title, 8, text. Not clickable, so they do not react. */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--group); }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62.5rem) { .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); } .bento .card:nth-child(1), .bento .card:nth-child(4) { grid-column: span 7; } .bento .card:nth-child(2), .bento .card:nth-child(3) { grid-column: span 5; } }
.card { background: var(--surface); border-radius: 1.5rem; padding: var(--inset); display: flex; flex-direction: column; gap: var(--group); }
.card.dark { background: var(--feature-bg); color: var(--feature-fg); }
.card.dark p { color: var(--feature-sub); }
.card.dark .sq { background: var(--feature-sq); }
.card.warm { background: var(--tint); }
.card h3 { margin-bottom: var(--close); }
.card p { color: var(--muted); max-width: 26rem; }
.pic { display: flex; align-items: center; gap: var(--close); flex-wrap: wrap; min-height: 3.5rem; }
.pic .sq { width: 2.5rem; height: 2.5rem; border-radius: 24%; background: var(--surface-2); }
.pic .sq.one { width: 3.5rem; height: 3.5rem; background: var(--amber); }
.pic .toggle { width: 3.5rem; height: 2rem; border-radius: 999px; background: var(--amber); padding: var(--tight); display: flex; }
.pic .toggle i { display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: var(--depth-1); }
.pic .seg { display: flex; padding: var(--tight); border-radius: 999px; background: var(--surface-2); font-size: 0.875rem; line-height: 1.5rem; font-weight: 500; }
.pic .seg span { padding: var(--tight) var(--related); border-radius: 999px; }
.pic .seg span.on { background: var(--seg-on); box-shadow: var(--depth-1); }
.pic .chip { display: inline-flex; align-items: center; gap: var(--close); min-height: 2.5rem; padding: 0 var(--related); border-radius: 0.5rem; background: var(--raised); box-shadow: var(--depth-1); font-family: var(--mono); font-size: 0.75rem; line-height: 1rem; }
.pic .chip svg { width: 1rem; height: 1rem; color: var(--accent-text); }
.pic .tag { display: inline-flex; align-items: center; gap: var(--close); min-height: 2.5rem; padding: 0 var(--related); border-radius: 999px; background: var(--raised); box-shadow: var(--depth-1); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; }
.pic .tag i { display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--amber); }
.pic .tag span { color: var(--muted); font-weight: 400; }

/* The pictures play once, slowly, after the card has settled and sits well inside the screen (.play, set by the script).
   They never react to the pointer. */
.pic .sq.one, .pic .toggle, .pic .toggle i, .pic .seg .on, .pic .chip, .pic .tag i, .pic .tag span { transition: transform 900ms var(--ease), background-color 700ms ease-out, box-shadow 700ms ease-out, opacity 700ms ease-out; }
.pic .toggle { justify-content: flex-start; }
.pic .toggle i { transform: translateX(1.5rem); }
.pic .chip:nth-child(2) { transition-delay: 220ms; }
.pic .chip:nth-child(3) { transition-delay: 440ms; }
.pic .tag span { transition-delay: 500ms; }
.js .card:not(.play) .sq.one { transform: scale(0.714); background: var(--feature-sq); }
.js .card:not(.play) .toggle { background: var(--rule); }
.js .card:not(.play) .toggle i { transform: none; }
.js .card:not(.play) .seg .on { background: rgba(255,255,255,0); box-shadow: none; }
.js .card:not(.play) .chip { opacity: 0; transform: translateY(1rem); }
.js .card:not(.play) .tag i { transform: scale(0); }
.js .card:not(.play) .tag span { opacity: 0; }

/* Studio: a warm band; white cards on it; a swipeable row on phones */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block) var(--group); align-items: center; }
.duo .head { margin-bottom: 0; }
@media (min-width: 62.5rem) { .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); } .duo .head { grid-column: span 5; } .duo .facts-wrap { grid-column: span 7; } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--group); }
.fact { background: var(--raised); border-radius: 1rem; padding: var(--group); display: flex; flex-direction: column; gap: var(--close); box-shadow: var(--depth-1); }
.fact .ic { width: 3rem; height: 3rem; border-radius: 1rem; background: var(--tint); color: var(--accent-text); display: grid; place-items: center; margin-bottom: var(--close); }
.fact .ic svg { width: 1.5rem; height: 1.5rem; }
.fact p { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
@media (max-width: 47.99rem) {
  .facts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: calc(-1 * var(--close)) calc(-1 * var(--gutter)) calc(-1 * var(--group)); padding: var(--close) var(--gutter) var(--group); scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .facts::-webkit-scrollbar { display: none; }
  .fact { flex: 0 0 80%; scroll-snap-align: start; }
  .facts { cursor: grab; }
  /* once, when the row comes into view: a small slide that shows there is more to the side */
  .facts.nudge .fact { animation: nudge 900ms var(--ease) 400ms 1 both; }
  @keyframes nudge { 0%, 100% { transform: none; } 45% { transform: translateX(-2rem); } }
  .facts.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .facts-wrap .dots { display: flex; justify-content: center; gap: var(--close); margin-top: var(--group); }
  .dots i { display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rule); transition: background-color 120ms ease-out; }
  .dots i.on { background: var(--ink); }
}
.dots { display: none; }

/* Contact: dark panel, centred, amber glow rising from the bottom centre behind the buttons */
.panel { border-radius: 1.5rem; padding: var(--group); background: radial-gradient(60% 90% at 50% 120%, rgba(240,178,51,0.6) 0%, rgba(240,178,51,0.18) 50%, rgba(240,178,51,0) 100%), var(--panel-bg); color: var(--on-dark); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--group); justify-items: center; text-align: center; }
.panel .btn-row { justify-content: center; }
@media (min-width: 48rem) { .panel { padding: var(--block); } }
@media (min-width: 62.5rem) { .panel { padding: 6rem 4rem; } }
.panel p { color: var(--faint); margin: var(--related) auto 0; max-width: 28rem; }
.panel p a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 0.25em; }

/* Footer: set apart by its background. The only place with a line.
   Spacing: 48 above the columns, 48 from the columns to the line, then 24 above and 24 below the copyright row. */
footer { background: var(--surface); padding: var(--block) 0 var(--group); font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.fcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--inset) var(--group); }
@media (min-width: 48rem) { .fcols { row-gap: var(--block); } }
@media (min-width: 48rem) { .fcols { grid-template-columns: repeat(12, minmax(0, 1fr)); } .fcols > div { grid-column: span 2; } .fcols > div:first-child { grid-column: span 6; } }
.fcols > div { display: flex; flex-direction: column; gap: var(--close); align-items: flex-start; }
.fcols .brand { color: var(--ink); font-size: 1.75rem; line-height: 2rem; }
.fcols .brand svg { width: 2rem; height: 2rem; }
.fcols h2 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.fcols a { transition: color 120ms ease-out; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; }
.fcols a:hover, .fcols a:active { color: var(--ink); text-decoration-color: currentColor; }
.fcols a.brand, .fcols a.brand:hover { text-decoration: none; }
.fcols > .fine { grid-column: 1 / -1; padding-top: var(--group); border-top: 1px solid var(--rule); font-size: 0.75rem; line-height: 1rem; flex-direction: row; flex-wrap: wrap; gap: var(--tight) var(--group); justify-content: space-between; align-items: center; }

@media (pointer: coarse) { .fcols > div { gap: 0; } .fcols a { min-height: 3rem; display: inline-flex; align-items: center; } .fcols h2 { margin-bottom: var(--close); } }

/* Sections arrive once */
.js .reveal { opacity: 0; transform: translateY(1rem); transition: opacity 600ms ease-out, transform 600ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Text pages */
.prose { max-width: calc(45rem + 2 * var(--gutter)); padding-top: calc(var(--bar) + var(--lead)); padding-bottom: var(--section); }
.prose h1 { font-size: 2.5rem; line-height: 2.75rem; letter-spacing: -0.03em; margin-bottom: var(--related); }
@media (min-width: 48rem) { .prose h1 { font-size: 3.5rem; line-height: 3.75rem; } }
.prose h2 { font-size: 1.75rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 600; margin: var(--block) 0 var(--related); }
.prose h3 { margin: var(--group) 0 var(--close); }
.prose p, .prose li { margin-bottom: var(--related); }
.prose ul { padding-left: var(--group); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.25em; }
.prose .date { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; margin-bottom: var(--group); }
.prose .intro { font-size: 1.25rem; line-height: 1.75rem; color: var(--muted); margin-bottom: var(--inset); }
.prose dl div { background: var(--surface); border-radius: 1rem; padding: var(--related) var(--group); margin-bottom: var(--close); }
.prose dt { font-weight: 600; margin-bottom: var(--tight); }
.prose dd { color: var(--muted); }
details { background: var(--surface); border-radius: 1rem; padding: 0 var(--group); margin-bottom: var(--close); }
summary { cursor: pointer; font-weight: 600; padding: var(--related) 0; list-style: none; display: flex; justify-content: space-between; gap: var(--related); min-height: 3rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-weight: 400; }
details[open] summary::after { content: "–"; }
details p { padding-bottom: var(--related); color: var(--muted); }
.applist { display: grid; gap: var(--close); }
.prose .applist a { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-radius: 1rem; padding: var(--related) var(--group); font-weight: 600; min-height: 3.5rem; color: var(--ink); text-decoration: none; transition: background-color 120ms ease-out, transform 100ms ease-out; }
.prose .applist a:hover { background: var(--surface-2); }
.prose .applist a:active { transform: scale(0.99); }
.applist a span { color: var(--muted); font-weight: 400; }

/* Reduced motion: gentler, not absent. Cross-fades stay, movement goes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @media (min-width: 48rem) { .tile-in { animation: fade 300ms ease-out both; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .js .reveal { transform: none; transition: opacity 300ms ease-out; }
  .facts.nudge .fact { animation: none; }
  .pic .sq.one, .pic .toggle, .pic .toggle i, .pic .seg .on, .pic .chip, .pic .tag i, .pic .tag span { transition: opacity 300ms ease-out, background-color 300ms ease-out; transition-delay: 0s; }
  .js .card:not(.play) .sq.one, .js .card:not(.play) .chip, .js .card:not(.play) .toggle i, .js .card:not(.play) .tag i { transform: none; }
  .js .card:not(.play) .toggle i { transform: translateX(1.5rem); }
  .btn:active, .nav a:active, .menu-btn:active { transform: none; }
  .float { transition: background-color 240ms ease-out, box-shadow 240ms ease-out; }
  .sheet, .sheet.open { clip-path: none; opacity: 0; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
  .sheet.open { opacity: 1; transition: opacity 200ms ease-out, visibility 0s; }
  .sheet nav a { transform: none; transition: opacity 200ms ease-out; }
}
/* Less transparency: the frosted menu turns solid */
@media (prefers-reduced-transparency: reduce) {
  .condensed .float { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast: solid surfaces, visible borders */
@media (prefers-contrast: more) {
  :root { --muted: #48484a; --faint: #d2d2d7; --rule: #6e6e73; --feature-sub: #d2d2d7; }
  .condensed .float { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 2px var(--ink); }
  .btn.quiet, .menu-btn, .card, .fact { box-shadow: inset 0 0 0 1px var(--ink); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --muted: #d2d2d7; --rule: #a1a1a6; --feature-sub: #48484a; }
}
/* Windows high-contrast themes: the system picks the colours, so shapes need outlines to stay visible */
@media (forced-colors: active) {
  .btn, .nav a.cta, .menu-btn, .card, .fact, .panel, .condensed .float, .chip, .tag, .seg, .toggle, .sq, details, .prose dl div, .applist a { outline: 1px solid ButtonText; outline-offset: -1px; }
  .stack .glow { display: none; }
  .tile { forced-color-adjust: none; }
}
@media print { .top, .sheet, .btn, .stack { display: none; } .hero { padding-top: 0; } }