/* eidovelle.com
 *
 * The site is six static HTML files, this stylesheet, the generated tokens.css beside it, two
 * self-hosted fonts, and one script whose whole job is adding classes so things can settle in.
 * The product's argument is that it is more careful than its category, and the two claims this
 * site makes about itself, that nothing here flashes and that nothing here watches you, are both
 * claims a reader can verify by looking at what the page loads: no third-party request of any
 * kind, no tracking, and a script small enough to read in a minute that check-site.py scans for
 * network primitives on every deploy.
 *
 * COLOUR comes from tokens.css, which pin.py generates from design/system/tokens/tokens.json,
 * which is itself checked against ios/Eidovelle/UI/Theme.swift. The site and the app are the
 * same object rather than two things that resemble each other. The semantics from the app hold
 * here too: the dark is the field, brass is the instrument, teal is what you sail toward.
 * Nothing structural is teal and no world is brass. Every page links tokens.css BEFORE this
 * file; a --evl- variable used here without that link resolves to nothing and the page goes
 * wrong visibly, which is the correct failure.
 *
 * MOTION RULE, written here because this file is where the motion lives. A flicker company's
 * website must never flicker. That is a product rule, not a style preference. Nothing in this
 * stylesheet may oscillate, pulse, loop, alternate or repeat; every animated property moves
 * exactly once per element per page load, and luminance only ever rises, gently, out of the
 * dark. Nothing here may come anywhere near WCAG 2.2 Success Criterion 2.3.1 (three flashes in
 * any one second). The vocabulary is ARRIVAL: an element fades up and settles a few pixels into
 * place on the app's own settling curve (--evl-ease-settle, --evl-enter-duration), staggered by
 * --evl-enter-stagger when several arrive together. Under prefers-reduced-motion tokens.css
 * zeroes --evl-enter-rise, so every entrance becomes an opacity-only fade with no second rule
 * here, and the cross-document view transition below is inside a no-preference media block, so
 * page changes fall back to plain cuts. If a future change wants a repeating animation, the
 * answer is no, and this paragraph is the argument it has to defeat first.
 */
/* The one rule the whole layout stood on without declaring: content-box is the browser default,
   so every `width: 100%` plus padding summed WIDER than its parent, and on a phone the page's
   right edge hung 52px off screen, clipping copy mid glyph. Found by screenshot, not by linter:
   nothing errors, the page is simply wider than the world. */
*, *::before, *::after { box-sizing: border-box; }


/* The fonts are subset copies of the exact variable TTFs the app bundles. Rebuild with
 * web/tools/build-fonts.py. swap rather than block because the safety copy is the reason
 * somebody is on this page, and it should be readable in a local serif before it is beautiful. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Readings of the pinned tokens. The names on the left are this file's working vocabulary;
   * the values all come from tokens.css so a palette change lands here without an edit. */
  --void: var(--evl-void);
  --deep: var(--evl-deep);
  --panel: var(--evl-panel);
  --panel-hi: var(--evl-panel-hi);

  --brass: var(--evl-brass);
  --brass-hi: var(--evl-brass-hi);
  --brass-dim: var(--evl-brass-dim);
  --brass-deep: var(--evl-brass-deep);

  --teal: var(--evl-teal);
  --teal-hi: var(--evl-teal-hi);
  --teal-deep: var(--evl-teal-deep);

  /* Body text is the app's cream held slightly back from full, because a full-strength cream on
   * this black is a harder read at 17px on a phone than it is at 15pt on a device held at arm's
   * length. This is a deliberate web-only reading, not drift: there is no token for it, and the
   * full-strength cream (--evl-cream) is still what headings use. Contrast against --deep is
   * about 15:1 for --text and about 9:1 for --text-dim, both comfortably past WCAG AA at body
   * size. --brass-dim is a rule colour and is never used for text: at about 4.2:1 it would pass
   * only at large sizes and would then invite being reused at small ones. */
  --text: #e4dcca;
  --text-bright: var(--evl-cream);
  --text-dim: var(--evl-cream-dim);

  --display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

/* ---- Page changes ------------------------------------------------------- */

