/* Selina Beycan portfolio. Hand-coded, no framework.
   Dials (taste-skill): variance 6, motion 4, density 3. One authored motion moment per page. */

@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #111111;
  --paper: #ffffff;
  --muted: #5f5f5c;   /* 6.4:1 on white */
  --faint: #767672;   /* 4.6:1 on white, AA for text */
  --rule: #e4e4e1;
  --night: #0e0e0d;
  --night-soft: #a8a8a3;

  --display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-body: clamp(17px, 0.4vw + 15.5px, 20px);
  --fs-lead: clamp(20px, 0.9vw + 16px, 26px);
  --fs-small: clamp(15px, 0.15vw + 14.5px, 16px);
  --fs-h3: clamp(26px, 1.4vw + 20px, 36px);
  --fs-h2: clamp(40px, 5.2vw, 84px);

  --gutter: clamp(16px, 2.8vw, 40px);
  /* case-study rhythm: proximity shows what belongs together */
  --gap-group: clamp(32px, 3.3vw, 48px);     /* siblings in one group, a label and its content */
  --gap-related: clamp(48px, 4.4vw, 64px);   /* blocks that belong to the same chapter */
  --gap-section: clamp(96px, 10vw, 144px);   /* between chapters */
  --nav-h: 64px;
  --stack-step: 0px;   /* every card sticks at the same line and fully covers the one before */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* exponential-style ease-out */
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: #bdbdb8 transparent;
}
body {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
/* emphasis is the second weight in ink, never a heavier face (Two Weights Rule) */
strong, b { font-weight: 500; color: var(--ink); }
::selection { background: var(--ink); color: var(--paper); }
[data-dark] ::selection { background: var(--paper); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 12px; }

.ico { width: 1em; height: 1em; flex: none; }

/* ---------- Layout primitives ---------- */
/* content stops growing at 1840px and centres; full-bleed bands (nav, footer) keep their edges */
.pg { padding-inline: max(var(--gutter), (100% - 1840px) / 2); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.side, .sec-title { font-size: var(--fs-body); font-weight: 400; color: var(--faint); letter-spacing: -0.01em; }
.sec-title { padding-bottom: 32px; }
.body { font-size: var(--fs-body); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.body + .body { margin-top: 20px; }
.body strong { color: var(--ink); font-weight: 500; }
.ink { color: var(--ink); }
.body--ink { color: #3f3f3d; }
.lead { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.02em; max-width: 34ch; }
.lead--wide { max-width: 40ch; }
.note { margin-top: 40px; font-size: 18px; }
.h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.03em; }

/* underline that retracts on hover; icon nudges */
.link-u {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 220ms var(--ease-out);
}
.link-u .ico { transition: transform 220ms var(--ease-out); }
.arrow { margin-top: 32px; font-size: 17px; }
@media (hover: hover) {
  .link-u:hover { background-size: 0% 1px; background-position: right bottom; }
  .link-u:hover .ico { transform: translateX(3px); }
  .link-u.ext:hover .ico { transform: translate(2px, -2px); }
}

/* ---------- Nav: takes the colour of the card beneath it ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg, var(--paper));
  color: var(--nav-fg, var(--ink));
  border-bottom: 1px solid currentColor;
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.nav__in { height: var(--nav-h); display: flex; justify-content: space-between; align-items: center; }
.nav__name { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.nav__links { display: flex; gap: clamp(16px, 2vw, 24px); font-size: 17px; }
.nav__links a { position: relative; padding-block: 10px; }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; }
.nav__name { white-space: nowrap; }
.nav__toggle { display: none; }

/* ---------- Home ---------- */
.hero { padding-block: clamp(56px, 6.6vw, 96px) clamp(56px, 6.6vw, 96px); }
.hero h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1; letter-spacing: -0.04em; max-width: 28ch; }
.hero__sub { margin-top: 32px; font-size: var(--fs-body); color: var(--muted); max-width: 50ch; }
.hero__avail { margin-top: 20px; font-size: var(--fs-body); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.hero__avail a { color: var(--ink); }

.cards { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px; timeline-scope: --k1, --k2, --k3, --k4, --k5; }
.card {
  --i: 0;
  position: sticky;
  top: calc(var(--nav-h) + 8px + var(--i) * var(--stack-step));
  display: grid; grid-template-columns: 5fr 7fr; gap: 40px;
  min-height: min(680px, calc(100svh - var(--nav-h) - 40px - var(--i) * var(--stack-step)));
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--c-bg); color: var(--c-fg);
  transform-origin: 50% 0;
}
.card:nth-child(1) { --i: 0; view-timeline-name: --k1; }
.card:nth-child(2) { --i: 1; view-timeline-name: --k2; }
.card:nth-child(3) { --i: 2; view-timeline-name: --k3; }
.card:nth-child(4) { --i: 3; view-timeline-name: --k4; }
.card:nth-child(5) { --i: 4; view-timeline-name: --k5; }

.card__txt { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.card__tags { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--fs-small); }
.card__tags span + span { color: var(--c-soft); }
.card h3 { font-size: var(--fs-h2); line-height: 0.95; letter-spacing: -0.04em; }
.card__desc { margin-top: 20px; font-size: var(--fs-body); line-height: 1.45; max-width: 28ch; color: var(--c-soft); }
.card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; font-size: 16px; font-weight: 500; }
.card__cta .ico { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .card:hover .card__cta .ico { transform: translateX(4px); } }
.card__img { position: relative; min-height: 0; }
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* text colours tested to WCAG AA on each card */
.c-oralingo   { --c-bg: #2f45d0; --c-fg: #ffffff; --c-soft: rgba(255,255,255,.78); }
.c-alimentare { --c-bg: #e2762c; --c-fg: #111111; --c-soft: rgba(17,17,17,.74); }
.c-greencar   { --c-bg: #1e5c43; --c-fg: #ffffff; --c-soft: rgba(255,255,255,.78); }
.c-mentorhub  { --c-bg: #cdbdf2; --c-fg: #111111; --c-soft: rgba(17,17,17,.70); }
.c-artlink    { --c-bg: #f1cf45; --c-fg: #111111; --c-soft: rgba(17,17,17,.70); }

/* the authored moment: each card settles back as the next one slides over it.
   CSS scroll-driven, no scroll listeners. Browsers without support simply stack. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes settle { to { transform: scale(0.94); filter: brightness(0.9); } }
    .card:nth-child(1) { animation: settle linear both; animation-timeline: --k2; animation-range: entry 10% entry 100%; }
    .card:nth-child(2) { animation: settle linear both; animation-timeline: --k3; animation-range: entry 10% entry 100%; }
    .card:nth-child(3) { animation: settle linear both; animation-timeline: --k4; animation-range: entry 10% entry 100%; }
    .card:nth-child(4) { animation: settle linear both; animation-timeline: --k5; animation-range: entry 10% entry 100%; }
  }
}

.about-teaser { padding-block: clamp(96px, 10vw, 140px) clamp(112px, 11vw, 160px); }

/* ---------- Contact ---------- */
.contact {
  background: var(--night); color: var(--paper);
  min-height: 100svh; padding-block: clamp(88px, 9vw, 120px) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  caret-color: var(--paper);
}
.contact__grid { align-items: start; }
.contact h2 { font-size: var(--fs-h2); line-height: 0.95; letter-spacing: -0.04em; }
.contact__p { margin-top: 24px; max-width: 30ch; font-size: var(--fs-body); color: var(--night-soft); }
.contact__mail { margin-top: 36px; font-size: clamp(19px, 1vw + 15px, 22px); letter-spacing: -0.02em; }
.form { display: flex; flex-direction: column; gap: 32px; padding-top: 12px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld label { font-size: 15px; color: var(--night-soft); }
.fld input, .fld textarea {
  background: transparent; border: 0; border-bottom: 1px solid #4a4a47; border-radius: 0;
  color: var(--paper); font: inherit; font-size: 20px; padding: 8px 0 14px; resize: none;
  transition: border-color 160ms var(--ease-out);
}
.fld input:hover, .fld textarea:hover { border-bottom-color: #7a7a75; }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--paper); }
.fld input:focus-visible, .fld textarea:focus-visible { box-shadow: 0 1px 0 0 var(--paper); }
.fld [aria-invalid="true"] { border-bottom-color: #ff9a85; }
.fld__err { font-size: 15px; color: #ff9a85; }
.fld__err:empty { display: none; }
.send {
  align-self: flex-start; min-height: 52px; padding: 16px 28px; border: 0; border-radius: 0;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 17px; font-weight: 500; cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out);
}
@media (hover: hover) { .send:hover { background: #e8e8e5; } }
.send:active { transform: scale(0.97); }
.send[disabled] { opacity: .55; cursor: progress; }
.form__status { font-size: 17px; color: var(--night-soft); }
.form__status:empty { display: none; }
.form__note { margin-top: -16px; font-size: 15px; color: var(--night-soft); }
.form__note a { color: var(--paper); }
.legal { padding-bottom: var(--gap-section); }
.contact__base { display: flex; justify-content: space-between; gap: 16px; margin-top: 96px; font-size: 15px; color: var(--night-soft); }
.contact__base a { color: var(--paper); }

/* ---------- About ---------- */
.about-hero { padding-block: clamp(56px, 6.6vw, 96px) clamp(96px, 10vw, 140px); }
.about-hero h1 { font-size: clamp(32px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -0.035em; max-width: 30ch; }
.sec { padding-bottom: clamp(96px, 10vw, 140px); }
.principles { display: grid; gap: 40px; }
.principles h3 { font-size: clamp(22px, 1vw + 18px, 26px); line-height: 1.15; letter-spacing: -0.025em; }
.principles p { margin-top: 10px; font-size: 18px; color: var(--muted); max-width: 40ch; }
.ow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--rule); font-size: clamp(22px, 1vw + 18px, 26px); font-weight: 500; letter-spacing: -0.025em; }
.ow__a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; color: var(--muted); letter-spacing: 0; transition: color 160ms var(--ease-out); }
.ow__a .ico { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { a.ow:hover .ow__a { color: var(--ink); } a.ow:hover .ow__a .ico { transform: translateX(4px); } }

/* ---------- Project page layout: shared by every case study ----------
   Title and intro, a four-fact row, the hero, label rows, numbered process.
   Everything below the process reuses the case-study blocks underneath. */
.pp-head { padding-block: clamp(56px, 6.6vw, 96px) 0; }
.pp-title { font-size: clamp(52px, 8vw, 120px); line-height: 0.92; letter-spacing: -0.04em; }
.pp-intro { margin-top: 28px; font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.02em; color: var(--muted); max-width: 44ch; }

.pp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 40px; margin: var(--gap-related) 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.pp-facts dt { font-size: var(--fs-small); color: var(--faint); }
.pp-facts dd { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.4; }

.pp-hero { padding-top: var(--gap-related); }
.pp-hero img { width: 100%; height: auto; max-height: min(86svh, 980px); object-fit: contain; }

.pp-rows { display: flex; flex-direction: column; gap: var(--gap-group); padding-top: var(--gap-section); }
.pp-row__txt p + p { margin-top: 16px; }
.pp-row__txt { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.02em; max-width: 40ch; }
.pp-row__more { margin-top: 20px; font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); }

.pp-process { padding-top: var(--gap-section); }
.pp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 40px; margin: 0; padding: 0; list-style: none; }
.pp-steps--3 { grid-template-columns: repeat(3, 1fr); }
/* outcome lines align across columns whatever the description length */
.pp-step { display: flex; flex-direction: column; }
.pp-step__n { font-size: var(--fs-small); color: var(--faint); }
.pp-step h3 { margin-top: 14px; font-size: clamp(22px, 1vw + 18px, 26px); line-height: 1.15; letter-spacing: -0.025em; }
.pp-step__desc { margin: 10px 0 16px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.pp-step__desc strong { color: var(--ink); font-weight: 500; }
.pp-step__out { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--fs-small); font-weight: 500; }
.pp-step__out .ico { flex: none; transform: translateY(2px); }
.pp-gallery { padding-top: var(--gap-related); }
/* the website frame that opens the product, before the app screens */
.pp-site { padding-bottom: var(--gap-related); }
/* one-line caption under a case-study image */
.pp-cap { margin-top: 16px; font-size: var(--fs-small); color: var(--faint); }

/* image frames: every case-study image sits in a light wash of its project colour.
   Frames have fixed ratios, so an image can never grow past its frame; it is contained, never cropped. */
.p-alimentare { --tint: #e2762c; }
.p-greencar   { --tint: #1e5c43; }
.p-mentorhub  { --tint: #cdbdf2; }
.p-artlink    { --tint: #f1cf45; }
.p-oralingo   { --tint: #2f45d0; }
.media.frame {
  aspect-ratio: var(--ratio, 16 / 9);
  padding: clamp(20px, 3.6vw, 56px);
  background: #f6f3f0;
  background: color-mix(in oklab, var(--tint, #888) 12%, white);
}
.media.frame img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.frame--wide { --ratio: 16 / 9; }
.frame--tall { --ratio: 4 / 5; }
.frame--square { --ratio: 1 / 1; }
.frame--std { --ratio: 4 / 3; }
/* whole image at its own proportions, for wide composites that a fixed ratio would shrink */
.media.frame.frame--natural { aspect-ratio: auto; }
.media.frame.frame--natural img { height: auto; }

/* statement: one decision, said plainly */
.statement { font-size: clamp(32px, 3.6vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; max-width: 22ch; text-wrap: balance; }

/* findings: what research showed (grey) answered by what the design does (ink) */
.found { margin: 0; border-bottom: 1px solid var(--rule); }
.found__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; padding-block: 24px; border-top: 1px solid var(--rule); font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.02em; }
.found dt { color: var(--muted); }
.found dd { margin: 0; }
/* findings: each group's finding as a headline, the evidence and the principle beside it; space, not rules */
/* compact findings table: body size, tighter rows */
.found--compact .found__row { padding-block: 16px; font-size: var(--fs-body); line-height: 1.4; letter-spacing: -0.01em; }
.finds { display: flex; flex-direction: column; gap: var(--gap-group); }
.finds__k { font-size: var(--fs-small); color: var(--faint); }
.finds__h { margin-top: 6px; font-size: clamp(22px, 1vw + 18px, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; max-width: 24ch; text-wrap: balance; }
.finds__body { padding-top: calc(var(--fs-small) * 1.5 + 6px); }
.finds__p { font-size: var(--fs-body); line-height: 1.5; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.finds__key { margin-top: 8px; font-size: var(--fs-body); font-weight: 500; line-height: 1.4; max-width: 46ch; }
@media (max-width: 900px) { .finds__body { padding-top: 0; } }
.pp-row__txt + .found { margin-top: var(--gap-group); }

/* image still to come: the frame holds its place */
.frame--empty { display: grid; place-items: center; text-align: center; font-size: var(--fs-small); }

/* ---------- Diagram kit: dev/diagrams.html is the specimen; case studies use only these ----------
   Real HTML in the site's own type. One 1px ink rule on top, #e4e4e1 hairlines inside, sentence case,
   15px minimum, one tinted focal area at most, small solid squares as the only marker.
   Each figure is a size container, so a diagram adapts to the column it sits in, not to the window. */
.dg { margin: 0; padding-top: 20px; border-top: 1px solid var(--ink); container-type: inline-size; }
.dg figcaption { margin-top: 20px; font-size: var(--fs-small); color: var(--faint); }
.dg-label { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.dg-note { font-size: var(--fs-small); line-height: 1.45; color: var(--faint); }
.dg-item { font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
.dg-strong { font-weight: 500; }
/* a diagram's headline line: the point of a phase or column, set larger than its items */
.dg-head { font-size: clamp(22px, 1vw + 18px, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; margin: 4px 0 6px; }
.dg-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dg-n { display: inline-block; min-width: 1.6em; color: var(--faint); font-variant-numeric: tabular-nums; }
.dg-sq { display: inline-flex; align-items: baseline; gap: 10px; }
.dg-sq::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--tint, var(--ink)); transform: translateY(-1px); }
.dg-sq--muted::before { background: var(--faint); }
.dg-cell { padding: 16px 0 0; border-top: 1px solid var(--rule); }
.dg-cell > * + * { margin-top: 6px; }
.dg-cell > .dg-list { margin-top: 10px; }

/* focal area: the one place on the project tint */
.dg-focus { background: #f6f3f0; background: color-mix(in srgb, var(--tint, #888) 35%, white); }
.dg-focus.dg-cell, .dg-focus.dg-phase, .dg-focus.dg-stage-col { padding: 16px 20px 20px; border-top-color: transparent; }
/* inside a focal area the marker is solid ink: no project colour clears 3:1 on its own 35% tint */
.dg-focus .dg-sq::before { background: var(--ink); }
/* pale project colours (lilac, yellow) vanish on their own tint; their marker is solid ink instead */
.p-mentorhub .dg-sq:not(.dg-sq--muted)::before, .p-artlink .dg-sq:not(.dg-sq--muted)::before { background: var(--ink); outline: 0; }
/* secondary text on a tint is translucent ink, so it takes the tint's hue and stays above AA */
.dg-focus .dg-note, .dg-focus .dg-n, .frame--empty .tbd { color: rgba(17,17,17,.72); }

/* map: two axes, four quadrants */
.dg-map { display: grid; grid-template-columns: minmax(120px, 0.6fr) 1fr 1fr; }
.dg-map__y { align-self: start; padding: 16px 16px 0 0; }
.dg-map__y--low { align-self: start; padding: 16px 16px 0 0; }
.dg-map__q { min-height: 96px; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--rule); }
.dg-map__q--top { border-bottom: 1px solid var(--rule); }
.dg-map__q-label { display: none; }
.dg-map__e > .dg-note { margin-top: 2px; }
.dg-map__e + .dg-map__e { margin-top: 8px; }
.dg-map__x { padding-top: 12px; display: flex; justify-content: space-between; grid-column: 2 / 4; border-top: 1px solid var(--ink); }

/* grid: a service in the centre, the people around it */
.dg-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 20px 40px; align-items: start; }
.dg-grid__centre { grid-column: 2; grid-row: 1 / 3; }
.dg-grid__below { grid-column: 2; }
.dg-grid .dg-list + .dg-note { margin-top: 14px; }

/* lanes: two sides with the problem between them */
.dg-lanes { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 20px 40px; align-items: start; }
.dg-lanes__centre { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 12px; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.02em; }
.dg-lanes__lead { font-weight: 500; }
.dg-lanes__then { color: rgba(17,17,17,.72); }
.dg-lanes .dg-list { gap: 14px; }

/* canvas: business model canvas, value proposition on the tint */
.dg-canvas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 28px; }
.dg-canvas__col { display: grid; gap: 20px; align-content: start; }
.dg-canvas__wide { grid-column: span 5; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }

/* journey: phases left to right, each split into stages with numbered steps */
.dg-journey { display: grid; grid-template-columns: var(--phases, repeat(3, 1fr)); gap: 20px; }
.dg-phase { padding-top: 16px; border-top: 1px solid var(--rule); }
.dg-phase__stages { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; margin-top: 12px; }
.dg-stage .dg-list { gap: 10px; }
.dg-steps .dg-item { display: flex; gap: 2px; }

/* stages: a funnel read left to right, one column per stage */
.dg-stages { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 20px; }
.dg-stage-col .dg-note { margin-top: 6px; }
/* fit: stages of an internship, each with the platforms that act there; the gap is the focus */
.dg-fit .dg-list { margin-top: 16px; }
/* every column starts at the focus column's inset, so headings and items line up across the tint */
.dg-stages.dg-fit > .dg-stage-col:not(.dg-focus) { padding-top: 16px; }
.dg-fit .dg-label.dg-sq, .dg-fit .dg-item.dg-sq { display: flex; }
.dg-fit .dg-map__e .dg-note { margin-top: 2px; }

/* value: what each side gets */
.dg-value { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }

/* tree: a root and its branches, actions in grey after each item */
.dg-tree__root { padding-bottom: 16px; }
.dg-tree__branches { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 20px; padding-top: 16px; border-top: 1px solid var(--ink); }
.dg-tree__branches > .dg-cell { border-top: 0; padding-top: 0; }
.dg-tree .dg-list li { display: grid; gap: 2px; }

/* insights: what research found, and what was decided because of it */
.dg-insights { margin: 0; }
.dg-insights__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; padding-block: 16px; border-top: 1px solid var(--rule); }
.dg-insights__row:last-child { border-bottom: 1px solid var(--rule); }
.dg-insights dt { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.dg-insights dd { margin: 0; font-size: var(--fs-small); line-height: 1.45; font-weight: 500; }
.dg-insights__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 12px; }
.dg-insights__head + .dg-insights__row { border-top-color: var(--rule); }

/* blueprint: lanes as rows, stages as columns; columns share row heights through subgrid */
.dg-bp { display: grid; grid-template-columns: minmax(120px, 0.7fr) repeat(var(--n, 4), 1fr); grid-template-rows: auto repeat(var(--lanes, 4), auto); column-gap: 20px; }
.dg-bp__col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.dg-bp__col > * { padding-block: 12px; border-top: 1px solid var(--rule); }
.dg-bp__col > :first-child { border-top: 0; padding-top: 0; }
.dg-bp__col > .dg-bp__line { border-top-color: var(--ink); }
.dg-bp__lane-name { display: none; }
/* the focal column pads sideways only; top and bottom space is shared by every column so rows stay level */
.dg-bp__col.dg-focus { padding-inline: 12px; }
.dg-bp__col > :first-child { padding-top: 12px; }
.dg-bp__col > :last-child { padding-bottom: 14px; }

.dg-lanes > .dg-cell:not(.dg-focus), .dg-value > .dg-cell, .dg-grid > .dg-cell:not(.dg-focus):not(.dg-grid__below),
.dg-canvas > .dg-cell:not(.dg-focus), .dg-canvas__col > .dg-cell:first-child, .dg-canvas__wide > .dg-cell, .dg-journey > .dg-phase:not(.dg-focus),
.dg-stages > .dg-stage-col:not(.dg-focus) { border-top: 0; padding-top: 0; }
.dg-journey > .dg-phase:not(.dg-focus) { padding-top: 16px; }
.dg-canvas__wide { padding-top: 16px; border-top: 1px solid var(--rule); }
/* the focal cell keeps a gap below the rule; the top row beside it drops by the same amount so all text starts level */
@container (min-width: 761px) { .dg-canvas > .dg-cell:not(.dg-focus), .dg-canvas__col > .dg-cell:first-child { padding-top: 21px; } }

/* stage blueprint: journey steps as columns under a slim stage label; service layers as rows, separated by the
   three blueprint lines (interaction and internal interaction dashed, visibility solid). Columns share row heights
   through subgrid. In narrow containers it stacks in reading order and each stage label sticks. */
.dg-sbp { display: grid; grid-template-columns: minmax(150px, 0.8fr) repeat(var(--n, 6), minmax(0, 1fr)); grid-template-rows: auto auto repeat(var(--lanes, 5), auto); }
.dg-sbp__stage { grid-row: 1; grid-column: var(--c); padding: 12px 20px 12px 0; }
.dg-sbp__stage.dg-sq { display: block; }
.dg-sbp__stage.dg-sq::before { display: inline-block; margin-right: 10px; vertical-align: 1px; }
.dg-sbp__stage.dg-focus.dg-sq::before { background: var(--ink); }
.dg-sbp__lanes, .dg-sbp__step { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }
.dg-sbp__lanes { grid-column: 1; }
.dg-sbp__step { grid-column: var(--c); }
.dg-sbp__lanes > *, .dg-sbp__step > * { padding: 12px 20px 16px 0; border-top: 1px solid var(--rule); }
.dg-sbp .dg-sbp__dash { border-top: 1px dashed var(--ink); }
.dg-sbp .dg-sbp__line { border-top: 1px solid var(--ink); }
.dg-sbp__ln > * { display: block; }
.dg-sbp__ln .dg-note { margin-bottom: 4px; }
.dg-sbp__lname { font-size: var(--fs-small); line-height: 1.45; font-weight: 500; }
.dg-sbp__tp { color: var(--muted); }
.dg-sbp .dg-focus { padding-inline: 16px; }
/* the focus uses the same light wash as the image frames */
.dg-sbp .dg-focus { background: color-mix(in oklab, var(--tint, #888) 12%, white); }
.dg-sbp__step.dg-focus { padding: 0; }
.dg-sbp__step.dg-focus > * { padding-inline: 16px; }
.dg-focus .dg-sbp__tp { color: rgba(17,17,17,.72); }
.dg-sbp__name { font-size: var(--fs-small); font-weight: 500; }
.dg-sbp__lane { display: none; }
.dg-sbp__loop { margin-top: 8px; }
/* fail points: a labelled risk and its fix, labels in a narrow column so the two lines scan as a pair */
.dg-rf { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.dg-rf dt { font-size: var(--fs-small); line-height: 1.45; color: var(--faint); }
.dg-rf dd { margin: 0; }
.dg-focus .dg-rf dt { color: rgba(17,17,17,.72); }
@container (max-width: 1100px) {
  .dg-sbp { grid-template-columns: 1fr; grid-template-rows: none; }
  .dg-sbp__lanes { display: none; }
  .dg-sbp__stage, .dg-sbp__step { grid-column: auto; grid-row: auto; }
  .dg-sbp__step { display: block; padding-bottom: 8px; }
  .dg-sbp__stage { position: sticky; top: var(--nav-h); z-index: 1; margin-top: 40px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
  .dg-sbp__stage:not(.dg-focus) { background: var(--paper); }
  .dg-sbp__lanes + .dg-sbp__stage { margin-top: 0; }
  .dg-sbp .dg-sbp__stage.dg-focus { padding-inline: 16px; }
  .dg-sbp__step > * { padding: 10px 0 12px; }
  .dg-sbp__step > .dg-sbp__name { padding-top: 24px; border-top: 0; }
  .dg-sbp__lane { display: block; margin-bottom: 2px; }
}
/* stacked blueprints fold: each step shows its name and opens on tap (main.js sets data-fold); the plus turns to a minus */
.dg-sbp__toggle { all: unset; position: relative; display: flex; align-items: baseline; width: 100%; box-sizing: border-box; }
.dg-sbp__toggle:disabled { cursor: default; }
.dg-sbp[data-fold] .dg-sbp__toggle { cursor: pointer; padding-right: 28px; }
.dg-sbp[data-fold] .dg-sbp__toggle::before, .dg-sbp[data-fold] .dg-sbp__toggle::after { content: ""; position: absolute; right: 2px; top: 50%; width: 11px; height: 1px; background: currentColor; }
.dg-sbp[data-fold] .dg-sbp__toggle::after { transform: rotate(90deg); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.dg-sbp[data-fold] .is-open .dg-sbp__toggle::after { transform: rotate(0deg); }
.dg-sbp__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.dg-sbp[data-fold] .dg-sbp__step { padding-bottom: 0; border-top: 1px solid var(--rule); }
.dg-sbp[data-fold] .dg-sbp__step.is-open { padding-bottom: 8px; }
.dg-sbp[data-fold] .dg-sbp__lanes + .dg-sbp__step { border-top: 0; }
.dg-sbp[data-fold] .dg-sbp__step > .dg-sbp__name { padding-block: 16px; }
.dg-sbp[data-fold] .dg-sbp__step:not(.is-open) > :not(.dg-sbp__name) { display: none; }
@media (prefers-reduced-motion: reduce) { .dg-sbp__toggle::after { transition: none; } }

/* compare: one row per existing option, then its strength, its weakness and the opportunity it leaves.
   The opportunity column is the focus on the light wash. Narrow containers stack each row and label every cell. */
.dg-compare__head, .dg-compare__row { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.15fr; column-gap: 24px; }
.dg-compare__head { padding-bottom: 12px; font-size: var(--fs-small); color: var(--faint); }
.dg-compare__head .dg-sq { display: block; padding-left: 16px; color: var(--ink); }
.dg-compare__head .dg-sq::before { display: inline-block; margin-right: 10px; vertical-align: 1px; }
.dg-compare__row { border-top: 1px solid var(--rule); }
.dg-compare__row > * { padding: 18px 0 20px; }
.dg-compare__name .dg-note { margin-top: 4px; }
.dg-compare__opp { padding-inline: 16px !important; font-weight: 500; background: color-mix(in oklab, var(--tint, #888) 12%, white); }
@container (max-width: 760px) {
  .dg-compare__head { display: none; }
  .dg-compare__row { grid-template-columns: 1fr; padding: 16px 0; }
  .dg-compare__head + .dg-compare__row { border-top: 0; padding-top: 0; }
  .dg-compare__row > * { padding: 0 0 12px; }
  .dg-compare__row [data-l]::before { content: attr(data-l); display: block; font-weight: 400; color: var(--faint); }
  .dg-compare__opp { padding: 12px 14px !important; }
  .dg-compare__opp::before { color: rgba(17,17,17,.72) !important; }
}

/* mirror: two sides facing each other across a thin spine; matching rows sit level, a square on the spine marks each pair */
.dg-mirror { display: grid; grid-template-columns: 1fr 48px 1fr; }
.dg-mirror__top { grid-column: 1 / -1; padding: 20px; }
.dg-mirror__top > * + * { margin-top: 8px; }
.dg-mirror__head { padding-block: 28px 12px; }
.dg-mirror__head--l, .dg-mirror__cell--l { text-align: right; }
.dg-mirror__head--l, .dg-mirror__cell--l { padding-right: 20px; }
.dg-mirror__head--r, .dg-mirror__cell--r { padding-left: 20px; }
.dg-mirror__cell { padding-block: 14px 18px; border-top: 1px solid var(--rule); }
.dg-mirror__cell > * + * { margin-top: 2px; }
.dg-mirror__node { position: relative; }
.dg-mirror__node::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink); }
.dg-mirror__node--pair::after { content: ""; position: absolute; left: 50%; top: 20px; width: 9px; height: 9px; margin-left: -4px; background: var(--ink); }
.dg-mirror__end { grid-column: 3; position: relative; padding: 28px 0 0 20px; }
.dg-mirror__end::before { content: ""; position: absolute; left: -24px; top: 0; height: 36px; width: 1px; background: var(--ink); }
.dg-mirror__end > * { max-width: 46ch; }
.dg-mirror__end > * + * { margin-top: 4px; }

@container (max-width: 760px) {
  /* stacked: a hairline between items, none on the first one under the ink rule */
  .dg-lanes > .dg-cell:not(.dg-focus), .dg-value > .dg-cell, .dg-grid > .dg-cell:not(.dg-focus), .dg-canvas .dg-cell:not(.dg-focus),
  .dg-journey > .dg-phase:not(.dg-focus), .dg-stages > .dg-stage-col:not(.dg-focus), .dg-tree__branches > .dg-cell { padding-top: 16px; border-top: 1px solid var(--rule); }
  .dg-value > :first-child, .dg-journey > :first-child:not(.dg-focus), .dg-stages > :first-child:not(.dg-focus), .dg-tree__branches > :first-child { padding-top: 0; border-top: 0; }
  .dg-canvas__wide { padding-top: 0; border-top: 0; }
  .dg-insights__head { display: none; }
  .dg-map { grid-template-columns: 1fr; }
  .dg-map__y, .dg-map__x { display: none; }
  .dg-map__q { min-height: 0; border-left: 0; border-bottom: 0; border-top: 1px solid var(--rule); padding: 16px 0 20px; }
  .dg-map__q.dg-focus { order: -1; padding: 16px 20px 20px; border-top-color: transparent; }
  .dg-map__q-label { display: block; }
  .dg-grid, .dg-lanes, .dg-canvas, .dg-canvas__wide, .dg-journey, .dg-stages, .dg-value, .dg-tree__branches, .dg-insights__row { grid-template-columns: 1fr; }
  .dg-grid__centre, .dg-grid__below { grid-column: auto; grid-row: auto; }
  .dg-grid__centre, .dg-lanes__centre { order: -1; }
  .dg-canvas__col { display: contents; }
  .dg-canvas > *, .dg-canvas__col > * { margin-bottom: 20px; }
  .dg-canvas__wide { grid-column: auto; margin-top: 0; display: contents; }
  /* canvas on narrow screens: two columns; long lists and the value proposition span both, short blocks pair up */
  .dg-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .dg-canvas [data-m]:not(.dg-canvas__half) { grid-column: 1 / -1; }
  [data-m] { order: var(--m); }
  .dg-phase__stages { grid-auto-flow: row; gap: 16px; }
  .dg-bp { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; }
  .dg-bp__col { grid-row: auto; grid-template-rows: none; }
  .dg-bp__col--lanes { display: none; }
  .dg-bp__lane-name { display: block; }
  .dg-mirror { grid-template-columns: 1fr; }
  .dg-mirror__node { display: none; }
  .dg-mirror__head--l, .dg-mirror__head--r { text-align: left; padding: 28px 0 8px; }
  .dg-mirror__cell--l, .dg-mirror__cell--r { text-align: left; padding: 12px 0 14px; }
  .dg-mirror__end { grid-column: 1; padding: 28px 0 0; }
  .dg-mirror__end::before { display: none; }
}

/* value curve: one row per factor on a 0 to 5 scale; the ink square is the offer, the grey bar spans the existing players.
   A Blue Ocean strategy canvas turned on its side, so it stacks on a phone instead of scrolling. */
.dg-curve__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-bottom: 24px; }
.dg-curve__key-a, .dg-curve__key-r { display: inline-flex; align-items: center; gap: 10px; }
.dg-curve__key-a::before { content: ""; width: 10px; height: 10px; background: var(--ink); }
.dg-curve__key-r::before { content: ""; width: 24px; height: 3px; background: var(--faint); }
.dg-curve__row, .dg-curve__scale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 3ch; gap: 6px 24px; align-items: center; }
.dg-curve__row { padding-block: 13px; border-top: 1px solid var(--rule); }
.dg-curve__scale { padding-bottom: 8px; }
.dg-curve__group > .dg-label { padding-bottom: 12px; }
.dg-curve__group + .dg-curve__group { margin-top: 32px; }
/* every block shares the focal area's side padding, so the scale lines up with the tracks above and below the tint */
.dg-curve__key, .dg-curve__scale, .dg-curve__group { padding-inline: 20px; }
.dg-curve__group.dg-focus { padding-block: 16px 6px; }
.dg-curve__group.dg-focus + .dg-curve__group { margin-top: 28px; }
/* the scale and tracks inset by half a marker, so a 0 or a 5 sits fully inside the line */
.dg-curve__ticks, .dg-curve__track { position: relative; margin-inline: 5px; }
.dg-curve__ticks { height: 1.5em; font-size: var(--fs-small); color: var(--faint); font-variant-numeric: tabular-nums; }
.dg-curve__ticks span { position: absolute; left: calc(var(--t) * 20%); transform: translateX(-50%); }
.dg-curve__track { height: 12px; background: linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat; }
.dg-curve__range { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; left: calc(var(--lo) * 20%); width: max(3px, calc((var(--hi) - var(--lo)) * 20%)); background: var(--faint); }
.dg-curve__mark { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; left: calc(var(--a) * 20%); background: var(--ink); }
.dg-curve__v { font-size: var(--fs-small); font-variant-numeric: tabular-nums; text-align: right; }
.dg-focus .dg-curve__row { border-top-color: rgba(17,17,17,.14); }
.dg-focus .dg-curve__track { background-image: linear-gradient(rgba(17,17,17,.2), rgba(17,17,17,.2)); }
@container (max-width: 640px) {
  .dg-curve__row, .dg-curve__scale { grid-template-columns: minmax(0, 1fr) 3ch; gap: 8px 16px; }
  .dg-curve__row > .dg-item { grid-column: 1 / -1; }
  .dg-curve__scale > span:first-child { display: none; }
}

/* sides: two parties next to each other, the same lenses stacked under each and level across both (subgrid) */
.dg-sides { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); column-gap: 40px; }
.dg-sides__col { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
.dg-sides__col > dl { display: contents; }
.dg-sides__col > .dg-head { margin: 0 0 20px; }
.dg-sides__row { padding: 16px 0 28px; border-top: 1px solid var(--rule); }
.dg-sides dt { font-size: var(--fs-small); color: var(--faint); }
.dg-sides dt strong { font-weight: 500; color: var(--ink); }
.dg-sides dd { margin: 8px 0 0; font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.02em; max-width: 34ch; text-wrap: pretty; }
@container (max-width: 640px) {
  .dg-sides { grid-template-columns: 1fr; grid-template-rows: none; }
  .dg-sides__col { grid-row: auto; display: block; }
  .dg-sides__col + .dg-sides__col { margin-top: 40px; }
}

/* columns: short parallel statements side by side; text, not a diagram */
.cols { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--gap-group) 40px; }
.cols > * > * + * { margin-top: 8px; }
.cols__k { font-size: var(--fs-small); color: var(--faint); }
.concept { margin-top: var(--gap-group); }
.concept .cols__k { color: var(--ink); font-weight: 500; }
.cols__h { font-size: clamp(22px, 1vw + 18px, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; }
.cols__p { font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.cols__q { font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }
.cols__list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--fs-small); line-height: 1.5; }
.cols__list li { padding-top: 8px; border-top: 1px solid var(--rule); }
.sec-lead { padding-bottom: var(--gap-group); }
.big-fact { font-size: var(--fs-h3); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }

/* gallery rows: photos of physical work, whole and uncropped; each photo's width follows its
   aspect ratio, so every photo in a row lands at the same height */
.gal-rows { display: grid; gap: 20px; }
.gal-row { display: flex; gap: 20px; align-items: flex-start; }
.gal-row__item { margin: 0; flex: var(--r) 1 0; min-width: 0; }
.gal-row__item img { width: 100%; height: auto; }
/* two tall photos that stay side by side, even on phones (on wider screens they are plain row items) */
.gal-pair { display: contents; }

/* title with its one-line description directly below */
.title-pair { display: flex; flex-direction: column; gap: 8px; }
.title-pair__d { font-size: var(--fs-body); line-height: 1.45; color: var(--muted); }

/* problem columns: a hairline over each, like the stage columns */
.problem-cols > div { padding-top: 16px; border-top: 1px solid var(--rule); }
@media (max-width: 1100px) { .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* gap in the copy: visible, findable (grep "tbd"), never mistaken for finished text */
.tbd { color: var(--faint); text-decoration: underline dashed 1px; text-underline-offset: 5px; }

/* ---------- Case study blocks (below the shared head) ---------- */
.media { position: relative; overflow: hidden; }
/* never cropped, never framed: images sit straight on white */
.media img { width: 100%; height: 100%; object-fit: contain; }
.media--hero { aspect-ratio: 16 / 9; }
.media--phones { aspect-ratio: 1 / 1; }
.media--natural img { height: auto; }
.pair { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; }
.pair .media { height: clamp(300px, 40vw, 620px); }

/* case-study moment: hero image wipes up once on load (clip-path, compositor-only) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes wipe { from { clip-path: inset(18% 0 0 0); transform: translateY(24px); } }
  .reveal { animation: wipe 560ms var(--ease-out) 80ms both; }
}

.cs-sec { padding-top: var(--gap-section); }
.cs-sub { padding-top: var(--gap-related); }
.cs-sub-inner { padding-top: var(--gap-related); }
.sec-lead-top { margin-top: var(--gap-group); }
/* both audiences beside one image: centred against it, each under a hairline with a small label, the claim, then the detail */
/* the phone screens sit straight on white, a little smaller than the column, centred in it */
.aud__img img { width: auto; max-width: 88%; max-height: min(680px, 78svh); margin-inline: auto; }
.aud { align-self: center; display: grid; gap: var(--gap-group); }
.aud__blk { padding-top: 20px; border-top: 1px solid var(--rule); }
.aud__who { font-size: var(--fs-small); font-weight: 400; color: var(--faint); }
.aud__claim { margin-top: 14px; font-size: clamp(26px, 1.4vw + 20px, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.aud__txt { margin-top: 12px; font-size: var(--fs-body); line-height: 1.5; color: var(--muted); max-width: 40ch; text-wrap: pretty; }
@media (max-width: 900px) { .aud { padding-bottom: var(--gap-group); } }
.product-intro { padding-bottom: var(--gap-related); }

.stages { display: flex; flex-direction: column; gap: 20px; }
.stage { align-items: start; }
.stage__txt { position: sticky; top: calc(var(--nav-h) + 40px); padding-top: 8px; }
.stage__lead { margin-top: 12px; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.02em; }
.stage__txt .body { margin-top: 16px; max-width: 32ch; }
.stage__in { margin-top: 20px; font-size: var(--fs-small); line-height: 1.6; color: var(--faint); max-width: 40ch; }

/* stages as one row: same-size screens, text underneath, read left to right as a journey */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-related) 20px; }
.trio__item { display: flex; flex-direction: column; }
.trio__item .media { margin-bottom: 28px; }
.trio__item > p, .trio__item > h3, .trio__item figcaption > * { padding-right: 20px; }
.trio__stage { font-size: var(--fs-small); color: var(--faint); }
.trio__title { margin-top: 6px; font-size: clamp(22px, 1vw + 18px, 26px); line-height: 1.15; letter-spacing: -0.025em; }
.trio__body { margin: 12px 0 14px; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); max-width: 40ch; }
.trio__in { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.55; color: var(--faint); max-width: 40ch; }
.trio--2 { grid-template-columns: repeat(2, 1fr); }
/* a related row that follows another trio in the same chapter */
.trio--flow { padding-top: clamp(64px, 6vw, 88px); row-gap: var(--gap-group); }
.trio__cap { font-size: var(--fs-small); font-weight: 500; }
/* a real sequence of screens (Oralingo voice mode): three across, two on tablets, one on phones */
.trio--states { row-gap: var(--gap-related); }
.trio__item figcaption > :first-child { margin-top: 0; }
@media (max-width: 900px) and (min-width: 641px) { .trio.trio--states { grid-template-columns: repeat(2, 1fr); } }

/* next project: one large link at the end of every case study */
.np { padding-block: var(--gap-section); }
.np__link { display: inline-block; font-size: var(--fs-h2); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; }
.np__link .ico { width: 0.8em; height: 0.8em; margin-left: 0.12em; vertical-align: -0.06em; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .np__link:hover .ico { transform: translateX(6px); } }

.foot { border-top: 1px solid var(--ink); padding-block: 20px 28px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 15px; }
.foot span { color: var(--faint); }

/* missing image: show what belongs there instead of a broken icon */
.is-missing img { visibility: hidden; }
.is-missing::after { content: attr(data-file); position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 14px; color: var(--faint); }
.card__img.is-missing::after { color: var(--c-soft); border: 1px dashed currentColor; }

/* ---------- Cursor: desktop pointer only, kept by brief ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor body, .has-cursor a, .has-cursor button, .has-cursor label { cursor: none; }
  .has-cursor input, .has-cursor textarea { cursor: text; }
  .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 160ms var(--ease-out); }
  .cursor.is-on { opacity: 1; }
  .cursor.is-hidden { opacity: 0; }
  .cursor__dot {
    display: grid; place-items: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
    background: var(--cur-bg, var(--ink)); color: var(--cur-fg, var(--paper)); font-size: 14px; font-weight: 500;
    transform: scale(0.12); transition: transform 240ms var(--ease-out), background-color 160ms var(--ease-out);
  }
  .cursor__dot span { opacity: 0; transition: opacity 120ms var(--ease-out); }
  .cursor.is-link .cursor__dot { transform: scale(0.3); }
  .cursor.is-view .cursor__dot { transform: scale(1); }
  .cursor.is-view .cursor__dot span { opacity: 1; transition-delay: 80ms; }
  .cursor.is-dark .cursor__dot { background: var(--paper); color: var(--ink); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  .nav__name { font-size: 19px; }
  .nav__links { font-size: 16px; }
  .split, .pair { grid-template-columns: 1fr; gap: 20px; }
  /* single column: every card shares one height, sized so a landscape cover fills the card width
     (a 4:3 image area under the tallest text) and capped to the screen, so there is no empty band of colour */
  .card {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 24px; min-height: 0;
    height: min(100svh - var(--nav-h) - 16px, var(--card-txt) + (100vw - 2 * var(--gutter) - 48px) * 0.75);
  }
  .cards { --card-txt: 300px; }   /* text block (about 200px, 260px when a title wraps) + gap + padding */
  .card__txt { gap: 20px; }
  .card__cta { margin-top: 20px; }
  .contact__grid { gap: 64px; }
  .stage { gap: 24px; }
  .stage__txt { position: static; }
  .trio { grid-template-columns: 1fr; }
  .pair .media { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 1100px) {
  .pp-facts, .pp-steps { grid-template-columns: repeat(2, 1fr); }
  .pp-steps--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pp-steps { grid-template-columns: 1fr; }
  .pp-facts { gap: 20px 24px; }
  .pp-steps { gap: 40px; }
  .found__row { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
}
/* phones and tablets: gallery rows stack so photos stay large (a desktop row of four would shrink to ~180px tall) */
@media (max-width: 900px) {
  .gal-row { flex-direction: column; max-width: none !important; }
  .gal-row__item { flex: none; width: 100%; }
  /* a tall photo stays whole but never fills more than most of the screen */
  .gal-row__item img { width: auto; max-width: 100%; max-height: 80svh; }
  .gal-pair { display: flex; gap: 12px; align-items: flex-start; width: 100%; max-width: calc(80svh * var(--r)); }
  .gal-pair > .gal-row__item { flex: calc(var(--r) * 100) 1 0; width: auto; }
  .gal-pair .gal-row__item img { width: 100%; max-height: none; }
}
@media (max-width: 640px) {
  .frame--wide { --ratio: 4 / 3; }
  .frame--tall { --ratio: 1 / 1; }
  .media.frame { padding: 20px; }
}
/* phones: links fold into a menu under the bar; the panel takes the nav's current colour */
@media (max-width: 640px) {
  .nav__in { position: relative; }
  .nav__toggle {
    display: block; min-height: 44px; margin-right: -8px; padding: 0 8px;
    border: 0; background: none; color: inherit; font: inherit; font-size: 17px; cursor: pointer;
  }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 24px;
    background: var(--nav-bg, var(--paper)); color: var(--nav-fg, var(--ink));
    border-bottom: 1px solid currentColor;
    font-size: clamp(28px, 8vw, 36px); font-weight: 500; letter-spacing: -0.03em;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  .nav__links a { padding-block: 10px; }
  .nav__links a[aria-current="page"]::after { bottom: 8px; right: auto; width: 1.2em; }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}

/* phones held sideways: each card fits the short screen, text beside the image, so the image is seen before the next card covers it */
@media (max-height: 520px) and (orientation: landscape) {
  .card {
    grid-template-columns: 5fr 7fr; grid-template-rows: none; gap: 24px;
    height: calc(100svh - var(--nav-h) - 16px); min-height: 0;
    padding: 20px 24px;
  }
  .card h3 { font-size: clamp(30px, 4.4vw, 40px); }
  .card__txt { gap: 12px; }
  .card__desc { margin-top: 12px; }
  .card__cta { margin-top: 16px; }
  .card__img { min-height: 0; }
}

/* very small phones (320px): the longest title fits on one line */
@media (max-width: 359px) {
  .pp-title { font-size: 44px; }
}

/* touch: invisible hit areas reach about 44px without moving anything */
@media (pointer: coarse) {
  .link-u, .np__link, .nav__name { position: relative; }
  .link-u::after, .np__link::after, .nav__name::after { content: ""; position: absolute; inset: -8px -6px; }
  .dg-sbp[data-fold] .dg-sbp__toggle { padding-block: 11px; margin-block: -11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}




/* IA tree (.dg-ia): a real hierarchy. Root, a bar to the top-level sections, then nested
   branches drawn with hairline connectors. Text only, no boxes; one focal branch on the tint. */
.dg-ia { --line: color-mix(in srgb, var(--faint) 55%, white); }
.dg-ia ul { list-style: none; margin: 0; padding: 0; }
.dg-ia__root { position: relative; padding-bottom: 20px; }
.dg-ia__root::after { content: ""; position: absolute; left: 0; bottom: 0; height: 12px; border-left: 1px solid var(--line); }
.dg-ia__cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: 32px; }
.dg-ia__col { position: relative; padding-top: 22px; min-width: 0; }
.dg-ia__col::before { content: ""; position: absolute; top: 0; left: 0; right: -32px; border-top: 1px solid var(--line); }
.dg-ia__col:last-child::before { right: auto; width: 1px; }
.dg-ia__col::after { content: ""; position: absolute; top: 0; left: 0; height: 16px; border-left: 1px solid var(--line); }
.dg-ia__col > ul { margin-top: 4px; }
.dg-ia li { position: relative; padding: 8px 0 0 20px; }
.dg-ia li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.dg-ia li:last-child::before { bottom: auto; height: calc(8px + 0.75em); }
.dg-ia li::after { content: ""; position: absolute; left: 0; top: calc(8px + 0.75em); width: 12px; border-top: 1px solid var(--line); }
.dg-ia li > .dg-note { display: block; }
.dg-ia li.dg-focus { margin-top: 8px; padding: 10px 14px 12px 20px; }
.dg-ia li.dg-focus::after { top: calc(10px + 0.75em); }
@container (max-width: 760px) {
  .dg-ia__cols { grid-template-columns: 1fr; row-gap: 8px; margin-left: 0; padding-left: 20px; border-left: 1px solid var(--line); }
  .dg-ia__root::after { display: none; }
  .dg-ia__col { padding-top: 12px; }
  .dg-ia__col::before { top: calc(12px + 0.75em); left: -20px; right: auto; width: 12px; }
  .dg-ia__col:last-child::before { width: 12px; }
  .dg-ia__col::after { display: none; }
}