/* =====================================================================
   ABOUT — the black wall (#about), layout = about.pdf. Same rules as the rest of the site:
   · every size = design px × var(--u) on the 1920×1080 artboard; type only through the tokens (type.css)
   · reveal = the .rv blur-in of styles.css (the root has .is-out until the camera has almost arrived)
   · the wall itself (dark texture) and the 3D turn live in room.css; About has no background of its own
   · no vertical scroll on desktop; below 760px it becomes a normal scrolling page
   ===================================================================== */
.about {
  --min-xs: 11; --min-s: 13; --min-m: 16; --min-l: 22; --min-xl: 40;   /* About packs more on one screen, so its type may get a little smaller than the global floors on cramped screens */
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}
.about .ab { pointer-events: none; }
.nav a[aria-current="page"] { opacity: 1; }

/* ---------- content layer ---------- */
.ab { position: absolute; inset: 0; }
.ab > * { position: absolute; pointer-events: auto; }
.ab-label { font-size: var(--fs-xs); line-height: var(--lh-xs); opacity: .7; }

/* ---------- portrait: framed card with the gallery parallax ---------- */
.ab-portrait { left: calc(324 * var(--u)); top: var(--top); width: calc(259 * var(--u)); aspect-ratio: 1; margin: 0; will-change: transform; }
.ab-photo { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; background: #fff;
  border: max(2px, calc(var(--frame, 3) * var(--u))) solid #fff; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .25); }
.ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; will-change: transform; transform: scale(1.14); }

