/* Fonts are served from this site (no Google request, so no visitor data goes to Google). */
/* Barlow for text; Barlow Condensed Italic for the name and headings, registered upright as 'Jersey' so every var(--display) is italic without its own font-style. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jersey'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jersey'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jersey'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-800i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jersey'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-800i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* my middle.: one stylesheet for the whole site.
   Cut over colour: the kit is black, the page is light and cool so the colour photos lead,
   petrol blue is the one brand colour. Shapes are cut on the slant of the mark's two blades. */
:root {
  color-scheme: light;
  --bg: #f5f7f7;          /* the page: cool and light, sky and pale sand, not paper */
  --surface: #e9eeee;     /* one step down: bands, inputs */
  --surface-2: #d5dddd;
  --text: #111516;
  --text-2: #4a5254;      /* body copy, 7.6:1 */
  --text-3: #5f686a;      /* captions, 5.4:1 */
  --line: rgb(17 21 22 / .13);
  --panel: #e6ebeb;       /* behind the drawings */
  --panel-2: #dce3e3;
  --ink: #111516;         /* the kit itself, in the drawings */
  --print: #f2f3f1;       /* the off-white print and stitching on the kit */
  --on-accent: #111516;   /* text on petrol: ink, since the bright petrol (3 Nov) is too light for white (ink on it 6.2:1) */
  --white: #ffffff;       /* white surfaces: the light button, rings, checked pills */
  --petrol: #00a1db;      /* the one colour: bright petrol blue (since 3 Nov; was #0a72a3) */
  --petrol-print: #00a1db;  /* petrol as printed on the kit */
  --petrol-text: #0078a3;   /* petrol for text and lines on the light page, 4.6:1 */
  --petrol-sheen: linear-gradient(135deg, #4cc1eb 0%, #00a1db 18%, #008ec2 100%); /* the shine: a light edge, then deep; ink stays above 4.9:1 across it */
  --font: "Barlow", system-ui, sans-serif;
  --display: "Jersey", "Barlow", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --gap: clamp(88px, 11vw, 160px);
  --slant: clamp(14px, 3vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; }
html { interpolate-size: allow-keywords; scrollbar-color: #b7c2c3 var(--bg); }
html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font); accent-color: var(--petrol-text); caret-color: var(--petrol-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--petrol-text); outline-offset: 3px; }
::selection { background: var(--petrol); color: var(--on-accent); }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.nw { white-space: nowrap; }
.dot { color: var(--petrol-print); }
/* the i-dot in the wordmark: a petrol copy of the i on top, cut just above the stem (Barlow Condensed: stem top .52em, dot .56–.74em;
   the glyph sits centred in the box, .4em above the baseline). Negative side insets keep the italic overhang. */
.i { position: relative; display: inline-block; }
.i::after { content: "i"; position: absolute; inset: 0; color: var(--petrol-print); clip-path: inset(0 -.3em calc(50% + .14em) -.3em); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.02; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 4.6vw, 64px); }
h2 { font-size: clamp(40px, 5.8vw, 84px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); }
p { text-wrap: pretty; }
.lede, .head p { margin-top: 18px; max-width: 52ch; color: var(--text-2); font-size: clamp(17px, 1.4vw, 19px); }
.head { margin-bottom: clamp(32px, 4vw, 52px); }

/* links and buttons: underlines grow from the middle; buttons are cut on the slant */
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; background: linear-gradient(currentColor, currentColor) 50% calc(100% - 9px) / 100% 1px no-repeat; transition: background-size .3s var(--ease); }
.textlink:hover { background-size: 40% 1px; }
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; border: 0; background: none; color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .15s ease; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--petrol-sheen) var(--petrol); transform: skewX(-10deg); box-shadow: 0 12px 24px -14px rgb(0 110 150 / .55); transition: transform .3s var(--ease), filter .2s ease; }
.btn:hover::before { transform: skewX(-10deg) scaleX(1.04); filter: brightness(1.18); }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: progress; opacity: .7; }
.btn.light { color: var(--ink); }
.btn.light::before { background: var(--white); box-shadow: 0 10px 24px -14px rgb(0 30 45 / .5); }
.btn.block { display: flex; width: 100%; }

