/* ==========================================================================
   PTDA — site.css
   Extracted from the v4 prototype. Layout values that the prototype computed
   in JavaScript on every resize are now custom properties set by media
   queries. The fluid type scale (clamp) is unchanged.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------ */
/* Archivo — variable weight, 400–900 */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* Spectral — 300, 300 italic, 400 */
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/spectral-300-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/spectral-300-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/spectral-300italic-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/spectral-300italic-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/spectral-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/spectral-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Jost — labels, meta, facts, categories, numbers (variable weight 300–500) */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url("../fonts/jost-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url("../fonts/jost-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ----------------------------------------------------- */
:root {
  --red: #E34234;     /* vermilion — the single accent */
  --ink: #101010;
  --mute: #6E7377;
  --hair: #EDEDED;
  --fill: #F0F0F0;
  --ground: #FFFFFF;
  --body-2: #333333;  /* long-form body copy */
  --body-3: #5A5A5A;  /* standfirsts and bios */

  --font-sans: Archivo, system-ui, sans-serif;
  --font-serif: Spectral, Georgia, serif;
  --font-mono: Jost, system-ui, sans-serif;   /* the prototype's label face */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout — desktop (1100px and up) */
  --pad-x: clamp(30px, 3vw, 46px);
  --header-h: 86px;
  --mark-size: 38px;
  --submark-size: 8.4px;
  --hero-h: 100vh;
  --section-top: clamp(56px, 7vw, 108px);
  --page-top: clamp(34px, 4vw, 56px);
  --band-h: clamp(460px, 78vh, 780px);
  --project-hero-h: clamp(560px, 92vh, 940px);
  --essay-hero-h: clamp(420px, 72vh, 720px);
  --map-band-h: clamp(340px, 44vh, 480px);
  --menu-pad-top: 100px;
  --hero-dots-top: 96px;
  --work-gap: clamp(10px, 1vw, 14px);
  --work-max: min(100%, 1080px);
  --contact-rule: 1px solid var(--hair);
  --contact-rule-pad: clamp(22px, 3vw, 52px);
}
@supports (height: 100svh) {
  :root { --hero-h: 100svh; }
}

/* Tablet: 700–1099px */
@media (max-width: 1099px) {
  :root {
    --pad-x: 28px;
    --hero-h: 76vh;
    --project-hero-h: 72vh;
    --work-max: 760px;
  }
  @supports (height: 100svh) { :root { --hero-h: 76svh; --project-hero-h: 72svh; } }
}

/* Phone: under 700px */
@media (max-width: 699px) {
  :root {
    --pad-x: 18px;
    --header-h: 68px;
    --mark-size: 26px;
    --submark-size: 7px;
    --hero-h: 78vh;
    --section-top: 44px;
    --page-top: 30px;
    --band-h: 62vh;
    --project-hero-h: 68vh;
    --essay-hero-h: 56vh;
    --map-band-h: 300px;
    --menu-pad-top: 82px;
    --hero-dots-top: 80px;
    --work-gap: 8px;
    --work-max: 100%;
    --contact-rule: 0;
    --contact-rule-pad: 0;
  }
  @supports (height: 100svh) { :root { --hero-h: 78svh; --band-h: 62svh; --project-hero-h: 68svh; --essay-hero-h: 56svh; } }
}

/* ---------- Base ------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ground); -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); color: var(--ink); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
body.menu-open, body.zoom-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
::selection { background: var(--red); color: #FFFFFF; }
input, textarea, button, select { font: inherit; color: inherit; }
iframe { border: 0; display: block; }
img { display: block; }
h1, h2, h3, p { margin: 0; }
.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; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #FFFFFF; padding: 10px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.skip:focus { left: 8px; }

/* Label style — mono, tracked, uppercase. Sizes set per use. */
.lbl { font-family: var(--font-mono); text-transform: uppercase; }

/* Image frames: every frame declares its ratio; the image covers it. */
.frame { position: relative; overflow: hidden; background: var(--fill); }
.frame > img, .frame > picture, .frame > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame--dark { background: var(--ink); }

/* ---------- Motion (from the prototype) -------------------------------- */
@keyframes ptdaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptdaHeroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ptdaDropIn { from { opacity: 0; transform: translateY(-42px); } to { opacity: 1; transform: none; } }
@keyframes ptdaRiseIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

[data-thumbcap] { opacity: 0; transition: opacity 340ms ease; }
a:hover > [data-thumbcap], a:focus-visible > [data-thumbcap] { opacity: 1; }
[data-thumb] img { transition: transform 900ms var(--ease); will-change: transform; }
a:hover [data-thumb] img { transform: scale(1.055); }
[data-thumb]::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--red); transition: width 620ms var(--ease); z-index: 2; }
a:hover [data-thumb]::after { width: 100%; }
[data-cap] { transition: transform 420ms var(--ease); }
a:hover [data-cap] { transform: translateX(7px); }

