/* DICTATE® — strict / monotone / gridded
   #E6E6E6 ground · #000 ink · Helvetica Neue only · 16 columns, 3px gutters
   blue: the intro full stop, the active index marker, BOOK A CALL on hover,
   and the solar panels in the diagrams. amber marks light: suns, flickering
   windows. nowhere else. */

:root{
  --bg:#e6e6e6;
  --ink:#000;
  --paper:#fff;
  --dim:#606060;
  --hair:rgba(0,0,0,.22);
  --blue:#0115e6;
  --glow:#f2b100;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:.188rem;
  --out:cubic-bezier(.03,.71,.31,1);
  --hard:cubic-bezier(.66,0,.42,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500}
body{overflow:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--bg)}
.blue{color:var(--blue)}          /* blue #1 — the intro full stop, once */
b{font-weight:700}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
sup{font-size:.42em;vertical-align:super}

/* ---------- the two type roles ---------- */
.meta{
  font-size:11px;font-weight:500;letter-spacing:.012em;text-transform:uppercase;
  color:var(--ink);line-height:1.2;
}
.display{font-size:clamp(38px,9.4vw,164px);font-weight:500;letter-spacing:-.055em;line-height:.94}
.h2{font-size:clamp(26px,4.4vw,68px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.lede{font-size:clamp(15px,1.55vw,19px);line-height:1.45;letter-spacing:-.005em;max-width:38ch}
.lede p{margin:0 0 1em}
.lede p:last-child{margin-bottom:0}
.lede-stack{line-height:1.35}
strong{font-weight:700}

/* the ladder — slide 06's labelled pairs read as a list, not prose */
.ladder p{margin:0 0 14px;padding-top:10px;border-top:1px solid var(--hair);line-height:1.35}
.ladder p:last-child{margin-bottom:0}
.ladder strong{display:inline-block;min-width:6.2em}
.col-mid.ladder{max-width:none}
.col-mid.ladder p{display:grid;grid-template-columns:9.2em 1fr;column-gap:14px;align-items:baseline}
.col-mid.ladder strong{min-width:0;font-size:.62em;letter-spacing:.06em}
.ladder br{display:none}

/* the note — one voice, whether written as a block or as paragraphs */
.note{font-size:14px;line-height:1.5;letter-spacing:.005em;color:var(--dim);max-width:36ch}
.note p{margin:0 0 .9em;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}
.note p:last-child{margin-bottom:0}

/* the closing beat — slide 08's send-off carries more weight than a note */
.section-closing{margin-top:18px;padding-top:12px;border-top:1px solid var(--hair)}
.section-closing strong{color:var(--ink)}

/* ---------- masked line reveal ---------- */
.kw{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:.14em 0 .2em;margin:-.14em 0 -.2em;
}
.kw > i{
  display:inline-block;font-style:normal;transform:translateY(135%);
  transition:transform .78s var(--out);
}
.kw.in > i{transform:none}
.kin{visibility:hidden}
.kin.armed{visibility:visible}

.rv{opacity:0;transform:translateY(10px);transition:opacity .6s var(--out),transform .6s var(--out)}
.rv.on{opacity:1;transform:none}

/* slide 01's litany sweeps in line by line, left to right */
.sweep span{display:inline-block;opacity:0;transform:translateX(-34px);transition:opacity .7s var(--out),transform .7s var(--out)}
.sweep.on span{opacity:1;transform:none}
.sweep.on span:nth-of-type(2){transition-delay:.1s}
.sweep.on span:nth-of-type(3){transition-delay:.2s}
.sweep.on span:nth-of-type(4){transition-delay:.3s}

/* ---------- the fixed frame ---------- */
.frame{position:fixed;inset:0;z-index:40;pointer-events:none}
.frame > *{position:absolute;pointer-events:auto}
.mark{
  top:20px;left:22px;font-size:13px;font-weight:700;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
}
.frame-tr{top:21px;right:22px;color:var(--ink);text-decoration:none;padding-bottom:2px;border-bottom:1px solid var(--ink)}
.frame-tr:hover{color:var(--blue);border-color:var(--blue)}   /* blue #3 */
.frame-bl{bottom:20px;left:22px;color:var(--dim)}
.frame-br{bottom:20px;right:22px;color:var(--dim)}

/* ---------- intro ---------- */
.film{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  transition:opacity .45s var(--hard);
}
.film-inner{position:absolute;left:22px;bottom:76px;right:22px}
.film .meta{color:var(--dim);margin-bottom:18px}
.film-q{font-size:clamp(17px,2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.25;min-height:1.25em;max-width:26ch}
.film-a{font-size:clamp(34px,7.4vw,118px);font-weight:500;letter-spacing:-.055em;line-height:.98;min-height:1em;margin-top:10px}
.film-a #filmFill{display:inline-block}
.film.out{opacity:0;pointer-events:none}
.skip{
  position:absolute;bottom:20px;right:22px;background:none;border:none;cursor:pointer;
  color:var(--dim);font-family:var(--sans);padding:4px;
}
.skip:hover{color:var(--ink)}

/* ---------- deck ---------- */
.deck{height:100svh;overflow:hidden;position:relative}
.deck-track{height:100svh;transition:transform .95s var(--hard);will-change:transform}
.slide{
  height:100svh;position:relative;
  display:grid;grid-template-columns:repeat(16,minmax(0,1fr));
  gap:var(--gutter);align-content:center;align-content:safe center;
  padding:96px 22px 84px;
}
.slide.close{background:var(--paper)}

/* column placements — asymmetric by design */
.col-a{grid-column:1 / 13}
.col-b{grid-column:1 / 8;margin-top:26px}
.col-wide{grid-column:1 / 17;margin-top:34px}
.figs + .col-note{margin-top:22px;align-self:start}
.col-scene{grid-column:8 / 17;margin-top:30px}
.col-scene-c{grid-column:4 / 15;margin-top:26px}
.col-scene-m{grid-column:7 / 16;margin-top:30px}
.col-bn{grid-column:1 / 7;margin-top:26px}
.col-scene-c svg{max-height:24svh}
.col-note{grid-column:1 / 6;margin-top:30px;align-self:end}
.col-note-wide{grid-column:1 / 11;margin-top:28px;align-self:end;max-width:none;column-count:2;column-gap:28px}
.col-note-wide p{break-inside:avoid;max-width:36ch}
.col-mid{grid-column:1 / 11;margin-top:30px}
.col-fig{grid-column:9 / 16;margin-top:30px;align-self:start}
.col-act{grid-column:9 / 15;margin-top:30px;align-self:start}
.idx{grid-column:1 / 17;margin-bottom:16px;color:var(--dim)}
.idx .num{color:var(--ink)}
.cue{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);color:var(--dim)}
.stack{display:flex;flex-direction:column;gap:0}
.stack .display{font-size:clamp(30px,6.6vw,104px)}

/* facts list */
.facts{list-style:none;display:flex;flex-direction:column;gap:11px}
.facts li{font-size:14px;letter-spacing:-.005em;display:flex;gap:12px;align-items:baseline;
  border-top:1px solid var(--hair);padding-top:9px}
.facts .meta{color:var(--dim);min-width:22px}

/* figures */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--gutter);border-top:1px solid var(--ink)}
.fig{padding:22px 14px 0 0;display:flex;flex-direction:column;gap:12px}
.fig-v{font-size:clamp(30px,4.6vw,74px);font-weight:500;letter-spacing:-.055em;line-height:1;white-space:nowrap}
.fig .meta{color:var(--dim);max-width:22ch}

