@charset "UTF-8";
/* ==========================================================================
   TIM TAWGO — timtawgo.com
   Monochrome instrument. Colour arrives only from the work itself: the
   photographs, and the field an index row floods the viewport with.
   Mobile-first. Everything below 640px is the base; desktop is the override.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --serif: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --u: 8px;
  --page: 20px;
  --gutter: 14px;
  --cols: 4;
  --maxw: 1720px;
  --header-h: 56px;

  --ease:   cubic-bezier(.7,0,.2,1);
  --ease-o: cubic-bezier(.16,1,.3,1);
}

/* -- dark: the default housing ------------------------------------------- */
:root, :root[data-theme="dark"]{
  --bg-rgb: 8 9 10;
  --bg:        rgb(var(--bg-rgb));
  --surface:   #14171a;
  --fg:        #ece9e2;
  --fg-dim:    #a8b0b7;
  --fg-mute:   #838b92;          /* 5.7:1 on --bg */
  --line:      rgba(216,213,205,.16);
  --line-soft: rgba(216,213,205,.08);
  --line-hard: rgba(216,213,205,.34);
  --sel-bg:    #ece9e2;
  --sel-fg:    #08090a;
  --shot:      #ffffff;
}

/* -- light: same instrument, lights on ----------------------------------- */
:root[data-theme="light"]{
  --bg-rgb: 236 233 226;
  --bg:        rgb(var(--bg-rgb));
  --surface:   #ddd9d1;
  --fg:        #0d0f11;
  --fg-dim:    #3f464c;
  --fg-mute:   #5c636a;          /* 4.7:1 on --bg */
  --line:      rgba(13,15,17,.18);
  --line-soft: rgba(13,15,17,.09);
  --line-hard: rgba(13,15,17,.40);
  --sel-bg:    #0d0f11;
  --sel-fg:    #ece9e2;
  --shot:      #0d0f11;
}

@media (min-width:700px){
  :root{ --page:32px; --gutter:20px; --cols:8; --header-h:62px; }
}
@media (min-width:1080px){
  :root{ --page:40px; --gutter:24px; --cols:12; --header-h:66px; }
}
@media (min-width:1600px){ :root{ --page:56px } }

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  min-height:100svh;
  position:relative;
  font-synthesis-weight:none;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
img,svg,canvas,video{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
::selection{ background:var(--sel-bg); color:var(--sel-fg) }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; border-radius:1px }

/* ---------------------------------------------------------------- layout */
.wrap{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--page); position:relative;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--fg); color:var(--bg);
  padding:12px 18px; font:500 13px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
}
.skip:focus{ left:var(--page); top:10px }
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------------------------------------------------------------- type */
.mono{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mute); font-weight:400;
}
.lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mute);
}

/* ---------------------------------------------------------------- marks
   Traced from the supplied artwork and painted with currentColor through a
   mask, so the theme toggle recolours them and no second asset is needed. */
.brand-lockup, .wordmark .wm, .boot-mark{
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
}
.brand-lockup, .wordmark .wm{
  display:block;                 /* aspect-ratio needs a block box */
  -webkit-mask-image:url(/b/lockup.svg); mask-image:url(/b/lockup.svg);
  -webkit-mask-position:left center; mask-position:left center;
  aspect-ratio:1154 / 267;
}
.boot-mark{
  display:block;
  -webkit-mask-image:url(/b/mark.svg); mask-image:url(/b/mark.svg);
  -webkit-mask-position:center; mask-position:center;
  aspect-ratio:272 / 267;
}

/* ---------------------------------------------------------------- boot */
#boot{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
  /* fail-safe: retires itself even if the script never runs */
  animation:bootFail .6s linear 3.2s forwards;
}
#boot.done{ opacity:0; visibility:hidden; pointer-events:none; animation:none }
@keyframes bootFail{ to{ opacity:0; visibility:hidden; pointer-events:none } }
@media (prefers-reduced-motion:reduce){ #boot{ display:none } }
.boot-in{ width:min(420px,78vw) }
.boot-mark{ width:54px; margin-bottom:22px; opacity:.9; color:var(--fg) }
.boot-line{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-mute);
  display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(4px);
}
.boot-line.on{ opacity:1; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease) }
.boot-line b{ color:var(--fg); font-weight:400 }
.boot-bar{ margin-top:18px; height:2px; background:var(--line); overflow:hidden }
.boot-bar i{ display:block; height:100%; width:0; background:var(--fg); transition:width .2s linear }

/* ---------------------------------------------------------------- header */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--header-h);
  display:flex; align-items:center;
  background:linear-gradient(to bottom, rgb(var(--bg-rgb) / .94), rgb(var(--bg-rgb) / .72) 60%, rgb(var(--bg-rgb) / 0));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .45s var(--ease), background .5s var(--ease);
}
.hdr.hide{ transform:translateY(-102%) }
.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px }
/* while a row floods the viewport the header must not sit on its own slab */
body.flash-on .hdr{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none }

.brand{ display:block; flex:none; color:var(--fg) }
.brand-lockup{ width:132px }
@media (min-width:700px){ .brand-lockup{ width:158px } }
@media (min-width:1080px){ .brand-lockup{ width:176px } }

.nav{ display:flex; align-items:center; gap:16px }
.nav a{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-dim); position:relative; padding:8px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;
  background:var(--fg); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--fg) }
.nav a:hover::after{ transform:scaleX(1) }
@media (min-width:700px){ .nav{ gap:24px } .nav a{ font-size:11px } }
@media (max-width:400px){ .nav{ gap:12px } .nav a{ font-size:9px; letter-spacing:.08em } }

/* lights-out control — a reticle you fire to flip the scheme */
.lights{
  width:34px; height:34px; flex:none; color:var(--fg-dim);
  display:grid; place-items:center;
  transition:color .3s var(--ease);
}
.lights svg{ width:22px; height:22px; overflow:visible }
.lights:hover{ color:var(--fg) }
.lights .r1,.lights .r2,.lights .tk{ transform-origin:50% 50%;
  transition:transform .6s var(--ease-o) }
.lights:hover .r1{ transform:rotate(90deg) }
.lights:hover .r2{ transform:scale(.82) }
.lights.fired{ animation:recoil .45s var(--ease-o) }
@keyframes recoil{ 0%{transform:scale(1)} 22%{transform:scale(.7)} 100%{transform:scale(1)} }

/* the shot: one hard frame of light, then gone */
.muzzle{
  position:fixed; inset:0; z-index:9600; pointer-events:none;
  background:var(--shot); opacity:0;
}
.muzzle.fire{ animation:muzzle .42s var(--ease) forwards }
@keyframes muzzle{ 0%{opacity:0} 8%{opacity:.8} 26%{opacity:.1} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){
  .muzzle.fire{ animation:none }
  .lights.fired{ animation:none }
}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + 26px);
  padding-bottom:30px;
  min-height:100svh;
  display:flex;
  overflow:hidden;
}
.hero > .wrap{
  display:flex; flex-direction:column; justify-content:space-between; flex:1 1 auto;
}
.hero-canvas{
  position:absolute; inset:0; z-index:0;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero-canvas.on{ opacity:1 }
.hero-canvas canvas{ width:100%; height:100% }
/* the instrument is a target: clicking it fires */
@media (hover:hover) and (pointer:fine) and (min-width:1080px){
  .hero-canvas{ pointer-events:auto; cursor:none }
}
.hero .wrap{ z-index:2 }

.hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px }
.hero-top .col.r{ text-align:right }
.hero-top .col p + p{ margin-top:3px }
/* the strapline sits opposite the archive block; on a 375px phone the two
   only fit on one line each if the tracking gives way first. The location
   below it keeps the default mono tracking so it reads as the quieter line. */
.strap{ letter-spacing:.1em; color:var(--fg-dim); white-space:nowrap }
.hero-top .col p{ white-space:nowrap }
@media (min-width:430px){ .strap{ letter-spacing:.2em } }
@media (min-width:700px){ .strap{ letter-spacing:.34em } }

.wordmark{ margin:auto 0; padding:24px 0; position:relative }
.wordmark h1{ margin:0; line-height:0 }
.wordmark .wm{ display:block; width:100%; color:var(--fg);
  transition:color .5s var(--ease) }
@media (min-width:1080px){ .wordmark .wm{ width:94% } }
.hero-btm{ min-height:1px }

/* ---------------------------------------------------------------- sections */
.sec{ padding-block:56px }
@media (min-width:700px){ .sec{ padding-block:84px } }
@media (min-width:1080px){ .sec{ padding-block:112px } }

/* The section number sits on its own line so the title can start hard against
   the page margin — indented into column 2 it read as floating. */
.sec-head{
  display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:0 var(--gutter);
  border-top:1px solid var(--line-hard);
  padding-top:16px; margin-bottom:26px;
}
.sec-head .n{ grid-column:1/-1; grid-row:1; margin-bottom:10px }
.sec-head .t{
  grid-column:1/-1; grid-row:2;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(21px,5vw,30px); letter-spacing:-.025em; line-height:1.05;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 60;
}
.sec-head .d{ grid-column:1/-1; grid-row:3; margin-top:10px }
@media (min-width:700px){
  .sec-head{ padding-top:18px; margin-bottom:34px; align-items:baseline }
  .sec-head .t{ grid-column:1/span 6; font-size:clamp(24px,2.6vw,34px) }
  .sec-head .d{ grid-column:7/-1; grid-row:2; text-align:right; margin:0 }
}

/* ---------------------------------------------------------------- index */
/* Hovering a row floods the viewport with a colour pulled from that entry's
   key frame — the field the work was made in, not a thumbnail of it. */
.flash{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--flash,transparent);
  opacity:0; transition:opacity .45s var(--ease), background-color .45s var(--ease);
}
.flash.on{ opacity:1 }

/* text has to survive whatever colour lands under it */
body.flash-on.flash-dark{
  --fg:#f4f2ee; --fg-dim:rgba(244,242,238,.82); --fg-mute:rgba(244,242,238,.70);
  --line:rgba(244,242,238,.24); --line-hard:rgba(244,242,238,.46);
}
body.flash-on.flash-light{
  --fg:#0c0e10; --fg-dim:rgba(12,14,16,.78); --fg-mute:rgba(12,14,16,.64);
  --line:rgba(12,14,16,.22); --line-hard:rgba(12,14,16,.44);
}

.index{ position:relative; z-index:2 }

/* -- touch: cards with a real thumbnail. hover does not exist here. -- */
.prow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 14px;
  align-items:center;
  padding:15px 0;
  border-top:1px solid var(--line);
  position:relative;
}
.prow:last-child{ border-bottom:1px solid var(--line) }
.prow-no{
  grid-column:1; grid-row:1;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--fg-mute);
}
.prow-main{ grid-column:1; grid-row:2; min-width:0 }
.prow-name{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(17px,4.6vw,22px); line-height:1.08; letter-spacing:-.024em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 40;
  overflow-wrap:anywhere;
}
.prow-meta{
  grid-column:1; grid-row:3; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--fg-mute); text-transform:uppercase; margin-top:3px;
}
.prow-year{
  grid-column:2; grid-row:1/span 3; align-self:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--fg-mute);
}
.prow-arw{ display:none }

/* -- desktop: the dossier table. Gated at 1080 because the placements below
      assume the 12-column grid, which only exists from that breakpoint up. -- */
@media (min-width:1080px){
  .prow{
    grid-template-columns:repeat(var(--cols),minmax(0,1fr));
    gap:var(--gutter);
    align-items:baseline;
    padding:19px 0;
    min-height:0;
  }
  .prow-no{ grid-column:1/2; grid-row:1; font-size:11px }
  .prow-main{ grid-column:2/span 6; grid-row:1; display:flex; align-items:baseline; gap:.4em }
  .prow-name{ font-size:clamp(22px,2.35vw,33px); line-height:1;
    transition:transform .55s var(--ease) }
  .prow-arw{
    display:inline-block; font-family:var(--sans); font-weight:400; font-size:.5em;
    opacity:0; transform:translateX(-10px);
    transition:opacity .45s var(--ease), transform .45s var(--ease);
  }
  .prow-meta{ grid-column:8/span 3; grid-row:1; margin:0; font-size:11px }
  .prow-year{ grid-column:11/-1; grid-row:1; text-align:right; font-size:12px }

  .prow::before{
    content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
    background:var(--fg); transition:width .6s var(--ease);
  }
  .prow:hover::before,.prow:focus-visible::before{ width:100% }
  .prow:hover .prow-name,.prow:focus-visible .prow-name{ transform:translateX(14px) }
  .prow:hover .prow-arw,.prow:focus-visible .prow-arw{ opacity:1; transform:translateX(4px) }
}

/* ---------------------------------------------------------------- contact */
.contact-grid{ display:grid; gap:22px var(--gutter); grid-template-columns:1fr }
@media (min-width:700px){ .contact-grid{ grid-template-columns:repeat(3,1fr) } }
.contact-grid .b{ padding-top:13px; border-top:1px solid var(--line) }
.contact-grid .b b{
  display:block; font-weight:500; margin-top:7px; color:var(--fg);
  font-size:15px; overflow-wrap:anywhere;
}
@media (min-width:700px){ .contact-grid .b b{ font-size:17px } }
.contact-grid .b a{
  border-bottom:1px solid var(--line-hard); padding-bottom:2px;
  display:inline-flex; align-items:center; min-height:30px;
  transition:border-color .3s var(--ease);
}
.contact-grid .b a:hover{ border-color:var(--fg) }

/* ---------------------------------------------------------------- footer */
.foot{
  border-top:1px solid var(--line);
  margin-top:56px; padding-block:22px 30px;
  display:flex; flex-direction:column; gap:14px;
}
@media (min-width:700px){ .foot{ flex-direction:row; justify-content:space-between; align-items:center } }
.foot .l{ display:flex; gap:4px 18px; flex-wrap:wrap; align-items:center }
.foot .l a{ display:inline-flex; align-items:center; min-height:32px; padding-block:4px }
.foot .l a:hover{ color:var(--fg) }

/* ---------------------------------------------------------------- project */
.p-hero{ padding-top:calc(var(--header-h) + 26px); padding-bottom:30px }
.p-back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:26px }
.p-back:hover{ color:var(--fg) }
.p-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(30px,8.4vw,84px); line-height:.94; letter-spacing:-.04em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
  overflow-wrap:anywhere;
}
.p-title .sep{ color:var(--fg-mute); font-weight:400 }

.spec{
  margin-top:32px; border-top:1px solid var(--line-hard);
  display:grid; grid-template-columns:1fr;
}
/* without a column gap one row's value collides with the next row's label */
@media (min-width:640px){ .spec{ grid-template-columns:1fr 1fr; gap:0 calc(var(--gutter) * 2) } }
@media (min-width:1080px){ .spec{ grid-template-columns:repeat(4,1fr); gap:0 var(--gutter) } }
.spec .row{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
@media (min-width:1080px){
  .spec .row{ flex-direction:column; gap:6px; justify-content:flex-start;
    border-bottom:0; padding:14px 0 0 }
}
.spec .row dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mute);
}
.spec .row dd{ font-size:13px; color:var(--fg); text-align:right }
@media (min-width:1080px){ .spec .row dd{ text-align:left; font-size:14px } }

/* ---------------------------------------------------------------- plates */
.plate{ margin-block:var(--gutter) }
.plate-fig{ position:relative }
.plate figcaption{
  display:flex; justify-content:space-between; gap:14px;
  padding-top:9px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-mute);
}
.seq{ display:grid; grid-template-columns:1fr; gap:var(--gutter) }
@media (min-width:820px){
  .seq{ grid-template-columns:repeat(12,minmax(0,1fr));
    gap:calc(var(--gutter) * 2) var(--gutter) }
  .seq > .plate{ margin-block:0 }
  .seq > .plate.wide{ grid-column:1/-1 }
  .seq > .plate.half{ grid-column:span 6 }
  .seq > .plate.inset{ grid-column:3/span 8 }
  .seq > .plate.left{ grid-column:1/span 7 }
  .seq > .plate.right{ grid-column:6/span 7 }
}

/* next entry */
.pnext{ border-top:1px solid var(--line-hard); margin-top:16px;
  padding-block:34px 46px; display:block }
.pnext .n{ display:block; margin-bottom:11px }
.pnext .t{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px,7.4vw,68px); line-height:.98; letter-spacing:-.035em;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
  display:flex; align-items:baseline; gap:.3em; flex-wrap:wrap;
}
.pnext .t .arw{ font-family:var(--sans); font-size:.42em; font-weight:400;
  transition:transform .5s var(--ease) }
