/* Atlas Motion Systems — UI replica
   Design tokens (colors, fluid type scale, grid math) taken from the live
   site's stylesheet. Layout re-implemented as normal document flow instead
   of the original's canvas/WebGL + scroll-jacked sticky-panel engine. */

/* Instrument Sans (SIL OFL) standing in for Suisse Intl. Static instances cut
   from the variable font at wght 500 and 560, because those match Suisse's
   Regular and Medium stem thickness (the font's own 400 looks thin next to
   it). Text width lands within ~1% of Suisse, and the vertical metrics are
   pinned to Suisse's so line boxes keep their height. */
@font-face{font-family:"Alex Brush";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/AlexBrush-Regular-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Regular-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Regular-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Medium-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;ascent-override:98.6%;descent-override:31.1%;line-gap-override:0%;src:url(../fonts/InstrumentSans-Medium-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --color-white:#eee8e8;
  --color-warm-white:#fffde0;
  --color-black:#3a0e1a;
  --color-dark-black:#2a0a13;
  --color-grey:#c0c0c0;
  --color-dark-grey:#4a1824;
  --color-thesis-grey:#999999;
  --color-spec-grey:#bbbbbb;
  --color-primary:#f65893;

  /* Fluid type/space scale, exactly as the original: every size is a fixed
     number of units where one unit is 1/1440th of the viewport width. There
     are no clamps — a second, narrower scale takes over below 768px. */
  /* One hundredth of the real viewport height; JS keeps it in sync so
     mobile URL-bar chrome doesn't resize pinned sections mid-scroll. */
  --vh: 1vh;
  --screen-unit: 100vw / 1440;
  --site-outer-padding-x: calc(32 * var(--screen-unit));
  --site-padding-x: calc(202 * var(--screen-unit));
  --site-padding-y: calc(16 * var(--screen-unit));
  /* The original's vertical unit: one 820th of the real viewport height.
     Used to park elements at a fixed fraction of a pinned screen. */
  --height-unit: calc(var(--vh) * .1219512195);
  --header-height: 76.375px;
  /* Column helpers: the original places things on a 24-col grid, so a start
     column N is (N-1) span-widths in, and a span of N is N cols + N-1 gaps. */
  --col-4: calc(3 * var(--grid-span-width));
  --col-7: calc(6 * var(--grid-span-width));
  --col-13: calc(12 * var(--grid-span-width));
  --span-8: calc(8 * var(--grid-column-width) + 7 * var(--grid-gap-width));
  --span-12: calc(12 * var(--grid-column-width) + 11 * var(--grid-gap-width));
  --span-18: calc(18 * var(--grid-column-width) + 17 * var(--grid-gap-width));

  --grid-columns: 24;
  --grid-gap-scale: calc(20 / 24);
  --grid-gap-width: calc((100vw - var(--site-padding-x) * 2) / ((var(--grid-columns) / var(--grid-gap-scale)) + var(--grid-columns) - 1));
  --grid-column-width: calc(var(--grid-gap-width) / var(--grid-gap-scale));
  --grid-span-width: calc(var(--grid-gap-width) + var(--grid-column-width));
  --grid-span-2: calc(var(--grid-span-width) * 1 + var(--grid-column-width));
  --grid-span-17: calc(var(--grid-span-width) * 16 + var(--grid-column-width));
  --grid-span-24: calc(var(--grid-span-width) * 23 + var(--grid-column-width));

  --hero-title: calc(64 * var(--screen-unit));
  --h1: calc(184 * var(--screen-unit));
  --h2: calc(150 * var(--screen-unit));
  --h3: calc(116 * var(--screen-unit));
  --h4: calc(76 * var(--screen-unit));
  --h5: calc(30 * var(--screen-unit));
  --h6: calc(17 * var(--screen-unit));
  --p1: calc(24 * var(--screen-unit));
  --p2: calc(18 * var(--screen-unit));
  --p3: calc(16 * var(--screen-unit));
  --p4: calc(14 * var(--screen-unit));
  --caption1: calc(14 * var(--screen-unit));
  --caption2: calc(24 * var(--screen-unit));
  --nav-link: calc(12 * var(--screen-unit));
  --default: calc(16 * var(--screen-unit));
}

/* The original's narrow-screen scale: a different unit base (1/375) and its
   own set of step values, rather than shrinking the desktop scale. */
@media (max-width: 767.98px){
  :root{
    --screen-unit: 100vw / 375;
    --site-padding-x: calc(11 * var(--screen-unit));
    --site-outer-padding-x: calc(11 * var(--screen-unit));
    --site-padding-y: calc(47 * var(--screen-unit));
    --grid-columns: 12;
    --grid-gap-scale: calc(4 / 12);
    --hero-title: calc(38 * var(--screen-unit));
    --h1: calc(96 * var(--screen-unit));
    --h2: calc(38 * var(--screen-unit));
    --h3: calc(26 * var(--screen-unit));
    --h4: calc(16 * var(--screen-unit));
    --caption1: calc(16 * var(--screen-unit));
    --caption2: calc(18 * var(--screen-unit));
    --nav-link: calc(12 * var(--screen-unit));
    --default: calc(12 * var(--screen-unit));
    --p1: calc(16 * var(--screen-unit));
    --p2: calc(12 * var(--screen-unit));
    --p3: calc(8 * var(--screen-unit));
    --p4: calc(6 * var(--screen-unit));
  }
}

*{box-sizing:border-box}
html{width:100%;font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;color:var(--color-white);background-color:var(--color-black);-ms-overflow-style:none;scrollbar-width:none}
/* The scrollbar is hidden so the layout viewport is the full window width —
   every fluid size is derived from 100vw, so a 15px gutter would shift the
   whole type scale. */
html::-webkit-scrollbar{display:none}
body{width:100%;margin:0;font-weight:300;font-size:var(--default);line-height:1.2;background:var(--color-black)}
a{color:inherit}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p{margin:0}

.o-container{width:100%;padding:0 var(--site-padding-x)}
.section{position:relative;width:100%}
.section__inner{padding-top:var(--site-padding-y);padding-bottom:var(--site-padding-y)}

.nav-link{font-weight:500;font-size:var(--nav-link);line-height:1;text-transform:uppercase;letter-spacing:-.36px;border:1px solid var(--color-white);display:inline-flex}
.nav-link>a{padding:.6em;text-decoration:none;color:inherit}

/* Type scale — line-heights and tracking are the original's exact values.
   Letter-spacing stays in fixed px on purpose: the sizes are fluid, so
   constant tracking keeps large headings tight without over-tightening
   small text. */
h1{font-size:var(--h1);line-height:.891;letter-spacing:-5.52px}
h2{font-size:var(--h2);line-height:.88;letter-spacing:-4.5px}
h3{font-size:var(--h3);line-height:.886;letter-spacing:-3.48px}
h4{font-size:var(--h4);line-height:.894;letter-spacing:-2.28px}
h5{font-size:var(--h5);line-height:1.13;letter-spacing:-.9px}
h6{font-size:var(--h6);line-height:1.2;letter-spacing:-.51px;font-weight:500}
.p1{font-size:var(--p1);line-height:1.25;letter-spacing:-.72px;font-weight:300}
.p2{font-size:var(--p2);line-height:1.444;letter-spacing:-.54px;font-weight:300}
.p3{font-size:var(--p3);line-height:1.25;letter-spacing:-.48px;font-weight:400}
.p4{font-size:var(--p4);line-height:1;letter-spacing:-.42px;font-weight:400}
.caption1,.caption2{font-weight:500;text-transform:uppercase}
.caption1{font-size:var(--caption1);line-height:1.1667}
.caption2{font-size:var(--caption2);line-height:.833;letter-spacing:-.72px}

/* ---------- Header ---------- */
#site-header{position:fixed;left:var(--site-outer-padding-x);right:var(--site-outer-padding-x);top:var(--site-padding-y);height:auto;z-index:100;display:flex;justify-content:space-between}
#site-header-nav{display:flex;flex-direction:column;gap:1em;align-items:flex-start;justify-content:space-between;z-index:11}
#site-header-nav ul{display:flex;gap:.4em}
#site-header-nav a{color:var(--color-white);text-decoration:none}
#site-header-nav li:hover{opacity:.7}
#site-header-cta-container{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
/* Original: the rule between nav and CTA that scales out during the
   header's entrance, then fades (driven from js/main.js). */
#site-header-cta__separator{background-color:var(--color-white);height:1px;position:absolute;bottom:0;left:300px;right:300px;opacity:0;pointer-events:none}
#site-header-cta{background-color:var(--color-white)}
#site-header-cta a{height:calc(26 * var(--screen-unit));display:flex;align-items:center;justify-content:center;color:var(--color-black);text-decoration:none}
#site-header-mobile-menu-button{display:none;flex-shrink:0;flex-direction:column;justify-content:center;align-items:center;gap:calc(4 * var(--screen-unit));width:calc(26 * var(--screen-unit));height:calc(26 * var(--screen-unit));padding:0;border:none;background-color:var(--color-white);cursor:pointer}
#site-header-mobile-menu-button span{display:block;width:calc(14 * var(--screen-unit));height:1px;background-color:var(--color-black)}

/* ---------- Mobile menu ---------- */
#site-mobile-menu{position:fixed;inset:0;z-index:99;background-color:var(--color-black);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
#site-mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.site-mobile-menu__inner{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding-top:calc(90 * var(--screen-unit));padding-bottom:2em}
#site-mobile-menu__nav{flex:1;display:flex;align-items:center;justify-content:flex-end}
#site-mobile-menu__nav ul{text-align:right;width:100%}
#site-mobile-menu__nav li+li{margin-top:.5em}
#site-mobile-menu__nav a{color:var(--color-white);text-decoration:none;font-size:calc(48 * var(--screen-unit));font-weight:300;line-height:.916;letter-spacing:calc(-1.44 * var(--screen-unit))}
#site-mobile-menu__footer{display:flex;justify-content:space-between;align-items:flex-end;text-transform:uppercase;font-size:var(--caption1)}
.site-mobile-menu__social-links{display:flex;gap:1em}
.site-mobile-menu__social-links a{color:var(--color-white);text-decoration:none}

/* ---------- Hero ---------- */
#home-hero{position:relative;min-height:100vh}
#hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}
#home-hero .section__inner{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#3a0e1a url(../images/home-video-poster.jpg) center/cover no-repeat}
#home-hero .section__inner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,6,12,.15),rgba(30,6,12,.55) 80%);z-index:1}
.hero-content-wrap{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
#home-hero__content{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em}
/* The original's hero lockup: the block is four line-heights tall with the
   lines spread apart, and the last line is pushed out to the right edge. */
/* Columns 4..21 of 24, four line-heights tall, the three lines spread down
   it with the last one pushed to the right edge -- all straight from the
   original. It is static: nothing animates it on scroll. */
#home-hero .hero-title{height:4lh;width:var(--span-18);margin-left:var(--col-4);margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left}
#home-hero .hero-title > span{white-space:nowrap}
#home-hero .hero-title > span:nth-child(2){align-self:center}   /* "Invites You" sits centred, evenly between the other two lines */
#home-hero .hero-title > span:nth-child(3){align-self:flex-end}
/* The opening line is set in Alex Brush, the same script as the names on the loading screen, bigger and
   bolder than the capitals it replaced (Alex Brush has one weight, so the bold is an outline stroke in the
   text colour). On a phone the longest line (6.76 em wide) is sized to fit the screen and starts at the
   left edge. The background grid's reference box below uses the same size and line height so the grid still
   frames the title. */
:root{--hero-script:calc(var(--hero-title) * 2.3)}
@media (max-width:767.98px){:root{--hero-script:11.7vw}#home-hero .hero-title{margin-left:0;width:100%}}
#home-hero .hero-title{font-family:"Alex Brush",cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--hero-script);line-height:1.02;-webkit-text-stroke:.03em currentColor;paint-order:stroke fill}
.hero-title{font-size:var(--hero-title);line-height:.906;letter-spacing:-1.92px;font-weight:500;text-transform:uppercase;display:flex;flex-direction:column}
/* The original parks the copy at top:100% of the lockup and slides it up
   half a viewport into place across the hero pin (JS drives --hero-copy-y). */
.hero-copy{position:absolute;top:100%;left:0;right:0;height:auto;margin:0;padding-top:2em;
  font-size:var(--p1);font-weight:500;line-height:1.1667;letter-spacing:-.72px;
  transform:translateY(var(--hero-copy-y, 0px))}
.hero-copy > span{display:block;width:calc(10 * var(--grid-column-width) + 9 * var(--grid-gap-width));margin-left:var(--col-13);text-wrap:balance}
/* Fixed, not absolute: in the original it never moves. It is visible only
   at the very top of the page and fades out over ~0.25s on the first
   scroll -- it is not tied to scroll position beyond that. */
#home-hero__scroll-to-explore{position:fixed;left:0;right:0;bottom:var(--site-padding-y);height:0;z-index:4;
  text-align:right;pointer-events:none;opacity:1;transition:opacity .25s ease}
#home-hero__scroll-to-explore.is-hidden{opacity:0}
#home-hero__scroll-to-explore > span{position:absolute;right:calc(var(--site-padding-x) + 3 * var(--grid-span-width));bottom:0;text-align:right}

/* ---------- Intro ---------- */
#home-intro{background:var(--color-black)}
/* The mountain lands here, on the "right motor for the mission" beat.
   Three stacked mattes: sky furthest back, distant ridge, foreground peak. */
#home-intro__scenery{position:absolute;inset:0;overflow:hidden;z-index:0}
/* One scene, not stacked bands: the wide matte covers the section and the
   foreground peak sits on the bottom edge. */
#home-intro__scenery img{position:absolute;left:0;width:100%;max-width:none;object-fit:cover}
#home-intro__scenery .intro-ridge{top:0;height:100%;object-position:center 35%}
#home-intro__scenery .intro-peak{bottom:0;height:auto;object-fit:contain;object-position:center bottom}
/* Keep the headline legible over the scenery. */
#home-intro .section__inner:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(30,6,12,.45),rgba(30,6,12,.15) 45%,rgba(30,6,12,.55))}
#home-intro .intro-content{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ---------- Clouds: the page 1 -> 2 hand-off ----------
   They belong to the transition out of the hero and into the intro, not
   behind the mountain. Driven by the hero's scroll progress in main.js. */
/* Lives inside the hero's stacking context so it paints above the video and
   below the lockup, but is fixed rather than absolute: that lets it hold its
   place over the seam as the hero scrolls off and the intro rises, instead of
   being clipped to the hero. overflow:hidden on the sticky parent does not
   clip it, because sticky is not a containing block for fixed children. */
#page-clouds{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;overflow:hidden}
#page-clouds .cloud{position:absolute;width:auto;max-width:none;will-change:transform,opacity}
/* Start below the fold and travel upward; spread horizontally so the rise
   reads as a bank of cloud passing, not a single sprite. */
#page-clouds .cloud--a{bottom:0;left:-18%;height:66%}
#page-clouds .cloud--b{bottom:-8%;left:26%;height:58%}
#page-clouds .cloud--c{bottom:4%;left:58%;height:72%}
/* position:fixed is the original's actual mechanism here -- the intro never
   scrolls, later sections simply paint over it. */
#home-intro .section__inner{position:fixed;top:0;left:0;right:0;height:calc(var(--vh) * 100);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:0}
/* Fixed full-screen hero scene (js/scene-hero.js), as the original's #canvas.
   Once it is running it replaces the DOM stand-ins: the <video> only feeds
   the WebGL texture (the original hides it the same way), and the DOM
   clouds, intro scenery and gradient overlays give way to the real layers. */
#hero-canvas{position:fixed;top:0;left:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;visibility:hidden}
html.has-hero-scene #hero-canvas{visibility:visible}
html.has-hero-scene #home-hero .section__inner{background:none}
html.has-hero-scene #home-hero .section__inner:after,html.has-hero-scene #home-intro .section__inner:after{display:none}
html.has-hero-scene #hero-video{visibility:hidden}
html.has-hero-scene #page-clouds,html.has-hero-scene #home-intro__scenery{display:none}
html.has-hero-scene #home-intro{background:none}
html.has-hero-scene #home-drone{background:none}
html.has-hero-scene #home-drone .section__inner:after{display:none}
html.has-hero-scene #drone-canvas,html.has-hero-scene #drone-fallback{display:none}
#home-intro__copy{color:var(--color-warm-white)}
/* Countdown under the intro lines. It uses the same type as those lines (Instrument Sans
   medium, uppercase, tight tracking = .caption2), and fades and un-blurs on scroll with the
   last letters of the copy (see tickIntro), so it is invisible until that code runs. */
#home-intro__countdown{margin-top:calc(44 * var(--screen-unit));color:var(--color-warm-white);font-weight:500;text-transform:uppercase;letter-spacing:-.03em;text-shadow:0 1px 18px rgba(0,0,0,.35)}
#home-intro__countdown .cd-row{display:flex;justify-content:center;align-items:flex-start;gap:calc(44 * var(--screen-unit))}
#home-intro__countdown .cd-unit{display:flex;flex-direction:column;align-items:center;min-width:calc(104 * var(--screen-unit))}
#home-intro__countdown .cd-num{font-size:calc(52 * var(--screen-unit));font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#home-intro__countdown .cd-label{margin-top:.9em;font-size:var(--caption1);font-weight:500;line-height:1.1667;letter-spacing:-.03em;opacity:.75}
#home-intro__countdown .cd-note{margin:calc(30 * var(--screen-unit)) 0 0;font-size:var(--caption2);font-weight:500;line-height:.833;letter-spacing:-.72px;opacity:.9}
@media (max-width: 767.98px){
  #home-intro__countdown{margin-top:calc(34 * var(--screen-unit))}
  #home-intro__countdown .cd-row{gap:calc(12 * var(--screen-unit))}
  #home-intro__countdown .cd-unit{min-width:calc(64 * var(--screen-unit))}
  #home-intro__countdown .cd-num{font-size:calc(34 * var(--screen-unit))}
  #home-intro__countdown .cd-note{margin-top:calc(22 * var(--screen-unit))}
}

/* ---------- Drone / ramp section ---------- */
#home-drone{background:var(--color-black)}
#home-drone .section__inner{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;color:var(--color-warm-white)}
/* Title and copy both sit on columns 7..18; the title takes the slack so the
   copy stays pinned near the bottom, exactly as the original's grid does. */
#home-drone .scene-content{height:100%;display:flex;flex-direction:column}
#home-drone__title{flex:1;margin-top:calc(110 * var(--screen-unit));margin-left:var(--col-7);width:var(--span-12);text-transform:uppercase}
/* The h2 keeps its natural two-line height -- it is the container that
   stretches, so the copy stays anchored near the bottom. */
#home-drone__title h2{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
#home-drone__title .hero-title{font-size:var(--hero-title)}
/* The invitation text, laid out as on the card: hosts, the request, "Wedding Ceremony", the couple, her parents,
   a rule, then the date and place. Each line is split into words (main.js), which fade in one after another. */
#home-drone{--inv:var(--p1)}
#home-drone__desc{margin:0 0 calc(80 * var(--screen-unit)) var(--col-7);width:var(--span-12);text-align:center;display:flex;flex-direction:column;align-items:center}
#home-drone__desc p{margin:0;font-size:var(--inv);line-height:1.25;font-weight:400;letter-spacing:0;text-wrap:balance}
#home-drone__desc .inv-host{font-size:calc(var(--inv) * 1.3);font-weight:500}
#home-drone__desc .inv-sub{font-size:calc(var(--inv) * .82);font-weight:300;font-style:italic;opacity:.9;margin-bottom:.7em}
#home-drone__desc .inv-lead{margin:.2em 0}
#home-drone__desc .inv-parent{white-space:nowrap;margin-bottom:0}
#home-drone__desc .inv-parent + .inv-parent{margin-bottom:.7em}
#home-drone__desc .inv-title{font-size:calc(var(--inv) * 2.1);font-weight:500;color:#dcae4d;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;margin:.25em 0}
#home-drone__desc .inv-name{font-family:"Alex Brush",cursive;font-weight:400;font-size:calc(var(--inv) * 2.3);line-height:1.05;margin:.1em 0;white-space:nowrap}
#home-drone__desc .inv-name .word{padding:0 .1em}
#home-drone__desc .inv-amp{color:#dcae4d;font-size:calc(var(--inv) * 1.4);line-height:1}
#home-drone__desc .inv-rule{display:block;width:min(60%,12em);height:1px;margin:1em 0 .9em;background:linear-gradient(90deg,transparent,#dcae4d,transparent)}
#home-drone__desc .inv-date{font-size:calc(var(--inv) * 1.4);font-weight:600}
#home-drone__desc .inv-place{font-size:calc(var(--inv) * .8);letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-top:.4em}

/* ---------- Process / motor section ---------- */
/* Generic 24-column row, as the original's .o-grid. Children place
   themselves with --grid-column-start / --grid-column-span. */
.o-grid{position:relative;display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);grid-template-rows:repeat(var(--rows,1),1fr);column-gap:var(--grid-gap-width);row-gap:0;height:100%}
.o-grid>*{grid-column:auto / span var(--grid-column-span,var(--grid-columns));grid-column-start:var(--grid-column-start,auto)}

/* Pin geometry (1 vh = one viewport). The original pins the inner a full
   viewport before the section arrives with a JS counter-transform, and fades
   it in over the last half of that. A JS transform judders against native
   scrolling (see the drone), so native stickiness does it here instead: the
   section starts two viewports early, overlapping the drone's (now 3vh)
   section, and is one viewport taller. Its sticky inner therefore pins at
   exactly the original's moment, the drone holds under it until the motor is
   fully opaque, and the page's total height is unchanged. The black moves
   from the section to the inner so the drone shows through the overlap until
   the fade starts. */
#home-motor{margin-top:calc(var(--vh) * -200);scroll-margin-top:calc(var(--vh) * -100);pointer-events:none}
#home-motor .section__inner{pointer-events:auto;position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:var(--color-black);opacity:0;visibility:hidden}
#jdm{position:absolute;top:0;scroll-margin-top:calc(var(--vh) * -100)}
#home-motor__head,#home-motor__desc-2,#home-motor__title{z-index:2}
#home-motor .scene-canvas,#home-motor .scene-fallback{z-index:0}
/* The same golden contour wallpaper as the sections that follow, behind the objects. */
#events-terrain{position:absolute;top:0;left:0;display:block;z-index:0;pointer-events:none}

/* Head row: step number + dots (cols 1-3), "Our Process" (4-7),
   "NDAA-Compliant Motors" (15-18), step bars (24). */
#home-motor__head{margin-top:calc(92 * var(--screen-unit));height:auto}
#home-motor__nav{--grid-column-start:1;--grid-column-span:3;display:flex;flex-direction:column;font-size:calc(34 * var(--screen-unit));letter-spacing:calc(-1.015 * var(--screen-unit));font-weight:300}
#home-motor__nav>span:nth-child(1){position:relative;display:inline-block;transform:translate(-.1ch)}
#home-motor__nav>span:nth-child(1)>span:nth-child(1){visibility:hidden}
#home-motor__nav>span:nth-child(1){line-height:1.1;white-space:nowrap}
#home-motor__nav-list{list-style-type:none;margin:0;padding:0;display:flex;gap:.5em}
#home-motor__nav-list li{position:relative;width:4px;height:4px;margin-top:.5em;transition:transform .25s;transform:scale(1);will-change:transform;cursor:pointer}
#home-motor__nav-list li:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;border:1px solid var(--color-white);transition:background-color .25s}
#home-motor__nav-list li.is-active:before{background-color:var(--color-white)}
#home-motor__nav-list li:hover{transform:scale(1.05)}
#home-motor__jdm{--grid-column-start:4;--grid-column-span:4;display:flex;flex-direction:column;align-items:flex-end;font-size:calc(32 * var(--screen-unit));line-height:calc(27 * var(--screen-unit));letter-spacing:calc(-.96 * var(--screen-unit))}
#home-motor__ndaa{--grid-column-start:15;--grid-column-span:4;text-transform:uppercase;font-size:calc(13 * var(--screen-unit));letter-spacing:calc(-.39 * var(--screen-unit))}
#home-motor__lines{--grid-column-start:24;--grid-column-span:1;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#home-motor__lines span{width:100%;height:1px;background-color:var(--color-white)}
#home-motor__lines span:nth-child(1){transform:translate(-50%) scaleX(2)}

/* Step copy: one <p> per step, only the showing one displayed; JS rises its
   words in line by line. */
#home-motor__desc-2{position:absolute;left:0;right:0;height:auto;top:calc(490 * var(--height-unit))}
#home-motor__desc-2 p{--grid-column-start:1;--grid-column-span:7;margin:0;font-size:calc(20 * var(--screen-unit));line-height:1.3;font-weight:400;letter-spacing:calc(-.4 * var(--screen-unit));display:none}
#home-motor__desc-2 p:first-child{display:block}
#home-motor__desc-2 .split-line{overflow:hidden}

/* Title row: a rule across cols 1-3 (hidden on step 3, whose long word
   reaches that far) and the step word right-aligned across cols 4-24.
   The h2's first span is an invisible sizer; the real words are stacked,
   absolutely positioned, and slide in from the right. */
#home-motor__title{height:auto}
#home-motor__title>span:first-child{--grid-column-start:1;--grid-column-span:3;position:relative;width:100%;margin:1em 0}
#home-motor__title>span:first-child:before{content:"";position:absolute;left:0;top:clamp(0px,(var(--vh) * 100 - 820px) * -1,100%);right:0;width:100%;height:1px;background:var(--color-white);opacity:0;transition:opacity .5s}
#home-motor__title>span:first-child.is-active:before{opacity:1}
#home-motor__title h2{position:relative;--grid-column-start:4;--grid-column-span:21;margin:0;text-align:right;text-transform:uppercase;font-size:var(--h2);line-height:.88;letter-spacing:calc(-4.5 * var(--screen-unit));font-weight:500}
#home-motor__title h2>span:first-child{display:block;--line-height:.89832;--letter-spacing:-4.317;--font-size:144;font-size:calc(var(--font-size) * var(--screen-unit));letter-spacing:calc(var(--letter-spacing) * var(--screen-unit));line-height:var(--line-height);visibility:hidden}
#home-motor__title-list,#home-motor__number-list{position:absolute;left:0;top:0}
#home-motor__title-list span:not(.dg),#home-motor__number-list span:not(.dg){white-space:nowrap;position:absolute;left:0;top:0;transform:translate(100%);transition:transform .5s,opacity .5s;opacity:0;text-transform:uppercase}
#home-motor__title-list span.is-active:not(.dg),#home-motor__number-list span.is-active:not(.dg){opacity:1;transform:translate(0)}
#home-motor__title-list span.is-next:not(.dg),#home-motor__number-list span.is-next:not(.dg){transform:translate(-100%)}
#home-motor__title-list{--line-height:.89832;--letter-spacing:-4.317;--font-size:144;inset:0}
#home-motor__title-list>span.is-long{top:auto;bottom:0;font-size:calc(88 * var(--screen-unit))}
#home-motor__title-list>span{left:unset;right:0;white-space:nowrap;font-size:calc(var(--font-size) * var(--screen-unit));letter-spacing:calc(var(--letter-spacing) * var(--screen-unit));line-height:var(--line-height)}

@media (max-width: 767.98px){
  #home-motor__head{margin-top:calc(98 * var(--screen-unit))}
  #home-motor__nav-list,#home-motor__jdm,#home-motor__lines,#home-motor__title>span:first-child{display:none}
  #home-motor__ndaa{--grid-column-start:8;--grid-column-span:5;text-align:right}
  /* The date block above is sized by width (ends at ~220 units), the copy was
     parked by height (~29vh), so on a shorter-than-2:1 phone the copy rode up
     over the time line. Never let it sit above the date block plus a gap. */
  #home-motor__desc-2{top:max(calc(240 * var(--height-unit)), calc(236 * var(--screen-unit)))}
  #home-motor__desc-2 p{--grid-column-start:1;--grid-column-span:10;text-align:left;font-size:calc(16 * var(--screen-unit))}
  #home-motor__title h2{--grid-column-start:1;--grid-column-span:12;text-align:right}
  #home-motor__title h2>span:first-child,#home-motor__title-list{--font-size:50;--line-height:1.29128;--letter-spacing:-1.44}
  #home-motor__title-list>span.is-long{font-size:calc(29 * var(--screen-unit))}
}

/* ---------- Thesis ---------- */
#home-thesis{position:relative;isolation:isolate;background:var(--color-black)}
#home-thesis .section__inner{display:flex;flex-direction:column;justify-content:space-between;height:auto;
  padding-top:calc(var(--header-height) + 2 * var(--site-padding-y));padding-bottom:0}