/* slide 07 — the portfolio: monochrome at rest, color on hover */
.folio{grid-column:1 / 17;margin-top:30px;align-self:start;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.shot{margin:0;display:flex;flex-direction:column;gap:8px}
.shot:nth-child(even){margin-top:26px}
.shot img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04);transition:filter .55s ease}
.shot:hover img{filter:none}
.shot .meta{color:var(--dim)}
.folio .rv:nth-child(2){transition-delay:.08s}
.folio .rv:nth-child(3){transition-delay:.16s}
.folio .rv:nth-child(4){transition-delay:.24s}

/* action */
.act{display:flex;flex-direction:column;gap:16px;align-items:flex-start;align-self:start}
.btn{
  display:inline-block;background:var(--ink);color:var(--bg);
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 40px;text-decoration:none;border:none;cursor:pointer;
  transition:background .2s var(--hard),letter-spacing .5s var(--out);
}
.btn:hover{background:var(--blue);letter-spacing:.16em}     /* blue #3 */

/* index rail */
.deck-nav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:4px;
}
.tick{
  width:26px;height:16px;background:none;border:none;padding:0;cursor:pointer;
  position:relative;opacity:.3;transition:opacity .25s var(--hard);
}
.tick::before{
  content:"";position:absolute;right:0;top:8px;height:1px;width:16px;background:var(--ink);
  transition:width .35s var(--out),background .25s ease;
}
.tick.active{opacity:1}
.tick.active::before{width:26px;background:var(--blue)}    /* blue #2 */

