/* ------------------------------------------------------------------
   Aries Labs -- arieslabs.org -- landing page -- "Split Meridian"

   This is design direction d2, the operator's locked choice, carried
   into production FAITHFULLY. Its tokens, type scale, spacing, spine
   geometry, card hang and motion are d2's own. The only departures
   from the d2 prototype are the ones it could not ship with:

   1. every initial hidden state (.rv, the meridian, the mark halves,
      the facet planes, the jog) is scoped to html.js, so the page is
      fully visible with JavaScript off or with home.js failing;
   2. body no longer carries overflow-x:clip -- horizontal overflow is
      measured at 360/390/768/1024/1440 instead of hidden;
   3. the status pill keys off the closed-set label itself
      (data-status="Private era") rather than a slug;
   4. the phone jog is JS-positioned, so without JS it is not drawn;
      the rail still runs the full length of the page.

   The legal pages keep assets/css/site.css, unchanged. Unifying the
   two sheets is v2 work.
   Dark-only. Every colour is a measured token on :root.
   ------------------------------------------------------------------ */

/* Upgrade slot: self-hosted font. Leave commented until the files ship.
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}
*/

:root {
  color-scheme: dark;

  /* surfaces */
  --canvas: #1B1E25;
  --well: #15181F;
  --raised: #21252E;
  --hair: #2E333E;

  /* text */
  --t1: #F2F4F7;
  --t2: #A8B0BD;
  --t3: #7A8391;

  /* ember ramp, light to deep */
  --ember-1: #ED893E;
  --ember-2: #E8703C;
  --ember-3: #D84D3A;
  --ember-4: #C53E38;
  --ember-5: #A41A33;
  --ember-6: #712B2F;

  /* ice ramp, light to deep */
  --ice-1: #A2DDD7;
  --ice-2: #97D5D4;
  --ice-3: #7FBBC6;
  --ice-4: #629FB1;
  --ice-5: #5E91B0;
  --ice-6: #386C91;

  /* the side accent in force; sections override */
  --accent: var(--ice-1);
  --tick: var(--ice-3);

  /* type */
  --font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.375rem, 1.45rem + 3.7vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-eyebrow: 0.75rem;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --track-display: -0.03em;
  --track-h2: -0.025em;
  --track-h3: -0.015em;
  --track-eyebrow: 0.12em;

  /* spacing scale, 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* geometry of the spine */
  --gutter: 16px;
  --rail: 28px;        /* content offset from the rail at phone width */
  --rail-line: 3px;    /* rail line offset inside the content box at phone width */
  --seam-gap: 64px;    /* the seam column at desktop */
  --tick-w: 24px;      /* card edge to the rail line at phone width */
  --dot-off: 27px;

  --radius: 6px;
  --page-max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--t1);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ice-1); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute; left: var(--gutter); top: -100px;
  padding: var(--s2) var(--s3); background: var(--t1); color: var(--canvas);
  border-radius: var(--radius); font-weight: 600; z-index: 20;
}
.skip:focus { top: var(--s3); }

/* ---------- type ---------- */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s4);
}
h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--track-h2);
  text-wrap: balance;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-h3);
}
.lede { font-size: 1.1875rem; line-height: 1.5; color: var(--t2); max-width: 34rem; }
.prose { max-width: 34rem; color: var(--t2); }
.prose p + p { margin-top: var(--s4); }
.prose strong { color: var(--t1); font-weight: 600; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid var(--t3);
  color: var(--t1);
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--t1); color: var(--canvas); border-color: var(--t1); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); color: var(--canvas); }
.btn.sm { min-height: 36px; padding: 0 var(--s4); font-size: var(--fs-meta); }
.link {
  color: var(--t1);
  text-decoration: underline;
  text-decoration-color: var(--t3);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--hair); background: var(--canvas); }
.site-header .page {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: var(--s4);
}
.brand { display: inline-flex; align-items: center; }
.brand img { width: 74px; height: auto; }

/* ---------- the spine ---------- */
.doc { position: relative; }

/* hero band: facet | mark | facet, the seam through the middle */
.hero-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding-block: var(--s7) var(--s6);
  min-height: 300px;
}
@media (min-width: 768px) { .hero-top { padding-block: var(--s8) var(--s7); } }