#home-thesis__content{flex:1;display:flex}
#home-thesis__image{position:relative;flex:none;width:calc(var(--site-padding-x) + var(--grid-span-17));overflow:hidden}
#home-thesis__image img{object-fit:cover;height:100%;width:100%}
#home-thesis__copy{flex:1;padding-left:var(--grid-span-2);padding-right:var(--site-padding-x);font-weight:300}
#home-thesis__copy p{display:flex;flex-direction:column;gap:1.2em;font-size:var(--default)}
#home-thesis__copy a{margin-top:2em;width:20ch;padding:.5em .6em;line-height:1;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;background:#c0c0c01a;border:none}

/* ---------- Gallery ---------- */
#home-gallery{padding-top:4rem;padding-bottom:2rem}
#home-gallery__gallery{display:flex;flex-direction:column;gap:1.4em;align-items:flex-end}
.main-images-container{position:relative;width:100%;max-height:75vh;overflow:hidden;aspect-ratio:1036/629;background:var(--color-dark-grey)}
.main-images-wrapper{width:100%;height:100%;position:relative}
.main-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.main-image.is-active{opacity:1}
.thumbnails-container{display:flex;gap:.7em;flex-wrap:wrap}
.thumbnail-button{padding:0;border:none;cursor:pointer;width:80px;height:56px;opacity:.35;transition:opacity .2s ease-in-out;background:transparent}
.thumbnail-button.is-active,.thumbnail-button:hover{opacity:1}
.thumbnail-button img{width:100%;height:100%;object-fit:cover}

