/* Next: the Risk case on the chosen system (6.10, color updated 7.10).
   Onest + Geist, black and neutral grey base, one accent (lime) used in touches. Tags are neutral.
   Uses ../shared/tokens.css (spacing, closed type scale, motion, --color-* names). See ../../tokens.md and ../../mood.md. */
:root { --accent: var(--color-content-primary); } /* focus ring color used by tokens.css */

body {
  background: var(--color-surface-page);
  color: var(--color-content-primary);
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.measure { max-width: var(--measure); }

h1, h2, h3 { font-family: var(--font-head); margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--t-40); line-height: 1.15; letter-spacing: -0.025em; }
h2 { font-size: var(--t-28); line-height: 1.2; }
h3 { font-size: var(--t-20); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s2); }
.muted { color: var(--color-content-secondary); }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 10; height: var(--header-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { font: 500 var(--t-16)/1 var(--font-head); text-decoration: none; letter-spacing: -0.01em; }
.nav { display: flex; gap: var(--s4); }
.nav a { text-decoration: none; font-size: var(--t-14); color: var(--color-content-secondary); padding: var(--s1) 0; position: relative; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-content-primary); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* hero */
.case-hero { padding: var(--s12) 0 var(--s6); }
.kicker { margin: 0 0 var(--s2); font-size: var(--t-14); color: var(--color-content-secondary); }
.case-hero h1 { max-width: 26ch; margin-bottom: var(--s3); }
.hero-lead { max-width: var(--measure); margin: 0 0 var(--s6); font-size: var(--t-20); line-height: 1.5; color: var(--color-content-secondary); }
.impact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.impact li { border-top: 1px solid var(--color-line); padding-top: var(--s2); }
.impact li { display: grid; gap: 4px; align-content: start; }
.impact .was { font-size: var(--t-14); line-height: 1.5; color: var(--color-content-secondary); }
.impact .was::after { content: " \2192"; }
.impact strong { font: 600 var(--t-16)/1.4 var(--font-head); letter-spacing: -0.01em; text-wrap: balance; }
.fig.hero-fig { margin: var(--s6) 0; }
.hero-fig .window { background: #0b0d12; }
.meta { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin: 0; padding-top: var(--s3); border-top: 1px solid var(--color-line); }
.meta dt { font-size: var(--t-14); color: var(--color-content-secondary); }
.meta dd { margin: 0; }

/* layout: sticky side nav plus main column */
.case-body { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--s6); align-items: start; padding-bottom: var(--s8); }
.side { position: sticky; top: calc(var(--header-h) + var(--s3)); }
.side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side a { display: block; padding: 6px 0 6px var(--s2); border-left: 2px solid var(--color-line); text-decoration: none; font-size: var(--t-14); line-height: 1.4; color: var(--color-content-secondary); transition: border-color 200ms; }
.side a:hover { color: var(--color-content-primary); }
.side a.is-active { color: var(--color-content-primary); font-weight: 500; border-left-color: var(--color-content-primary); }
.case-main > section { padding-bottom: var(--s8); scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.case-main > section:last-child { padding-bottom: 0; }
.case-main h2 { margin-bottom: var(--s3); }

/* tags */
/* negative pill: black fill, light text (13.10, her request, first used on the Risk persona cards) */
.tag.neg { background: var(--color-content-primary); box-shadow: none; color: var(--color-surface-page); font-weight: 500; }
.tag { display: inline-block; font-size: var(--t-14); line-height: 1; padding: 7px 12px; border-radius: 999px; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-content-primary); }

/* section head: small label for where the reader is, a scannable sentence, one muted lead-in line */
.sec-head { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.sec-head h2 { margin: 0; }
.eyebrow { font-size: var(--t-14); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-content-secondary); }
.lead { margin: 0; color: var(--color-content-secondary); }

/* one marker word: lime behind the word, ink text */
/* marker word in a headline: the lime sits behind ALL the text of the headline, so a descender from the line above (the y of security) draws on top of it */
h1, h2 { isolation: isolate; }
mark { white-space: nowrap; position: relative; background: none; color: var(--color-accent-on-lime); padding: 0 0.12em; }
mark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-accent-lime); border-radius: 0.12em; }
/* a marker that may wrap over two lines (the formula) keeps the plain background */
.formula mark { white-space: normal; position: static; background: var(--color-accent-lime); border-radius: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.formula mark::before { display: none; }

/* figures */
.fig { margin: var(--s4) 0 0; }
.window { border: 1px solid var(--color-line); border-radius: var(--radius-s); overflow: hidden; background: var(--color-surface-subtle); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 32px rgba(17, 17, 17, 0.06); }
.fig figcaption { margin-top: var(--s2); font-size: var(--t-14); color: var(--color-content-secondary); font-style: italic; text-align: center; } /* captions: italic, centered under the image (13.10, her rule) */

/* prose lists */
.prose ul { padding-left: var(--s3); margin: 0 0 var(--s2); }
.prose li { margin-bottom: var(--s1); }
.label { display: block; font-size: var(--t-14); font-weight: 500; color: var(--color-content-secondary); margin: var(--s3) 0 4px; }
.label + p { margin-bottom: 0; }

/* problem, decision, why: three columns, one hairline on top of each */
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.triad > div { border-top: 1px solid var(--color-line); padding-top: var(--s2); }
.triad .label { margin: 0 0 var(--s1); color: var(--color-content-primary); }
.triad p { margin: 0; font-size: var(--t-14); line-height: 1.6; }

/* approach: same white page, quiet cards */
.approach { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.approach h2 { margin: 0; }
.approach .measure { display: grid; gap: var(--s2); }
.approach .measure p { margin: 0; }
.personas { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 0 var(--s2); }
.persona { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface-subtle); padding: var(--s3); display: grid; gap: var(--s2); grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s2); }
.persona header { display: flex; align-items: center; gap: var(--s2); }
.persona .who { display: grid; gap: var(--s1); justify-items: start; }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.persona p { margin: 0; color: var(--color-content-secondary); }
.persona blockquote { margin: 0; padding-top: var(--s2); border-top: 1px solid var(--color-line); }
.persona .from { display: block; margin-bottom: 4px; font-size: var(--t-14); font-weight: 500; color: var(--color-content-secondary); }
/* shared pills for the live flows */
.pill { display: inline-block; font-size: var(--t-14); line-height: 1.2; padding: 8px 16px; border-radius: 999px; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-content-primary); text-align: center; }
.pill.start { background: var(--color-content-primary); box-shadow: none; color: #fff; }
.pill.end { background: var(--color-accent-lime); box-shadow: none; color: var(--color-accent-on-lime); font-weight: 500; }
.pill.ghost { background: #fff; }
.diagram { background: var(--color-surface-subtle); border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s3); }
.diagram-cap { margin: calc(-1 * var(--s2)) 0 0; font-size: var(--t-14); color: var(--color-content-secondary); }
.diagram-title { margin: 0; font: 600 var(--t-14)/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-content-secondary); }

