/* shishirg.com
   Warm paper, the name in a camera viewfinder, a roles ticker, numbered sections. Light only.
   The /work page keeps its own frozen copy of the old styles in work/work.css. */

:root {
  --paper: #F1ECE4;
  --ink: #111;
  --muted: #6B665E;
  --rule: #D8D1C5;
  --accent: #C4231A;
  --frame: #E4DDD2;

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;   /* one mono on every device: same widths, no surprise clipping */
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 62ch;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }

.skip {
  position: absolute; left: var(--gutter); top: -60px;
  background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 50;
}
.skip:focus { top: 12px; }

/* Small monospace labels: ( 01 — PHOTOGRAPHS ), corner notes, captions. */
.label, .corner, .baseline {
  font-family: var(--mono); font-size: 12px; line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Header: plain bar, then a floating pill once the hero scrolls away ---------- */
.top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  background: var(--paper);
  transition: background-color .25s, color .25s;
}
.top .mark { font-weight: 700; text-decoration: none; letter-spacing: 0.02em; }
.top nav { display: flex; gap: clamp(12px, 2.4vw, 28px); font-size: 15px; }
.top nav a { text-decoration: none; }
.top.is-compact {
  position: fixed; left: 50%; right: auto; top: 14px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--paper); border-radius: 8px;
  padding: 10px 18px; gap: 28px;
  box-shadow: 0 0 0 1px rgba(241, 236, 228, 0.22); /* stays visible over the dark contact block */
  animation: pill-in .32s cubic-bezier(.22, 1, .36, 1);   /* slides in with a transform, no layout animation */
}
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translateX(-50%); } }
.top.is-compact a:hover { color: #E8A39E; }
/* Recruiters: drawn like the mode switch (mono label in a ruled box, the house style in both modes), in full
   ink, with a red recording light that glows: the one red dot in the header, so it reads first. */
.top nav a.recruit {
  display: inline-flex; align-items: center; gap: 8px; margin-block: -6px; padding: 6px 10px;
  border: 1px solid var(--ink); border-radius: 4px; color: var(--ink);
  font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s;
}
.top nav a.recruit::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: recruit-glow 2.4s ease-in-out 1.5s 4;
}
.intro-on .top nav a.recruit::before { animation: none; }
.top nav a.recruit:hover { background: var(--ink); color: var(--paper); }
.top.is-compact nav a.recruit { border-color: var(--paper); color: var(--paper); }
.top.is-compact nav a.recruit:hover { background: var(--paper); color: var(--ink); }
@keyframes recruit-glow {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 80%, transparent); }
}
@media (max-width: 560px) {
  .top nav a:nth-child(n+4) { display: none; }
  /* Keep "Recruiters" on the pill on phones. */
  .top.is-compact { gap: 14px; padding: 10px 14px; }
  .top nav a.recruit { gap: 6px; padding: 5px 8px; letter-spacing: 0.06em; }
}
@media (max-width: 400px) {
  .top nav { gap: 12px; font-size: 14px; }
}

/* ---------- Hero: the name inside a camera viewfinder ---------- */
:root {
  /* The name: Big Shoulders Display ExtraBold in capitals. Sized so it spans the same width Archivo did. */
  --name-font: 'Big Shoulders Display', var(--font);
  --name-size: clamp(2.45rem, 12vw, 13rem);
}
.hero {
  position: relative;
  padding: clamp(84px, 13vh, 132px) var(--gutter) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
}
.hero .name {
  margin: 0; text-align: center;
  font-family: var(--name-font); font-size: var(--name-size);
  font-weight: 800; line-height: 0.92; letter-spacing: 0; text-transform: uppercase;
}
@media (min-width: 360px) { .hero .name { white-space: nowrap; } }