/* ---------- Specs / Ecosystem ---------- */
/* isolate: the robot canvas (#home-specs__image, z -1) must stay inside this
   section, or it sinks behind #home-thesis's opaque terrain backdrop. */
#home-specs{--active-ratio:1;position:relative;isolation:isolate;min-height:calc(var(--vh) * 100)}
#home-gallery .section__inner{display:flex;flex-direction:column;height:unset;gap:calc(102 * var(--screen-unit));
  padding-top:calc(200 * var(--screen-unit));padding-bottom:0;color:var(--color-grey)}
#home-specs .section__inner{position:relative;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}
/* ---------- Terrain contour wallpaper ----------
   HEIGHT.webp drawn by the original's Terrain shader (js/terrain.js). The
   original paints it on its full-screen WebGL canvas behind the whole DOM.
   On the home page the canvas sticks inside the backdrop, which runs from
   the thesis section to the end of the document. */
/* Painted inside #home-thesis's stacking context, which paints above the
   fixed intro -- so the intro copy stops showing through the transparent
   sections below. */
#terrain-backdrop{position:absolute;top:0;left:0;width:100%;z-index:-2;background:var(--color-black);pointer-events:none}
#terrain-canvas{position:sticky;top:0;display:block;width:100%;height:calc(var(--vh) * 100);pointer-events:none}
/* Thesis and contact: fixed behind the page content. */
#terrain-canvas.is-fixed{position:fixed;left:0;z-index:-1}
#home-specs__hero{position:relative;margin-top:calc(200 * var(--screen-unit))}
/* Sizing box for the WebGL robot (the original's rule; the image itself is
   painted on the terrain canvas, so the box stays empty). */