/* detection risk tree: boxes with hairline connectors, a question list under each branch */
.tree { display: grid; justify-items: center; gap: 0; }
.tree .root { position: relative; margin-bottom: var(--s3); }
.tree .root::after { content: ""; position: absolute; left: 50%; top: 100%; height: var(--s1); width: 1px; background: var(--color-content-secondary); }
.tree .branches { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); width: 100%; }
.tree .branches::before { content: ""; position: absolute; top: calc(-1 * var(--s2)); left: calc((100% - var(--s4)) / 4); right: calc((100% - var(--s4)) / 4); height: var(--s2); border: 1px solid var(--color-content-secondary); border-bottom: 0; }
.tree .branch { display: grid; justify-items: center; align-content: start; gap: var(--s3); }
.tree .node { font-weight: 500; }
.tree .leaves { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); width: 100%; margin-top: 0; }
.tree .leaves::before { content: ""; position: absolute; top: calc(-1 * var(--s2)); left: calc((100% - var(--s1)) / 4); right: calc((100% - var(--s1)) / 4); height: var(--s2); border: 1px solid var(--color-content-secondary); border-bottom: 0; }
.tree .leaf { position: relative; justify-self: center; background: #fff; }
.tree .node { position: relative; }
.tree .node::after { content: ""; position: absolute; left: 50%; top: 100%; height: var(--s1); width: 1px; background: var(--color-content-secondary); }
.tree .qs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--t-14); line-height: 1.5; color: var(--color-content-secondary); }
.tree .qs li { padding-left: var(--s3); position: relative; }
.tree .qs li::before { content: "?"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-content-primary); color: #fff; font: 600 var(--t-14)/20px var(--font-body); text-align: center; }
.formula { margin: 0; font: 600 var(--t-20)/1.35 var(--font-head); letter-spacing: -0.01em; text-align: center; }