/* ---------- scenes: line-work, monotone ---------- */
.scene{width:100%}
.scene svg{width:100%;height:auto;max-height:27svh;overflow:visible;font-family:var(--sans)}
.scene .ln{fill:none;stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:square}
.scene .ln-b{stroke:var(--ink)}
.scene .lbl{font-size:11px;letter-spacing:.012em;fill:var(--dim);text-transform:uppercase}
.scene .dr{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s var(--out)}
.scene.on .dr{stroke-dashoffset:0}
.scene .fade{opacity:0;transition:opacity .6s ease}
.scene.on .fade{opacity:1}
.scene .pop{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.scene.on .pop{animation:popUp .55s var(--out) forwards}
@keyframes popUp{to{transform:scaleY(1)}}
.scene .win{fill:var(--glow)}
.scene .winlit{fill:var(--ink)}
.scene .sun .ln{stroke:var(--glow)}
.scene.on .win{animation:outage 4.4s steps(1) infinite}
.scene.on .win.w2{animation-delay:1.4s}
.scene.on .win.w3{animation-delay:2.6s}
@keyframes outage{0%,58%{opacity:1}59%,67%{opacity:0}68%,80%{opacity:1}81%,86%{opacity:0}87%,100%{opacity:1}}
.scene .bolt{stroke:var(--ink);opacity:0}
.scene.on .bolt{animation:boltBlink 4.4s steps(1) infinite}
.scene.on .bolt.b2{animation-delay:1.9s}
@keyframes boltBlink{0%,56%{opacity:0}57%,82%{opacity:1}83%,100%{opacity:0}}
.scene .pulseline{
  fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0;
}
.scene.on .pulseline{opacity:1;animation:dashTravel 2.4s linear infinite}
.scene.on .pulseline.p2{animation-delay:.8s}
.scene.on .pulseline.p3{animation-delay:1.6s}
@keyframes dashTravel{to{stroke-dashoffset:0}}
.scene .rays{transform-box:fill-box;transform-origin:center}
.scene.on .rays{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scene .panel{fill:var(--blue)}
.scene .dashline{stroke-dasharray:5 7}
.scene .mk{fill:var(--ink)}
.scene .slowdr{transition-duration:1.9s}
.scene .bfill{fill:var(--ink);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.12)}
.scene.on .bfill{animation:charge 3.6s var(--out) infinite}
.scene.on .bfill.bf2{animation-delay:1.1s}
@keyframes charge{0%{transform:scaleY(.12)}70%,88%{transform:scaleY(.94)}100%{transform:scaleY(.12)}}

/* ---------- mobile: one column, fewer places to look ---------- */
@media (max-width:820px){
  .slide{padding:92px 18px 76px;align-content:center}
  .col-a,.col-b,.col-bn,.col-wide,.col-fig,.col-scene,.col-scene-c,.col-scene-m,.col-note,.col-note-wide,.col-act,.col-mid{grid-column:1 / 17;margin-top:20px}
  .folio{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}
  .shot:nth-child(even){margin-top:14px}
  .col-note-wide{column-count:1}
  .col-note{align-self:auto}
  .col-scene,.col-scene-c,.col-scene-m{margin-top:24px}
  .figs{grid-template-columns:1fr;gap:0}
  .fig{border-bottom:1px solid var(--hair);padding:16px 0}
  .cue{bottom:76px}
  .mark,.frame-bl{left:18px}
  .frame-tr,.frame-br{right:18px}
  .deck-nav{display:none}
  .film-inner{left:18px;right:18px;bottom:70px}
}
@media (max-height:520px){
  .slide{padding-top:64px;padding-bottom:52px}
  .display{font-size:clamp(26px,5.4vw,54px)}
  .h2{font-size:clamp(20px,3.4vw,38px)}
  .col-scene,.col-scene-c,.col-scene-m{display:none}
  .fig{padding:10px 14px 0 0;gap:6px}
  .col-a,.col-b,.col-bn,.col-wide,.col-note{margin-top:14px}
}

/* ---------- reduced motion: static, complete, scrollable ---------- */
@media (prefers-reduced-motion:reduce){
  body{overflow:auto}
  .film,.cue,.deck-nav{display:none !important}
  .deck{height:auto;overflow:visible}
  .deck-track{height:auto;transform:none !important;transition:none}
  .slide{height:auto;min-height:auto;padding:76px 22px;align-content:start}
  .frame-bl,.frame-br{display:none}
  .mark,.frame-tr{background:var(--bg);padding:4px 6px;top:14px}
  .mark{left:16px}.frame-tr{right:16px}
  .kin{visibility:visible}
  .kw > i{transform:none;transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .sweep span{opacity:1;transform:none;transition:none}
  .scene .dr{stroke-dashoffset:0;transition:none}
  .scene .pop{transform:scaleY(1);animation:none !important}
  .scene .win,.scene .winlit,.scene .bolt,.scene .rays,.scene .bfill,.scene .pulseline{animation:none !important}
  .scene .bolt{opacity:1}
  .scene .pulseline{opacity:0}
  .scene .bfill{transform:scaleY(.94)}
  .scene .fade{opacity:1;transition:none}
}