/* Md. Rakib Hasan portfolio. Tokens first; dark mode swaps tokens only. */
:root {
  --bg: #f4f2ee;
  --bg-2: #ebe8e2;
  --ink: #161513;
  --ink-2: #5d5a54;
  --line: #d6d2ca;
  --accent: #b0512f;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1440px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121210; --bg-2: #1c1b19; --ink: #efece6; --ink-2: #a19d95; --line: #2f2d29; --accent: #e0835d;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121210; --bg-2: #1c1b19; --ink: #efece6; --ink-2: #a19d95; --line: #2f2d29; --accent: #e0835d;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.eyebrow { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 1.25rem; }
.small { font-size: .82rem; color: var(--ink-2); }

/* Top bar */
.bar {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 1rem var(--pad); background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.bar.scrolled { border-color: var(--line); }
.mark { font-weight: 600; letter-spacing: -0.01em; }
.bar nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; font-size: .95rem; }
.bar nav a { position: relative; }
.bar nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.bar nav a:hover::after { transform: scaleX(1); }
@media (max-width: 480px) {
  .bar nav { gap: .9rem; font-size: .88rem; }
  .bar nav a[href^="mailto:"] { display: none; }
}
.theme { width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.theme span { width: .8rem; height: .8rem; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); border: 1.5px solid var(--ink); }

/* Home intro */
.intro { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 12vw, 10rem) var(--pad) clamp(3rem, 8vw, 6rem); }
.intro h1 { font-size: clamp(2.6rem, 7.2vw, 6.6rem); max-width: 14ch; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink-2); max-width: 46ch; margin: 2rem 0 0; }
.cta { display: flex; gap: 1.5rem; align-items: center; margin-top: 2.5rem; flex-wrap: wrap; }
.btn { background: var(--ink); color: var(--bg); padding: .85rem 1.5rem; border-radius: 999px; font-weight: 500; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-2px); background: var(--accent); }
.link { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.link:hover { border-color: var(--ink); }

/* Work grid */
.work { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 10vw, 8rem); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: 2.5rem; color: var(--ink-2); }
.section-head h2 { font-size: 1rem; color: var(--ink); }
.work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-item:first-child { grid-column: 1 / -1; }
  .work-item:nth-child(3n + 4) { grid-column: 1 / -1; }
}
.work-item figure { margin: 0; overflow: hidden; border-radius: 4px; background: var(--bg-2); aspect-ratio: 4 / 3; }
.work-item:first-child figure { aspect-ratio: 2 / 1; }  /* matches the BRIDGE1400 render, so nothing is cropped */
.work-item figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.work-item a:hover img { transform: scale(1.04); }
.work-meta { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin-top: 1rem; align-items: baseline; }
.work-meta .num { font-size: .8rem; color: var(--ink-2); grid-row: span 2; }
.work-meta h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.work-meta p { margin: .25rem 0 0; color: var(--ink-2); font-size: .95rem; }

