/* hero */
#hero{
  
  --u: min(calc(100vw / 1672), calc(100svh / 941));
  --stage-w: calc(1672 * var(--u));
  --stage-h: calc(941 * var(--u));

  --ink:#241A0E;
  --ink-soft:#5A4A36;
  --logo:var(--brand-brown,#644026);
  --accent:var(--brand-accent,#FF4D1A);
  --tick:rgba(30,22,12,.80);
  --rule-strong:rgba(30,22,12,.70);
  --rule:rgba(36,26,14,.44);
  --hair:rgba(36,26,14,.075);

  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --serif:'Playfair Display',Georgia,serif;
  --hand:'Caveat',cursive;
}
/* the hero is exactly its design frame, pinned to the top: no letterbox band above the header */
#hero{position:relative;width:100%;height:max(100svh, var(--stage-h));overflow:hidden;isolation:isolate}
#hero .paper{position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(95deg, #EFE1CD 0%, #EEE0CD 32%, #E5D1B6 70%, #E0CDB0 88%, #DDCBB2 100%);
}
#hero .glow{position:absolute;inset:-12%;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(38% 34% at 30% 26%, rgba(255,247,231,.34) 0%, rgba(255,247,231,0) 72%)}
#hero .wave{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
#hero .grain{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;opacity:.19;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.42'/></svg>")}
#hero .vignette{position:absolute;inset:0;z-index:9;pointer-events:none;
  background:radial-gradient(124% 104% at 48% 42%, rgba(0,0,0,0) 56%, rgba(64,44,20,.13) 100%)}
#hero .stage{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:var(--stage-w);height:var(--stage-h);z-index:3}
#hero .hairline{position:absolute;left:calc(50% - 50vw);width:100vw;height:1px;background:var(--hair);
  top:calc(112 * var(--u));z-index:4}
#hero .note,
#hero .photo{position:absolute;z-index:3;pointer-events:none}
#hero .note{left:calc(1278 * var(--u));top:calc(125.5 * var(--u));width:calc(197 * var(--u));
  filter:drop-shadow(calc(6 * var(--u)) calc(9 * var(--u)) calc(11 * var(--u)) rgba(86,60,26,.22))}
#hero .photo{left:calc(1541 * var(--u));top:calc(213 * var(--u));width:calc(173 * var(--u));
  filter:drop-shadow(calc(-5 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)) rgba(86,60,26,.24))}
#hero .notetext{position:absolute;z-index:4;pointer-events:none;
  left:calc(1308 * var(--u));top:calc(160.5 * var(--u));
  transform:rotate(-10.5deg);transform-origin:0 0;
  font-family:var(--hand);font-weight:500;color:#20170D;white-space:nowrap;
  font-size:calc(31.0 * var(--u));line-height:1.1613}
#hero .notetext .struck{position:relative;display:inline-block}
#hero .notetext .struck svg{position:absolute;left:-9%;top:32%;width:120%;height:calc(13 * var(--u));
  overflow:visible;fill:none;stroke:#20170D;stroke-width:2.6;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
#hero .notetext .ins{display:inline-block;transform:rotate(-3.5deg);margin-left:calc(4 * var(--u))}
#hero .notetext .smile{display:inline-block;width:calc(28 * var(--u));height:calc(28 * var(--u));
  margin-left:calc(11 * var(--u));vertical-align:calc(-5 * var(--u))}
#hero .heart{position:absolute;z-index:4;pointer-events:none;
  left:calc(1594 * var(--u));top:calc(461.375 * var(--u));
  font-size:max(var(--mt,0px), calc(12.5 * var(--u)));font-weight:500;line-height:1;
  letter-spacing:0.12em;color:#4C3E2C}