/* Cross-document view transitions: the old page settles into the new one instead of cutting,
 * with the masthead held as a shared element so the frame of the site stands still while the
 * page changes under it. Browsers without support ignore all of this silently and get the cut
 * they always got. The whole block sits inside no-preference so that a reduced-motion request
 * disables page transitions entirely rather than merely shortening them. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--evl-page-duration);
    animation-timing-function: var(--evl-ease-settle);
  }

  .site-head { view-transition-name: masthead; }
}

/* ---- Arrival ------------------------------------------------------------ */

/* The hidden-before-arrival state hangs off the "arrival" class that arrival.js puts on <html>
 * before first paint, so with scripts off, blocked, or unsupported nothing is ever hidden.
 * Elements move once, on the app's settling curve, and are never re-hidden: arrival.js
 * unobserves each element as it arrives, so nothing can retrigger. --arrive-i is set per
 * element by arrival.js among elements that cross into view together, so a row cascades by
 * --evl-enter-stagger while a lone element never inherits a queue it was not part of. */
.arrival main section,
.arrival [data-stagger] > * {
  opacity: 0;
  transform: translateY(var(--evl-enter-rise));
}

.arrival main section.arrived,
.arrival [data-stagger] > .arrived {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--evl-enter-duration) var(--evl-ease-settle),
    transform var(--evl-enter-duration) var(--evl-ease-settle);
  transition-delay: calc(var(--arrive-i, 0) * var(--evl-enter-stagger));
}

/* ---- Skip link ---------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--panel-hi);
  color: var(--text);
  padding: 0.6rem 1rem;
  border: 1px solid var(--brass);
}
.skip:focus { left: 0; }

/* ---- Layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Tables, the gallery and the limits grid need more room than a line of prose does. */
.wrap--wide { max-width: calc(52rem + var(--gutter) * 2); }

main { display: block; padding-top: 2.5rem; }

/* The vertical rhythm, decided once. Sections used to space themselves with a flat 2.75rem
   bottom margin while the landing bands each invented their own padding, which is where the
   founder's "gaps everywhere" came from: rhythm by accident. One clamped step now, breathing
   with the viewport, and the landing bands opt out only where art needs the room. */
main > section, main > .wrap > section { margin: 0; padding-block: clamp(56px, 9vw, 104px); }
main > section + section, main > .wrap > section + section { padding-top: clamp(40px, 6.5vw, 72px); }
section section { padding-block: 0; }

/* ---- Header ------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--brass-deep);
  background: var(--deep);
}
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:hover, .wordmark:focus-visible { color: var(--brass-hi); }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.site-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brass);
  text-decoration: none;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--brass-hi); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--text); }

/* ---- Type --------------------------------------------------------------- */

h1, h2, h3, h4 { color: var(--text-bright); font-weight: 300; margin: 0 0 0.6rem; }

h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6.5vw, 3.1rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.55rem, 4vw, 2.05rem);
  line-height: 1.2;
  margin-top: 2.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--brass-deep);
}

/* The first heading after a page intro should not carry a rule, because the rule under the site
 * header is already doing that job two inches above it. */
h2.flush { border-top: 0; padding-top: 0; margin-top: 2rem; }

h3 {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.4;
  margin-top: 2rem;
  color: var(--text-bright);
}

h4 {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.98rem;
  margin-top: 1.5rem;
  color: var(--text-dim);
}

p { margin: 0 0 1.1rem; }

/* The app's signature treatment: small, wide-tracked, upper case, struck into brass. It is what
 * makes a four-word label look stamped rather than typed. */
.struck {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.7rem;
}

.lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--text);
}

.dim { color: var(--text-dim); }

.small { font-size: 0.92rem; line-height: 1.6; color: var(--text-dim); }

strong, b { font-weight: 600; color: var(--text-bright); }

a {
  color: var(--brass);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--brass-hi); }

:focus-visible {
  outline: 2px solid var(--brass-hi);
  outline-offset: 2px;
}

ul, ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.55rem; }
li::marker { color: var(--brass-dim); }

hr {
  border: 0;
  border-top: 1px solid var(--brass-deep);
  margin: 2.5rem 0;
}

