/* tomrhodes.it — hand-built, no framework.
   Palette taken from a photo of rock and lichen in Norway. */

@font-face { font-family: "Fira Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/fira-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/fira-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/fira-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/fira-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/fira-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/fira-sans-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/fira-sans-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/fira-sans-condensed-latin-600-normal.woff2") format("woff2"); }

:root {
  --rock: #1b2848;        /* rock navy */
  --rock-deep: #141e38;
  --slate: #3a5382;       /* slate blue */
  --lichen: #e9c93a;      /* lichen yellow */
  --ochre: #d9a21b;
  --rust: #d9730f;        /* lichen orange */
  --ink: #23283a;
  --mute: #646b80;
  --line: #dfe2ea;
  --paper: #ffffff;
  --mist: #f6f2e8;        /* pale stone, tinted */
  /* more from the same photo */
  --crevice: #151a2b;     /* shadow between the rocks */
  --rock-2: #293b5f;
  --rock-3: #465d8c;
  --rock-4: #6983b6;      /* rock catching the light */
  --stone: #dbd2b9;       /* pale mineral patches */
  --sand: #a89775;
  --sun: #f8e825;         /* brightest lichen */
  --amber: #f3c01f;
  --flame: #e07f11;
  --ember: #c54b12;       /* red-orange lichen */
  --bark: #633311;
  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-weight: 300; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--paper); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--slate); text-underline-offset: 3px; }
a:hover { color: var(--rust); }
h1, h2, h3 { font-family: var(--cond); font-weight: 400; line-height: 1.12; margin: 0; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--lichen); color: var(--rock); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }

/* ---------- header ---------- */
.site-head { background: var(--rock); color: #fff; position: sticky; top: 0; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.brand { font-family: var(--cond); font-weight: 400; font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }
.brand b { font-weight: 600; color: var(--lichen); }
.brand:hover { color: #fff; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.nav a { color: #e6e9f2; text-decoration: none; font-family: var(--cond); font-weight: 500; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--lichen); }
.lang { display: flex; gap: 2px; margin-left: 6px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2px; }
.lang a { padding: 3px 10px; border-radius: 999px; border: 0; font-size: .8rem; letter-spacing: .08em; }
.lang a[aria-current="true"] { background: var(--lichen); color: var(--rock); }
.lang a:hover { border: 0; }
.menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: var(--radius); font: 500 .85rem var(--cond); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; }

/* ---------- hero ---------- */
/* The photo is pinned by its top right corner, where its own lichen grows, so that corner shows at every screen size. */
.hero { background: var(--crevice) url("/assets/img/rock-hero.jpg") right top / cover no-repeat; color: #fff; position: relative; overflow: hidden; }
.hero::before { /* keep the text side dark, let the lichen show on the right */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(21,26,43,.95) 0%, rgba(27,40,72,.88) 40%, rgba(27,40,72,.5) 66%, rgba(27,40,72,.34) 100%),
    linear-gradient(0deg, rgba(21,26,43,.55), transparent 40%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 6vw, 72px); align-items: center; padding-top: clamp(48px, 9vw, 104px); padding-bottom: clamp(48px, 8vw, 96px); }
.kicker { font-family: var(--cond); font-weight: 500; font-size: .86rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lichen); margin: 0 0 18px; }
.hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); font-weight: 400; letter-spacing: -.005em; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--sun); }
.hero p.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #dfe3ee; max-width: 46ch; margin: 22px 0 30px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; font-family: var(--cond); font-weight: 600; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 13px 22px; border-radius: var(--radius); border: 2px solid var(--lichen); transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.btn.solid { background: var(--lichen); color: var(--rock); }
.btn.solid:hover { background: #f3d858; color: var(--rock); transform: translateY(-2px); }
.btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.btn.ghost:hover { border-color: #fff; color: #fff; transform: translateY(-2px); }

/* ---------- hero intro (js/intro) ---------- */
/* The intro's elements wait out of sight until their animation is ready; the class is set and cleared by script. */
.intro-pending [data-intro] { visibility: hidden; }
/* Always keep room for the scrollbar, so the page never shifts sideways when it appears or goes (a short page
   growing past the window while it loads, say). */
html { scrollbar-gutter: stable; }
/* until the top of the page's fonts are in (see FONTS_HEAD in pages/frame.py) */
.fonts-pending .site-head, .fonts-pending .notice, .fonts-pending main, .fonts-pending .site-foot { visibility: hidden; }

/* flip buttons: js/intro/flip-button.js rebuilds a .btn as faces of a bar (outline, filled, bright) and rolls between them.
   The first face sets the button's size; the others lie over it. */
.btn.flip { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: none; transition: none; --face: var(--lichen); }
.btn.flip:hover { background: none; transform: none; }
.btn.ghost.flip { --face: var(--mist); }
.btn.flip:disabled { opacity: .6; }
.flip-face { display: block; padding: 15px 24px; transform-origin: 50% 0; }   /* same size as a plain .btn: its padding plus its border */
.flip-outline { color: var(--face); }
.flip-face + .flip-face { position: absolute; inset: 0; }
.flip-filled { background: var(--face); color: var(--rock); }
.flip-bright { background: var(--sun); color: var(--rock); }
.flip-edge { position: absolute; background: currentColor; }
.flip-edge.top, .flip-edge.bottom { left: 0; right: 0; height: 2px; }
.flip-edge.left, .flip-edge.right { top: 0; bottom: 0; width: 2px; }
.flip-edge.top { top: 0; transform-origin: 0 50%; }          /* each edge grows from the corner the pen reaches first */
.flip-edge.right { right: 0; transform-origin: 50% 0; }
.flip-edge.bottom { bottom: 0; transform-origin: 100% 50%; }
.flip-edge.left { left: 0; transform-origin: 50% 100%; }

.portrait { width: clamp(150px, 22vw, 250px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px rgba(21,26,43,.55), 0 0 0 8px var(--sun), 0 18px 40px rgba(0,0,0,.45); }
.portrait img { width: 118%; max-width: none; margin: -9% 0 0 -9%; }

/* The lichen animation fades in once its script is ready (see js/lichen/main.js).
   The portrait is only in the page for visitors without JavaScript (it sits in a <noscript>). */
.hero-art { width: clamp(220px, 36vw, 440px); aspect-ratio: 1; display: grid; place-items: center; }
/* On wide windows the lichen slides right, out of the centred column, to sit where the photo's own patch of rock
   lies when the photo just fills the width (75.35% across for the hero, 80.35% for the inner pages: CONFIG.frame
   in js/lichen/config.js). Otherwise backdrop.js would have to enlarge the photo past its sharpness to line it up.
   The shift is that point minus where the column puts the art's centre: (vw share − 50%) × width − 1120/2 (--wrap)
   + 40 (the widest --gutter) + half the art's width. Below about 1200 px it is 0. */
.hero .hero-art { transform: translateX(max(0px, 25.35vw - 300px)); }
.page-head .page-art { transform: translateX(max(0px, 30.35vw - 375px)); }
.hero-art > * { grid-area: 1 / 1; }
.hero-art canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; cursor: pointer; touch-action: manipulation; }   /* tap or click it for a ripple */
/* Browsers flash a tinted box over anything tappable when it is tapped, and can mark it as "selected" on a
   double click or long press. Both would show as a pale square over the lichen, so both are switched off. */
.hero-art canvas { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; outline: none; }
.lichen-ready .hero-art canvas { opacity: 1; }

.brands { background: var(--crevice); color: #c9cfdf; border-top: 3px solid var(--flame); }
.brands .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-top: 16px; padding-bottom: 16px; font-family: var(--cond); font-size: .98rem; letter-spacing: .05em; }
.brands span.label { color: var(--amber); font-weight: 500; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- sections ---------- */
section.block { padding: clamp(52px, 8vw, 96px) 0; }
section.block.mist { background: var(--mist); }
.sec-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(24px, 4vw, 40px); }
.sec-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: var(--slate); white-space: nowrap; }
.sec-head::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--amber), var(--flame)); }
.sec-head a { order: 3; font-family: var(--cond); font-weight: 500; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.sec-head a::after { content: " \2192"; }

/* work cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit; }
.card:hover { color: inherit; }
/* On hover two pens draw a border round the card, like the outline of the hero buttons, easing out heavily as they go
   and easing in as they are taken back. An SVG rect's stroke starts at the top left and runs clockwise; with
   pathLength="1", 0.5 is the bottom right corner. Each rect shows one dash that grows from where it starts (--from):
   the first from the top left over top and right, the second from the bottom right over bottom and left.
   The stroke is twice the visible width and centred on the card's edge, so the outer half is cut off. */
.card-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.card-edge rect { --from: 0; fill: none; stroke: var(--accent, var(--lichen)); stroke-width: 6px;
  stroke-dasharray: 0 var(--from) 0 2;                                         /* gap up to the start, then a dash of 0 */
  transition: stroke-dasharray .5s cubic-bezier(.895, .03, .685, .22); }       /* rollout: eased in (quart) */
.card-edge rect + rect { --from: .5; }
.card:hover .card-edge rect, .card:focus-visible .card-edge rect { stroke-dasharray: 0 var(--from) .5 2;
  transition: stroke-dasharray .75s cubic-bezier(.165, .84, .44, 1); }        /* build: heavily eased out (quart) */
.card:focus-visible { outline: none; }
.card .shot { aspect-ratio: 16 / 9.5; background: var(--rock); overflow: hidden; border-bottom: 4px solid var(--accent, var(--lichen)); }
.cards > :nth-child(4n+1) { --accent: var(--sun); }
.cards > :nth-child(4n+2) { --accent: var(--flame); }
.cards > :nth-child(4n+3) { --accent: var(--rock-4); }
.cards > :nth-child(4n+4) { --accent: var(--ember); }
.card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card .shot.contain { display: grid; place-items: center; padding: 18px; }
.card .shot.contain img { width: auto; height: auto; max-height: 100%; object-fit: contain; border-radius: 3px; }
.card .shot.empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--rock-3), var(--rock)); color: rgba(255,255,255,.85); font-family: var(--cond); font-size: 1.6rem; letter-spacing: .1em; text-transform: uppercase; }
.card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .meta { font-family: var(--cond); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.card h3 { font-size: 1.5rem; font-weight: 500; color: var(--rock); }
.card p { margin: 0; color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; list-style: none; padding-left: 0; margin-bottom: 0; }
.tags li { font-family: var(--cond); font-size: .82rem; letter-spacing: .04em; color: var(--rock-2); background: var(--mist); border: 1px solid #e6dfcc; border-radius: 999px; padding: 1px 10px; }

/* what I do */
.does { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); }
.does article { border-top: 4px solid var(--accent, var(--rock)); padding-top: 16px; }
.does article:nth-child(1) { --accent: var(--sun); }
.does article:nth-child(2) { --accent: var(--flame); }
.does article:nth-child(3) { --accent: var(--rock-3); }
.does article:nth-child(4) { --accent: var(--ember); }
.does h3 { font-size: 1.28rem; font-weight: 500; color: var(--rock); margin-bottom: 8px; }
.does p { margin: 0 0 10px; }
.does small { display: block; font-family: var(--cond); font-size: .88rem; color: #6f6654; letter-spacing: .02em; }

/* about strip */
.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.about p.big { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.stats div { padding: 18px 20px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.stats div:nth-child(2n) { border-right: 0; }
.stats div:nth-last-child(-n+2) { border-bottom: 0; }
.stats b { display: block; font-family: var(--cond); font-weight: 500; font-size: 2.1rem; line-height: 1; color: var(--ember); }
.stats div:nth-child(2) b { color: var(--rock-3); }
.stats div:nth-child(3) b { color: var(--flame); }
.stats div:nth-child(4) b { color: var(--rock); }
.stats span { display: block; font-size: .92rem; color: var(--mute); margin-top: 6px; line-height: 1.35; }
.textlink { font-family: var(--cond); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; text-decoration: none; }
.textlink::after { content: " \2192"; }

/* contact band */
.band { background: var(--crevice) url("/assets/img/rock.jpg") center 70% / cover no-repeat; color: #fff; text-align: center; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60rem 30rem at 50% 50%, rgba(21,26,43,.9), rgba(27,40,72,.72) 60%, rgba(27,40,72,.5)); pointer-events: none; }
.band .wrap { position: relative; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(48px, 7vw, 84px); }
.band h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 12px; }
.band p { color: #dfe3ee; max-width: 52ch; margin: 0 auto 26px; }
.band .cta { justify-content: center; }

/* footer */
.site-foot { background: var(--crevice); color: #aeb6ca; font-size: .92rem; border-top: 3px solid var(--sun); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 22px; padding-bottom: 22px; }
.site-foot a { color: #dfe3ee; text-decoration: none; }
.site-foot a:hover { color: var(--lichen); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* reveal on scroll (only when JS is running and motion is welcome) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card-edge rect, .card:hover .card-edge rect, .btn { transition: none; }
}

/* ---------- inner pages ---------- */
/* The band at the top of every inner page: the same rock as the hero, darker, with the lichen corner showing. */
/* Once the lichen script is running it moves the photo (js/lichen/backdrop.js) so the same patch of rock is always
   behind the growing lichen; this is where it starts, and where it stays on phones, where the lichen is hidden. */
.page-head { background: var(--crevice) url("/assets/img/rock-hero.jpg") right 10% / calc(100% + 200px) auto no-repeat; color: #fff; position: relative; }
/* Wide windows enlarge the photo more (backdrop.js keeps the lichen's patch of rock at one scale), so they get a
   bigger copy of it. */
@media (min-width: 1300px) { .hero, .page-head { background-image: url("/assets/img/rock-hero-xl.jpg"); } }
.page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(21,26,43,.96) 0%, rgba(27,40,72,.9) 50%, rgba(27,40,72,.6) 100%); }
.page-head .wrap { position: relative; padding-top: clamp(40px, 7vw, 84px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 22ch; }
.page-head .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #dfe3ee; max-width: 56ch; margin: 18px 0 0; }
/* Inner pages with lichen growing beside the title (see page_head in pages/parts.py) */
.page-head.has-art .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 5vw, 64px); padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }
.page-head.has-art::before { background: linear-gradient(90deg, rgba(21,26,43,.96) 0%, rgba(27,40,72,.88) 45%, rgba(27,40,72,.5) 72%, rgba(27,40,72,.34) 100%); }
.page-art { width: clamp(180px, 24vw, 290px); }
.notice { margin: 0; background: var(--amber); color: var(--rock); font-size: .92rem; }
.notice .wrap { display: block; padding-top: 8px; padding-bottom: 8px; }

.intro-text { max-width: 68ch; margin-bottom: clamp(24px, 4vw, 40px); }
.big { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.55; }
.narrow { max-width: 62ch; }
.prose { max-width: 66ch; }
.prose ul { padding-left: 1.1em; margin: 0 0 1em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--rust); }
.prose b { font-weight: 500; color: var(--rock); }

/* case study */
.case-top { padding-bottom: 0; }
.case-text { padding-top: clamp(36px, 5vw, 56px); }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.cover-fig, .shot-fig { margin: 0; }
.cover-fig img, .shot-fig img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: var(--mist); }
figcaption { font-size: .9rem; color: var(--mute); margin-top: 8px; }
.facts { border-top: 4px solid var(--amber); padding-top: 16px; }
.facts dl { margin: 0 0 16px; }
.facts dl div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--cond); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.facts dd { margin: 2px 0 0; }
.case-links { list-style: none; padding: 0; margin: 18px 0 0; }
.case-links li { margin-bottom: 6px; }
.case-links a { font-family: var(--cond); font-weight: 500; letter-spacing: .04em; }
.case-links a::after { content: " \2197"; }
.case-sec { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); gap: clamp(16px, 4vw, 48px); padding: 28px 0; border-top: 1px solid var(--line); }
.case-sec:first-child { border-top: 0; padding-top: 0; }
.case-sec h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--slate); }
.case-figs { padding-top: 0; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
.figs .wide { grid-column: 1 / -1; }

/* Work page: the first case study runs across the full width, picture beside text */
.cards.featured > :first-child { grid-column: 1 / -1; flex-direction: row; }
.cards.featured > :first-child .shot { flex: 0 0 58%; aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 4px solid var(--accent); }
.cards.featured > :first-child h3 { font-size: 1.9rem; }
.cards.featured > :first-child .shot img { object-position: left top; }   /* keep the screen's left edge in view */

/* agency archive: pieces shown at their real size, side by side, shrinking on small screens */
.brands-line { font-family: var(--cond); color: var(--mute); }
.archive-group { padding: 28px 0; border-top: 1px solid #e6dfcc; }
.archive-group header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 6px; }
.archive-group h3 { font-size: 1.45rem; font-weight: 500; color: var(--rock); }
.archive-group .meta { font-family: var(--cond); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.archive-group p { max-width: 68ch; }
.pieces { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-top: 14px; }
.pieces video { width: min(var(--w), 100%); height: auto; background: var(--rock); box-shadow: 0 10px 28px rgba(27,40,72,.16); }

/* lab */
.lab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.lab-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--rock); margin-bottom: 14px; }
.lab-media img, .lab-media video { width: 100%; height: 100%; object-fit: cover; }
.lab h3 { font-size: 1.35rem; font-weight: 500; color: var(--rock); margin-bottom: 6px; }
.lab .is-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); align-items: center; }
.lab .is-featured .lab-media { margin-bottom: 0; }
.lab .is-featured h3 { font-size: 1.7rem; }

