/* Akshara Gunda — futuristic silver
   Layout: 12-column editorial grid; dark pages for imagery (home, gallery, media),
   light pages for reading (resume, about, contact). Silver comes from light, never flat grey. */

:root {
  --obsidian: #0a0a0a;
  --gallery: #f7f7f5;
  --porcelain: #ececea;
  --mercury: #cfd0d2;   /* silver text on dark, 13:1 */
  --pewter: #a2a3a6;    /* captions on dark, 8:1 */
  --graphite: #4a4b4e;  /* captions on light, 8.4:1 */
  --champagne: #c6a46a; /* the one warm note */

  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --wide: 'Lexend Zetta', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Jost', Futura, 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --ease: cubic-bezier(.22, .61, .2, 1);
  --ease-lux: cubic-bezier(.7, 0, .2, 1);

  --chrome-on-dark: linear-gradient(100deg, #7d7f83 0%, #f4f4f2 16%, #9a9ca0 30%, #e9eaeb 44%, #6c6e72 58%, #fbfbf9 72%, #a5a7ab 86%, #e2e3e4 100%);
  --chrome-on-light: linear-gradient(100deg, #111 0%, #5d5f63 18%, #1c1c1d 34%, #707276 50%, #141415 66%, #55575b 82%, #161617 100%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--gallery);
  font-family: var(--sans);
  font-weight: 350;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }

/* ── Tone ───────────────────────────────────────── */
.tone-dark  { background: var(--obsidian); color: var(--gallery);  --muted: var(--pewter);   --rule: rgba(255,255,255,.14); --chrome: var(--chrome-on-dark); }
.tone-light { background: var(--gallery);  color: var(--obsidian); --muted: var(--graphite); --rule: rgba(0,0,0,.14);       --chrome: var(--chrome-on-light); }
body.tone-light { color-scheme: light; }

/* ── Type ───────────────────────────────────────── */
.display { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; line-height: .92; }
.h1 { font-size: clamp(2.6rem, 7.2vw, 6.75rem); }
.h2 { font-size: clamp(2rem, 4.6vw, 4.25rem); }
.h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: .08em; line-height: 1.1; }
.label { font-family: var(--wide); font-weight: 300; font-size: .64rem; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--muted); }
.chrome-text {
  background: var(--chrome); background-size: 260% 100%; background-position: var(--sheen, 30%) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { .chrome-text { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }

/* ── Layout ─────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 12vw, 168px); }
.section-tight { padding-block: clamp(48px, 7vw, 96px); }
.page-top { padding-top: clamp(120px, 16vw, 200px); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }

/* ── Buttons & links ────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  min-height: 48px; padding: 0 1.8em; border: 1px solid currentColor; border-radius: 999px;
  overflow: hidden; isolation: isolate; text-align: center;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--chrome-on-dark); background-size: 220% 100%;
  transform: translateY(101%); transition: transform .6s var(--ease-lux), background-position 1.2s var(--ease);
}
.tone-light .btn::before { background: var(--obsidian); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); background-position: 100% 50%; }
.tone-dark .btn:hover, .tone-dark .btn:focus-visible { color: var(--obsidian); border-color: transparent; }
.tone-light .btn:hover, .tone-light .btn:focus-visible { color: var(--gallery); }
.btn-solid { background: var(--gallery); color: var(--obsidian); border-color: var(--gallery); }
.tone-light .btn-solid { background: var(--obsidian); color: var(--gallery); border-color: var(--obsidian); }
.btn-ghost { border-color: var(--rule); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link { position: relative; display: inline-block; padding-block: .35em; }
.text-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: .15em; height: 1px; background: currentColor; opacity: .3; transition: opacity .5s var(--ease); }
.text-link:hover::after, .text-link:focus-visible::after { opacity: 1; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--gallery); color: var(--obsidian); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Image frames: chrome sheen on hover ────────── */
.frame { position: relative; overflow: hidden; background: #1a1a1a; }
.tone-light .frame { background: var(--porcelain); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.frame::after {
  content: ''; position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0) 42%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 58%, transparent 62%);
  transform: translateX(-70%); opacity: 0;
}
@media (hover: hover) {
  a:hover .frame img, button:hover .frame img { transform: scale(1.035); }
  a:hover .frame::after, button:hover .frame::after { animation: sheen 1.3s var(--ease) forwards; }
}
@keyframes sheen { from { transform: translateX(-70%); opacity: 1; } to { transform: translateX(70%); opacity: 1; } }
.arch { border-radius: 999px 999px 0 0 / 50vw 50vw 0 0; }

.js .unveil { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-lux); }
.js .unveil.is-in { clip-path: inset(0 0 0 0); }

/* ── Liquid chrome bands ────────────────────────── */
.liquid { position: relative; overflow: hidden; background: #111 center / cover no-repeat; }
.liquid canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.liquid canvas.on { opacity: 1; }
.band { height: clamp(140px, 24vh, 280px); }

/* ── Header ─────────────────────────────────────── */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--hdr-fg, var(--gallery)); view-transition-name: site-header; transition: background-color .6s var(--ease), color .6s var(--ease); }
body.tone-light .site-header { --hdr-fg: var(--obsidian); --hdr-bg: var(--gallery); }
body.overlay-header .site-header { --hdr-fg: var(--gallery); --hdr-bg: var(--obsidian); }
.site-header.scrolled { background: color-mix(in srgb, var(--hdr-bg, var(--obsidian)) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.site-header.menu-open { --hdr-fg: var(--gallery); --hdr-bg: var(--obsidian); }
.bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 76px; }
.wordmark { font-size: 1.05rem; letter-spacing: .26em; line-height: 1; white-space: nowrap; }
.nav ul { display: flex; justify-content: center; gap: clamp(14px, 2vw, 34px); }
.nav a, .direct a { position: relative; padding-block: 8px; display: inline-flex; align-items: center; gap: 8px; }
.nav a { opacity: .78; transition: opacity .3s; }
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a[aria-current]::after { content: ''; position: absolute; left: 0; right: .08em; bottom: 2px; height: 1px; background: currentColor; }
.direct { display: flex; align-items: center; gap: 22px; }
.ico { width: 20px; height: 20px; display: none; }
.menu-btn { display: none; min-height: 44px; padding-inline: 4px; letter-spacing: inherit; text-transform: uppercase; }
.menu-btn .close-t { display: none; }
.menu-btn[aria-expanded='true'] .open-t { display: none; }
.menu-btn[aria-expanded='true'] .close-t { display: inline; }
.menu { position: fixed; inset: 76px 0 0 0; padding: 6vh var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; background: var(--obsidian); color: var(--gallery); }
.menu ul { display: grid; gap: 2px; }
.menu a { display: block; font-size: clamp(2rem, 9vw, 3.4rem); padding-block: .18em; }
.menu a[aria-current] { background: var(--chrome-on-dark); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-flex; align-items: center; }
}
@media (max-width: 640px) {
  .bar { height: 64px; gap: 12px; }
  .menu { inset-block-start: 64px; }
  .wordmark { font-size: .86rem; letter-spacing: .2em; }
  .direct .txt { display: none; }
  .ico { display: block; }
  .direct { gap: 10px; }
  .direct a { padding: 10px 4px; min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ── Mobile quick bar ───────────────────────────── */
.quickbar { display: none; }
@media (max-width: 760px) {
  .quickbar {
    position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: repeat(4, 1fr); height: 52px; border-radius: 999px;
    background: color-mix(in srgb, var(--obsidian) 82%, transparent); color: var(--gallery);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-size: .58rem; letter-spacing: .05em;
  }
  .quickbar a, .quickbar button { display: grid; place-items: center; text-align: center; padding: 0 4px; text-transform: uppercase; letter-spacing: inherit; }
  .quickbar > * + * { border-left: 1px solid rgba(255,255,255,.12); }
  .site-footer { padding-bottom: 96px !important; }
}

/* ── Footer ─────────────────────────────────────── */
.site-footer { padding: clamp(64px, 9vw, 120px) 0 48px; border-top: 1px solid var(--rule); }
.site-footer .name { display: inline-block; font-size: clamp(2rem, 6vw, 5rem); letter-spacing: .1em; margin-bottom: clamp(40px, 6vw, 72px); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-cols ul { margin-top: 14px; display: grid; gap: 4px; }
.legal { display: grid; align-content: end; gap: 6px; justify-items: end; text-align: right; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr; gap: 36px; } .legal { justify-items: start; text-align: left; } }

/* ── Home ───────────────────────────────────────── */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--gallery); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hero-media img { animation: heroIn 2.4s var(--ease) both; }
@keyframes heroIn { from { opacity: 0; transform: scale(1.06); } }
@supports (animation-timeline: scroll()) {
  .hero-media { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  @keyframes drift { to { transform: translateY(14%); } }
}
.scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 26%, rgba(10,10,10,0) 48%, rgba(10,10,10,.82) 100%); }
.hero-copy { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(28px, 6vh, 64px); }
.hero-name { font-size: clamp(3.4rem, 14.5vw, 15rem); letter-spacing: .04em; line-height: .84; display: grid; margin-left: -.04em; animation: rise 1.8s .25s var(--ease-lux) both; }
.hero-name span:last-child { padding-left: .9em; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
.hero-foot { margin-top: clamp(24px, 4vh, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.roles { color: var(--mercury); }

.tile { display: grid; gap: 18px; align-content: start; }
.tile-copy { display: grid; gap: 6px; }
.tile-reel { grid-column: 1 / span 7; grid-row: span 2; }
.tile-reel .frame, .tile-head .frame { aspect-ratio: 4 / 5; }
.tile-head { grid-column: 9 / span 4; }
.tile-contact { grid-column: 9 / span 4; margin-top: clamp(16px, 4vw, 56px); }
.tile-contact .frame { aspect-ratio: 3 / 2; }
.intro { padding: 0 0 clamp(80px, 12vw, 168px); }
.intro .wrap { display: grid; gap: 28px; justify-items: start; }
.intro-text { font-family: var(--serif); font-size: clamp(1.6rem, 3.3vw, 3rem); line-height: 1.22; max-width: 26ch; margin-left: 25%; }
.intro .text-link { margin-left: 25%; }
.quote blockquote { font-size: clamp(1.8rem, 4.4vw, 4rem); line-height: 1.08; letter-spacing: .04em; max-width: 22ch; text-wrap: balance; }
.quote .mark { color: var(--champagne); margin-right: .08em; }
.quote figcaption { margin-top: 32px; }
@media (max-width: 900px) {
  .tile-reel, .tile-head, .tile-contact { grid-column: 1 / -1; grid-row: auto; margin: 0; }
  .tile-head { grid-column: 1 / span 7; }
  .tile-contact { grid-column: 6 / -1; margin-top: -10%; }
  .intro-text, .intro .text-link { margin-left: 0; }
}
@media (max-width: 640px) {
  .hero { height: 92svh; }
  .hero-media img, .hero-media video { object-position: 78% 30%; }
  .hero-name { font-size: 19.5vw; }
  .hero-name span:last-child { padding-left: .45em; }
  .hero .btn-row { width: 100%; }
  .hero .btn-row > * { flex: 1 1 100%; }
  .tile-head, .tile-contact { grid-column: 1 / -1; margin-top: 0; }
}

/* ── Resume ─────────────────────────────────────── */
.r-head { align-items: end; gap: 24px 32px; }
.r-head h1 { grid-column: 1 / span 7; }
.r-head .lede { grid-column: 9 / span 4; font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; }
.r-head .btn-row { grid-column: 1 / -1; margin-top: 16px; }
.shots { align-items: end; }
.shot-main { grid-column: 1 / span 6; }
.shot-main .frame, .shot-others .frame { aspect-ratio: 4 / 5; }
.shot-others { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.shots figcaption { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin-top: 12px; }
.stats dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-block: 1px solid var(--rule); }
.stats dl > div { padding: 22px 16px 22px 0; }
.stats dd { font-family: var(--serif); font-size: 1.25rem; margin-top: 4px; }
.resume { display: grid; gap: clamp(48px, 6vw, 80px); }
.r-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 32px; }
.r-block h2 { grid-column: 1 / span 3; }
.rows, .skills { grid-column: 4 / -1; }
.rows li { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rows.two li { grid-template-columns: 1fr 2fr; }
.proj { font-family: var(--serif); text-transform: uppercase; letter-spacing: .08em; font-size: .98rem; }
.skills { font-family: var(--serif); font-size: 1.15rem; line-height: 1.7; max-width: 60ch; }
@media (max-width: 900px) {
  .r-head h1, .r-head .lede, .shot-main, .shot-others, .r-block h2, .rows, .skills { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .r-head .btn-row > * { flex: 1 1 100%; }
  .shot-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows li, .rows.two li { grid-template-columns: 1fr; gap: 2px; }
  .stats dl { grid-template-columns: repeat(2, 1fr); }
}

/* ── Gallery ────────────────────────────────────── */
.g-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.filters { display: inline-flex; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; }
.filters button { min-height: 40px; padding: 0 18px; border-radius: 999px; text-transform: uppercase; letter-spacing: inherit; color: var(--muted); transition: color .4s, background .5s var(--ease); }
.filters button[aria-pressed='true'] { background: var(--chrome-on-dark); background-size: 200% 100%; color: var(--obsidian); }
/* Modular grid: regular = 1 unit, tall = 2 units high, wide = 2×2. Always tiles cleanly. */
.g-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: 4.1667cqw; column-gap: var(--g); --g: clamp(12px, 1.8vw, 28px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.g-grid.fading { opacity: 0; transform: translateY(6px); }
.cell { grid-column: span 4; grid-row: span 6; padding-bottom: var(--g); }
.cell.tall { grid-row: span 12; }
.cell.wide { grid-column: span 8; grid-row: span 12; }
.cell a { position: relative; display: block; height: 100%; }
.cell .frame { height: 100%; }
.cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: var(--gallery); background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.cell a:hover .cap, .cell a:focus-visible .cap { opacity: 1; }
@media (hover: none) { .cap { opacity: 1; } }
@media (max-width: 900px) {
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 6.25cqw; }
  .cell, .cell.tall { grid-column: span 1; }
  .cell.wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .filters { width: 100%; justify-content: space-between; } .filters button { padding: 0 10px; flex: 1; } }

/* ── Lightbox & reel player ─────────────────────── */
.lightbox, .player { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #070707; color: var(--gallery); --muted: var(--pewter); overflow: hidden; }
.lightbox::backdrop, .player::backdrop { background: #000; }
.lightbox[open], .player[open] { animation: fadeIn .45s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } }
.lightbox figure { height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 64px clamp(16px, 6vw, 96px) 20px; }
.lb-stage { display: grid; place-items: center; min-height: 0; touch-action: pan-y; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .35s var(--ease); }
.lb-stage img.swap { opacity: 0; }
.lightbox figcaption { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; padding-top: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.lb-nav { position: absolute; top: 50%; translate: 0 -50%; width: 56px; height: 96px; font-family: var(--serif); font-size: 2.6rem; opacity: .7; }
.lb-nav:hover { opacity: 1; }
.lb-prev { left: 4px; } .lb-next { right: 4px; }
.dlg-close { position: absolute; top: 12px; right: var(--gutter); min-height: 44px; padding-inline: 8px; text-transform: uppercase; z-index: 2; }
@media (max-width: 640px) { .lb-nav { display: none; } .lightbox figure { padding-inline: 8px; } }
.player .inner { height: 100%; display: grid; grid-template-rows: 56px 1fr; padding: 12px var(--gutter) 24px; }
.player .screen-wrap { display: grid; place-items: center; }
.player iframe { width: min(100%, calc((100dvh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; background: #000; }
.player .empty { text-align: center; max-width: 36ch; color: var(--pewter); }

/* ── Media ──────────────────────────────────────── */
.m-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: clamp(32px, 5vw, 64px); }
.jump { display: flex; gap: 22px; flex-wrap: wrap; }
.jump a { padding-block: 10px; opacity: .8; } .jump a:hover { opacity: 1; }
.group { padding-block: clamp(40px, 6vw, 88px); border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.group h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.reels { align-items: start; }
.reel { grid-column: span 4; display: grid; gap: 12px; }
.reel.large { grid-column: span 8; }
.reels.single .reel.large { grid-column: 1 / span 9; }
.screen { position: relative; aspect-ratio: 16 / 9; width: 100%; display: block; background: #151515; }
.screen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { position: absolute; inset: 0; display: grid; place-items: center; }
.play svg { width: clamp(56px, 7vw, 84px); height: auto; transition: transform .8s var(--ease); }
.screen:hover .play svg, .screen:focus-visible .play svg { transform: scale(1.08) rotate(-8deg); }
.soon { background: rgba(10,10,10,.75); padding: 10px 14px; border-radius: 999px; }
.reel-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.reel-title { font-size: 1.05rem; letter-spacing: .1em; line-height: 1.25; }
.reel.large .reel-title { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.len { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reviews ul { display: grid; gap: clamp(56px, 8vw, 112px); margin-top: clamp(40px, 6vw, 72px); }
.reviews li:nth-child(even) figure { margin-left: auto; text-align: right; }
.reviews figure { max-width: 24ch; font-size: clamp(1.7rem, 3.6vw, 3.25rem); }
.reviews blockquote { line-height: 1.1; letter-spacing: .035em; text-wrap: balance; }
.reviews figcaption { font-size: .62rem; margin-top: 22px; }
cite { font-style: normal; }
@media (max-width: 900px) { .reel, .reel.large, .reels.single .reel.large { grid-column: 1 / -1; } }

/* ── About ──────────────────────────────────────── */
.spread { padding-bottom: clamp(72px, 10vw, 140px); align-items: start; }
.portrait { grid-column: 1 / span 5; position: sticky; top: 100px; }
.portrait .frame { aspect-ratio: 4 / 5; }
.portrait figcaption { margin-top: 12px; }
.a-text { grid-column: 7 / -1; display: grid; gap: clamp(24px, 3vw, 40px); }
.a-text h1 { font-size: clamp(2.4rem, 5.6vw, 5.4rem); }
.standfirst { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.35; max-width: 30ch; }
.bio { max-width: 58ch; font-family: var(--serif); font-size: 1.2rem; line-height: 1.7; }
.bio::first-letter { float: left; font-size: 4.4em; line-height: .78; padding: .06em .08em 0 0; text-transform: uppercase; }
.a-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 32px; border-top: 1px solid var(--rule); }
.a-cols h2 { margin-bottom: 18px; }
.a-cols dl { display: grid; gap: 14px; }
.a-cols dd { font-family: var(--serif); font-size: 1.1rem; }
.a-cols ul { display: grid; gap: 10px; font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; }
@media (max-width: 900px) { .portrait, .a-text { grid-column: 1 / -1; position: static; } .a-cols { grid-template-columns: 1fr; } }

/* ── Contact ────────────────────────────────────── */
.c-top { display: grid; gap: 20px; padding-bottom: clamp(40px, 6vw, 80px); }
.c-top .lede { font-family: var(--serif); font-size: 1.25rem; max-width: 40ch; }
.reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.rep { display: grid; align-content: start; gap: 12px; padding: 32px clamp(16px, 2.5vw, 36px) 40px 0; min-width: 0; }
.rep + .rep { padding-left: clamp(16px, 2.5vw, 36px); border-left: 1px solid var(--rule); }
.company { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: .07em; line-height: 1.1; }
.who { display: grid; gap: 2px; }
.rep .btn-row { margin-top: 12px; }
.direct-block { display: grid; gap: 12px; justify-items: start; border-top: 1px solid var(--rule); margin-top: clamp(32px, 5vw, 64px); }
.big { font-size: clamp(1.15rem, 3.4vw, 2.6rem); letter-spacing: .06em; text-transform: none; overflow-wrap: anywhere; }
.big:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (max-width: 900px) {
  .reps { grid-template-columns: 1fr; }
  .rep + .rep { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .rep .btn-row > * { flex: 1 1 auto; }
}

/* ── 404 ────────────────────────────────────────── */
.nf { position: relative; min-height: 100svh; display: grid; align-items: center; }
.nf .liquid { position: absolute; inset: 0; opacity: .55; }
.nf .wrap { position: relative; display: grid; gap: 20px; justify-items: start; }

/* ── Page turns ─────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .55s var(--ease-lux) both page-out; }
::view-transition-new(root) { animation: .9s var(--ease-lux) both page-in; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes page-out { to { opacity: .2; transform: translateX(-3%); } }
@keyframes page-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .js .unveil { clip-path: none; }
}

/* ── Direction B: White Gallery ─────────────────────
   Everything on gallery white; silver arrives as graphite chrome type,
   thin architectural arches (the white-tunnel reference) and one quiet band. */
.hero.hero-light { height: auto; min-height: min(100svh, 980px); color: var(--obsidian); background: var(--gallery); display: flex; align-items: flex-end; }
.hero-b { align-items: end; padding-top: 120px; }
.hero-b-copy { grid-column: 1 / span 6; display: grid; gap: 28px; justify-items: start; padding-bottom: clamp(40px, 8vh, 96px); position: relative; z-index: 1; }
.hero-light .hero-name { font-size: clamp(3.4rem, 8.6vw, 9.25rem); }
.hero-light .hero-name span:last-child { padding-left: 0; }
.hero-light .roles { color: var(--graphite); }
.hero-b-art { grid-column: 7 / -1; position: relative; display: flex; justify-content: center; align-items: flex-end; height: min(78svh, 820px); }
.hero-b-photo { position: relative; width: 62%; height: 84%; animation: heroIn 2.4s var(--ease) both; }
.ring { position: absolute; bottom: 0; border: 1px solid rgba(10,10,10,.16); border-bottom: 0; border-radius: 999px 999px 0 0 / 50% 50% 0 0; pointer-events: none; }
.ring.r1 { width: 74%; height: 91%; }
.ring.r2 { width: 87%; height: 97%; border-color: rgba(10,10,10,.11); }
.ring.r3 { width: 100%; height: 100%; border-color: rgba(10,10,10,.07); }
[data-dir='b'] .liquid.band { height: clamp(72px, 10vh, 120px); filter: grayscale(1) brightness(1.18) contrast(.85); }
[data-dir='b'] .site-footer { border-top-color: rgba(0,0,0,.14); }
[data-dir='b'] .quote .mark { color: var(--graphite); }
@media (max-width: 900px) {
  .hero-b-copy, .hero-b-art { grid-column: 1 / -1; }
  .hero-b-copy { padding-bottom: 0; order: 2; }
  .hero-b-art { height: 62svh; order: 1; }
  .hero-light .hero-name { font-size: 17vw; }
}

/* ── Review-only direction switch ───────────────── */
.dir-switch { position: fixed; z-index: 60; left: 50%; top: 86px; translate: -50% 0; display: flex; padding: 4px; border-radius: 999px; background: rgba(10,10,10,.86); color: var(--gallery); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .55rem; }
.dir-switch button { min-height: 40px; padding: 0 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: inherit; color: var(--pewter); }
.dir-switch button[aria-pressed='true'] { background: var(--chrome-on-dark); background-size: 200% 100%; color: var(--obsidian); }
@media (max-width: 760px) { .dir-switch { top: auto; translate: none; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); justify-content: center; } .dir-switch button { flex: 1; padding: 0 8px; } }

/* ── Chrome off: pure black & white ─────────────────
   Set "chrome": true in content/site.json to bring the silver back. */
[data-chrome='off'] .chrome-text { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
[data-chrome='off'] .quote .mark { color: inherit; }
[data-chrome='off'] .frame::after { display: none; }
[data-chrome='off'] .btn::before { background: var(--gallery); }
[data-chrome='off'] .tone-light .btn::before { background: var(--obsidian); }
[data-chrome='off'] .filters button[aria-pressed='true'] { background: var(--gallery); }
[data-chrome='off'] .tone-light .filters button[aria-pressed='true'] { background: var(--obsidian); color: var(--gallery); }
[data-chrome='off'] .menu a[aria-current] { background: none; color: var(--gallery); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
[data-chrome='off'] .play svg stop { stop-color: #f7f7f5 !important; }
.rep-panel { display: grid; align-content: center; gap: 14px; aspect-ratio: 3 / 2; padding: clamp(20px, 3vw, 36px); background: var(--obsidian) !important; color: var(--gallery); }
.rep-panel > span { display: grid; gap: 2px; }
.rep-panel .display { font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: .08em; line-height: 1.15; }
.rep-panel .label { color: var(--pewter); }


/* ═══ Aesthetic pass: silver as light, framing and rhythm ═══ */

/* Chrome hairlines: section edges catch a slow drift of light instead of a flat grey rule */
@keyframes hair { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
[data-chrome='on'] .group, [data-chrome='on'] .reps, [data-chrome='on'] .direct-block, [data-chrome='on'] .a-cols, [data-chrome='on'] .site-footer { border-top-color: transparent; position: relative; }
[data-chrome='on'] .group::before, [data-chrome='on'] .reps::before, [data-chrome='on'] .direct-block::before, [data-chrome='on'] .a-cols::before, [data-chrome='on'] .site-footer::before {
  content: ''; position: absolute; top: -1px; height: 1px; left: var(--gutter); right: var(--gutter);
  background: var(--chrome); background-size: 300% 100%; opacity: .7; animation: hair 16s linear infinite;
}
[data-chrome='on'] .a-cols::before, [data-chrome='on'] .reps::before { left: 0; right: 0; }
[data-chrome='on'] .reps { border-top: 1px solid transparent; }
[data-chrome='on'] .stats dl { border-image: var(--chrome) 1; }

/* Silver arches behind her portraits (the white-tunnel reference): framing, never on her face */
.arch-wrap { position: relative; isolation: isolate; }
.arch-ring {
  position: absolute; z-index: -1; pointer-events: none;
  border-radius: 999px 999px 0 0 / 50vw 50vw 0 0;
  padding: 1px 1px 0; background: var(--chrome); background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hair 24s linear infinite;
}
.arch-ring.r1 { inset: -14px -14px 0 -14px; opacity: .55; }
.arch-ring.r2 { inset: -32px -32px 0 -32px; opacity: .28; }
@media (max-width: 640px) { .arch-ring.r1 { inset: -8px -8px 0 -8px; } .arch-ring.r2 { inset: -18px -18px 0 -18px; } }

/* The chrome ring (reference 3): a slow metallic torus with a fine mesh, half hidden behind the portrait */
.torus {
  position: absolute; z-index: -2; pointer-events: none;
  width: 58%; aspect-ratio: 1; top: -9%; right: -22%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(10,10,10,.22) 0 .6deg, transparent .6deg 3deg),
    conic-gradient(from 20deg, #6c6e72, #f6f6f4 12%, #8d8f93 24%, #e9eaeb 38%, #55575b 50%, #fbfbf9 63%, #9a9ca0 76%, #f0f0ee 88%, #6c6e72);
  -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 61.5%, #000 98%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 60%, #000 61.5%, #000 98%, transparent 100%);
  animation: spin 140s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
@media (max-width: 900px) { .torus { width: 52%; right: -8%; top: -6%; } }
.portrait { overflow: visible; }

/* Image loading state: a quiet sweep of light across the empty frame */
.frame:not(.loaded)::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: load-sweep 1.6s linear infinite;
}
.tone-light .frame:not(.loaded)::before { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); }
@keyframes load-sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.frame img { position: relative; z-index: 1; }

/* Gallery filter counts */
.filters .n { margin-left: .7em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .filters .n { display: none; } }

/* Opening moment: one line of light, then the curtain lifts */
.veil { position: fixed; inset: 0; z-index: 200; background: var(--obsidian); pointer-events: none; display: grid; place-items: center; animation: veil-up .9s .75s var(--ease-lux) forwards; }
.veil-line { width: min(60vw, 720px); height: 1px; background: var(--chrome-on-dark); background-size: 200% 100%; transform: scaleX(0); animation: veil-line .8s var(--ease-lux) forwards, hair 2s linear infinite; }
@keyframes veil-line { to { transform: scaleX(1); } }
@keyframes veil-up { to { clip-path: inset(0 0 100% 0); } }
.has-veil .hero-name { animation-delay: 1.1s; }
.frame::after { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .veil { display: none; } }

/* Reel cards: title sits in the frame on hover, like a screening slate */
.screen::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.screen:hover::before, .screen:focus-visible::before { opacity: 1; }
.play { z-index: 3; }