/* ---- The front page: hero ----------------------------------------------- */

/* The site opens the way the product does: dark water, one lantern, and a descent. The art is
 * real key art from the app's own asset catalogue, fading into the void the page is made of, so
 * the hero has no bottom edge. All text sits below the art rather than on top of it, because
 * copy over a starfield fails contrast somewhere on some screen, always. */
.hero {
  position: relative;
  text-align: center;
  padding-top: 0;
}

.hero-art { position: relative; }
.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: cover;
  object-position: center 35%;
}
/* The fade to void is a gradient laid over the image bottom, not an animation. */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 5, 12, 0.25) 0%, rgba(4, 5, 12, 0) 30%, rgba(4, 5, 12, 0) 55%, var(--void) 96%);
}

.hero-inner { position: relative; margin-top: -3.5rem; }

.medallion {
  display: block;
  width: clamp(4.5rem, 12vw, 6rem);
  height: auto;
  margin: 0 auto 1.4rem;
}

.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { max-width: 38rem; margin-left: auto; margin-right: auto; }
.hero .small { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* The descend cue: the scroll goes down because descent is the product's own vocabulary. A
 * static hairline and a diamond, pointing the way. It does not bounce. Nothing on this site
 * bounces. */
.descend {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.2rem;
  color: var(--brass);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.descend:hover, .descend:focus-visible { color: var(--brass-hi); }
.descend svg { display: block; }

/* ---- The instrument: hairline figures ----------------------------------- */

/* Diagrams are inline SVG in the brand's hairline style, drawn from the same palette as
 * everything else, never stock illustration. They are marked up as images with a title so a
 * screen reader gets the one sentence the figure is arguing. */
.figure {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.4rem 0 0.9rem;
}
.figcap {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 1.6rem;
}

/* ---- The atlas: portals ------------------------------------------------- */

.gallery {
  list-style: none;
  padding-left: 0;
  margin: 1.8rem 0 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 2.2rem 1.6rem;
}

.gallery li { margin-bottom: 0; text-align: center; }

/* The circular portal, the product's universal motif: a ring containing something. Art plates
 * get the double brass ring around the image; worlds whose plate is not painted yet are dark
 * portals with a single point of light a long way down, presented as depth rather than
 * absence. The glow is a static radial gradient. It does not breathe on the web, because the
 * page cannot know who is looking at it. */
.portal {
  display: block;
  width: min(10.5rem, 70vw);
  aspect-ratio: 1;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  border: 1px solid var(--brass);
  box-shadow:
    0 0 0 4px var(--void),
    0 0 0 5px var(--brass-deep);
  overflow: hidden;
  position: relative;
  background: var(--panel);
}
.portal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portal--dark {
  background:
    radial-gradient(circle at 50% 58%, rgba(27, 94, 86, 0.55) 0%, rgba(27, 94, 86, 0.18) 34%, rgba(13, 17, 32, 0) 62%),
    radial-gradient(circle at 50% 50%, var(--panel) 0%, var(--deep) 70%, var(--void) 100%);
}
.portal--dark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--teal);
}

.w-name {
  display: block;
  font-family: var(--display);
  font-size: 1.28rem;
  line-height: 1.25;
  color: var(--teal-hi);
}
.w-cat {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0.25rem 0 0.35rem;
}
.w-sub {
  display: block;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.5;
}
.w-free {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-bright);
  border: 1px solid var(--brass-dim);
  padding: 0.15rem 0.55rem;
  margin-top: 0.55rem;
}

/* ---- Panels ------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--brass-deep);
  padding: 1.35rem var(--gutter);
  margin: 0 0 1.6rem;
}
.panel > :last-child { margin-bottom: 0; }
.panel h2, .panel h3 { margin-top: 0; border-top: 0; padding-top: 0; }

/* The one thing on the site that has to be findable by somebody who is not reading. */
.stop {
  background: var(--panel-hi);
  border: 1px solid var(--brass);
  border-left-width: 3px;
  padding: 1.35rem var(--gutter);
  margin: 0 0 1.6rem;
}
.stop > :last-child { margin-bottom: 0; }