.viewfinder { position: relative; padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 72px); }
.vf-decor > * { position: absolute; }
.vf-corner { width: clamp(20px, 3.2vw, 40px); height: clamp(20px, 3.2vw, 40px); border: 0 solid var(--ink); }
.vf-corner.tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.vf-corner.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.vf-corner.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.vf-corner.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.vf-time, .vf-rec, .vf-format {
  font-family: var(--mono); font-weight: 600; font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 0.06em; line-height: 1; font-variant-numeric: tabular-nums;
}
.vf-time { top: clamp(16px, 2.4vw, 30px); left: clamp(18px, 3vw, 40px); }
.vf-rec {
  position: absolute; z-index: 1; top: clamp(16px, 2.4vw, 30px); right: clamp(18px, 3vw, 40px);
  display: flex; align-items: center; gap: 0.45em; margin: 0; padding: 4px 0 4px 6px;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}
/* Paused: the light goes grey and steady, the label reads STBY (main.js). */
.vf-rec[aria-pressed="true"] .rec-dot { background: var(--muted); animation: none; }
.rec-dot {
  width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--accent);
  animation: rec 1.2s steps(1) infinite;
}
@keyframes rec { 50% { opacity: 0; } }
/* Exposure scale down the left edge. */
.vf-scale {
  left: 4px; top: 30%; bottom: 30%; width: 10px;
  background:
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 6px) left / 6px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 30px) left / 10px 100% no-repeat;
}
.vf-battery {
  bottom: clamp(16px, 2.4vw, 30px); left: clamp(18px, 3vw, 40px);
  width: 26px; height: 13px; border: 2px solid var(--ink); border-radius: 2px;
  background: linear-gradient(to right, var(--ink) 55%, transparent 55%) content-box; padding: 2px;
}
.vf-battery::after { content: ""; position: absolute; right: -5px; top: 2px; width: 3px; height: 5px; background: var(--ink); }
.vf-format { bottom: clamp(16px, 2.4vw, 30px); right: clamp(18px, 3vw, 40px); text-align: right; font-size: clamp(10px, 1vw, 12px); line-height: 1.6; }
.vf-format b { display: inline-block; margin-top: 2px; padding: 1px 5px; white-space: nowrap; border: 1.5px solid var(--ink); border-radius: 2px; }
/* Sound meters (after the Nikon ZR): L/R bars beside the battery, segmented like a camera's.
   main.js sets --level while recording; flat on STBY. The last segments are tinted red (the clipping zone). */