#home-specs__image{position:absolute;top:0;left:50%;transform:translate(-50%);width:calc(var(--site-padding-x) + var(--grid-span-24));aspect-ratio:1832/1234;z-index:-1;pointer-events:none}
#home-specs__robot{display:block;width:100%;height:100%}
#home-specs__title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;text-transform:uppercase;font-size:var(--hero-title);letter-spacing:calc(-1.92 * var(--screen-unit));padding-top:calc(380 * var(--screen-unit));padding-bottom:calc(100 * var(--screen-unit))}
#home-specs__list{position:relative;padding-bottom:calc(140 * var(--screen-unit))}
/* Cards sit on the 24-column grid, 7 columns each (starts 1 / 10 / 18). The
   middle one is pulled back a column and dropped 4em — the original's stagger. */
#home-specs__list>ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--grid-columns),1fr);column-gap:var(--grid-gap-width);row-gap:0}
#home-specs__list>ul>li{grid-column:var(--spec-col) / span 7}
#home-specs__list>ul>li:nth-child(1){--spec-col:1}
#home-specs__list>ul>li:nth-child(2){--spec-col:10;transform:translate(calc(-1 * var(--grid-column-width)),4em)}
#home-specs__list>ul>li:nth-child(3){--spec-col:18}
/* isolation keeps the z-index:-1 frame inside the card; without it the frame
   sinks behind the terrain backdrop on cards without a transform. */
#home-specs__list li{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:calc(52 * var(--screen-unit)) calc(44 * var(--screen-unit)) calc(20 * var(--screen-unit));min-height:calc(350 * var(--screen-unit))}
/* The frame is its own element so it can scale open from the centre; the
   corner ticks ride its edges. Border + fill live here, not on the <li>. */