/* header: logo left, three words right */
.top { display: flex; justify-content: space-between; align-items: center; padding-block: 14px; position: relative; z-index: 2; }
.top nav { display: flex; gap: 22px; color: var(--text-2); }
.top a, .site-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.top nav a, .site-foot nav a { background: linear-gradient(currentColor, currentColor) 50% calc(100% - 10px) / 0 1px no-repeat; transition: background-size .3s var(--ease), color .2s ease; }
.top nav a:hover, .site-foot nav a:hover { background-size: 100% 1px; color: var(--text); }
@media (max-width: 520px) { .top nav a:not(:last-child) { display: none; } }

/* logo: a ball in the middle, between two players */
.logo { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo .mark { width: 34px; height: 19px; flex: none; overflow: visible; }
.logo .bar { fill: currentColor; }
.logo .ball { fill: url(#mm-ball) var(--petrol); }
.logo .word { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: 0; line-height: 1; }

/* where a piece stands */
.chip { display: inline-block; padding: 5px 12px 6px; font-size: 13px; font-weight: 700; background: var(--petrol-sheen) var(--petrol); color: var(--on-accent); transform: skewX(-10deg); }
.status { font-size: 14px; font-weight: 700; color: var(--petrol-text); }

/* ---------- photos: one grade for every photo, AI draft or real ----------
   Colour stays in (sand, skin, sky), cooled toward petrol so other brands' loud yellows
   sit back and the kit stays the blackest thing in frame. */
.photo { position: relative; margin: 0; overflow: hidden; background: var(--surface); aspect-ratio: 4/5; clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08) brightness(.97); transition: transform 1.2s var(--ease), filter .6s ease; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgb(13 111 147 / .55), rgb(0 53 80 / .7)); mix-blend-mode: soft-light; pointer-events: none; }
a:hover .photo img, .photo:hover img { transform: scale(1.03); filter: saturate(.95) contrast(1.08); }
.photo.wide { aspect-ratio: 3/2; }

/* ---------- flat drawings: the cut, the same way the makers get it ---------- */
.flat .body, .flat .strap { fill: var(--ink); }
.flat .strap { stroke: var(--ink); stroke-width: 12; }
.flat .edge { fill: none; stroke: var(--petrol-print); stroke-width: 5; stroke-linecap: round; }
.flat .stitch { fill: none; stroke: var(--print); stroke-width: 1; stroke-dasharray: 3 2; opacity: .5; }
.flat .cord { fill: none; stroke: var(--print); stroke-width: 2; stroke-linecap: round; }
.flat .hole { fill: var(--panel); stroke: var(--petrol-print); stroke-width: 4; }
.flat .m { fill: var(--print); }
.flat .b { fill: var(--petrol-print); }
.flat .w { font-family: var(--display); font-weight: 700; fill: var(--print); letter-spacing: 0; }
.flats { position: relative; display: grid; place-items: center; background: var(--panel); aspect-ratio: 5/4; padding: 9%; transition: background-color .3s ease; }
.flats .flat { grid-area: 1 / 1; width: 100%; transition: opacity .45s var(--ease), transform .6s var(--ease); }
.flats .flat + .flat { opacity: 0; transform: translateX(6%); }
:is(a, button):hover > .flats, :is(a, button):focus-visible > .flats { background: var(--panel-2); }
:is(a, button):hover > .flats .flat:first-child, :is(a, button):focus-visible > .flats .flat:first-child { opacity: 0; transform: translateX(-6%); }
:is(a, button):hover > .flats .flat + .flat, :is(a, button):focus-visible > .flats .flat + .flat { opacity: 1; transform: none; }

/* ---------- home: hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: min(880px, calc(100dvh - 72px)); }
.hero-text { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: 32px var(--gutter) clamp(40px, 6vw, 88px); padding-left: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); }
/* the line fills its column, at the weight of the big "my middle." further down */
.hero h1 { font-size: clamp(56px, 14.5vw, 210px); font-weight: 800; letter-spacing: -0.03em; line-height: .86; margin-left: -0.04em; }
.hero h1 .line { display: block; white-space: nowrap; }
.hero p { max-width: 36ch; color: var(--text-2); font-size: clamp(17px, 1.4vw, 19px); }
.countdown { display: grid; gap: 6px; }
.hero .countdown p { max-width: none; font-size: 14px; }
.countdown .label { font-weight: 700; color: var(--petrol-text); }
.countdown .cd { display: flex; gap: clamp(14px, 2vw, 24px); color: var(--text-3); }
.countdown .cd:empty { display: none; }
.cd span { display: flex; align-items: baseline; gap: 5px; }
.cd b { font: 800 clamp(30px, 3vw, 40px)/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero .photo { aspect-ratio: auto; min-height: 420px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); container-type: size; }
/* A petrol ball pinned to each piece of kit in the hero photo. The maths repeats object-fit: cover
   with the img's object-position (45% 50%) and play.jpg's shape (1600 × 1067), so the ball stays on the kit at any crop. */
.spot { --ratio: 1.4995; --w: max(100cqw, 100cqh * var(--ratio)); --h: max(100cqh, 100cqw / var(--ratio));
  position: absolute; z-index: 1; width: 0; height: 0;
  left: calc((100cqw - var(--w)) * .45 + var(--x) * var(--w)); top: calc((100cqh - var(--h)) * .5 + var(--y) * var(--h)); }
.spot { --d: 16px; }
.spot::before, .spot::after { content: ""; position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d); border-radius: 50%; }
.spot::before { background: var(--petrol-sheen) var(--petrol); box-shadow: 0 0 0 3px var(--white), 0 6px 16px rgb(0 30 45 / .45); }
.spot .chip { position: absolute; left: 20px; top: -15px; white-space: nowrap; box-shadow: 0 10px 20px -10px rgb(0 30 45 / .6); transition: filter .2s ease; }
.spot.left .chip { left: auto; right: 20px; }
.spot:is(:hover, :focus-visible) .chip { filter: brightness(1.2); }
/* On a phone the two labels would cover the players: just the balls, bigger to tap; the label stays for screen readers */
@media (max-width: 520px) {
  .spot { --d: 24px; }
  .spot .chip { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero .photo { order: -1; min-height: 0; aspect-ratio: 4/3; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
  .hero-text { padding-top: 8px; }
  .hero h1 { font-size: clamp(56px, 24vw, 160px); }
}

/* ---------- home: the pieces (cards for the pieces that open first) ---------- */
.pieces { padding-block: var(--gap) 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.card > .flats, .card > .photo { aspect-ratio: 4/5; }
.card:not(:has(.photo)) > .flats { grid-column: 1 / -1; aspect-ratio: 5/4; }
.card-meta { grid-column: 1 / -1; }
.card-meta { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-top: 16px; }
.card-meta b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: 0; }
.card-meta .sub { display: block; color: var(--text-2); font-size: 15px; }
.card-meta .status { display: block; margin-top: 6px; }
.card-meta .price { white-space: nowrap; font-weight: 700; font-size: 17px; }
/* the other drawn tops, smaller, as a teaser */
.later { margin-top: clamp(48px, 7vw, 88px); }
.later h3 { font-size: clamp(24px, 2.6vw, 34px); }
.later > p { margin-top: 8px; color: var(--text-2); }
.later-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; margin-top: 20px; }
.later figure { margin: 0; }
.later .flats { grid-template-columns: 1fr 1fr; gap: 4%; aspect-ratio: auto; padding: 6% 4%; }
.later .flats .flat { grid-area: auto; opacity: 1; transform: none; }
.later figcaption { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.later figcaption b { margin-right: 8px; color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .later-row { grid-template-columns: minmax(0, 1fr); } }
/* the second colourway: bright petrol with a white edge and a white mark */
.flat.petrol .body, .flat.petrol .strap { fill: var(--petrol-print); stroke: var(--petrol-print); }
.flat.petrol .body { stroke: none; }
.flat.petrol .edge { stroke: var(--white); }
.flat.petrol .hole { stroke: var(--white); }
.flat.petrol .b { fill: var(--white); }

/* ---------- home: a team, small number and name per piece (both sides shown, no hover swap) ---------- */
.team { padding-top: var(--gap); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.player { margin: 0; }
.player .flats { grid-template-columns: 1fr 1fr; gap: 2%; aspect-ratio: auto; padding: 5% 3%; }
.player .flats .flat { grid-area: auto; opacity: 1; transform: none; }
.player figcaption { margin-top: 14px; color: var(--text-2); font-size: 15px; }
.player figcaption b { margin-right: 6px; font-family: var(--display); font-size: 22px; color: var(--text); }

/* ---------- home: the call ---------- */
.call { padding-block: var(--gap); background: var(--surface); overflow: hidden; }
.call .huge { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 16vw, 240px); letter-spacing: -0.015em; line-height: .85; white-space: nowrap; margin-left: -0.04em; }
.call .huge .dot { display: inline-block; }
.motion .call .huge .dot { transform: translateY(-1.6em); opacity: 0; transition: transform .9s var(--ease) .3s, opacity .2s ease .3s; }
.motion .call.in .huge .dot { transform: none; opacity: 1; }
.call .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(24px, 5vw, 80px); margin-top: clamp(32px, 5vw, 64px); }
.call .cols p { color: var(--text-2); max-width: 50ch; }
.call .cols p + p { margin-top: 14px; }
@media (max-width: 800px) { .call .cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- home: on the sand, a full-width strip of cuts ---------- */
.sand { padding-block: var(--gap) 0; }
.strip { display: grid; grid-template-columns: 1.25fr 1fr 1.25fr; height: clamp(300px, 40vw, 600px); }
.strip .photo { aspect-ratio: auto; height: 100%; }
.strip .photo + .photo { margin-left: calc(10px - var(--slant)); }
.strip + .strip { margin-top: 10px; }
/* real photos in other people's kit: one colour, petrol from the overlay, so their colours don't read as ours */
.sand .photo img, .sand .photo:hover img { filter: grayscale(1) sepia(.25) hue-rotate(165deg) saturate(1.1) contrast(1.15) brightness(.92); }
.sand .note { margin-top: 18px; font-size: 14px; color: var(--text-3); max-width: 60ch; }
@media (max-width: 700px) {
  .strip { grid-template-columns: minmax(0, 1fr); height: auto; gap: 10px; }
  .strip .photo { aspect-ratio: 4/3; height: auto; }
  .strip .photo + .photo { margin-left: 0; }
}

/* ---------- home: where we are ---------- */
.plan { padding-block: var(--gap); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps li { position: relative; padding: 24px 20px 0 0; }
.steps li::before { content: ""; position: absolute; top: -10px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 4px solid var(--bg); }
.steps li.now::before { background: var(--petrol-text); }
.steps b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: 0; }
.steps p { margin-top: 8px; color: var(--text-2); max-width: 30ch; font-size: 16px; }
.plan .note { margin-top: 32px; font-size: 14px; color: var(--text-3); }
@media (max-width: 800px) {
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--line); padding-left: 24px; }
  .steps li { padding: 0 0 28px; }
  .steps li::before { top: 2px; left: -33px; }
}

