/* Spencer Deep. One face, one descent: the ground falls from
   surface turquoise to the dark at 200 m, and the type is pressed narrower and heavier with depth. */
@font-face{font-family:"Mona Sans";src:url(/assets/fonts/specimen/mona-sans-var.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Sd Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:104%}
@property --sd-r{syntax:"<percentage>";inherits:false;initial-value:150%}

body.spec-spencer-deep{margin:0;background:#020B10}

.spec-spencer-deep .sd{
  --sd-surface:#2FB3BD;--sd-navy:#04171C;--sd-navy-2:#0B3A44;--sd-glass:#C4EBE3;--sd-glass-2:#8FC9C1;
  --sd-red:#D7263D;--sd-foam:#F4FBFA;--sd-abyss:#020B10;--sd-glow:#0A2F38;
  --sd-ease:cubic-bezier(.3,0,.2,1);
  --sd-gauge-w:104px;--sd-gut:clamp(20px,3.4vw,56px);
  --sd-t-h1:clamp(3.5rem,2.2rem + 5.333vw,7rem);
  --sd-t-split:clamp(2.25rem,1.414rem + 3.429vw,4.5rem);
  --sd-t-h2:clamp(2rem,1.071rem + 3.81vw,4.5rem);
  --sd-t-lede:clamp(1.125rem,1.032rem + .381vw,1.375rem);
  --sd-t-body:clamp(1.0625rem,1.039rem + .095vw,1.125rem);
  --sd-t-note:clamp(.90625rem,.883rem + .095vw,.96875rem);
  --sd-t-cap:clamp(.84375rem,.821rem + .095vw,.90625rem);
  --sd-t-log:clamp(.75rem,.727rem + .095vw,.8125rem);
  --sd-t-fig:clamp(.75rem,.379rem + 1.524vw,1.75rem);
  --sd-gap-l:136px;--sd-gap-m:84px;--sd-gap-s:52px;
  --bar:var(--bar-h,43px);
  position:relative;
  font-family:"Mona Sans","Sd Fallback","Helvetica Neue",Arial,system-ui,sans-serif;
  font-synthesis:none;font-variant-numeric:tabular-nums;font-kerning:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.62;color:var(--sd-navy);
}
:where(.sd) *,:where(.sd) *::before,:where(.sd) *::after{box-sizing:border-box}
:where(.sd) :where(p,h1,h2,dl,dd,figure,ol){margin:0}
:where(.sd) img{max-width:100%}
.sd [hidden]{display:none!important}

/* ── the depth table: each stop's ground, ink and axes ─────────────────────────────── */
.sd-stop{
  position:relative;
  padding:0 calc(var(--sd-gauge-w) + var(--sd-gut)) 0 var(--sd-gut);
  background:linear-gradient(var(--g0),var(--g1));
  color:var(--ink);
  font-stretch:calc(var(--bw) * 1%);font-weight:var(--bwg);
  --ink:var(--sd-navy);--ink2:var(--sd-navy);--rope:rgb(4 23 28/.3);
}
.sd-s0{--g0:#2FB3BD;--g1:#2AA9B4;--bw:112;--bwg:380}
.sd-s1{--g0:#2AA9B4;--g1:#2299A6;--hw:118;--hwg:360;--pw:125;--pwg:300;--bw:110;--bwg:390}
.sd-s2{--g0:#2299A6;--g1:#1F939F;--hw:110;--hwg:440;--pw:118;--pwg:360;--bw:106;--bwg:400}
.sd-s3{--g0:#1F939F;--g1:#1F939F;--hw:102;--hwg:520;--pw:110;--pwg:440;--bw:102;--bwg:410}
.sd-s4{--g0:#1F939F;--g1:#1F939F;--hw:96;--hwg:580;--pw:102;--pwg:520;--bw:100;--bwg:400}
.sd-s5{--g0:#0C4D59;--g1:#0A3F4B;--hw:92;--hwg:620;--pw:96;--pwg:580;--bw:96;--bwg:380}
.sd-s6{--g0:#0A3F4B;--g1:#08333E;--hw:88;--hwg:660;--pw:92;--pwg:620;--bw:94;--bwg:380}
.sd-s7{--g0:#08333E;--g1:#062630;--hw:82;--hwg:700;--pw:88;--pwg:660;--bw:90;--bwg:370}
.sd-s8{--g0:#062630;--g1:#041A22;--hw:78;--hwg:760;--pw:82;--pwg:700;--bw:87;--bwg:370}
.sd-s9{--g0:#041A22;--g1:#020B10;--hw:75;--hwg:800;--pw:78;--pwg:760;--bw:85;--bwg:360;
  background:radial-gradient(30% 34% at calc(50% - var(--sd-gauge-w) / 2) 62%,var(--sd-glow),rgb(10 47 56/0)),linear-gradient(var(--g0),var(--g1))}
.sd-s10{--g0:#020B10;--g1:#020B10;--hw:75;--hwg:800;--pw:75;--pwg:800;--bw:85;--bwg:360;
  background:radial-gradient(38% 44% at calc(50% - var(--sd-gauge-w) / 2) 52%,var(--sd-glow),rgb(10 47 56/0)),#020B10}
.sd-s5,.sd-s6,.sd-s7,.sd-s8,.sd-s9,.sd-s10,.sd-below{--ink:var(--sd-glass);--ink2:var(--sd-glass-2);--rope:rgb(196 235 227/.3);color:var(--ink)}
.sd-s4 .sd-in::after{background:rgb(196 235 227/.3)}

/* the water column: content centres on the axis, the gauge keeps its own column */
.sd-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;min-block-size:100svh}
.sd-in::after{content:"";flex:1 0 0;width:1px;background:var(--rope)}
.sd-s9 .sd-in::after,.sd-s10 .sd-in::after{display:none}

/* ── type ──────────────────────────────────────────────────────────────────────────── */
.sd-log{display:block;font-size:var(--sd-t-log);line-height:1.3;letter-spacing:.22em;text-transform:uppercase;font-weight:560}
.sd-h2{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;font-weight:inherit;scroll-margin-top:32svh}
.sd-h2-t{display:block;font-size:var(--sd-t-h2);line-height:1.05;font-stretch:calc(var(--hw) * 1%);font-weight:var(--hwg);letter-spacing:max(0em,calc((100 - var(--hw)) * .0005em));text-wrap:balance;max-inline-size:17em}
.sd-txt{width:100%;max-inline-size:64ch;font-size:var(--sd-t-body);line-height:1.62;letter-spacing:.004em;text-wrap:pretty}
.sd-txt p+p{margin-top:20px}
.sd-lede{font-size:var(--sd-t-lede);line-height:1.5}
p.sd-lede.sd-txt,.sd-txt .sd-lede{max-inline-size:52ch}
p.sd-lede.sd-txt{text-align:center;text-wrap:balance}
.sd-cap{font-size:var(--sd-t-cap);line-height:1.45;max-inline-size:52ch;text-align:center;color:var(--ink2);text-wrap:pretty}
.sd-bi{font-stretch:100%;font-weight:calc(var(--bwg) - 80);color:var(--ink2)}
.sd-run{font-size:var(--sd-t-log);font-stretch:82%;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-right:.8em}
.sd-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.sd-link:hover{text-decoration-thickness:2px}

/* buttons: an outline above the break, bluefin red below it; hover thickens, nothing lifts */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-block-size:44px;padding:0 24px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:var(--sd-t-log);line-height:1;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-decoration:none;cursor:pointer}
.sd-btn:hover{box-shadow:inset 0 0 0 1px currentColor}
.sd-red{background:var(--sd-red);border-color:var(--sd-red);color:var(--sd-foam);font-weight:700}
.sd-red:hover{box-shadow:inset 0 0 0 2px rgb(244 251 250/.55)}
.sd-btn-o{color:var(--sd-glass)}

/* focus: the ink's own ring; below the break a red ring outside it */
.sd a:focus-visible,.sd button:focus-visible,.sd input:focus-visible,.sd select:focus-visible,.sd textarea:focus-visible,.sd [tabindex="-1"]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sd-s5 :focus-visible,.sd-s6 :focus-visible,.sd-s7 :focus-visible,.sd-s8 :focus-visible,.sd-s9 :focus-visible,.sd-s10 :focus-visible,.sd-gauge .sd-on-deep :focus-visible{outline:2px solid var(--sd-red)!important;outline-offset:5px!important;box-shadow:0 0 0 2px var(--sd-glass)}
.sd-h2:focus-visible,.sd-h1:focus-visible{outline-offset:10px!important}

/* ── the surface ───────────────────────────────────────────────────────────────────── */
.sd-s0 .sd-in{min-block-size:calc(100svh - var(--bar))}
.sd-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;padding-top:24px}
.sd-mark,.sd-ask{font-size:var(--sd-t-log);line-height:1.3;letter-spacing:.2em;text-transform:uppercase;font-stretch:125%;font-weight:500}
.sd-ask{text-underline-offset:.4em}
.sd-hero-main{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(24px,8.5svh,110px)}
.sd-log0{font-stretch:112%}
.sd-label{margin-top:12px;font-size:var(--sd-t-log);line-height:1.3;letter-spacing:.22em;text-transform:uppercase;font-weight:500;font-stretch:112%;text-wrap:balance}
.sd-h1{margin-top:18px;font-size:var(--sd-t-h1);line-height:1;letter-spacing:-.01em;font-stretch:125%;font-weight:300}
.sd-h1-a,.sd-h1-b{display:block}
.sd-h1-b>span{display:inline-block}
.sd-w1{font-stretch:112%;font-weight:420}
.sd-w2{font-stretch:96%;font-weight:580}
.sd-w3{font-stretch:78%;font-weight:780}
.sd-sub{margin-top:calc(var(--sd-t-h1) * .5);max-inline-size:54ch;font-size:var(--sd-t-lede);line-height:1.5;text-wrap:balance}
.sd-go{display:flex;flex-wrap:wrap;justify-content:center;gap:0 32px;margin-top:32px;font-size:var(--sd-t-body)}
.sd-go .sd-link{display:inline-flex;align-items:center;gap:.4em;min-block-size:44px}
.sd-short,.sd-echo{display:none}
.sd-rope.sd-rope-hero{flex:1 0 24px;height:auto;margin:16px 0 12px}
.sd-hero-cap{max-inline-size:60ch;text-wrap:balance}
.sd-s0 .sd-in::after{flex:0 0 24px}
.sd-live{display:none}
.sd-gl .sd-live{display:inline}
.sd-gl .sd-still{display:none}

/* ── the rope: one line on the axis, drawn in the gaps and never behind a word ─────── */
.sd-rope{display:block;flex:none;width:1px;height:var(--sd-gap-l);background:var(--rope);transform-origin:50% 0}
.sd-r-m{height:var(--sd-gap-m)}
.sd-r-s{height:var(--sd-gap-s)}

/* field notes hang on the rope: terms left of it, definitions right, a knot at each row */
.sd-note{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:14px;align-items:first baseline;width:min(100%,780px);font-size:var(--sd-t-note);line-height:1.45}
.sd-note::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--rope)}
.sd-nr{display:contents}
.sd-note dt{position:relative;grid-column:1;text-align:right;font-size:var(--sd-t-log);line-height:1.3;letter-spacing:.22em;text-transform:uppercase;font-weight:560}
.sd-note dt::after{content:"";position:absolute;right:-24px;top:.22em;width:8px;height:8px;border:1px solid currentColor;border-radius:50%}
.sd-note dd{grid-column:2;text-wrap:pretty}
.sd-note:first-child,.sd-rope+.sd-note{padding-block:4px}

/* ── the dive: one fixed canvas over the grounds, under the words ─────────────────── */
.sd-dive{position:absolute;left:0;right:0;top:0;height:calc(100svh - var(--bar));z-index:1;pointer-events:none;overflow:hidden}
.sd-js .sd-dive{position:fixed;inset:var(--bar) 0 0 0;height:auto}
.sd-poster{position:absolute;inset:0;background:linear-gradient(#2FB3BD,rgb(47 179 189/0));transition:opacity .6s var(--sd-ease)}
.sd-poster img{display:block;width:100%;height:64svh;object-fit:cover;object-position:50% 0;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.sd-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.sd-gl .sd-poster{opacity:0}
.sd-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── the gauge: without JS a list of the stops in the hero's right gutter ─────────── */
.sd-gauge{position:absolute;top:96px;right:14px;z-index:50;color:var(--sd-navy);font-size:var(--sd-t-log);line-height:1.3;background-image:linear-gradient(transparent,transparent)}
.sd-fig,.sd-scope,.sd-rail,.sd-key,.sd-slow{display:none}
.sd-stops ol{list-style:none;margin:0;padding:0}
.sd-stops li{margin:0 0 12px}
.sd-stops a{display:block;color:inherit;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;font-stretch:75%;font-weight:560}
.sd-stops a:hover .sd-sn{text-decoration:underline}
.sd-sd{display:block;font-weight:700}
/* with JS it becomes the instrument: figure, light-left scope, square-root rail, pointer */
.sd-js .sd-gauge{position:fixed;top:var(--bar);right:0;bottom:0;width:var(--sd-gauge-w);--sd-rt:172px;--sd-rb:56px;--sd-rx:40px}
.sd-js .sd-fig{display:block;position:absolute;top:22px;right:18px;font-size:var(--sd-t-fig);line-height:1;font-weight:640;font-stretch:var(--sd-fs,125%);white-space:nowrap}
.sd-fig-u{font-size:var(--sd-t-log);letter-spacing:.06em;font-weight:560;font-stretch:100%}
.sd-js .sd-scope{display:grid;gap:5px;position:absolute;top:64px;right:18px}
.sd-sc{display:flex;align-items:center;gap:6px;font-size:10px;line-height:1;font-weight:600;font-stretch:100%}
.sd-sc-l{width:8px}
.sd-sc-h{display:block;margin-bottom:2px;font-size:var(--sd-t-log);line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-stretch:75%;font-weight:560;white-space:nowrap}
.sd-sc-b{display:block;width:48px;height:1px;background:currentColor;transform-origin:0 50%}
.sd-js .sd-slow:not([hidden]){display:block;position:absolute;top:136px;right:18px;font-size:var(--sd-t-cap);font-weight:500}
.sd-js .sd-rail{display:block;position:absolute;top:var(--sd-rt);bottom:var(--sd-rb);right:calc(var(--sd-rx) - 13px);width:13px}
.sd-ticks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sd-ticks path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.sd-ticks-up{color:var(--sd-navy);clip-path:inset(-2px 0 max(0px,calc(100% - var(--sd-edge,99999px) + var(--sd-rt))) 0)}
.sd-ticks-dn{color:var(--sd-glass);clip-path:inset(max(0px,calc(var(--sd-edge,99999px) - var(--sd-rt))) 0 -2px 0)}
.sd-ptr{position:absolute;left:-4px;top:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--sd-navy);will-change:transform;transition:background-color .2s}
.sd-ptr.sd-on-deep{background:var(--sd-red);box-shadow:0 0 0 1.5px var(--sd-glass)}
.sd-js .sd-stops{position:absolute;top:var(--sd-rt);bottom:var(--sd-rb);right:calc(var(--sd-rx) + 8px);width:0}
.sd-js .sd-stops li{position:absolute;right:0;top:calc(var(--k) * 100%);margin:0;white-space:nowrap;transform:translateY(-50%)}
.sd-js .sd-stops a{padding:3px 0;line-height:1}
.sd-js .sd-sd{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sd-js .sd-key{display:block;position:absolute;right:18px;bottom:8px;max-inline-size:84px;text-align:right;font-size:12px;line-height:1.25;font-stretch:75%;font-weight:560;letter-spacing:.04em}
.sd-gauge>*,.sd-stops li{transition:color .2s}
.sd-gauge .sd-on-deep{color:var(--sd-glass)}

/* ── photographs ─────────────────────────────────────────────────────────────────── */
.sd-ph{position:relative;isolation:isolate}
.sd-ph img{display:block;width:100%;height:auto}
.sd-wide{width:min(960px,100%)}
.sd-port{width:min(420px,70%)}
.sd-sq{width:min(560px,100%)}
.sd-full{width:calc(100% + 2 * var(--sd-gut));max-width:none}
.sd-full img{aspect-ratio:16/9;object-fit:cover;object-position:50% 45%;filter:saturate(.8) hue-rotate(-12deg)}
.sd-full::after{content:"";position:absolute;inset:0;background:#0A3F4B;mix-blend-mode:color;opacity:.5;pointer-events:none}
.sd-full img,.sd-full::after{-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.sd-grade::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none}
.sd-g8::after{background:rgb(201 239 247)}
.sd-g20::after{background:rgb(140 217 235);opacity:.5}

/* the reef: photograph left of the rope, words right of it */
.sd-pair{display:flex;flex-direction:column;align-items:center;gap:var(--sd-gap-s);width:100%}

/* ── the thermocline: one wave, two grounds, one sentence split by it ─────────────── */
.sd-s4 .sd-in{min-block-size:100svh}
.sd-deep{position:absolute;inset:0;top:62%;top:anchor(--sd-below top,62%);background:#0C4D59}
.sd-js .sd-deep{top:0;clip-path:url(#sd-clip-g)}
.sd-below{display:flex;flex-direction:column;align-items:center;width:100%;anchor-name:--sd-below}
.sd-split-w{display:grid;justify-items:center;width:100%}
.sd-split{grid-area:1/1;font-size:var(--sd-t-split);line-height:1.05;font-stretch:96%;font-weight:580;text-align:center;color:var(--sd-navy);text-wrap:balance}
.sd-split-a,.sd-split-b{display:block}
.sd-split-c{display:none;color:var(--sd-glass)}
.sd-js .sd-split-c{display:block;clip-path:url(#sd-clip-dn)}
.sd-js #sd-split{clip-path:url(#sd-clip-up)}
.sd-xp{display:inline-block;width:0;height:1ex;vertical-align:baseline}
.sd-tc-cap{max-inline-size:46ch}

/* ── the open blue: the stage the school holds station in ─────────────────────────── */
.sd-stage{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;min-block-size:140svh;--sd-ball:500px}
.sd-stage-top{display:flex;flex-direction:column;align-items:center;width:100%}
.sd-stage-p{margin-top:var(--sd-gap-s);max-inline-size:46ch;text-align:center}
.sd-ball{flex:none;width:var(--sd-ball);max-width:100%;height:var(--sd-ball);margin-block:40px 44px;pointer-events:none}
.sd-stage-foot{flex:1 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
.sd-stage-foot::after{content:"";flex:1 0 0;width:1px;margin-top:14px;background:var(--rope)}
.sd-school-cap{max-inline-size:40ch}
.sd-giving{letter-spacing:.22em}

/* ── southern bluefin: three knots on the rope ────────────────────────────────────── */
.sd-knots{position:relative;display:grid;row-gap:84px;width:100%;max-width:980px;list-style:none;padding:0}
.sd-knots::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--rope)}
.sd-knot{position:relative;display:grid;grid-template-columns:1fr 44px 1fr;align-items:start}
.sd-kn{grid-column:2;grid-row:1;justify-self:center;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sd-red);box-shadow:0 0 0 1.5px var(--sd-glass);color:var(--sd-foam);font-size:13px;line-height:1;font-weight:700;font-stretch:80%}
.sd-knot p{grid-column:3;grid-row:1;max-inline-size:36ch;padding:2px 0 0 16px;font-size:var(--sd-t-body);line-height:1.62;text-wrap:pretty}
.sd-knot:nth-child(2) p{grid-column:1;justify-self:end;text-align:right;padding:2px 16px 0 0}
.sd-knot strong{font-weight:700;font-stretch:82%;letter-spacing:.01em}

/* ── the year and the reach ───────────────────────────────────────────────────────── */
.sd-year-t p{padding-left:0}

/* ── the dark: the marker, the glow and the enquiry ───────────────────────────────── */
.sd-marker{display:block;flex:none;width:10px;height:10px;margin-bottom:26px;border-radius:50%;background:var(--sd-red);box-shadow:0 0 10px 3px rgb(215 38 61/.35)}
.sd-marker.sd-pulse{animation:sd-pulse 2.4s var(--sd-ease)}
.sd-dark-l{margin-top:var(--sd-gap-s);text-align:center;max-inline-size:40ch}
.sd-form{display:grid;gap:28px;width:min(560px,100%);margin-top:var(--sd-gap-s);color:var(--sd-glass)}
.sd-form-note{text-align:left;max-inline-size:none}
.sd-row2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sd-f{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
.sd-f>label,.sd-f legend{padding:0;font-size:var(--sd-t-log);line-height:1.3;letter-spacing:.22em;text-transform:uppercase;font-weight:560;color:var(--sd-glass)}
.sd-f legend{margin-bottom:4px}
.sd-f input[type=text],.sd-f select,.sd-f textarea{width:100%;min-block-size:44px;padding:8px 0;border:0;border-bottom:1px solid var(--sd-glass-2);border-radius:0;background:transparent;color:var(--sd-glass);font:inherit;font-size:var(--sd-t-body);line-height:1.45;transition:border-color .2s}
.sd-f input[type=text]:focus,.sd-f select:focus,.sd-f textarea:focus{border-bottom-color:var(--sd-glass)}
.sd-f select{appearance:none;padding-right:28px;cursor:pointer}
.sd-sel{position:relative}
.sd-sel::after{content:"\2193";position:absolute;right:4px;bottom:11px;font-size:var(--sd-t-body);line-height:1;pointer-events:none}
.sd-f select option{background:#041A22;color:var(--sd-glass)}
.sd-f textarea{resize:vertical;min-block-size:116px}
.sd-opts{display:flex;flex-wrap:wrap;gap:0 28px}
.sd-f .sd-ch{display:inline-flex;align-items:center;gap:12px;min-block-size:44px;font-size:var(--sd-t-body);cursor:pointer;color:var(--sd-glass)}
.sd-ch input{flex:none;appearance:none;width:18px;height:18px;margin:0;padding:3px;border:1px solid var(--sd-glass);border-radius:0;background:transparent content-box;cursor:pointer}
.sd-ch input[type=radio]{border-radius:50%}
.sd-ch input:checked{background-color:var(--sd-glass)}
.sd-hint{font-size:var(--sd-t-cap);line-height:1.45;color:var(--sd-glass-2)}
.sd-send-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:6px}
.sd-send{min-block-size:48px}
.sd-status{font-size:var(--sd-t-cap);line-height:1.45;color:var(--sd-glass)}

/* ── the bottom ───────────────────────────────────────────────────────────────────── */
.sd-s10 .sd-in{min-block-size:80svh;justify-content:center;padding-block:var(--sd-gap-m)}
.sd-colo{margin-top:var(--sd-gap-s);max-inline-size:48ch;font-size:var(--sd-t-body);line-height:1.62;text-align:center;text-wrap:pretty}
.sd-places{margin:36px 0 32px}

/* ── widths ───────────────────────────────────────────────────────────────────────── */
@media (min-width:1024px){
  .sd-pair{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:center}
  .sd-pair::before{content:"";grid-column:1/3;grid-row:1;justify-self:center;align-self:stretch;width:1px;background:var(--rope)}
  .sd-pair .sd-ph{grid-column:1;grid-row:1;justify-self:end;width:min(420px,100%)}
  .sd-pair .sd-txt{grid-column:2;grid-row:1;max-inline-size:36ch}
}
@media (min-width:1380px){
  .sd-split{white-space:nowrap}
  .sd-split-a,.sd-split-b{display:inline}
}
@media (max-width:1023.98px){
  .spec-spencer-deep .sd{--sd-gauge-w:72px}
  .sd-js .sd-gauge{--sd-rt:154px;--sd-rb:70px;--sd-rx:24px}
  .sd-js .sd-fig,.sd-js .sd-scope,.sd-js .sd-slow,.sd-js .sd-key{right:12px}
  .sd-js .sd-scope{top:54px}
  .sd-js .sd-slow:not([hidden]){top:122px}
  .sd-sc-b{width:40px}
  .sd-js .sd-stops a,.sd-sc-h{font-size:11px}
  .sd-js .sd-key{max-inline-size:64px;font-size:12px}
}
@media (max-width:699.98px){
  .spec-spencer-deep .sd{--sd-gauge-w:28px;--sd-gap-l:84px;--sd-gap-m:56px;--sd-gap-s:36px}
  .sd-sub{font-stretch:104%}
  .sd:not(.sd-js) .sd-gauge,.sd-js .sd-scope,.sd-js .sd-stops,.sd-js .sd-key,.sd-js .sd-slow:not([hidden]){display:none}
  .sd-js .sd-gauge{--sd-rt:58px;--sd-rb:18px;--sd-rx:14px}
  .sd-js .sd-fig{top:12px;right:0;width:28px;text-align:center;font-size:12px;line-height:1.1;font-stretch:75%;font-weight:700;white-space:normal}
  .sd-fig-u{display:block;font-size:10px;letter-spacing:0}
  .sd-head{padding-top:16px}
  .sd-hero-main{margin-top:28px}
  .sd-label{order:-1}
  .sd-log0{order:-2;margin-bottom:6px}
  .sd-h1{margin-top:20px}
  .sd-h1-a,.sd-h1-b{text-wrap:wrap}
  .sd-sub{margin-top:28px}
  .sd-go{flex-direction:column;align-items:center;gap:4px;margin-top:24px}
  .sd-rope.sd-rope-hero{order:9;margin:16px 0 0}
  .sd-hero-cap{order:8;margin-top:28px}
  .sd-note{column-gap:40px;width:100%}
  .sd-note dt{letter-spacing:.16em}
  .sd-pair .sd-ph{width:78%}
  .sd-full img{aspect-ratio:4/5}
  .sd-stage{min-block-size:110svh;--sd-ball:300px}
  .sd-ball{margin-block:28px}
  .sd-stage-foot{gap:14px}
  .sd-stage-foot .sd-btn{width:100%}
  .sd-knots{row-gap:44px}
  .sd-knots::before{left:14px}
  .sd-knot{grid-template-columns:28px 1fr}
  .sd-kn{grid-column:1}
  .sd-knot p,.sd-knot:nth-child(2) p{grid-column:2;justify-self:start;text-align:left;padding:2px 0 0 16px}
  .sd-row2{grid-template-columns:1fr}
}
/* the short phone: the h1, the first sentence and both links above the fold */
@media (max-width:699.98px) and (max-height:640px){
  .sd-log0,.sd-label,.sd-hero-cap,.sd-more,.sd-long{display:none}
  .sd-short{display:inline}
  .sd-echo{display:block;margin-top:24px}
  .sd-head{padding-top:12px}
  .sd-hero-main{margin-top:10px}
  .sd-h1{margin-top:0;font-size:2.875rem}
  .sd-sub{margin-top:16px;font-size:1.0625rem;line-height:26px;font-stretch:100%}
  .sd-go{flex-direction:row;gap:0 22px;margin-top:10px}
  .sd-rope.sd-rope-hero{order:0;margin-top:8px}
}

/* ── motion: pressure, not speed ──────────────────────────────────────────────────── */
@keyframes sd-settle{from{opacity:0;translate:0 -10px}}
@keyframes sd-torch{from{--sd-r:0%}}
@keyframes sd-squeeze{from{font-stretch:calc(var(--pw) * 1%);font-weight:var(--pwg)}}
@keyframes sd-draw{from{scale:1 0}}
@keyframes sd-breathe{50%{box-shadow:0 0 18px 7px rgb(215 38 61/.35)}}
@keyframes sd-pulse{40%{box-shadow:0 0 30px 12px rgb(215 38 61/.42)}}
@media (prefers-reduced-motion:no-preference){
  .sd-marker{animation:sd-breathe 5s ease-in-out infinite}
  .sd-marker.sd-pulse{animation:sd-pulse 2.4s var(--sd-ease),sd-breathe 5s ease-in-out 2.4s infinite}
  .sd-lit{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 var(--sd-r),transparent calc(var(--sd-r) + 12%));mask-image:radial-gradient(circle at 50% 50%,#000 var(--sd-r),transparent calc(var(--sd-r) + 12%))}
  @supports (animation-timeline:view()){
    .sd-up{animation:sd-settle linear both;animation-timeline:view();animation-range:entry 0% entry 320px}
    .sd-lit{animation:sd-torch linear both;animation-timeline:view();animation-range:entry 0% entry 160px}
    .sd-h2-t{animation:sd-squeeze linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .sd-rope,.sd-in::after{animation:sd-draw linear both;animation-timeline:view();animation-range:cover 0% cover 33%}
    .sd-in::after{transform-origin:50% 0}
  }
  /* the same moves as timed transitions where scroll timelines are missing */
  .sd-io .sd-up{opacity:0;translate:0 -10px;transition:opacity .9s var(--sd-ease),translate .9s var(--sd-ease)}
  .sd-io .sd-lit{--sd-r:0%;transition:--sd-r 1.1s var(--sd-ease)}
  .sd-io .sd-h2-t{font-stretch:calc(var(--pw) * 1%);font-weight:var(--pwg);transition:font-stretch 1.4s var(--sd-ease),font-weight 1.4s var(--sd-ease)}
  .sd-io .sd-rope{scale:1 0;transition:scale 1.1s var(--sd-ease)}
  .sd-io .sd-seen.sd-up{opacity:1;translate:none}
  .sd-io .sd-seen.sd-lit{--sd-r:150%}
  .sd-io .sd-seen .sd-h2-t{font-stretch:calc(var(--hw) * 1%);font-weight:var(--hwg)}
  .sd-io .sd-seen.sd-rope{scale:none}
}
/* the h1's second line sinks into place once, after the face has loaded */
@media (prefers-reduced-motion:no-preference) and (min-width:700px){
  .sd-h1-b>span{transition:font-stretch 1.6s var(--sd-ease),font-weight 1.6s var(--sd-ease),top 1.6s var(--sd-ease)}
  .sd-w2{transition-delay:.18s}
  .sd-w3{transition-delay:.36s}
  .sd-js .sd-h1:not(.sd-h1-go) .sd-h1-b>span{font-stretch:125%;font-weight:300;top:0}
}
@media (min-width:700px){
  .sd-h1-b>span{position:relative}
  .sd-w2{top:.06em}
  .sd-w3{top:.12em}
}