#home-specs__list .squares-decorator{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border:1px solid rgba(255,255,255,.2);background:#10100f4d}
#home-specs__list .squares-decorator > span{position:absolute;width:calc(6 * var(--screen-unit));height:calc(6 * var(--screen-unit));background:var(--color-white)}
#home-specs__list .squares-decorator > span:nth-child(1){top:0;left:0;transform:translate(-50%,-50%)}
#home-specs__list .squares-decorator > span:nth-child(2){top:0;right:0;transform:translate(50%,-50%)}
#home-specs__list .squares-decorator > span:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}
#home-specs__list .squares-decorator > span:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}
#home-specs__list .squares-decorator > span:nth-child(5){top:25%;right:0;transform:translate(50%,25%)}
#home-specs__list .squares-decorator > span:nth-child(6){top:25%;left:0;transform:translate(-50%,25%)}
/* The original ships the pixel icons but hides them (display:none everywhere). */
.home-spec__icon{display:none;width:calc(60 * var(--screen-unit));height:calc(60 * var(--screen-unit))}
/* Copy block fills the rest of the card and centres vertically. */
#home-specs__list li>div:nth-child(2){flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}   /* name on top, address and directions at the bottom */
#home-specs__list h6{text-transform:uppercase;margin:0;font-size:var(--h6);line-height:1.2;letter-spacing:-.51px;font-weight:500}
#home-specs__list .caption1{color:var(--color-spec-grey);font-weight:300;text-transform:none;letter-spacing:-.72px;margin:1em 0}
/* Venue cards: the name on top in the invitation's script, a thin gold rule, then the address and a directions button at the bottom. */
#home-specs__list li{min-height:calc(250 * var(--screen-unit));text-align:center}
#home-specs__list li>div:first-child{padding-bottom:calc(18 * var(--screen-unit));border-bottom:1px solid rgba(220,174,77,.45)}
#home-specs__list h6{font-family:"Alex Brush",cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:calc(32 * var(--screen-unit));line-height:1.1;color:var(--color-warm-white)}
#home-specs__list li>div:nth-child(2) .caption1:not(.venue-link){color:var(--color-warm-white);opacity:.9;font-size:calc(18 * var(--screen-unit));line-height:1.35;letter-spacing:0;margin:1.1em 0 1em}
#home-specs__list .venue-link{align-self:center;display:inline-flex;align-items:center;margin:0 0 .4em;padding:.6em .9em;border:1px solid #dcae4d;color:#dcae4d;font-size:calc(14 * var(--screen-unit));font-weight:500;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;text-decoration:none;transition:background .25s ease,color .25s ease}
#home-specs__list .venue-link:hover,#home-specs__list .venue-link:focus-visible{background:#dcae4d;color:var(--color-black)}

/* ---------- Build to spec CTA ---------- */
#home-build-to-spec{position:relative;overflow:hidden}
#home-build-to-spec__bgimage{position:absolute;inset:0;z-index:0}
#home-build-to-spec__bgimage img{width:100%;height:100%;object-fit:cover}
#home-build-to-spec:before{content:"";position:absolute;inset:0;background:rgba(30,6,12,.55);z-index:1}
#home-build-to-spec .section__inner{position:relative;z-index:2;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding-top:calc(250 * var(--screen-unit));padding-bottom:calc(150 * var(--screen-unit))}
/* Sentence case at weight 500, exactly as the original -- uppercase made each
   line wrap and doubled the block (660px instead of 285px). The two lines
   are then pulled together with the original's negative leading. */
#home-build-to-spec-title{width:100%;display:flex;flex-direction:column;text-align:center;
  font-size:var(--h2);line-height:1.1;letter-spacing:calc(-4.5 * var(--screen-unit));font-weight:500}
#home-build-to-spec-title > :nth-child(1){margin-top:-.1em}
#home-build-to-spec-title > :nth-child(2){margin-top:-.2em}
#home-build-to-spec-title .char-mask{overflow-clip-margin:.05em}
#home-build-to-spec-button{position:relative;margin-top:calc(120 * var(--screen-unit))}
/* flex + fit-content, not inline-flex: an inline-flex anchor sits in a line
   box and the extra leading pushed the button ~28px down the section. */
#home-build-to-spec-button > div{display:flex;flex-direction:column;align-items:center;justify-content:center}
#home-build-to-spec-button a{position:relative;background:var(--color-dark-black);text-decoration:none;color:var(--color-white);padding:31px 44px 31px 52px;font-size:var(--caption1);display:flex;align-items:center;gap:1em;border:none;width:fit-content;overflow:hidden}
#home-build-to-spec-button a svg{width:1.5em;height:1.5em;fill:var(--color-white)}
#home-build-to-spec-button a:hover{background:var(--color-primary);color:var(--color-black)}
#home-build-to-spec-button a:hover svg{fill:var(--color-black)}

/* ---------- Footer ---------- */
/* As on the original: z-index 2 and opaque, so it paints over the fixed
   #background-grid (also z 2, earlier in the DOM) and the grid ends at the
   last section instead of running through the footer. */
#site-footer{position:relative;background-color:var(--color-black);z-index:2;padding-top:calc(80 * var(--screen-unit));padding-bottom:calc(48 * var(--screen-unit))}
#site-footer:before,#site-footer:after{content:"";position:absolute;left:0;width:100%;height:8px;border-top:1px solid var(--color-warm-white);border-bottom:1px solid var(--color-warm-white);opacity:.1}
#site-footer:before{top:8px}
#site-footer:after{bottom:8px}
/* Rows are .o-grid (24 columns) as on the original; the values below are
   its desktop rules. */
#site-footer a{text-decoration:none}
#site-footer__top,#site-footer__bottom,#site-footer__top a,#site-footer__bottom a{color:#cccbbd80}
#site-footer__links,#site-footer__social,#site-footer__emails{display:flex;flex-direction:column;gap:calc(28 * var(--screen-unit));padding-bottom:2em;text-transform:uppercase}
#site-footer__links > div:first-child,#site-footer__social > div:first-child,#site-footer__emails > div:first-child{color:#cccbbd80}
#site-footer__links a,#site-footer__social a,#site-footer__emails a{color:var(--color-white)}
#site-footer__links{--grid-column-start:10;--grid-column-span:3}
#site-footer__social{--grid-column-start:15;--grid-column-span:3}
#site-footer__emails{--grid-column-start:19;--grid-column-span:6}
#site-footer__emails > a{white-space:nowrap;word-break:normal;overflow-wrap:normal}
#site-footer__bottom{padding-top:calc(144 * var(--screen-unit))}
#site-footer__bottom > :nth-child(1){--grid-column-start:1;--grid-column-span:9}
#site-footer__bottom > :nth-child(2){--grid-column-start:10;--grid-column-span:5}
#site-footer__bottom > :nth-child(3){--grid-column-start:15;--grid-column-span:4}
#site-footer__bottom > :nth-child(4){--grid-column-start:19;--grid-column-span:6;text-align:right}

/* ---------- Scroll indicator ----------
   The original's own scrollbar (the native one is hidden): a white bar on
   the right edge that tracks the scroll position and can be dragged. It
   slides in during the preloader handoff; on phones it only shows while
   scrolling. Driven from js/main.js. */