/* ---------- faq ---------- */
.questions { padding-block: 0 var(--gap); }
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { padding: 20px 0; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--petrol-text); font-family: var(--display); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--text-2); max-width: 62ch; }
.faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
.faq details[open]::details-content { height: auto; }

/* ---------- sign-up: the one block that is all petrol ---------- */
.join { background: var(--petrol-sheen) var(--petrol); color: var(--on-accent); }
/* tall and narrow on a phone: the light edge stays short */
@media (max-width: 860px) { .join { background: linear-gradient(135deg, #4cc1eb 0, #00a1db 70px, #008ec2 100%) var(--petrol); } }
.join .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(24px, 5vw, 80px); padding-block: clamp(64px, 9vw, 112px); }
.join h2 { font-size: clamp(36px, 5.6vw, 80px); letter-spacing: -0.04em; }
/* all text in here is full ink: dimmed ink would fall under 4.5:1 on the deep end */
.join .wrap > div p { margin-top: 16px; color: var(--on-accent); max-width: 40ch; }
.join fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.join legend, .join label[for] { display: block; font-size: 14px; color: var(--on-accent); margin-bottom: 10px; }
.join .row { display: flex; gap: 10px; }
.join input[type=email] { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border: 1px solid rgb(17 21 22 / .35); background: rgb(255 255 255 / .3); color: var(--on-accent); font: inherit; }
.join input[type=email]:focus { outline: none; border-color: var(--on-accent); background: rgb(255 255 255 / .45); }
.join .fine { margin-top: 12px; font-size: 14px; color: var(--on-accent); }
.join .fine a { text-decoration: underline; }
.join .fine.error { color: var(--on-accent); font-weight: 700; }
.join .pill { color: var(--on-accent); border-color: rgb(17 21 22 / .35); }
.join .pill:hover { border-color: var(--on-accent); }
.join .pill:has(input:checked) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.join .thanks { font-family: var(--display); font-size: clamp(26px, 2.8vw, 36px); letter-spacing: 0; }
.join label:has(input:focus-visible) { outline-color: var(--on-accent); }
/* the pitch: what you get (each point on an ink blade, like the logo), then what happens after */
.join .pitch .chip { margin-bottom: 20px; background: var(--ink); color: var(--petrol); }
.join .perks { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 12px; max-width: 46ch; }
.join .perks li { position: relative; padding-left: 24px; }
.join .perks li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 5px; height: 15px; background: var(--on-accent); transform: skewX(-12deg); }
.join .next { list-style: none; padding: 0; margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgb(17 21 22 / .3); font-size: 15px; line-height: 1.45; }
.join .next li { padding: 16px 16px 0 0; }
.join .next li + li { padding-left: 16px; border-left: 1px solid rgb(17 21 22 / .3); }
.join .next b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 20px; letter-spacing: 0; }
/* batch 1 as small cards: the drawing on its light panel, the name, the price */
.join .mini { list-style: none; padding: 0; margin-bottom: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 14px; line-height: 1.35; }
.join .mini .flats { aspect-ratio: 4/3; padding: 10%; margin-bottom: 10px; }
.join .mini b { display: block; font-weight: 700; }
.join .mini span { display: block; }
.join .mini em { display: block; font-style: normal; font-weight: 700; }
.join .picked { margin-bottom: 16px; padding: 10px 14px; background: rgb(255 255 255 / .3); font-weight: 700; font-size: 15px; }
/* the opt-in: a box drawn on the label, since the real checkbox is hidden like the pills' */
.join .check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; margin-top: 16px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.join .check::before { content: ""; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--on-accent); font-weight: 700; line-height: 1; }
.join .check:has(input:checked)::before { content: "✓"; background: var(--ink); color: var(--petrol); }
/* after sign-up: the code on a dashed coupon edge, then the optional picks */
.join .done > p:not(.thanks) { margin-top: 8px; }
.join .code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; padding: 14px 14px 14px 18px; border: 2px dashed rgb(17 21 22 / .55); }
.join .code span { flex: 1 1 100%; font-size: 14px; }
.join .code b { flex: 1; font-family: var(--display); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: .04em; }
.join .copy { min-height: 44px; padding: 0 20px; border: 0; background: var(--ink); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; }
.join .share { margin-top: 8px; padding: 0; border: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.join .step-picks { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgb(17 21 22 / .3); }
.join .step-picks h3 { font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: 0; line-height: 1.15; }
.join .step-picks > p { margin: 8px 0 24px; font-size: 15px; }
@media (max-width: 860px) { .join .wrap { grid-template-columns: minmax(0, 1fr); } }
/* one column: the form moves up under the perks, and 'what happens next' goes below it */
@media (max-width: 860px) { .join .pitch { display: contents; } .join .wrap { row-gap: 0; } .join .pitch .chip { justify-self: start; } .join form { margin-top: 36px; } .join .next { order: 1; } }
@media (max-width: 520px) { .join .next { grid-template-columns: minmax(0, 1fr); } .join .next li, .join .next li + li { padding: 14px 0 0; border-left: 0; } .join .next li + li { margin-top: 14px; border-top: 1px solid rgb(17 21 22 / .25); } .join .mini { gap: 8px; font-size: 13px; } }
@media (max-width: 420px) { .join .row { flex-direction: column; } }

/* pills: sizes and choices */
fieldset { border: 0; padding: 0; margin-top: 28px; min-width: 0; }
legend { font-size: 14px; color: var(--text-2); margin-bottom: 10px; }
label input[type=radio], label input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
label:has(input:focus-visible) { outline: 2px solid var(--petrol-text); outline-offset: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; min-width: 52px; border: 1px solid var(--line); cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.pill:hover { border-color: var(--text-2); }
.pill:has(input:checked) { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* footer */
.site-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 28px; font-size: 14px; color: var(--text-3); }
.site-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-block: 8px 80px; }
@media (max-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
.gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: 13px; color: var(--text-3); margin-top: 8px; }
.gallery .photo.wide { grid-column: 1 / -1; }
.buy { position: sticky; top: 24px; }
.crumbs { font-size: 14px; color: var(--text-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--text); }
.buy h1 { font-size: clamp(32px, 3.6vw, 48px); margin-top: 16px; }
.buy .cutname { margin-top: 6px; color: var(--text-2); }
.buy .price { margin-top: 18px; font-size: 20px; font-weight: 700; }
.buy .lede { color: var(--text-2); }
.buy .btn { margin-top: 28px; }
.buy .note { margin-top: 12px; font-size: 14px; color: var(--text-3); }
.buy .faq { margin-top: 32px; }
.print { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin-top: 24px; font-size: 15px; }
.print dt { font-weight: 700; }
.print dd { margin: 0; color: var(--text-2); }
.also { padding-block: 0 var(--gap); }
.also h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 24px; }

