/* INFLU™, Direção 01 · SIGNAL
   Media infrastructure. Pink is signal, never decoration.
   Light is the default (paper). Dark follows the brand board. */

:root{
  /* light / paper */
  --signal:#D6246E;
  --signal-2:#EC4899;
  --signal-dim:#A81654;
  --ink:#F7F5F8;
  --surface:#FFFFFF;
  --surface-2:#F0EDF2;
  --line:#E3DEE8;
  --line-2:#CCC4D5;
  --text:#16131B;
  --text-2:#4E4757;
  --text-3:#7B7288;
  --ok:#0E7A56;
  --warn:#8A5B00;

  --nav-bg:rgba(247, 245, 248, .86);
  --dock-bg:rgba(255, 255, 255, .93);
  --tint:rgba(214, 36, 110, .07);
  --tint-line:rgba(214, 36, 110, .22);
  --tint-text:#A81654;
  --neutral-tint:rgba(22, 19, 27, .05);
  --field-dot:rgba(22, 19, 27, .10);
  --field-pulse:214, 36, 110;
  --shadow:0 18px 50px -22px rgba(22, 19, 27, .28);
  --glow:0 0 0 rgba(0, 0, 0, 0);

  --display:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap:min(74rem, 100% - 2.5rem);
  --measure:66ch;
  --ease:cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --signal:#EC4899;
    --signal-2:#F062A6;
    --signal-dim:#B01F6A;
    --ink:#0E0C10;
    --surface:#16141A;
    --surface-2:#26222C;
    --line:#2E2933;
    --line-2:#3A3442;
    --text:#F5F2F4;
    --text-2:#B3AAB8;
    --text-3:#7C7484;
    --ok:#3DDC97;
    --warn:#F0B429;

    --nav-bg:rgba(14, 12, 16, .82);
    --dock-bg:rgba(22, 20, 26, .92);
    --tint:rgba(236, 72, 153, .10);
    --tint-line:rgba(236, 72, 153, .28);
    --tint-text:#F58FBB;
    --neutral-tint:rgba(245, 242, 244, .06);
    --field-dot:rgba(245, 242, 244, .055);
    --field-pulse:236, 72, 153;
    --shadow:0 18px 50px -20px rgba(0, 0, 0, .9);
    --glow:0 0 20px -4px rgba(236, 72, 153, .9);
  }
}

:root[data-theme="dark"]{
  --signal:#EC4899;
  --signal-2:#F062A6;
  --signal-dim:#B01F6A;
  --ink:#0E0C10;
  --surface:#16141A;
  --surface-2:#26222C;
  --line:#2E2933;
  --line-2:#3A3442;
  --text:#F5F2F4;
  --text-2:#B3AAB8;
  --text-3:#7C7484;
  --ok:#3DDC97;
  --warn:#F0B429;

  --nav-bg:rgba(14, 12, 16, .82);
  --dock-bg:rgba(22, 20, 26, .92);
  --tint:rgba(236, 72, 153, .10);
  --tint-line:rgba(236, 72, 153, .28);
  --tint-text:#F58FBB;
  --neutral-tint:rgba(245, 242, 244, .06);
  --field-dot:rgba(245, 242, 244, .055);
  --field-pulse:236, 72, 153;
  --shadow:0 18px 50px -20px rgba(0, 0, 0, .9);
  --glow:0 0 20px -4px rgba(236, 72, 153, .9);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--display);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--signal);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:0.2em;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
::selection{background:var(--signal);color:#fff;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

.wrap{width:var(--wrap);margin-inline:auto;position:relative;}

/* ---------- signal field ---------- */
#signalfield{
  position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(var(--field-dot) 1.1px, transparent 1.2px);
  background-size:46px 46px;background-position:23px 23px;
}
header, section, footer, .marquee{position:relative;z-index:1;}
section[id]{scroll-margin-top:5.5rem;}

/* ---------- data / label type ---------- */
.label{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--text-3);font-weight:500;
}
.label--signal{color:var(--signal);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---------- progress rail ---------- */
.rail{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:60;}
.rail i{display:block;height:100%;width:0;background:linear-gradient(90deg, var(--signal-dim), var(--signal), var(--signal-2));transition:width .1s linear;}

/* ---------- wordmark ---------- */
.wordmark{
  display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;
  font-size:1.25rem;letter-spacing:-0.02em;color:var(--text);line-height:1;
}
.wordmark:hover{text-decoration:none;}
.wordmark .cursor{
  width:0.62em;height:0.78em;background:var(--signal);
  margin-left:0.16em;border-radius:1px;display:inline-block;
  animation:blink 1.6s steps(1, end) infinite;
}
@keyframes blink{0%, 62%{opacity:1}63%, 100%{opacity:.18}}
.wordmark .tm{font-family:var(--mono);font-size:0.42em;color:var(--text-3);align-self:flex-start;margin-left:0.22em;}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:40;}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.05rem;}
.nav-right{display:flex;align-items:center;gap:0.85rem;flex-wrap:wrap;justify-content:flex-end;}
.nav-right a{color:var(--text-2);font-size:0.9375rem;}
.nav-right a:hover{color:var(--text);text-decoration:none;}
@media (max-width:52rem){.hide-sm{display:none!important;}}

