/* ============================================================
   Rock Ridge — drawings, photography, the field board, and the
   few page-specific layouts. Loaded after site.css; defines no
   base tokens.
   ============================================================ */

/* ---------- engineering drawings ---------- */
.drawing{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.drawing-title{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);align-items:center;justify-content:space-between;
  padding:7px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--fg-2);text-transform:uppercase;
}
.drawing-title b{font-weight:500;color:var(--fg)}
.drawing-title .dwg{color:var(--fg-3)}
.drawing svg{width:100%;height:auto;display:block;padding:10px 10px 6px}
.drawing figcaption{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-1) var(--s-4);
  padding:7px 12px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);letter-spacing:.02em;
}
.drawing--inline svg{padding:6px}

/* drawing vocabulary */
.d-line{stroke:var(--fg-3);fill:none}
.d-hair{stroke:var(--line-2);fill:none}
.d-a{fill:color-mix(in srgb,var(--fg) 6%,transparent)}
.d-b{fill:color-mix(in srgb,var(--fg) 11%,transparent)}
.d-c{fill:color-mix(in srgb,var(--fg) 18%,transparent)}
.d-t{fill:var(--fg-3);font-family:var(--f-mono);font-size:9px;letter-spacing:.06em}
.d-tb{fill:var(--fg);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;font-weight:500}
.d-paper{fill:var(--surface)}

/* one-time line draw for the new bore; nothing loops */
.bore{stroke-dasharray:520;stroke-dashoffset:520;animation:bore 2.2s .3s cubic-bezier(.6,.02,.25,1) forwards}
@keyframes bore{to{stroke-dashoffset:0}}
.fadein{opacity:0;animation:fadein .5s forwards}
@keyframes fadein{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.bore{stroke-dashoffset:0;animation:none}.fadein{opacity:1;animation:none}}

/* ---------- photography ---------- */
.shot{
  position:relative;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);
  overflow:hidden;display:flex;flex-direction:column;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .frame{position:relative;overflow:hidden;background:var(--surface-2)}
.shot--wide .frame{aspect-ratio:21/9}
.shot--land .frame{aspect-ratio:16/9}
.shot--box .frame{aspect-ratio:4/3}
.shot--tall .frame{aspect-ratio:3/4}
.shot .frame img{position:absolute;inset:0}
.shot figcaption{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);
  padding:8px 10px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);letter-spacing:.02em;
}
.shot figcaption b{font-weight:500;color:var(--fg);display:inline-flex;align-items:center;gap:7px}
.shot figcaption b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tick,var(--fg-3));flex:none}
.shot--white figcaption b::before{box-shadow:inset 0 0 0 1px var(--proposed-ring)}
.shot figcaption span{color:var(--fg-3)}
.shot figcaption .ref{margin-left:auto}

/* four-up strip: one border, hairline gaps */
.strip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
@media (min-width:640px){.strip{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip>*{min-width:0}
.strip .shot{border:0;border-radius:0}

/* ---------- the field board ---------- */
.board{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;font-size:var(--fs-sm)}
.board-head{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-2);letter-spacing:.02em;
}
.board-head .live{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.board-cols,.board-row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1) var(--s-4);
  padding:9px 12px;border-bottom:1px solid var(--line);align-items:center;
}
@media (min-width:760px){
  .board-cols,.board-row{grid-template-columns:5.25rem minmax(0,1fr) 8.5rem 3rem 6.5rem}
}
.board-cols{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
  padding-block:6px;background:var(--surface);
}
@media (max-width:759px){.board-cols{display:none}}
.board-row:last-child{border-bottom:0}
.board-row:hover{background:var(--surface-2)}
.board-row .unit{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.board-row .unit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tick);flex:none}
.board-row.is-white .unit::before{box-shadow:inset 0 0 0 1px var(--proposed-ring)}
.board-row .task{color:var(--fg);line-height:1.4}
.board-row .task em{font-style:normal;color:var(--fg-3);font-family:var(--f-mono);font-size:var(--fs-xs);display:block;margin-top:1px}
@media (min-width:1100px){.board-row .task em{display:inline;margin-left:6px}}
.board-row .meter{height:4px;background:var(--surface-3);border-radius:1px;position:relative;overflow:hidden}
.board-row .meter i{position:absolute;inset:0 auto 0 0;display:block;background:var(--tick);width:0;transition:width 1.2s var(--ease)}
.board-row .pct{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-2);text-align:right;font-variant-numeric:tabular-nums}
.board-row .state{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;justify-self:start;
  padding:3px 7px;border:1px solid var(--line);border-radius:var(--r-1);color:var(--fg-2);white-space:nowrap;background:var(--surface);
}
.board-row .state::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}
@media (max-width:759px){
  .board-row{grid-template-columns:auto 1fr;grid-template-areas:"unit state" "task task" "meter pct"}
  .board-row .unit{grid-area:unit}.board-row .state{grid-area:state;justify-self:end}
  .board-row .task{grid-area:task}.board-row .meter{grid-area:meter}.board-row .pct{grid-area:pct}
}
.board-foot{
  padding:7px 12px;border-top:1px solid var(--line);background:var(--surface-2);
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);justify-content:space-between;
}