/* ---------- legal pages: one readable column ---------- */
.legal { max-width: 760px; padding-block: 24px var(--gap); }
.legal h1 { font-size: clamp(32px, 4.4vw, 52px); }
.legal h1 + .muted { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.legal h2 { font-size: 20px; margin: 44px 0 10px; }
.legal .lede { margin-top: 16px; }
.legal p, .legal li, .legal dd { max-width: 65ch; color: var(--text-2); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 8px; }
.legal b, .legal strong { color: var(--text); }
.legal .draft { margin: 20px 0 8px; padding: 14px 18px; background: var(--surface); font-size: 15px; }
.legal dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin-top: 12px; }
.legal dt { color: var(--text-3); }
.legal dd { margin: 0; }
@media (max-width: 560px) { .legal dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .legal dd { margin-bottom: 10px; } }
.legal table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 16px; }
.legal th, .legal td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.legal th { font-weight: 700; color: var(--text-3); }
.legal .form { white-space: pre-wrap; font: inherit; font-size: 15px; background: var(--surface); color: var(--text-2); padding: 20px; margin-top: 12px; }
.legal a.inline { color: var(--petrol-text); text-decoration: underline; }
.muted { color: var(--text-3); }
mark.todo { background: rgb(90 174 208 / .18); color: var(--petrol-text); padding: 0 4px; }