#scroll-indicator{position:fixed;top:0;right:0;width:0;height:calc(var(--vh) * 100);z-index:20}
#scroll-indicator__bar{position:absolute;top:0;right:0;width:10px;height:200px;background-color:var(--color-white);pointer-events:auto;transform:translate3d(100%,0,0);touch-action:none;user-select:none}
@media (max-width:767.98px){#scroll-indicator__bar{width:4px;height:100px}}

/* ---------- Preloader ---------- */
/* Preloader — the original's markup and rules. It is transparent: the page
   background and the background grid (sized to #preloader-content while it
   runs) show through, and the page itself stays hidden until it starts. */
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center}
#preloader canvas{position:fixed;top:0;left:0;width:100%;height:100%}
#preloader .o-container{height:auto}
#preloader-content{--grid-column-span:10;--grid-column-start:8;position:relative;overflow:hidden}
#preloader-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5em;margin-top:calc(81 * var(--screen-unit));margin-bottom:calc(87 * var(--screen-unit))}
#preloader-logo>span:nth-child(1){height:7em}
#preloader-logo svg{display:block;fill:var(--color-white)}
#preloader-left,#preloader-right{will-change:transform;position:absolute;display:flex;flex-direction:column;justify-content:center;gap:.25em;text-transform:uppercase;font-size:calc(2 * var(--default));text-shadow:0 0 5px #3a0e1a,0 0 10px #3a0e1a,0 0 18px #3a0e1a,0 0 28px #3a0e1a}
#preloader-left span,#preloader-right span{display:inline-block}
/* The two names on the loading screen are set in Alex Brush (the live invitation's script), not the site's uppercase sans */
#preloader-left span:nth-child(2),#preloader-right span:first-child{font-family:"Alex Brush",cursive;font-weight:400;text-transform:none;font-size:calc(3.4 * var(--default));line-height:1.1;white-space:nowrap;position:relative;padding:.18em .22em .26em;margin:-.18em -.22em -.26em;color:transparent;text-shadow:none;background:linear-gradient(100deg,#f1e6d0 0%,#fffaf0 24%,#ffffff 34%,#f6e9cf 46%,#e9dcc2 62%,#fffaf0 80%,#f1e6d0 100%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 2px #3a0e1a) drop-shadow(0 0 6px #3a0e1a) drop-shadow(0 0 14px #3a0e1a);animation:name-shimmer 3.4s linear infinite}
#preloader-left span:nth-child(2)::before,#preloader-right span:first-child::before,#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::after{content:"";position:absolute;width:.34em;height:.34em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 14.2 9.8 24 12 14.2 14.2 12 24 9.8 14.2 0 12 9.8 9.8Z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;pointer-events:none;animation:name-twinkle 2.6s ease-in-out infinite}
#preloader-left span:nth-child(2)::before,#preloader-right span:first-child::before{left:8%;top:6%}
#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::after{right:6%;bottom:12%;width:.26em;height:.26em;animation-delay:1.3s}
#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::before{animation-delay:.7s}
@keyframes name-shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes name-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){#preloader-left span:nth-child(2),#preloader-right span:first-child{animation:none;background-position:0 0}#preloader-left span:nth-child(2)::before,#preloader-right span:first-child::before,#preloader-left span:nth-child(2)::after,#preloader-right span:first-child::after{animation:none}}
#preloader-left{top:0;left:0;align-items:flex-start}
#preloader-left span:nth-child(1){display:none}   /* the white loading bar beside the name is gone */
#preloader-right{bottom:0;right:0;align-items:flex-end}
#preloader-right span:last-child{display:none}
@media (max-width:767.98px){#preloader-content{--grid-column-span:10;--grid-column-start:2}}
html.js:not(.preloader-done) #site-header,html.js:not(.preloader-done) #site-content{visibility:hidden}
/* #hero-canvas sets its own visibility, so it needs hiding explicitly. */
html.js:not(.preloader-done) #hero-canvas{visibility:hidden}
html.preloader-done #preloader{pointer-events:none}
html.js:not(.preloader-done) body{overflow:hidden}


/* ---------- Background grid (2D canvas, mirrors the original) ---------- */
#background-grid{position:fixed;top:0;left:0;width:100%;height:100%;transform-origin:0 0;pointer-events:none;z-index:2;transition:opacity .8s ease}
/* no grid lines on the loading screen; they fade in as it hands over to the page (the canvas keeps drawing underneath) */
html.js:not(.preloader-done) #background-grid{opacity:0}
/* Invisible reference box the grid brackets — matches the hero title block */
#background-grid-ref{position:fixed;top:0;left:0;height:100vh;width:100%;pointer-events:none;visibility:hidden;z-index:-1}
#background-grid-ref .o-container{position:relative;height:100%}
#background-grid-ref__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:4lh;font-size:var(--hero-script);line-height:1.02;width:calc(var(--grid-span-width) * 18 + .5 * var(--grid-column-width))}
#site-content{position:relative;z-index:1}

/* ---------- Scroll reveal (progressive enhancement) ---------- */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.is-visible{opacity:1;transform:none}

/* ---------- Editorial pages (Thesis, Contact) ---------- */
.editorial-page .section__inner{padding-top:calc(220 * var(--screen-unit));padding-bottom:calc(140 * var(--screen-unit))}
.editorial-page__title{text-transform:uppercase;font-weight:500;display:flex;flex-direction:column;margin-bottom:calc(64 * var(--screen-unit))}
.editorial-page__image{width:100%;max-height:60vh;overflow:hidden;margin-bottom:calc(80 * var(--screen-unit))}
.editorial-page__image img{width:100%;height:100%;object-fit:cover}
.editorial-page__content{max-width:62ch;margin-left:auto;display:flex;flex-direction:column;gap:calc(36 * var(--screen-unit))}
.thesis-text p{margin:0;color:var(--color-white)}
.editorial-page__content .thesis-text:last-child p{text-transform:uppercase;font-weight:500}

/* ---------- Writing index ---------- */
#writing-list{max-width:62ch;margin-left:auto;display:flex;flex-direction:column;gap:calc(48 * var(--screen-unit))}
#writing-list a{display:flex;flex-direction:column;gap:.7em;text-decoration:none;color:var(--color-white)}
.writing-date{color:var(--color-spec-grey)}
.writing-title{font-size:var(--h5);line-height:1.13;letter-spacing:-.9px;font-weight:500;text-transform:uppercase}
.writing-excerpt{color:var(--color-spec-grey)}
#writing-list a:hover .writing-title{color:var(--color-primary)}

/* ---------- Contact form ---------- */
#contact-form{max-width:62ch;margin-left:auto;margin-top:calc(72 * var(--screen-unit));display:grid;grid-template-columns:1fr 1fr;gap:calc(28 * var(--screen-unit))}
.contact-field{display:flex;flex-direction:column;gap:.6em}
.contact-field--wide{grid-column:1 / -1}
.contact-field label{font-size:var(--caption1);text-transform:uppercase;font-weight:500;color:var(--color-spec-grey)}
.contact-field input,.contact-field textarea{background:transparent;border:0;border-bottom:1px solid #ffffff33;color:var(--color-white);font-family:inherit;font-size:var(--p2);padding:.6em 0;outline:none;resize:vertical}
.contact-field input:focus,.contact-field textarea:focus{border-bottom-color:var(--color-white)}
#contact-submit{grid-column:1 / -1;justify-self:start;background:var(--color-white);color:var(--color-black);border:0;font-family:inherit;font-weight:500;text-transform:uppercase;font-size:var(--caption1);letter-spacing:-.36px;padding:1.1em 2em;cursor:pointer;transition:background .2s ease,color .2s ease}
#contact-submit:hover{background:var(--color-primary);color:var(--color-black)}
#contact-note{grid-column:1 / -1;color:var(--color-spec-grey);text-transform:none}
#contact-emails{max-width:62ch;margin-left:auto;margin-top:calc(72 * var(--screen-unit));display:flex;flex-wrap:wrap;gap:calc(28 * var(--screen-unit)) calc(64 * var(--screen-unit));text-transform:uppercase}
#contact-emails div{display:flex;flex-direction:column;gap:.6em}
#contact-emails span{color:#cccbbd80}
#contact-emails a{color:var(--color-white);text-decoration:none}
/* The sign-off after the phone numbers: same gap as above them, or it runs into the last number. */
#contact-emails + .editorial-page__content{margin-top:calc(72 * var(--screen-unit))}

/* ---------- Page transitions ---------- */
/* The original cross-fades its page container: 0.2s out, 0.3s in. */
html.js #site-content{transition:opacity .3s ease}
/* Keep wide content (motor title slides, terrain, footer columns on phones)
   from widening the layout viewport — the fixed header spans the layout
   viewport, so that pushed its menu button off-screen. clip, not hidden,
   so sticky sections keep working. */
#site-content,#site-footer{overflow-x:clip}
html.js.is-page-entering #site-content{opacity:0;transition:none}
html.js.is-page-leaving #site-content{opacity:0;transition-duration:.2s}
/* Header, footer and grid are outside #site-content, so they stay
   mounted and untouched across a swap — exactly as in the original. */

/* ---------- WebGL scenes ---------- */
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .8s ease}
.scene-canvas.is-ready{opacity:1}
/* Static stand-in shown until the scene is ready, and permanently if WebGL
   is unavailable — these are the original site's own fallback renders. */
.scene-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1;transition:opacity .8s ease}
.scene-fallback.is-hidden{opacity:0}
#home-drone .scene-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center}
#home-drone .section__inner:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(30,6,12,.82) 0%,rgba(30,6,12,.45) 45%,rgba(30,6,12,.08) 75%)}

/* ---------- Split text (per-character reveal) ---------- */
.split-line{display:block}
.word{display:inline-block;white-space:nowrap}
.char-mask{display:inline-block;overflow:hidden;overflow-clip-margin:.05em;vertical-align:top}
/* The script (Alex Brush) lettering has long swashes that reach past each letter's box, so the mask around each letter is
   widened (overflow-clip-margin only works with overflow:clip) instead of cutting the first letters of a line short. */
#home-specs__list h6 .char-mask,#home-hero .hero-title .char-mask{overflow:clip;overflow-clip-margin:.4em}
.char{display:inline-block;will-change:transform,opacity}
html.js .is-split-pending{opacity:0}

/* ---------- Flip-text link hover ---------- */
.flip-wrap{display:inline-block;overflow:hidden;position:relative;vertical-align:top}
.flip-wrap .flip-a,.flip-wrap .flip-b{display:block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.flip-wrap .flip-b{position:absolute;left:0;top:0;transform:translateY(100%)}
a:hover .flip-wrap .flip-a{transform:translateY(-100%)}
a:hover .flip-wrap .flip-b{transform:translateY(0)}

/* ---------- Responsive ---------- */
/* ---------- Phones: the original's max-width:767.98px rules ----------
   Ported from its stylesheet and checked element by element against the
   live site at 390px. Spans are on the phone grid (12 columns, see :root
   above): n columns = n * --grid-column-width + (n - 1) * --grid-gap-width,
   and each column start adds one --grid-span-width. */
@media (max-width: 767.98px){
  /* Header: logo, Order Now and the menu button in one centred row. Only
     the nav links and the subtitle go. */
  #site-header{align-items:center}
  #site-header-nav ul{display:none}
  #site-header-cta-container{flex-direction:row;align-items:center;gap:calc(8 * var(--screen-unit))}
  #site-header-cta__subtitle{display:none}
  #site-header-mobile-menu-button{display:flex}
  /* Menu footer: "Directions" plus three links is wider than the screen in
     one row, so the label ran into "Home". Stack the label above the links. */
  #site-mobile-menu__footer{flex-direction:column;align-items:flex-start;gap:.75em}
  .site-mobile-menu__social-links{flex-wrap:wrap;row-gap:.5em}

  /* Hero: the title takes the full width; its size is --hero-script (Alex Brush: the longest line,
     "Dandayala Family", is 6.76 em wide, so 13.5vw is the most that fits; 11.7vw is in use). Copy on columns 2..11. */
  #home-hero .hero-title{width:100%;margin-left:0;font-size:var(--hero-script)}
  .hero-copy{line-height:1.25;letter-spacing:-.48px}
  .hero-copy > span{width:calc(10 * var(--grid-column-width) + 9 * var(--grid-gap-width));margin-left:var(--grid-span-width)}

  /* Drone: title and copy drop to the bottom-left of the pinned frame. */
  #home-drone .scene-content{justify-content:flex-end}
  #home-drone__title{flex:none;margin:0 0 0 var(--grid-span-width);width:calc(11 * var(--grid-column-width) + 10 * var(--grid-gap-width))}
  #home-drone__title h2{align-items:flex-start;text-align:left}
  #home-drone{--inv:4.7vw}
  #home-drone__desc{margin:0 auto calc(70 * var(--screen-unit));width:calc(100% - 2 * var(--site-padding-x))}

  /* Thesis: image full-bleed on top (its box runs past the right edge and is
     clipped, as on the original), copy below with a wide right margin. */
  #home-thesis__content{flex-direction:column;flex-wrap:nowrap;gap:0}
  #home-thesis__copy{padding-left:calc(var(--site-padding-x) + var(--grid-column-width));padding-right:calc(var(--grid-span-width) * 3 + var(--grid-column-width))}
  #home-thesis__copy p{font-size:var(--default);margin-top:3em}
  #home-thesis__copy a{margin-top:2em}

  /* Gallery */
  #home-gallery .section__inner{gap:calc(52 * var(--screen-unit))}
  #home-gallery__gallery{gap:calc(22 * var(--screen-unit))}
  .thumbnails-container{gap:calc(7 * var(--screen-unit));flex-wrap:nowrap}
  .thumbnail-button{width:calc(40 * var(--screen-unit));height:calc(29 * var(--screen-unit))}

  /* Ecosystem: the first title line spans the full width with the logo
     between the words; cards stack in one column, inset a column. */
  #home-specs__hero{width:100%;margin-top:calc(170 * var(--screen-unit));padding:0 var(--site-padding-x)}
  #home-specs__title{width:100%}
  #home-specs__list>ul{display:flex;flex-direction:column;gap:2em;padding:0 var(--grid-column-width)}
  #home-specs__list>ul>li:nth-child(n){transform:none}
  #home-specs__list h6{font-size:calc(34 * var(--screen-unit))}
  #home-specs__list .venue-link{font-size:calc(15 * var(--screen-unit));letter-spacing:.1em;padding:.6em 1.2em}

  /* Closing CTA */
  #home-build-to-spec .section__inner{padding-top:calc(106 * var(--screen-unit))}
  #home-build-to-spec-title{font-size:calc(54 * var(--screen-unit));line-height:calc(49 * var(--screen-unit));letter-spacing:-1.62px}
  #home-build-to-spec-title > :nth-child(1),#home-build-to-spec-title > :nth-child(2){margin-top:0}
  #home-build-to-spec-button{padding-top:calc(36 * var(--screen-unit))}
  #home-build-to-spec-button > div{gap:2em}
  #home-build-to-spec-button a{font-size:16px;padding:17px 24px 18px 17px}

  /* Footer: one centred column, a large logo above the legal links. */
  #site-footer{padding-top:calc(38 * var(--screen-unit));padding-bottom:calc(18 * var(--screen-unit))}
  #site-footer__top,#site-footer__bottom{display:flex;flex-direction:column;gap:1em;font-size:calc(11 * var(--screen-unit));letter-spacing:calc(-.33 * var(--screen-unit))}
  #site-footer__links,#site-footer__social,#site-footer__emails{text-align:center;gap:calc(28 * var(--screen-unit));padding-bottom:calc(48 * var(--screen-unit))}
  #site-footer__emails{padding-bottom:0}
  #site-footer__emails > :nth-child(3){padding-top:calc(20 * var(--screen-unit))}
  #site-footer__bottom{margin-top:0;padding-top:calc(72 * var(--screen-unit));padding-bottom:calc(48 * var(--screen-unit));align-items:center;gap:2.5em}
  #site-footer__bottom > :nth-child(3){display:none}
}

/* Background music toggle (js/music.js): bottom left, above the page, shown once the loader is gone */
#sound-toggle{position:fixed;left:var(--site-outer-padding-x);bottom:calc(16 * var(--screen-unit));z-index:100;display:flex;align-items:center;gap:.7em;padding:.55em .8em;border:1px solid rgba(238,232,232,.45);background:rgba(30,6,12,.55);color:var(--color-white);font:inherit;font-size:calc(12 * var(--screen-unit));line-height:1;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .4s ease,border-color .2s}
#sound-toggle:hover{border-color:var(--color-white)}
#sound-toggle[hidden]{display:none}
html:not(.preloader-done) #sound-toggle{opacity:0;pointer-events:none}
.sound-toggle__bars{display:flex;align-items:flex-end;gap:2px;width:14px;height:12px}
.sound-toggle__bars i{display:block;width:3px;height:3px;background:#e8b64a;transform-origin:bottom}
#sound-toggle.is-playing .sound-toggle__bars i{animation:sound-bar 1s ease-in-out infinite alternate}
#sound-toggle.is-playing .sound-toggle__bars i:nth-child(2){animation-delay:-.4s}
#sound-toggle.is-playing .sound-toggle__bars i:nth-child(3){animation-delay:-.75s}
@keyframes sound-bar{from{height:3px}to{height:12px}}
@media (prefers-reduced-motion:reduce){#sound-toggle.is-playing .sound-toggle__bars i{animation:none;height:9px}}

/* Loading screen backdrop: the mandala as golden lines, cut along the circles drawn in the artwork into four
   rings. Three double-line circles (at .346, .570 and .765 of the radius; the cuts run through the empty
   gap between the two lines of each pair) split it, so each ring keeps its own circle line and the seams
   are invisible. Each ring is its own layer with its own mask and turns at its own pace, alternating
   direction. A wide, soft ring of light is born at the centre and spreads outward across all of them at an
   even pace, like the glint on the terrain wallpaper (a scaled pseudo-element, so it stays smooth; each
   ring's mask clips it to the lines). main.js fades the backdrop out with the loader. */
#preloader-backdrop{position:absolute;inset:0;pointer-events:none}
#preloader-mandala{--m:min(96vmin,1000px);position:absolute;left:50%;top:50%;width:var(--m);height:var(--m);margin:calc(var(--m) / -2) 0 0 calc(var(--m) / -2);pointer-events:none;opacity:0;animation:mandala-in 1.4s ease .1s forwards}
.pm-ring{position:absolute;inset:0;display:block;background:linear-gradient(115deg,#b98a30 0%,#dcae4d 50%,#b98a30 100%);will-change:transform;contain:paint;backface-visibility:hidden}   /* own layer per ring, and the 4x glow inside is clipped to the ring box instead of rasterised at 4000px */
.pm-ring:after{content:"";position:absolute;inset:0;background:radial-gradient(circle closest-side,rgba(255,236,168,0) 0%,rgba(255,236,168,0.015) 20%,rgba(255,236,168,0.033) 24%,rgba(255,236,168,0.066) 28%,rgba(255,236,168,0.122) 32%,rgba(255,236,168,0.207) 36%,rgba(255,236,168,0.324) 40%,rgba(255,236,168,0.468) 44%,rgba(255,236,168,0.623) 48%,rgba(255,236,168,0.764) 52%,rgba(255,236,168,0.864) 56%,rgba(255,236,168,0.900) 60%,rgba(255,236,168,0.864) 64%,rgba(255,236,168,0.764) 68%,rgba(255,236,168,0.623) 72%,rgba(255,236,168,0.468) 76%,rgba(255,236,168,0.324) 80%,rgba(255,236,168,0.207) 84%,rgba(255,236,168,0.122) 88%,rgba(255,236,168,0.066) 92%,rgba(255,236,168,0.033) 96%,rgba(255,236,168,0.015) 100%,rgba(255,236,168,0) 100%);transform:scale(.04);will-change:transform;animation:mandala-ring 5.4s linear .8s infinite}
.pm-r1{-webkit-mask:url(../images/preloader-ring-1.webp) center/contain no-repeat;mask:url(../images/preloader-ring-1.webp) center/contain no-repeat;animation:mandala-turn 60s linear infinite}
.pm-r2{-webkit-mask:url(../images/preloader-ring-2.webp) center/contain no-repeat;mask:url(../images/preloader-ring-2.webp) center/contain no-repeat;animation:mandala-turn-back 90s linear infinite}
.pm-r3{-webkit-mask:url(../images/preloader-ring-3.webp) center/contain no-repeat;mask:url(../images/preloader-ring-3.webp) center/contain no-repeat;animation:mandala-turn 130s linear infinite}
.pm-r4{-webkit-mask:url(../images/preloader-ring-4.webp) center/contain no-repeat;mask:url(../images/preloader-ring-4.webp) center/contain no-repeat;animation:mandala-turn-back 180s linear infinite}
@keyframes mandala-in{to{opacity:.9}}
@keyframes mandala-ring{0%{transform:scale(.04)}78%,100%{transform:scale(4.2)}}
@keyframes mandala-turn{to{transform:rotate(360deg)}}
@keyframes mandala-turn-back{to{transform:rotate(-360deg)}}
/* on a phone the whole pattern fits the screen with a small margin (inside the arch frame) */
@media (max-width:767.98px){#preloader-mandala{--m:min(66vw,72vh);animation-name:mandala-in-bright}.pm-ring{background:linear-gradient(115deg,#d8a640 0%,#f7dc8a 50%,#d8a640 100%)}}
@keyframes mandala-in-bright{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pm-ring{animation:none}.pm-ring:after{animation:none;transform:scale(.04)}}

/* The loading screen waits for a click: once the page is ready a small line at the bottom says so,
   and the loader only leaves when it is clicked or tapped (main.js, runPreloader). Text only. */
#preloader-enter{position:absolute;left:50%;bottom:max(5vh,calc(32 * var(--screen-unit)));transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:1em;padding:.6em 1.2em;border:0;background:none;color:var(--color-warm-white);font:inherit;font-size:var(--caption1);line-height:1;letter-spacing:.22em;font-weight:500;text-shadow:0 0 4px #3a0e1a,0 0 8px #3a0e1a,0 0 14px #3a0e1a,0 0 22px #3a0e1a;text-transform:uppercase;white-space:nowrap;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
html.preloader-ready:not(.preloader-done) #preloader-enter{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s;animation:enter-pulse 2.2s ease-in-out .8s infinite}
#preloader-enter:focus,#preloader-enter:focus-visible{outline:none}   /* just the text, no box or ring */
html.preloader-ready:not(.preloader-done) #preloader{cursor:pointer}
@keyframes enter-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){html.preloader-ready:not(.preloader-done) #preloader-enter{animation:none}}

/* Watercolour floral arch around the loading screen, phone only (the supplied picture; the window of the arch is
   cleared so the burgundy shows through, the paper is toned to gold and the flowers keep their colours). It is
   scaled to cover the screen and centred. It fades in with the loader and leaves with it (inside
   #preloader-backdrop). */
.pf{display:none}
@media (max-width:767.98px){
  .pf{display:block;position:absolute;inset:0;pointer-events:none;opacity:0;background:url(../images/preloader-frame.webp) center/cover no-repeat;animation:mandala-in 1.4s ease .1s forwards}
  #preloader #preloader-enter{bottom:180px}
}
@media (prefers-reduced-motion:reduce){.pf{animation:none;opacity:1}}

/* ---------- One metal per digit (js/digits.js) ----------
   Every 1-9 on the site is a different metal, wherever it appears; 0 keeps the text colour. Each digit is filled with
   a brushed-metal gradient (dark edge, bright highlight, soft reflection, dark edge) clipped to its shape:
   1 rose gold, 2 copper, 3 gold, 4 bronze, 5 silver, 6 champagne, 7 platinum, 8 garnet, 9 pearl.
   Where the browser cannot clip a gradient to text, the digit keeps a plain metal colour (the --dgN fallbacks).
   (Earlier flat palettes: maroon-gold ramp fe242fe, site colours 9d9057d, florals 7b37a21.) */
:root{
  --dg1:#e8a595;--dg2:#d9803f;--dg3:#e6b83f;--dg4:#bf9a4c;--dg5:#c9cdd4;--dg6:#e6d3ae;--dg7:#c3ccd6;--dg8:#d9566e;--dg9:#f1e7d8;
  --mt1:linear-gradient(160deg,#fbd9cb 0%,#e49b88 34%,#f6c4b3 52%,#b86a5c 100%);
  --mt2:linear-gradient(160deg,#f7b887 0%,#cd6d33 36%,#eea069 54%,#8f4519 100%);
  --mt3:linear-gradient(160deg,#fff3b8 0%,#e9bc3d 36%,#fde68f 54%,#a9791c 100%);
  --mt4:linear-gradient(160deg,#ebd08a 0%,#a98336 36%,#d5b563 54%,#6f5420 100%);
  --mt5:linear-gradient(160deg,#ffffff 0%,#b9bec6 36%,#eef0f3 54%,#7d838d 100%);
  --mt6:linear-gradient(160deg,#fff8e6 0%,#dcc79f 36%,#f8edd4 54%,#a8916a 100%);
  --mt7:linear-gradient(160deg,#f7f9fb 0%,#aeb8c4 36%,#e1e7ee 54%,#6c7683 100%);
  --mt8:linear-gradient(160deg,#f7a0ad 0%,#c4445c 36%,#e9778a 54%,#8a2238 100%);
  --mt9:linear-gradient(160deg,#ffffff 0%,#e8dac8 36%,#fcf6ec 54%,#bfae98 100%);
}
.dg-1{color:var(--dg1)}.dg-2{color:var(--dg2)}.dg-3{color:var(--dg3)}.dg-4{color:var(--dg4)}.dg-5{color:var(--dg5)}
.dg-6{color:var(--dg6)}.dg-7{color:var(--dg7)}.dg-8{color:var(--dg8)}.dg-9{color:var(--dg9)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .dg{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0 .04em;margin:0 -.04em}
  .dg-1{background-image:var(--mt1)}.dg-2{background-image:var(--mt2)}.dg-3{background-image:var(--mt3)}
  .dg-4{background-image:var(--mt4)}.dg-5{background-image:var(--mt5)}.dg-6{background-image:var(--mt6)}
  .dg-7{background-image:var(--mt7)}.dg-8{background-image:var(--mt8)}.dg-9{background-image:var(--mt9)}
}