.meridian-hero {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; margin-left: -0.5px;
  background: linear-gradient(to bottom, var(--ember-1), var(--ember-3));
  transform-origin: top center;
  z-index: 1;
}

.facet { position: relative; align-self: stretch; min-height: 220px; overflow: hidden; }
.facet svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.facet.warm {
  -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 94%);
          mask-image: linear-gradient(to right, #000 30%, transparent 94%);
}
.facet.cool {
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 94%);
          mask-image: linear-gradient(to left, #000 30%, transparent 94%);
}
.facet svg polygon { transition: opacity 1200ms var(--ease); }

.mark {
  position: relative; z-index: 2;
  width: clamp(200px, 56vw, 360px);
  aspect-ratio: 642 / 506;
}
.mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark-l { clip-path: inset(0 50% 0 0); }
.mark-r { clip-path: inset(0 0 0 50%); }

/* the jog: the seam moves from the mark's centre to the rail at phone width; vertical at desktop */
.jog { position: relative; height: 72px; }
.jog svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.jog line { stroke-width: 1; }
@media (min-width: 768px) { .jog { height: 40px; } }
/* Without JavaScript the phone jog cannot be positioned, so it is not drawn.
   The seam and the rail both still run; only the connecting diagonal is lost. */
@media (max-width: 767px) { html:not(.js) .jog svg { display: none; } }

.below { position: relative; }
.meridian-rest {
  position: absolute; top: 0; bottom: 0;
  left: var(--rail-line); width: 1px;
  background: linear-gradient(to bottom,
    var(--ember-4) 0%,
    var(--ember-5) 12%,
    var(--ice-6) 22%,
    var(--ice-5) 36%,
    var(--ice-3) 58%,
    var(--ice-1) 100%);
  transform-origin: top center;
}
@media (min-width: 768px) {
  .meridian-rest { left: 50%; margin-left: -0.5px; }
}

/* ---------- the split grid ---------- */
.split {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: 0;
  row-gap: var(--s6);
  align-items: start;
}
.split > * { grid-column: 2; min-width: 0; }
.split > .wide { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0, 1fr) var(--seam-gap) minmax(0, 1fr); }
  .split > .left { grid-column: 1; }
  .split > .right { grid-column: 3; }
}

/* a block hangs off the meridian with a tick and a dot */
.hang { position: relative; }
.hang::before {
  content: ""; position: absolute; top: 0.55em; height: 1px;
  left: calc(-1 * var(--tick-w)); width: var(--tick-w);
  background: var(--tick);
}
.hang::after {
  content: ""; position: absolute; top: calc(0.55em - 2px);
  left: calc(-1 * var(--dot-off)); width: 5px; height: 5px;
  border-radius: 50%; background: var(--tick);
}
@media (min-width: 768px) {
  .hang.left::before { left: auto; right: -32px; width: 32px; }
  .hang.left::after  { left: auto; right: -35px; }
  .hang.right::before { left: -32px; width: 32px; }
  .hang.right::after  { left: -35px; }
}

/* section heads face the seam from the left at desktop */
.head { padding-top: var(--s1); }
@media (min-width: 768px) {
  .head.left { text-align: right; }
  .head.left .prose, .head.left .lede { margin-left: auto; }
}

/* ---------- sections ---------- */
section { padding-block: var(--s8); }
@media (min-width: 1024px) { section { padding-block: var(--s9); } }
.hero-text { padding-top: var(--s4); }
@media (min-width: 768px) { .hero-text { padding-top: var(--s5); align-items: center; } }
.hero-text .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero-text h1 { max-width: 12ch; }
@media (min-width: 768px) { .hero-text .head.left h1 { margin-left: auto; } }

.warm { --accent: var(--ember-1); --tick: var(--ember-2); }
.cool { --accent: var(--ice-1); --tick: var(--ice-3); }

.facts { margin-top: var(--s6); border-top: 1px solid var(--hair); }
.facts li {
  display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--hair);
  font-size: var(--fs-small); color: var(--t2);
}
.facts li b { font-weight: 600; color: var(--t1); }
@media (min-width: 768px) { .facts li { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); } }
.pull {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 600; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--t1); max-width: 22ch;
  border-left: 2px solid var(--accent); padding-left: var(--s5);
  margin-top: var(--s5);
}