/* ---------- segmented control ---------- */
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;}
.seg button{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.12em;text-transform:uppercase;
  padding:0.42rem 0.62rem;color:var(--text-3);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--signal);color:#fff;}
.seg button:not([aria-pressed="true"]):hover{color:var(--text);background:var(--surface-2);}
.seg .ico{width:0.95rem;height:0.95rem;display:block;}
.seg-div{width:1px;align-self:stretch;background:var(--line-2);flex:none;}
.seg .theme-btn{display:grid;place-items:center;padding-inline:0.7rem;color:var(--text-2);}
.seg .theme-btn:hover{color:var(--text);background:var(--surface-2);}
.seg .theme-btn .ico:nth-child(2){display:none;}
:root[data-theme="dark"] .seg .theme-btn .ico:nth-child(1){display:none;}
:root[data-theme="dark"] .seg .theme-btn .ico:nth-child(2){display:block;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;
  font-family:var(--display);font-weight:700;font-size:0.9375rem;
  padding:0.8rem 1.4rem;border-radius:5px;border:1px solid transparent;
  transition:transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn--signal{background:var(--signal);color:#fff;}
.btn--signal:hover{background:var(--signal-2);box-shadow:0 8px 26px -10px var(--signal);}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2);}
.btn--ghost:hover{border-color:var(--text-3);background:var(--surface);}
.btn--sm{padding:0.5rem 0.85rem;font-size:0.8125rem;}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.5rem, 9vw, 6.5rem) clamp(2.75rem, 6vw, 4.5rem);border-bottom:1px solid var(--line);}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.35rem, 6vw, 4.15rem);line-height:1.02;
  letter-spacing:-0.035em;max-width:19ch;text-wrap:balance;
}
h1 .sig{color:var(--signal);}
.lede{margin-top:1.4rem;font-size:clamp(1.05rem, 2vw, 1.25rem);color:var(--text-2);max-width:48ch;}
.actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem;}
.ticker{display:flex;flex-wrap:wrap;gap:1.35rem;margin-top:2rem;}
.ticker span{display:inline-flex;align-items:center;gap:0.5rem;}
.ticker span::before{content:"";width:0.4rem;height:0.4rem;background:var(--signal);border-radius:1px;}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:0.95rem;background:var(--surface);}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:slide 38s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{display:inline-flex;align-items:center;gap:0.7rem;white-space:nowrap;}
.marquee-track span::before{content:"";width:0.35rem;height:0.35rem;background:var(--signal);border-radius:1px;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding-block:clamp(2.75rem, 6vw, 4.5rem);border-bottom:1px solid var(--line);}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem, 3.4vw, 2.2rem);letter-spacing:-0.028em;line-height:1.1;text-wrap:balance;}
.sec-head{display:flex;flex-direction:column;gap:0.7rem;margin-bottom:1.9rem;}
h3{font-family:var(--display);font-weight:700;font-size:1.1875rem;letter-spacing:-0.02em;}
p{max-width:var(--measure);color:var(--text-2);}
p.tight{margin-top:0.75rem;}
p strong, li strong, td strong{color:var(--text);font-weight:700;}
em{color:var(--text);font-style:italic;}

.checkpoint{display:flex;align-items:center;gap:0.65rem;}
.checkpoint .dot{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--line-2);flex:none;transition:background .3s var(--ease), box-shadow .3s var(--ease);}
.checkpoint.is-done .dot{background:var(--signal);box-shadow:0 0 10px var(--signal);}

/* ---------- reveal ---------- */
/* only hide when JS is alive, so a script failure can never blank the page */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  .marquee-track{animation:none;}
  .wordmark .cursor{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- grids ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.grid--2{grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));}
.grid--3{grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));}
.grid--4{grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));}
.cell{background:var(--surface);padding:1.55rem 1.6rem;display:flex;flex-direction:column;gap:0.6rem;transition:background .2s var(--ease);}
.cell:hover{background:var(--surface-2);}
.cell p{font-size:0.9625rem;}

.stat{background:var(--surface);padding:1.5rem 1.55rem;display:flex;flex-direction:column;gap:0.35rem;}
.stat .n{font-family:var(--display);font-weight:700;font-size:1.95rem;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;}
.stat .n .sig{color:var(--signal);}
.stat .n.sm{font-size:1.2rem;}

