/* =========================================================
James Davidson Portfolio · Version 5.1
Layout and visual language from 3.1 (pastel media frames,
alternating case rows, floating hero visual).
Story and content from 4 (career chapters, figures, three-
speed bioGraphic case study).
Poppins only. Purple is for emphasized text; buttons and the
footer use a warm near-black.
========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap");
:root {
--cream: #fbf6ec;
--white: #ffffff;
--mist: #f6f4ef;
--ink: #161616;
--ink-2: #4a4843;
--ink-3: #78746c;
--line: #e7e1d5;
--line-2: #d6cfc0;
--purple: #3b2f8f;
--purple-soft: #ebe8fb;
--lav: #c9c0ff;
--dark: #26221e;
--on-dark: #f3eee4;
--on-dark-2: #bdb5a8;
/* One color per place, shared by the hero circles and the cards */
--c-gsb: #dfe4f6; /* Stanford: purple-blue */
--c-bio: #c7e6e2; /* bioGraphic: teal */
--c-cas: #e3eda6; /* California Academy of Sciences: green */
--c-pa: #f7d8bf; /* Palo Alto Junior Museum & Zoo: orange */
--sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--wrap: 1240px;
--radius: 16px;
--pad: clamp(20px, 4vw, 56px);
--body: clamp(16.5px, 0.5vw + 13.5px, 18px);
--ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: var(--body); line-height: 1.72; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--purple); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 600; color: var(--ink); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--dark); color: var(--on-dark); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; color: var(--on-dark); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph { background: #fff1b8; color: #5a4600; border-radius: 3px; padding: 0 .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.tint { color: var(--purple); }
.muted { color: var(--ink-3); }
.label { display: block; font-size: .88rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 68px; flex-wrap: wrap; }
.name { font-weight: 600; font-size: 1.05rem; text-decoration: none; letter-spacing: -0.015em; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2.4vw, 28px); font-size: .95rem; font-weight: 500; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); text-decoration: underline; }
/* ---------- Buttons and links ---------- */
/* Primary: purple with white text. Secondary links: purple, underlined. */
.btn { display: inline-flex; align-items: center; gap: .5em; background: var(--purple); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; padding: .7em 1.2em; border-radius: 999px; transition: background .2s, transform .2s var(--ease); }
.btn:hover { color: #fff; background: #2e2a6b; transform: translateY(-2px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.link { font-weight: 600; color: var(--purple); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link:hover { color: #2e2a6b; text-decoration-thickness: 2px; }
.arrow { display: inline-block; transition: transform .25s var(--ease); }
a:hover .arrow { transform: translateX(5px); }
/* ---------- Hero (3.1 layout) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 104px); }
/* Wider measure for the longer headline; 'pretty' wrapping keeps a single word from sitting alone on the last line */
.hero h1 { font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.04em; max-width: 21ch; text-wrap: pretty; }
/* Headline always uses the four-line layout:
"Making complicated things / easier to understand and use. / Building lasting systems / for the teams behind them."
main.js keeps those lines intact and scales the type down only if a line won't fit the column. */
.hero h1.headline { max-width: none; }
.hero h1.headline br.bA { display: none; }
.hero h1.headline br.bB { display: inline; }
.hero h1.headline.fitted { white-space: nowrap; }
.hero > * { min-width: 0; } /* keeps the text column from growing wider than the screen */
.hero h1 .tint { color: var(--purple); }
.hero .support { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--ink-2); max-width: 46ch; margin: 26px 0 0; line-height: 1.6; }
.hero .now { color: var(--ink-2); max-width: 46ch; margin: 16px 0 30px; }
/* Hero visual: four places as floating circles, one winding path */
.journey { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
.journey svg { width: 100%; height: auto; display: block; overflow: visible; }
.journey figcaption { font-size: .92rem; color: var(--ink-2); margin-top: 16px; }
.journey .bob { animation: bob 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.journey .bob.b2 { animation-delay: -1.8s; animation-duration: 8s; }
.journey .bob.b3 { animation-delay: -3.2s; animation-duration: 6.6s; }
.journey .bob.b4 { animation-delay: -4.6s; animation-duration: 8.6s; }
@keyframes bob { 50% { transform: translateY(-9px) rotate(-1.2deg); } }
.journey .j-path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Two versions of the visual: vertical beside the intro, horizontal (rotated 90° right) when the intro stacks */
.journey .j-horizontal { display: none; }
/* ---------- Section frame ---------- */
.block { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.block-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -0.035em; margin-bottom: .4em; }
.block-title .tint { color: var(--purple); }
.block-intro { color: var(--ink-2); font-size: 1.05rem; margin-bottom: clamp(36px, 5vw, 64px); }
/* ---------- Career chapters (3.1 case rows) ---------- */
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 8vw, 112px); }
.case { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.case:nth-child(even) .case-media { order: 2; }
/* Card height follows its content (image + tags), so a second line of tags is never clipped */
.case-media { position: relative; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; padding: 24px; }
/* Tags and image share the same left edge, as on the bioGraphic card */
.case-media .stage { flex: 1; display: flex; align-items: center; padding: 10px 0; } /* room for the image's small drift */
.case-media.gsb { background: var(--c-gsb); } .case-media.bio { background: var(--c-bio); }
.case-media.cas { background: var(--c-cas); } .case-media.pa { background: var(--c-pa); }
.case-media .shot { width: 100%; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(30,25,20,.45); background: var(--white); aspect-ratio: 16 / 11; object-fit: cover; transition: transform .6s var(--ease); }
.case:hover .case-media .shot { transform: scale(1.03) rotate(-0.6deg); }
/* Tags sit below the image inside the card as quiet text with dot separators, not buttons.
Each card's tags use a darker shade of that card's color. White would fail contrast on these
pastels (about 1.3:1), so each shade is tuned to roughly 4.6 to 5.4:1, which meets WCAG AA for text. Max 4. */
.chips { display: flex; flex-wrap: wrap; align-items: baseline; list-style: none; margin: 16px 0 0; padding: 0; position: relative; z-index: 2; font-size: .8rem; font-weight: 500; line-height: 1.5; letter-spacing: .005em; }
.chips li { white-space: nowrap; }
.chips li:not(:last-child)::after { content: "·"; margin: 0 .5em; }
@media (min-width: 1100px) { .chips { flex-wrap: nowrap; } }
.case-media.gsb .chips { color: #4d5a8c; }
.case-media.bio .chips { color: #2d6c64; }
.case-media.cas .chips { color: #616c1e; }
.case-media.pa .chips { color: #8d5120; }
.case.feature .chips { margin-top: 0; }
.case-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin: 0 0 4px; }
.case-body .when { color: var(--ink-3); font-size: .92rem; margin: 0 0 14px; }
.case-body h3 .org { font-size: .88rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-bottom: 6px; }
.doc-head .meta .team { display: block; margin-top: 2px; } /* team context under the role line on each case study */
.case-body .deck { color: var(--ink-2); margin-bottom: 18px; }
/* Project headings link to their pages; they look like headings until hovered */
.case-body h3 a.case-title { text-decoration: none; }
.case-body h3 a.case-title:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.figures.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures dt { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
/* Word figures (Museum-wide, Record, Accessible) run a little smaller and stay on one line on wide screens */
.figures dt.fig-word { font-size: clamp(1.5rem, 2.3vw, 1.95rem); letter-spacing: -0.035em; }
@media (min-width: 1100px) { .figures dt.fig-word { white-space: nowrap; } }
/* Paired word stats (Palo Alto): one line each when they fit; if either needs two lines,
both break the same way ("Record / attendance", "Accessible / for all"). main.js decides. */
.figures.sync-break dt { white-space: nowrap; }
.figures.sync-break.split dt span { display: block; }
/* Last resort on very narrow phones: once split, a line may wrap rather than overflow */
.figures.sync-break.split dt { white-space: normal; }
.figures dd { margin: 8px 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
/* Homepage card figures share two rows (subgrid): headings sit on a common bottom line and captions
start on a common top line, even when one heading is a word figure or wraps to two lines.
Browsers without subgrid fall back to the stacked layout above. */
@supports (grid-template-rows: subgrid) {
.case-body .figures { row-gap: 8px; }
/* minmax(0, 1fr) keeps each heading inside its column, so a label that is too wide is
detected (and broken onto two lines) instead of pushing past the right edge */
.case-body .figures > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
.case-body .figures dt { align-self: end; }
.case-body .figures dd { margin: 0; align-self: start; }
}
.bullets { list-style: disc; margin: 0 0 20px; padding: 14px 0 0 1.1em; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); display: grid; gap: 4px; }
.bullets li { padding-left: 2px; }
.bullets li::marker { color: var(--ink); }
/* Card links: only the link text is clickable, no arrows */
.case-link, a.case-link:link, a.case-link:visited { display: inline-block; font-weight: 600; font-size: .95rem; color: var(--purple); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.case-link:hover { color: #2e2a6b; text-decoration-thickness: 2px; }
/* bioGraphic: featured, full width, on a soft purple field */
.case.feature { grid-template-columns: 1fr; background: var(--c-bio); border-radius: 26px; padding: clamp(18px, 3vw, 36px); gap: clamp(24px, 3.5vw, 44px); }
.case.feature .case-media { order: 0; aspect-ratio: auto; background: none; border-radius: 0; padding: 0; overflow: visible; gap: 14px; }
.case.feature .case-media .shot { width: 100%; aspect-ratio: 16 / 7.5; border-radius: 16px; box-shadow: none; }
.case.feature:hover .case-media .shot { transform: none; }
.feature-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 64px); padding: 0 clamp(4px, 1.5vw, 16px) clamp(4px, 1.5vw, 12px); }
.case.feature h3 { font-size: clamp(2rem, 3.8vw, 3rem); }
/* On the teal card the same gray reads lighter; this slightly darker gray matches how the other cards' role-and-years lines look */
.case.feature .when { color: #625e57; }
.case.feature .figures, .case.feature .bullets { border-top-color: rgba(22,22,22,.12); }
/* ---------- Roles statement (3.1) ---------- */
.roles { text-align: center; max-width: 52rem; margin: 0 auto; }
.roles h2 { font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.16; letter-spacing: -0.03em; margin-bottom: .55em; }
.roles h2 .tint { color: var(--purple); }
.roles .also { font-weight: 500; font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 44rem; margin: 0 auto 1em; }
.nobr { white-space: nowrap; }
/* Let browsers that support it avoid short last lines everywhere; main.js backs this up */
p, li, dd, figcaption, blockquote, summary { text-wrap: pretty; } /* keeps titles like "project coordinator" on one line */
.roles .path { color: var(--ink-2); max-width: 42rem; margin: 0 auto; }
/* ---------- How I work ---------- */
.approach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* three across (trimmed from five, October 20, 2026); 2 + 1 on phones */
.approach li { background: var(--mist); border-radius: 14px; padding: 20px; }
.approach h3 { font-size: 1.05rem; margin-bottom: 8px; }
.approach p { font-size: .9rem; color: var(--ink-2); margin: 0; line-height: 1.55; }
/* ---------- Statement with captioned object (3.1) ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: center; } /* mirror of About: quote left, image right, image the same size as the portrait */
.statement figure { margin: 0; order: 2; width: 100%; max-width: 340px; justify-self: end; } /* caption runs the width of the image */
.statement img { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-width: 340px; background: var(--mist); }
.statement figcaption { font-size: .84rem; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }
.statement blockquote { margin: 0; font-weight: 500; font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.2; letter-spacing: -0.03em; }
.statement blockquote p { margin: 0; }
/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about .portrait { width: 100%; max-width: 340px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--mist); }
.about p { color: var(--ink-2); }
.xp { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.xp li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.xp .org { font-weight: 600; }
.xp .title { color: var(--ink-2); font-size: .94rem; }
.xp .yrs { color: var(--ink-3); font-size: .9rem; grid-row: 1; grid-column: 2; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.skills h3 { font-size: .95rem; color: var(--ink); font-weight: 600; margin-bottom: 6px; letter-spacing: 0; }
.skills ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; font-size: .95rem; color: var(--ink-2); }
/* Outside-of-work snapshots (from 3.1) */
.snaps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.snaps li { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 10px; box-shadow: 0 14px 28px -22px rgba(0,0,0,.45); }
.snaps li:nth-child(1) { transform: rotate(-2deg); } .snaps li:nth-child(2) { transform: rotate(1.5deg) translateY(10px); } .snaps li:nth-child(3) { transform: rotate(-1deg); }
.snaps .pic { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); font-size: .78rem; overflow: hidden; }
.snaps .pic img { width: 100%; height: 100%; object-fit: cover; }
.snaps li:nth-child(1) .pic { background: var(--c-cas); } .snaps li:nth-child(2) .pic { background: var(--c-pa); } .snaps li:nth-child(3) .pic { background: var(--c-bio); }
.snaps p { margin: 8px 4px 0; font-weight: 500; font-size: .9rem; line-height: 1.25; color: var(--ink); }
/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 48px 20px 0; position: relative; font-weight: 500; font-size: clamp(1.02rem, 1.4vw, 1.2rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 300; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--purple); }
.faq .answer { padding: 0 0 22px; color: var(--ink-2); max-width: 66ch; }
.faq .answer p:last-child { margin-bottom: 0; }
/* Color rule: purple is reserved for emphasis (.tint) and for links, buttons and focus. Labels, stats and markers use ink. */
/* ---------- Footer (from version 4) ---------- */
.site-footer { background: var(--dark); color: var(--on-dark); padding: clamp(64px, 9vw, 112px) 0 32px; }
.site-footer h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.08; }
.site-footer h2 .tint { color: var(--lav); }
.site-footer p { color: var(--on-dark-2); margin: 18px 0 30px; }
/* The blurb is one sentence per line. On narrow screens it scales with the screen width so the
longer sentence (about 20.4em wide in Poppins) always fits; on wider screens it is 1.15rem. */
.site-footer .intro p { font-size: min(1.15rem, calc((100vw - 48px) / 20.6)); line-height: 1.6; }
.site-footer .contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; font-weight: 500; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--lav); }
.site-footer .base { margin-top: 64px; padding-top: 18px; border-top: 1px solid #3c3731; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--on-dark-2); font-size: .85rem; }
.site-footer .base a { color: var(--on-dark-2); }
.motion-toggle { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.motion-toggle:hover { color: var(--lav); }
/* =========================================================
CASE STUDY (3.1 visual language, 4 information architecture)
========================================================= */
.crumb { font-size: .9rem; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb [aria-current] { color: var(--ink); font-weight: 500; }
.cover { background: var(--tone, var(--c-bio)); padding: clamp(40px, 6vw, 80px) var(--pad) 0; overflow: hidden; }
.cover img { width: min(100%, 1000px); margin: 0 auto; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 60px -30px rgba(30,25,20,.45); aspect-ratio: 16 / 8; object-fit: cover; object-position: top; background: var(--white); }
.page { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 800px) 1fr; gap: clamp(24px, 5vw, 80px); }
.doc { min-width: 0; padding-bottom: 48px; }
.doc-head { padding-top: clamp(36px, 5vw, 64px); }
.doc-head h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); letter-spacing: -0.045em; line-height: 1; }
.doc-head .deck { color: var(--ink-2); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; margin: 14px 0 0; max-width: 40ch; }
.props { margin: 28px 0 0; padding: 0; font-size: .94rem; border-top: 1px solid var(--line); }
.props > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.props dt { color: var(--ink-3); }
.props dd { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tags li { background: var(--mist); border-radius: 999px; padding: .1em .7em; font-size: .82rem; font-weight: 500; color: var(--ink-2); }
/* 15 seconds */
.glance { background: var(--cream); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.glance h2 { font-size: .95rem; color: var(--ink); letter-spacing: 0; margin-bottom: 8px; }
.glance p { color: var(--ink-2); margin: 0; font-size: .96rem; }
.glance .figures { border-top: 0; padding: 0; margin: 0; grid-template-columns: 1fr; gap: 12px; }
.glance .figures div { display: flex; align-items: baseline; gap: 10px; }
.glance .figures dt { font-size: 1.7rem; min-width: 3.3em; }
.glance .figures dd { margin: 0; }
/* 90 seconds */
.short-story { margin-top: clamp(56px, 7vw, 88px); }
.short-story > h2, .doc h2.sec { font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -0.03em; margin-bottom: 12px; }
.short-story > p { color: var(--ink-2); }
.decisions { list-style: none; margin: 24px 0 0; padding: 0; }
.decisions li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 40px); padding: 22px 0; border-top: 1px solid var(--line); }
.decisions li:last-child { border-bottom: 1px solid var(--line); }
.decisions h3 { font-size: 1.12rem; letter-spacing: -0.02em; }
.decisions p { margin: 0 0 6px; color: var(--ink-2); font-size: .97rem; }
.decisions a { font-weight: 500; font-size: .93rem; }
/* Deep layer */
.doc section.chapter { margin-top: clamp(56px, 7vw, 88px); scroll-margin-top: 90px; }
.doc h3 { font-size: 1.15rem; margin: 30px 0 10px; }
.doc p, .doc li { color: var(--ink-2); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3.5vw, 48px); }
.two-up > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.two-up h3 { margin-top: 0; font-size: 1.05rem; }
.tension { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tension li { background: var(--mist); border-radius: 12px; padding: 16px 18px; font-size: .94rem; }
.tension li b { display: block; color: var(--ink); margin-bottom: 2px; }
.timeline { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.timeline li { position: relative; padding: 20px 14px 0 0; font-size: .9rem; line-height: 1.5; }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); }
.timeline li:last-child::before { background: var(--ink); border-color: var(--ink); }
.timeline b { display: block; font-size: 1.05rem; color: var(--ink); }
/* Decision sections: pastel wrapper (3.1) */
.mini { margin-top: clamp(56px, 7vw, 88px); border-radius: 22px; padding: 6px; background: var(--tone, var(--c-bio)); scroll-margin-top: 90px; }
.mini-head { padding: 22px 22px 18px; }
.mini-head .label { color: var(--ink-2); }
.mini-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; margin-bottom: 12px; }
.mini-head .tags li { background: rgba(255,255,255,.75); color: var(--ink); }
.mini-body { background: var(--white); border-radius: 17px; padding: clamp(20px, 3vw, 36px); }
.mini-body > :first-child { margin-top: 0; }
.mini-body h3 .label { margin-bottom: 2px; font-size: .82rem; }
figure { margin: 24px 0; }
figure img { width: 100%; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); }
figcaption { font-size: .86rem; color: var(--ink-3); margin-top: 9px; line-height: 1.5; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; align-items: start; }
.pair figure { margin: 0; }
.finding { border: 1px solid var(--line); border-radius: 14px; margin: 20px 0; overflow: hidden; background: var(--white); }
.finding h4 { padding: 14px 18px; background: var(--mist); font-size: 1rem; letter-spacing: -0.01em; }
.finding ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finding li { padding: 16px 18px; font-size: .9rem; line-height: 1.6; }
.finding li + li { border-left: 1px solid var(--line); }
.finding .k { display: block; font-weight: 600; color: var(--ink); font-size: .84rem; margin-bottom: 4px; }
.checklist { list-style: none; padding: 0; margin: 14px 0; }
.checklist li { padding: 6px 0 6px 32px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; border-radius: 5px; background: var(--dark); }
.checklist li::after { content: ""; position: absolute; left: 6px; top: 14px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.callout { background: var(--cream); border-radius: 12px; padding: 16px 18px; margin: 18px 0; border-left: 3px solid var(--dark); }
.callout p { margin: 0; color: var(--ink); font-size: .96rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.stats > div { background: var(--mist); border-radius: 14px; padding: 20px; }
.stats dt { font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.stats dd { margin: 8px 0 0; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.audiences > div { border-top: 2px solid var(--ink); padding-top: 12px; }
.audiences h3 { font-size: 1rem; margin: 0 0 6px; }
.audiences p { font-size: .92rem; margin: 0; }
details.toggle { margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; }
details.toggle summary { cursor: pointer; font-weight: 500; padding: 14px 18px; list-style: none; display: flex; gap: 10px; align-items: center; }
details.toggle summary::-webkit-details-marker { display: none; }
details.toggle summary::before { content: "▸"; transition: transform .2s; }
details.toggle[open] summary::before { transform: rotate(90deg); }
details.toggle > div { padding: 0 18px 18px; }
details.toggle figure { margin: 0; }
.outline { position: sticky; top: 96px; align-self: start; padding-top: 64px; font-size: .88rem; max-width: 230px; justify-self: end; width: 100%; }
.outline h2 { font-size: .9rem; color: var(--ink-3); font-weight: 500; margin-bottom: 10px; letter-spacing: 0; }
.outline ol { list-style: none; margin: 0; padding: 0; }
.outline a { display: flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; color: var(--ink-3); line-height: 1.3; }
.outline a::before { content: ""; width: 14px; height: 2px; background: var(--line-2); border-radius: 2px; flex: none; transition: width .25s var(--ease), background .25s; }
.outline a:hover, .outline a.active { color: var(--ink); }
.outline a.active::before { width: 24px; background: var(--ink); }
.outline .rail-cta { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.next { display: grid; grid-template-columns: 1fr 1fr; text-decoration: none; margin-top: 48px; overflow: hidden; }
.next .lbl { background: var(--cream); padding: clamp(36px, 5vw, 72px) var(--pad); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.next .lbl small { color: var(--purple); font-weight: 500; font-size: .9rem; }
.next .lbl b { font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -0.045em; }
.next .lbl em { color: var(--ink-2); font-style: normal; }
.next .sw { display: grid; place-items: center; padding: 32px; background: var(--next-tone, var(--c-gsb)); }
.next .sw img { width: 80%; border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: 0 24px 48px -26px rgba(30,25,20,.5); transition: transform .6s var(--ease); background: var(--white); }
.next:hover .sw img { transform: translateY(-6px) rotate(-1deg); }
/* Case study color themes: each page takes its chapter's pastel for the cover and section wrappers */
.theme-gsb { --tone: var(--c-gsb); --tone-ink: #4d5a8c; }
.theme-pa { --tone: var(--c-pa); --tone-ink: #8d5120; }
.theme-cas { --tone: var(--c-cas); --tone-ink: #616c1e; }
.next.to-bio { --next-tone: var(--c-bio); }
.next.to-gsb { --next-tone: var(--c-gsb); }
.next.to-pa { --next-tone: var(--c-pa); }
/* Image placeholders: dashed boxes that say what to put there. Swap each for an ![]()
when ready. */
.slot { display: grid; place-items: center; text-align: center; aspect-ratio: 16 / 10; padding: 18px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--mist); color: var(--ink-3); font-size: .86rem; line-height: 1.45; }
.slot b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.slot.tall { aspect-ratio: 4 / 5; }
.slot.wide { aspect-ratio: 16 / 7; }
.slot.square { aspect-ratio: 1; }
.cover .slot { width: min(100%, 1000px); margin: 0 auto; border-radius: 14px 14px 0 0; aspect-ratio: 16 / 8; background: rgba(255,255,255,.6); border-bottom: 0; }
.next .sw .slot { width: 80%; background: rgba(255,255,255,.6); }
/* =========================================================
MOTION (from 3.1 and 4)
========================================================= */
/* Shorter travel and quicker timing: elements settle fast, so nothing sits half-visible */
.motion-full.js .float-in { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .75s var(--ease); transition-delay: var(--d, 0s); }
.motion-full.js .rise { opacity: 0; clip-path: inset(12% 0 0 0 round 16px); transform: translateY(32px) scale(.985); transition: opacity .7s var(--ease), clip-path .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.motion-full.js .word { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.motion-calm.js .float-in, .motion-calm.js .rise, .motion-calm.js .word { opacity: 0; transition: opacity .7s ease; transition-delay: var(--d, 0s); }
/* Text never gets a clip-path: an inset(0) clip trims descenders (like the g in "together") on tight-leading headings */
.js .float-in.in { opacity: 1; transform: none; clip-path: none; }
.js .rise.in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); }
.js .split-words.in .word { opacity: 1; transform: none; }
/* hero journey: path draws in, places pop in, then the cards keep floating */
.motion-full.js .journey .j-path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .5s; }
.motion-full.js .journey.in .j-path { stroke-dashoffset: 0; }
.motion-full.js .journey .j-pop { opacity: 0; transform: scale(.7); transform-box: fill-box; transform-origin: center; transition: opacity .6s ease, transform .8s var(--ease); transition-delay: var(--d, .5s); }
.motion-full.js .journey.in .j-pop { opacity: 1; transform: none; }
.motion-calm .journey .bob { animation: none; }
/* dotted path: dots appear in order along the path */
.motion-full.js .journey .j-dot { opacity: 0; transition: opacity .35s ease; transition-delay: var(--d, .5s); }
.motion-full.js .journey.in .j-dot { opacity: 1; }
[data-parallax] { will-change: transform; }
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
/* How I work: three on top, two below, each row filling the full width */
.approach { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.approach li { grid-column: span 2; }
.approach li:nth-child(n+4) { grid-column: span 3; }
.page { grid-template-columns: 1fr; }
.outline { display: none; }
}
@media (max-width: 900px) {
.hero, .case, .feature-body, .statement, .about, .two-up, .glance, .decisions li { grid-template-columns: minmax(0, 1fr); }
.case:nth-child(even) .case-media { order: 0; }
/* Statement stacks: quote first, then the image in a third with its caption in the other two thirds */
.statement { gap: 28px; }
.statement figure { max-width: none; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: end; }
.statement figcaption { margin-top: 0; }
.journey { max-width: 640px; }
.journey .j-vertical { display: none; }
.journey .j-horizontal { display: block; }
.hero .journey { order: -1; margin-bottom: 8px; } /* the visual comes first when the intro stacks */
.case.feature .case-media .shot { aspect-ratio: 4 / 3; }
/* Whenever the cards stack, images get square bottom corners: image on top, colored band with tags below */
.case-media .shot, .case.feature .case-media .shot { border-radius: 12px 12px 0 0; }
/* About portrait: centered when it stacks, so the space on each side is equal */
.about .portrait { justify-self: center; }
}
@media (max-width: 600px) {
.skills, .audiences, .pair, .tension, .timeline { grid-template-columns: 1fr; }
/* Stats keep their columns on small screens, just a little tighter */
.figures { gap: 12px; }
.figures dt { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
.figures dt.fig-word { font-size: clamp(1.15rem, 4.8vw, 1.5rem); }
.figures dd { font-size: .8rem; }
.stats { gap: 8px; }
.stats > div { padding: 14px 12px; }
.stats dt { font-size: clamp(1.5rem, 6.6vw, 2rem); }
.stats dd { font-size: .78rem; }
.finding ol { grid-template-columns: 1fr; }
.finding li + li { border-left: 0; border-top: 1px solid var(--line); }
.props > div { grid-template-columns: 1fr; gap: 2px; }
/* Phones: keep the colored frame around the image (so white screenshots don't get lost),
a little tighter, and no drift */
.case-media { padding: 16px 16px 18px; }
.case-media .stage { padding: 0; }
.case-media .shot { transform: none !important; }
.case:hover .case-media .shot { transform: none !important; }
.chips { margin-top: 14px; }
.snaps li { transform: none !important; }
.next { grid-template-columns: 1fr; }
.site-nav ul { gap: 14px; }
/* Roles statement: left aligned on phones, heading breaks into four short lines */
.roles { text-align: left; }
.roles h2 { font-size: 1.75rem; }
.roles h2 .s { display: block; }
.roles h2 br.d { display: none; }
.roles .also { text-wrap: pretty; }
/* How I work: keep two columns on phones; the fifth card spans the full row */
.approach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.approach li, .approach li:nth-child(n+4) { grid-column: auto; }
.approach li { padding: 14px; }
.approach li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.approach h3 { font-size: .98rem; }
.approach p { font-size: .86rem; line-height: 1.5; }
.site-header .wrap { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding-top: 18px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
.site-header, .outline { display: none; }
.js .float-in, .js .rise, .js .word { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
/* =========================================================
CASE STUDY, VERSION 2 (bioGraphic v2)
Intro, impact, stages, outcome, learnings and next steps
========================================================= */
.cover.plain { background: var(--white); padding-top: clamp(20px, 3vw, 40px); padding-bottom: 0; }
.cover.plain img { box-shadow: none; border: 1px solid var(--line); border-radius: 16px; aspect-ratio: 16 / 8; object-position: center top; }
.doc-head .meta { color: var(--ink-3); font-size: .95rem; margin: 10px 0 0; }
.intro-text { margin-top: 26px; }
.intro-text p { max-width: 62ch; }
/* Impact teaser */
.impact { margin-top: clamp(40px, 5vw, 64px); background: var(--cream); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); scroll-margin-top: 90px; }
.impact h2 { font-size: .95rem; letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
.impact .lead { color: var(--ink); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; margin: 0 0 22px; max-width: 46ch; }
.impact dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.impact dt { font-weight: 600; font-size: clamp(2.2rem, 4.2vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.impact dd { margin: 8px 0 0; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.impact .more { display: inline-block; margin-top: 20px; font-weight: 600; font-size: .95rem; color: var(--purple); text-underline-offset: 5px; }
/* Stages */
.stages-intro { margin-top: clamp(64px, 8vw, 104px); scroll-margin-top: 90px; }
.stages-intro p { color: var(--ink-2); margin: 0; }
.mini .takeaway { color: var(--ink); font-size: clamp(1.02rem, 1.4vw, 1.15rem); font-weight: 500; line-height: 1.5; margin: 0 0 14px; max-width: 54ch; }
.stages-intro + .mini { margin-top: 28px; }
/* Side rail: stage links sit indented under their group */
.outline li.sub a { padding-left: 14px; }
.outline li.grp { margin-top: 8px; color: var(--ink-3); font-size: .82rem; padding: 4px 0 2px; }
/* "On this page" bar for screens too narrow for the side rail */
.toc-bar { display: none; }
@media (max-width: 1100px) {
.toc-bar { display: block; position: sticky; top: var(--hdr, 68px); z-index: 55; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc-bar details { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.toc-bar summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: .92rem; }
.toc-bar summary::-webkit-details-marker { display: none; }
.toc-bar summary .k { color: var(--ink-3); flex: none; }
.toc-bar summary .cur { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toc-bar summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.toc-bar details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.toc-bar ol { list-style: none; margin: 0; padding: 6px 0 14px; position: absolute; left: var(--pad); right: var(--pad); top: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px -20px rgba(30,25,20,.35); max-height: 70vh; overflow-y: auto; }
.toc-bar li a { display: block; padding: 9px 18px; text-decoration: none; color: var(--ink-2); font-size: .95rem; }
.toc-bar li.sub a { padding-left: 34px; }
.toc-bar li.grp { padding: 10px 18px 2px; color: var(--ink-3); font-size: .82rem; }
.toc-bar li a.active { color: var(--ink); font-weight: 500; }
.toc-bar li a:hover { color: var(--purple); }
/* Anchored sections land below both bars */
.doc section.chapter, .mini, .impact, .stages-intro, .doc-head { scroll-margin-top: calc(var(--hdr, 68px) + 64px); }
}
@media (max-width: 600px) {
.impact dl { gap: 10px; }
.impact dt { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.impact dd { font-size: .8rem; }
}
/* Framed cover (bioGraphic v2): a pastel frame on the top and sides, aligned to the page column.
No bottom border and square bottom corners, so the image reads as cut off at the bottom edge. */
.cover.framed { background: none; max-width: var(--wrap); margin: 0 auto; padding: clamp(20px, 3vw, 40px) var(--pad) 0; overflow: visible; }
.cover.framed .frame { background: var(--tone, var(--c-bio)); border-radius: 22px 22px 0 0; padding: clamp(14px, 2.2vw, 28px) clamp(14px, 2.2vw, 28px) 0; }
.cover.framed .frame img { display: block; width: 100%; margin: 0; border: 0; border-radius: 12px 12px 0 0; box-shadow: none; aspect-ratio: 16 / 8; object-fit: cover; object-position: center top; }
/* Page outline as a colored card (side rail) and a matching colored bar (smaller screens).
Text uses the same deep tone as the homepage tags for that color; the current section is bold. */
.outline { padding-top: 48px; }
.outline ol { background: var(--tone, var(--c-bio)); border-radius: 16px; padding: 16px 18px; }
.outline a { color: var(--tone-ink, #2d6c64); padding: 5px 0; }
.outline a::before { content: none; }
.outline a:hover { color: var(--ink); }
.outline a.active { color: var(--ink); font-weight: 600; }
.outline li.sub a { padding-left: 12px; }
.outline li.grp { color: var(--tone-ink, #2d6c64); opacity: .8; }
@media (max-width: 1100px) {
.toc-bar { background: var(--tone, var(--c-bio)); backdrop-filter: none; border-top: 0; border-bottom: 0; }
.toc-bar summary { color: var(--tone-ink, #2d6c64); }
.toc-bar summary::after { border-color: var(--tone-ink, #2d6c64); }
.toc-bar ol { background: var(--tone, var(--c-bio)); border: 0; border-top: 1px solid rgba(0,0,0,.08); left: 0; right: 0; border-radius: 0 0 16px 16px; }
.toc-bar li a { color: var(--tone-ink, #2d6c64); }
.toc-bar li.grp { color: var(--tone-ink, #2d6c64); opacity: .8; }
.toc-bar li a.active { color: var(--ink); font-weight: 600; }
.toc-bar li a:hover { color: var(--ink); }
}
/* bioGraphic v2 header card: one pastel card holds the image, title, intro, requirements and the
page nav. Wide screens: card aligned to the page column, rounded corners, nav in the right column.
Smaller screens: card runs edge to edge with square corners, and the nav bar continues it. */
.page.v2 { --fp: clamp(14px, 2.2vw, 28px); grid-template-rows: auto auto auto 1fr; row-gap: 0; padding: clamp(20px, 3vw, 40px) calc(var(--pad) + var(--fp)) 0; }
.page.v2 .hero-bg { grid-column: 1 / -1; grid-row: 1 / 3; background: var(--tone, var(--c-bio)); border-radius: 22px; margin: 0 calc(-1 * var(--fp)) calc(-1 * var(--fp)); }
.page.v2 .hero-img { grid-column: 1 / -1; grid-row: 1; padding-top: var(--fp); position: relative; }
.page.v2 .hero-img img { display: block; width: 100%; border-radius: 12px; aspect-ratio: 16 / 8; object-fit: cover; object-position: center top; background: var(--white); }
.page.v2 .doc-head { grid-column: 1; grid-row: 2; position: relative; padding-bottom: 0; }
.page.v2 .doc-head p { color: var(--ink-2); }
.page.v2 .doc-head .deck { color: var(--ink); }
.page.v2 .tension { margin-bottom: 0; }
.page.v2 .tension li { background: rgba(255, 255, 255, .6); }
.page.v2 .doc-rest { grid-column: 1; grid-row: 3 / -1; margin-top: var(--fp); }
.page.v2 .outline { grid-column: 2; grid-row: 2 / -1; position: sticky; padding-top: clamp(36px, 5vw, 64px); }
.page.v2 .outline ol { background: none; padding: 0; border-radius: 0; }
.page.v2 .toc-bar { grid-column: 1 / -1; grid-row: 3 / -1; align-self: start; }
@media (max-width: 1100px) {
.page.v2 { grid-template-columns: minmax(0, 1fr); padding: 0 var(--pad); }
.page.v2 .hero-bg { margin: 0 calc(-1 * var(--pad)); border-radius: 0; }
.page.v2 .hero-img { padding-top: var(--pad); }
.page.v2 .doc-head { padding-bottom: 24px; }
.page.v2 .toc-bar { grid-column: 1; margin: 0 calc(-1 * var(--pad)); border-top: 1px solid rgba(0, 0, 0, .08); }
.page.v2 .toc-bar details { padding: 0 var(--pad); }
.page.v2 .doc-rest { margin-top: 47px; } /* clears the nav bar, which overlaps this area so it can stick */
}
/* bioGraphic v2 table of contents: sits in the header card and stays there (no sticky rail, no mobile bar).
"How it came together" links to the section; its stages are listed as plain text, to be read in order. */
.page.v2 { grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 270px); column-gap: clamp(28px, 3vw, 48px); }
.page.v2 .outline.toc { grid-row: 2; position: static; max-width: none; justify-self: stretch; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.page.v2 .toc ol.steps { margin: 2px 0 6px; padding: 0 0 0 16px; border: 0; }
.toc .steps li { color: var(--tone-ink, #2d6c64); font-size: .82rem; line-height: 1.35; padding: 3px 0; opacity: .85; }
.page.v2 .outline.toc a.active { font-weight: inherit; color: var(--tone-ink, #2d6c64); }
.page.v2 .outline.toc a:hover { color: var(--ink); }
@media (max-width: 1100px) {
.page.v2 { grid-template-columns: minmax(0, 1fr); }
.page.v2 .outline.toc { display: none; }
.page.v2 .doc-rest { margin-top: 0; }
}
/* The TOC starts on the introduction, so it shows as the current place: bold and near-black */
.page.v2 .outline.toc a.here { color: var(--ink); font-weight: 600; }
/* Table of contents inside the header card (.doc-head.has-toc, Stanford first; October 19, 2026).
One TOC at every size, with the stage names as links:
- above 1100px: the header becomes a two-column grid matching the page columns, TOC on the right
- 761 to 1100px: a four-column grid matching the requirement cards; text takes three, TOC the fourth
- 760px and under: the TOC stacks under the role line, above the intro, as a light card */
.page.v2 .doc-head.has-toc { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 270px); column-gap: clamp(28px, 3vw, 48px); align-content: start; }
.page.v2 .doc-head.has-toc > * { grid-column: 1; }
.page.v2 .doc-head.has-toc > .outline.toc { grid-column: 2; grid-row: 1 / span 5; padding-top: 0; position: static; align-self: start; }
.page.v2 .toc .steps a { display: inline; padding: 0; color: inherit; }
.page.v2 .toc .steps a:hover { color: var(--ink); }
@media (max-width: 1100px) {
.page.v2 .doc-head.has-toc { grid-column: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; }
.page.v2 .doc-head.has-toc > * { grid-column: 1 / 4; padding-right: 20px; }
.page.v2 .doc-head.has-toc > .tension { grid-column: 1 / -1; padding-right: 0; }
.page.v2 .doc-head.has-toc > .outline.toc { display: block; grid-column: 4; grid-row: 1 / span 4; padding: 6px 0 0; }
}
@media (max-width: 760px) {
.page.v2 .doc-head.has-toc { display: block; }
.page.v2 .doc-head.has-toc > * { padding-right: 0; }
.page.v2 .doc-head.has-toc > .outline.toc { margin: 18px 0 4px; padding: 12px 16px 12px; background: rgba(255, 255, 255, .6); border-radius: 12px; }
.page.v2 .doc-head.has-toc .toc .steps li { padding: 5px 0; }
}
/* bioGraphic v2 requirements: four in a row, two by two on smaller screens */
.page.v2 .tension { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.page.v2 .tension li { padding: 14px 14px 16px; font-size: .88rem; line-height: 1.5; }
@media (max-width: 760px) {
.page.v2 .tension { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page.v2 .tension li { padding: 14px 16px 16px; font-size: .92rem; }
}
/* bioGraphic v2: four impact figures; the outcome becomes a full-width card like the header */
.page.v2 { grid-template-rows: auto auto auto auto auto 1fr; }
.page.v2 .doc-rest { grid-row: 3; }
.page.v2 .outcome-wrap { grid-column: 1 / -1; grid-row: 4; padding-bottom: 0; }
.page.v2 .doc-end { grid-column: 1; grid-row: 5 / -1; }
.impact dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page.v2 .outcome-card { background: var(--tone, var(--c-bio)); border-radius: 22px; margin-left: calc(-1 * var(--fp)); margin-right: calc(-1 * var(--fp)); padding: clamp(28px, 4vw, 48px) var(--fp) var(--fp); }
.page.v2 .outcome-card .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page.v2 .outcome-card .stats > div { background: rgba(255, 255, 255, .6); }
.page.v2 .outcome-card .audiences > div { border-top-color: rgba(0, 0, 0, .55); }
.page.v2 .outcome-card .prose p { max-width: 68ch; }
.page.v2 .outcome-card figure { margin-bottom: 0; }
.page.v2 .outcome-card figure img { border: 0; }
@media (max-width: 1100px) {
.page.v2 .doc-end { grid-column: 1; }
.page.v2 .outcome-card { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); border-radius: 0; padding: 40px var(--pad) var(--pad); }
}
@media (max-width: 760px) {
.impact dl, .page.v2 .outcome-card .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page.v2 .doc-rest { padding-bottom: 0; }
/* bioGraphic v2: everything below the header uses the full column width. Cards and images fill it;
running text keeps a comfortable line length. */
.page.v2 .doc-rest, .page.v2 .doc-end { grid-column: 1 / -1; }
.page.v2 .doc-rest p, .page.v2 .doc-end p, .page.v2 .doc-rest h3 { max-width: 72ch; }
.page.v2 .doc-rest .finding li, .page.v2 .doc-rest .impact dd, .page.v2 .doc-rest figcaption { max-width: none; }
.page.v2 .doc-end .two-up > div p { max-width: none; }
@media (max-width: 1100px) {
.page.v2 .doc-rest, .page.v2 .doc-end { grid-column: 1; }
}
/* Impact panel: the headline sentence is the heading, styled like the stage headings */
.impact h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 10px; }
.impact .lead { color: var(--ink-2); font-size: 1rem; line-height: 1.6; max-width: 60ch; }
/* bioGraphic v2 stages: no section cards, eyebrows or tags. Each stage is a heading, a one-sentence
summary, then the detail. Cards are kept only for callouts (findings, notes, expandable artifacts). */
.page.v2 .stage { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.page.v2 .stages-intro + .stage { margin-top: 28px; }
.page.v2 .stage > h3 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 10px; }
.page.v2 .stage > .takeaway { color: var(--ink); font-size: clamp(1.05rem, 1.4vw, 1.18rem); font-weight: 500; line-height: 1.5; margin: 0 0 20px; max-width: 60ch; }
.page.v2 .stage > h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 34px 0 8px; color: var(--ink); }
@media (max-width: 1100px) { .page.v2 .stage { scroll-margin-top: calc(var(--hdr, 68px) + 16px); } }
/* Stage date line, used only where it adds information (year and platform) */
.page.v2 .stage > .when { color: var(--ink-3); font-size: .9rem; margin: 0 0 6px; }
/* Three-column stage layout.
Wide: the first text block is centered beside the sketch (which spans two columns); the next two
text blocks run top-aligned in the left column beside the two phone screens.
600 to 900px: two equal columns, text left and images right.
Under 600px: sketch, first text, both screens side by side, then the remaining text. */
.split3 { --g: clamp(20px, 2.6vw, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--g); margin: 8px 0 24px; }
.split3 h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 22px 0 8px; color: var(--ink); }
.split3 h4:first-child { margin-top: 0; }
.split3 p { margin-bottom: 0; }
.split3 figure { margin: 0; }
.split3 .t1 { grid-column: 1; grid-row: 1; align-self: start; }
.split3 .wide { grid-column: 2 / 4; grid-row: 1; }
.split3 .t2 { grid-column: 1; grid-row: 2; align-self: start; }
.split3 .screens { grid-column: 2 / 4; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); align-items: start; }
@media (max-width: 900px) {
.split3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split3 .wide, .split3 .screens { grid-column: 2; }
.split3 .screens { gap: 12px; }
}
@media (max-width: 600px) {
.split3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.split3 .t1, .split3 .wide, .split3 .t2, .split3 .screens { grid-column: 1; grid-row: auto; }
.split3 .wide { order: 1; }
.split3 .t1 { order: 2; }
.split3 .screens { order: 3; }
.split3 .t2 { order: 4; }
}
/* Three equal image columns (e.g. sketch, wireframe, built story).
Under 600px: the first image runs full width, the other two sit side by side. */
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); align-items: start; margin: 20px 0 32px; }
.row3 figure { margin: 0; }
/* One third text, two thirds images (one image per column).
600 to 900px: two equal columns, text left, images stacked on the right.
Under 600px: both images side by side, then the text, matching the stage above. */
.split13 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.split13 h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.split13 .txt p + p { margin-top: 1em; }
.split13 .txt p { margin-bottom: 0; }
.split13 figure { margin: 0; }
@media (max-width: 900px) {
.split13 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split13 .txt { grid-row: 1 / span 2; }
.split13 figure { grid-column: 2; }
}
@media (max-width: 600px) {
.row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row3 figure:first-child { grid-column: 1 / -1; }
.split13 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.split13 .txt { grid-column: 1 / -1; grid-row: 2; }
.split13 figure { grid-column: auto; grid-row: 1; }
}
/* Image rows with matched heights: each figure's width follows its image's proportions
(set from main.js once the image loads), so the pictures come out close to the same height */
.row3.even-h { display: flex; align-items: flex-start; }
.row3.even-h figure { flex: var(--ar, 1) 1 0; min-width: 0; }
@media (max-width: 600px) {
.row3.even-h { display: grid; }
.row3.even-h figure { flex: none; }
}
/* Two equal columns: text on the left, images stacked on the right.
Under 600px: images side by side, then the text, matching the stages above. */
.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.split2 .txt { grid-column: 1; grid-row: 1 / span 2; }
.split2 .txt p { margin-bottom: 0; }
.split2 .txt p + p { margin-top: 1em; }
.split2 h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.split2 figure { grid-column: 2; margin: 0; }
@media (max-width: 600px) {
.split2 { gap: 20px 12px; }
.split2 .txt { grid-column: 1 / -1; grid-row: 1; }
.split2 figure { grid-column: auto; grid-row: 2; }
}
/* "Modules" block: text, a lead image, and a pair of images matched in height to each other.
Wide: text across the top; lead image one third wide, the pair sharing the other two thirds.
600 to 900px: text left; lead image right, the pair below it.
Under 600px: lead image, text, then the pair. */
.mods { --g: clamp(16px, 2.2vw, 28px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px var(--g); margin: 0 0 32px; }
.mods .txt { flex: 0 0 100%; }
.mods .txt p { margin-bottom: 0; }
.mods h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.mods figure { margin: 0; }
/* Above 900px the lead image holds the width of one text column at 900px (about 400px), and the pair takes the rest */
.mods .f1 { flex: 0 0 400px; min-width: 0; }
.pair-eh { display: flex; align-items: flex-start; gap: var(--g, 16px); }
.pair-eh figure { flex: var(--ar, 1) 1 0; min-width: 0; margin: 0; }
.mods .pair-eh { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
/* 600 to 900px: the text, then all three images in one row at matched heights */
.mods { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 12px; }
.mods .f1, .mods .pair-eh figure { flex: var(--ar, 1) 1 0; min-width: 0; order: 1; }
.mods .pair-eh { display: contents; }
.mods .txt { flex: 0 0 100%; order: 0; } /* text above the images */
}
@media (max-width: 600px) {
/* phones: lead image, then the text, then the matched pair */
.mods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mods .txt, .mods .f1, .mods .pair-eh { grid-column: 1; grid-row: auto; }
.mods .f1 { flex: none; order: 1; }
.mods .txt { flex: none; order: 2; }
.mods .pair-eh { display: flex; gap: 12px; order: 3; }
.mods .pair-eh figure { order: 0; }
}
/* Templates block above 1100px: text takes one third; the two images share the other two thirds,
with widths set from their proportions so their heights come out close to equal */
@media (min-width: 1101px) {
.split2 { --g2: clamp(20px, 2.6vw, 36px); display: flex; align-items: flex-start; gap: var(--g2); }
.split2 .txt { flex: 0 0 calc((100% - 2 * var(--g2)) / 3); }
.split2 figure { flex: var(--ar, 1) 1 0; min-width: 0; }
.split2 .carousel { flex: 1 1 0; min-width: 0; }
}
/* Carousels: images share one frame and cross-fade every 15 seconds. main.js turns a carousel on
(class .is-car) only inside its screen-width range and sizes the frame to one of its images;
outside that range, or without JavaScript, the images simply show as normal figures. */
.carousel { min-width: 0; }
.carousel:not(.is-car), .carousel:not(.is-car) .track { display: contents; }
.carousel:not(.is-car) .car-bar { display: none; }
.carousel.is-car .track { position: relative; aspect-ratio: var(--car-ar, 16 / 10); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--mist); }
.carousel.is-car .track figure { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.carousel.is-car .track figure.on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; z-index: 1; }
.carousel.is-car .track figure img { width: 100%; height: 100%; object-fit: contain; object-position: center center; border: 0; border-radius: 0; background: transparent; }
.carousel.is-car .track figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.car-bar { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.car-cap { flex: 1; margin: 0; font-size: .86rem; color: var(--ink-3); line-height: 1.5; max-width: none !important; }
.car-dots { display: flex; gap: 6px; }
.car-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink-3); background: transparent; cursor: pointer; }
.car-dot[aria-current="true"] { background: var(--ink); border-color: var(--ink); }
.car-dot:hover { border-color: var(--purple); }
@media (min-width: 901px) { .split2 .carousel { grid-column: 2; grid-row: 1 / span 2; } }
/* Shared stage patterns (bioGraphic v2), matching the first two stages:
subheadings in the text column, images to the right, findings and notes as the only cards */
.page.v2 .stage .txt h4 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 22px 0 8px; color: var(--ink); }
.page.v2 .stage .txt > h4:first-child { margin-top: 0; }
.page.v2 .stage .txt > p { margin: 0; }
.page.v2 .stage .txt > p + p { margin-top: 1em; }
.page.v2 .stage .txt .callout { margin: 18px 0 0; }
.page.v2 .stage > p:not(.takeaway):not(.when) { margin-bottom: 0; }
.page.v2 .stage > .finding { margin: 24px 0; }
/* Text left, one image right, two equal columns. Under 600px: text, then the image. */
.tx-img { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.tx-img figure { margin: 0; }
@media (max-width: 600px) { .tx-img { grid-template-columns: minmax(0, 1fr); } }
/* Two columns of text, for stages without images. One column below 900px. */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 3.4vw, 48px); align-items: start; margin: 8px 0 24px; }
@media (max-width: 900px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
/* A row of key numbers inside a stage, styled like the requirement cards */
.facts { list-style: none; padding: 0; margin: 8px 0 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.facts li { background: var(--mist); border-radius: 12px; padding: 14px 14px 16px; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.facts b { display: block; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin-bottom: 6px; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Designer-led to editor-led: laid out like "Two taxonomies" in stage 1.
Above 900px: text in the first column, one image in each of the other two.
600 to 900px: text left, the two images as a carousel on the right.
Under 600px: text, then both images side by side. */
.ed3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.ed3 figure { margin: 0; }
@media (max-width: 900px) {
.ed3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed3 .txt { grid-column: 1; }
.ed3 .carousel.is-car { grid-column: 2; }
}
@media (max-width: 600px) {
.ed3 { gap: 20px 12px; }
.ed3 .txt { grid-column: 1 / -1; }
}
/* The 2018 rebuild.
Above 900px: the redlined page is exactly as wide as one of the four number cards above it (and lines up
with the last one); the four text blocks split the remaining width into two columns.
600 to 900px: text two thirds, page one third. Under 600px: text and page in two equal columns. */
.rb3 { display: grid; grid-template-columns: minmax(0, 1fr) calc((100% - 30px) / 4); gap: 24px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.rb-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(20px, 2.6vw, 36px); align-items: start; }
.rb3 figure { margin: 0; }
@media (max-width: 900px) {
.rb3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rb-text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 500px) {
.rb3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}
/* Word stats (Record, Multisensory) run smaller so they fit their column */
.impact dt.fig-word, .page.v2 .outcome-card .stats dt.fig-word { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
/* Text plus two images without a carousel: 600 to 900px the images stack in the right column;
under 600px they sit side by side below the text */
@media (max-width: 900px) {
.ed3 > .txt { grid-row: 1 / span 2; }
.ed3 > figure { grid-column: 2; }
}
@media (max-width: 600px) {
.ed3 > .txt { grid-column: 1 / -1; grid-row: 1; }
.ed3 > figure { grid-column: auto; grid-row: 2; }
}
/* Placeholders that need a real figure: stronger orange highlight with a dashed outline,
so they stand apart from the yellow text placeholders */
.ph.num { background: #ffd9a8; color: #6b3600; outline: 1px dashed #c46a12; outline-offset: -1px; font-weight: 600; }
/* A finding card stacked inside a text column: title, then each step below the last */
.finding.stacked { margin: 0 0 24px; }
.finding.stacked ol { grid-template-columns: minmax(0, 1fr); }
.finding.stacked li + li { border-left: 0; border-top: 1px solid var(--line); }
/* Building and rebuilding, above 900px: three columns. Number cards stacked on the left, all the text
in the middle (equal to the left), and the redlined page on the right at its earlier width. */
@media (min-width: 901px) {
.rb3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc((100% - 30px) / 4); }
.rb3 > .facts { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); margin: 0; }
.rb3 > .rb-text { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
.rb3 > figure { grid-column: 3; grid-row: 1; }
}
/* 600 to 900px: number cards across the top, then all the text beside the page */
@media (max-width: 900px) {
.rb3 > .facts { grid-column: 1 / -1; margin: 0; }
.rb3 > .rb-text { grid-column: 1; }
.rb3 > figure { grid-column: 2; }
}
/* Phones, under 500px: number cards, then both text blocks full width, then the redlined page split into two halves
side by side (.rl-halves), with one caption across both.
500 to 900px uses the tablet layout above. */
@media (max-width: 500px) {
.rb3 > .rb-text { display: contents; }
.rb3 > .rb-text > .txt:first-child { grid-column: 1 / -1; }
.rb3 > .rb-text > .txt:last-child { grid-column: 1 / -1; }
.rb3 > figure { grid-column: 1 / -1; }
}
.page.v2 .stage .txt .finding h4 { margin: 0; font-size: 1rem; }
/* Outcome image: its white background is blended into the card color, so there's no hard white edge */
.page.v2 .outcome-card figure img { background: transparent; border: 0; border-radius: 0; height: auto; } /* transparent PNG/WebP: the devices sit directly on the card */
.next.to-cas { --next-tone: var(--c-cas); }
/* Turning point: the moment the project changed direction. Shown as one highlighted card per case study.
.draft adds a dashed yellow outline while the copy is still waiting for review. */
.turn { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--tone-ink, #2d6c64); border-radius: 12px; padding: 16px 18px; margin: 0 0 22px; }
.turn .turn-k { font-size: .84rem; font-weight: 600; color: var(--tone-ink, #2d6c64); margin: 0 0 6px !important; }
.turn p { color: var(--ink); margin: 0; }
.turn p + p { margin-top: .7em; }
.turn.draft { outline: 2px dashed #e0b400; outline-offset: 3px; }
.turn-wrap { max-width: 760px; margin: 8px 0 8px; }
/* "More detail" toggles (bioGraphic): secondary paragraphs sit inside their text column, closed by default,
so the layout around them never changes. Native , so it works with keyboard and screen readers. */
details.more { margin: 16px 0 0; }
details.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--purple); padding: 4px 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
details.more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
details.more > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
details.more .more-body { padding-top: 6px; }
details.more .more-body > h4:first-child { margin-top: 6px !important; }
details.more .more-body > p { margin: 0; }
details.more .more-body > .callout { margin-top: 10px; }
/* Reader testing: the two finding cards in the first two of three columns; the pattern note and the
scroll wireframe in the third. 600 to 900px: cards stacked on the left, note and wireframe on the right.
Under 600px: everything in one column, cards first. */
.rs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(20px, 2.6vw, 36px); align-items: start; margin: 20px 0 24px; }
.rs3 > .finding { margin: 0; }
.rs3 .side figure { margin: 18px 0 0; }
@media (max-width: 900px) {
.rs3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs3 > .finding { grid-column: 1; }
.rs3 > .side { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
.rs3 { grid-template-columns: minmax(0, 1fr); }
.rs3 > .finding, .rs3 > .side { grid-column: 1; grid-row: auto; }
}
/* Optional lines to choose from inside a note */
.callout .options { margin: 12px 0 0; padding-left: 18px; }
.callout .options li { color: var(--ink); font-size: .94rem; margin: 6px 0; }
/* A wide process image (e.g. before, wireframe and after) with a short text column beside it.
Text one third, image two thirds; stacks below 900px. */
.sketch-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.sketch-row figure { margin: 0; }
@media (max-width: 900px) { .sketch-row { grid-template-columns: minmax(0, 1fr); } }
/* The capabilities process image is wide and detailed, so it gets the full width below its text */
.sketch-row .txt { max-width: 72ch; }
.sketch-row figure img { width: 100%; height: auto; }
a.zoom { display: block; cursor: zoom-in; }
/* Stanford header: three stacked browser frames (old site, template, finished site) that fade in one at a time.
Positions are percentages of a 2:1 frame, so the stack scales with the screen. */
.page.v2 .hero-img .stack { position: relative; aspect-ratio: 2 / 1; background: #eef1fb; border-radius: 12px; overflow: hidden; }
.page.v2 .hero-img .stack img.layer { position: absolute; height: auto; aspect-ratio: auto; object-fit: fill; border-radius: 6px; background: var(--white); box-shadow: 0 18px 40px -18px rgba(30, 30, 70, .45); }
/* staircase: each frame steps down and to the right, leaving the top-left of the one behind it visible */
/* (scoped under .page.v2 .hero-img so these beat the general "hero image fills the frame" rule) */
.page.v2 .hero-img .stack img.l1 { width: 46%; left: 3%; top: 4%; z-index: 1; }
.page.v2 .hero-img .stack img.l2 { width: 50%; left: 19%; top: 17.5%; z-index: 2; }
.page.v2 .hero-img .stack img.l3 { width: 58%; left: 39%; top: 31%; z-index: 3; }
.motion-full.js .stack .layer { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.motion-calm.js .stack .layer { opacity: 0; transition: opacity .6s ease; }
.js .hero-img.in .stack .layer { opacity: 1; transform: none; }
.js .hero-img .stack .l1 { transition-delay: .15s; }
.js .hero-img .stack .l2 { transition-delay: .75s; }
.js .hero-img .stack .l3 { transition-delay: 1.35s; }
/* Stanford repeatable path (.rp3): text one third; on the right, the path card above the tracker.
The path is one card with the seven steps joined by a line and dots.
Above 1100px the steps run across; at 1100px and under (where the column gets narrow) they run down.
600 to 900px: text and media in halves. Under 600px: everything stacks. */
.rp3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.rp3 figure { margin: 0; }
.rp3 .media { display: grid; gap: 24px; }
.path ol { list-style: none; margin: 0; padding: 20px 18px 18px; background: var(--mist); border-radius: 14px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 10px; }
.path li { position: relative; display: flex; flex-direction: column; gap: 3px; padding-top: 22px; }
.path li::before { content: ""; position: absolute; top: 4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tone-ink, var(--ink-3)); }
.path li:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: 15px; right: -4px; height: 1px; background: var(--line-2); }
.path .n { font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tone-ink, var(--ink-3)); }
.path b { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.path .d { font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
/* Arrowhead at the end of each connector */
.path li:not(:last-child) .n::after { content: ""; position: absolute; top: 5px; right: -4px; width: 5px; height: 5px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); transform: rotate(45deg); }
@media (max-width: 1100px) {
.path ol { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 18px 6px; }
.path li { padding: 0 0 14px 26px; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
.path li::before { top: 5px; }
.path li:not(:last-child)::after { top: 18px; bottom: 2px; left: 4px; right: auto; width: 1px; height: auto; }
.path li:not(:last-child) .n::after { top: auto; bottom: 1px; right: auto; left: 2px; transform: rotate(135deg); }
.path .n { grid-column: 1; grid-row: 1; }
.path b { grid-column: 2; }
.path .d { grid-column: 2; }
}
@media (max-width: 900px) {
.rp3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.rp3 { grid-template-columns: minmax(0, 1fr); }
}
/* Text one third, image two thirds (Stanford audit). 600 to 900px: even halves. Under 600px: stacked, like .tx-img. */
@media (min-width: 901px) { .tx-img.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
/* Before and after (Stanford template): text with the "before" image under it on the left, "after" on the right.
Under 600px: text full width, then before and after side by side. */
.ba2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.ba2 .col { display: grid; gap: 24px; align-content: start; }
.ba2 figure { margin: 0; }
@media (max-width: 600px) {
.ba2 { gap: 20px 12px; }
.ba2 .col { display: contents; }
.ba2 .txt { grid-column: 1 / -1; }
}
/* Text one third, two images stacked in the other two thirds (Stanford presentation theme).
600 to 900px: even halves. Under 600px: text, then each image full width. */
.tx-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(20px, 2.6vw, 36px); align-items: start; margin: 8px 0 24px; }
.tx-stack .txt { grid-column: 1; grid-row: 1 / span 2; }
.tx-stack figure { grid-column: 2; margin: 0; }
@media (max-width: 900px) { .tx-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.tx-stack { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tx-stack .txt, .tx-stack figure { grid-column: 1; grid-row: auto; }
}
figure picture { display: block; } /* swaps image orientation by width (Stanford slide layouts: 3x2 above 900px, 2x3 below) */
/* Parallax illustration (Stanford, Medal of Honor series): four layers from the layered PSD,
stacked full frame. With full motion they push in and pan at different speeds, nearest layers fastest,
then ease back. Calm motion or no JavaScript: a still, composed image. */
.parallax { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.parallax .pl { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; transform: scale(1.1); transform-origin: 50% 60%; }
.motion-full .parallax .pl { animation: 6s ease-in-out infinite alternate; will-change: transform; }
.motion-full .parallax .sky { animation-name: pl-sky; }
.motion-full .parallax .people { animation-name: pl-people; }
.motion-full .parallax .boss { animation-name: pl-boss; }
.motion-full .parallax .desk { animation-name: pl-desk; }
@keyframes pl-sky { from { transform: scale(1.08) translateX(1%); } to { transform: scale(1.12) translateX(-1%); } }
@keyframes pl-people { from { transform: scale(1.08) translateX(2.5%); } to { transform: scale(1.16) translateX(-2.5%); } }
@keyframes pl-boss { from { transform: scale(1.08) translateX(4%); } to { transform: scale(1.24) translateX(-4%); } }
@keyframes pl-desk { from { transform: scale(1.1) translateX(0); } to { transform: scale(1.1) translateX(-9%); } } /* slides left only, no zoom */
/* Working kiosk embed (academy.html, Digital IDs). The ID app is a fixed 1280x800 screen,
so the iframe stays that size and is scaled down to fit the bezel (scale set in main.js).
Below 600px the bezel thins and the caption stacks over the source toggle. */
.kiosk { margin: 8px 0 28px; }
.kiosk-bezel { background: #111; border-radius: 22px; padding: clamp(10px, 1.6vw, 20px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.55); }
.kiosk-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #000; }
.kiosk-screen iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--kiosk-s, .5)); background: #000; }
.kiosk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.kiosk-bar figcaption { margin: 0; flex: 1 1 320px; }
.kiosk-open { font-size: .84rem; color: var(--ink); }
.kiosk-open:focus-visible { outline: 2px solid var(--tone-ink, var(--ink)); outline-offset: 2px; }
@media (max-width: 600px) {
.kiosk-bezel { border-radius: 14px; padding: 8px; }
.kiosk-bar figcaption { flex-basis: 100%; }
}
/* Click to enlarge. Add data-zoom to an ![]()
(optionally data-zoom="bigger-file.webp");
main.js wraps it in a button and opens it in a