/* Jack Zvaigzne website.
   Layout: Müller-Brockmann 12-column grid, 24px gutter, 64px margin (32 tablet, 16 phone).
   Vertical rhythm in 8px steps, sections 96px apart. One typeface at one weight; hierarchy from size.
   Colours are the design system tokens (Paper theme). Red is the signal dot only, once per page. */

@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --surface: #f0f1ef; --surface-inverse: #1b1d1f;
  --ink: #1b1d1f; --ink-inverse: #f0f1ef; --ink-muted: #5e6367; --ink-muted-inverse: #8b9094;
  --line: #d5d8d9; --line-inverse: #3a3e41; --line-strong: #7d8286;
  --grid: rgba(27, 29, 31, .06);
  --signal: #e8200c;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;
  --g: 24px; --m: 64px; --cols: 12;
  color-scheme: light;
}
@media (max-width: 1000px) { :root { --m: 32px; --cols: 6; } }
@media (max-width: 640px) { :root { --m: 16px; --g: 16px; --cols: 4; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
ul, ol { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.u:hover { text-decoration-thickness: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--m); top: 8px; background: var(--surface); padding: 8px; z-index: 10; }

/* Grid */
.page { position: relative; overflow-x: clip; }
.page::before {
  content: ""; position: absolute; inset: 0 var(--m); pointer-events: none; z-index: 0;
  --cw: calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols));
  background-image: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc(var(--cw) - 1px), var(--grid) calc(var(--cw) - 1px) var(--cw), transparent var(--cw) calc(var(--cw) + var(--g)));
}
.page > * { position: relative; z-index: 1; }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); }
.cols > * { min-width: 0; }
.rule { height: 1px; background: var(--line); margin-inline: var(--m); }
.rule-ink { height: 1px; background: var(--ink); margin-inline: var(--m); }

/* Type */
.label { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.data { font-family: var(--mono); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.display { font-size: clamp(36px, 5vw, 72px); line-height: .95; letter-spacing: -.045em; text-wrap: wrap; }
.h1 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: -.03em; }
.h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.125; letter-spacing: -.02em; }
.h3 { font-size: 20px; line-height: 28px; letter-spacing: -.01em; }
.lead { font-size: 20px; line-height: 28px; letter-spacing: -.01em; }
.small { font-size: 14px; line-height: 20px; }
.muted { color: var(--ink-muted); }
.dash li { display: grid; grid-template-columns: 1.25em 1fr; }
.dash li::before { content: "\2013"; }