#hero .acts{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible}
#hero .acts line{stroke:#1C150C;stroke-width:2.1;stroke-linecap:round}
#hero #gl-hero{position:absolute;inset:0;z-index:4;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .9s ease .62s}
#hero #gl-hero.ready{opacity:1}
.no-webgl #gl-hero{display:none}
#hero .ui{position:absolute;inset:0;z-index:7;pointer-events:none}
#hero .ui a{pointer-events:auto}
#hero #gl-hero{touch-action:pan-y}
#hero.knobhot #gl-hero{cursor:grab}
#hero.knobdrag #gl-hero{cursor:grabbing}
#hero .par{will-change:transform}
#hero .ui > *{position:absolute}
#hero .cx{left:50%;transform:translateX(-50%)}
#hero .logo{left:calc(150 * var(--u));top:calc(35 * var(--u));width:calc(173 * var(--u));color:var(--logo)}
#hero .logo svg{width:100%;height:auto;display:block}
#hero .nav{left:calc(829 * var(--u));transform:translateX(-50%);
  top:calc(41.397 * var(--u));display:flex;gap:calc(41.55 * var(--u))}
#hero .nav a{display:block;line-height:1;text-transform:uppercase;color:#2B2115;
  font-size:max(var(--mt,0px), calc(12.33 * var(--u)));font-weight:500;letter-spacing:0.324em;
  margin-right:-0.324em;position:relative;padding-bottom:calc(6 * var(--u))}
#hero .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.15,1)}
@media (hover:hover) and (pointer:fine){ #hero .nav a:hover::after{transform:scaleX(1)} }
#hero .corner{right:calc(150 * var(--u));top:calc(32 * var(--u))}
#hero .cta{display:inline-flex;align-items:center;gap:calc(9 * var(--u));
  padding:calc(9 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u)) calc(18 * var(--u));
  border:calc(1.3 * var(--u)) solid rgba(36,26,14,.34);border-radius:100px;
  font-size:max(var(--mt,0px), calc(11.5 * var(--u)));font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:#2B2115;white-space:nowrap;text-decoration:none;
  transition:background-color .34s ease,border-color .34s ease,color .34s ease}
@media (hover:hover) and (pointer:fine){ #hero .cta:hover{background:#2B2115;border-color:#2B2115;color:#F3E7D3} }
#hero .cta svg{width:calc(12 * var(--u));height:calc(12 * var(--u));display:block;flex:none}
#hero .rail{left:calc(150 * var(--u));
  top:calc(183.312 * var(--u));
  text-transform:uppercase;color:#3E3223;
  font-size:max(var(--mt,0px), calc(12.33 * var(--u)));font-weight:500;
  letter-spacing:0.14em;line-height:1.6626}
#hero .railrule{left:calc(150 * var(--u));top:calc(255 * var(--u));
  width:calc(32 * var(--u));height:calc(2.0 * var(--u));background:var(--rule-strong)}
#hero .cue{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(46 * var(--u));width:0;height:calc(36 * var(--u));z-index:8;pointer-events:none}
#hero .cue > *{position:absolute}
#hero .tick{width:calc(1.8 * var(--u));background:var(--tick)}
#hero .t1{top:calc(112 * var(--u));height:calc(24 * var(--u))}
#hero .t2{top:calc(200 * var(--u));height:calc(21 * var(--u))}
#hero .t3{top:calc(0 * var(--u));height:calc(36 * var(--u))}
#hero .t4{top:calc(123 * var(--u));height:calc(19 * var(--u))}
#hero .tune{top:calc(165.102 * var(--u));line-height:1;white-space:nowrap;
  text-transform:uppercase;color:#453728;
  font-size:max(var(--mt,0px), calc(14.6 * var(--u)));font-weight:500;
  letter-spacing:0.167em;text-indent:0.167em}
#hero .mark{top:calc(210 * var(--u));width:calc(755 * var(--u));color:var(--logo)}
#hero .mark svg{width:100%;height:auto;display:block}
#hero .roles{top:calc(368.219 * var(--u));line-height:1;white-space:nowrap;
  text-transform:uppercase;color:#5F5039;
  font-size:max(var(--mt,0px), calc(13.7 * var(--u)));font-weight:500;
  letter-spacing:0.387em;text-indent:0.387em}