[data-heroin] { animation: ptdaHeroIn 820ms var(--ease) 260ms both; }
[data-heroin] [data-heroin-late] { animation: ptdaHeroIn 760ms var(--ease) 620ms both; }
[data-heroin-cap] { animation: ptdaHeroIn 760ms var(--ease) 820ms both; }
[data-drop] { animation: ptdaDropIn 760ms var(--ease) both; }
[data-drop-up] { animation: ptdaRiseIn 700ms var(--ease) both; }
[data-drop]:nth-child(1), [data-drop-up]:nth-child(1) { animation-delay: 0ms; }
[data-drop]:nth-child(2), [data-drop-up]:nth-child(2) { animation-delay: 55ms; }
[data-drop]:nth-child(3), [data-drop-up]:nth-child(3) { animation-delay: 110ms; }
[data-drop]:nth-child(4), [data-drop-up]:nth-child(4) { animation-delay: 165ms; }
[data-drop]:nth-child(5), [data-drop-up]:nth-child(5) { animation-delay: 220ms; }
[data-drop]:nth-child(6), [data-drop-up]:nth-child(6) { animation-delay: 275ms; }
[data-drop]:nth-child(7), [data-drop-up]:nth-child(7) { animation-delay: 330ms; }
[data-drop]:nth-child(8), [data-drop-up]:nth-child(8) { animation-delay: 385ms; }
[data-drop]:nth-child(9), [data-drop-up]:nth-child(9) { animation-delay: 440ms; }
[data-drop]:nth-child(10), [data-drop-up]:nth-child(10) { animation-delay: 495ms; }
[data-drop]:nth-child(11), [data-drop-up]:nth-child(11) { animation-delay: 550ms; }
[data-drop]:nth-child(12), [data-drop-up]:nth-child(12) { animation-delay: 605ms; }
[data-drop]:nth-child(13), [data-drop-up]:nth-child(13) { animation-delay: 660ms; }
[data-drop]:nth-child(14), [data-drop-up]:nth-child(14) { animation-delay: 715ms; }
[data-drop]:nth-child(15), [data-drop-up]:nth-child(15) { animation-delay: 770ms; }
[data-drop]:nth-child(16), [data-drop-up]:nth-child(16) { animation-delay: 825ms; }
[data-drop]:nth-child(17), [data-drop-up]:nth-child(17) { animation-delay: 880ms; }
[data-drop]:nth-child(18), [data-drop-up]:nth-child(18) { animation-delay: 935ms; }
[data-drop]:nth-child(19), [data-drop-up]:nth-child(19) { animation-delay: 990ms; }
[data-drop]:nth-child(20), [data-drop-up]:nth-child(20) { animation-delay: 1045ms; }
[data-drop]:nth-child(21), [data-drop-up]:nth-child(21) { animation-delay: 1100ms; }
[data-drop]:nth-child(22), [data-drop-up]:nth-child(22) { animation-delay: 1155ms; }
[data-drop]:nth-child(23), [data-drop-up]:nth-child(23) { animation-delay: 1210ms; }
[data-drop]:nth-child(24), [data-drop-up]:nth-child(24) { animation-delay: 1265ms; }

@media (prefers-reduced-motion: reduce) {
  [data-heroin], [data-heroin] [data-heroin-late], [data-heroin-cap], [data-drop], [data-drop-up] { animation: none; }
  [data-thumb] img, [data-cap], [data-thumb]::after { transition: none; }
}