/* ---------- home hero ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero .wrap{padding-block:clamp(2rem, 1.5rem + 2vw, 3.5rem)}
.hero-grid{display:grid;gap:var(--s-6)}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-7);align-items:center}}
.hero-grid>*{min-width:0}
.hero h1{margin:var(--s-3) 0 var(--s-4);max-width:22ch}
.hero h1 span{display:block;color:var(--fg-2);font-weight:500}
.hero .lede{max-width:52ch}
.hero .btns{margin-top:var(--s-5)}
.hero .facts{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line)}
.hero-sub{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
}
.hero-sub .dot{background:var(--ok)}

/* divisions: a record table, not seven cards */
.divs{border-top:1px solid var(--line)}
.div-row{
  display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--s-1) var(--s-4);
  padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start;
  transition:background-color var(--t-fast) var(--ease);
}
@media (min-width:900px){
  .div-row{grid-template-columns:2.75rem 15rem minmax(0,1fr) 1.5rem;align-items:baseline}
}
.div-row .idx{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);display:inline-flex;align-items:center;gap:8px;letter-spacing:.04em}
.div-row .idx::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--tick);flex:none}
.div-row.is-white .idx::before{box-shadow:inset 0 0 0 1px var(--proposed-ring)}
.div-row h3{font-size:var(--fs-base);font-weight:500;color:var(--fg)}
.div-row h3 small{display:block;font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);font-weight:400;margin-top:3px;letter-spacing:.02em}
.div-row .body{display:flex;flex-direction:column;gap:var(--s-2)}
.div-row p{font-size:var(--fs-sm);color:var(--fg-2);max-width:70ch;text-wrap:pretty}
.div-row .arw{width:14px;height:14px;color:var(--fg-3);justify-self:end;transition:transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease);display:none}
@media (min-width:900px){.div-row .arw{display:block}}
.div-row:hover h3{color:var(--accent-text)}
.div-row:hover .arw{color:var(--fg);transform:translateX(2px)}
@media (max-width:899px){.div-row h3{grid-column:2}.div-row .body{grid-column:2}}

/* ---------- project profiles: rows with a plate ---------- */
.proj{
  display:grid;gap:var(--s-4);padding:var(--s-5) 0;border-top:1px solid var(--line);
}
@media (min-width:800px){.proj{grid-template-columns:16rem minmax(0,1fr);gap:var(--s-6);align-items:start}}
@media (min-width:1100px){.proj{grid-template-columns:18rem minmax(0,1fr) 15rem}}
.proj>*{min-width:0}
.proj .plate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.proj .plate svg{width:100%;height:auto;display:block;aspect-ratio:16/10}
.proj .plate .ref{padding:5px 10px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);background:var(--surface-2)}
.proj .body{display:flex;flex-direction:column;gap:var(--s-2)}
.proj .body h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em}
.proj .body p{font-size:var(--fs-sm);color:var(--fg-2);max-width:66ch;text-wrap:pretty}
.proj .meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--s-3);font-size:var(--fs-sm);align-content:start}
.proj .meta dt{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding-top:2px}
.proj .meta dd{margin:0;color:var(--fg);font-weight:500}
@media (max-width:1099px){.proj .meta{grid-column:2}}
@media (max-width:799px){.proj .meta{grid-column:1}}
.proj-list>.proj:last-child{border-bottom:1px solid var(--line)}