/* Project page */
.project-hero { position: relative; height: min(88vh, 900px); overflow: hidden; background: #000; }
.hero-img { width: 100%; height: 100%; object-fit: cover; opacity: .92; will-change: transform; }  /* parallax: main.js */
.hero-title, .reel-inner { will-change: transform, opacity; }
.reel { will-change: transform; }
.hero-title { position: absolute; inset: auto 0 0 0; padding: clamp(2rem, 6vw, 4.5rem) var(--pad); color: #f4f2ee; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.hero-title .eyebrow { color: rgba(244,242,238,.75); }
.hero-title h1 { font-size: clamp(3rem, 10vw, 9rem); }
.hero-title p:last-child { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 2rem); margin: .5rem 0 0; }

.project-intro { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--pad); display: grid; gap: 3rem; }
@media (min-width: 900px) { .project-intro { grid-template-columns: 1fr 2fr; } }
.meta { margin: 0; display: grid; gap: 1rem; align-content: start; }
.meta div { border-top: 1px solid var(--line); padding-top: .6rem; }
.meta dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.meta dd { margin: .2rem 0 0; }
.intro-text p { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.5; margin: 0 0 1.25rem; max-width: 52ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.fact { background: var(--bg-2); border-radius: 4px; padding: 1.1rem 1.25rem; }
.fact span { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.fact strong { display: block; font-weight: 500; font-size: 1.1rem; margin-top: .35rem; line-height: 1.3; }

.chapter { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(3.5rem, 8vw, 6.5rem); }
.chapter-text { display: grid; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 900px) { .chapter-text { grid-template-columns: 1fr 2fr; } }
.chapter-text h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.chapter-text p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.chapter-figs { display: grid; gap: 2rem; }
/* side: short text beside a small figure (Site), saves a screen of scrolling */
@media (min-width: 900px) {
  .chapter.side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .chapter.side .chapter-text { grid-template-columns: 1fr; margin-bottom: 0; }
  .chapter.side .chapter-figs { border-top: 1px solid var(--line); padding-top: 1.25rem; }
}
figure { margin: 0; }
figcaption { font-size: .85rem; color: var(--ink-2); margin-top: .6rem; }
.zoom img { cursor: zoom-in; border-radius: 4px; }  /* no white backing: transparent drawings sit on the page colour */

/* Reel hero: silent looping highlight video behind the headline (home + Films page) */
.reel-hero { position: relative; overflow: hidden; background: #0e0e0d; color: #f4f2ee;
  min-height: min(92vh, 940px); display: flex; align-items: flex-end; }
.reel-hero.intro { max-width: none; margin: 0; padding: 0; }  /* override the old text-only intro box */
.reel { position: absolute; inset: 0; }
.reel-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,9,.35) 0%, rgba(10,10,9,.3) 35%, rgba(10,10,9,.78) 100%); }
.reel-inner { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: clamp(6rem, 14vw, 10rem) var(--pad) clamp(3rem, 7vw, 5.5rem); }
.reel-hero h1 { font-size: clamp(2.6rem, 7.2vw, 6.6rem); max-width: 14ch; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.films-hero h1 { font-size: clamp(3.5rem, 12vw, 10rem); }
.reel-hero .eyebrow { color: rgba(244,242,238,.8); }
.reel-hero .lede { color: rgba(244,242,238,.85); max-width: 46ch; margin: 2rem 0 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.reel-hero .btn { background: #f4f2ee; color: #161513; }
.reel-hero .btn:hover { background: var(--accent); color: #fff; }
.reel-hero .link { color: #f4f2ee; border-color: rgba(244,242,238,.45); }
.reel-hero .link:hover { border-color: #f4f2ee; }
.reel-toggle { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(1.25rem, 3vw, 2rem); width: 2.5rem; height: 2.5rem;
  border-radius: 50%; border: 1px solid rgba(244,242,238,.5); background: rgba(10,10,9,.35); cursor: pointer; display: grid; place-items: center; }
.reel-toggle span { display: block; width: 10px; height: 12px; border-left: 3px solid #f4f2ee; border-right: 3px solid #f4f2ee; }
.reel-toggle[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 11px solid #f4f2ee;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.reel-hero.no-motion .reel-toggle { display: none; }
/* Credit line, bottom-right beside the pause button; shown on every screen size */
.reel-credit { position: absolute; z-index: 2; margin: 0; right: calc(var(--pad) + 3.25rem); bottom: clamp(1.25rem, 3vw, 2rem);
  min-height: 2.5rem; display: flex; align-items: center; justify-content: flex-end; text-align: right;
  max-width: min(26rem, calc(100% - var(--pad) * 2 - 3.25rem));
  /* 10px is the practical floor for legible text on phones and desktops; medium weight + shadow keep it crisp over video */
  font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: .03em;
  color: rgba(244,242,238,.85); text-shadow: 0 1px 6px rgba(0,0,0,.55); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.reel-hero.no-motion .reel-credit { right: var(--pad); }
.reel-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(244,242,238,.4);
  text-underline-offset: 2px; transition: text-decoration-color .2s, color .2s; }
.reel-credit a:hover, .reel-credit a:focus-visible { color: #fff; text-decoration-color: #fff; }
@media (max-width: 700px) {
  /* keep the buttons clear of the credit + pause row */
  .reel-inner { padding-bottom: 5.75rem; }
}

/* Link card from Professional Work to the Films page */
.films-teaser { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(3.5rem, 8vw, 6rem); scroll-margin-top: 5rem; }
.films-teaser a { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #000; aspect-ratio: 21 / 9; }
.films-teaser img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.films-teaser a:hover img { transform: scale(1.03); opacity: .65; }
.films-teaser-text { position: absolute; left: 0; bottom: 0; padding: clamp(1.25rem, 4vw, 2.5rem); color: #f4f2ee; }
.films-teaser-text .eyebrow { color: rgba(244,242,238,.8); display: block; margin-bottom: .5rem; }
.films-teaser-text strong { font-weight: 500; font-size: clamp(1.4rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1; }

/* Films: self-hosted animations, poster frame until play */
.films { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(3.5rem, 8vw, 6rem); scroll-margin-top: 5rem; }
.films h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); padding-top: 1.25rem; margin-bottom: .75rem; }
.films-note { color: var(--ink-2); margin: 0 0 2rem; }
.film-grid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .film-grid { grid-template-columns: repeat(2, 1fr); } }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; object-fit: cover; }
.film figcaption strong { display: block; color: var(--ink); font-weight: 500; font-size: 1.05rem; }

/* Coded map callouts (BRIDGE1400 site): label band, dotted elbow leaders, end dots */
/* width:100% matters: as a grid item with auto margins it would otherwise shrink to its caption's width */
.callout-map { width: 100%; max-width: 560px; margin: 0 auto; }
/* container units: label text scales with the stage so the row layout computed in build.py always fits */
.callout-stage { position: relative; width: 100%; aspect-ratio: var(--ar); container-type: inline-size; }
.callout-stage .callout-img { position: absolute; left: 0; top: var(--img-top); width: 100%; height: var(--img-h); object-fit: contain; }
.callout-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--ink); }
.callout-lines path { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: .75; }
.callout-dot { position: absolute; top: var(--ty); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
/* wide: many labels on a wide drawing (Section AA); sheet: opaque white drawing, so the whole stage is a white sheet with light-mode ink */
.callout-map.wide { max-width: none; }
.callout-map.sheet .callout-stage { --ink: #161513; --ink-2: #5d5a54; --bg: #fff; background: #fff; border-radius: 4px; }
.callout-label { position: absolute; transform: translate(-50%, -100%); width: var(--label-w, 30%); box-sizing: border-box; padding: .5cqw .8cqw;
  border: 1px dashed color-mix(in srgb, var(--ink) 50%, transparent); background: var(--bg); text-align: center; line-height: 1.2; }
.callout-label strong { display: block; font-size: 2.3cqw; font-weight: 600; color: var(--ink); }
.callout-label small { display: block; margin-top: .15rem; font-size: 1.95cqw; color: var(--ink-2); }
.callout-map.wide .callout-label { padding: .3cqw .5cqw; }
.callout-map.wide .callout-label strong { font-size: 1.07cqw; }
.callout-map.wide .callout-label small { font-size: .9cqw; }
/* left: label column beside the image (Site); labels right-aligned to the column, centred on their target's height */
.callout-map.left { max-width: 770px; }
.callout-map.left .callout-img { left: var(--img-left); top: 0; width: var(--img-w); height: 100%; }
.callout-map.left .callout-dot { left: var(--tx); }
.callout-map.left .callout-label { transform: translate(-100%, -50%); text-align: right; padding: .6cqw 1cqw; }
.callout-map.left .callout-label strong { font-size: 1.68cqw; }
.callout-map.left .callout-label small { font-size: 1.45cqw; }
/* centre the map itself on the page (the label column hangs to its left); caption centred under the map */
.callout-map.left figcaption { text-align: center; padding-left: 27.3%; }
@media (min-width: 1100px) { .callout-map.left { transform: translateX(-13.6%); } }
/* sides: labels in the drawing's empty side margins (Section AA), horizontal leaders */
.callout-map.sides { max-width: none; }
.callout-map.sides .callout-label { padding: .35cqw .6cqw; }
.callout-map.sides .callout-label.l { transform: translate(-100%, -50%); text-align: right; }
.callout-map.sides .callout-label.r { transform: translate(0, -50%); text-align: left; }
.callout-map.sides .callout-label strong { font-size: 1.05cqw; }
.callout-map.sides .callout-label small { font-size: .85cqw; margin-top: .1rem; }
.callout-legend { display: none; }
@media (max-width: 700px) {
  .callout-map.left .callout-img { left: 0; width: 100%; }
  .callout-map.left .callout-dot { left: var(--tx-img); }
  .callout-stage { aspect-ratio: var(--ar-img); }
  .callout-stage .callout-img { top: 0; height: 100%; }
  .callout-lines, .callout-label { display: none; }
  .callout-dot { top: var(--ty-img); width: 20px; height: 20px; margin: -10px 0 0 -10px; display: grid; place-items: center;
    color: var(--bg); font-size: 11px; font-weight: 600; }
  .callout-dot::after { content: attr(data-n); }
  .callout-legend { display: grid; gap: .45rem; list-style: none; counter-reset: callout; padding: 0; margin: 1rem 0 0; }
  .callout-legend li { counter-increment: callout; font-size: .92rem; color: var(--ink-2); }
  .callout-legend li strong { color: var(--ink); font-weight: 600; }
  .callout-legend li::before { content: counter(callout); display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem;
    margin-right: .5rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: .72rem; font-weight: 600; }
}

/* Worked calculations under a stats block (BRIDGE1400 Performance) */
.calc { border-top: 1px solid var(--line); padding-top: .75rem; }
.calc summary { cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--ink); }
.calc summary:hover { color: var(--accent); }
.calc ul { margin: .75rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.calc li { font-size: .88rem; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }

/* Two drawings side by side (BRIDGE1400 structural axons) */
.fig-pair { width: 100%; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fig-pair > figure:not(.callout-map) img { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; display: block; }
@media (min-width: 700px) { .fig-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Floor plans: level tabs (radio + label, no JS), one plan at a time on a white sheet, program list beside it */
.plan-viewer { width: 100%; }
.plan-radio { position: absolute; opacity: 0; pointer-events: none; }
.plan-tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-bottom: 1.25rem; }
.plan-tabs span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-right: .4rem; }
.plan-tabs label { min-width: 2.75rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-align: center;
  font-size: .9rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.plan-tabs label:hover { border-color: var(--ink); }
.plan-panel { display: none; }
.plan-sheet { border-radius: 4px; padding: clamp(.5rem, 2vw, 1.5rem); }  /* plans are see-through (prepare_images.plan_to_alpha) */
/* dark mode: dark linework would vanish, so flip tones; the hue turn keeps the planting green */
:root[data-theme="dark"] .plan-sheet img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-sheet img { filter: invert(1) hue-rotate(180deg); } }
.plan-sheet img { display: block; width: auto; max-width: 100%; height: auto; max-height: 65vh; }
.plan-panel figcaption { margin-top: 1rem; }
/* north sign as the first character of the level title, sized to the letters; light lines in dark mode */
.plan-north { display: inline-block; height: .95em; width: auto; margin-right: .3em; vertical-align: -.08em; }
:root[data-theme="dark"] .plan-north { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-north { filter: invert(1); } }
/* previous / next arrows beside the plan */
/* arrow | plan | arrow in one row: the arrows sit just outside the drawing with a fixed gap, never on top of it */
.plan-stage { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, 1.5rem); }
.plan-stage .plan-sheet { flex: 0 1 auto; min-width: 0; padding: 0; }
.plan-arrow { flex: none; width: 2rem; height: 3rem; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-2); opacity: .75; transition: color .2s, opacity .2s, transform .2s; }
.plan-arrow svg { width: .75rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.plan-arrow:hover { color: var(--ink); opacity: 1; }
.plan-gap { cursor: default; }
.plan-arrow.plan-prev:hover { transform: translateX(-3px); }
.plan-arrow.plan-next:hover { transform: translateX(3px); }
.plan-panel figcaption strong { display: block; color: var(--ink); font-weight: 500; font-size: 1.15rem; margin-bottom: .5rem; }
.plan-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.plan-panel li { font-size: .88rem; color: var(--ink-2); background: var(--bg-2); border-radius: 999px; padding: .25rem .7rem; }
@media (min-width: 1000px) {
  /* plan centred on the page: an empty column on the left balances the program list on the right */
  .plan-panel { grid-template-columns: 15rem minmax(0, 1fr) 15rem; gap: 2rem; align-items: start; }
  .plan-panel .plan-stage { grid-column: 2; }
  .plan-panel figcaption { grid-column: 3; }
  .plan-panel figcaption { margin-top: 0; }
  .plan-panel ul { flex-direction: column; align-items: flex-start; }
}
/* show panel N and highlight tab N for the checked radio N (supports up to 10 levels) */
.plan-radio:nth-of-type(1):checked ~ .plan-panels > :nth-child(1), .plan-radio:nth-of-type(2):checked ~ .plan-panels > :nth-child(2),
.plan-radio:nth-of-type(3):checked ~ .plan-panels > :nth-child(3), .plan-radio:nth-of-type(4):checked ~ .plan-panels > :nth-child(4),
.plan-radio:nth-of-type(5):checked ~ .plan-panels > :nth-child(5), .plan-radio:nth-of-type(6):checked ~ .plan-panels > :nth-child(6),
.plan-radio:nth-of-type(7):checked ~ .plan-panels > :nth-child(7), .plan-radio:nth-of-type(8):checked ~ .plan-panels > :nth-child(8),
.plan-radio:nth-of-type(9):checked ~ .plan-panels > :nth-child(9), .plan-radio:nth-of-type(10):checked ~ .plan-panels > :nth-child(10) { display: grid; }
.plan-radio:nth-of-type(1):checked ~ .plan-tabs label:nth-of-type(1), .plan-radio:nth-of-type(2):checked ~ .plan-tabs label:nth-of-type(2),
.plan-radio:nth-of-type(3):checked ~ .plan-tabs label:nth-of-type(3), .plan-radio:nth-of-type(4):checked ~ .plan-tabs label:nth-of-type(4),
.plan-radio:nth-of-type(5):checked ~ .plan-tabs label:nth-of-type(5), .plan-radio:nth-of-type(6):checked ~ .plan-tabs label:nth-of-type(6),
.plan-radio:nth-of-type(7):checked ~ .plan-tabs label:nth-of-type(7), .plan-radio:nth-of-type(8):checked ~ .plan-tabs label:nth-of-type(8),
.plan-radio:nth-of-type(9):checked ~ .plan-tabs label:nth-of-type(9), .plan-radio:nth-of-type(10):checked ~ .plan-tabs label:nth-of-type(10) {
  background: var(--ink); border-color: var(--ink); color: var(--bg); }
.plan-radio:nth-of-type(1):focus-visible ~ .plan-tabs label:nth-of-type(1), .plan-radio:nth-of-type(2):focus-visible ~ .plan-tabs label:nth-of-type(2),
.plan-radio:nth-of-type(3):focus-visible ~ .plan-tabs label:nth-of-type(3), .plan-radio:nth-of-type(4):focus-visible ~ .plan-tabs label:nth-of-type(4),
.plan-radio:nth-of-type(5):focus-visible ~ .plan-tabs label:nth-of-type(5), .plan-radio:nth-of-type(6):focus-visible ~ .plan-tabs label:nth-of-type(6),
.plan-radio:nth-of-type(7):focus-visible ~ .plan-tabs label:nth-of-type(7), .plan-radio:nth-of-type(8):focus-visible ~ .plan-tabs label:nth-of-type(8),
.plan-radio:nth-of-type(9):focus-visible ~ .plan-tabs label:nth-of-type(9), .plan-radio:nth-of-type(10):focus-visible ~ .plan-tabs label:nth-of-type(10) {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hand sketches: ink-only transparent images; dark mode turns the ink light */
.sketch img { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .sketch img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sketch img { filter: invert(1); } }
/* width:100% + minmax(0,1fr): as grid items these lists would otherwise shrink to their content (see .callout-map) */
.sketch-grid { width: 100%; display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
/* row 1: three plan studies; row 2: sections and elevation, drawn standing on one shared ground line (bottom-aligned) */
@media (min-width: 600px) { .sketch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sketch-grid img { max-height: 280px; object-fit: contain; object-position: bottom; }
/* grounded sketches: the box stops at the ground line (--g of the image height); the part below the ground overflows
   into the caption gap, so the bottom-aligned row lines up the ground lines, not the image edges */
.sketch-ground { position: relative; width: min(100%, 300px); margin: 0 auto; aspect-ratio: var(--ar); }
.sketch-grid .sketch-ground img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% / var(--g)); max-height: none; }
.sketch.grounded figcaption { margin-top: 3.25rem; }
.sketch-grid figcaption { text-align: center; }  /* images are centred in their cells, so centred captions sit under them */

/* Waterfront-to-city diagram: concept section sketch between live-text zone cards */
.zones { width: 100%; }
.zone-row { display: grid; gap: 1.75rem 3rem; }
@media (min-width: 760px) {
  .zone-row { grid-template-columns: 1fr 1fr; }
  .zone-row .zone:nth-child(2) { text-align: right; }
  .zone-row .zone:nth-child(2) p { margin-left: auto; }
}
.zone h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 .4rem; }
.zone p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.zone p.zone-tag { display: inline-block; margin: 0 0 .75rem; padding: .3rem .65rem; border: 1px solid var(--ink);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.zone-art { width: 50%; margin: 2.25rem auto .5rem; }
@media (max-width: 700px) { .zone-art { width: 100%; } }
.zone-axis { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2.25rem;
  border-top: 1px solid var(--line); padding-top: .6rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.zone-axis strong { font-weight: 500; color: var(--ink); text-align: center; }

/* Concept diagram (slide layout): clip | west cards + band | sketch with the accent stair | east cards + band | clip.
   Each band sits at the height of its stair end (--y, % of the sketch row) and runs into that end's circle. */
.concept { width: 100%; display: grid; gap: 1.5rem; }
.concept video { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--bg-2); }
.concept-clip { width: min(220px, 60%); margin: 0 auto; }
.concept-card .zone h3 { font-size: 1.2rem; }
.concept-card .zone p { font-size: .9rem; line-height: 1.5; }
.concept-band span { display: block; padding: .7rem 1.1rem; border-radius: 999px; text-align: center; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 12%, var(--bg)); }
.concept-band strong { font-weight: 600; color: var(--ink); }
.concept-art { position: relative; width: 100%; aspect-ratio: var(--ar); }
.concept-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.concept-stair { position: absolute; inset: 0; background: var(--accent);
  -webkit-mask: var(--stair) center / 100% 100% no-repeat; mask: var(--stair) center / 100% 100% no-repeat; }
.concept-end { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 3px var(--bg); z-index: 1; }
.concept-end.west { left: var(--wx); top: var(--wy); }
.concept-end.east { left: var(--ex); top: var(--ey); }
.concept-label { margin: .75rem 0 0; text-align: center; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.concept figcaption { text-align: center; }
@media (min-width: 1000px) {
  .concept { grid-template-columns: minmax(0, 11fr) minmax(0, 21fr) minmax(0, 36fr) minmax(0, 21fr) minmax(0, 11fr);
    grid-template-rows: auto auto auto auto; column-gap: 0; row-gap: 1.75rem; align-items: start; }
  /* clip centred on its capsule: same row and --y as the band, video overflows the row above and below */
  .concept-clip { width: 100%; grid-row: 2; align-self: stretch; position: relative; }
  .concept-clip video { position: absolute; left: 0; top: var(--y); transform: translateY(-50%); }
  .concept-clip.west { grid-column: 1; }
  .concept-clip.east { grid-column: 5; }
  .concept-card { padding: 0 1.5rem; }
  /* Equal gaps: the sketch row is H = 36cqw x --hr tall (middle column is 36 of 100 fr, no column gap). Each capsule sits
     at --y of H, so the cards shift by the difference from the Hotel spaces gap (west bottom), which stays as it is. */
  .concept { container-type: inline-size; --H: calc(36cqw * var(--hr)); }
  .w-top { transform: translateY(calc((2 * var(--wy) - 1) * var(--H))); }
  .e-top { transform: translateY(calc((var(--ey) + var(--wy) - 1) * var(--H))); }
  .e-bottom { transform: translateY(calc((var(--ey) - var(--wy)) * var(--H))); }
  .w-top, .e-top { grid-row: 1; align-self: end; }
  .w-bottom, .e-bottom { grid-row: 3; }
  .w-top, .w-bottom { grid-column: 2; text-align: right; }
  .w-top .zone p, .w-bottom .zone p { margin-left: auto; }
  .e-top, .e-bottom { grid-column: 4; }
  .concept-band { grid-row: 2; position: relative; align-self: stretch; }
  .concept-band.west { grid-column: 2; }
  .concept-band.east { grid-column: 4; }
  .concept-band span { position: absolute; top: var(--y); transform: translateY(-50%); left: .75rem; right: -2px; }
  .concept-band.east span { left: -2px; right: .75rem; }
  .concept-mid { grid-column: 3; grid-row: 2; position: relative; }
  .concept-label { position: absolute; left: 0; right: 0; top: 100%; }
  .concept figcaption { grid-column: 1 / -1; grid-row: 4; }
}

/* Performance dashboard (BRIDGE1400): segmented tabs (radio + CSS), glassy panels, live numbers */
.perf { width: 100%; --glow: color-mix(in srgb, var(--accent) 22%, transparent); --edge: color-mix(in srgb, var(--ink) 12%, transparent); }
.perf-radio { position: absolute; opacity: 0; pointer-events: none; }
.perf-tabs { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent); backdrop-filter: blur(10px); margin-bottom: 1.25rem; }
.perf-tabs label { display: flex; align-items: baseline; gap: .45rem; padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer;
  font-size: .95rem; color: var(--ink-2); transition: background .35s cubic-bezier(.2,.7,.2,1), color .35s; }
.perf-tabs label span { font-size: .68rem; letter-spacing: .1em; opacity: .7; font-variant-numeric: tabular-nums; }
.perf-tabs label:hover { color: var(--ink); }
#perf-energy:checked ~ .perf-tabs label[for="perf-energy"], #perf-water:checked ~ .perf-tabs label[for="perf-water"],
#perf-carbon:checked ~ .perf-tabs label[for="perf-carbon"] { background: var(--ink); color: var(--bg); }
#perf-energy:focus-visible ~ .perf-tabs label[for="perf-energy"], #perf-water:focus-visible ~ .perf-tabs label[for="perf-water"],
#perf-carbon:focus-visible ~ .perf-tabs label[for="perf-carbon"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.perf-panel { display: none; position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--edge);
  padding: clamp(1.25rem, 3.5vw, 3rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  background: radial-gradient(120% 90% at 0% 0%, var(--glow), transparent 55%),
              radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--bg-2); }
#perf-energy:checked ~ .perf-panels .perf-energy, #perf-water:checked ~ .perf-panels .perf-water,
#perf-carbon:checked ~ .perf-panels .perf-carbon { display: grid; animation: perf-in .6s cubic-bezier(.2,.7,.2,1); }
@keyframes perf-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .perf-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.perf strong { font-variant-numeric: tabular-nums; }
.perf-k { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.perf-foot { margin: 1.25rem 0 0; font-size: .78rem; color: var(--ink-2); }

.perf-ring { position: relative; width: min(100%, 360px); margin: 0 auto; aspect-ratio: 1; }
.perf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.perf-ring circle { fill: none; stroke-width: 7; }
.perf-ring-track { stroke: var(--edge); }
.perf-ring-bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 0 6px var(--glow)); }
.perf-ring-c { position: absolute; inset: 14%; display: grid; place-content: center; text-align: center; }
.perf-ring-c strong { font-size: clamp(3rem, 7vw, 5rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.perf-ring-c span { font-size: .85rem; margin-top: .35rem; }
.perf-ring-c em { font-family: var(--sans); font-style: normal; font-size: .78rem; color: var(--ink-2); margin-top: .5rem; }

.perf-price { display: flex; align-items: baseline; gap: .5rem; }
.perf-price output { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.perf-price span { color: var(--ink-2); font-size: .9rem; }
.perf input[type="range"] { width: 100%; margin: .75rem 0 .2rem; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--fill, 37.5%), var(--edge) var(--fill, 37.5%)); }
.perf input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--accent); box-shadow: 0 0 0 6px var(--glow); }
.perf input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 0 6px var(--glow); }
.perf-scale { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-2); }
.perf-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0 0; }
.perf-live div { padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.perf-live dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.perf-live dd { margin: .3rem 0 .1rem; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.perf-live small { font-size: .72rem; color: var(--ink-2); }
.perf-meter { height: 4px; border-radius: 99px; background: var(--edge); margin-top: 1rem; overflow: hidden; }
.perf-meter i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--ink)));
  border-radius: inherit; transition: width .5s cubic-bezier(.2,.7,.2,1); }