/* three principles as circles */
.circles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.principle { display: grid; justify-items: center; text-align: center; gap: var(--s2); align-content: start; }
.principle .disc { width: 80px; height: 80px; border-radius: 50%; background: var(--color-surface-subtle); box-shadow: inset 0 0 0 1px var(--color-line); display: grid; place-items: center; }
.principle .disc svg { width: 32px; height: 32px; fill: none; stroke: var(--color-content-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.principle h3 { font-size: var(--t-20); }
.principle p { margin: 0; color: var(--color-content-secondary); }
.principle p b { color: var(--color-content-primary); font-weight: 600; }

/* add rule flow: one numbered vertical line, the three stage names in a left gutter (her pick, version A, 7.10) */
.diagram.tight { padding: var(--s3); gap: var(--s2); width: fit-content; max-width: 100%; min-width: min(100%, 480px); }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; max-width: 560px; counter-reset: n; }
.rsteps > li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s2); padding-bottom: var(--s2); }
.rsteps > li:last-child { padding-bottom: 0; }
.rsteps .grp { padding-top: 3px; font: 600 var(--t-14)/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-content-secondary); }
.rail { position: relative; padding-left: var(--s4); counter-increment: n; min-height: 24px; }
.rail::before { content: counter(n); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-content-primary); color: #fff; display: grid; place-items: center; font: 500 var(--t-14)/1 var(--font-body); }
.rsteps > li:not(:last-child) .rail::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: calc(-1 * var(--s2) - 4px); width: 1px; background: var(--color-line); }
.rsteps > li:last-child .rail::before { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }
.rail strong { display: block; font-weight: 500; line-height: 24px; }
.ropts { margin: var(--s1) 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-14); }
.ropts li { display: flex; flex-wrap: wrap; gap: 4px var(--s1); }
.ropts b { font-weight: 500; min-width: 104px; }
.ropts span, .radd { color: var(--color-content-secondary); }
.radd { margin: var(--s1) 0 0; font-size: var(--t-14); line-height: 1.4; }
.radd b { color: var(--color-content-primary); font-weight: 500; }

/* results rows: outcome on the left, detail on the right, one emoji per row */
.rows { display: grid; gap: var(--s2); }
.row { background: var(--color-surface-subtle); border-radius: var(--radius); padding: var(--s4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: center; }
.row h3 { font-size: var(--t-20); line-height: 1.3; }
.row .em { display: block; font-size: var(--t-20); line-height: 1; margin-bottom: var(--s1); }
.row p { margin: 0; font-size: var(--t-16); line-height: 1.8; color: var(--color-content-secondary); }
.row p b { color: var(--color-content-primary); font-weight: 600; }

/* insight callout: a finding on the left, the conclusion in bold on the right */
.callout { background: var(--color-surface-subtle); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--s3); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s4); align-items: center; }
.callout h3 { font-size: var(--t-20); line-height: 1.3; color: var(--color-content-secondary); margin-bottom: var(--s1); }
.callout .lead-in { margin: 0 0 var(--s1); font-size: var(--t-14); line-height: 1.65; color: var(--color-content-secondary); }
.callout ul { margin: 0; padding-left: var(--s3); font-size: var(--t-14); line-height: 1.65; color: var(--color-content-secondary); }
.callout .take { margin: 0; font: 600 var(--t-20)/1.35 var(--font-head); letter-spacing: -0.01em; color: var(--color-content-primary); }

/* Cases decision: the screens side by side, each with a short caption under it */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.shot { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: var(--s2); }
.shot-frame { background: var(--color-surface-subtle); border-radius: var(--radius); padding: var(--s3); display: grid; place-items: center; }
.shot-frame img { max-width: 100%; max-height: 360px; width: auto; height: auto; }
.shot figcaption { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: var(--t-14); line-height: 1.5; font-style: italic; color: var(--color-content-secondary); }
.shot figcaption strong { font: 600 var(--t-16)/1.3 var(--font-head); font-style: normal; letter-spacing: -0.01em; color: var(--color-content-primary); }

/* takeaways: short sub-heading, short paragraph */
.takeaways { display: grid; gap: var(--s4); }
.takeaways h3 { margin-bottom: var(--s1); }
.takeaways p { margin: 0; }

/* about page: text left, portrait right */
.about-page { padding: var(--s12) 0 var(--s12); }
.about-head { margin-bottom: var(--s3); }
.about-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.about-text { display: grid; gap: var(--s3); align-content: start; }
.about-text h1 { font-size: var(--t-40); line-height: 1.15; max-width: 28ch; }
.about-body { display: grid; gap: var(--s2); max-width: var(--measure); color: var(--color-content-secondary); }
.about-body p { margin: 0; }
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; border-radius: var(--radius); background: var(--color-surface-subtle); }

