/* ===========================================================================
   The Resume page's base styles: a copy of the Projects pages' work.css,
   taken when those pages were parked in design/parked/work/ (Graeme has no
   case studies yet). The resume used work.css for V4's tokens, the top
   bar, the labelled rows and the footer; the case-study rules come along
   unused, so the two can be compared or merged again if the pages return.
   =========================================================================== */
/* ===========================================================================
   Work: the Projects page and its case studies, in V4's design system.
   One stylesheet for all of them, so the four cases stay identical in
   structure; the pages link it by root-relative path. V4's tokens are
   repeated here (the prototype has no build step to share them).

   A case reads top to bottom, each part a labelled row (the label in the
   left three columns, the words in the next seven), after the agency and
   researcher case studies Graeme was pointed to: Wolff Olins and Pentagram
   for the scannable header, researcher portfolios for the approach.
   1. The header: logo, headline, a one-line summary, the facts.
   2. A visual: the product on a colour panel.
   3. The challenge: the business question, then the research question.
   4. The approach: three or four numbered steps, and an artefact.
   5. What we learned: three findings.
   6. What it changed: the decision it informed, and a quote.
   7. The next case.
   =========================================================================== */
@font-face { font-family: "GL OffBit 101 Bold"; src: url("/fonts/OffBitTrial-101Bold.otf") format("opentype"); font-display: block; }
@font-face { font-family: "GL Geist"; src: url("/fonts/Geist-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GL Geist"; src: url("/fonts/Geist-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "GL Geist"; src: url("/fonts/Geist-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
/* V6: Inter, for the logo's ® only, set as on V6. */
@font-face { font-family: "GL Inter"; src: url("/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --u: calc(min(100vw, 2315px) / 2315);
  --margin: calc(200 * var(--u));
  --gutter: calc(40 * var(--u));
  --s-1: calc(24 * var(--u));
  --s-2: calc(40 * var(--u));
  --s-3: calc(64 * var(--u));
  --s-4: calc(96 * var(--u));
  --s-5: calc(160 * var(--u));
  --t-display: calc(120 * var(--u));
  --t-title: calc(88 * var(--u));
  --t-sub: calc(64 * var(--u));
  --t-lead: max(18px, calc(44 * var(--u)));
  --t-body: max(15px, calc(32 * var(--u)));
  --t-small: max(13px, calc(24 * var(--u)));
  --t-micro: max(11px, calc(18 * var(--u)));
  --f-pixel: "GL OffBit 101 Bold", "GL Geist", "Helvetica Neue", Arial, sans-serif;
  --f-text: "GL Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #000000;
  --ink-soft: rgb(0 0 0 / 0.62);
  --paper: #faf6f5;
  --card: #ffffff;
  --orange: #ff5c39;
  --blue: #0e1adf; /* Graeme's blue, as V4's (it was #0690fb) */
  --line: max(1.5px, calc(3 * var(--u)));
  --radius: calc(24 * var(--u));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-s: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

/* The one pill, as on V4: outlined, the pixel face, its capitals centred (they sit 0.1em high). */
.pill {
  display: inline-grid;
  place-items: center;
  height: var(--pill-h, calc(64 * var(--u)));
  padding: 0.2em var(--pill-pad, calc(28 * var(--u))) 0;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--f-pixel);
  font-size: var(--pill-t, var(--t-body));
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}

.pill.small { --pill-h: max(18px, calc(36 * var(--u))); --pill-pad: max(7px, calc(14 * var(--u))); --pill-t: var(--t-micro); }
.pill.solid { background: var(--ink); color: var(--card); }
a.pill:hover, a.pill:focus-visible { background: var(--ink); color: var(--card); }

/* The top bar, as on V4. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(60 * var(--u)) var(--margin) 0;
}

.logo {
  font-family: var(--f-pixel);
  font-size: var(--t-lead);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.topbar ul { display: flex; gap: var(--s-3); }

.topbar ul a {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.topbar img { width: 0.62em; height: 0.62em; image-rendering: pixelated; }

/*
  The way into the Dream Space (Graeme, with a mockup of the menu): its
  wizard, last, 2.42 times the words' size, his hat an em above their
  line and his feet just under it, as in the mockup; his margins leave
  him the words' line height (1lh), so the bar doesn't grow. He has no
  words, so his picture names the link, and focus rings him.
*/
.topbar .dreamspace img { width: auto; height: 2.42em; margin: -1em 0 calc(1lh - 1.42em); image-rendering: auto; }
.topbar .dreamspace:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

.topbar ul a:hover span,
.topbar ul a:focus-visible span,
.topbar ul a[aria-current] span {
  text-decoration: underline;
  text-decoration-thickness: var(--line);
  text-underline-offset: 0.2em;
}

/*
  V6: the resume took V6's logo, Graeme's grainy G with its ® (Graeme
  asked, as it is reached from V6), with V5's top bar placing: the G's box
  where his frame "V8" has it, and the nav's baseline 183 design pixels
  down. The nav keeps the resume's Geist.
*/
.topbar { align-items: flex-start; padding-top: 0; }

.mark {
  container-type: inline-size;
  position: relative;
  display: block;
  width: calc(98.667 * var(--u));
  margin: calc(102.4 * var(--u)) 0 0 calc(-3.56 * var(--u));
  color: var(--ink);
  text-decoration: none;
}

/* Through .topbar, or the nav icons' size takes it. */
.topbar .mark img { display: block; width: 100%; height: auto; image-rendering: auto; }

.mark .reg {
  position: absolute;
  left: 82.8cqi;
  top: 4.56cqi;
  font-family: "GL Inter", var(--f-text);
  font-size: 24.93cqi;
  font-weight: 700;
  line-height: 1;
}

.topbar nav { margin-top: calc(183 * var(--u) - 0.969 * var(--t-small)); }

/* ---------------------------------------------------------------------------
   The Projects page
   ------------------------------------------------------------------------- */
.opening {
  align-items: end;
  padding-block: var(--s-5) var(--s-4);
}

.opening h1 {
  grid-column: 1 / 6;
  font-family: var(--f-pixel);
  font-size: calc(220 * var(--u));
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.opening .intro {
  grid-column: 7 / 12;
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.label {
  font-family: var(--f-pixel);
  font-size: var(--t-small);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* The four case studies, two by two. */
.cases {
  row-gap: var(--s-4);
  padding-bottom: var(--s-5);
}

.cases > .label { grid-column: 1 / 13; padding-top: var(--s-1); border-top: var(--line) solid var(--ink); }

.case-card {
  grid-column: span 6;
  display: block;
  text-decoration: none;
}

.case-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-2);
}

.case-card .meta img { height: calc(var(--h) * 1.4 * var(--u)); width: auto; }
.case-card .tags { display: flex; gap: calc(8 * var(--u)); }

.case-card h2 {
  margin-top: var(--s-1);
  font-family: var(--f-pixel);
  font-size: var(--t-sub);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.case-card .read {
  display: inline-block;
  margin-top: var(--s-1);
  font-size: var(--t-small);
  font-weight: 500;
}

.case-card:hover .read,
.case-card:focus-visible .read {
  text-decoration: underline;
  text-decoration-thickness: var(--line);
  text-underline-offset: 0.2em;
}

/*
  The visual: the product on a colour panel, the products standing on one
  floor with the same soft shadow, as on V4's cards.
*/
.panel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel, var(--card));
}

.panel img {
  position: absolute;
  left: 18%;
  bottom: 14%;
  width: 64%;
  height: 66%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 calc(18 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / 0.18));
  transition: scale var(--dur-s) var(--ease);
}

.panel img.flat { filter: none; }
.case-card:hover .panel img { scale: 1.03; }

/* The other projects, one row each: logo, the question, the stage. */
.more { padding-bottom: var(--s-5); }
.more > .label { grid-column: 1 / 13; padding: var(--s-1) 0; border-top: var(--line) solid var(--ink); }
.more ol { grid-column: 1 / 13; border-top: var(--line) solid var(--ink); }

.more li {
  display: grid;
  grid-template-columns: calc(360 * var(--u)) 1fr auto;
  align-items: center;
  column-gap: var(--gutter);
  padding: var(--s-1) 0;
  border-bottom: var(--line) solid var(--ink);
}

.more li img { height: calc(var(--h) * 1.2 * var(--u)); width: auto; max-width: 100%; justify-self: start; }
.more .q { font-weight: 500; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------------------
   A case study
   ------------------------------------------------------------------------- */
.case-head { padding-block: var(--s-4) var(--s-3); }

.crumbs {
  grid-column: 1 / 13;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.case-head .brand { grid-column: 1 / 13; margin-top: var(--s-3); }
.case-head .brand img { height: calc(var(--h) * 2 * var(--u)); width: auto; }

.case-head h1 {
  grid-column: 1 / 11;
  margin-top: var(--s-2);
  font-family: var(--f-pixel);
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.case-head .summary {
  grid-column: 1 / 9;
  margin-top: var(--s-2);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

/* The facts, one column each, ruled above like a credits block. */
.facts {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--s-4);
  padding-top: var(--s-1);
  border-top: var(--line) solid var(--ink);
}

.facts dt { color: var(--ink-soft); font-size: var(--t-small); }
.facts dd { margin-top: calc(6 * var(--u)); font-size: var(--t-small); font-weight: 500; line-height: 1.3; }

.case-visual { padding-bottom: var(--s-5); }
.case-visual .panel { grid-column: 1 / 13; aspect-ratio: 21 / 9; }
.case-visual .panel img { left: 30%; width: 40%; height: 70%; bottom: 12%; }

/* Each part: its label on the left, the words beside it. */
.case-row {
  align-items: start;
  padding-block: var(--s-3) var(--s-5);
  border-top: var(--line) solid var(--ink);
}

.case-row > h2 {
  grid-column: 1 / 4;
  font-family: var(--f-pixel);
  font-size: var(--t-sub);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.case-row > .body { grid-column: 5 / 12; }
.case-row .body > p + p { margin-top: 1em; }
.case-row p { line-height: 1.45; letter-spacing: -0.01em; }

/* The challenge: two questions, side by side. */
.questions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.questions > div { padding: var(--s-3); border-radius: var(--radius); background: var(--card); }
.questions .label { color: var(--ink-soft); }
.questions p { margin-top: var(--s-1); font-size: var(--t-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; }

/* The approach: numbered steps. */
.steps { counter-reset: step; }
.steps li { display: grid; grid-template-columns: calc(110 * var(--u)) 1fr; padding: var(--s-2) 0; border-bottom: var(--line) solid var(--ink); }
.steps li:first-child { padding-top: 0; }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--f-pixel); font-size: var(--t-small); line-height: 1.6; }
.steps h3 { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.02em; }
.steps p { margin-top: calc(8 * var(--u)); color: var(--ink-soft); }

/* A place for an artefact: a redacted chart, a journey map, a photo from the field. */
.artefact {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-top: var(--s-3);
  border: var(--line) dashed var(--ink-soft);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: var(--t-small);
  text-align: center;
  padding: var(--s-2);
}

/* What we learned: three findings, each a line and its proof. */
.findings { display: grid; gap: var(--s-2); }
.findings li { padding: var(--s-3); border-radius: var(--radius); background: var(--card); }
.findings strong { display: block; font-size: var(--t-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; }
.findings span { display: block; margin-top: var(--s-1); color: var(--ink-soft); font-size: var(--t-small); }

.impact { font-size: var(--t-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; }

.case-row blockquote {
  margin-top: var(--s-3);
  padding-left: var(--s-2);
  border-left: var(--line) solid var(--orange);
}

.case-row blockquote p { font-size: var(--t-body); }
.case-row blockquote footer { margin-top: var(--s-1); color: var(--ink-soft); font-size: var(--t-small); }

/* The next case, and the way back. */
.case-next {
  align-items: center;
  padding-block: var(--s-4);
  border-top: var(--line) solid var(--ink);
}

.case-next .next { grid-column: 1 / 10; text-decoration: none; }
.case-next .next .label { color: var(--ink-soft); }
.case-next .next strong { display: block; margin-top: var(--s-1); font-family: var(--f-pixel); font-size: var(--t-title); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.case-next .next:hover strong { color: var(--orange); }
.case-next .pill { grid-column: 10 / 13; justify-self: end; }

/*
  Draft prompts: the parts Graeme writes, marked so they can't go live
  unnoticed. "body" lifts the rule over the grey of the findings' small
  print, which otherwise hid the prompts there.
*/
body .todo { color: var(--orange); }

/* The footer, as on V4. */
.site-foot {
  align-items: center;
  padding-block: var(--s-3);
  border-top: var(--line) solid var(--ink);
  font-size: var(--t-small);
}

.site-foot .logo { grid-column: 1 / 4; font-size: var(--t-body); }
.site-foot ul { grid-column: 4 / 10; display: flex; gap: var(--s-3); font-weight: 500; }
.site-foot a { text-decoration: none; }
.site-foot a[href]:hover { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.2em; }
.site-foot .copy { grid-column: 10 / 12; color: var(--ink-soft); }
/* Then the G, with its ®, in place of "Graeme Lindsay" in the pixel face (Graeme, before launch: the new logo in every footer), smaller than the top bar's: 40px wide at 1440. */
.site-foot .mark { width: max(36px, calc(64 * var(--u))); margin: 0; }
.site-foot .mark img { display: block; width: 100%; height: auto; }
/* Then no rule above it (Graeme, before launch), as on V6 and the Films pages. */
.site-foot { border-top: 0; }

.up {
  grid-column: 12;
  justify-self: end;
  position: relative;
  width: max(52px, calc(120 * var(--u)));
  aspect-ratio: 150.748 / 153.771;
  text-decoration: none;
}

.up img { display: block; width: 100%; height: 100%; }

.up span {
  position: absolute;
  left: 51.74%;
  top: 59.83%;
  translate: -50% -50%;
  font-family: var(--f-pixel);
  font-size: max(26px, calc(62 * var(--u)));
  line-height: 1.1;
}

.up:active { translate: 0 calc(4 * var(--u)); }
/* Then much smaller (Graeme, before launch): 36px across, from 75 at 1440 and 52 on phones, about the footer G's size; its letters in proportion, as 62 to its 120. */
.up { --key: max(36px, calc(58 * var(--u))); width: var(--key); }
.up span { font-size: calc(var(--key) * 62 / 120); }

/* ---------------------------------------------------------------------------
   Phones
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --margin: 20px;
    --gutter: 16px;
    --s-1: 12px;
    --s-2: 20px;
    --s-3: 28px;
    --s-4: 40px;
    --s-5: 56px;
    --t-display: clamp(30px, 8.6vw, 40px);
    --t-title: 30px;
    --t-sub: 24px;
    --t-lead: 19px;
    --t-body: 16px;
    --t-small: 14px;
    --t-micro: 11px;
    --line: 1.5px;
    --radius: 14px;
  }

  .wrap { grid-template-columns: minmax(0, 1fr); }
  .wrap > * { grid-column: 1 / -1 !important; }

  .topbar { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; }
  .mark { width: 52px; margin: 0 0 0 -2px; }
  .topbar nav { margin-top: 0; }
  .topbar ul { width: 100%; justify-content: space-between; gap: 8px; }
  .topbar ul a { font-size: 15px; }
  /* Then centred on phones (Graeme, before launch): the G over the menu, the menu gathered in the middle rather than spread edge to edge, free to wrap on the narrowest screens. */
  .topbar { align-items: center; }
  .topbar .mark { margin: 0; }
  .topbar ul { width: auto; flex-wrap: wrap; justify-content: center; gap: 6px clamp(6px, calc(5.6vw - 10px), 20px); } /* One row down to 320, the Resume's Geist included (at 4.6vw it wrapped there). */
  /* Then the G and the menu as one header (Graeme: "balanced"): 14px between their ink, from 23, which matched the 24 above the G and left it floating; the hero line stays 45px under the menu. */
  .topbar { gap: 5px; }
  /* Then the Dream Space's wizard joined the menu, and below 375 it no longer fit one row (at 320 it wrapped, the page moving down 25px; the Resume's Geist the widest): there the words ease down, to 13px at 320, and the gaps close to 6px. */
  @media (max-width: 374px) {
    .topbar ul a { font-size: max(13px, 4.1vw); }
    .topbar ul { column-gap: 6px; }
  }

  .opening { row-gap: 20px; }
  .opening h1 { font-size: 64px; }

  .more li { grid-template-columns: 1fr; row-gap: 8px; }
  .more li img { height: calc(var(--h) * 0.9px); }
  .more li .pill { justify-self: start; }
  .case-card .meta img { height: calc(var(--h) * 0.9px); }

  .facts { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .case-head .brand img { height: calc(var(--h) * 1.2px); }
  .case-visual .panel { aspect-ratio: 4 / 3; }
  .case-visual .panel img { left: 15%; width: 70%; }
  .case-row { row-gap: 20px; }
  .questions { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 40px 1fr; }

  .case-next { row-gap: 20px; }
  .case-next .pill { justify-self: start; }

  .site-foot { row-gap: 16px; padding-block: 32px; }
  .site-foot ul { flex-wrap: wrap; gap: 16px; }
  .up { justify-self: start; }
  /* Then one footer on phones (Graeme, before launch): the G and the UP key on one row, the links under them, then the year; stacked, it ran to four loose rows. */
  .site-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
  .site-foot .mark { order: 1; }
  .site-foot .up { order: 2; margin-left: auto; }
  .site-foot ul { order: 3; flex-basis: 100%; }
  .site-foot .copy { order: 4; flex-basis: 100%; }
}