/* ---------- statement ---------- */
.statement{
  font-size:clamp(1.15rem, 1rem + .6vw, 1.45rem);line-height:1.35;letter-spacing:-.015em;font-weight:500;
  color:var(--fg);max-width:32ch;text-wrap:balance;
}
.attrib{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--fg-3);margin-top:var(--s-3)}

/* ---------- people ---------- */
.person{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--s-3);align-items:start}
.person .av{
  width:40px;height:40px;border-radius:var(--r-2);display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg);
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.06em;
  box-shadow:inset 3px 0 0 var(--tick);
}
.person h3{font-size:var(--fs-base);font-weight:500}
.person .role{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);margin:2px 0 6px;letter-spacing:.02em}
.person p{font-size:var(--fs-sm);color:var(--fg-2)}

/* ---------- direct lines ---------- */
.lines{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lines a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-4);align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.lines b{font-weight:500;font-size:var(--fs-base);display:block}
.lines small{display:block;font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--fg-3);margin-top:2px}
.lines .val{text-align:right}
.lines a:hover b{color:var(--accent-text)}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:var(--s-4);padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tl .yr{font-family:var(--f-mono);font-size:var(--fs-sm);font-weight:500;color:var(--accent-text);font-variant-numeric:tabular-nums}
.tl h4{font-size:var(--fs-base);font-weight:500}
.tl p{color:var(--fg-2);font-size:var(--fs-sm);margin-top:3px;max-width:70ch;text-wrap:pretty}

/* ---------- people grid: rows, two across ---------- */
.people{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--line)}
@media (min-width:720px){.people{grid-template-columns:1fr 1fr;column-gap:var(--s-6)}}
.people li{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}

/* ---------- project index table: the plate reference column ---------- */
.idx-link{text-decoration:none;color:var(--fg);font-weight:500}
.idx-link:hover{color:var(--accent-text)}

/* ---------- polish ---------- */
.foot .demo-note{max-width:none}
.note .statement{font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem);line-height:1.4;color:var(--fg);margin-top:2px}
.metric b small{margin-left:.35em;font-size:.5em;letter-spacing:0}
/* a spec list living in a narrow column stacks its term above the definition */
.stack>.spec>div{grid-template-columns:1fr;gap:3px}

/* ============================================================
   MOTION LAYER
   Reveal on scroll, a staged hero entrance, rules that draw
   themselves, figures that count, and a few live indicators.
   Everything here is disabled under prefers-reduced-motion.
   ============================================================ */

/* scroll reveal: applied by site.js, staggered per sibling */
.rv{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--rvd,0ms);will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
.rv.in.rv-done{will-change:auto}

/* the section index rule draws itself once the row is in view */
.sec-index::after{transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease) .15s}
.sec-index.in::after{transform:scaleX(1)}
.block-label::after{transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease) .1s}
.block-label.in::after{transform:scaleX(1)}

/* hero: a staged entrance, then the drawing panel settles in */
.lift{opacity:0;transform:translateY(12px);animation:lift .7s var(--ease) forwards;animation-delay:var(--ld,0ms)}
@keyframes lift{to{opacity:1;transform:none}}
.lift-panel{opacity:0;transform:translateX(14px);animation:liftPanel .8s var(--ease) .25s forwards}
@keyframes liftPanel{to{opacity:1;transform:none}}

/* live dots breathe, slowly */
.status .dot--ok,.board-head .dot--ok,.hero-sub .dot{
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent);
  animation:breathe 3.2s ease-out infinite;
}
@keyframes breathe{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}
  60%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* board meters, footprint bars */
