/* Landing page — "night vellum". Self-contained: fonts come from /vatg/fonts/fonts.css.
   The hero image and the rings share one anchor point (the orb: 77.3% across,
   44.4% down), so they stay aligned at every size. Motion stops for anyone who
   asks for reduced motion. */
:root{
  --ink:#0C0711; --ink-2:#160D20; --text:#EDE6F7; --text-2:#C9BBD9; --text-3:#A999BC;
  --lilac:#CDB8EA; --light:#F2EAFE; --bright:#FBF8FF; --gold:#D9C7A0; --plum:#2A1640;
  --vellum:#F3EEE6; --vellum-ink:#241B2E; --line:rgba(228,214,247,.14);
  --serif:'Spectral',Georgia,'Times New Roman',serif; --sans:'Karla','Helvetica Neue',Arial,sans-serif;
  --ox:77.3%; --oy:44.4%; --mx:0; --my:0; --px:50%; --py:50%;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.lp{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.lp a{color:#E4D6F7}.lp a:hover{color:#fff}
.lp a.lp-btn-light:hover{color:var(--plum)}.lp a.lp-btn-glass:hover{color:#fff}
.lp :focus-visible{outline:1px solid var(--bright);outline-offset:4px;border-radius:6px}
.lp h1,.lp h2,.lp h3{font-family:var(--serif);font-weight:300;color:var(--bright);margin:0}
.lp-wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.lp-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-eyebrow{margin:0 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--lilac)}

/* buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 28px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease}
.lp-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 7px rgba(214,196,255,.10), 0 0 44px rgba(190,160,255,.35)}
.lp a.lp-btn-light{background:var(--light);color:var(--plum)}
.lp a.lp-btn-glass{color:#F5EEFF;font-weight:500;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(228,214,247,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lp-top-nav .lp-btn{min-height:44px;padding:10px 22px;font-size:14px}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px}
.lp-actions-center{justify-content:center}

/* hero */
.lp-hero{position:relative;min-height:max(760px,100svh);display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.lp-hero-img{position:absolute;inset:0;background:var(--ink) url('/vatg/img/hero-night.jpg') var(--ox) var(--oy)/cover no-repeat;z-index:-3}
.lp-hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(12,7,17,.8) 0%,rgba(12,7,17,.35) 42%,rgba(12,7,17,0) 62%),linear-gradient(180deg,rgba(12,7,17,0) 70%,var(--ink) 100%)}
.lp-spot{position:absolute;left:var(--px);top:var(--py);width:560px;height:560px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(200,170,255,.16),rgba(200,170,255,0));opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:-1;transition:opacity .8s ease}
.lp-hero.is-inside .lp-spot{opacity:1}
.lp-wheel{position:absolute;left:var(--ox);top:var(--oy);height:112%;aspect-ratio:1/1;width:auto;pointer-events:none;z-index:-1;opacity:.7;
  transform:translate(-50%,-50%) perspective(1400px) rotateX(calc(var(--my) * -9deg)) rotateY(calc(var(--mx) * 12deg)) scale(var(--wake,1));
  transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s ease,filter .9s ease}
.lp-par{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.lp-par-0{transform:translate(calc(var(--mx) * -10px),calc(var(--my) * -10px))}
.lp-par-1{transform:translate(calc(var(--mx) * 16px),calc(var(--my) * 16px))}
.lp-par-2{transform:translate(calc(var(--mx) * 30px),calc(var(--my) * 30px))}
.lp-spin{transform-box:view-box;transform-origin:50% 50%}
.lp-spin-slow{animation:lp-spin 140s linear infinite}
.lp-spin-mid{animation:lp-spinr 90s linear infinite}
.lp-spin-fast{animation:lp-spin 50s linear infinite}
.lp-core{opacity:.55;animation:lp-breathe 6s ease-in-out infinite;transition:opacity .9s ease}
.lp-hero.is-awake .lp-wheel{--wake:1.06;opacity:.95;filter:drop-shadow(0 0 18px rgba(200,170,255,.45))}
.lp-hero.is-awake .lp-core{opacity:.95}
.lp-hero.is-awake .lp-spin-slow{animation-duration:36s}.lp-hero.is-awake .lp-spin-mid{animation-duration:22s}.lp-hero.is-awake .lp-spin-fast{animation-duration:11s}
.lp-orb{position:absolute;left:var(--ox);top:var(--oy);width:22vh;height:22vh;min-width:120px;min-height:120px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:2;transition:box-shadow .8s ease}
.lp-orb:hover{box-shadow:0 0 0 1px rgba(245,238,255,.35),0 0 80px rgba(200,170,255,.35)}
.lp-top{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px;max-width:1240px}
.lp-mark{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-weight:300;font-size:19px;letter-spacing:.04em}

.lp-top-nav{display:flex;gap:6px;align-items:center}
.lp-top-nav > a:not(.lp-btn){padding:12px 14px;font-size:14px;text-decoration:none;color:var(--lilac)}
.lp-hero-copy{position:relative;flex:1;display:flex;align-items:center;width:100%;max-width:1240px;padding-bottom:80px}
.lp-hero-inner{max-width:620px}
.lp h1{font-weight:300;font-size:clamp(46px,6.2vw,78px);line-height:1.02;letter-spacing:-.015em;margin:0 0 28px}
.lp h1 span{font-style:italic;color:#E2D2FA}
.lp-opening{margin:0 0 36px;max-width:540px;font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.6;color:#D9CDE8}
.lp-down{position:relative;align-self:center;margin-bottom:28px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--lilac)}
.lp-arrive{animation:lp-arrive 1.4s cubic-bezier(.2,.7,.2,1) both}.lp-d1{animation-delay:.25s}.lp-d2{animation-delay:.5s}

/* sections */
.lp-section{padding:0 0 110px}
.lp h2{font-weight:300;font-size:clamp(34px,4vw,46px);line-height:1.12;margin:0 0 34px;max-width:780px}
.lp-sub{margin:-24px 0 40px;color:#B7A9C9}
.lp-entrusted{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center;padding:120px 0 110px}
.lp-entrusted p{margin:0 0 16px;color:var(--text-2)}
.lp-entrusted .lp-lead{margin:0 0 26px;font-family:var(--serif);font-weight:300;font-size:40px;line-height:1.25;color:var(--bright)}
.lp-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:10px;font-weight:500;text-decoration:none}
.lp-plate{position:relative;margin:0}
.lp-plate-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(185,154,240,.30),rgba(185,154,240,0));animation:lp-breathe 6s ease-in-out infinite}
.lp-plate img{position:relative;display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:26px;border:1px solid var(--line)}
.lp-plate figcaption{position:relative;margin-top:14px;font-size:14px;color:var(--text-3)}
.lp-glass{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.lp-grid{display:grid;gap:16px}.lp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-tile{padding:30px 28px 32px;border-radius:22px;transition:border-color .4s ease}
.lp-tile:hover{border-color:rgba(228,214,247,.34)}
.lp-tile h3{font-size:23px;line-height:1.25;margin:0 0 10px}
.lp-grid-2 .lp-tile{padding:38px 34px}.lp-grid-2 .lp-tile h3{font-size:30px}
.lp-tile p{margin:0;font-size:15.5px;color:#C2B4D3}

.lp-vellum{background:var(--vellum);color:var(--vellum-ink);margin-bottom:110px}
.lp-vellum .lp-wrap{padding-top:110px;padding-bottom:110px}
.lp-vellum .lp-eyebrow{color:#6B3FA0}
.lp-vellum h2{color:#1E1228;font-size:clamp(36px,4.6vw,52px);max-width:860px;margin-bottom:22px}
.lp-vellum p{margin:0;max-width:780px;font-size:18px;color:#3B3245}
.lp-vellum a{color:#4A2370}

/* where things live: a radio group drawn as rings */
.lp-orbit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.lp-orbit-figure{position:relative;width:100%;max-width:500px;aspect-ratio:1/1;margin:0 auto}
.lp-orbit-lines{position:absolute;inset:0;width:100%;height:100%}
.lp-ring{position:absolute;border-radius:50%;border:1px solid rgba(228,214,247,.18);background:rgba(255,255,255,.02);transition:all .5s cubic-bezier(.2,.7,.2,1)}
.lp-ring-0{inset:3%}.lp-ring-1{inset:17.5%}.lp-ring-2{inset:32%;background:radial-gradient(circle at 50% 40%,#5E3596,#2A1640 70%)}
.lp-ring-label{position:absolute;left:50%;transform:translateX(-50%);min-height:44px;display:flex;align-items:center;padding:8px 16px;border-radius:999px;border:1px solid rgba(228,214,247,.22);background:rgba(12,7,17,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:all .4s ease}
.lp-ring-label-0{top:5%}.lp-ring-label-1{top:21%}
.lp-ring-label-2{top:50%;transform:translate(-50%,-50%);border-color:rgba(255,255,255,.2);background:transparent;backdrop-filter:none;font-family:var(--serif);font-weight:300;font-size:23px;letter-spacing:0;text-transform:none;color:var(--bright)}
#lp-place-0:checked ~ .lp-orbit-figure .lp-ring-0,#lp-place-1:checked ~ .lp-orbit-figure .lp-ring-1{border-color:rgba(228,214,247,.75);background:rgba(185,154,240,.10);box-shadow:0 0 0 10px rgba(185,154,240,.06),0 0 80px rgba(185,154,240,.35)}
#lp-place-2:checked ~ .lp-orbit-figure .lp-ring-2{border-color:rgba(228,214,247,.75);background:radial-gradient(circle at 50% 40%,#7B4FC0,#3A1A5C 70%);box-shadow:0 0 0 10px rgba(185,154,240,.06),0 0 80px rgba(185,154,240,.35)}
#lp-place-0:checked ~ .lp-orbit-figure .lp-ring-label-0,#lp-place-1:checked ~ .lp-orbit-figure .lp-ring-label-1{border-color:rgba(228,214,247,.7);background:rgba(242,234,254,.14)}
#lp-place-2:checked ~ .lp-orbit-figure .lp-ring-label-2{border-color:rgba(255,255,255,.55)}
#lp-place-0:focus-visible ~ .lp-orbit-figure .lp-ring-label-0,#lp-place-1:focus-visible ~ .lp-orbit-figure .lp-ring-label-1,#lp-place-2:focus-visible ~ .lp-orbit-figure .lp-ring-label-2{outline:1px solid var(--bright);outline-offset:4px}
.lp-orbit-panel{padding:38px;border-radius:26px;min-height:240px}
.lp-place{display:none}
#lp-place-0:checked ~ .lp-orbit-panel .lp-place-0,#lp-place-1:checked ~ .lp-orbit-panel .lp-place-1,#lp-place-2:checked ~ .lp-orbit-panel .lp-place-2{display:block;animation:lp-fade .5s ease both}
.lp-place h3{font-size:34px;margin:0 0 6px}
.lp-place-sub{margin:0 0 22px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;color:var(--text-2)}
.lp-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lp-chips li{padding:9px 15px;border-radius:999px;border:1px solid rgba(228,214,247,.25);font-size:14px;background:rgba(255,255,255,.04)}

/* what happens, in order */
.lp-phases{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-phases::before{content:"";position:absolute;left:16.6%;right:16.6%;top:22px;height:1px;background:linear-gradient(90deg,rgba(228,214,247,.1),rgba(228,214,247,.6),rgba(217,199,160,.8))}
.lp-phase{display:flex;flex-direction:column;gap:14px}
.lp-station{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.lp-station b{font-family:var(--serif);font-weight:300;font-size:28px;color:var(--bright)}
.lp-station small{font-size:13px;color:var(--text-3)}
.lp-num{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:var(--ink);color:var(--text);border:1px solid rgba(228,214,247,.45)}
.lp-phase-key .lp-num{background:var(--light);color:var(--plum);border-color:var(--light);box-shadow:0 0 0 8px rgba(242,234,254,.10),0 0 40px rgba(185,154,240,.6)}
.lp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lp-steps li{padding:20px 22px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);color:#D9CDE8}
.lp-steps b{display:block;margin:0 0 4px;font-size:15px}
.lp-steps span{display:block;font-size:15px;line-height:1.5}
.lp-steps li.lp-key{background:linear-gradient(150deg,var(--light),#D9C7F5);border-color:var(--light);color:var(--plum);box-shadow:0 0 60px rgba(185,154,240,.35)}
.lp-foot-note{margin:56px auto 0;max-width:760px;text-align:center;font-size:14.5px;color:var(--text-3)}

.lp-close{position:relative;margin:0 0 40px;padding:90px 20px 110px;text-align:center;border-radius:32px;overflow:hidden;isolation:isolate}
.lp-close-img{position:absolute;inset:0;z-index:-1;opacity:.22;background:url('/vatg/img/hero-light.jpg') 50% 50%/cover no-repeat}
.lp-close h2{margin:0 auto 28px;font-size:clamp(38px,4.4vw,50px)}
.lp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:48px;border-top:1px solid rgba(228,214,247,.12)}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:4px}
.lp-foot-links a{padding:12px;font-size:14px;text-decoration:none;color:var(--lilac)}

@keyframes lp-spin{to{transform:rotate(360deg)}}
@keyframes lp-spinr{to{transform:rotate(-360deg)}}
@keyframes lp-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes lp-arrive{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes lp-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .lp-wrap{padding:0 20px}
  .lp-entrusted,.lp-orbit,.lp-grid-2,.lp-grid-3,.lp-phases{grid-template-columns:minmax(0,1fr)}
  .lp-entrusted{gap:48px;padding:80px 0}
  .lp-phases::before{display:none}
  .lp-wheel{opacity:.45}
  .lp-hero-shade{background:linear-gradient(180deg,rgba(12,7,17,.2) 0%,rgba(12,7,17,.75) 60%,var(--ink) 100%)}
  .lp-hero-copy{align-items:flex-end}
  .lp-top-nav > a:not(.lp-btn){display:none}
  .lp-section{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lp-spin,.lp-core,.lp-plate-glow,.lp-arrive,.lp-reveal,.lp-place{animation:none !important}
  .lp-wheel{transform:translate(-50%,-50%) !important}
  .lp-par{transform:none !important}
  .lp-spot,.lp-orb{display:none !important}
  .lp-btn,.lp-ring,.lp-ring-label{transition:none}
}

/* ---- lp2: white seal that shimmers, scroll choreography, touchable surfaces, small screens ---- */
@keyframes lp-fade{from{opacity:0}to{opacity:1}}
@keyframes lp-sheen{from{background-position:130% 0}to{background-position:-30% 0}}
.lp-seal{display:inline-block;flex:none;background:linear-gradient(105deg,#FFFFFF 0%,#FFFFFF 38%,#E7D8FF 46%,#FFFFFF 50%,#D9C7A0 54%,#FFFFFF 62%,#FFFFFF 100%) 130% 0/260% 100% no-repeat;
  -webkit-mask:url('/vatg/img/emblem-white.png') center/contain no-repeat;mask:url('/vatg/img/emblem-white.png') center/contain no-repeat;
  filter:drop-shadow(0 0 0 rgba(220,200,255,0));transition:filter .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.lp-seal-sm{width:46px;height:46px}.lp-seal-md{width:56px;height:56px;-webkit-mask-image:url('/vatg/img/mmt-emblem-white.png');mask-image:url('/vatg/img/mmt-emblem-white.png')}
.lp-mark:hover .lp-seal,.lp-foot:hover .lp-seal,.lp-seal:hover{animation:lp-sheen 1.6s cubic-bezier(.4,.1,.2,1) both;filter:drop-shadow(0 0 10px rgba(220,200,255,.55));transform:rotate(-6deg) scale(1.04)}
.lp-hero .lp-seal-sm{animation:lp-sheen 2.4s 1.2s cubic-bezier(.4,.1,.2,1) both}

/* scroll choreography: present without script; with script, each part arrives as it comes into view */
.js .lp-r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .is-in .lp-r,.js .lp-r.is-in{opacity:1;transform:none}
.js .lp-plate.lp-r{transform:translate3d(0,40px,0) scale(.96)}
.js .is-in .lp-plate.lp-r{transform:none}
.lp-hero-img{transform:translate3d(0,calc(var(--sy,0) * .25px),0) scale(1.04)}
.lp-hero-inner{opacity:calc(1 - var(--sy,0) / 700);transform:translate3d(0,calc(var(--sy,0) * -.12px),0)}
.lp-orbit-lines{transform:rotate(calc(var(--op,0) * 90deg));transition:transform .2s linear}
[data-words] .lp-w{opacity:.18;transition:opacity .4s ease}
[data-words] .lp-w.on{opacity:1}

/* touchable surfaces: a light that follows the finger or pointer, and a slight lean */
.lp-tile,.lp-steps li,.lp-orbit-panel{position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .5s ease}
.lp-tile::before,.lp-steps li::before,.lp-orbit-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(320px circle at var(--x,50%) var(--y,50%),rgba(205,184,234,.20),transparent 60%)}
.lp-tile.is-lit::before,.lp-steps li.is-lit::before,.lp-orbit-panel.is-lit::before{opacity:1}
.lp-tile.is-lit,.lp-steps li.is-lit{border-color:rgba(228,214,247,.38)}
.lp-steps li.lp-key::before{background:radial-gradient(320px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.55),transparent 60%)}

/* the order track fills as you read, and each stage lights in turn */
.lp-phases::after{content:"";position:absolute;left:16.6%;right:16.6%;top:22px;height:1px;background:linear-gradient(90deg,#E9DDFB,#D9C7A0);transform-origin:left;transform:scaleX(var(--tp,0));box-shadow:0 0 12px rgba(217,199,160,.7)}
.lp-num{transition:background .5s ease,color .5s ease,box-shadow .5s ease,border-color .5s ease}
.lp-phase.is-lit .lp-num{border-color:#E9DDFB;box-shadow:0 0 0 6px rgba(242,234,254,.08),0 0 28px rgba(185,154,240,.5)}

/* small screens */
@media (max-width:900px){
  .lp-phases::after{display:none}
  .lp-tile,.lp-steps li,.lp-orbit-panel{transform:none}
}
@media (max-width:700px){
  :root{--stage:62svh}
  body.lp{font-size:16px}
  .lp-hero{min-height:0;overflow:visible}
  .lp-hero-img{bottom:auto;height:var(--stage);background-position:77.3% 44.4%}
  .lp-hero-shade{bottom:auto;height:calc(var(--stage) + 2px);background:linear-gradient(180deg,rgba(12,7,17,.35) 0%,rgba(12,7,17,0) 25%,rgba(12,7,17,0) 55%,var(--ink) 100%)}
  .lp-wheel{top:calc(var(--stage) * .444);height:calc(var(--stage) * 1.12);opacity:.6}
  .lp-orb{top:calc(var(--stage) * .444);width:calc(var(--stage) * .22);height:calc(var(--stage) * .22)}
  .lp-hero-copy{padding-top:calc(var(--stage) - 150px);padding-bottom:28px;align-items:flex-start}
  .lp-hero-inner{opacity:1;transform:none}
  .lp-top{padding-top:16px;padding-bottom:16px}
  .lp-mark{gap:10px;font-size:16px;white-space:nowrap}
  .lp-top-nav .lp-btn{white-space:nowrap;min-height:44px;padding:10px 18px}
  .lp h1{font-size:clamp(40px,11vw,52px);margin-bottom:18px}
  .lp-opening{font-size:18px;margin-bottom:26px}
  .lp-actions .lp-btn{flex:1 1 140px}
  .lp-down{display:none}
  .lp-entrusted{padding:56px 0 64px}
  .lp-entrusted .lp-lead{font-size:30px}
  .lp-section{padding-bottom:64px}
  .lp h2{font-size:clamp(30px,8.4vw,36px);margin-bottom:24px}
  .lp-sub{margin:-14px 0 28px}
  .lp-grid-2 .lp-tile{padding:28px 24px}.lp-grid-2 .lp-tile h3{font-size:26px}
  .lp-tile{padding:24px 22px}
  .lp-vellum{margin-bottom:64px}.lp-vellum .lp-wrap{padding-top:64px;padding-bottom:64px}
  .lp-orbit{gap:28px}
  .lp-orbit-figure{max-width:min(420px,92vw)}
  .lp-ring-label{font-size:10.5px;letter-spacing:.12em;padding:6px 12px}
  .lp-ring-label-2{font-size:19px;letter-spacing:0}
  .lp-orbit-panel{padding:26px 22px;min-height:0}
  .lp-place h3{font-size:28px}
  .lp-close{padding:64px 16px 72px}
  .lp-foot{justify-content:center;text-align:center}
}
@media (max-width:380px){.lp-mark span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){
  .js .lp-r{opacity:1 !important;transform:none !important;transition:none !important}
  .lp-hero-img,.lp-hero-inner,.lp-orbit-lines{transform:none !important;opacity:1 !important}
  [data-words] .lp-w{opacity:1 !important}
  .lp-seal,.lp-hero .lp-seal-sm{animation:none !important;transition:none}
  .lp-tile,.lp-steps li,.lp-orbit-panel{transform:none !important}
}

/* ---- lp3: finer geometry, whole seals, edge-free hero, drag-to-spin, arrivals from their own side ---- */
/* the seal: solid white everywhere, with a sheen that passes over it (no longer a half-width gradient) */
.lp-seal{background-color:#FFFFFF;background-image:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(214,192,255,.95) 47%,rgba(255,255,255,0) 51%,rgba(217,199,160,.95) 55%,rgba(255,255,255,0) 64%);background-size:260% 100%;background-repeat:no-repeat;background-position:130% 0}

/* hero image: taller than the stage and faded at its foot, so no edge or band can show */
.lp-hero-img{top:-6%;bottom:-14%;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%);transform:translate3d(0,calc(var(--sy,0) * .18px),0)}
.lp-hero-shade{background:linear-gradient(90deg,rgba(12,7,17,.82) 0%,rgba(12,7,17,.38) 40%,rgba(12,7,17,0) 60%)}
.lp-hero{background:var(--ink)}

/* the wheel: hairlines that stay one pixel at any size */
.lp-wheel{height:100%;opacity:.62}
.lp-wheel circle,.lp-wheel line,.lp-wheel polygon{vector-effect:non-scaling-stroke}
.lp-par{transform-box:view-box;transform-origin:50% 50%}
.lp-par-0{transform:translate(calc(var(--mx) * -10px),calc(var(--my) * -10px)) rotate(calc(var(--spin,0deg) * .55))}
.lp-par-1{transform:translate(calc(var(--mx) * 16px),calc(var(--my) * 16px)) rotate(calc(var(--spin,0deg) * -.8))}
.lp-par-2{transform:translate(calc(var(--mx) * 30px),calc(var(--my) * 30px)) rotate(calc(var(--spin,0deg) * 1.25))}
.lp-hero.is-dragging .lp-par{transition:none}

/* the dial: the area around the light that can be touched and turned */
.lp-dial{position:absolute;left:var(--ox);top:var(--oy);height:78%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;z-index:1;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.lp-hero.is-dragging .lp-dial{cursor:grabbing}
.lp-orb{z-index:2;touch-action:pan-y}
.lp-top,.lp-hero-copy{z-index:3}
.lp-hero-copy{pointer-events:none}.lp-hero-copy .lp-hero-inner{pointer-events:auto}

/* where things live: the dotted orbits can be turned too */
.lp-orbit-figure{cursor:grab;touch-action:pan-y}
.lp-orbit-figure.is-dragging{cursor:grabbing}
.lp-orbit-lines{transform:rotate(calc(var(--op,0) * 90deg + var(--spin,0deg)))}
.lp-orbit-figure.is-dragging .lp-orbit-lines{transition:none}

/* arrivals from their own side */
.js .lp-r[data-from="left"]{transform:translate3d(-72px,0,0) rotate(-.6deg)}
.js .lp-r[data-from="right"]{transform:translate3d(72px,0,0) rotate(.6deg)}
.js .lp-r[data-from="rise"]{transform:translate3d(0,34px,0) scale(.98)}
.js .lp-r[data-from="left"],.js .lp-r[data-from="right"]{transition-duration:.9s,1.2s}
.js .is-in .lp-r[data-from]{transform:none}

@media (max-width:700px){
  .lp-hero-img{top:0;bottom:auto;height:calc(var(--stage) + 12vh);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);transform:none}
  .lp-hero-shade{height:var(--stage);background:linear-gradient(180deg,rgba(12,7,17,.45) 0%,rgba(12,7,17,0) 22%)}
  .lp-wheel{height:var(--stage);opacity:.55}
  .lp-dial{top:calc(var(--stage) * .444);height:calc(var(--stage) * .78)}
  .js .lp-r[data-from="left"]{transform:translate3d(-40px,0,0)}
  .js .lp-r[data-from="right"]{transform:translate3d(40px,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .js .lp-r[data-from]{transform:none !important}
  .lp-dial{display:none}
}

/* ---- lp4: the rings centred exactly on the light at every size ----
   The image box is taller than the stage (it starts 6% above it and runs 14% below), so the light sits at
   44.4% of the image box, which is 47.28% of the stage on wide screens. On phones the image box is the stage
   plus 12vh tall, starting at the top. */
:root{--oy-stage:47.28%}
.lp-wheel,.lp-dial,.lp-orb{top:var(--oy-stage)}
@media (max-width:700px){
  .lp-wheel,.lp-dial,.lp-orb{top:calc((var(--stage) + 12vh) * .444)}
  .lp-wheel{height:calc(var(--stage) * 1.0)}
}