#hero .roles i{font-style:normal;color:var(--accent)}
#hero .roles .bar{display:none}
#hero .statgroup{display:flex;top:calc(532 * var(--u))}
#hero .sg-l{left:calc(186 * var(--u))}
#hero .sg-r{left:calc(1230 * var(--u))}
#hero .stat{position:relative}
#hero .sg-l .stat:first-child{width:calc(130 * var(--u))}
#hero .sg-r .stat:first-child{width:calc(144 * var(--u))}
#hero .sg-l .stat + .stat{padding-left:calc(50 * var(--u))}
#hero .sg-r .stat + .stat{padding-left:calc(50 * var(--u))}
#hero .stat + .stat::before{content:"";position:absolute;left:0;
  top:calc(-4 * var(--u));height:calc(103 * var(--u));
  width:calc(1.4 * var(--u));background:var(--rule)}
#hero .stat b{display:block;font-family:var(--serif);font-weight:400;
  font-size:calc(26.84 * var(--u));line-height:1;color:#1F170D;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"tnum" 0;
  margin-top:calc(-5.569 * var(--u))}
#hero .stat u{display:block;text-decoration:none;text-transform:uppercase;color:#1F170D;
  font-size:max(var(--mt,0px), calc(15.07 * var(--u)));font-weight:700;
  letter-spacing:0.05em;line-height:1;
  margin-top:calc(15.77 * var(--u))}
#hero .stat p{color:#56472F;font-size:max(var(--mt,0px), calc(11.0 * var(--u)));font-weight:400;
  line-height:2.0000;margin-top:calc(6.959 * var(--u))}
#hero .scroll{top:calc(46.219 * var(--u));line-height:1;white-space:nowrap;
  text-transform:uppercase;color:var(--ink-soft);
  font-size:max(var(--mt,0px), calc(13.7 * var(--u)));font-weight:500;
  letter-spacing:0.138em;text-indent:0.138em}
#hero .mouse{top:calc(73 * var(--u));width:calc(21 * var(--u));height:calc(36 * var(--u));
  border:calc(1.3 * var(--u)) solid var(--rule);border-radius:calc(10.5 * var(--u));
  left:50%;transform:translateX(-50%)}
#hero .mouse{top:0}
#hero .mouse::after{content:"";position:absolute;left:50%;top:calc(6 * var(--u));
  width:calc(2 * var(--u));height:calc(6 * var(--u));border-radius:calc(1 * var(--u));background:var(--accent);
  transform:translateX(-50%);animation:wheel 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,calc(11 * var(--u)))}}
#hero .knobring{position:absolute;z-index:8;pointer-events:none;border-radius:50%;
  border:calc(1.6 * var(--u)) solid rgba(255,77,26,.6);opacity:0;
  transform:translate(-50%,-50%);transition:opacity .45s ease}
#hero .knobring.on{opacity:1;animation:knobpulse 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes knobpulse{0%{transform:translate(-50%,-50%) scale(.94);opacity:.9}
  70%{transform:translate(-50%,-50%) scale(1.75);opacity:0}
  100%{transform:translate(-50%,-50%) scale(1.75);opacity:0}}
#hero .knobcap{position:absolute;z-index:8;pointer-events:none;white-space:nowrap;
  transform:translate(-50%,0);opacity:0;transition:opacity .5s ease;
  font-size:max(var(--mt,0px), calc(10.5 * var(--u)));font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft)}
#hero .knobcap.on{opacity:1}
#hero .knobarc{position:absolute;z-index:8;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%);transition:opacity .3s ease}
#hero .knobarc.on{opacity:.5}
#hero.knobdrag .knobarc.on{opacity:.92}
#hero .knobarc circle{fill:none;stroke:var(--accent);stroke-width:3.1;stroke-linecap:round;
  transform:rotate(135deg);transform-origin:50% 50%}