/* Header bar: ink rule on top, lockup left, navigation right */
.bar { padding-top: 24px; }
.bar .in { grid-column: 1 / -1; border-top: 1px solid var(--ink); padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lockup img { height: 14px; width: auto; }
.nav { display: flex; gap: 48px; }
.nav a { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.lockup { flex: none; }
/* Rev J: on phones the nav takes its own row under the lockup, spread across the full width, so Contact is never clipped and the logo keeps its size. */
@media (max-width: 640px) {
  .bar .in { flex-wrap: wrap; row-gap: 12px; }
  .lockup img { height: 12px; }
  .nav { flex: 1 0 100%; justify-content: space-between; gap: 12px; }
}

/* Stage glyph and claim labels */
.glyph { display: inline-block; flex: none; vertical-align: middle; }
.glyph .t { fill: var(--line); } .glyph .f { fill: var(--ink); }
.inverse .glyph .t { fill: var(--line-inverse); } .inverse .glyph .f { fill: var(--ink-inverse); }
.state { display: inline-flex; align-items: center; gap: 8px; }
/* Symbols: next to a word, in its colour, half a symbol's space between */
.sym { display: inline-block; flex: none; vertical-align: middle; color: currentColor; }
.u.ext + .sym { margin-left: 4px; vertical-align: -1px; }
.contact .mail { display: flex; align-items: center; gap: 12px; }
.contact .mail .sym { flex: none; }
.sig { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); flex: none; }

/* Home hero */
.hero { padding-top: 120px; }
.hero .eyebrow { grid-column: 1 / -1; margin-bottom: 16px; }
.hero h1 { grid-column: 1 / span 11; }
.hero .belief { grid-column: 1 / span 6; margin-top: 48px; display: grid; gap: 8px; }
.hero .belief p:first-child { font-size: 22px; line-height: 30px; letter-spacing: -.01em; }
.hero .belief p + p { color: var(--ink-muted); }
.hero .sector { grid-column: 8 / span 4; margin-top: 48px; color: var(--ink-muted); align-self: start; }
.hero h1 + .sector { grid-column: 1 / span 6; font-size: 22px; line-height: 30px; letter-spacing: -.01em; color: var(--ink); }
.hero .hero-cta { grid-column: 1 / -1; margin-top: 48px; font-size: 20px; line-height: 28px; letter-spacing: -.01em; }

/* Sections */
.sec { padding-top: 96px; }
.sec-top { row-gap: 16px; padding-bottom: 32px; }
.sec-top .label { grid-column: 1 / span 3; padding-top: 10px; }
.sec-top h2 { grid-column: 4 / span 8; }

/* Work tiles */
.tiles { row-gap: 48px; }
.tile { grid-column: span 6; display: flex; flex-direction: column; gap: 12px; }
.tile .img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-inverse); }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.tile .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--ink); padding-top: 8px; }
.tile .meta .h3 { font-size: 24px; letter-spacing: -.02em; }
.tile p.small { max-width: 44ch; }
.tile .tags { display: flex; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.tile .tags .label { color: var(--ink); }
.tile .img.empty { background: none; }

/* Services */
.caps { row-gap: 8px; padding-bottom: 48px; }
.caps li { grid-column: span 3; border-top: 1px solid var(--line); padding-top: 8px; }
.pkgs { row-gap: 48px; }
.pkg { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--ink); padding-top: 12px; }
.pkg .h3 { min-height: 84px; }
.pkg ul { display: grid; gap: 4px; color: var(--ink-muted); }
.note { grid-column: 4 / span 6; margin-top: 32px; }

/* Process rows */
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding-block: 16px; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows .n { grid-column: 1 / span 3; display: flex; align-items: center; gap: 12px; }
.rows .d { grid-column: 4 / span 6; }
.rows .o { grid-column: 10 / span 3; text-align: right; }
.ethos { row-gap: 24px; padding-top: 48px; }
.ethos .h2 { grid-column: 4 / span 6; }
.ethos .small { grid-column: 4 / span 4; color: var(--ink-muted); }
.ethos .ailine { grid-column: 4 / span 4; color: var(--ink); margin-top: -16px; }
.h1big { grid-column: 1 / span 10; font-size: clamp(40px, 5.6vw, 80px); line-height: .95; letter-spacing: -.045em; }
.aishort { row-gap: 24px; }
.aishort .t { grid-column: 4 / span 5; } .aishort .c { grid-column: span 3; display: grid; gap: 8px; align-content: start; } .aishort .c:nth-of-type(1) { grid-column: 4 / span 3; } .aishort .t2 { grid-column: 4 / span 6; }
.note-sec .note-t { grid-column: 4 / span 7; }
.who { margin: 8px 0 0; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 8px; }
.who div { display: grid; gap: 2px; } .who dd { margin: 0; font-size: 14px; line-height: 20px; }
.ailist li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding-block: 16px; border-top: 1px solid var(--line); }
.ailist li:last-child { border-bottom: 1px solid var(--line); }
.ailist .h3 { grid-column: 1 / span 5; } .ailist .small { grid-column: 6 / span 6; color: var(--ink-muted); }
.commit { grid-column: 4 / span 9; }
.commit li { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding-block: 16px; border-top: 1px solid var(--line-inverse); }
.commit .label { grid-column: span 1; } .commit .h3 { grid-column: span 3; } .commit .small { grid-column: span 5; color: var(--ink-muted-inverse); }