/* design decisions */
.decision { padding-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.decision:first-of-type { padding-top: 0; }
.decision header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* team */
.team .measure { display: grid; gap: var(--s2); }
.team p { margin: 0; }
.team .rows { margin-top: var(--s3); }

/* footer */
.site-footer { border-top: 1px solid var(--color-line); padding: var(--s6) 0; }
.site-footer .container { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-16); color: var(--color-content-secondary); }
.site-footer nav { display: flex; gap: var(--s4); }

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .case-hero { padding: var(--s8) 0 var(--s4); }
  .meta { grid-template-columns: 1fr 1fr; }
  .case-body { grid-template-columns: minmax(0, 1fr); } /* minmax(0) so a wide drawn graphic scrolls in its own frame instead of widening the page (AI case, 13.10) */
  .side { display: none; }
  .personas, .triad, .impact, .about-grid, .row, .callout, .circles, .shots { grid-template-columns: 1fr; }
  .rsteps > li { grid-template-columns: 1fr; gap: var(--s1); }
  .personas { grid-template-rows: none; row-gap: var(--s2); }
  .persona { grid-row: auto; grid-template-rows: auto auto auto; }
  .tree .leaves { grid-template-columns: 1fr; }
  .tree .leaves::before, .tree .node::after { display: none; }
  .about-page { padding: var(--s8) 0; }
  .portrait { max-width: 380px; }
}
@media (max-width: 480px) { :root { --gutter: 16px; } }

/* motion (7.10, see ../../motion.md): reduced motion = a short fade, no movement */
.fade-reveal [data-reveal] { opacity: 0; transition: opacity 200ms linear; }
.fade-reveal [data-reveal].is-in { opacity: 1; }

/* lightbox: a screen opens large on black, a second click zooms in (7.10) */
img.zoomable { cursor: zoom-in; }
img.zoomable:focus-visible { outline: 2px solid var(--color-content-primary); outline-offset: 3px; }
.lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; }
.lb::backdrop { background: #000; }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lb-in 200ms linear; }
.lb-stage { display: flex; overflow: auto; padding: var(--s4); }
.lb-stage img { margin: auto; flex: none; max-width: none; cursor: zoom-in; border-radius: var(--radius-s); }
.lb.is-zoomed .lb-stage img { cursor: zoom-out; }
.lb-close { position: fixed; top: var(--s2); right: var(--s2); z-index: 1; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: #000; color: #fff; font: 400 var(--t-28)/1 var(--font-body); cursor: pointer; }
.lb-close:hover { background: #222; }
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lb-hint { margin: 0; padding: 0 var(--s2) var(--s2); text-align: center; font-size: var(--t-14); color: #aaa; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lb[open] { animation: none; } }

/* who it was for: the two personas sit in Problem, under the callout */
.who-for { display: grid; gap: var(--s2); margin-top: var(--s6); }

/* footer (8.10, spacing fixed after her reference): three columns 2fr 1fr 1fr, name large on the left, nav links 32px apart, email then icons.
   Selectors start with .site-footer so they win over the older .site-footer .container and .site-footer nav rules. */
.site-footer { padding: var(--s4) 0 var(--s6); }
.site-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s4); align-items: start; justify-content: stretch; }
.site-footer .footer-name { display: grid; gap: 4px; }
.site-footer .footer-name .brand { font-size: var(--t-28); line-height: 1.2; color: var(--color-content-primary); }
.site-footer .footer-nav { display: grid; gap: var(--s1); justify-content: start; }
.site-footer .footer-nav a, .site-footer .footer-contact .mail { text-decoration: none; line-height: 24px; }
.site-footer .footer-nav a:hover, .site-footer .footer-contact .mail:hover { color: var(--color-content-primary); }
.site-footer .footer-contact { display: grid; gap: 0; justify-items: start; }
.site-footer .lets { line-height: 24px; color: var(--color-content-secondary); }
.site-footer .footer-contact .mail { color: var(--color-content-primary); }
.site-footer .icons { display: flex; gap: var(--s2); margin-top: var(--s2); }
.site-footer .ico { display: inline-flex; padding: 4px; margin-left: -4px; color: var(--color-icon-muted); }
.site-footer .ico:hover { color: var(--color-content-primary); }
@media (max-width: 900px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }

/* call-to-action pill (8.10): neutral pill, one lime dot, whole pill is the link */
.cta-pill { display: inline-flex; align-items: center; gap: var(--s1); padding: 8px 16px; border-radius: 999px; background: rgba(200, 240, 50, 0.16); color: var(--color-content-primary); font-size: var(--t-14); line-height: 24px; text-decoration: none; transition: background 160ms var(--ease-out); }
.cta-pill:hover { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }
.cta-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-lime); flex: none; }
.cta-pill:hover .dot { background: var(--color-accent-on-lime); }
.cta-pill strong { font-weight: 600; }
.about-cta { padding: 0 0 var(--s12); }
@media (max-width: 560px) { .cta-pill { align-items: flex-start; border-radius: var(--radius); } .cta-pill .dot { margin-top: 8px; } }