/* services */
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 64px); }
.area { border-top: 4px solid var(--accent, var(--rock)); padding-top: 18px; }
.area:nth-child(1) { --accent: var(--sun); }
.area:nth-child(2) { --accent: var(--flame); }
.area:nth-child(3) { --accent: var(--rock-3); }
.area:nth-child(4) { --accent: var(--ember); }
.area h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); color: var(--rock); margin-bottom: 8px; }
.area ul { padding-left: 1.1em; }
.area li::marker { color: var(--rust); }
.area .seen { font-family: var(--cond); font-size: .95rem; color: var(--mute); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 30px); counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--cond); font-weight: 500; font-size: 2rem; color: var(--flame); line-height: 1; margin-bottom: 8px; }
.steps h3 { font-size: 1.3rem; font-weight: 500; color: var(--rock); margin-bottom: 4px; }

/* about */
.about-page { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.big-prose { font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.6; }
.about-card { background: var(--mist); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.about-card img { width: 140px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--amber); margin-bottom: 8px; }
.about-card h2 { font-size: 1.5rem; color: var(--slate); }
.about-card p { margin: 0; }
.about-card .btn { margin: 6px 0; }
.about-card .btn.solid:hover { transform: none; }
.path { list-style: none; padding: 0; margin: 0; }
.path li { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 24px; padding: 14px 0; border-top: 1px solid #e6dfcc; }
.path .when { grid-row: span 2; font-family: var(--cond); font-weight: 500; color: var(--ember); letter-spacing: .04em; }
.path h3 { font-size: 1.2rem; font-weight: 500; color: var(--rock); }
.path p { margin: 0; color: var(--mute); }
.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 64px); margin: 0 0 clamp(40px, 6vw, 64px); }
.skills div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.skills dt { font-family: var(--cond); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.skills dd { margin: 2px 0 0; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-family: var(--cond); font-weight: 500; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rock-2); margin-top: 10px; }
.contact-form input, .contact-form textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid #c9cfdf; border-radius: var(--radius); padding: 12px 14px; width: 100%; }
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--amber); outline-offset: 0; border-color: var(--ochre); }
.contact-form textarea { resize: vertical; min-height: 10em; }
.contact-form .btn { cursor: pointer; }
.contact-form .btn[disabled] { opacity: .6; cursor: progress; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* only robots fill this in */
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.form-status { margin: 0; }
.form-status[data-state="sent"] { color: #2f6b2f; }
.form-status[data-state="failed"], .form-status[data-state="invalid"] { color: var(--ember); }
.direct { border-top: 4px solid var(--amber); padding-top: 16px; }
.direct h2 { font-size: 1.5rem; color: var(--slate); margin-bottom: 10px; }
.direct ul { list-style: none; padding: 0; margin: 0 0 14px; }
.direct li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.direct p { color: var(--mute); }

@media (max-width: 900px) {
  .case-grid, .about-page, .contact { grid-template-columns: 1fr; }
  .lab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.featured > :first-child { flex-direction: column; }
  .cards.featured > :first-child .shot { flex: none; aspect-ratio: 16 / 9.5; min-height: 0; border-right: 0; border-bottom: 4px solid var(--accent); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .page-head { background-position: 34% top; background-size: cover; }
  /* phones: the lichen grows behind the title, on the right, half see-through so the white text stays easy to read */
  .page-head.has-art .wrap { display: block; }
  .page-head-text { position: relative; z-index: 1; }
  .page-head .page-art { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(58vw, 240px); opacity: .6; pointer-events: none; }
  .case-sec { grid-template-columns: 1fr; gap: 8px; }
  .figs, .areas, .lab, .skills, .lab .is-featured { grid-template-columns: 1fr; }
  .path li { grid-template-columns: 1fr; }
  .path .when { grid-row: auto; }
  .pieces { gap: 12px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .does { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--rock-deep); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--gutter) 18px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
  .lang { margin: 14px 0 0; }
  .lang a { width: auto; padding: 5px 14px; border-bottom: 0; }
  .hero .wrap { grid-template-columns: 1fr; }
  /* Stacked layout: lichen art on top, text below. Slide the photo so only the edge of its big cluster
     shows in the corner, and darken from the top down (not left to right) so the text stays readable. */
  .hero { background-position: 34% top; }
  .hero::before { background: linear-gradient(180deg, rgba(27,40,72,.3) 0%, rgba(27,40,72,.42) 36%, rgba(21,26,43,.9) 54%, rgba(21,26,43,.96) 100%); }
  .hero .wrap { padding-top: 28px; gap: 14px; }
  .hero-art { order: -1; width: min(58vw, 236px); margin: 0 auto; }
  .portrait { width: 120px; }
  .cards { grid-template-columns: 1fr; }
  .sec-head h2 { white-space: normal; }
}
@media (max-width: 480px) {
  .does { grid-template-columns: 1fr; }
  .stats b { font-size: 1.8rem; }
}

/* ---------- bümbap (Lab page: pages/lab.py) ---------- */
/* The machine sits on the rock, the colour of its own page, so the frame's edges disappear. */
section.block.player-block { background: var(--rock); color: var(--stone); padding-top: clamp(20px, 3vw, 32px); }
.player-switch { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1000px; margin: 0 auto 4px; padding: 0 16px; }
.player-pick { flex: 1 1 0; min-width: 120px; display: grid; gap: 2px; text-align: left; cursor: pointer;
  font: inherit; color: var(--stone); background: var(--rock-deep); border: 1px solid var(--rock-2); border-radius: var(--radius); padding: 9px 14px; }
.player-pick b { font-family: var(--cond); font-weight: 500; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.player-pick small { font-size: .78rem; color: var(--sand); }
.player-pick:hover { border-color: var(--rock-4); }
.player-pick[aria-pressed="true"] { border-color: var(--lichen); box-shadow: inset 0 -3px 0 var(--lichen); }
.player-pick:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; }
.player-frame { display: block; width: 100%; height: 640px; border: 0; background: var(--rock); overflow: hidden; }
.player-foot { max-width: 1000px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; justify-content: space-between; }
.player-foot p { margin: 0; max-width: 70ch; font-size: .95rem; color: var(--stone); }
.player-foot .player-links { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.player-alone, .player-code { font-family: var(--cond); font-weight: 500; letter-spacing: .06em; color: var(--lichen); white-space: nowrap; }
.player-alone::after, .player-code::after { content: " \2197"; }

.lab-idea h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--slate); margin-bottom: 12px; }
.prose code, .take code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .88em; background: var(--mist); padding: 0 4px; border-radius: 3px; }

/* Results: one small bar chart per finding. Every chart is "shorter is better", starts at zero, and prints
   its numbers, so nothing depends on colour; the first Haxe version is drawn hollow, as the "before". */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); margin-bottom: clamp(32px, 5vw, 56px); }