.vf-audio {
  bottom: clamp(16px, 2.4vw, 30px); left: calc(clamp(18px, 3vw, 40px) + 40px); width: 92px;
  display: grid; grid-template-columns: auto 1fr; gap: 3px 5px; align-items: center;
  font: 600 9px/1 var(--mono); letter-spacing: 0.06em;
}
.vf-audio i {
  position: relative; display: block; height: 4px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(196, 35, 26, .25) 0 4px, transparent 4px 5px) right / 18% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(17, 17, 17, .16) 0 4px, transparent 4px 5px);
}
.vf-audio i::after {
  content: ""; position: absolute; inset: 0; width: var(--level, 0%);
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 5px);
  transition: width .09s linear;
}
/* Exposure strip (after the Nikon Zf): mode, shutter, aperture, the −3…+3 exposure scale, ISO, shots left. */
.vf-strip {
  left: 50%; bottom: clamp(16px, 2.4vw, 30px); transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(10px, 1.8vw, 22px); white-space: nowrap;
  font: 600 clamp(11px, 1.15vw, 14px)/1 var(--mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.vf-strip .mode { padding: 1px 5px; border: 1.5px solid var(--ink); border-radius: 2px; }
.vf-strip .ev { width: clamp(84px, 8vw, 104px); overflow: visible; }
.vf-strip .ev text { font: 600 13px var(--mono); fill: var(--ink); }
.vf-strip .ev .ticks { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.vf-strip .ev .pointer { fill: var(--ink); }
.vf-strip .left { color: var(--muted); }
/* Narrower screens keep the readings that matter: first the mode box and shots left go, then (phones)
   the scale; the short strip moves to the bottom-right corner, where the format box was. */
@media (max-width: 900px) { .vf-strip .mode, .vf-strip .left { display: none; } }
@media (max-width: 560px) {
  .vf-scale, .vf-format, .vf-strip .ev { display: none; }
  .vf-strip { left: auto; right: clamp(18px, 3vw, 40px); transform: none; gap: 10px; font-size: 11px; }
  .vf-audio { width: 56px; }
}

/* ---------- Ticker ---------- */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; }
.ticker-track {
  margin: 0; display: flex; width: max-content;
  animation: ticker var(--ticker-duration, 28s) linear infinite;   /* speed set in Settings */
}
.ticker-set {
  flex: none; padding: 14px 0; white-space: pre;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ticker-set b { color: var(--accent); margin: 0 0.9em; }
@keyframes ticker { to { transform: translateX(calc(-100% / 3)); } }
.ticker { position: relative; }
.ticker:hover .ticker-track, .ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-pause {
  position: absolute; right: 0; top: 0; bottom: 0; width: 48px;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to right, transparent, var(--ink) 35%); color: var(--paper);
}
.ticker-pause svg { width: 12px; height: 12px; }
.ticker-pause .play, .ticker.is-paused .ticker-pause .bars { display: none; }
.ticker.is-paused .ticker-pause .play { display: inline; }

/* ---------- Sections ---------- */
main > section { padding: clamp(56px, 9vw, 112px) var(--gutter) 0; }
.prologue { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 16px 32px; }
.prologue .lede { margin: 0; max-width: 30ch; font-size: clamp(24px, 3vw, 38px); line-height: 1.28; letter-spacing: -0.015em; }
@media (max-width: 720px) { .prologue { grid-template-columns: 1fr; } }

.section-head { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 6px 32px; margin-bottom: 28px; align-items: baseline; }
.section-head .label { grid-row: span 2; margin: 0; }
.section-head h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.section-head p:not(.label) { margin: 0; max-width: var(--measure); color: var(--muted); }
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head .label { grid-row: auto; }
}

/* Photographs */
.photos { columns: 3 280px; column-gap: 14px; }
.photos figure { margin: 0 0 18px; break-inside: avoid; }
.photos button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--frame); cursor: zoom-in; }
/* Camera settings in the corner on hover (read from the photo at build time). */
.photos .exif {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; border-radius: 3px;
  background: rgba(17, 17, 17, .72); color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
}
.photos button:hover .exif, .photos button:focus-visible .exif { opacity: 1; transform: none; }
.photos img { width: 100%; height: auto; transition: opacity .25s, filter .35s ease; }
.photos button:hover img { opacity: 0.86; }
.photos figcaption { padding: 8px 0 0; }

/* Films */
.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 20px; }
.film { margin: 0; }
.film button {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--ink);
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
}
.film video { width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease; }
.film .badge {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); color: var(--ink); padding: 6px 10px; border-radius: 4px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.film .badge svg { width: 10px; height: 10px; }
.film figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0 0; }
.film figcaption strong { font-weight: 600; }

/* Photo mode: Films is a dark screening room, a near-black band edged with sprocket holes like a strip
   of film, running into the dark Contact block below. Engineer mode keeps it paper (the drawing is all
   paper). Only colours change between modes; the spacing is the same, so switching never shifts the page. */