#hero .knobarc .trk{stroke:rgba(36,26,14,.16)}
.mcard{position:fixed;left:0;top:0;z-index:40;display:flex;align-items:center;
  gap:clamp(10px,1vw,15px);padding:clamp(9px,.85vw,13px) clamp(13px,1.2vw,18px) clamp(9px,.85vw,13px) clamp(9px,.85vw,13px);
  background:linear-gradient(168deg,#F7EEDC,#EDE0C8);border-radius:4px;
  box-shadow:0 14px 30px rgba(90,64,30,.18),0 2px 6px rgba(90,64,30,.12);
  opacity:0;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
.mcard::before{content:"";position:absolute;top:-9px;left:50%;
  transform:translateX(-50%) rotate(-2.5deg);width:62px;height:19px;
  background:rgba(200,150,98,.5);border-radius:2px}
.mcard.live{pointer-events:auto}
.mbtn{flex:none;width:clamp(34px,2.6vw,42px);height:clamp(34px,2.6vw,42px);border:0;padding:0;
  border-radius:50%;background:#B4794A;color:#FFF6E8;cursor:pointer;display:grid;
  place-items:center;transition:background-color .3s ease,transform .3s ease}
@media (hover:hover) and (pointer:fine){ .mbtn:hover{background:#9C6437} }
.mbtn svg{width:44%;height:44%;display:block}
.mmeta{min-width:clamp(96px,8vw,124px)}
.mtitle{font-size:clamp(10px,.78vw,12px);font-weight:500;letter-spacing:.02em;color:var(--ink);
  line-height:1.25;white-space:nowrap}
.martist{margin-top:2px;font-size:clamp(8.5px,.66vw,10px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint,#8E7C63);white-space:nowrap}
.mprog{margin-top:7px;height:2px;border-radius:2px;background:rgba(36,26,14,.15);overflow:hidden}
.mprog i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}
.meq{flex:none;display:flex;align-items:flex-end;gap:2px;height:clamp(16px,1.3vw,20px)}
.meq i{display:block;width:2px;height:12%;border-radius:1px;background:#B4794A;opacity:.85}
.cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;
  width:29px;height:29px;opacity:0;transform-origin:7% 6%;
  transition:opacity .25s ease;will-change:transform}
.cur svg{width:100%;height:100%;display:block;overflow:visible}
@media (hover:hover) and (pointer:fine){
}
@media (hover:none),(pointer:coarse){
.cur{display:none}
}
.bootscreen{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  pointer-events:none;transition:opacity .55s ease}
.bootscreen.gone{opacity:0}
.bootscreen.gone{transition:opacity .4s ease}
/* its own sheet of paper while loading; the sheet lifts as the mark flies home */
.bootscreen::before{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,#EFE1CD 0%,#EEE0CD 32%,#E5D1B6 70%,#E0CDB0 88%,#DDCBB2 100%);
  transition:opacity .7s ease}
.bootscreen.flying::before{opacity:0}
/* the wordmark draws itself (js/loader.js), centred, then flies to the hero */
.bootinner{position:absolute;inset:0;display:grid;place-items:center}
.bootlogo{width:min(84vw, 820px);color:var(--brand-brown,#644026)}
.bl-fly{transform-origin:0 0;will-change:transform}
.bl-fly svg{width:100%;height:auto;display:block}
.bootcap{position:absolute;left:0;right:0;top:calc(50% + min(84vw, 820px) * .21 + 34px);text-align:center;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#8E7C63;transition:opacity .25s ease,transform .3s ease}
.bootcap.swap{opacity:0;transform:translateY(4px)}
.bootscreen.flying .bootcap{opacity:0}
html.boot #hero .glow{opacity:0}
html.boot #hero .wave{opacity:0;transform:translateY(38px)}
html.boot #hero .hairline{transform:scaleX(0)}
html.boot #hero .logo,
html.boot #hero .corner,
html.boot #hero .rail,
html.boot #hero .railrule,
html.boot #hero .scroll,
html.boot #hero .mouse{opacity:0}
html.boot #hero .logo{transform:translateY(-10px)}
html.boot .burger{opacity:0;transform:translateY(-10px)}
html.boot #hero .corner{transform:translateY(-10px)}
html.boot #hero .rail{transform:translateX(-14px)}
html.boot #hero .railrule{transform:scaleX(0)}
html.boot #hero .nav a{opacity:0;transform:translateY(-7px)}
html.boot #hero .tick{transform:translateX(-50%) scaleY(0)}
html.boot #hero .tune,
html.boot #hero .roles{opacity:0;transform:translateX(-50%) translateY(10px)}
html.boot #hero .mark{clip-path:inset(0 100% 0 0);transform:translateX(-50%) translateY(16px)}
html.boot #hero .statgroup{opacity:0;transform:translateY(15px)}
html.boot #hero .note,
html.boot #hero .photo{opacity:0}
html.boot #hero .note{transform:translateY(-30px) rotate(-6deg)}
html.boot #hero .photo{transform:translateY(-34px) rotate(5deg)}
html.boot .plant-fx{opacity:0;transform:translateX(-72px)}
html.boot #hero .acts{opacity:0;transform:scale(.45)}
html.boot #hero .heart,
html.boot #hero .notetext{opacity:0}
#hero .glow,
#hero .wave,
#hero .hairline,
#hero .logo,
.burger,
#hero .corner,
#hero .rail,
#hero .railrule,
#hero .scroll,
#hero .mouse,
#hero .nav a,
#hero .tick,
#hero .tune,
#hero .roles,
#hero .mark,
#hero .statgroup,
#hero .note,
#hero .photo,
.plant-fx,
#hero .acts,
#hero .heart,
#hero .notetext{
  transition:opacity .8s ease var(--d,0s),
             transform 1s cubic-bezier(.16,.84,.3,1) var(--d,0s),
             clip-path 1.15s cubic-bezier(.16,.84,.3,1) var(--d,0s)}
#hero .hairline{transform-origin:left center}
#hero .railrule{transform-origin:left center}
#hero .tick{transform-origin:center top}
#hero .acts{transform-origin:31% 48%}
#hero .note{transform-origin:76% 6%}
#hero .photo{transform-origin:14% 8%}
#hero .glow{--d:0.00s}
#hero .wave{--d:0.12s}
#hero .hairline{--d:0.24s}
.burger{--d:0.33s}
#hero .logo{--d:0.33s}
#hero .corner{--d:0.59s}
#hero .t1{--d:0.35s}
#hero .tune{--d:0.50s}
#hero .t2{--d:0.64s}
#hero .mark{--d:0.73s}
.plant-fx{--d:0.92s}
#hero .rail{--d:1.01s}
#hero .railrule{--d:1.13s}
#hero .roles{--d:1.20s}
#hero .sg-l{--d:1.39s}
#hero .sg-r{--d:1.49s}
#hero .note{--d:1.56s}
#hero .notetext{--d:1.79s}
#hero .photo{--d:1.70s}
#hero .heart{--d:1.89s}
#hero .acts{--d:1.84s}
#hero .t3{--d:2.01s}
#hero .scroll{--d:2.10s}
#hero .mouse{--d:2.19s}
#hero .t4{--d:2.29s}
.burger{display:none;position:fixed;flex-direction:column;justify-content:space-between;
  right:calc(50vw - var(--stage-w) / 2 + calc(48 * var(--u)));
  top:calc(27 * var(--u));
  width:calc(27.5 * var(--u));height:calc(18.5 * var(--u));
  background:none;border:0;padding:0;cursor:pointer;pointer-events:auto;z-index:43}
.burger i{display:block;width:100%;height:calc(2.2 * var(--u));background:#2B2115;border-radius:2px;
  transition:transform .34s cubic-bezier(.2,.8,.3,1),opacity .2s ease}
html.menu .burger i:nth-child(1){transform:translateY(calc(8.15 * var(--u))) rotate(45deg)}
html.menu .burger i:nth-child(2){opacity:0}
html.menu .burger i:nth-child(3){transform:translateY(calc(-1 * calc(8.15 * var(--u)))) rotate(-45deg)}
nav.menu{position:fixed;inset:0;z-index:42;display:flex;flex-direction:column;
  justify-content:center;gap:calc(26 * var(--u));padding:0 calc(48 * var(--u));
  background:#EFE1CD;opacity:0;pointer-events:none;
  transition:opacity .38s ease}
html.menu nav.menu{opacity:1;pointer-events:auto}
nav.menu a{font-size:calc(19.0 * var(--u));font-weight:500;letter-spacing:0.18em;
  text-transform:uppercase;color:#2B2115;text-decoration:none;
  transform:translateY(calc(14 * var(--u)));
  transition:transform .5s cubic-bezier(.2,.8,.3,1) var(--md,0s)}
html.menu nav.menu a{transform:none}
nav.menu .cta{align-self:flex-start;margin-top:calc(14 * var(--u))}
#hero .loadbar{position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:10;
  width:min(240px,42vw);height:2px;background:rgba(36,26,14,.09);transition:opacity .5s ease}
#hero .loadbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
#hero .loadbar.done{opacity:0}
#hero .next{position:relative;z-index:1;background:#F1E3CE;
  padding:clamp(70px,10vw,150px) clamp(24px,5.4vw,90px);border-top:1px solid var(--hair)}
#hero .next h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(30px,4.4vw,64px);max-width:15em}
#hero .next p{margin-top:22px;max-width:52ch;color:var(--ink-soft);line-height:1.9;
  font-size:clamp(12px,.94vw,14px)}
@media (max-width:860px){
#hero{
    --u: min(calc(100vw / 530), calc(100svh / 941));
    --stage-w: calc(530 * var(--u));
    --stage-h: calc(941 * var(--u));
  }
#hero .nav,
#hero .corner{display:none}
.burger{display:flex}
#hero .logo{left:calc(48 * var(--u));top:calc(22 * var(--u));width:calc(140 * var(--u))}
#hero .rail{left:calc(48 * var(--u));
    top:calc(130.255 * var(--u));
    font-size:max(var(--mt,0px), calc(11.5 * var(--u)));letter-spacing:0.12em;
    line-height:1.7391;display:block}
#hero .railrule{left:calc(48 * var(--u));top:calc(193 * var(--u));
    width:calc(32 * var(--u));display:block}
#hero .t1{top:calc(157.5 * var(--u));height:calc(23.5 * var(--u))}
#hero .t2{top:calc(222 * var(--u));height:calc(23.5 * var(--u))}
#hero .cue{bottom:calc(34 * var(--u));height:calc(28 * var(--u))}
#hero .t3{top:calc(0 * var(--u));height:calc(17.5 * var(--u))}
#hero .t4{top:calc(82.5 * var(--u));height:calc(17 * var(--u))}
#hero .hairline{top:calc(68 * var(--u))}
#hero .tune{top:calc(196.309 * var(--u));font-size:max(var(--mt,0px), calc(13.01 * var(--u)));
    letter-spacing:0.122em;text-indent:0.122em}
#hero .mark{top:calc(260 * var(--u));width:calc(408.5 * var(--u))}
#hero .roles{top:calc(345.7 * var(--u));font-size:max(var(--mt,0px), calc(10.0 * var(--u)));
    letter-spacing:0.262em;text-indent:0.262em}