/* text selection in the one accent color (8.10) */
::selection { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }

.about-cta-inline { margin: var(--s2) 0 0; }

/* marker hover (8.10): text links in the page body highlight in the lime accent like the text selection and the title marker */
.proj-link a, .about-body a { border-radius: 2px; transition: background 160ms var(--ease-out); }
.proj-link a:hover, .about-body a:hover, .proj-link a:focus-visible { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }

/* footer hover (8.10, her call): no highlighted area, the text and the icons turn the neon lime (she asked for it back, 8.10).
   Lime on white has low contrast (about 1.3 to 1); the hover is a short moment and the links keep their dark resting color. */
.site-footer .footer-nav a, .site-footer .mail, .site-footer .ico { transition: color 160ms var(--ease-out); }
.site-footer .footer-nav a:hover, .site-footer .mail:hover, .site-footer .ico:hover,
.site-footer .footer-nav a:focus-visible, .site-footer .mail:focus-visible, .site-footer .ico:focus-visible { background: none; color: var(--color-accent-lime); }
@media (prefers-reduced-motion: reduce) { .proj-link a, .about-body a, .site-footer .footer-nav a, .site-footer .mail, .site-footer .ico { transition: none; } }

/* footer weights (8.10, matched to the reference): the line and the nav in light grey, the email dark grey, icons 20px with 48px between centers (gap 24 because each icon has 4px padding and the first has a negative left margin) */
.site-footer .lets, .site-footer .footer-nav a, .site-footer .footer-name span { color: var(--color-content-muted); }
.site-footer .footer-contact .mail { color: var(--color-content-soft); }
.site-footer .icons { gap: 24px; }
.site-footer .ico svg { width: 20px; height: 20px; display: block; }
.site-footer .footer-nav a:hover, .site-footer .mail:hover, .site-footer .ico:hover,
.site-footer .footer-nav a:focus-visible, .site-footer .mail:focus-visible, .site-footer .ico:focus-visible { color: var(--color-accent-lime); }

/* footer rule and credit (8.10, screenshot 39): the hairline sits inside the content width, the credit is centered below the columns */
.site-footer { border-top: 0; padding: var(--s6) 0; }
.site-footer .container { display: block; }
.site-footer .footer-grid { border-top: 1px solid var(--color-line-soft); padding-top: var(--s4); }
.site-footer .footer-credit { margin: var(--s8) 0 0; text-align: center; font-size: var(--t-14); color: var(--color-content-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* credit link (8.10): inline text with the brand as a link, marker on hover like the other body links */
.site-footer .footer-credit { display: block; }
.site-footer .footer-credit svg { display: inline-block; vertical-align: -1px; margin-left: 4px; }
.site-footer .footer-credit a { color: var(--color-content-soft); text-decoration: underline; text-decoration-color: var(--color-icon-muted); text-underline-offset: 3px; border-radius: 2px; transition: background 160ms var(--ease-out); }
.site-footer .footer-credit a:hover, .site-footer .footer-credit a:focus-visible { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }
@media (prefers-reduced-motion: reduce) { .site-footer .footer-credit a { transition: none; } }
.site-footer .footer-credit, .site-footer .footer-credit a { font-weight: 400; }

/* About portrait (8.10): on wide screens its height follows the text column, so the top and the bottom line up with the text */
@media (min-width: 901px) {
  .about-grid { align-items: stretch; }
  .portrait { position: relative; min-height: 320px; }
  .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 24%; }
}

/* header on phones (8.10): four links fit on one line */
@media (max-width: 560px) { .site-header .container { gap: 12px; } .site-header .nav { gap: 12px; } .site-header .nav a { white-space: nowrap; font-size: 13px; } }

/* scroll up link (8.10): centered above the footer on long pages, same look as the footer links */
html { scroll-behavior: smooth; }
.scroll-up { margin: 0; padding: var(--s8) 0 var(--s6); text-align: center; }
.scroll-up a { display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none; color: var(--color-content-muted); transition: color 160ms var(--ease-out); }
.scroll-up a:hover, .scroll-up a:focus-visible { color: var(--color-accent-lime); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-up a { transition: none; } }

/* header: black Copy email pill instead of Contact (8.10). Hover and the copied state: transparent with a dark outline. */
.site-header .nav { align-items: center; }
.site-header .copy-email { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; font: 500 var(--t-14)/1 var(--font-body); color: var(--color-content-inverse); background: var(--color-content-primary); border: 1px solid var(--color-content-primary); border-radius: 999px; padding: 12px 20px; cursor: pointer; transition: background 160ms var(--ease-out), color 160ms var(--ease-out); }
.site-header .copy-email span { display: inline-flex; align-items: center; gap: 6px; }
.site-header .copy-email:hover, .site-header .copy-email:focus-visible, .site-header .copy-email.is-copied { background: transparent; color: var(--color-content-primary); }
.site-header .nav-contact { display: none; }
@media (max-width: 560px) { .site-header .copy-email { display: none; } .site-header .nav-contact { display: inline; } }
@media (prefers-reduced-motion: reduce) { .site-header .copy-email { transition: none; } }

/* header logo as initials (8.10, her words: probably just YS in the logo); the footer keeps the full name */
.site-header .brand { font: 600 var(--t-20)/1 var(--font-head); letter-spacing: -0.02em; }
/* header logo = the favicon's drawn Cyrillic Yu, same strokes (13.10, her request: Yu instead of YS); sized in em so it follows the logo size */
.site-header .brand-mark { display: block; height: 0.85em; width: auto; overflow: visible; }

/* header type bigger to balance the black button (8.10, her reference): links and button 16px, logo 28px; smaller on phones */
@media (min-width: 561px) {
  .site-header .nav a { font-size: var(--t-16); }
  .site-header .copy-email { font-size: var(--t-16); padding: 14px 24px; min-width: 136px; }
  .site-header .brand { font-size: var(--t-28); }
}
@media (min-width: 561px) and (max-width: 760px) { .site-header .nav { gap: var(--s2); } .site-header .copy-email { padding: 12px 16px; min-width: 0; } }

/* header (8.10, her call): no separator line, and it scrolls away with the page instead of staying on top. The side navigation keeps its own sticky place at the top of the screen. */
.site-header { position: static; border-bottom: 0; background: var(--color-surface-page); backdrop-filter: none; -webkit-backdrop-filter: none; }
.side { top: var(--s3); }
.case-main > section { scroll-margin-top: var(--s3); }

/* header slides (8.10): sticky, but hidden while scrolling down; scrolling up brings it back with a soft slide. No separator line. */
.site-header { position: sticky; top: 0; z-index: 10; transform: none; transition: transform 260ms var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
.side { top: calc(var(--header-h) + var(--s3)); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* buttons (8.10, her note): narrower and a little chunkier. Copy email: 17px and 18px padding, no minimum width, about 120 by 52. */
@media (min-width: 761px) { .site-header .copy-email { padding: 17px 18px; min-width: 0; } }
/* like her reference (8.10): the button text is semibold with tight spacing, the button about 48px tall; the link of the current page is semibold too */
@media (min-width: 561px) { .site-header .copy-email { font-weight: 600; letter-spacing: -0.01em; } .site-header .nav a[aria-current="page"] { font-weight: 600; color: var(--color-content-primary); } }
@media (min-width: 761px) { .site-header .copy-email { padding: 15px 20px; } }

/* header breathing room (8.10, her note): taller header with more white above the logo and the links, on every page. Phones keep the compact one. */
@media (min-width: 561px) { :root { --header-h: 96px; } .site-header { padding-top: 16px; } }

/* footer email (8.10, her note): on hover a fine line under the address, in the dark grey of the address, besides the lime color */
.site-footer .footer-contact .mail { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out); }
.site-footer .footer-contact .mail:hover, .site-footer .footer-contact .mail:focus-visible { text-decoration-color: var(--color-content-soft); }
@media (prefers-reduced-motion: reduce) { .site-footer .footer-contact .mail { transition: none; } }

/* footer email line (8.10, her note): the line is drawn from left to right on hover, 320ms, 1px, dark grey; it replaces the text-decoration version above */
.site-footer .footer-contact .mail { display: inline-block; justify-self: start; width: fit-content; text-decoration: none; padding-bottom: 3px; background: linear-gradient(var(--color-content-soft), var(--color-content-soft)) left bottom / 0 1px no-repeat; transition: color 160ms var(--ease-out), background-size 320ms var(--ease-out); }
.site-footer .footer-contact .mail:hover, .site-footer .footer-contact .mail:focus-visible { text-decoration: none; background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .site-footer .footer-contact .mail { transition: none; } }

/* More projects (14.10): two relevant cases and a way back to all work, after the case body and before the footer.
   Same cover treatment as the home "Other projects" cards (16:9, radius, soft shadow). */
.next-cases { padding: 0 0 var(--s8); }
.next-h { margin: 0 0 var(--s4); }
.next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.next-card { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
.next-media { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b0d12; box-shadow: var(--shadow-card); margin-bottom: var(--s2); }
.next-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.next-card:hover .next-media img { transform: scale(1.015); }
.next-meta { display: block; margin: 0 0 4px; font-size: var(--t-14); color: var(--color-content-secondary); }
.next-title { display: block; font: 500 var(--t-20)/1.3 var(--font-head); max-width: 28ch; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 160ms var(--ease-out); }
.next-card:hover .next-title { text-decoration-color: currentColor; }
.next-card:focus-visible { outline: 2px solid var(--color-content-primary); outline-offset: 4px; }
.next-all { display: block; padding: var(--s3); border-radius: var(--radius-s); background: var(--color-surface-subtle); color: var(--color-content-secondary); text-align: center; text-decoration: none; font: 500 var(--t-14)/1.4 var(--font-body); transition: background 160ms var(--ease-out), color 160ms var(--ease-out); }
.next-all:hover, .next-all:focus-visible { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }
@media (max-width: 700px) { .next-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .next-media img { transition: none; } .next-card:hover .next-media img { transform: none; } }

/* Readiness pass (14.10) */
/* Text for screen readers only (the home page work heading). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Small phones (320 to 360 px): the lime marker word may wrap, it was wider than the screen. */
@media (max-width: 360px) {
  mark { white-space: normal; position: static; background: var(--color-accent-lime); border-radius: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  mark::before { display: none; }
}
/* Bigger touch area for the logo and the footer credit link, same look (the visible size does not change). */
.site-header .brand, .footer-credit a { position: relative; }
.site-header .brand::after { content: ""; position: absolute; inset: -14px -12px; }
.footer-credit a::after { content: ""; position: absolute; inset: -12px -6px; }

/* Skip link (14.10): appears only when the keyboard focuses it, first thing on every page. */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--color-content-primary); color: var(--color-content-inverse); font: 500 var(--t-14)/1 var(--font-body); text-decoration: none; transition: top 160ms var(--ease-out); }
.skip-link:focus, .skip-link:focus-visible { top: 16px; outline: 2px solid var(--color-accent-lime); outline-offset: 2px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Tap areas on phones (15.10): footer links, Scroll up and header links reach about 44px tall; padding and negative margin cancel out, so nothing moves visually. */
@media (max-width: 900px) {
  .site-footer .footer-nav a, .site-footer .footer-contact .mail { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .scroll-up a { padding: 9px 12px; margin: -9px -12px; }
  .site-header .nav a { padding-top: 12px; padding-bottom: 12px; margin: -4px 0; }
}

/* Phone menu (15.10, her reference): two bars that turn into an X; the links open downward and push the page. Everything is prefixed .has-menu, which menu.js adds; without JavaScript the old inline links stay. Phones only; the desktop header is unchanged. */
.nav-toggle { display: none; }
@media (max-width: 560px) {
  .has-menu .site-header { height: auto; }
  .has-menu .site-header .container { height: auto; flex-wrap: wrap; row-gap: 0; }
  .has-menu .site-header .brand { height: var(--header-h); display: flex; align-items: center; }
  .has-menu .nav-toggle { display: block; position: relative; width: 44px; height: var(--header-h); order: -1; margin-left: -11px; padding: 0; border: 0; background: none; color: var(--color-content-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nav-toggle .bar { position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--ease-out); }
  .nav-toggle .bar:first-child { transform: translateY(-4px); }
  .nav-toggle .bar:last-child { transform: translateY(4px); }
  .menu-open .nav-toggle .bar:first-child { transform: rotate(45deg); }
  .menu-open .nav-toggle .bar:last-child { transform: rotate(-45deg); }
  .has-menu .site-header .nav { flex: 0 0 100%; flex-direction: column; align-items: center; gap: var(--s1); max-height: 0; padding: 0; overflow: hidden; visibility: hidden; transition: max-height 300ms var(--ease-out), padding 300ms var(--ease-out), visibility 0s linear 300ms; }
  .has-menu .site-header.menu-open .nav { max-height: 360px; padding-bottom: var(--s4); visibility: visible; transition: max-height 300ms var(--ease-out), padding 300ms var(--ease-out), visibility 0s; }
  .has-menu .site-header .nav a { font-size: var(--t-16); }
  .has-menu .site-header .nav-contact { display: none; }
  .has-menu .site-header .copy-email { display: inline-flex; margin-top: var(--s1); font-size: var(--t-16); font-weight: 600; padding: 14px 24px; min-width: 136px; }
  .site-header.menu-open.is-hidden { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle .bar, .has-menu .site-header .nav { transition: none !important; } }

/* Side margins on phones (15.10, her reference: about 24px, then "still too small" twice): the page gutter is 32px on every phone width (up to 700px). Before: 16px, then 28px up to 480px only, so wider phones kept 24px. */
@media (max-width: 700px) { :root { --gutter: 32px; } }

/* Header logo on phones (15.10, her note: too small): same 28px size as on the desktop header. */
@media (max-width: 560px) { .site-header .brand { font-size: var(--t-28); } }

/* Reading text on phones (15.10, her reference body is 16px): paragraphs, lists and card text that were 14px become 16px. Labels, eyebrows, pills and captions stay 14px. */
@media (max-width: 560px) {
  .triad p, .callout .lead-in, .callout ul, .tree .qs, .ropts, .radd, .impact .was { font-size: var(--t-16); }
}

/* Case titles on phones (15.10, her reference is 32px): the hero title drops from 40px to 32px. */
@media (max-width: 560px) { .case-hero h1 { font-size: 32px; line-height: 1.2; } }

/* Case hero on phones (15.10, her reference): results stacked without rules, a bigger result line, and a tighter top so the image starts higher. */
@media (max-width: 560px) {
  .case-hero { padding-top: var(--s4); }
  .case-hero .hero-lead { margin-bottom: var(--s4); }
  .impact { gap: var(--s3); }
  .impact li { border-top: 0; padding-top: 0; gap: 2px; }
  .impact strong { font-size: var(--t-20); line-height: 1.3; }
  .fig.hero-fig { margin: var(--s4) 0; }
}

/* Results cards on phones (15.10, her reference): less inner padding so the text gets the width, a bigger emoji and a 24px title. */
@media (max-width: 560px) {
  .row { padding: var(--s3); gap: var(--s2); }
  .row .em { font-size: 32px; margin-bottom: var(--s2); }
  .row h3 { font-size: 24px; line-height: 1.25; }
}

/* End of a case on phones (15.10, her reference): one next case, then one row with "Scroll up" on the left and "View all work" as an outlined pill on the right. The separate Scroll up line is hidden on pages that have this row. */
.next-up, .next-btn { display: none; }
@media (max-width: 700px) {
  .next-cases { padding-bottom: var(--s4); }
  .next-cases .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .next-h, .next-grid { flex: 0 0 100%; }
  .next-grid .next-card:nth-child(n+2) { display: none; }
  .next-up { display: inline-flex; align-items: center; gap: var(--s1); padding: 12px 0; font: 500 var(--t-14)/1.4 var(--font-body); color: var(--color-content-primary); text-decoration: none; }
  .next-all { display: none; }
  .next-btn { display: inline-block; padding: 12px 24px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--color-content-primary); color: var(--color-content-primary); text-decoration: none; font: 500 var(--t-16)/1.4 var(--font-head); }
  body:has(.next-cases) .scroll-up { display: none; }
}

/* How risk is built (15.10, her pick, option 3): Threat and Exposure no longer vanish on the grey card. Exposure and its two leaves are lime, tying the tree to the lime formula below; Threat is white with a dark outline. */
.tree .thr .node { background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-content-primary); }
.tree .exp .node, .tree .exp .leaf { background: var(--color-accent-lime); box-shadow: none; color: var(--color-accent-on-lime); }
.tree .exp .node { font-weight: 600; }

/* Problem / Decision / Why labels (15.10, her pick, option 2): a real 20px heading in the heading font instead of 14px running-text weight. Phones and desktop. */
.triad .label { font: 600 var(--t-20)/1.3 var(--font-head); letter-spacing: -0.01em; margin-bottom: var(--s1); }