.perf-big strong { font-size: clamp(4rem, 11vw, 8rem); font-weight: 300; letter-spacing: -.05em; line-height: .9; }
.perf-big > span { font-size: clamp(1.2rem, 2.5vw, 2rem); color: var(--ink-2); margin-left: .3rem; }
.perf-big p { margin: .6rem 0 0; color: var(--ink-2); }
.perf-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.perf-chips button { font: inherit; font-size: .85rem; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--edge); cursor: pointer;
  background: transparent; color: var(--ink-2); transition: all .3s; }
.perf-chips button:hover { color: var(--ink); border-color: var(--ink-2); }
.perf-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.perf-bar { position: relative; height: 56px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.perf-bar i { position: absolute; top: 0; bottom: 0; left: 0; transition: width .7s cubic-bezier(.2,.7,.2,1); }
.perf-bar .lo { width: var(--lo); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent)); border-radius: 14px; z-index: 1; }
.perf-bar .hi { width: var(--hi); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 6px, transparent 6px 12px); border-radius: 14px; }
.perf-bar-read { display: flex; align-items: baseline; gap: .5rem; margin-top: .6rem; }
.perf-bar-read strong { font-size: 1.35rem; font-weight: 500; }
.perf-bar-read span { font-size: .85rem; color: var(--ink-2); }
.perf-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; }
.perf-mini div { padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--edge); }
.perf-mini strong { font-size: 1.8rem; font-weight: 400; letter-spacing: -.02em; }
.perf-mini p { margin: .1rem 0 0; font-size: .78rem; color: var(--ink-2); }