/* ---------- Header ----------------------------------------------------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); background: var(--ground); color: var(--ink); border-bottom: 1px solid var(--hair); transition: background 400ms ease, color 400ms ease, border-color 400ms ease; }
.has-hero:not(.is-scrolled) .hdr { background: transparent; color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.22); }
.menu-open .hdr { background: transparent; color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.22); }

.mark { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mark__word { font-weight: 900; font-size: var(--mark-size); letter-spacing: -0.05em; line-height: 0.9; }
.mark__dot { color: var(--red); }
.mark__sub { font-family: var(--font-mono); font-weight: 500; font-size: var(--submark-size); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.92; line-height: 1.2; white-space: nowrap; display: block; }

.hdr__right { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 34px); }
.hdr__nav { display: flex; gap: clamp(14px, 2.2vw, 32px); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.burger { display: none; align-items: center; gap: 9px; height: 46px; min-width: 46px; justify-content: flex-end; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.burger__lines { display: flex; flex-direction: column; gap: 4px; width: 22px; }
.burger__lines span { height: 1.5px; background: currentColor; display: block; }
.burger__x { font-size: 24px; line-height: 1; font-weight: 400; display: none; }
.menu-open .burger__lines { display: none; }
.menu-open .burger__x { display: block; }

@media (max-width: 1099px) {
  .hdr__nav { display: none; }
  .burger { display: flex; }
}
@media (max-width: 699px) {
  .mark__sub { display: none; }
}

/* ---------- Menu overlay ---------------------------------------------- */
.menu { display: none; position: fixed; inset: 0; z-index: 79; background: var(--ink); color: #FFFFFF; padding: var(--menu-pad-top) var(--pad-x) 40px; overflow-y: auto; animation: ptdaFade 240ms ease; }
.menu-open .menu { display: block; }
.menu__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(26px, 4vw, 72px); max-width: 1500px; }
.menu__nav { display: flex; flex-direction: column; gap: 4px; }
.menu__nav a { font-weight: 900; font-size: clamp(32px, 5vw, 66px); letter-spacing: -0.05em; text-transform: uppercase; line-height: 1.08; }
.menu__nav a:hover { color: var(--red); }
.menu__sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); align-content: start; padding-top: 8px; }
.menu__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 16px; }
.menu__list { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.menu__foot { margin-top: clamp(36px, 7vw, 96px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
@media (max-width: 1099px) {
  .menu__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .menu__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Home: hero ------------------------------------------------- */
.hero { position: relative; height: var(--hero-h); min-height: 440px; background: var(--ink); overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1700ms ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,16,16,0.72) 0%, rgba(16,16,16,0.1) 46%, rgba(16,16,16,0.34) 100%); pointer-events: none; }
.hero__foot { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(24px, 4vw, 54px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }
.hero__lead { color: #FFFFFF; }
.hero__line { display: block; font-weight: 600; font-size: clamp(18px, 2.3vw, 38px); line-height: 1.14; letter-spacing: -0.026em; text-wrap: balance; max-width: 20ch; }
.hero__cta { display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 5px; }
.hero__cap { color: #FFFFFF; text-align: right; max-width: 26em; }
.hero__cap-meta { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.62; margin-bottom: 7px; }
.hero__cap-title { display: block; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.hero__cap[hidden] { display: none; }
.hero__dots { position: absolute; left: var(--pad-x); top: var(--hero-dots-top); display: flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hero__dot { width: 34px; height: 24px; display: flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.hero__dot span { display: block; width: 100%; height: 2px; background: rgba(255,255,255,0.32); transition: background 300ms ease; }
.hero__dot.is-active span { background: #FFFFFF; }
@media (max-width: 699px) {
  .hero__cap { text-align: left; }
}

/* ---------- Home: feed ------------------------------------------------- */
.feed { padding: var(--section-top) var(--pad-x) 0; }
.feed__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(34px, 4.4vw, 68px) clamp(14px, 2.2vw, 32px); }
.feed__card { grid-column: span 6; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.6vw, 20px); position: relative; min-width: 0; }
.feed__card:nth-child(3n) { grid-column: span 12; }
.feed__img { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--fill); overflow: hidden; min-width: 0; }
.feed__text { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 52ch; }
.feed__title { display: block; font-weight: 600; font-size: clamp(15px, 1.15vw, 19px); letter-spacing: -0.012em; line-height: 1.2; }
.feed__meta { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.feed__stand { font-family: var(--font-serif); font-weight: 300; font-size: 14.5px; line-height: 1.6; color: var(--body-3); margin: 10px 0 0; max-width: 46ch; }
.feed__more { display: flex; justify-content: center; padding: var(--section-top) 0 0; }
.feed__more a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid var(--red); padding-bottom: 6px; }
@media (max-width: 699px) {
  .feed__card, .feed__card:nth-child(3n) { grid-column: span 12; }
}

/* ---------- Home: statement band -------------------------------------- */
.band { position: relative; margin-top: var(--section-top); height: var(--band-h); background: var(--ink); overflow: hidden; }
.band__img { position: absolute; inset: 0; }
.band__shade { position: absolute; inset: 0; background: rgba(16,16,16,0.44); pointer-events: none; }
.band__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(26px, 5vw, 72px) var(--pad-x); }
.band__line { font-family: var(--font-serif); font-weight: 300; font-size: clamp(23px, 3.1vw, 50px); line-height: 1.24; color: #FFFFFF; margin: 0; max-width: 22ch; text-wrap: balance; }
.band__cta { margin-top: 24px; align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 6px; }

/* ---------- Listing pages: head --------------------------------------- */
.page { padding-top: var(--header-h); }
.page__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding: var(--page-top) var(--pad-x) 18px; }
.page__head--ideas { padding-bottom: clamp(26px, 3.4vw, 46px); }
.page__title { font-weight: 900; font-size: clamp(21px, 3.1vw, 43px); letter-spacing: -0.05em; text-transform: uppercase; margin: 0; line-height: 1; color: var(--mute); }
.page__count { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: baseline; margin: 0; padding: 0; list-style: none; }
.filters a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid transparent; padding: 6px 0; }
.filters a.is-active { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- Work grid -------------------------------------------------- */
.work { padding: 14px var(--pad-x) var(--section-top); }
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--work-gap); align-items: start; justify-items: stretch; width: 100%; max-width: var(--work-max); margin: 0 auto; }
.work__card { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden; background: var(--fill); }
.work__card[hidden] { display: none; }
.work__cap { position: absolute; inset: 0; background: rgba(16,16,16,0.46); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 4px; padding: 16px 16px 15px; pointer-events: none; }
.work__cap-title { font-weight: 600; font-size: clamp(12px, 0.95vw, 16px); letter-spacing: -0.012em; line-height: 1.3; color: #FFFFFF; }
.work__cap-client { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
@media (max-width: 699px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: clamp(26px, 3vw, 44px); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.pager[hidden] { display: none; }
.pager__arrow { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.pager__arrow:disabled { opacity: 0.3; pointer-events: none; }
.pager__num { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--mute); border-bottom: 1px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.pager__num.is-active { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- Page column (project and essay pages) -------------------- */
/* One column, 1180px at most, white margins either side. The 16:9 image,
   the text and the two-image rows all share its edges. */
.col { max-width: calc(1180px + 2 * var(--pad-x)); padding: 0 var(--pad-x); margin: 0 auto; }
.phead { padding: var(--page-top) 0 clamp(18px, 2.2vw, 30px); }
.phead__meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; }
.phead__title { font-weight: 800; font-size: clamp(20px, 3.2vw, 53px); line-height: 1.08; letter-spacing: -0.04em; margin: 0; max-width: 24ch; text-wrap: balance; }
.phead__title--essay { font-weight: 700; font-size: clamp(18px, 2.5vw, 41px); line-height: 1.12; letter-spacing: -0.035em; max-width: 22ch; }
.phero-in { aspect-ratio: 16 / 9; background: var(--ink); }

/* ---------- Project page ---------------------------------------------- */
.phero { position: relative; height: var(--project-hero-h); background: var(--ink); overflow: hidden; }
.phero__img { position: absolute; inset: 0; }
.phero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,16,16,0.7), rgba(16,16,16,0) 52%); pointer-events: none; }
.phero__shade--practice { background: linear-gradient(to top, rgba(16,16,16,0.66), rgba(16,16,16,0) 58%); }
.phero__body { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(24px, 4vw, 56px); color: #FFFFFF; text-align: center; }
.phero__body--left { text-align: left; }
.phero__meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.72; margin: 0 0 12px; }
.phero__title { font-weight: 800; font-size: clamp(20px, 3.2vw, 53px); line-height: 1.08; letter-spacing: -0.04em; margin: 0 auto; max-width: 24ch; text-wrap: balance; }
.phero__title--practice { font-weight: 600; font-size: clamp(17px, 2.2vw, 36px); line-height: 1.18; letter-spacing: -0.026em; margin: 0; max-width: 24ch; text-wrap: balance; }

.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(18px, 3vw, 46px); padding: 20px var(--pad-x); border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #6E6E6E; margin: 0; }
.facts div { display: contents; }
.facts dt { display: inline; }
.facts dd { display: inline; margin: 0 0 0 0.6em; color: var(--ink); }
.facts--left { justify-content: flex-start; padding: 20px 0; }

.intro { padding: var(--section-top) var(--pad-x) clamp(26px, 4vw, 56px); }
.intro__in { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(20px, 2.6vw, 34px); }
.intro__stand { font-family: var(--font-serif); font-weight: 300; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.5; margin: 0; max-width: 48ch; }
.intro__climate { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.intro__rule { width: 30px; height: 1px; background: var(--red); display: block; }
.intro__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.intro__climate p { font-family: var(--font-serif); font-weight: 300; font-size: 15.5px; line-height: 1.6; color: var(--body-2); margin: 0; max-width: 46ch; }
.intro--left { padding: var(--section-top) 0 clamp(26px, 4vw, 56px); }
.intro--left .intro__in { margin: 0; align-items: flex-start; text-align: left; }
.intro--left .intro__climate { align-items: flex-start; }

.blocks { padding: 0 var(--pad-x) var(--section-top); max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(30px, 4vw, 62px); width: 100%; container-type: inline-size; }
.block { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.block--heading h2 { font-weight: 700; font-size: clamp(20px, 2vw, 30px); line-height: 1.16; letter-spacing: -0.03em; margin: 0 auto; max-width: 30ch; text-align: center; }
.block--image { gap: clamp(14px, 1.8vw, 22px); }
.block__frame { min-width: 0; width: 100%; max-width: 100%; }
.block__frame--inset { max-width: 84%; }
.block__frame--half { max-width: 58%; }
.block__img { position: relative; aspect-ratio: var(--r, 16 / 9); background: var(--fill); overflow: hidden; cursor: zoom-in; display: block; width: 100%; border: 0; padding: 0; }
.block__cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0; line-height: 1.9; max-width: 40ch; text-align: center; }
.block--trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); width: 100%; }
.block--trio > div { min-width: 0; }
.block--trio .block__cap { font-size: 9px; margin: 10px 0 0; line-height: 1.55; max-width: none; }
.block--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2.2vw, 32px); max-width: 62%; margin: 0 auto; width: 100%; }
.block--pair > div { min-width: 0; }
.block--pair .block__cap { font-size: 9px; margin: 11px 0 0; line-height: 1.55; max-width: none; }
.block--text p { font-family: var(--font-serif); font-size: 17px; line-height: 1.68; color: var(--body-2); margin: 0 auto; max-width: 56ch; text-align: center; }
.block--quote p { font-family: var(--font-serif); font-weight: 300; font-size: clamp(21px, 2.4vw, 36px); line-height: 1.32; margin: 0 auto; max-width: 34ch; text-align: center; }
/* Inside the page column: everything starts at the column's left edge and
   every image row spans its full width. */
.blocks--left { padding: 0 0 var(--section-top); max-width: none; align-items: flex-start; }
.blocks--left .block { align-items: flex-start; }
.blocks--left .block__frame { max-width: 100%; }
.blocks--left .block--pair { max-width: none; }
.blocks--left .block__cap, .blocks--left .block--text p, .blocks--left .block--quote p, .blocks--left .block--heading h2 { margin-left: 0; margin-right: 0; text-align: left; }
/* Three-across and two-across rows stack when the column itself is narrow */
@container (max-width: 640px) {
  .block--trio { grid-template-columns: minmax(0, 1fr); }
  .block--pair { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 699px) {
    .block--trio { grid-template-columns: minmax(0, 1fr); }
    .block--pair { grid-template-columns: minmax(0, 1fr); max-width: none; }
  }
}

.next { border-top: 1px solid var(--hair); padding: clamp(30px, 5vw, 68px) var(--pad-x) var(--section-top); }
.next__in { max-width: 1180px; margin: 0 auto; }
.next__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin: 0 0 22px; text-align: center; }
.next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); }
.next__card { display: block; min-width: 0; }
.next__img { position: relative; aspect-ratio: 16 / 9; background: var(--fill); overflow: hidden; }
.next__title { padding-top: 11px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; text-align: center; }
.next--left { padding-left: 0; padding-right: 0; }
.next--left .next__label, .next--left .next__title { text-align: left; }
@media (max-width: 699px) {
  .next__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Practice --------------------------------------------------- */
.studio { padding: var(--section-top) var(--pad-x) 0; }
.studio__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.studio__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin: 0; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px) clamp(12px, 1.6vw, 22px); padding-top: 24px; margin: 0; padding-left: 0; list-style: none; }
.team__card { min-width: 0; position: relative; }
.team__img { position: relative; aspect-ratio: 4 / 5; background: var(--fill); overflow: hidden; cursor: zoom-in; display: block; width: 100%; border: 0; padding: 0; }
.team__name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; margin: 11px 0 3px; }
.team__role { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0; }
.team__bio { font-family: var(--font-serif); font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--body-3); margin: 8px 0 0; }
/* A single person: portrait at the grid's card width, text beside it. */
.team--solo .team__card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.team--solo .team__text { max-width: 46ch; }
.team--solo .team__name { margin-top: 0; }
.team--solo .team__bio { font-size: 15.5px; line-height: 1.6; margin-top: 12px; }
@media (max-width: 1099px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team--solo .team__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 699px) { .team { grid-template-columns: minmax(0, 1fr); } .team--solo .team__card { grid-template-columns: minmax(0, 1fr); } .team--solo .team__name { margin-top: 11px; } }