/* Inverse band */
.inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
.inverse .label { color: var(--ink-muted-inverse); }
.band { margin-top: 96px; padding-block: 96px; }
.band .sec { padding-top: 0; }
.wont li { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -.02em; padding-block: 12px; border-top: 1px solid var(--line-inverse); }
.wont { grid-column: 4 / span 9; }

/* Credentials */
.creds li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding-block: 12px; border-top: 1px solid var(--line); }
.creds li:last-child { border-bottom: 1px solid var(--line); }
.creds .p { grid-column: 1 / span 6; font-size: 20px; line-height: 28px; letter-spacing: -.015em; }
.creds .c { grid-column: 7 / span 3; }
.creds .s { grid-column: 10 / span 3; text-align: right; }
.creds .dev .p { color: var(--ink-muted); }

/* Contact */
.contact { padding-block: 96px; row-gap: 32px; }
.contact .label.k { grid-column: 1 / span 3; padding-top: 16px; }
.contact .h1 { grid-column: 4 / span 9; }
.contact .mail { grid-column: 4 / span 9; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.contact .cta { grid-column: 4 / span 9; margin-bottom: -24px; }
.contact ul { grid-column: 4 / span 5; display: grid; gap: 4px; color: var(--ink-muted); }
.contact .avail { grid-column: 10 / span 3; align-self: end; justify-self: end; }

/* Footer: site left, n / N right */
.foot { padding-block: 0 32px; }
.foot .in { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 8px; }

/* Project page: title, title block, image, story */
.ptitle { padding-top: 96px; padding-bottom: 32px; }
.ptitle h1 { grid-column: 1 / span 10; font-size: clamp(48px, 7.8vw, 112px); line-height: .9; letter-spacing: -.05em; }
.tb { row-gap: 16px; padding-top: 8px; }
.tb > div { grid-column: span 3; display: flex; flex-direction: column; gap: 4px; }
.shot { position: relative; overflow: hidden; background: var(--surface-inverse); }
.shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.shot .credit { position: absolute; left: 16px; bottom: 12px; color: rgba(240, 241, 239, .75); }
.lead-img { margin: 48px var(--m) 0; aspect-ratio: 2 / 1; }
.lead-img .word { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-inverse); font-size: clamp(32px, 4.5vw, 64px); letter-spacing: -.035em; mix-blend-mode: difference; }
.story { padding-top: 48px; row-gap: 32px; }
.story > div { grid-column: span 3; display: flex; flex-direction: column; gap: 8px; }
.story p.t { font-size: 15px; line-height: 24px; }
.claims { border-top: 1px solid var(--line); margin-top: 8px; }
.claims li { padding-block: 8px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; line-height: 20px; }

.psec { padding-top: 96px; row-gap: 24px; }
.psec .head { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 8px; }
.psec .head p.small { color: var(--ink-muted); }
.inverse .psec .head p.small { color: var(--ink-muted-inverse); }
.psec .body { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--g); row-gap: 32px; }
.psec .body > * { min-width: 0; }
.s9 { grid-column: span 9; } .s6 { grid-column: span 6; } .s5 { grid-column: span 5; } .s4 { grid-column: span 4; } .s3 { grid-column: span 3; }
figcaption { margin-top: 8px; }
.band.p { margin-top: 96px; padding-block: 0 96px; }
.ph {
  border: 1px dashed var(--line-strong); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  background-image: radial-gradient(circle, var(--grid) 1.2px, transparent 1.4px); background-size: 24px 24px; background-position: 4px 4px;
}
.inverse .ph { --grid: rgba(240, 241, 239, .12); }
.ph .what { font-size: 18px; line-height: 24px; letter-spacing: -.015em; max-width: 30ch; }