.perf-row { margin-bottom: 1.35rem; }
.perf-row p { margin: 0 0 .4rem; color: var(--ink-2); }
.perf-row p strong { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 300; letter-spacing: -.03em; color: var(--ink); margin-right: .25rem; }
.perf-row-bar { height: 14px; border-radius: 99px; width: var(--w); transform-origin: left; }
.perf-row-bar.store { background: linear-gradient(90deg, #6f8f4e, #a9c77a); box-shadow: 0 0 18px rgba(140, 180, 100, .35); }
.perf-row-bar.emit { background: linear-gradient(90deg, #7a7771, #a8a49c); }
.perf-row span { display: block; font-size: .78rem; color: var(--ink-2); margin-top: .35rem; }
.perf-ratio { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .4rem; padding-top: 1rem; border-top: 1px solid var(--edge); }
.perf-ratio strong { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 300; letter-spacing: -.04em; color: var(--accent); line-height: 1; }
.perf-ratio > span { font-size: 1.6rem; color: var(--accent); }
.perf-ratio p { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--ink-2); }
.perf-dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; max-width: 340px; }
.perf-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--accent); opacity: .9; }
.perf-cars > p:not(.perf-foot) { margin: 1rem 0 0; color: var(--ink-2); }
.perf-cars > p strong { display: block; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 300; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; }
.js .perf-animate .perf-row-bar { animation: perf-grow 1.2s cubic-bezier(.2,.7,.2,1) both; }
.js .perf-animate .perf-dots i { animation: perf-pop .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes perf-grow { from { transform: scaleX(0); } }
@keyframes perf-pop { from { transform: scale(0); opacity: 0; } }
.perf-solo .perf-panel { display: grid; }  /* single panel, no tabs (Mass timber) */
.perf-timber .perf-big strong { font-size: clamp(3.4rem, 9vw, 6.5rem); }
.perf-timber .perf-big > span { font-size: clamp(1rem, 2vw, 1.6rem); }
.perf-timber .perf-mini { margin-top: 1.75rem; }
.perf-timber .perf-mini strong { font-size: 1.4rem; }
.perf-scale span:nth-child(2) { color: var(--accent); }
@media (max-width: 600px) { .perf-live { grid-template-columns: 1fr; } .perf-tabs label { padding: .5rem .8rem; } }
@media (prefers-reduced-motion: reduce) { .perf *, .perf-panel { animation: none !important; transition: none !important; } }

/* Massing steps: inline SVGs follow the text colour, pastel fills kept */
.steps { width: 100%; list-style: none; padding: 0; margin: 0; display: grid; gap: 2.75rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* one row of eight: wide screens fit all columns; narrower screens scroll the row sideways instead of stacking */
.steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .5rem; }
.step { scroll-snap-align: start; }
@media (min-width: 1200px) { .steps { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; } }
.steps .step h3 { font-size: .92rem; }
.steps .step p:last-child { font-size: .8rem; line-height: 1.45; }
.steps .step-art { margin-bottom: .6rem; }
.step-art { color: var(--ink); aspect-ratio: 171 / 153; margin-bottom: 1rem; }
.step-art svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.step .step-n { margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.step h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.25; margin: .2rem 0 .35rem; }
.step p:last-child { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }

.gallery { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(3.5rem, 8vw, 6rem); }
.gallery h2, .table-wrap h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); padding-top: 1.25rem; margin-bottom: 2rem; }
.masonry { columns: 2 220px; column-gap: 1.25rem; }
@media (min-width: 1100px) { .masonry { columns: 4; } }
.masonry figure { break-inside: avoid; margin-bottom: 1.5rem; }
.masonry figcaption strong { display: block; color: var(--ink); font-weight: 500; }