.values { padding: var(--section-top) var(--pad-x); }
.values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); max-width: 1400px; margin: 0; padding: 0; list-style: none; }
.values__item { border-top: 1px solid var(--ink); padding-top: 13px; position: relative; min-width: 0; }
.values__item h3 { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; margin: 0 0 8px; }
.values__item p { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.6; color: var(--body-3); margin: 0; }
@media (max-width: 1099px) { .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .values__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact ---------------------------------------------------- */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 64px); padding: clamp(22px, 2.6vw, 40px) var(--pad-x) clamp(18px, 2vw, 28px); align-items: stretch; }
.contact__col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.contact__col--careers { border-left: var(--contact-rule); padding-left: var(--contact-rule-pad); }
.contact__head { border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.contact__title { font-weight: 900; font-size: clamp(17px, 2vw, 28px); letter-spacing: -0.045em; text-transform: uppercase; margin: 0; line-height: 1; color: var(--mute); }
.contact__address { margin: 0; font-size: 15.5px; line-height: 1.55; white-space: pre-line; font-style: normal; }
.contact__email { margin: 12px 0 0; font-size: 15.5px; }
.contact__phone { margin: 3px 0 0; font-size: 15.5px; color: var(--body-3); }
.contact__intro { font-family: var(--font-serif); font-weight: 300; font-size: 15.5px; line-height: 1.6; color: var(--body-3); margin: 0; max-width: 46ch; }
@media (max-width: 699px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}

.form { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.form input, .form textarea { min-height: 42px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent; font-size: 16px; width: 100%; border-radius: 0; -webkit-appearance: none; appearance: none; }
.form input:required, .form textarea:required { border-bottom-color: var(--ink); }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--red); }
.form textarea { flex: 1; min-height: 74px; resize: vertical; }
.form button { align-self: start; margin-top: auto; min-height: 46px; padding: 0 26px; background: var(--ink); color: #FFFFFF; border: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.form__hp { display: none; }
.form__note { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0; padding: 0 var(--pad-x) clamp(14px, 1.8vw, 22px); }
.form__note[hidden] { display: none; }
@media (max-width: 699px) {
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

.map { position: relative; height: var(--map-band-h); background: var(--hair); overflow: hidden; }
.map__loading { position: absolute; left: var(--pad-x); bottom: 16px; z-index: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--hair); }

/* ---------- Ideas (switched off at launch) ----------------------------- */
.ideas { padding: 0 var(--pad-x) var(--section-top); }
.ideas__list { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(44px, 6vw, 90px); }
.idea { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 26px); position: relative; width: 100%; }
.idea__img { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--fill); overflow: hidden; }
.idea__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; max-width: 62ch; }
.idea__kind { display: flex; align-items: baseline; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.idea__date { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.idea__type { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.idea__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 1.8vw, 29px); line-height: 1.22; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.idea__stand { font-family: var(--font-serif); font-weight: 300; font-size: 15.5px; line-height: 1.62; color: var(--body-3); margin: 0; max-width: 56ch; }
.idea__read { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--red); padding-bottom: 4px; margin-top: 4px; }

.ehero { position: relative; height: var(--essay-hero-h); background: var(--ink); overflow: hidden; }
.ehero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,16,16,0.72), rgba(16,16,16,0) 56%); }
.ehero__body { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(24px, 4vw, 50px); color: #FFFFFF; }
.ehero__byline { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin: 0 0 12px; }
.ehero__title { font-weight: 700; font-size: clamp(18px, 2.5vw, 41px); line-height: 1.12; letter-spacing: -0.035em; margin: 0; text-wrap: balance; max-width: 22ch; }
.essay { padding: var(--section-top) var(--pad-x); max-width: 66ch; }
.essay--col { padding: var(--section-top) 0; }
.essay__stand { font-family: var(--font-serif); font-weight: 300; font-size: clamp(19px, 1.8vw, 27px); line-height: 1.45; margin: 0 0 32px; }
.essay p:not(.essay__stand) { font-family: var(--font-serif); font-size: 18px; line-height: 1.68; color: var(--body-2); margin: 0 0 22px; }
.essay__links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.essay__links a { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--red); padding-bottom: 5px; }

/* ---------- Footer ----------------------------------------------------- */
.ftr { background: var(--ink); color: #FFFFFF; padding: clamp(30px, 5vw, 66px) var(--pad-x) 28px; }
.ftr__top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.ftr__mark { font-weight: 900; font-size: clamp(27px, 4.9vw, 67px); letter-spacing: -0.055em; line-height: 0.92; }
.ftr__cols { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); font-size: 14px; }
.ftr__col { display: flex; flex-direction: column; gap: 12px; }
.ftr__col--meta { color: rgba(255,255,255,0.62); }
.ftr__bottom { margin-top: clamp(26px, 5vw, 60px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); }

/* ---------- Zoom (lightbox) -------------------------------------------- */
.zoom { display: none; position: fixed; inset: 0; z-index: 98; background: rgba(16,16,16,0.94); flex-direction: column; padding: var(--pad-x); gap: 14px; animation: ptdaFade 200ms ease; }
.zoom.is-open { display: flex; }
.zoom__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; color: #FFFFFF; }
.zoom__meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 6px; }
.zoom__title { font-weight: 600; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: -0.02em; margin: 0; }
.zoom__actions { display: flex; align-items: center; gap: 18px; }
.zoom__cta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 5px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.zoom__close { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 22px; line-height: 1; background: none; border: 0; padding: 0; cursor: pointer; }
.zoom__img { flex: 1 1 auto; position: relative; min-height: 0; will-change: transform; }
.zoom__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }