/* =====================================================================================================
   SCROLL-BUILD (home page only: index.html loads it last, after theme-final-site.css + chat.css). Approved by Eli 10/14.
   No other page loads this file, so the hero overrides and NIGHT SHIFT never reach them.
   1. hero layout: bigger H1, the counts line, the right 55 % (desktop) / the scene box under the shelf (phones)
   2. the art layers: .sb-art (behind everything, z -1) + .sb-ui (billboard links + the sun/moon button, above, only where nothing else is)
   3. NIGHT SHIFT: :root[data-shift="night"] re-points the theme tokens; every text pair re-checked >= 4.5:1 (README)
   Everything layout-affecting lives here (render-blocking, ~4 KB gz) so CLS stays 0; scroll-build.js only adds absolute layers.
   ===================================================================================================== */

/* ---------- art tokens (day) ---------- */
:root{
  --sb-ink:#1F4E9C;             /* ONE ink for every stroke in the drawing (Eli 10/14: "these are 2 different color blues"). Depth = weight + hatch density only. */
  --sb-lit:rgba(255,200,110,0); /* lit windows: off by day */
  --sb-glass:#FCF3E6;           /* paper-coloured fills that let nearer shapes hide farther ones */
}

/* ---------- 1. hero ---------- */
/* the old CAD crane (hub.js wireCrane) gives way to the hand-drawn one. html.sb-js is set by scroll-build.js as it runs; if that
   file never loads, or rough.js fails (html.sb-fail), the old crane stays. */
html.sb-js body[data-page="home"] .bp-crane-box{visibility:hidden}
html.sb-js.sb-fail body[data-page="home"] .bp-crane-box{visibility:visible}
.sb-counts{grid-area:counts;margin:0;min-height:20px;font:500 12.5px/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute-c)}
.sb-counts b{color:var(--ink);font-weight:600}
.sb-counts i{font-style:normal;color:var(--blue);padding:0 .35em}
.bp-calls span{background:var(--ground);padding:1px 4px;margin:-1px -4px}   /* labels knock out the linework behind them */
.bp-hero-grid{pointer-events:none}
.bp-hero-grid>*{pointer-events:auto}
.bp-fig{pointer-events:none}
.bp-fig a,.bp-fig button,.bp-fig video,.bp-frame{pointer-events:auto}

@media (max-width:899px){
  .bp-hero-grid{grid-template-areas:"h1" "sub" "shelf" "counts" "foot" "free" "fig";row-gap:8px;padding-bottom:0}
  .bp-h1{font-size:clamp(36px,10.6vw,66px);line-height:.95}
  .bp-shelf{margin-top:4px}
  /* the scene box: the phone hangs in it, the drawing is cropped around it. Height reserved here = no shift. */
  .bp-fig{height:clamp(360px,52svh,470px);margin:6px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter)}
  .bp-stage{position:absolute;top:112px;right:34%;padding:0;transform:translateX(50%)}
  body[data-page="home"] .bp-calls{display:none}
  .bp-dim-v{left:calc(100% + 8px)}
}
@media (min-width:900px){
  .bp-hero{min-height:max(660px,calc(100svh - 53px))}
  .bp-hero::before{width:50%}
  .bp-hero-grid{grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-areas:"h1 fig" "sub fig" "shelf fig" "counts fig" "foot fig";
    grid-template-rows:auto auto auto auto 1fr;row-gap:20px;padding-block:clamp(72px,9svh,104px) 40px;column-gap:clamp(32px,3.5vw,56px)}
  .bp-h1{font-size:clamp(54px,5.45vw,84px);line-height:.94;max-width:none;letter-spacing:-.035em}
  .bp-sub{font-size:15px}
  .bp-shelf{max-width:560px}
  .sb-counts{margin-top:-6px}
  .bp-fig{justify-self:start;padding:34px 0 0 clamp(170px,16vw,260px)}
  body[data-page="home"] .bp-calls{display:none}               /* the four phone callouts: the scene is the annotation now */
  .bp-frame{height:min(47vh,440px)}
  .bp-note{display:none}
  .bp-stage{padding-right:0}
  .bp-fig{--pw:calc(min(47vh,440px) * 9 / 16)}
  .bp-stage{align-self:flex-start}
  .bp-fig .bp-free{display:block;align-self:flex-start;width:max-content;white-space:nowrap;transform:translateX(calc(var(--pw) / 2 - 50%));
    background:var(--ground);box-shadow:0 0 0 5px var(--ground);text-align:center}
  .bp-fig .bp-free{margin:22px 0 0}
  }