.chart { margin: 0; border-top: 4px solid var(--amber); padding-top: 14px; }
.chart:last-child { grid-column: 1 / -1; }
.chart h3 { font-size: 1.3rem; font-weight: 500; color: var(--rock); }
.chart figcaption p { margin: 4px 0 14px; font-size: .9rem; color: var(--mute); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5.5em; align-items: center; gap: 12px; }
.bar-name { font-family: var(--cond); font-weight: 500; font-size: .95rem; color: var(--rock-2); }
.bar { height: 14px; width: max(calc(var(--share) * 100%), 3px); background: var(--rock-3); border-radius: 0 4px 4px 0; }
.bar-value { font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--ink); text-align: right; }
.bars .is-before .bar { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(197,75,18,.35) 4px 6px); box-shadow: inset 0 0 0 2px var(--ember); }
.bars .is-before .bar-name { color: var(--ember); }
.take { margin: 14px 0 0; font-size: .95rem; }
.lab-story { border-top: 0; padding-top: 0; }
.lab-story h2 { color: var(--ember); }

.tooling { margin: 32px 0 0; max-width: 640px; }
.tooling h3 { font-size: 1.3rem; font-weight: 500; color: var(--rock); margin-bottom: 10px; }
.tooling table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tooling th, .tooling td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.tooling th[scope="row"], .tooling thead th:first-child { text-align: left; }
.tooling thead th { font-family: var(--cond); font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.tooling th[scope="row"] { font-family: var(--cond); font-weight: 500; color: var(--rock-2); }
.lab-credit { margin: 28px 0 0; font-size: .88rem; color: var(--mute); max-width: 70ch; }

@media (max-width: 720px) {
  .player-switch { padding: 0; }
  .player-pick { min-width: calc(50% - 4px); }
  .player-foot { padding: 0; }
  .player-foot .player-links { align-items: flex-start; }
  .charts { grid-template-columns: 1fr; }
  .bars li { grid-template-columns: 7.5em minmax(0, 1fr) 4.8em; gap: 8px; }
}

/* The bümbap band on the home page (pages/lab.py, home_feature): the machine on the rock, its pitch and three figures. */
.lab-feature { background: var(--rock); color: var(--stone); padding: clamp(52px, 8vw, 96px) 0; }
.lab-feature .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.lab-feature-shot { display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .4)); transition: transform .3s ease; }
.lab-feature-shot:hover, .lab-feature-shot:focus-visible { transform: translateY(-3px); }
.lab-feature-shot img { display: block; width: 100%; height: auto; }
.lab-feature h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 14px; }
.lab-feature-text > p:not(.kicker) { margin: 0 0 22px; color: var(--stone); }
.lab-feature-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.lab-feature-figures div { border-top: 3px solid var(--amber); padding-top: 10px; }
.lab-feature-figures dt { font-family: var(--cond); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; color: #fff; }
.lab-feature-figures dd { margin: 6px 0 0; font-size: .86rem; line-height: 1.35; color: var(--sand); }
@media (max-width: 900px) {
  .lab-feature .wrap { grid-template-columns: 1fr; }
}