#hero .roles .dot{display:none}
#hero .roles .bar{display:inline;color:var(--ink-faint,#8E7C63)}
#hero .sg-l{left:calc(125 * var(--u));top:calc(671 * var(--u))}
#hero .sg-r{left:calc(125 * var(--u));top:calc(788 * var(--u))}
#hero .sg-l .stat:first-child,
#hero .sg-r .stat:first-child{
    width:calc(140 * var(--u))}
#hero .sg-l .stat + .stat,
#hero .sg-r .stat + .stat{
    padding-left:calc(30 * var(--u))}
#hero .stat + .stat::before{top:0;height:calc(83 * var(--u))}
#hero .sg-l::after{content:"";position:absolute;
    left:calc(0 * var(--u));
    top:calc(92 * var(--u));
    width:calc(280 * var(--u));height:calc(1.4 * var(--u));background:var(--rule)}
#hero .stat b{font-size:calc(23.31 * var(--u));margin-top:calc(-4.837 * var(--u))}
#hero .stat u{font-size:max(var(--mt,0px), calc(13.01 * var(--u)));letter-spacing:0.104em;
    margin-top:calc(10.336 * var(--u))}
#hero .stat p{font-size:max(var(--mt,0px), calc(10.3 * var(--u)));
    line-height:1.6990;margin-top:calc(1.742 * var(--u))}