.next { padding-block: 96px 48px; row-gap: 16px; align-items: end; }
.next .label { grid-column: 1 / span 3; }
.next a { grid-column: 4 / span 9; font-size: clamp(32px, 4.4vw, 64px); line-height: .95; letter-spacing: -.04em; }
.next a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; }

/* About */
.portrait { padding-top: 48px; }
.portrait > * { grid-column: 1 / span 4; }
@media (max-width: 640px) { .portrait > * { grid-column: 1 / -1; } }
.about-intro { padding-top: 48px; row-gap: 24px; }
.about-intro .lead { grid-column: 1 / span 8; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -.02em; }
.about-intro .t { grid-column: span 4; }
.about-intro .t:nth-of-type(2) { grid-column: 1 / span 4; }

/* 404 */
.lost { padding-block: 120px 96px; row-gap: 24px; }
.lost h1 { grid-column: 1 / span 10; }
.lost p { grid-column: 1 / span 6; }

@media (max-width: 1000px) {
  .hero h1, .ptitle h1 { grid-column: 1 / -1; }
  .hero .belief { grid-column: 1 / span 9; }
  .hero .sector { grid-column: 1 / span 9; margin-top: 24px; }
  .sec-top .label, .sec-top h2, .note, .ethos .h2, .ethos .small, .wont, .contact .label.k, .contact .h1, .contact .mail, .contact .cta, .contact ul, .contact .avail, .ethos .ailine, .commit { grid-column: 1 / -1; justify-self: start; }
  .ailist .h3, .ailist .small { grid-column: 1 / -1; } .commit .label { grid-column: 1 / -1; } .commit .h3 { grid-column: 1 / span 4; } .commit .small { grid-column: 5 / span 5; }
  .ptitle .h1big { grid-column: 1 / -1; }
  .tile, .tb > div, .caps li, .story > div { grid-column: span 6; }
  .pkg { grid-column: 1 / -1; } .pkg .h3 { min-height: 0; }
  .rows .n { grid-column: 1 / span 4; } .rows .d { grid-column: 5 / span 8; } .rows .o { grid-column: 5 / span 8; text-align: left; margin-top: 4px; }
  .creds .p { grid-column: 1 / span 7; } .creds .c { grid-column: 8 / span 5; } .creds .s { grid-column: 8 / span 5; text-align: left; }
  .aishort .t, .aishort .t2, .aishort .c, .aishort .c:nth-of-type(1), .note-sec .note-t, .psec .head, .psec .body, .next .label, .next a { grid-column: 1 / -1; }
  .about-intro .lead, .about-intro .t, .about-intro .t:nth-of-type(2) { grid-column: 1 / -1; }
  .lost h1, .lost p { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero { padding-top: 72px; }
  .tile, .caps li, .story > div { grid-column: 1 / -1; }
  .s6, .s5, .s4, .s3 { grid-column: span 9; }
  .rows .n, .rows .d, .rows .o { grid-column: 1 / -1; }
  .rows .d { margin-top: 8px; }
  .creds .p, .creds .c, .creds .s { grid-column: 1 / -1; }
  .creds .c { margin-top: 4px; }
}

/* Overview / Detail (Rev E): a two-way switch under the project facts. Hidden until src/motion.js runs, so without script everything shows. */
.layers { display: none; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; padding-block: 32px 8px; }
.layers.on { display: flex; }
.layers .sw { display: inline-flex; border: 1px solid var(--ink); }
.layers button { font: inherit; background: none; color: var(--ink); border: 0; padding: 8px 20px; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.layers button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); }
.layers button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.layers .hint { flex-basis: 100%; text-align: center; }
.overview main > [data-layer="detail"] { display: none; }
/* Confidential tile (NDA work): the name and year only, no image and no link. */
.tile.conf .img.empty { display: grid; place-items: center; border: 1px dashed var(--line); }