.pnext:hover .t .arw{ transform:translateX(14px) }

/* ---------------------------------------------------------------- images */
/* The low-quality placeholder is a background on the box; the photograph
   paints over it as it decodes. Nothing here is hidden pending JavaScript —
   an earlier build gated image opacity on a script-added class, and one bug
   in that script made every photograph on the site invisible. */
.lz{
  position:relative; overflow:hidden;
  background-color:var(--surface);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.lz > img{ width:100%; height:auto; display:block }
/* cosmetic only: drop the blur once the frame is up, so a transparent PNG
   does not ghost. Safe to never run. */
.lz.loaded{ background-image:none!important }

/* ---------------------------------------------------------------- instrument */
.inst{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  opacity:0; transition:opacity .35s var(--ease);
}
.inst.on{ opacity:1 }
.inst-cols{
  position:absolute; inset:0; padding-inline:var(--page);
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gutter);
}
.inst-cols span{ background:var(--line-soft); border-inline:1px solid var(--line) }
.inst-base{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 7px,var(--line-soft) 7px,var(--line-soft) 8px);
}
.inst-read{
  position:fixed; left:calc(var(--page) + 86px); bottom:12px; z-index:8001;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg); opacity:0; transition:opacity .3s var(--ease);
  background:rgb(var(--bg-rgb) / .85); padding:5px 9px; border:1px solid var(--line);
}
.inst-read.on{ opacity:1 }
.ghint{
  position:fixed; left:var(--page); bottom:12px; z-index:8001;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-mute); border:1px solid var(--line); padding:5px 8px;
  background:rgb(var(--bg-rgb) / .7); cursor:pointer; pointer-events:auto;
  transition:color .3s var(--ease), border-color .3s var(--ease);
  display:none;
}
@media (min-width:1080px) and (hover:hover){ .ghint{ display:block } }
.ghint:hover,.ghint.hot{ color:var(--fg); border-color:var(--line-hard) }
.ghint kbd{ font:inherit; color:var(--fg) }

/* ---------------------------------------------------------------- cursor */
.cur{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:var(--s,34px); height:var(--s,34px);
  margin:calc(var(--s,34px) / -2) 0 0 calc(var(--s,34px) / -2);
  opacity:0;
  transition:opacity .3s var(--ease), width .35s var(--ease-o),
             height .35s var(--ease-o), margin .35s var(--ease-o);
  mix-blend-mode:difference;
  display:none;
}
@media (hover:hover) and (pointer:fine) and (min-width:1080px){ .cur{ display:block } }
.cur.on{ opacity:1 }
.cur svg{ width:100%; height:100%; overflow:visible }
.cur .ring{ fill:none; stroke:#fff; stroke-width:1; opacity:.85 }
.cur .tick{ stroke:#fff; stroke-width:1 }
.cur .dot{ fill:#fff }
.cur.lock{ --s:74px }
.cur.lock .ring{ opacity:1 }
.cur.armed{ --s:60px }
.cur.armed .ring{ opacity:1; stroke-dasharray:6 5 }
.cur-tag{
  position:fixed; z-index:9500; pointer-events:none;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg); opacity:0; transition:opacity .3s var(--ease);
  white-space:nowrap; display:none;
}
@media (hover:hover) and (pointer:fine) and (min-width:1080px){ .cur-tag{ display:block } }
.cur-tag.on{ opacity:.9 }

/* ---------------------------------------------------------------- QA capture */
/* Only ever active with ?qa in the URL — see main.js. Deliberately does NOT
   touch image opacity: an earlier version forced .lz images visible, which hid
   a real bug where no photograph ever faded in on the live site. */
.qa .hero{ min-height:0; padding-bottom:64px }
.qa #boot{ display:none }
.qa [data-rv]{ opacity:1!important; transform:none!important }


/* ---------------------------------------------------------------- reveal */
/* Gated on .js (set inline in <head>, so there is no flash): with scripting
   off the observer never fires, and un-gated these would leave the page blank. */
.js [data-rv]{ opacity:0; transform:translateY(14px) }
.js [data-rv].in{ opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rv]{ opacity:1 !important; transform:none !important }
  .lz > img{ opacity:1 }
  .cur,.cur-tag{ display:none !important }
  .hero-canvas{ opacity:1 }
}