.bar i{transition:width 1.1s var(--ease)}
.board-row{transition:background-color var(--t-fast) var(--ease)}

/* the drill head advances along the bore after it is drawn */
.spark-wrap circle{opacity:0;animation:fadein .4s 2.6s forwards}

/* drawer slides open */
.drawer{display:grid;grid-template-rows:0fr;border-top-color:transparent;
  transition:grid-template-rows .28s var(--ease),border-top-color .28s var(--ease)}
.drawer>.wrap{overflow:hidden;min-height:0;opacity:0;transform:translateY(-4px);
  transition:opacity .25s var(--ease) .05s,transform .28s var(--ease)}
.drawer.open{display:grid;grid-template-rows:1fr;border-top-color:var(--line)}
.drawer.open>.wrap{opacity:1;transform:none}
@media (min-width:1000px){.drawer,.drawer.open{display:none}}

/* accordion body eases in */
details[open] .det-body{animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
summary::before{transition:transform .2s var(--ease),color var(--t-fast) var(--ease)}
details[open] summary::before{transform:rotate(180deg)}

/* nav hover underline grows from the left; the active one stays */
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .2s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]::after{transition:none}

/* rows and photos respond to the pointer */
.div-row{padding-left:0;transition:background-color var(--t-fast) var(--ease),padding-left .2s var(--ease)}
.div-row:hover{padding-left:6px}
.div-row .idx::before{transition:transform .2s var(--ease)}
.div-row:hover .idx::before{transform:scale(1.3)}
.shot .frame img{transition:transform .9s var(--ease)}
.shot:hover .frame img{transform:scale(1.03)}
.proj .plate svg{transition:transform .6s var(--ease)}
.proj:hover .plate svg{transform:scale(1.02)}
.side-nav a .idx{transition:color var(--t-fast) var(--ease),transform .2s var(--ease)}
.side-nav a.is-active .idx{transform:translateX(2px)}
.tag{transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.div-row:hover .tag{border-color:var(--line-2);color:var(--fg)}
.metric{transition:background-color var(--t-fast) var(--ease)}
.metric:hover{background:var(--surface-2)}
.lines a .val{transition:color var(--t-fast) var(--ease),transform .2s var(--ease)}
.lines a:hover .val{color:var(--accent-text);transform:translateX(-2px)}

/* theme crossfade, class is set by the toggle for a moment */
html.theming,html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,fill .35s ease,stroke .35s ease,box-shadow .35s ease !important}

/* reduced motion means reduced, not removed: short opacity-only fades stay,
   transforms, loops, counting figures and the drill head go */
@media (prefers-reduced-motion:reduce){
  .rv{transform:none;transition:opacity .3s ease;transition-delay:0ms}
  .sec-index::after,.block-label::after{transform:none;transition:none}
  .lift{transform:none;animation:liftFade .4s ease forwards}
  .lift-panel{transform:none;animation:liftFade .4s ease .1s forwards}
  .status .dot--ok,.board-head .dot--ok,.hero-sub .dot{animation:none;box-shadow:none}
  .spark-wrap{display:none}
  .drawer,.drawer>.wrap{transition:none}
  details[open] .det-body{animation:none}
  .shot:hover .frame img,.proj:hover .plate svg{transform:none}
  .div-row:hover{padding-left:0}
  .bar i,.board-row .meter i{transition:none}
}
@keyframes liftFade{to{opacity:1}}

/* closed drawer takes no space and cannot be focused into */
.drawer>.wrap{padding-block:0;visibility:hidden;
  transition:opacity .25s var(--ease) .05s,transform .28s var(--ease),padding .28s var(--ease),visibility 0s linear .3s}
.drawer.open>.wrap{padding-block:var(--s-2) var(--s-4);visibility:visible;transition-delay:.05s,0s,0s,0s}

/* ============================================================
   FOOTAGE
   Ambient aerial clips behind the hero and page headers, and a
   reel on the home page. Every clip is muted, loops, plays only
   while on screen, and stops with one control that is remembered.
   ============================================================ */