/* ---------- card ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:6px;padding:clamp(1.4rem, 3.5vw, 2.1rem);display:flex;flex-direction:column;gap:1rem;}
.card .headline{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem, 3vw, 1.85rem);letter-spacing:-0.028em;line-height:1.12;max-width:26ch;color:var(--text);}
.swap{display:flex;flex-wrap:wrap;align-items:center;gap:0.55rem;font-family:var(--mono);font-size:0.8125rem;}
.tag{padding:0.34rem 0.62rem;border-radius:4px;}
.tag--no{background:var(--tint);color:var(--tint-text);text-decoration:line-through;border:1px solid var(--tint-line);}
.tag--yes{background:var(--neutral-tint);color:var(--text);border:1px solid var(--line-2);}
.arrow{color:var(--text-3);}

/* ---------- beats (video structure) ---------- */
.beats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.beat{background:var(--surface);padding:1.5rem 1.6rem;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;}
.beat .time{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.1em;color:var(--signal);white-space:nowrap;padding-top:0.3em;text-transform:uppercase;}
.beat h3{margin-bottom:0.35rem;}
.beat p{font-size:0.9625rem;}
@media (max-width:34rem){.beat{grid-template-columns:1fr;gap:0.5rem;}}

/* ---------- do / dont ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));gap:1.25rem;}
.list{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.45rem 1.6rem;}
.list ul{list-style:none;display:flex;flex-direction:column;gap:0.7rem;margin-top:0.9rem;}
.list li{position:relative;padding-left:1.15rem;font-size:0.9625rem;color:var(--text-2);}
.list li::before{content:"";position:absolute;left:0;top:0.6em;width:0.4rem;height:0.4rem;border-radius:1px;}
.list--go li::before{background:var(--signal);}
.list--stop li::before{background:var(--text-3);}

/* ---------- link block ---------- */
.linkbox{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:0.8rem;}
.codeline{display:flex;gap:0.6rem;align-items:stretch;flex-wrap:wrap;}
.linkbox code{
  flex:1 1 22rem;font-family:var(--mono);font-size:0.8375rem;word-break:break-all;color:var(--text);
  background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:0.75rem 0.85rem;line-height:1.55;
}
.linkbox code .var{color:var(--signal);}
.linkbox p{font-size:0.9375rem;max-width:62ch;}

/* ---------- steps ---------- */
ol.steps{list-style:none;display:flex;flex-direction:column;}
ol.steps li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.15rem 0;border-top:1px solid var(--line);align-items:start;}
ol.steps li:last-child{border-bottom:1px solid var(--line);}
.stepno{font-family:var(--mono);font-size:0.8125rem;font-weight:500;color:var(--signal);padding-top:0.22em;}
.stepbody strong{display:block;font-family:var(--display);font-weight:700;letter-spacing:-0.015em;color:var(--text);}
.stepbody p{font-size:0.9625rem;margin-top:0.2rem;}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;}
table{border-collapse:collapse;width:100%;min-width:34rem;background:var(--surface);}
th, td{text-align:left;padding:0.9rem 1.05rem;border-bottom:1px solid var(--line);font-size:0.9375rem;color:var(--text-2);}
th{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);font-weight:500;background:var(--surface-2);}
td:first-child{font-family:var(--display);font-weight:700;color:var(--text);letter-spacing:-0.015em;}
tr:last-child td{border-bottom:none;}
tr.is-pick td{background:var(--tint);}
tr.is-pick td:first-child{box-shadow:inset 3px 0 0 var(--signal);}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---------- note ---------- */
.note{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:6px;padding:1.1rem 1.3rem;font-size:0.9375rem;color:var(--text-2);max-width:none;}
.note strong{color:var(--text);}

/* =========================================================
   GAME LAYER
   ========================================================= */
.dock{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:50;
  width:min(58rem, calc(100% - 1.5rem));
  background:var(--dock-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-2);border-radius:9px;
  padding:0.8rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  box-shadow:var(--shadow);cursor:pointer;text-align:left;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.dock:hover{border-color:var(--signal);transform:translateX(-50%) translateY(-2px);}
.dock .dock-label{display:flex;flex-direction:column;gap:0.15rem;min-width:9rem;}
.dock .dock-val{font-family:var(--mono);font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--text);}
.dock .dock-val b{color:var(--signal);font-weight:500;}
.meter{flex:1 1 12rem;display:flex;gap:3px;height:0.55rem;min-width:8rem;}
.meter i{flex:1;background:var(--line-2);border-radius:1px;transition:background .3s var(--ease), box-shadow .3s var(--ease);}
.meter i.on{background:var(--signal);box-shadow:0 0 8px var(--signal);}
.chip{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;
  padding:0.42rem 0.72rem;border-radius:5px;border:1px solid var(--line-2);color:var(--text-3);white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.chip.is-clear{color:#fff;background:var(--signal);border-color:var(--signal);box-shadow:var(--glow);}
.dock-hint{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);width:100%;}
@media (max-width:40rem){.dock .meter{order:3;flex-basis:100%;} .dock-hint{display:none;}}
body.has-dock{padding-bottom:6.5rem;}

/* task list */
.tasks{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.tasks li{background:var(--surface);}
.tasks .task{
  display:grid;grid-template-columns:1.6rem 1fr;gap:0.9rem;align-items:start;
  padding:1rem 1.2rem;cursor:pointer;width:100%;text-align:left;
  transition:background .18s var(--ease);
}
.tasks .task:hover{background:var(--surface-2);}
.box{
  width:1.35rem;height:1.35rem;border:1px solid var(--line-2);border-radius:5px;
  display:grid;place-items:center;margin-top:0.1rem;background:var(--ink);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.box svg{width:0.8rem;height:0.8rem;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .28s var(--ease);}
.tasks .task[aria-checked="true"] .box{background:var(--signal);border-color:var(--signal);}
.tasks .task[aria-checked="true"] .box svg{stroke-dashoffset:0;}
.task-txt strong{display:block;color:var(--text);font-weight:700;letter-spacing:-0.012em;font-family:var(--display);}
.task-txt span{display:block;color:var(--text-2);font-size:0.9375rem;margin-top:0.15rem;font-weight:400;}
.tasks .task[aria-checked="true"] .task-txt strong{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--signal);}

/* language checker */
.checker{display:flex;flex-direction:column;gap:0.9rem;}
.checker textarea{
  width:100%;min-height:9rem;resize:vertical;
  background:var(--surface);border:1px solid var(--line-2);border-radius:6px;
  color:var(--text);font-family:var(--mono);font-size:0.875rem;line-height:1.65;padding:0.9rem 1rem;
}
.checker textarea::placeholder{color:var(--text-3);}
.verdict{display:flex;flex-direction:column;gap:0.6rem;}
.verdict-head{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;}
.score{font-family:var(--mono);font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--text);}
.flag{display:flex;gap:0.7rem;align-items:flex-start;font-size:0.9375rem;padding:0.65rem 0.8rem;border-radius:5px;border:1px solid var(--line);background:var(--surface);}
.flag b{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.12em;text-transform:uppercase;padding-top:0.22em;white-space:nowrap;}
.flag--bad{border-left:3px solid var(--signal);} .flag--bad b{color:var(--signal);}
.flag--warn{border-left:3px solid var(--warn);} .flag--warn b{color:var(--warn);}
.flag--ok{border-left:3px solid var(--ok);} .flag--ok b{color:var(--ok);}
.flag code{font-family:var(--mono);font-size:0.85em;background:var(--surface-2);padding:0.1rem 0.35rem;border-radius:4px;color:var(--text);}

.copied{color:var(--ok)!important;border-color:var(--ok)!important;}

/* ---------- footer ---------- */
footer{padding-block:2.5rem 3.75rem;display:flex;flex-direction:column;gap:1.4rem;}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;}
.foot-grid p{font-size:0.9rem;color:var(--text-3);}
.foot-legal{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);}

/* ---- brand visuals ---- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.shots .shot{margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);}
.shots .shot img{display:block;width:100%;height:190px;object-fit:cover;object-position:center;background:var(--surface-2);}
.shots .shot--fit img{object-fit:contain;padding:0.7rem;}
.shots figcaption{padding:0.75rem 0.95rem;font-size:0.8125rem;line-height:1.45;color:var(--text-2);border-top:1px solid var(--line);}
@media (max-width:900px){.shots{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.shots{grid-template-columns:1fr;}.shots .shot img{height:220px;}}

/* ---- brand visuals, polish ---- */
.shots .shot{transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);}
.shots .shot:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow);}
.shots .shot img{height:210px;}

/* ---- print: a creator will PDF this brief ---- */
@media print{
  :root{--surface:#fff;--surface-2:#fff;--text:#000;--text-2:#222;--text-3:#444;--line:#bbb;--line-2:#888;}
  #signalfield,.rail,.dock,.nav,.seg,.marquee{display:none!important;}
  body{padding-bottom:0!important;background:#fff!important;}
  .js .reveal{opacity:1!important;transform:none!important;}
  section,.card,.cell,.shots .shot,.beat,.steps li,table{break-inside:avoid;page-break-inside:avoid;}
  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  a{color:#000;text-decoration:underline;}
  .shots{grid-template-columns:repeat(3,1fr);}
  .shots .shot img{height:150px;}
}