.table-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(3.5rem, 8vw, 6rem); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
th { text-align: left; font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--ink); }
td { padding: .7rem .75rem .7rem 0; border-bottom: 1px solid var(--line); }

.next { display: block; max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--pad); border-top: 1px solid var(--line); }
.next span { display: block; color: var(--ink-2); font-size: .9rem; }
.next strong { font-weight: 500; font-size: clamp(2.5rem, 8vw, 7rem); letter-spacing: -0.03em; line-height: 1; transition: color .3s; }
.next:hover strong { color: var(--accent); }

/* About */
.about { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 10vw, 8rem) var(--pad) 4rem; display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1.6fr; } }
.about-photo img { width: min(100%, 420px); height: auto; }
.about-text h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 2rem; }
.about-text p { font-size: 1.15rem; max-width: 56ch; }
.cv { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 10vw, 8rem); display: grid; gap: 3rem; }
@media (min-width: 900px) { .cv { grid-template-columns: repeat(2, 1fr); column-gap: 5rem; } }
.cv h2 { font-size: 1rem; border-top: 1px solid var(--ink); padding-top: .8rem; margin-bottom: .5rem; }
.cv ul { list-style: none; margin: 0; padding: 0; }
.cv li { display: grid; grid-template-columns: 1.3fr 1.3fr .7fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.cv li span:not(:first-child) { color: var(--ink-2); }
.cv li span:last-child { text-align: right; }
/* Tools: category + tool list only, no organization or year column */
.cv-tools li { grid-template-columns: 1fr 2.3fr; }
.cv-tools li span:last-child { text-align: left; }

/* Footer */
.foot { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) var(--pad) 2rem; border-top: 1px solid var(--line); }
.foot-big { font-size: clamp(2.2rem, 6vw, 5rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 2.5rem; }
.foot-big a { font-family: var(--serif); font-style: italic; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.foot-big a:hover { color: var(--accent); }
.foot ul { list-style: none; padding: 0; margin: 0 0 3rem; display: flex; gap: 2rem; flex-wrap: wrap; }
.foot li a { border-bottom: 1px solid var(--line); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(10,10,9,.94); display: grid; place-items: center; padding: 3vw; overflow: auto; }
.lightbox[hidden] { display: none; }
/* light sheet behind the zoomed image: see-through plans, sections and sketches have dark ink that would vanish on the dark overlay
   (opaque photos cover it completely) */
.lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; cursor: zoom-out; background: #f4f2ee; border-radius: 4px; }
/* drawings: same look as on the page (page colour behind, dark-mode filter copied by main.js), no sheet */
.lightbox.drawing { background: var(--bg); }  /* solid: see-through plans must not show the page behind */
.lightbox.drawing img { background: none; }
.lightbox.drawing button { color: var(--ink); }
/* previous / next level arrows while a floor plan is zoomed: same thin chevron as on the page */
.lightbox .lightbox-nav { top: 50%; right: auto; width: 3rem; height: 4rem; margin-top: -2rem; display: grid; place-items: center; font-size: 0;
  opacity: .75; transition: opacity .2s, transform .2s; }
.lightbox .lightbox-nav[hidden] { display: none; }
.lightbox .lightbox-nav:hover { opacity: 1; }
.lightbox .lightbox-nav svg { width: 1rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lightbox .prev-level { left: clamp(.25rem, 2vw, 1.5rem); }
.lightbox .next-level { left: auto; right: clamp(.25rem, 2vw, 1.5rem); }
.lightbox .prev-level:hover { transform: translateX(-3px); }
.lightbox .next-level:hover { transform: translateX(3px); }
/* plan zoom: bottom bar with level buttons centred and the level title + north sign at the right edge */
.lightbox.plan { padding-bottom: calc(var(--bar-h, 5rem) + 1.5rem); }
.lightbox.plan img { max-height: calc(100vh - var(--bar-h, 5rem) - 3rem); }
.lightbox-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding: .9rem clamp(1rem, 3vw, 2rem); background: var(--bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); cursor: default; }
.lightbox-bar[hidden] { display: none; }
.lightbox-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.lightbox .lightbox-levels button { position: static; font: inherit; font-size: .9rem; line-height: 1.2; min-width: 2.75rem; padding: .45rem .8rem;
  border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lightbox .lightbox-levels button:hover { border-color: var(--ink); }
.lightbox .lightbox-levels button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lightbox-title { margin: 0; justify-self: end; color: var(--ink); font-weight: 500; font-size: 1.15rem; white-space: nowrap; }
@media (max-width: 700px) {
  .lightbox-bar { grid-template-columns: 1fr; justify-items: center; gap: .5rem; }
  .lightbox-bar > span { display: none; }
  .lightbox-title { justify-self: center; order: -1; }
}
.lightbox.full img { max-width: none; max-height: none; width: 220%; }
.lightbox button { position: fixed; top: 1rem; right: 1.25rem; background: none; border: 0; color: #fff; font-size: 2.5rem; cursor: pointer; line-height: 1; }

/* Motion */
/* Content stays visible unless JS is running and can reveal it. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .work-item figure img { transition: none; }
}