/* The abort instruction. A closed string: "Cover one eye with your palm. Turn the phone face
 * down." is one recording in the app, played three times, never paraphrased, and the web copy
 * uses the same words. It gets its own class rather than living under .stop, because on the
 * support page it appears outside a panel and must look identical in both places. */
.instruction {
  font-family: var(--display);
  font-size: clamp(1.35rem, 4.4vw, 1.8rem);
  line-height: 1.25;
  color: var(--text-bright);
  margin-bottom: 0.8rem;
}

.note {
  border-left: 2px solid var(--brass-dim);
  padding: 0.1rem 0 0.1rem 1.1rem;
  margin: 0 0 1.6rem;
}
.note > :last-child { margin-bottom: 0; }

/* ---- Contact addresses -------------------------------------------------- */

.address {
  display: inline-block;
  font-size: 1.12rem;
  font-weight: 600;
  word-break: break-word;
}

.address--safety {
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  color: var(--brass-hi);
}

/* ---- Checklist ---------------------------------------------------------- */

/* Drawn boxes rather than real checkboxes. A checkbox with no script behind it is a control that
 * appears to record something and records nothing, sitting next to a paragraph that says ticking
 * a box is not the screening. The one script this site does carry changes nothing about that:
 * it does not record anything either. */
.checklist { list-style: none; padding-left: 0; }
.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--brass);
}

/* ---- Tables ------------------------------------------------------------- */

.scroller {
  overflow-x: auto;
  margin: 0 0 1.6rem;
  border: 1px solid var(--brass-deep);
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.94rem;
  line-height: 1.55;
}
caption {
  text-align: left;
  padding: 0.9rem 1rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--brass-deep);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(92, 75, 44, 0.55);
}
thead th {
  color: var(--brass);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--panel);
}
tbody tr:last-child td { border-bottom: 0; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The envelope figures on the front page are a narrower table than the limits grid and may
 * shrink with the column rather than forcing a scroll on a phone. */
.envelope-table { min-width: 0; }

/* ---- Contents ----------------------------------------------------------- */

.contents { list-style: none; padding-left: 0; columns: 2; column-gap: 2rem; }
.contents li { margin-bottom: 0.4rem; break-inside: avoid; font-size: 0.95rem; }
@media (max-width: 34rem) { .contents { columns: 1; } }

/* ---- Footer ------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--brass-deep);
  background: var(--deep);
  margin-top: 4rem;
  padding: 2.5rem 0 3.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-dim);
}
.site-foot .wrap > * { margin-bottom: 1.1rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding-left: 0; list-style: none; }
.foot-nav li { margin-bottom: 0; }
.foot-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
}
.foot-nav a:hover, .foot-nav a:focus-visible { text-decoration: underline; }
.site-foot .rule { border: 0; border-top: 1px solid var(--brass-deep); margin: 0 0 1.4rem; }

/* ---- Print -------------------------------------------------------------- */

/* Somebody is going to print the safety page and take it to a doctor. That is a good use of it
 * and it should not come out as white on black, and nothing may be missing from it because an
 * observer never fired: the arrival states are forced fully visible here. */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .arrival main section,
  .arrival [data-stagger] > * { opacity: 1; transform: none; }
  .site-head, .site-nav, .foot-nav, .skip, .descend { display: none; }
  a { color: #000; }
  a[href^="/"]::after { content: " (eidovelle.com" attr(href) ")"; font-size: 9pt; }
  .panel, .stop, .scroller { border: 1px solid #666; background: #fff; }
  h1, h2, h3, h4, .struck, .address, .address--safety, .w-name { color: #000; }
  h2 { border-top: 1px solid #666; }
  .dim, .small, .site-foot, .w-sub { color: #333; }
}

/* ---- Hairline SVG vocabulary --------------------------------------------- */

/* The inline diagrams and the medallion draw with these, so every figure takes its colour from
 * the same pinned tokens as the rest of the page and recolours itself if the pin ever moves.
 * Everything is a hairline: the brand draws instruments, not illustrations. */
.sv-brass { stroke: var(--brass); fill: none; stroke-width: 1; }
.sv-brass-dim { stroke: var(--brass-dim); fill: none; stroke-width: 1; }
.sv-brass-deep { stroke: var(--brass-deep); fill: none; stroke-width: 1; }
.sv-teal { stroke: var(--teal); fill: none; stroke-width: 1; }
.sv-cream { stroke: var(--text); fill: none; stroke-width: 1.25; }
.sv-cream-dim { stroke: var(--text-dim); fill: none; stroke-width: 1; }
.sv-fill-teal { fill: var(--teal-hi); stroke: none; }
.sv-fill-panel { fill: var(--panel); stroke: none; }
/* The stop-zone tint is --evl-teal-deep (#1B5E56) at low opacity, spelt out because rgba()
 * cannot take a hex variable. If teal-deep ever moves in the pin, move this with it. */
.sv-stopzone { fill: rgba(27, 94, 86, 0.3); stroke: none; }
.sv-label { fill: var(--text-dim); font-family: var(--ui); font-size: 13px; }
.sv-struck {
  fill: var(--brass);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ==================================================================== landing
   The layer the first pass lacked, named for what the founder saw looking at it
   live: gaps everywhere, nothing overlapping. Flat stacking reads as basic
   because nothing shares an edge; this layer makes elements genuinely occupy
   each other's space. Depth does the work that lesser pages ask of animation,
   which matters here more than anywhere: nothing on this site may ever loop,
   oscillate or flicker, so layering is the whole motion budget at rest. */

.site-head--float {
  position: absolute; inset: 0 0 auto 0; z-index: 6;
  background: linear-gradient(to bottom, rgba(4,5,12,.82), rgba(4,5,12,0));
  border-bottom: none;
}

.hero-land {
  padding-block: 0 !important;
  position: relative; overflow: visible;
  /* Clamped, not bare vh. Bare 92vh sized the door to whatever screen looked at it: on a
     tall display the hero ballooned past four thousand pixels and everything below it sank
     into a void. A door should be a door, not the whole building. */
  min-height: clamp(560px, 92vh, 880px);
  display: flex; align-items: center;
  isolation: isolate;
}
.hero-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Three scrims in one: legibility under the type, the void taking over at the
     foot so the next band rises OUT of the art rather than being parked under
     it, and a brass breath top-left so the plate reads lit rather than pasted. */
  background:
    radial-gradient(ellipse 95% 80% at 26% 42%, rgba(4,5,12,.88), rgba(4,5,12,.42) 62%, transparent),
    linear-gradient(to bottom, rgba(4,5,12,.55), rgba(4,5,12,.08) 35%, rgba(4,5,12,.92) 86%, var(--evl-void)),
    radial-gradient(ellipse 40% 30% at 12% 8%, rgba(201,169,97,.10), transparent 70%);
}
.hero-inner {
  position: relative; z-index: 2; max-width: 620px;
  /* Longhand on purpose. The shorthand `padding: 148px 0 200px` zeroed the horizontal gutters
     .wrap provides, and on a phone the hero copy ran off both raw edges of the screen. A wrapper
     whose whole job is the gutter must never have its sides touched by a child. */
  padding-top: clamp(120px, 16vh, 156px);
  padding-bottom: clamp(96px, 18vh, 200px);
}
.hero-mark { display: block; margin-bottom: 26px; filter: drop-shadow(0 6px 30px rgba(63,191,176,.25)); }
.hero-land h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(42px, 6.2vw, 72px); line-height: 1.02; letter-spacing: .002em;
  color: var(--evl-cream); margin: 0 0 18px; text-wrap: balance;
}
.hero-sub { font-size: 18px; line-height: 1.6; color: var(--evl-cream); max-width: 54ch; margin: 0 0 28px;
  text-shadow: 0 1px 3px rgba(4,5,12,.9), 0 2px 18px rgba(4,5,12,.7); }
.hero-land h1 { text-shadow: 0 2px 6px rgba(4,5,12,.85), 0 6px 40px rgba(4,5,12,.6); }
.hero-fine { text-shadow: 0 1px 3px rgba(4,5,12,.9); }
.hero-fine { font-size: 13px; color: var(--evl-cream-dim); opacity: .85; margin-top: 14px; max-width: 52ch; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 3px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform var(--evl-motion-touch) var(--evl-ease-settle),
              box-shadow var(--evl-motion-touch) var(--evl-ease-settle);
}
.btn--brass {
  color: var(--evl-void);
  background: linear-gradient(to bottom, var(--evl-brass-hi), var(--evl-brass) 55%, var(--evl-brass-dim));
  border: 1px solid var(--evl-brass-deep);
  box-shadow: 0 2px 18px rgba(201,169,97,.28);
}
.btn--brass:hover { transform: translateY(-1px); box-shadow: 0 4px 26px rgba(201,169,97,.4); }
.btn--ghost {
  color: var(--evl-cream); border: 1px solid var(--evl-brass-dim);
  background: rgba(4,5,12,.35);
}
.btn--ghost:hover { border-color: var(--evl-brass); }

/* The phone is the overlap thesis: it stands on the hero and PLANTS ITS FEET in
   the band below, which is what stitches the two sections into one composition. */
.hero-phone {
  position: absolute; z-index: 4;
  right: clamp(16px, 9vw, 150px); bottom: -120px;
  margin: 0; width: clamp(210px, 22vw, 300px);
  border-radius: 34px; padding: 10px;
  background: linear-gradient(145deg, #23283a, #0b0e1a 60%);
  border: 1px solid var(--evl-panel-hi);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 4px 30px rgba(63,191,176,.12);
}
.hero-phone img { display: block; width: 100%; height: auto; border-radius: 25px; }

.pull-up { margin-top: -76px; position: relative; z-index: 3; }
.trio { padding-block: 0 !important; padding-bottom: clamp(28px, 4vw, 48px) !important; }
.trio-cards { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0; margin: 0; }
.trio-cards li {
  background: linear-gradient(to bottom, var(--evl-panel-hi), var(--evl-panel));
  border: 1px solid var(--evl-brass-deep); border-radius: 6px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.trio-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--evl-brass); margin-bottom: 10px;
}
.trio-cards p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--evl-cream-dim); }
@media (max-width: 900px) {
  .trio-cards { grid-template-columns: 1fr; }
  .hero-phone { position: static; margin: 34px auto 0; display: block; width: min(280px, 76vw); }
  .hero-land { min-height: 0; display: block; }
  .hero-inner { padding-top: 118px; padding-bottom: 44px; }
  .hero-mark { width: 76px; height: 76px; margin-bottom: 18px; }
  .hero-sub { font-size: 16px; }
  .pull-up { margin-top: 24px; }
}

.band-art { position: relative; isolation: isolate; padding-block: clamp(72px, 10vw, 120px) !important; overflow: hidden; }
.band-art-bg { position: absolute; inset: 0; z-index: -2; }
.band-art-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.band-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, var(--evl-void), rgba(4,5,12,.45) 30%, rgba(4,5,12,.55) 70%, var(--evl-void));
}
.band-art-inner { max-width: 640px; }
.band-art-note { color: var(--evl-cream-dim); font-size: 15px; }

.founding { position: relative; }
.founding::before {
  content: ""; position: absolute; inset: 12% 0 12% 0; z-index: -1;
  background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(201,169,97,.07), transparent 70%);
}
.founding-inner { text-align: center; max-width: 640px; }
.founding-inner .lede, .founding-inner .hero-fine { margin-left: auto; margin-right: auto; }
.founding .cta-row { justify-content: center; }
.founding-price { margin: 8px 0 18px; }
.price-big {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(56px, 9vw, 96px); line-height: 1; color: var(--evl-brass-hi);
  text-shadow: 0 0 60px rgba(201,169,97,.25);
  font-feature-settings: "tnum";
}
.price-later { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .06em; color: var(--evl-cream-dim); }

.before-strip { border-top: 1px solid var(--evl-brass-deep); background: var(--evl-deep); padding-block: 26px !important; }
.before-strip p { margin: 0; font-size: 14px; color: var(--evl-cream-dim); max-width: none; }