/* waitlist-only text: hidden in the full shop, shown by the waitlist build (build_site.py --waitlist) */
[data-waitlist] { display: none; }

/* ---------- motion: things open from the middle. Pages open from the centre line, a piece's drawing travels from its card to its page,
   and photos open as you reach them.
   Everything is visible by default; reduced motion (or no JS) just shows it. ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .logo { view-transition-name: logo; }
  ::view-transition-old(root) { animation: vt-out .3s ease both; }
  ::view-transition-new(root) { animation: vt-in .7s var(--ease) both; }
  ::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease); }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { clip-path: polygon(53% 0, 53% 0, 47% 100%, 47% 100%); } to { clip-path: polygon(-20% 0, 120% 0, 120% 100%, -20% 100%); } }
}
/* photos open from the centre line as you reach them (the hero has its own entrance) */
.motion :not(.hero) > .photo { transition: clip-path 1.1s var(--ease); }
.motion :not(.hero) > .photo:not(.in) { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }
.motion :not(.hero) > .photo:not(.in) img { transform: scale(1.14); }
.motion .strip .photo:nth-child(2) { transition-delay: .12s; }
.motion .strip .photo:nth-child(3) { transition-delay: .24s; }
@supports (animation-timeline: view()) {
  .motion .photo img { top: -6%; height: 112%; animation: drift linear both; animation-timeline: view(); }
  @keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
}
/* headings, rules, pieces and steps rise in, a beat apart */
.motion :is(.head > *, .card, .steps li) { transition: opacity .7s ease, translate .9s var(--ease); }
.motion .head:not(.in) > *, .motion :is(.card, .steps li):not(.in) { opacity: 0; translate: 0 28px; }
.motion .head > :nth-child(2) { transition-delay: .1s; }
.motion :is(.cards, .steps) > :nth-child(2) { transition-delay: .08s; }
.motion :is(.cards, .steps) > :nth-child(3) { transition-delay: .16s; }
.motion :is(.cards, .steps) > :nth-child(4) { transition-delay: .24s; }
.motion :is(.cards, .steps) > :nth-child(5) { transition-delay: .32s; }
/* the ball hops when you point at the logo */
.logo:hover .ball { animation: hop .6s var(--ease); }
@keyframes hop { 40% { translate: 0 -5px; } }
.motion .logo .bar { transform-box: fill-box; transform-origin: center; animation: grow .5s var(--ease) backwards; }
.motion .logo .ball { animation: drop .7s .2s var(--ease) backwards; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes drop { from { transform: translateY(-18px); opacity: 0; } }
.motion .hero h1 .line { animation: open 1s var(--ease) backwards; }
.motion .hero h1 .line + .line { animation-delay: .15s; }
.motion .hero-text > :not(h1) { animation: rise .7s .6s var(--ease) backwards; }
@keyframes open { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.motion .spot { animation: rise .7s 1.3s var(--ease) backwards; }
.motion .spot + .spot { animation-delay: 1.5s; }
.motion .spot::after { border: 2px solid var(--white); animation: ping 2.4s 2s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.motion .hero .photo { animation: reveal 1.2s .1s var(--ease) backwards; }
@keyframes reveal { from { clip-path: polygon(57% 0, 57% 0, 50% 100%, 50% 100%); } }
@media (max-width: 860px) { .motion .hero .photo { animation-name: reveal-m; } @keyframes reveal-m { from { clip-path: polygon(50% 0, 50% 0, 50% 94%, 50% 94%); } } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }