/* Dark theme (Oct 2026): near-black page, huge condensed caps, handwritten notes, white buttons.
   Pages opt in by linking this file after site.css, plus the Archivo + Architects Daughter font link. */
:root {
  --bg: #121212; --surface: #1B1B1B; --surface-2: #242424; --line: #2E2E2E;
  --text: #F5F5F5; --soft: #C8C8C8; --muted: #9A9A9A; --ink: #121212;
  /* One accent (mango) for the fun bits: highlighter swipes, notes, big numbers, hovers. Gain and loss only in the break-even slider. */
  --accent: #FFB627; --gain: #5BD68A; --loss: #FF6B5B;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
  --hand: 'Architects Daughter', 'Comic Sans MS', cursive;
}
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); }
a { color: var(--text); }
a:hover { color: #FFFFFF; }
::selection { background: var(--accent); color: var(--ink); }

/* Highlighter swipe under a few key words in each headline; it draws in as the heading arrives */
.hl { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 92% / 100% .13em; color: inherit; padding: 0 .02em .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes dk-swipe { from { background-size: 0% .13em; } to { background-size: 100% .13em; } }
.hero .hl { animation: dk-swipe .8s cubic-bezier(.6,0,.2,1) 1.1s both; }
@supports (animation-timeline: view()) {
  .sec .hl, .about .hl { animation: dk-swipe linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
}

/* Header: name on the left, links on the right, floating over the page */
.site-nav { font-family: var(--body); position: sticky; top: 0; z-index: 50; max-width: none; padding: 10px clamp(16px, 3vw, 32px); background: rgba(18,18,18,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-nav .brand { color: var(--text); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.site-nav .links a { color: var(--soft); border-radius: 8px; }
.site-nav .links a:hover { background: var(--surface-2); color: #FFFFFF; }
.site-nav .links a[aria-current="page"] { background: #F5F5F5; color: var(--ink); }
.site-nav a:focus-visible { outline: 2px solid #FFFFFF; }

/* Type */
.display { font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: 0; margin: 0; }
.scribble { font-family: var(--hand); font-weight: 500; font-size: 22px; line-height: 1.05; color: var(--accent); display: inline-flex; align-items: flex-end; gap: 6px; transform: rotate(-5deg); text-decoration: none; }
.scribble svg { flex: none; width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
a.scribble:hover { color: #FFFFFF; }
.kicker { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Buttons: white block for the main action, outlined for the rest */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-white, .btn-dark { background: #F5F5F5; color: var(--ink); }
.btn-white:hover, .btn-dark:hover { background: var(--accent); color: var(--ink); }
.btn-ghost, .btn-light { background: transparent; color: var(--text); border: 1px solid #4A4A4A; }
.btn-ghost:hover, .btn-light:hover { background: var(--surface-2); color: #FFFFFF; }
.btn:focus-visible, .card:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* Cards: dark panels with a thin line, pictures in black and white until hovered */
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease; }
.card:hover { color: var(--text); transform: translateY(-4px); border-color: #555555; }
.card .thumb { overflow: hidden; background: var(--surface-2); }
.card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.card:hover .thumb img, .card:focus-visible .thumb img { transform: scale(1.05); filter: none; }
.more { font-size: 15px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #5A5A5A; }
.card:hover .more { text-decoration-color: currentColor; }
.logo-chip { display: inline-flex; align-items: center; background: #F5F5F5; border-radius: 6px; padding: 5px 9px; }
.logo-chip img { display: block; width: auto; }
.chip { font-size: 14px; font-weight: 600; background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 6px 12px; }
.chip-white { background: #F5F5F5; color: var(--ink); }

/* Section heads: centred, huge, with a handwritten note above */
.sec { display: flex; flex-direction: column; gap: 56px; }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sec-head .scribble { transform: translateX(-18%) rotate(-5deg); }
.sec-title { font-size: clamp(48px, 8vw, 96px); max-width: 15ch; }
.sec-sub { margin: 0; font-size: 18px; line-height: 1.5; color: var(--soft); max-width: 560px; }

/* Scroll progress bar (assets/pacing.js) in white */
body .pace { background: rgba(255,255,255,.08); }
body .pace-fill { background: var(--accent); }

/* "Up next" links at the end of each story */
.next-case { font-family: var(--body); }
.next-case a { color: var(--text); background: var(--surface); border-color: var(--line); border-radius: 12px; }
.next-case a:hover { color: var(--text); border-color: #555555; box-shadow: none; }
.next-case .k { font-family: var(--body); color: var(--muted); }
.next-case .t { font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: 0; }
.next-case .arrow { color: var(--text); }

/* Story pages: every h1 and h2 in the condensed caps, whatever the page's own styles say */
h1, h2 { font-family: var(--display); font-stretch: 62%; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0 !important; line-height: .95 !important; }
h1:not(.hero-h1) { font-size: clamp(48px, 7.4vw, 92px) !important; }

/* Printing (the resume): plain black on white */
@media print {
  *, *::before, *::after { background: transparent !important; color: #000000 !important; border-color: #BBBBBB !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; }
  h1:not(.hero-h1) { font-size: 30pt !important; }
}

@media (max-width: 720px) {
  .site-nav { position: static; }
  .sec-head .scribble { transform: rotate(-4deg); font-size: 20px; }
}

/* The end frame leaves filter alone, so the theatre dimming below still applies after a section has risen in. */
@keyframes dk-rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; } }

/* Motion (assets/motion.js): notes write themselves in, cards wipe up, the page dims around the section in focus */
@keyframes dk-write { from { clip-path: inset(-40% 100% -40% -10%); } to { clip-path: inset(-40% -10% -40% -10%); } }
@keyframes dk-ink { to { stroke-dashoffset: 0; } }
@keyframes dk-wipe { from { opacity: 0; clip-path: inset(16% 0 0 0); } to { opacity: 1; clip-path: inset(-14px); } }
@media (prefers-reduced-motion: no-preference) {
  html.js .scribble { clip-path: inset(-40% 100% -40% -10%); }
  html.js .scribble.drawn { animation: dk-write .9s cubic-bezier(.45,.05,.4,1) var(--wd, 0s) both; }
  html.js .scribble svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .scribble.drawn svg path { animation: dk-ink .4s ease-out calc(var(--wd, 0s) + .8s) forwards; }
  html.js .scribble.drawn svg path + path { animation-delay: calc(var(--wd, 0s) + 1.15s); }
  html.js .wipe { opacity: 0; }
  html.js .wipe.in { animation: dk-wipe .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both; }
}
@media (min-width: 810px) and (prefers-reduced-motion: no-preference) {
  .wrap > * { transition: filter .6s ease; }
  body.theater .wrap > :not(.on-stage) { filter: grayscale(1) brightness(.32); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .card .thumb img { transition: none; }
  .btn:hover, .card:hover, .card:hover .thumb img { transform: none; }
}

/* Form controls take the page's text colour instead of the browser's black */
button, input, select, textarea { color: inherit; }

/* Shader stages (assets/shaders.js). Each canvas fades in over a static version only once its effect runs.
   Sizes are !important because the library pins a pixel size on the canvas when it starts. */
.gl-glitch { position: absolute; right: 0; top: 0; width: min(46%, 440px) !important; height: 100% !important; z-index: -1; opacity: 0; transition: opacity .8s ease; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.gl-on > .gl-glitch { opacity: .45; }
.funnel { margin: 0; width: 100%; max-width: 760px; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; }
.funnel-shape { position: relative; height: 320px; clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%); background: linear-gradient(180deg, rgba(245,245,245,.45), rgba(245,245,245,.06)); }
.funnel-shape::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 79px, #121212 79px 80px); pointer-events: none; }
.funnel-shape.gl-on { background: linear-gradient(180deg, rgba(245,245,245,.08), rgba(245,245,245,.02)); }
.gl-funnel { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s ease; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.5) 50%, rgba(0,0,0,.18)); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.5) 50%, rgba(0,0,0,.18)); }
.funnel-shape.gl-on .gl-funnel { opacity: 1; }
.funnel-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 1fr); font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; }
.funnel-steps li { display: flex; align-items: center; border-top: 1px solid var(--line); }
.funnel-steps li:first-child { border-top: 0; }
.funnel figcaption { grid-column: 1 / -1; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
  .gl-glitch { width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 35%, #000); mask-image: linear-gradient(180deg, transparent 35%, #000); }
  .gl-on > .gl-glitch { opacity: .25; }
  .funnel-shape { height: 260px; }
  .funnel-shape::after { background: repeating-linear-gradient(180deg, transparent 0 64px, #121212 64px 65px); }
  .funnel-steps { font-size: 19px; }
}

/* Brand colour (assets/motion.js): a client's tile or card lights in that client's colour (--c) while it sits mid-screen,
   and the glow follows the cursor on hover. Colour means a client; the method stays black and white. */
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 25%; }
@property --gy { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@keyframes dk-drift { 0%, 100% { --gx: 22%; --gy: 18%; } 50% { --gx: 78%; --gy: 74%; } }
[data-glow] { position: relative; isolation: isolate; transition: border-color .6s ease; }
[data-glow]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .7s ease; background: radial-gradient(340px circle at var(--gx) var(--gy), color-mix(in srgb, var(--c) 34%, transparent), transparent 70%); }
[data-glow].lit::before { opacity: 1; animation: dk-drift 8s ease-in-out infinite; }
[data-glow].follow::before { opacity: 1; animation: none; background: radial-gradient(340px circle at var(--hx) var(--hy), color-mix(in srgb, var(--c) 42%, transparent), transparent 70%); }
[data-glow].lit, [data-glow].follow { border-color: var(--c) !important; }
.card.lit .thumb img { filter: none; }
.tile.lit .src { color: color-mix(in srgb, var(--c) 72%, #FFFFFF); }
.tile-invert.lit .src { color: color-mix(in srgb, var(--c) 80%, #000000); }
.logos > span img { transition-delay: calc(var(--i, 0) * 110ms); }
.logos.lit > span img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-glow]::before { animation: none !important; transition: none; }
  .logos > span img { transition-delay: 0s; }
}

/* Reading guide (assets/reading.js): the line being read gets a marker and a small nudge; with a mouse the rest of the column dims */
.ri { position: relative; transition: opacity .25s ease, transform .25s ease, color .25s ease; }
.ri::before { content: ""; position: absolute; left: -14px; top: .2em; bottom: .2em; width: 3px; border-radius: 2px; background: var(--accent); opacity: 0; transform: scaleY(.3); transition: opacity .25s ease, transform .25s ease; }
li.ri::before { left: -30px; }
.ri.reading { transform: translateX(6px); color: #FFFFFF; }
.ri.reading::before { opacity: 1; transform: none; }
.guided .ri:not(.reading) { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .ri, .ri::before { transition: none; } .ri.reading { transform: none; } }
@media print { .ri.reading { transform: none; } .ri::before { display: none; } .guided .ri { opacity: 1 !important; } }

/* Handwritten notes (assets/motion.js): cheeky asides take turns around a bold heading, written letter by letter in a
   thin caps hand, held, then wiped. Positions: tl, tr, bl, br round a heading; face-l, face-r beside the hero face. */
.head-wrap { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; padding: 40px 0; }
.head-wrap + .kicker { margin-top: 14px; }
.notes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.note { position: absolute; display: inline-flex; align-items: center; gap: 2px; font-family: var(--hand); font-size: 17px; font-weight: 400; line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; text-align: left; color: var(--accent); white-space: nowrap; opacity: 0; transition: opacity .45s ease; }
.note svg { flex: none; width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.note[data-pos="tl"] { top: 0; left: -3%; rotate: -5deg; align-items: flex-start; }
.note[data-pos="tr"] { top: 0; right: -3%; rotate: 4deg; align-items: flex-start; }
.note[data-pos="bl"] { bottom: 0; left: -2%; rotate: 3deg; }
.note[data-pos="br"] { bottom: 0; right: -3%; rotate: -7deg; }
/* Bottom notes: the arrow sits above the note and rises into the heading (br from the note's left end, bl from its right end) */
.note[data-pos="br"] svg, .note[data-pos="bl"] svg { position: absolute; }
.note[data-pos="br"] svg { left: -8px; bottom: calc(100% + 8px); }  /* the -7deg tilt drops the left end, so lift it more */
.note[data-pos="bl"] svg { right: -8px; bottom: calc(100% - 4px); }
.note[data-pos="face-l"] { top: 34%; left: -1%; rotate: -8deg; }
.note[data-pos="face-r"] { top: 52%; right: -1%; rotate: -6deg; }
.hero-stage .note[data-pos="br"] { bottom: -30px; right: 2%; font-size: 18px; }
.note.on { opacity: 1; }
.note .ch { opacity: 0; }
.note.on .ch { animation: dk-pen 1ms linear calc(var(--k) * 42ms) forwards; }
.note svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.note.on svg path { animation: dk-ink .35s ease-out calc(var(--n) * 42ms + .05s) forwards; }
.note.on svg path + path { animation-delay: calc(var(--n) * 42ms + .35s); }
@keyframes dk-pen { to { opacity: 1; } }
@media (max-width: 640px) {
  .head-wrap { padding: 34px 0; }
  .note { font-size: 13px; }
  .note svg { width: 24px; height: 24px; }
  .note[data-pos="tl"], .note[data-pos="bl"] { left: 0; }
  .note[data-pos="tr"], .note[data-pos="br"] { right: 0; }
  .note[data-pos="face-l"] { left: 0; top: 30%; }
  .note[data-pos="face-r"] { right: 0; top: 56%; }
  .hero-stage .note[data-pos="br"] { right: 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .note { transition: none; }
  .note.on .ch { animation: none; opacity: 1; }
  .note.on svg path { animation: none; stroke-dashoffset: 0; }
}