#films {
  position: relative; margin-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 9vw, 112px);
  transition: background-color .45s ease, color .45s ease;
}
main:has(> #films) + .contact { margin-top: 0; }
html:not(.eng) #films { background: #0D0D0C; color: var(--paper); }
html:not(.eng) #films .label { color: #A39C90; }
html:not(.eng) #films .section-head p:not(.label) { color: #B9B2A6; }
html:not(.eng) #films figcaption .label { color: #8F887C; }
html:not(.eng) #films .film button { box-shadow: 0 0 0 1px #2A2926; }
html:not(.eng) main:has(> #films) + .contact { border-top: 1px solid #2B2A27; }
#films::before, #films::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 8px; pointer-events: none;
  background: radial-gradient(4px 3px at 50% 50%, #2E2D2A 98%, transparent) 0 0 / 22px 8px repeat-x;
  transition: opacity .45s ease;
}
#films::before { top: 14px; }
#films::after { bottom: 14px; }
.eng #films::before, .eng #films::after { opacity: 0; }

/* ---------- Contact ---------- */
.contact {
  margin-top: clamp(72px, 10vw, 140px);
  background: var(--ink); color: var(--paper);
  padding: clamp(56px, 9vw, 120px) var(--gutter) 28px;
}
.contact .label { color: #A39C90; }
.contact h2 { margin: 12px 0 28px; max-width: 14ch; font-size: clamp(44px, 8vw, 120px); line-height: 0.98; letter-spacing: -0.04em; }
.contact .email { font-size: clamp(22px, 3vw, 36px); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.contact a:hover { color: #E8A39E; }
.contact nav {
  display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 48px 0 56px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.contact .fine { margin: 0; padding-top: 18px; border-top: 1px solid #333; font-size: 11px; }

/* ---------- 404 ---------- */
.hero .intro { max-width: var(--measure); margin: 28px auto 0; text-align: center; }

/* ---------- Opening animation: a focus pull (see src/_includes/intro.njk and main.js) ----------
   This sets the layout and starting state; main.js runs the timeline with the Web Animations API. */
.intro { display: none; }
.intro-on body { overflow: hidden; }
.intro-on .intro {
  --focus: #3DDC6E;   /* focus-confirm green */
  position: fixed; inset: 0; z-index: 100; display: block; overflow: hidden;
  background: #0b0b0b; color: var(--paper);
}
.intro.exposed { background: var(--paper); color: var(--ink); }   /* swapped under the bloom */
.intro.done { opacity: 0; transition: opacity .35s ease; }

/* Live sensor noise, only in the dark phase. */
.grain {
  position: absolute; inset: -50%; opacity: .07; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .5s steps(5) infinite;
}
@keyframes grain {
  20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); }
}
.intro.exposed .grain { display: none; }

/* Frame, name and focus box move as one piece. main.js sizes the frame like the homepage viewfinder,
   centres the stage on screen, and glides it up to the homepage spot at the end. */
.intro-stage { position: absolute; inset: 0; will-change: transform; }
.intro-frame { position: absolute; top: 24px; left: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.intro .vf-corner { position: absolute; border-color: currentColor; opacity: 0; }

.readouts, .distance, .af {
  position: absolute; font-family: var(--mono); font-weight: 600; letter-spacing: 0.06em; line-height: 1;
  font-size: clamp(11px, 1.2vw, 15px); font-variant-numeric: tabular-nums;
}
.readouts { top: clamp(16px, 2.4vw, 30px); left: 50%; transform: translateX(-50%); display: flex; gap: 1.6em; white-space: nowrap; }
.readouts span, .distance, .af { opacity: 0; }
.distance { bottom: clamp(16px, 2.4vw, 30px); left: clamp(18px, 3vw, 40px); }
.distance .label-sm { opacity: 0.55; }
.af { bottom: clamp(16px, 2.4vw, 30px); right: clamp(18px, 3vw, 40px); transition: color .15s; }
.intro.locked .af { color: var(--focus); }

/* The name sits exactly where the homepage has it (--name-top, set by main.js). */
.intro-name-wrap { position: absolute; left: 0; right: 0; top: var(--name-top, 38vh); }
.intro-name {
  margin: 0; text-align: center; white-space: nowrap; opacity: 0;
  font-family: var(--name-font); font-size: var(--name-size);
  font-weight: 800; line-height: 0.92; letter-spacing: 0; text-transform: uppercase;
  will-change: filter, transform;
}

.reticle {
  position: absolute; left: 50%;
  top: calc(var(--name-top, 38vh) + var(--name-size) * 0.46);
  width: clamp(52px, 7vw, 96px); aspect-ratio: 3 / 2;
  border: 1.5px solid currentColor; border-radius: 2px; opacity: 0;
  translate: -50% -50%;
  transition: border-color .12s;
}
.intro.locked .reticle { border-color: var(--focus); border-width: 2px; box-shadow: 0 0 12px rgba(61, 220, 110, .25); }

/* The exposure ramp: light floods up, the scene swaps to the paper page underneath, light settles. */
.bloom { position: absolute; inset: 0; background: #FBF9F5; opacity: 0; pointer-events: none; }

/* ---------- Focus-box cursor (desktop with a mouse; main.js) ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.focus-cursor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 34px; height: 24px; border: 1.5px solid #fff; border-radius: 2px;
  mix-blend-mode: difference; opacity: 0; will-change: transform;
  transition: width .22s cubic-bezier(.22, 1, .36, 1), height .22s cubic-bezier(.22, 1, .36, 1),
              border-radius .2s, border-color .15s, background-color .15s, opacity .2s;
}
.focus-cursor.on { opacity: 1; }
.focus-cursor.dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.focus-cursor.locked { border-color: #3DDC6E; border-width: 2px; mix-blend-mode: normal; box-shadow: 0 0 14px rgba(61, 220, 110, .3); }
.intro-on .focus-cursor { opacity: 0; }

/* Engineer mode: a CAD crosshair instead of the camera focus box. */
.cad-cursor { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; }
.eng.has-cursor .cad-cursor.on { display: block; }
.eng .focus-cursor { display: none; }
.cad-x, .cad-y, .cad-pick, .cad-coords { position: absolute; left: 0; top: 0; will-change: transform; }
.cad-x { width: 100%; height: 1px; background: var(--ink); opacity: .35; }
.cad-y { width: 1px; height: 100%; background: var(--ink); opacity: .35; }
/* The pickbox; red when it is over something you can click. */
.cad-pick {
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border: 1.5px solid var(--ink); background: var(--paper);
  transition: border-color .12s, background-color .12s;
}
.cad-pick.hot { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--paper)); }
.cad-coords {
  padding: 3px 6px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 600 10px/1 var(--mono); letter-spacing: 0.06em; white-space: nowrap;
}

/* ---------- Shutter on open: two curtains meet and part over the viewer (main.js) ---------- */
.viewer .curtain { position: absolute; left: 0; right: 0; height: 50%; background: #000; z-index: 2; pointer-events: none; }
.viewer .curtain.top { top: 0; }
.viewer .curtain.bottom { bottom: 0; }

/* ---------- Engineer mode: the page becomes an engineering drawing (switch in the header, or press E) ---------- */
.top .eng-toggle {
  margin: 0 auto 0 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: none; border: 1px solid var(--rule); border-radius: 4px; color: var(--muted); cursor: pointer;
  font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  transition: color .2s, border-color .2s, background-color .2s;
}
.top .eng-toggle:hover { color: var(--ink); border-color: var(--ink); }
/* On the drawing every rule is black, so give the switch a light border at rest: it lights up on hover as in photo mode. */
.eng .top .eng-toggle { border-color: #C9C9C3; }
.eng .top .eng-toggle:hover { border-color: var(--ink); }
/* A tiny part with a centreline; on the drawing it becomes a camera, for the way back. */
.eng-icon {
  position: relative; width: 16px; height: 10px; border: 1.5px solid currentColor; border-radius: 1px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}
.eng .eng-icon {
  height: 11px; border-radius: 2.5px;
  background: radial-gradient(circle, transparent 1.6px, currentColor 1.7px 2.9px, transparent 3px);
}
.eng .eng-icon::before { content: ""; position: absolute; top: -4px; left: 3px; width: 5px; height: 2.5px; background: currentColor; border-radius: 1px 1px 0 0; }
.top.is-compact .eng-toggle { margin: 0; border-color: #444; color: #A39C90; }
.top.is-compact .eng-toggle:hover { border-color: var(--paper); color: var(--paper); }
@media (max-width: 560px) { .top .eng-toggle { font-size: 0; gap: 0; padding: 7px; margin-left: 10px; } }

html.eng { --paper: #FBFBF8; --ink: #111; --muted: #4A4A4A; --rule: #111; --frame: #EDEDEA; }
body { transition: background-color .45s ease, color .45s ease; }
/* Inside the frame (its inner line ends 24px in), so the header never paints over the border. */
.eng .top:not(.is-compact) { top: 24px; left: 24px; right: 24px; padding-inline: calc(var(--gutter) - 10px); background: transparent; }
/* (transparent so the hero's zone line can run up to the frame instead of being cut off by the header) */
.eng .ticker { background: transparent; color: var(--ink); border-block: 1px solid var(--ink); }
.eng .ticker-pause { background: linear-gradient(to right, transparent, var(--paper) 35%); color: var(--ink); }
.eng .contact { background: var(--paper); color: var(--ink); border-top: 2px solid var(--ink); }
.eng .contact .label { color: var(--muted); }
.eng .contact .fine { border-color: var(--ink); }
.eng .photos img, .eng .film video { filter: grayscale(1) contrast(1.25); }
/* ...and come back to full colour under the pointer or keyboard focus. */
.eng .photos button:hover img, .eng .photos button:focus-visible img,
.eng .film button:hover video, .eng .film button:focus-visible video { filter: none; }
/* The viewfinder steps aside for the drawing. */
.vf-decor, .vf-rec { transition: opacity .4s ease; }
.eng .vf-decor, .eng .vf-rec { opacity: 0; pointer-events: none; }

/* The name turns into a part: its fill drains into a hatched section with a crisp outline. */
/* The hatch exists only in engineer mode: kept behind the solid fill in normal mode, it peeked out
   along the anti-aliased edges as little dashes. The outline is always there but clear in normal mode,
   so it can fade instead of vanishing.
   Each direction has its own timing (a transition runs with the timing of the state it goes to):
   into the drawing, the outline draws on and the fill drains slowly into the hatch; back to photo mode,
   the fill returns at once while the outline fades, so the name never blinks out while the
   drawing's tables are still fading away. */
.hero .name {
  -webkit-text-stroke: 1.4px transparent;
  transition: color .3s ease, -webkit-text-stroke-color .45s ease;
}
.eng .hero .name {
  color: transparent;
  -webkit-text-stroke-color: var(--ink);
  background: repeating-linear-gradient(-45deg, rgba(17, 17, 17, .5) 0 1px, transparent 1px 7px);
  -webkit-background-clip: text; background-clip: text;
  transition: color .8s ease .15s, -webkit-text-stroke-color .3s ease;
}

/* Room for the drawing furniture above and below the name. */
.eng .hero { padding-top: clamp(150px, 21vh, 210px); padding-bottom: 200px; }

.dwg { position: absolute; inset: 0; pointer-events: none; }
/* Hidden outside engineer mode: faded out, then visibility-hidden so nothing can show through. */
.dwg > * { opacity: 0; visibility: hidden; transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s; }
.eng .dwg > * { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
/* Furniture arrives after the name has turned; on the way out everything leaves at once. */
.eng .dwg-rev { transition-delay: .7s; }
.eng .dwg-notes { transition-delay: .8s; }
.eng .dwg-title { transition-delay: .9s; }
.dims { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--ink); }
.dims text {
  font: 600 13px var(--mono); fill: currentColor; letter-spacing: 0.04em;
  paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round;   /* halo so values read over photos */
}
/* The page-wide layer for dimensions below the hero (sized to the whole document by main.js). */
.dims.page-dims { inset: auto; top: 0; left: 0; width: auto; height: auto; z-index: 5; pointer-events: none; }
.page-dims .thin { stroke-width: 1; }
.dims .thin { stroke: currentColor; stroke-width: 1; fill: none; }
.dims .center { stroke: currentColor; stroke-width: 1; stroke-dasharray: 18 4 3 4; fill: none; opacity: .7; }
/* GD&T: feature control frames, characteristic symbols and datum feature symbols. */
.dims .gdt { stroke: currentColor; stroke-width: 1.2; fill: var(--paper); }
.dims .gdt-sym { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linejoin: round; }
.dims .gdt-tri { fill: currentColor; }
.dims .gdt-t { font: 600 12px var(--mono); stroke: none; letter-spacing: 0.02em; }
/* Pop-in animations scale each callout from its own centre, not from the corner of the page. */
.dims g { transform-box: fill-box; transform-origin: center; }
/* Inspection dimensions: the key sizes, called out in red like the zone balloons. */
.dims .thin.red { stroke: var(--accent); }
.dims text.red { fill: var(--accent); }
.dims .zone { transform-box: fill-box; transform-origin: center; stroke: var(--accent); fill: rgba(196, 35, 26, .12); stroke-width: 1.5; }
.dims .zone-line { stroke: var(--accent); stroke-width: 1.5; }
.dims .zone-label { fill: var(--accent); font-size: 12px; }

.dwg-rev { position: absolute; top: 74px; right: calc(var(--gutter) + 14px); transform: translateY(-8px); }
.dwg-rev table { border-collapse: collapse; font: 10px/1.2 var(--mono); background: var(--paper); }
/* Drawing text reads in capitals, however it was typed in the editor (the name keeps its case). */
.dwg-rev, .dwg-notes, .dwg-title { text-transform: uppercase; }
.tb-co b { text-transform: none; }
.dwg-rev .rev-title { text-align: center; padding: 4px; letter-spacing: 0.12em; }
.dwg-rev th, .dwg-rev td { border: 1px solid var(--ink); padding: 3px 8px; text-align: left; white-space: nowrap; }
.dwg-rev th { font-weight: 600; }
.dwg-notes {
  position: absolute; left: calc(var(--gutter) + 14px); bottom: 30px; transform: translateY(8px);
  font: 11px/1.6 var(--mono); letter-spacing: 0.04em;
}
.dwg-notes ol { margin: 2px 0 0; padding-left: 20px; }
.dwg-title {
  position: absolute; right: calc(var(--gutter) + 14px); bottom: 30px; width: min(600px, 58vw);
  transform: translateY(8px);
  display: grid; grid-template-columns: 1.05fr 1.15fr 1.5fr; border: 2px solid var(--ink); background: var(--paper);
  font: 9.5px/1.3 var(--mono); letter-spacing: 0.04em;
}
.dwg-title > div { border: 1px solid var(--ink); padding: 5px 7px; display: grid; gap: 2px 8px; align-content: start; }
.dwg-title .h { font-size: 8px; color: var(--muted); letter-spacing: 0.08em; }
.tb-tol b { font-weight: 600; }
.tb-appr { grid-template-columns: 1fr auto; }
.tb-co b { font: 600 14px/1.2 var(--font); letter-spacing: 0; margin-bottom: 4px; }
.tb-proj svg { width: 64px; height: 26px; margin-top: 2px; }
.tb-mat { grid-template-columns: auto 1fr; }
.tb-dwg { grid-template-columns: auto 1fr auto auto; }
.tb-dwg .w2 { grid-column: span 2; }

/* The sheet border, drawn around the screen with zone columns 1–8 and rows A–F. The margin is solid
   paper (a 6px mat outside the outer line, the zone band between the two lines), so the page scrolls
   underneath it and nothing shows through. */
.dwg-border {
  position: fixed; inset: 0; z-index: 15; pointer-events: none;
  border: 6px solid var(--paper); color: var(--ink);
  opacity: 0; clip-path: inset(0 100% 100% 0);
  transition: clip-path 1s cubic-bezier(.65, 0, .35, 1), opacity .3s ease, border-color .45s ease;
}
.dwg-border::before, .dwg-border::after { content: ""; position: absolute; z-index: 1; border: 1.5px solid var(--ink); }
.dwg-border::before { inset: 0; }
.dwg-border::after { inset: 16px; }
.eng .dwg-border { opacity: 1; clip-path: inset(0); }
.zones-x, .zones-y { position: absolute; display: flex; font: 600 9px/1 var(--mono); background: var(--paper); }
.zones-x { left: 0; right: 0; height: 17.5px; padding: 0 16px; }
.zx-top { top: 0; } .zx-bottom { bottom: 0; }   /* not .top: that is the site header */
.zones-y { top: 16px; bottom: 16px; width: 17.5px; flex-direction: column; }
.zy-left { left: 0; } .zy-right { right: 0; }
.zones-x span, .zones-y span { flex: 1; display: grid; place-items: center; }
.zones-x span + span { border-left: 1px solid var(--ink); }
.zones-y span + span { border-top: 1px solid var(--ink); }

@media (max-width: 720px) {
  .eng .hero { padding-top: 120px; padding-bottom: 120px; }
  .dwg-rev, .dwg-notes, .dwg-title > .tb-tol, .dwg-title > .tb-appr, .dwg-title > .tb-proj, .dwg-title > .tb-mat, .dims .callout { display: none; }
  .dwg-title { left: 16px; right: 16px; bottom: 16px; width: auto; grid-template-columns: 1fr 1fr; }
  .dwg-border { border-width: 3px; }
  .dwg-border::after, .zones-x, .zones-y { display: none; }
  .eng .top:not(.is-compact) { top: 5px; left: 5px; right: 5px; padding-inline: calc(var(--gutter) - 5px); }
}

/* ---------- Full-screen viewer ---------- */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #000; color: var(--paper);
}
.viewer::backdrop { background: #000; }
.viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
.viewer header, .viewer footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter);
}
.viewer .count { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; }
.viewer .stage {
  position: relative; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter); touch-action: pan-y;
}
.viewer .stage img, .viewer .stage video, .viewer .stage iframe {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.viewer .stage iframe { width: min(100%, 1280px); aspect-ratio: 16 / 9; height: auto; border: 0; }
.viewer .stage img.swap { animation: fade .22s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.viewer .btn {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 1px solid #55585B; color: var(--paper); cursor: pointer; padding: 0 14px;
}
.viewer .btn:hover { border-color: var(--paper); }
.viewer .btn svg { width: 18px; height: 18px; }
.viewer .caption { color: #A39C90; font-size: 15px; }
.viewer .nav { display: flex; gap: 8px; }

/* Films how-to: hover wording for a mouse, tap wording for touch screens. */
.how-touch { display: none; }
@media (hover: none) { .how-hover { display: none; } .how-touch { display: inline; } }

/* ---------- Touch screens: every control gets a tap area at least 44 px tall (Apple's guideline), ----------
   drawn invisibly around it so nothing changes how it looks. */
@media (pointer: coarse) {
  .top .mark, .top nav a, .top .eng-toggle, .contact .email { position: relative; }
  .top .mark::after, .top nav a::after, .top .eng-toggle::after, .vf-rec::after, .contact .email::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .top .mark::after { left: -10px; right: -10px; }
  .contact .email { display: inline-block; }
  /* The stacked links get real padding instead, so neighbouring tap areas never overlap. */
  .contact nav { gap: 0 28px; }
  .contact nav a { display: inline-block; padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}