/* ---------- 2. art layers ---------- */
.sb-art{position:absolute;left:0;top:0;width:100%;height:0;z-index:-1;pointer-events:none;overflow:visible;contain:layout style}
.sb-ui{position:absolute;left:0;top:0;width:100%;height:0;z-index:3;pointer-events:none}
.sb-clip{position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.sb-svg{position:absolute;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sb-svg .k-ink,.sb-svg .k-ink2,.sb-svg .k-soft,.sb-svg .k-con,.sb-svg .k-wash{stroke:var(--sb-ink)}
.sb-svg .k-con{stroke-width:.5}                          /* construction lines: the thinnest weight, same ink */
.sb-svg .k-wash{stroke-width:.5}                         /* hatching: thin, same ink; density carries the tone */
.sb-svg .k-face{display:none}
.sb-svg .k-glass{fill:var(--sb-glass);stroke:none}
.sb-svg .k-play{fill:var(--sb-ink);stroke:none}      /* the play button in THE HOOK (the logo) */
.sb-svg .k-lit{fill:var(--sb-lit);stroke:none;transition:fill .5s .35s}
.sb-hero{overflow:hidden}
.sb-svg text{fill:var(--sb-ink);paint-order:stroke;stroke:var(--sb-glass);stroke-width:4px;stroke-linejoin:round;font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.sb-svg .t-big{font:600 11.5px var(--f-mono);letter-spacing:.12em}
/* draw-in: every group path carries pathLength=1 */
.sb-d .sb-p{stroke-dasharray:1 1;stroke-dashoffset:1}
.sb-d .sb-g{opacity:0}
.sb-d.sb-go .sb-g{animation:sb-in var(--dur,.6s) cubic-bezier(.4,.1,.25,1) var(--del,0s) forwards}
.sb-d.sb-go .sb-p{animation:sb-draw var(--dur,.6s) cubic-bezier(.55,.1,.3,1) var(--del,0s) forwards}
@keyframes sb-draw{to{stroke-dashoffset:0}}
@keyframes sb-in{0%{opacity:0;transform:translate(var(--fx,0px),var(--fy,10px))}30%{opacity:1}100%{opacity:1;transform:none}}
.sb-done .sb-p{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
.sb-done .sb-g{opacity:1!important;animation:none!important;transform:none!important}
.sb-s .sb-g{transition:none}     /* scroll-driven groups: JS writes opacity/transform/dashoffset */

/* billboards (real stills, links to their drop pages) + the hero phone hook point */
.sb-bb{position:absolute;left:0;top:0;transform-origin:0 0;display:block;pointer-events:auto;opacity:0;transition:opacity .5s;outline:none;background:#12233F}
.sb-bb.on{opacity:1}
.sb-bb:not(.on){pointer-events:none;visibility:hidden}
.sb-bb img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.sb-bb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1.5px #1F4E9C;transition:box-shadow .5s}
.sb-bb:hover::after,.sb-bb:focus-visible::after{box-shadow:inset 0 0 0 3px #1F4E9C}
.sb-tag{position:absolute;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 7px;white-space:nowrap;
  background:var(--ground);border:1px solid var(--blue);font:600 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  opacity:0;transition:opacity .4s}
.sb-tag.on{opacity:1}
.sb-tag:hover{background:var(--hover)}
.sb-tag:focus-visible,.sb-bb:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* THE MARK on the crane cable: the logo's own colours (day / night versions swap with Night Shift); a slow sway */
.sb-mk-night{display:none}
:root[data-shift="night"] .sb-mk-day{display:none}
:root[data-shift="night"] .sb-mk-night{display:inline}
.sb-mark{animation:sb-sway 5.5s ease-in-out infinite alternate}
@keyframes sb-sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}

/* NIGHT SHIFT: the sun (day) / the moon (night). A real button; the art is the scene's ink; the sun sinks behind a cloud line. */
.sb-sun{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:6px;padding:0;margin:0;border:0;background:none;cursor:pointer;color:var(--sb-ink);
  opacity:0;transition:opacity .4s;-webkit-tap-highlight-color:transparent}
.sb-sun.on{opacity:1}
.sb-sun-col{flex-direction:column;transform:translateX(-50%)}
.sb-sun-row{transform:translateX(-36px)}
.sb-sun-art{position:relative;display:block;width:86px;height:72px;flex:none}
.sb-sun-row .sb-sun-art{width:72px;height:60px}
.sb-sun-sm .sb-sun-art{width:56px;height:46px}
.sb-sun-sm.sb-sun-row{transform:translateX(-28px)}
.sb-sun-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.sb-sun .sn-glow{fill:url(#sb-sunglow);transition:opacity .8s}
.sb-sun .sn-rays path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sb-sun .sn-rays{transform-origin:36px 30px;animation:sb-spin 48s linear infinite}
.sb-sun .sn-ring{fill:var(--ground);stroke:currentColor;stroke-width:2.25;stroke-linecap:round}
.sb-sun .sn-ring2{fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round}
.sb-sun .sn-cres{fill:var(--ground);stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.sb-sun .sn-star{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.sb-sun .sn-cloud{fill:var(--ground);stroke:none}
.sb-sun .sn-cloud-l{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sb-sun .sn-sun,.sb-sun .sn-moon{transition:transform .9s cubic-bezier(.5,0,.2,1),opacity .6s}
.sb-sun .sn-moon{transform:translateY(34px);opacity:0}
.sb-sun[aria-pressed="true"] .sn-sun{transform:translateY(34px)}
.sb-sun[aria-pressed="true"] .sn-moon{transform:none;opacity:1;transition-delay:.25s}
.sb-sun[aria-pressed="true"] .sn-glow{opacity:0}
.sb-sun-t{padding:3px 7px;background:var(--ground);border:1px dashed var(--line-soft);font:600 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;text-align:left}
.sb-sun-col .sb-sun-t{text-align:center}
.sb-sun-t b{display:block;font-weight:500;color:var(--mute-c);letter-spacing:.08em}
.sb-sun .sn-night,.sb-sun[aria-pressed="true"] .sn-day{display:none}
.sb-sun[aria-pressed="true"] .sn-night{display:block}
.sb-sun:hover .sb-sun-t{border-style:solid;border-color:var(--blue)}
.sb-sun:focus-visible{outline:none}
.sb-sun:focus-visible .sb-sun-art{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
@keyframes sb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .sb-mark,.sb-sun .sn-rays{animation:none}
  .sb-sun .sn-sun,.sb-sun .sn-moon,.sb-sun .sn-glow{transition:none}
  .sb-d .sb-p,.sb-d .sb-g{animation:none!important;stroke-dashoffset:0!important;stroke-dasharray:none!important;opacity:1!important;transform:none!important}
  .sb-bb,.sb-tag,.sb-sun{transition:none}
}

/* ---------- 3. NIGHT SHIFT (cyanotype navy). Token swap; the overrides below are the hard-coded pairs the token swap misses. ---------- */
:root[data-shift="night"]{
  --ground:#0A2245; --paper:#0E2C57; --hover:#15396B;
  --ink:#FFFFFF; --body-c:#DCEBFF; --mute-c:#AFCBEF;
  --blue:#8FD3FF; --blue-deep:#BFE6FF;
  --line-soft:rgba(160,212,255,.42); --line-faint:rgba(160,212,255,.2);
  --navy:#041531; --navy-lead:#0B2B58; --navy-hover:#13396D;
  --navy-rule:rgba(220,235,255,.3);
  --sb-ink:#8FD3FF; --sb-lit:rgba(255,206,120,.92); --sb-glass:#0A2245;   /* night: one line colour too */
  --oct:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolygon points='3.5,0 8.5,0 12,3.5 12,8.5 8.5,12 3.5,12 0,8.5 0,3.5' fill='%230A2245'/%3E%3Cpolygon points='4.3,2 7.7,2 10,4.3 10,7.7 7.7,10 4.3,10 2,7.7 2,4.3' fill='%238FD3FF'/%3E%3C/svg%3E");
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10L10 2M6 0V12' stroke='%238FD3FF' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' stroke='%238FD3FF' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
:root[data-shift="night"] body::before,:root[data-shift="night"] .ss-grid{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .375H120M.375 0V120' stroke='%23A0D4FF' stroke-opacity='.16' stroke-width='.75' fill='none'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 .375H24M.375 0V24' stroke='%23A0D4FF' stroke-opacity='.06' stroke-width='.75' fill='none'/%3E%3C/svg%3E")}
:root[data-shift="night"] .bp-hero::before{background:radial-gradient(ellipse 62% 58% at 42% 48%,var(--ground) 55%,rgba(10,34,69,0) 100%)}
/* solid buttons: sky plate, navy type (white on sky would fail) */
:root[data-shift="night"] .btn-ember,:root[data-shift="night"] .ss-cap-btn,:root[data-shift="night"] .ss-cap-gift-copy{background:#8FD3FF;border-color:#8FD3FF;color:#06183A}
:root[data-shift="night"] .btn-ember:hover,:root[data-shift="night"] .ss-cap-btn:hover{background:#BFE6FF;border-color:#BFE6FF;color:#06183A}
:root[data-shift="night"] .btn-ember *,:root[data-shift="night"] .ss-cap-btn *{color:inherit}
:root[data-shift="night"] .skip{background:#8FD3FF;color:#06183A}
:root[data-shift="night"] .ss-cap-email{background:#071A38;color:#fff;border-color:var(--line-soft)}
:root[data-shift="night"] .ss-cap-email::placeholder{color:#AFCBEF}
:root[data-shift="night"] .drop:hover{background:var(--hover)}
:root[data-shift="night"] .ss-cap-chip input:checked+span{background:#15396B}
:root[data-shift="night"] ::selection{background:#2C5A9A;color:#fff}
/* the price shelf: a darker sheet with a sky hairline so it still reads as THE sheet on a navy page */
:root[data-shift="night"] .bp-shelf-list,:root[data-shift="night"] .ss-price-sheet{border-color:rgba(160,212,255,.55)}
/* hero phone + calls */
:root[data-shift="night"] .bp-frame{outline-color:var(--blue)}
:root[data-shift="night"] .bp-calls b{background:var(--ground)}
/* the billboards light up */
:root[data-shift="night"] .sb-bb{box-shadow:0 0 0 1px rgba(207,233,255,.6),0 0 22px 2px rgba(127,212,255,.45),0 0 60px 10px rgba(127,212,255,.16)}
:root[data-shift="night"] .sb-bb img{filter:saturate(1.15) brightness(1.12)}
:root[data-shift="night"] .sb-bb::after{box-shadow:inset 0 0 0 1.5px var(--blue)}
/* chat bubble + panel (chat.css uses --sk-* aliases + a few literals) */
:root[data-shift="night"] .ss-chat-bubble{background:var(--paper);color:#fff;border-color:var(--line-soft)}
/* a short cross-fade when the visitor flips it (not under reduced motion; JS sets .sb-shifting for 700 ms) */
html.sb-shifting body,html.sb-shifting .site-top,html.sb-shifting .stickybar,html.sb-shifting .hm-course,html.sb-shifting .drop,html.sb-shifting .ss-cap-nd,
html.sb-shifting .ss-cap-ft,html.sb-shifting .bp-shelf-list,html.sb-shifting .site-foot,html.sb-shifting .btn,html.sb-shifting .ss-chat-bubble{transition:background-color .6s,color .6s,border-color .6s}
@media (prefers-reduced-motion:reduce){html.sb-shifting *{transition:none!important}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* night: chat send + the pack email sheet (pack-buy.js injects its own CSS with a white input) */
:root[data-shift="night"] .ss-chat-send{background:#8FD3FF;color:#06183A}
:root[data-shift="night"] .ss-chat-send:hover{background:#BFE6FF}
:root[data-shift="night"] .ssp input{background:#071A38;color:#fff;border-color:#8FD3FF}
:root[data-shift="night"] .ss-chat-panel input,:root[data-shift="night"] .ss-chat-panel textarea{background:#071A38;color:#fff}
:root[data-shift="night"] #ss-pack-clock{color:#8FD3FF!important}