#hero .scroll{top:calc(26.005 * var(--u));font-size:max(var(--mt,0px), calc(11.5 * var(--u)));
    letter-spacing:0.045em;text-indent:0.045em}
#hero .mouse{top:0;width:calc(17 * var(--u));height:calc(28 * var(--u));
    border-radius:calc(8.5 * var(--u))}
#hero .note{left:calc(356 * var(--u));top:calc(94 * var(--u));width:calc(152.5 * var(--u))}
#hero .notetext{left:calc(380 * var(--u));top:calc(121 * var(--u));
    font-size:calc(23.0 * var(--u));line-height:1.1957}
#hero .heart{left:calc(474 * var(--u));top:calc(896.505 * var(--u));
    font-size:max(var(--mt,0px), calc(11 * var(--u)));letter-spacing:.12em}
#hero .photo{left:calc(418 * var(--u));top:calc(668 * var(--u));width:calc(172 * var(--u))}

#hero .acts-d{display:none}
#hero .acts-m{display:block}
.cur{display:none}
.mcard{gap:10px;padding:7px 12px 7px 7px}
.mcard .mmeta{display:none}
.mcard::before{display:none}
}
@media (prefers-reduced-motion:reduce){
#hero #gl-hero{opacity:1}
}

/* ---------- loader takes (js/loader.js) ---------- */
/* radio: the dial under the mark */
.ldr-dial{position:absolute;left:50%;top:calc(50% + min(84vw, 820px) * .105 + 40px);width:min(72vw, 420px);
  translate:-50% 0;transition:opacity .4s ease,translate .5s ease}