.hero--video,.phead--video{
  position:relative;overflow:hidden;isolation:isolate;background:#0C0E11;
  --bg:#0C0E11;--fg:#F2F4F6;--fg-2:#C3C9D0;--fg-3:#8F97A0;
  --line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.3);
  --surface:rgba(14,17,20,.78);--surface-2:rgba(255,255,255,.06);--surface-3:rgba(255,255,255,.14);
  --primary:#F2F4F6;--primary-fg:#0C0E11;--primary-hover:#FFFFFF;--accent-text:#FF9B57;
  color:var(--fg);color-scheme:dark;
}
.hero--video{border-bottom:0}
.hero--video .wrap{padding-block:clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3.5rem, 2.5rem + 4vw, 6rem)}
.media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0C0E11}
.media video,.media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.62)}
.media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,12,15,.9) 0%,rgba(10,12,15,.68) 46%,rgba(10,12,15,.4) 100%),
    linear-gradient(180deg,rgba(10,12,15,.4) 0%,transparent 28%,transparent 70%,rgba(10,12,15,.72) 100%)}
.hero--video .drawing{background:rgba(12,14,17,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero--video .drawing-title,.hero--video .drawing figcaption{background:rgba(255,255,255,.04)}
.hero--video .facts{border-top-color:var(--line)}
.hero--video .hero-sub .dot{background:var(--ok)}

.phead--video{border-bottom:0}
.phead--video .wrap{padding-block:var(--s-6) 0}
.phead--video .phead-grid{padding-bottom:var(--s-7)}
.phead--video .media::after{
  background:linear-gradient(90deg,rgba(10,12,15,.9) 0%,rgba(10,12,15,.72) 50%,rgba(10,12,15,.5) 100%),
             linear-gradient(180deg,transparent 60%,rgba(10,12,15,.6) 100%)}

/* the one control: pauses every clip on the site, remembered across pages */
.vid-toggle{
  position:absolute;right:var(--gut);bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 9px;
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);
  background:rgba(12,14,17,.62);border:1px solid var(--line);border-radius:var(--r-1);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.vid-toggle:hover{color:var(--fg);border-color:var(--line-2)}
.vid-toggle .dot{background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent);animation:breathe 3.2s ease-out infinite}
.vid-toggle .off{display:none}
html.footage-paused .vid-toggle .on{display:none}
html.footage-paused .vid-toggle .off{display:inline}
html.footage-paused .vid-toggle .dot{background:var(--fg-3);animation:none;box-shadow:none}
.media-credit{
  position:absolute;left:var(--gut);bottom:16px;z-index:2;
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
}
@media (max-width:640px){.media-credit{display:none}}

/* the reel: four clips, hairline gaps, mono captions like the photo strip */
.reel{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
@media (min-width:720px){.reel{grid-template-columns:repeat(2,1fr)}}
.reel>*{min-width:0}
.reel .shot{border:0;border-radius:0}
.shot .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clip-tag{
  position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:3px 7px;border-radius:var(--r-1);background:rgba(12,14,17,.7);color:#E8EBEE;
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.clip-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}
html.footage-paused .clip-tag::before{background:#8F97A0}

/* live clock in the status strip */
.status .clock{font-variant-numeric:tabular-nums;color:var(--fg-2)}
.status .clock b{font-weight:500;color:var(--fg)}
@media (max-width:640px){.status .clock{display:none}}

@media (prefers-reduced-motion:reduce){
  .vid-toggle .dot{animation:none;box-shadow:none}
}

/* ---------- drawings draw themselves (site.js) ----------
   Held invisible until the script has set each stroke to its start state;
   without JS the html.js class never appears and drawings simply show. */
html.js .drawing svg,html.js .proj .plate svg{visibility:hidden}
html.js .fadein{animation:none;opacity:1}
html.js .bore{animation:none;stroke-dashoffset:0;stroke-dasharray:none}
.drawing svg,.proj .plate svg{will-change:auto}