/* ---------- product grid ---------- */
.grid { margin-top: var(--s7); row-gap: var(--s6); }
@media (min-width: 768px) { .grid { row-gap: var(--s8); } .grid .card.right { margin-top: var(--s8); } }
.card {
  position: relative;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
@media (min-width: 768px) { .card { padding: var(--s6); } }
.card.hang::before { top: 36px; }
.card.hang::after { top: 34px; }
@media (min-width: 768px) { .card.hang::before { top: 44px; } .card.hang::after { top: 42px; } }
.card:hover { border-color: var(--t3); }
.card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.card .ord { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em; color: var(--t2); }
.card h3 { margin-top: var(--s1); }
.card .lines { display: flex; flex-direction: column; gap: var(--s3); color: var(--t2); font-size: var(--fs-small); }
.card .lines .row { color: var(--t1); font-weight: 600; }
.card .links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s2); }
.card .links .link { font-size: var(--fs-small); }

.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t2); white-space: nowrap;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--t1); }
.pill[data-status="Private era"] i { background: transparent; border: 1.5px solid var(--t1); }
.pill[data-status="Upcoming"] i { background: var(--t2); }
.pill[data-status="In development"] i { background: var(--t3); }

.card.teaser {
  background: var(--well);
  border-style: dashed;
}
.card.teaser h3 { color: var(--t2); font-weight: 500; }
.card.teaser .pill { color: var(--t3); }
.card.teaser:hover { border-color: var(--hair); }
.card.teaser::before, .card.teaser::after { opacity: 0.55; }

/* ---------- contact ---------- */
.contact-list { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.contact-list li { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
.contact-list .clabel { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2); }
.contact-list a { font-size: var(--fs-body); }

/* ---------- footer ---------- */
.site-footer { background: var(--well); border-top: 1px solid var(--hair); padding-block: var(--s7); margin-top: var(--s7); }
.site-footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); }
.site-footer .brand img { width: 62px; }
.site-footer nav { display: flex; gap: var(--s5); }
.site-footer .tagline { margin-top: var(--s5); color: var(--t1); font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.005em; }
.site-footer .legal { margin-top: var(--s3); color: var(--t2); font-size: var(--fs-meta); max-width: 60ch; }
.site-footer .legal p + p { margin-top: var(--s2); }

/* ---------- reveal on scroll ---------- */
.rv { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.rv.d1 { transition-delay: 80ms; }
.rv.d2 { transition-delay: 160ms; }
/* d2's card stagger (it set this inline from JS; here it is CSS, so the
   served markup and the JS rebuild stay identical) */
.grid .card.right { transition-delay: 80ms; }

/* ---------- the hero moment ---------- */
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes converge-l { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes converge-r { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw-dash { to { stroke-dashoffset: 0; } }

/* Initial hidden states. ALL of them are scoped to html.js: with JavaScript
   off, or with home.js failing (the head handshake then strips .js), none
   of these apply and the page renders complete and still. */
.js .rv { opacity: 0; transform: translateY(14px); }
.js .rv.in { opacity: 1; transform: none; }
.js .meridian-hero { transform: scaleY(0); }
.js .meridian-rest { transform: scaleY(0); }
.js .mark-l { transform: translateX(-28px); opacity: 0; }
.js .mark-r { transform: translateX(28px); opacity: 0; }
.js .facet svg polygon { opacity: 0; }
.js .jog line { stroke-dasharray: 1; stroke-dashoffset: 1; }

.ready .facet svg polygon { opacity: 1; }
.ready .meridian-hero { animation: draw-y 900ms var(--ease) 100ms forwards; }
.ready .mark-l { animation: converge-l 1000ms var(--ease) 600ms forwards; }
.ready .mark-r { animation: converge-r 1000ms var(--ease) 600ms forwards; }
.ready .jog line { animation: draw-dash 500ms linear 1000ms forwards; }
.ready .meridian-rest { animation: draw-y 1600ms var(--ease) 1400ms forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .meridian-hero, .js .meridian-rest,
  .ready .meridian-hero, .ready .meridian-rest { transform: none; animation: none !important; }
  .js .mark-l, .js .mark-r,
  .ready .mark-l, .ready .mark-r { transform: none; opacity: 1; animation: none !important; }
  .js .jog line, .ready .jog line { stroke-dashoffset: 0; animation: none !important; }
  .js .facet svg polygon { opacity: 1; transition: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn, .link, .card { transition: none; }
}