.ldr-dial svg{display:block;width:100%;height:auto;overflow:visible}
.ldr-dial.off{opacity:0;translate:-50% 10px}
.v-radio .bootcap{top:calc(50% + min(84vw, 820px) * .105 + 56px + min(72vw, 420px) * .086)}
/* waiting for the tap that lets sound play: the whole screen is the button */
.bootscreen.gated{pointer-events:auto;cursor:pointer}
.bootscreen.gated .bootcap{color:#5A4A36;animation:capPulse 1.8s ease-in-out infinite}
@keyframes capPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- the header beyond the hero (js/topbar.js) ---------- */
.topbar{position:fixed;left:0;right:0;top:0;z-index:41;height:calc(84 * var(--u));
  background:rgba(240,228,210,.84);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid rgba(36,26,14,.08);box-shadow:0 6px 24px rgba(80,56,28,.06);
  transform:translateY(-104%);transition:transform .55s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.topbar.show{transform:none;pointer-events:auto}
.tb-in{position:relative;width:var(--stage-w);height:100%;margin:0 auto}
.tb-in > *{position:absolute;top:50%}
.topbar .logo{left:calc(150 * var(--u));width:calc(150 * var(--u));translate:0 -50%;color:var(--brand-brown,#644026);display:block}
.topbar .logo svg{width:100%;height:auto;display:block}
.topbar .nav{left:calc(829 * var(--u));translate:-50% -50%;display:flex;gap:calc(41.55 * var(--u));margin-top:calc(3 * var(--u))}
.topbar .nav a{display:block;line-height:1;text-transform:uppercase;color:#2B2115;text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:max(var(--mt,0px), calc(12.33 * var(--u)));font-weight:500;letter-spacing:.324em;
  margin-right:-.324em;position:relative;padding-bottom:calc(6 * var(--u))}
.topbar .nav a::after{content:"";position:absolute;left:0;right:.324em;bottom:0;height:1px;background:var(--brand-accent,#FF4D1A);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.15,1)}
.topbar .nav a.on::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .topbar .nav a:hover::after{transform:scaleX(1)} }
.topbar .corner{right:calc(150 * var(--u));translate:0 -50%;margin:0}
.topbar .cta{display:inline-flex;align-items:center;gap:calc(9 * var(--u));
  padding:calc(9 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u)) calc(18 * var(--u));
  border:calc(1.3 * var(--u)) solid rgba(36,26,14,.34);border-radius:100px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:max(var(--mt,0px), calc(11.5 * var(--u)));font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:#2B2115;white-space:nowrap;text-decoration:none;
  transition:background-color .34s ease,border-color .34s ease,color .34s ease}
@media (hover:hover) and (pointer:fine){ .topbar .cta:hover{background:#2B2115;border-color:#2B2115;color:#F3E7D3} }
.topbar .cta svg{width:calc(12 * var(--u));height:calc(12 * var(--u));display:block;flex:none}
@media (max-width:860px){
  .topbar{height:calc(72.5 * var(--u))}
  .topbar .logo{left:calc(48 * var(--u));width:calc(128 * var(--u))}
  .topbar .nav,.topbar .corner{display:none}
}
/* phones: the burger is a proper 44 px button that never goes away. Over
   the page it sits on a little paper disc so it reads on photos and 3D;
   inside the hero header or the bar it drops the disc. */
@media (max-width:860px){
  .burger{width:44px;height:44px;padding:15px 11px;box-sizing:border-box;border-radius:50%;
    right:calc(50vw - var(--stage-w) / 2 + 48 * var(--u) - 11px);top:calc(36 * var(--u) - 22px);z-index:60;
    background:rgba(243,232,214,0);box-shadow:0 0 0 rgba(80,56,28,0);-webkit-tap-highlight-color:transparent}
  .burger i{height:2px}
  html.menu .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  html.menu .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  html.tb-ready .burger{transition:background-color .3s ease,box-shadow .3s ease,opacity .3s ease,transform .45s cubic-bezier(.2,.8,.3,1)}
  html.tb-tuck:not(.menu) .burger{background:rgba(243,232,214,.92);box-shadow:0 4px 14px rgba(80,56,28,.16)}
  nav.menu{z-index:59}
}
/* sound-effects switch in the music card */
.msfx{flex:none;width:26px;height:26px;margin-left:2px;border:1px solid rgba(36,26,14,.22);border-radius:50%;
  background:none;color:#5A4A36;display:grid;place-items:center;cursor:pointer;padding:0;transition:color .25s ease,border-color .25s ease,opacity .25s ease}
.msfx svg{width:14px;height:14px;display:block}
.msfx.off{opacity:.45}
.msfx.off svg{stroke-dasharray:2 2.6}
@media (hover:hover) and (pointer:fine){ .msfx:hover{border-color:#2B2115;color:#2B2115} }