/* ---------- name + bio ---------- */
.ab-who { left: var(--anchor); top: var(--top); width: calc(212 * var(--u)); }
.ab-name { font-weight: 400; font-size: var(--fs-l); line-height: var(--lh-l); letter-spacing: -.005em; }
.ab-name > span { display: inline-block; }
.ab-im { display: block !important; margin-bottom: calc(9 * var(--u)); font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0; opacity: .7; }
.ab-bio { margin-top: calc(10 * var(--u)); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.ab-bio p + p { margin-top: var(--lh-xs); }

/* ---------- design process: vertical accordion, a card opens under the item ---------- */
.ab-process { left: calc(1122 * var(--u)); top: var(--top); width: calc(270 * var(--u)); }
.ab-steps { list-style: none; margin-top: calc(4.66 * var(--u)); }
.ab-step__b { display: block; width: 100%; text-align: left; padding: calc(14 * var(--u)) 0; font-size: var(--fs-m); line-height: var(--lh-m); transition: padding-bottom .7s var(--ease); }
.ab-step.is-on .ab-step__b { padding-bottom: calc(9.3 * var(--u)); }
.ab-step__b:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.ab-step__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.ab-step.is-on .ab-step__more { grid-template-rows: 1fr; }
.ab-step__in { min-height: 0; overflow: hidden; }
.ab-step__in p { padding-bottom: calc(12.7 * var(--u)); font-size: var(--fs-xs); line-height: var(--lh-xs); opacity: 0; filter: blur(var(--t-blur, 10px)); transition: opacity .25s ease, filter .25s ease; }
.ab-step.is-on .ab-step__in p { opacity: 1; filter: none; transition: opacity .45s ease .3s, filter .45s ease .3s; }

/* ---------- clients ---------- */
.ab-clients { left: calc(1521 * var(--u)); top: var(--top); }
.ab-clients ul { list-style: none; margin-top: calc(8 * var(--u)); }
.ab-clients li { font-size: var(--fs-xs); line-height: var(--lh-xs); }

/* ---------- bottom bar ---------- */
.ab-foot { bottom: calc(29 * var(--u)); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.ab-foot--made { left: calc(33 * var(--u)); }
.ab-foot--social { left: var(--anchor); display: flex; gap: calc(56 * var(--u)); }
.ab-foot--time { right: calc(20 * var(--u)); font-variant-numeric: tabular-nums; opacity: .85; }

@media (prefers-reduced-motion: reduce) { .ab-step__more, .ab-step__b, .ab-step__in p { transition: none; } }

/* ---------- small screens: a plain scrolling page ---------- */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .about { position: relative; overflow: visible; pointer-events: auto; }
  .ab { position: relative; inset: auto; min-height: 100%; display: flex; flex-direction: column; gap: 36px; padding: 120px 20px 88px; }
  .ab > * { position: static; }
  .ab-portrait { width: 62%; }
  .ab-who, .ab-process, .ab-clients { width: auto; }
  .ab-name { font-size: var(--fs-xl); line-height: var(--lh-xl); }
  .ab-bio { font-size: var(--fs-s); line-height: var(--lh-s); margin-top: 16px; }
  .ab-bio p + p { margin-top: var(--lh-s); }
  .ab-label, .ab-clients li, .ab-step__in p { font-size: var(--fs-s); line-height: var(--lh-s); }
  .ab-step__b { padding: 14px 0; }
  .ab-step.is-on .ab-step__b { padding-bottom: 4px; }
  .ab-clients ul { margin-top: 10px; columns: 2; }
  .ab-foot { font-size: var(--fs-s); line-height: var(--lh-s); }
  .ab-foot--social { gap: 28px; }
  .wall--about .top { position: fixed; }
}

/* before the camera arrives the wall is already full of content, only softly blurred; it sharpens once the wall is settled */
.about.is-out .rv { opacity: .5; filter: blur(6px); transition: none; }
.about .rv { transition: opacity .45s ease calc(var(--d, 0s) * .35), filter .45s ease calc(var(--d, 0s) * .35); }

/* before the camera arrives the wall is already full of content, only softly blurred; it sharpens once the wall is settled */
.about.is-out .rv { opacity: .5; filter: blur(6px); transition: none; }
.about .rv { transition: opacity .45s ease calc(var(--d, 0s) * .35), filter .45s ease calc(var(--d, 0s) * .35); }


/* ---------- About wall: softer text, light switch, flashlight ---------- */
@property --lr { syntax: '<length>'; inherits: true; initial-value: 0px; }
.wall--about { --logo: #687377; --fg: #c9c7c3; color: var(--fg); --mx: 50vw; --my: 45vh; --lr: 0px; --spot: calc(var(--fl1-r, 330) * var(--u)); transition: --lr .9s var(--ease); }

/* the switch: always visible, bottom-left */
.lsw { position: absolute; right: 30px; flex-direction: row-reverse; top: calc(750 * var(--u)); z-index: 5; display: flex; align-items: center; gap: calc(4 * var(--u)); padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lsw:focus-visible .lsw__k { outline: 1px solid #fff; outline-offset: 3px; }
.lsw__t { position: relative; font-size: var(--fs-xs); line-height: var(--lh-xs); white-space: nowrap; color: #e6e3df; background: #262422; border-radius: calc(5 * var(--u)); padding: calc(7 * var(--u)) calc(11 * var(--u)); opacity: 0; transform: translateX(calc(4 * var(--u))); pointer-events: none; transition: opacity .25s ease, transform .25s var(--ease); }
.lsw__t::before { content: ''; position: absolute; right: calc(-4 * var(--u)); top: 50%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); background: #262422; transform: translateY(-50%) rotate(45deg); }
.lsw:hover .lsw__t, .lsw:focus-visible .lsw__t, .is-dark .lsw__t { opacity: 1; transform: none; }

/* lights off: the whole wall (text, photo, header) turns invisible, the texture stays */
.wall--about :is(.about, .top--about) { transition: opacity .6s ease; }
.wall--about.is-dark :is(.about, .top--about) { opacity: 0; }
/* no click for 3 s: a soft flashlight follows the cursor and shows what is under it (variant 14 "spotlight") */
.wall--about.is-spot { --lr: var(--spot); }
.wall--about.is-spot.is-lit { --lr: 160vmax; }
.wall--about.is-spot :is(.about, .top--about) { opacity: 1; -webkit-mask-image: radial-gradient(circle calc(var(--lr) + .01px) at var(--mx) var(--my), #000 0%, #000 40%, rgba(0, 0, 0, var(--fl1-faint, .13)) 100%); mask-image: radial-gradient(circle calc(var(--lr) + .01px) at var(--mx) var(--my), #000 0%, #000 40%, rgba(0, 0, 0, var(--fl1-faint, .13)) 100%); }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .lsw { display: none !important; }   /* no light switch on phones */
  .wall--about { scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .wall--about::-webkit-scrollbar { display: none; }
  .ab { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .wall.wall--about .top { position: fixed; background: linear-gradient(to bottom, #181818 82%, rgba(24, 24, 24, 0)); }   /* header stays reachable while the page scrolls (room.css makes .wall .top absolute) */
}
@media (prefers-reduced-motion: reduce) { .wall--about, .wall--about :is(.about, .top--about) { transition: none; } }

/* lights off: the wall goes almost black, the switch darkens and a small green lamp shows the light can be turned on */
.wall--about::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .93); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wall--about.is-dark::before { opacity: 1; transition: opacity .6s ease; }

/* the switch artwork (img/switch.png, 140x141 box) with a slim indicator pill on the key; pill lights up softly green when the light is off */
.lsw { --sw: max(36px, calc(41 * var(--u))); }
.lsw__k { position: relative; flex: none; width: var(--sw); height: var(--sw); }
.lsw__k { --k: calc(var(--sw) / 128); box-sizing: border-box; background: #1D1C1A; border: calc(2 * var(--k)) solid #2C2A28; border-radius: calc(12 * var(--k)); }
.lsw__c { box-sizing: border-box; position: absolute; left: calc(13 * var(--k)); top: calc(13 * var(--k)); width: calc(98 * var(--k)); height: calc(98 * var(--k)); border: calc(4 * var(--k)) solid #3A3835; border-radius: calc(12 * var(--k)); background: linear-gradient(#33312E, #272523) border-box; box-shadow: 0 calc(4 * var(--k)) calc(2 * var(--k)) rgba(0,0,0,.4); transition: box-shadow .3s ease; }
.lsw__c::after { content: ''; position: absolute; left: calc(25 * var(--k)); top: calc(79 * var(--k)); width: calc(39 * var(--k)); height: calc(5 * var(--k)); border-radius: 99px; background: #3A3835; transition: background .6s ease, box-shadow .6s ease; }
.is-dark .lsw__c { background: linear-gradient(#272523, #33312E) border-box; box-shadow: 0 calc(-4 * var(--k)) calc(2 * var(--k)) rgba(0,0,0,.4); }
.is-dark .lsw__c { border-color: #165B2E; }


/* ---------- Flashlight v2: red X-ray torch. On at once, small, grows after a delay. Hidden wiring and notes show up in the beam, the photo turns into an X-ray.
   (v1 above is untouched; P.FL_VER in the tuner picks which one is used) ---------- */
:root { --fl-r0: 110; --fl-r1: 330; --fl-grow: 1.8s; --fl-in: 40%; --fl-faint: .06; --fl-tint: .35; --fl-xray: 1; --fl-col: #ff3b30; --fl-photo: 1; }
.wall--about.fl2 { --fl-ink: color-mix(in srgb, var(--fl-col) 62%, #ffd8d0); --fg: var(--fl-ink); --logo: var(--fl-ink); }
.wall--about.fl2.is-spot { --lr: calc(var(--fl-r0) * var(--u)); transition: --lr .5s var(--ease); }
.wall--about.fl2.is-spot.is-big { --lr: calc(var(--fl-r1) * var(--u)); transition: --lr var(--fl-grow) cubic-bezier(.45, 0, .2, 1); }
.wall--about.fl2.is-spot.is-lit { --lr: 160vmax; transition: --lr .9s var(--ease); }
.wall--about.fl2.is-spot :is(.about, .top--about) { -webkit-mask-image: radial-gradient(circle calc(var(--lr) + .01px) at var(--mx) var(--my), #000 0%, #000 var(--fl-in), rgba(0, 0, 0, var(--fl-faint)) 100%); mask-image: radial-gradient(circle calc(var(--lr) + .01px) at var(--mx) var(--my), #000 0%, #000 var(--fl-in), rgba(0, 0, 0, var(--fl-faint)) 100%); }

/* the hidden layer inside the wall: studs, cables, boxes, old notes - only the beam reveals it */
.xray { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; color: var(--fl-col);
  -webkit-mask-image: radial-gradient(circle calc(var(--lr) + .01px) at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .92) var(--fl-in), transparent 100%); mask-image: radial-gradient(circle calc(var(--lr) + .01px) at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .92) var(--fl-in), transparent 100%); }
.xray svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fl-col) 70%, transparent)); }
.wall--about.fl2.is-spot .xray { opacity: var(--fl-xray); transition: opacity .5s ease; }
.xray text { font-family: "Faculty Glyphic", sans-serif; font-size: 30px; fill: currentColor; stroke: none; }

/* red glow of the torch over everything */
.wall--about::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle calc(var(--lr) + .01px) at var(--mx) var(--my), color-mix(in srgb, var(--fl-col) calc(var(--fl-tint) * 55%), transparent) 0%, color-mix(in srgb, var(--fl-col) calc(var(--fl-tint) * 30%), transparent) var(--fl-in), transparent 100%); }
.wall--about.fl2.is-spot::after { opacity: 1; transition: opacity .5s ease; }

/* the photo under the beam looks like an X-ray plate */
.wall--about.fl2.xp.is-spot .ab-photo img { filter: grayscale(1) invert(1) contrast(1.35) brightness(1.05) sepia(1) hue-rotate(-52deg) saturate(5); }
.wall--about.fl2.xp.is-spot .ab-photo { background: #000; }


/* the switch is lit by the torch like everything else; only its green key ring stays visible in the dark */
.wall--about { --f: var(--fl1-faint, .13); }
.wall--about.fl2 { --f: var(--fl-faint); }
.wall--about.is-dark .lsw__k { -webkit-mask-image: radial-gradient(circle calc(var(--lr) + .01px) at calc(var(--mx) - var(--sx, 0px)) calc(var(--my) - var(--sy, 0px)), #000 0%, #000 var(--fl-in, 40%), rgba(0, 0, 0, var(--f)) 100%); mask-image: radial-gradient(circle calc(var(--lr) + .01px) at calc(var(--mx) - var(--sx, 0px)) calc(var(--my) - var(--sy, 0px)), #000 0%, #000 var(--fl-in, 40%), rgba(0, 0, 0, var(--f)) 100%); }
.lsw__lamp { box-sizing: border-box; position: absolute; right: calc(var(--sw) * 15 / 128); top: calc(50% - var(--sw) / 2 + var(--sw) * 15 / 128); width: calc(var(--sw) * 98 / 128); height: calc(var(--sw) * 98 / 128); border: calc(var(--sw) * 4 / 128) solid #165B2E; border-radius: calc(var(--sw) * 12 / 128); box-shadow: 0 0 calc(5 * var(--u)) rgba(40, 170, 90, .22), inset 0 0 calc(4 * var(--u)) rgba(40, 170, 90, .12); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.wall--about.is-dark .lsw__lamp { opacity: 1; }

/* List -> About: the list content gets a short soft blur, then the room turns (about.js: pre-blur); on the way back it sharpens again */
@keyframes pbIn  { from { filter: blur(0); } to { filter: blur(var(--nav-blur, 8px)); } }
@keyframes pbOut { from { filter: blur(var(--nav-blur, 8px)); } to { filter: blur(0); } }
body.pre-blur .wall--front > * { animation: pbIn .3s ease both; }
body.pre-blur-off .wall--front > * { animation: pbOut .5s ease both; }