/* Then-and-now table and product passport */
.then, .dpp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.then th, .then td, .dpp th, .dpp td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.then thead th, .dpp thead th { border-bottom: 1px solid var(--ink); padding-top: 0; }
.then tbody th { width: 22%; }
.then td { width: 39%; }
.dpp.kv tbody th { width: 34%; color: var(--ink-muted); }
.dpp td, .dpp th { overflow-wrap: anywhere; }
.tblw { overflow-x: auto; }
.dpp.mat td:nth-child(2), .dpp.mat td:nth-child(4) { white-space: nowrap; }
.pp-k { grid-column: 1 / -1; margin-bottom: 8px; }
.pp-status { padding-top: 24px; }
.pp-status p { grid-column: 4 / span 7; border-left: 2px solid var(--ink); padding-left: 12px; }
.mono { font-family: var(--mono); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(140px, 3fr) 5fr 48px; gap: 16px; align-items: center; }
.bars .b { height: 12px; display: block; }
.bars .b i { display: block; height: 100%; background: var(--ink); }
.bars .num { text-align: right; font-variant-numeric: tabular-nums; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 40px 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.ledger { margin: 0; padding: 0; list-style: none; }
.ledger li { display: grid; grid-template-columns: 96px 110px 1fr 120px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ledger .hash { text-align: right; color: var(--ink-muted); }
.ledger .plan > :not(.state) { color: var(--ink-muted); }
@media (max-width: 1000px) {
  .pp-status p { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dpp.mat { min-width: 620px; }
  .ledger li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .ledger li > .small { grid-column: 1 / -1; }
  .ledger .hash { grid-column: 1 / -1; text-align: left; }
  .bars li { grid-template-columns: 1fr 40px; row-gap: 4px; }
  .bars .b { grid-column: 1 / -1; grid-row: 2; }
  .dpp.kv tbody th, .then tbody th { width: auto; }
  .dpp.kv tr, .then tbody tr { display: grid; grid-template-columns: 1fr; }
  .dpp.kv th, .dpp.kv td { padding-right: 0; }
  .dpp.kv tbody th { border-bottom: 0; padding-bottom: 0; }
  .then thead { display: none; }
  .then tbody tr { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .then tbody th { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
}

/* Footer link and privacy notice */
.foot .fl { display: flex; gap: 24px; }
.foot a[aria-current] { text-decoration: none; }
.prose > * + * { margin-top: 16px; }
.psec .prose { max-width: 68ch; }
.prose strong { font-weight: 500; }
.prose .dash { margin: 0; padding: 0; list-style: none; }

/* D3O highlights */
.sec-top .more { grid-column: 4 / span 9; margin-top: 8px; }
.hls { padding-top: 0; }
.hl .meta h2 { margin: 0; }
@media (max-width: 1000px) { .sec-top .more { grid-column: 1 / -1; } }
/* D3O product pages: editorial sequence */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ed { margin: 0; }
.ed .shot { position: relative; overflow: hidden; background: var(--surface-inverse); }
.ed .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed .ph { height: 100%; box-sizing: border-box; background-color: var(--surface); }
.ed.hero .shot .word { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 var(--m) 40px; color: var(--ink-inverse); font-size: clamp(32px, 5vw, 72px); line-height: .95; letter-spacing: -.045em; background: linear-gradient(to top, rgba(14, 15, 16, .72) 0%, rgba(14, 15, 16, .38) 30%, rgba(14, 15, 16, 0) 60%); text-shadow: 0 1px 24px rgba(0, 0, 0, .3); }
/* Titles over a photo sit on a dark scrim so they read on busy images; 'ink' is for plain light grounds. */
.ed.hero .ph + .word, .ed.hero .word.ink { color: var(--ink); background: none; text-shadow: none; }
@media (max-width: 640px) { .ed.hero .shot { aspect-ratio: 4 / 5 !important; } .ed.hero .shot .word { padding-bottom: 16px; } }
.ed.hero .ph .label:last-child { visibility: hidden; }
.ed.hero .shot .credit { left: auto; right: var(--m); bottom: 48px; color: rgba(240, 241, 239, .8); }
@media (max-width: 640px) { .ed.hero .shot .credit { bottom: 20px; } }
.ed.full, .ed-pair, .ed.inset { margin: 96px var(--m) 0; }
.ed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-top: var(--g); }
.ed.inset { margin-left: calc(var(--m) + (100% - 2 * var(--m) + var(--g)) / 3); }
.ed-intro { padding-block: 64px 0; }
.ed-t { margin-top: 96px; }
.ed-p { font-size: clamp(20px, 2vw, 26px); line-height: 1.35; letter-spacing: -.015em; max-width: 36ch; }
.ed-foot { margin-top: 48px; row-gap: 8px; }
.ed-foot > * { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .ed.full, .ed.inset { margin: 48px var(--m) 0; }
  .ed-pair { grid-template-columns: 1fr; margin-inline: var(--m); }
  .ed-t { margin-top: 48px; }
}
.psec .body > .ed-links { grid-column: 1 / -1; margin-top: -16px; }

/* FAQ: question left, answer right, hairline between rows (same grid as .rows) */
.faq > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding-block: 20px; border-top: 1px solid var(--line); }
.faq > div:last-child { border-bottom: 1px solid var(--line); }
.faq dt { grid-column: 1 / span 5; }
.faq dd { grid-column: 7 / span 6; margin: 0; }
.contact .faqlink { grid-column: 4 / span 5; }
@media (max-width: 1000px) { .faq dt, .faq dd, .contact .faqlink { grid-column: 1 / -1; } .faq dd { margin-top: 8px; } }
.contact .based { grid-column: 4 / span 5; }
@media (max-width: 1000px) { .contact .based { grid-column: 1 / -1; } }

/* About: process shots, skills, experience, more (21 Oct) */
.proc { padding-top: 48px; row-gap: var(--g); }
.proc > * { grid-column: span 4; }
.proc .shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.skills { row-gap: 40px; }
.skills .c { grid-column: span 3; display: grid; gap: 8px; align-content: start; }
.skills .c:nth-child(3n+1) { grid-column: 4 / span 3; }
.exp-note { grid-column: 4 / span 6; padding-top: 16px; }
.sec-top .more-links { grid-column: 4 / span 9; display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 8px; }
@media (max-width: 1000px) {
  .skills .c, .skills .c:nth-child(3n+1) { grid-column: span 6; }
  .exp-note, .sec-top .more-links { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .proc > * { grid-column: span 6; }
  .skills .c, .skills .c:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* Motion (Rev D, 22 Oct). Hard cuts only, after the guidebook's Cuts rule: no fades, dissolves, zooms or easing.
   Rev G: M3 tile hover and M4 2020 / 2026 cut only. M1 load, M2 scroll reveals and M5 stepped glyphs were removed; content and glyphs show at once. */

/* M3: on hover or keyboard focus the image goes to full colour, crop marks snap on and the name appears over it.
   The overlay inverts against the image, so it always reads as black or white. */
.tile .img { position: relative; }
.tile .crop, .tile .word { position: absolute; inset: 0; color: var(--ink-inverse); mix-blend-mode: difference; pointer-events: none; visibility: hidden; }
.tile .crop.ink, .tile .word.ink { color: var(--ink); mix-blend-mode: normal; }
.tile .crop.paper, .tile .word.paper { color: var(--ink-inverse); mix-blend-mode: normal; }
.tile .word { display: grid; place-items: center; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; letter-spacing: -.045em; }
.tile .crop i { position: absolute; width: 18px; height: 18px; border: 0 solid currentColor; }
.tile .crop i:nth-child(1) { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.tile .crop i:nth-child(2) { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.tile .crop i:nth-child(3) { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.tile .crop i:nth-child(4) { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
@media (hover: hover) {
  .tile:hover .img img { filter: none; }
  .tile:hover .crop, .tile:hover .word { visibility: visible; }
}
.tile:focus-visible .img img { filter: none; }
.tile:focus-visible .crop, .tile:focus-visible .word { visibility: visible; }

/* M4: two images of the same view; hover (or tap, or Enter) cuts to the second. */
.cut { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cut img { position: absolute; inset: 0; }
.cut .b, .cut .y2 { visibility: hidden; }
.cut .yr { position: absolute; top: 12px; left: 12px; display: grid; background: var(--ink); color: var(--ink-inverse); padding: 2px 8px; }
.cut .yr > span { grid-area: 1 / 1; }
.cut[aria-pressed="true"] .b, .cut[aria-pressed="true"] .y2 { visibility: visible; }
.cut[aria-pressed="true"] .y1 { visibility: hidden; }
@media (hover: hover) {
  .cut:hover .b, .cut:hover .y2 { visibility: visible; }
  .cut:hover .y1 { visibility: hidden; }
}
.cut:focus-visible { outline: 2px solid var(--ink-inverse); outline-offset: -4px; }

/* M1 load and M2 scroll reveals were removed in Rev G (Jack, 30 Oct): holding content back read as a slow page load.
   Everything is on screen from the first frame. M3 tile hover, M4 2020 / 2026 cut and the Overview / Detail switch stay. */

/* EN 1621 primer (D3O page) */
.primer .dia { padding-top: 32px; row-gap: 24px; }
.primer .dia figure { grid-column: span 6; margin: 0; }
.primer .dia svg { display: block; width: 100%; height: auto; }
.primer .steps4 { padding-top: 32px; row-gap: 32px; }
.primer .steps4 > div { grid-column: span 3; border-top: 1px solid var(--ink); padding-top: 12px; }
.primer .steps4 .h3 { margin: 8px 0 6px; }
@media (max-width: 1000px) { .primer .dia figure { grid-column: 1 / -1; } .primer .steps4 > div { grid-column: span 6; } }
@media (max-width: 640px) { .primer .steps4 > div { grid-column: 1 / -1; } }

/* Rev F, after Blond's top-centred switch: the Overview / Detail switch stays pinned top centre while the project scrolls, so the depth can change from anywhere on the page.
   Paper behind it and a hairline under it; it cuts in with no fade. The hint stays where it was and scrolls away. */
.layers { position: sticky; top: 0; z-index: 5; background: var(--surface); padding-block: 12px; border-bottom: 1px solid transparent; }
.layers-hint { display: none; text-align: center; padding-bottom: 8px; }
.layers.on + .layers-hint { display: block; }
.layers.stuck { border-bottom-color: var(--line); }
@media (max-width: 640px) { .layers button { padding: 6px 16px; } }

/* Rev F, after Blond's Detail credits: client, project, year and services in large type, Detail only. Uses the project's capability tags. */
.credit-sec { padding-top: 96px; row-gap: 32px; }
.credit-sec > div { grid-column: span 6; display: flex; flex-direction: column; gap: 8px; }
.credit-sec .label:not(:first-child) { margin-top: 24px; }
.credit-sec ul { display: grid; gap: 0; }
@media (max-width: 640px) { .credit-sec > div { grid-column: 1 / -1; } }

/* Rev F, after Blond's copy buttons: Copy next to the email address. Shown only when the browser can copy. Copies to the visitor's own clipboard; nothing is sent or stored. */
.contact .mail .copy { font: inherit; font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; background: none; color: var(--ink); border: 1px solid var(--ink); padding: 6px 12px; cursor: pointer; flex: none; margin-left: 8px; }
.contact .mail .copy[data-done] { background: var(--ink); color: var(--ink-inverse); }
.contact .mail .copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }