/* =========================================================================
 * maegenonline.com — the page.
 *
 * The entry screen is the Rise Online shape Azamet pointed at: full viewport,
 * cinematic, the strip along the bottom. Everything below it is composed from
 * the patterns that recur across good game sites — a full-bleed world moment,
 * a picker that swaps a large panel, a short systems band, a close — and is
 * not a clone of any one of them.
 *
 * Every colour, size, duration and easing comes from /shared/tokens.css. If a
 * hex appears below it is an alpha of a token that CSS cannot express any
 * other way (rgba of a measured steel or night), and it says so.
 * ====================================================================== */

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 8px) }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{ background:var(--bg); overflow-x:hidden }


/* ---------------------------------------------------------------- topbar --
 * Fixed, and carries its own top scrim so it stays legible over the video,
 * over the key art, and over the night ground alike. */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center; gap:var(--space-6);
  padding:0 var(--page-pad);
  background:linear-gradient(180deg,
    rgba(8,11,19,.86) 0%,        /* --night at 86% */
    rgba(8,11,19,.52) 58%,
    rgba(8,11,19,0)  100%);
}
.topbar__home{
  display:inline-flex; align-items:center; gap:var(--space-3);
  text-decoration:none; color:var(--ink-strong);
}
.topbar__emblem{
  width:20px; height:20px; flex:0 0 20px;
  background:currentColor;
  -webkit-mask:url(/assets/logo-emblem-mono.svg) center/contain no-repeat;
          mask:url(/assets/logo-emblem-mono.svg) center/contain no-repeat;
}
.topbar__word{
  font-family:var(--font-ui); font-weight:500;
  font-size:var(--step-micro); letter-spacing:var(--ls-micro);
  text-transform:uppercase; white-space:nowrap;
}
.topbar__nav{ margin-left:auto; display:flex; gap:var(--space-6) }
.topbar__nav a,
.topbar__studio{
  font-family:var(--font-ui); font-weight:500;
  font-size:var(--step-label); letter-spacing:.10em;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink-quiet);
  transition:color var(--dur-base) var(--ease-standard);
}
.topbar__nav a:hover, .topbar__studio:hover{ color:var(--ink-strong) }
.topbar__studio{
  padding-left:var(--space-6);
  border-left:1px solid var(--rule-hair);
  color:var(--accent);
}
@media (max-width: 900px){
  .topbar__nav{ display:none }
  .topbar__studio{ margin-left:auto; border-left:0; padding-left:0 }
}


/* ============================== I. THE ENTRY SCREEN ==================== */

.entry{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:grid;
  /* `minmax(0,1fr)`, NOT `1fr`. A grid track's default minimum is `auto`,
     which means "as wide as the content wants" - and one of the children is
     the strip, whose list becomes a horizontal scroller on narrow screens.
     With a bare `1fr` the track grew to the scroller's full 1555 px instead
     of letting it scroll, and everything centred in the row - the wordmark,
     the line, both buttons - was carried off the right-hand side of a phone.
     Measured at a 485 px viewport before this line existed: .entry__body was
     1555 px wide and the wordmark sat at x=642. */
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:1fr auto auto;
  overflow:hidden;
}

.entry__media{ position:absolute; inset:0; z-index:0; background:var(--night) }
.entry__still,
.entry__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 46%;
}
/* The video fades up only once a frame has been drawn, so a refused autoplay
   or a slow first byte is invisible rather than a black flash. */
.entry__video{ opacity:0; transition:opacity 800ms var(--ease-out) }
.entry__media.is-playing .entry__video{ opacity:1 }

/* Two scrims. The linear one buys legibility at the top and bottom edges and
   hands the section off to the night ground below it; the radial one darkens
   the corners so the centred wordmark sits in the brightest part of the
   frame rather than fighting it. */
.entry__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(118% 78% at 50% 44%,
      rgba(8,11,19,0) 26%, rgba(8,11,19,.30) 64%, rgba(8,11,19,.72) 100%),
    linear-gradient(180deg,
      rgba(8,11,19,.72) 0%, rgba(8,11,19,.24) 20%, rgba(8,11,19,.16) 42%,
      rgba(8,11,19,.58) 72%, rgba(8,11,19,.94) 92%, var(--night) 100%);
}

.entry__body{
  position:relative; z-index:2; align-self:center;
  padding:calc(var(--header-h) + var(--space-8)) var(--page-pad) var(--space-6);
  text-align:center;
  display:grid; justify-items:center; gap:var(--space-6);
}

.entry__wordmark{ margin:0; line-height:0 }
.entry__wordmark img{
  width:clamp(272px, 46vw, 660px); height:auto; display:block;
  /* The wordmark is cut from the painting and carries its own light; the
     drop shadow only seats it against a moving background. */
  filter:drop-shadow(0 2px 28px rgba(8,11,19,.72))
         drop-shadow(0 0 60px rgba(76,177,237,.22));  /* --rune-core at 22% */
}

.entry__line{
  margin:0; max-width:52ch;
  font-family:var(--font-body);
  font-size:clamp(1.0625rem, .96rem + .42vw, 1.375rem);
  line-height:1.5; letter-spacing:-.008em;
  color:var(--ink-heading);
  text-wrap:balance;
  text-shadow:0 1px 20px rgba(8,11,19,.85);
}

.entry__actions{
  margin:var(--space-2) 0 0;
  display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center;
}

/* -------------------------------------------------------------- buttons */
.btn--primary,
.btn--ghost{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--space-7);
  font-family:var(--font-ui); font-weight:600;
  font-size:var(--step-label); letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--radius-1);
  transition:background var(--dur-base) var(--ease-standard),
             color      var(--dur-base) var(--ease-standard),
             border     var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard);
}
.btn--primary{
  background:var(--steel-bright); color:var(--night);
  border:1px solid var(--steel-bright);
  box-shadow:0 1px 24px rgba(8,11,19,.5);
}
.btn--primary:hover{
  background:var(--rune); border-color:var(--rune);
  box-shadow:0 1px 34px rgba(107,220,250,.36);   /* --rune at 36% */
}
.btn--ghost{
  background:rgba(8,11,19,.42);                   /* --night at 42% */
  color:var(--ink-strong);
  border:1px solid var(--rule-frame);
}
.btn--ghost:hover{ background:rgba(8,11,19,.72); border-color:var(--accent); color:var(--accent) }

/* ------------------------------------------------------------ scroll hint */
.entry__hint{
  position:relative; z-index:2;
  justify-self:center; margin-bottom:var(--space-5);
  display:inline-grid; justify-items:center; gap:var(--space-2);
  text-decoration:none; color:var(--ink-quiet);
  transition:color var(--dur-base) var(--ease-standard);
}
.entry__hint:hover{ color:var(--ink-strong) }
.entry__hint-word{
  font-family:var(--font-ui); font-weight:500;
  font-size:var(--step-micro); letter-spacing:var(--ls-micro);
  text-transform:uppercase;
}
.entry__hint-mark{
  width:11px; height:11px; border:solid currentColor; border-width:0 1px 1px 0;
  transform:rotate(45deg); animation:hint-fall 2.4s var(--ease-standard) infinite;
}
@keyframes hint-fall{
  0%,68%,100%{ transform:rotate(45deg) translate(0,0); opacity:.55 }
  34%        { transform:rotate(45deg) translate(3px,3px); opacity:1 }
}
@media (prefers-reduced-motion: reduce){ .entry__hint-mark{ animation:none } }
[data-motion="off"] .entry__hint-mark{ animation:none }

/* ------------------------------------------------- the bottom status strip */
.strip{
  position:relative; z-index:2;
  min-width:0;                    /* see the note on .entry's columns */
  border-top:1px solid var(--rule-hair);
  background:linear-gradient(180deg, rgba(8,11,19,.46), rgba(8,11,19,.88));
}
.strip__head{
  margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-4);
  padding:var(--space-4) var(--page-pad) var(--space-3);
}
.strip__label{
  font-family:var(--font-ui); font-weight:600;
  font-size:var(--step-micro); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--accent);
}
.strip__label::before{
  content:""; display:inline-block; vertical-align:middle;
  width:6px; height:6px; margin-right:9px; margin-top:-2px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px rgba(107,220,250,.16);   /* --rune at 16% */
}
.strip__note{
  font-family:var(--font-ui); font-size:var(--step-caption);
  color:var(--ink-quiet);
}

.strip__list{
  list-style:none; margin:0;
  padding:0 var(--page-pad) var(--space-5);
  display:grid; grid-template-columns:repeat(5, 1fr);
}
.strip__item{
  display:grid; align-content:start; gap:6px;
  padding:0 var(--space-5);
  border-left:1px solid var(--rule-hair);
}
.strip__item:first-child{ border-left:0; padding-left:0 }
.strip__num{
  font-family:var(--font-ui); font-weight:500;
  font-size:var(--step-micro); letter-spacing:var(--ls-micro);
  color:var(--steel-deep);
}
.strip__title{
  font-family:var(--font-ui); font-weight:600;
  font-size:.9375rem; letter-spacing:-.004em; color:var(--ink-strong);
}
.strip__body{
  font-family:var(--font-ui); font-size:var(--step-caption);
  line-height:var(--lh-caption); color:var(--ink-quiet);
}

/* Below 1180 the five columns stop being readable, so the strip becomes what
   it already is on a phone: a real, native, horizontally scrolled shelf. */
@media (max-width: 1180px){
  .strip__list{
    display:flex; gap:0; min-width:0;
    /* The page inset moves ONTO the items below. Left padding on a scroll
       container is not a reliable gutter: the container can sit at a
       non-zero scrollLeft (measured at 21 px, exactly cancelling it) and the
       first card ends up flush against the edge of the phone. */
    padding-left:0; padding-right:0;
    overflow-x:auto; scroll-snap-type:x proximity;
    scroll-padding-left:var(--page-pad);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .strip__item{
    flex:0 0 clamp(220px, 62vw, 300px);
    scroll-snap-align:start;
  }
  .strip__item:first-child{ padding-left:var(--page-pad) }
  .strip__item:last-child{
    flex-basis:calc(clamp(220px, 62vw, 300px) + var(--page-pad));
    padding-right:var(--page-pad);
  }
}
@media (max-width: 560px){
  .strip__head{ gap:var(--space-2) }
  .strip__note{ font-size:var(--step-micro) }
}

/* A short viewport cannot carry a scroll hint AND a five-item strip. The
   strip is content; the hint is a nicety, so the hint goes. */
@media (max-height: 700px){
  .entry__hint{ display:none }
  .entry__body{ gap:var(--space-5) }
}


/* ============================== II. THE WORLD ========================== */

.world{ position:relative; background:var(--bg) }
.world__art{
  position:relative;
  height:clamp(380px, 52vw, 720px);
  overflow:hidden;
}
.world__art img{
  width:100%; height:100%; object-fit:cover; object-position:62% 26%;
  display:block;
}
/* Scrim from the left and the foot, so the panel has a ground and the section
   hands off to the night below it. */
.world__art::after{
  content:""; position:absolute; inset:0;
  background:
    /* The painting has its own wordmark cut into the middle of it, and the
       panel's prose was landing on the letters. The left column has to be
       genuinely dark, not merely tinted, out past where the prose ends. */
    linear-gradient(90deg,
      rgba(8,11,19,.96) 0%, rgba(8,11,19,.94) 38%, rgba(8,11,19,.88) 48%,
      rgba(8,11,19,.42) 62%, rgba(8,11,19,.10) 76%, rgba(8,11,19,0) 88%),
    linear-gradient(180deg,
      rgba(8,11,19,.62) 0%, rgba(8,11,19,0) 26%,
      rgba(8,11,19,.34) 74%, var(--night) 100%);
}
.world__panel{
  position:absolute; z-index:2; left:0; bottom:0;
  width:min(100%, 660px);
  padding:0 var(--page-pad) clamp(var(--space-7), 5vw, var(--space-8));
}
.world__panel h2{ margin:var(--space-3) 0 var(--space-5) }
.world__panel .prose{ margin:0; color:var(--ink) }

@media (max-width: 820px){
  .world__art{ height:clamp(340px, 74vw, 520px) }
  .world__art::after{
    background:
      linear-gradient(180deg,
        rgba(8,11,19,.58) 0%, rgba(8,11,19,.06) 24%,
        rgba(8,11,19,.72) 62%, var(--night) 100%);
  }
  .world__panel{ position:static; width:auto; padding:var(--space-7) var(--page-pad) 0 }
}


/* ============================== III. THE SYSTEMS ======================= */

.systems{
  padding:clamp(72px, 9vw, var(--chapter)) 0 clamp(72px, 9vw, 128px);
  background:var(--bg-raised);
  border-top:1px solid var(--rule-hair);
}
.systems__head{ max-width:56ch; margin-bottom:clamp(var(--space-8), 6vw, 88px) }
.systems__head h2{ margin:var(--space-3) 0 var(--space-5) }
.systems__head .prose{ margin:0 }

.picker{ position:relative }

/* Visually hidden, NOT display:none — the radio group has to stay focusable
   and stay a radio group for the keyboard and for assistive technology. */
.picker__radio{
  position:absolute; width:1px; height:1px;
  margin:0; padding:0; border:0; opacity:0; pointer-events:none;
}

.picker__tabs{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--rule-hair);
  margin-bottom:clamp(var(--space-7), 4vw, var(--space-8));
}
.picker__tab{
  cursor:pointer; user-select:none;
  padding:var(--space-4) var(--space-6) var(--space-4) 0;
  margin-right:var(--space-6);
  font-family:var(--font-ui); font-weight:600;
  font-size:var(--step-label); letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-quiet);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard);
}
.picker__tab:hover{ color:var(--ink-strong) }
.picker__tab-n{ color:var(--steel-deep); margin-right:var(--space-2) }

#sys-1:checked ~ .picker__tabs [for="sys-1"],
#sys-2:checked ~ .picker__tabs [for="sys-2"],
#sys-3:checked ~ .picker__tabs [for="sys-3"],
#sys-4:checked ~ .picker__tabs [for="sys-4"]{
  color:var(--ink-strong); border-bottom-color:var(--accent);
}
#sys-1:checked ~ .picker__tabs [for="sys-1"] .picker__tab-n,
#sys-2:checked ~ .picker__tabs [for="sys-2"] .picker__tab-n,
#sys-3:checked ~ .picker__tabs [for="sys-3"] .picker__tab-n,
#sys-4:checked ~ .picker__tabs [for="sys-4"] .picker__tab-n{ color:var(--accent) }

/* The focus ring belongs on the label, because the input it belongs to is a
   pixel wide and off in a corner. */
#sys-1:focus-visible ~ .picker__tabs [for="sys-1"],
#sys-2:focus-visible ~ .picker__tabs [for="sys-2"],
#sys-3:focus-visible ~ .picker__tabs [for="sys-3"],
#sys-4:focus-visible ~ .picker__tabs [for="sys-4"]{
  outline:2px solid var(--focus-ring); outline-offset:3px; color:var(--ink-strong);
}

.sys{ display:none }
#sys-1:checked ~ .picker__stage .sys--1,
#sys-2:checked ~ .picker__stage .sys--2,
#sys-3:checked ~ .picker__stage .sys--3,
#sys-4:checked ~ .picker__stage .sys--4{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(var(--space-7), 5vw, 72px);
  align-items:center;
}

.sys__plate{
  position:relative;
  aspect-ratio:4 / 3;
  display:grid; place-items:center;
  padding:clamp(var(--space-6), 4vw, var(--space-8));
  border:1px solid var(--rule-hair);
  background:
    radial-gradient(84% 68% at 50% 46%,
      rgba(38,54,76,.42) 0%, rgba(8,11,19,0) 72%),   /* --fog-deep at 42% */
    linear-gradient(180deg, rgba(14,18,29,.9), rgba(8,11,19,.9));
}
/* The pool of rune light on the plate floor, the same move the plates on the
   old page used — it is the one thing that made them read as lit objects. */
.sys__plate::after{
  content:""; position:absolute; left:18%; right:18%; bottom:8%; height:1px;
  background:linear-gradient(90deg,
    rgba(107,220,250,0), rgba(107,220,250,.55), rgba(107,220,250,0));
}

.sys__text h3{ margin:0 0 var(--space-5) }
.sys__text .prose{ margin:0 0 var(--space-5); max-width:46ch }
.sys__text .caption{ margin:0; color:var(--ink-quiet) }

@media (max-width: 900px){
  #sys-1:checked ~ .picker__stage .sys--1,
  #sys-2:checked ~ .picker__stage .sys--2,
  #sys-3:checked ~ .picker__stage .sys--3,
  #sys-4:checked ~ .picker__stage .sys--4{ grid-template-columns:1fr }
  .sys__plate{ aspect-ratio:16 / 10 }
  .picker__tab{
    padding:var(--space-3) var(--space-4) var(--space-3) 0;
    margin-right:var(--space-4); font-size:var(--step-micro);
  }
}

/* ------------------------------------------------------------- the figures */
/* The defaults go on the ROOT and are inherited, NOT on `.fig-svg g` — a
   descendant selector like that is (0,1,1) and beats the (0,1,0) of the
   `.fig-line` / `.fig-lit` classes on the groups themselves, so every figure
   rendered as an empty box. Inheritance loses to any class rule, which is
   exactly what is wanted here. */
.fig-svg{
  display:block; width:100%; height:auto; max-width:420px;
  fill:none; stroke:none;
}
.fig-svg *{ vector-effect:non-scaling-stroke }
.fig-line{ stroke:var(--steel-deep); stroke-width:1.25 }
.fig-dim{ stroke:var(--rule-hair); stroke-width:1 }
.fig-solid{ fill:var(--steel-dim) }
.fig-lit{ fill:var(--accent) }
.fig-lit-stroke{ stroke:var(--accent); stroke-width:1.5 }


/* ============================== IV. THE TECHNOLOGY ===================== */

.tech{
  padding:clamp(72px, 9vw, var(--chapter)) 0;
  background:var(--bg);
  border-top:1px solid var(--rule-hair);
}
.tech__grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(var(--space-7), 6vw, 96px); align-items:start;
}
.tech__text h2{ margin:var(--space-3) 0 var(--space-5) }
.tech__text .prose{ margin:0 }

.rules{ margin:0; border-top:1px solid var(--rule-frame) }
.rules__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-5);
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--rule-hair);
}
.rules dt{
  font-family:var(--font-ui); font-weight:500;
  font-size:var(--step-micro); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--ink-quiet);
}
.rules dd{
  margin:0; text-align:right;
  font-family:var(--font-ui); font-weight:500;
  font-size:1rem; color:var(--ink-strong);
}
@media (max-width: 900px){ .tech__grid{ grid-template-columns:1fr } }


/* ============================== V. STATUS ============================== */

.status{
  padding:clamp(72px, 9vw, var(--chapter)) 0;
  background:var(--bg-raised);
  border-top:1px solid var(--rule-hair);
}
.status__grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(var(--space-7), 6vw, 96px); align-items:start;
}
.status__grid h2{ margin:var(--space-3) 0 var(--space-5) }
.status__grid .prose{ margin:0 0 var(--space-6) }
.status__studio{
  margin:0; font-family:var(--font-body); font-size:var(--step-body);
  color:var(--ink-quiet);
}
.status__note{ margin:0 }
@media (max-width: 900px){ .status__grid{ grid-template-columns:1fr } }


/* ============================== FOOTER ================================= */

.foot{
  padding:var(--space-8) 0 var(--space-7);
  background:var(--bg);
  border-top:1px solid var(--rule-hair);
}
.foot__inner{ display:grid; gap:var(--space-4) }
.foot__home{
  display:inline-flex; align-items:center; gap:var(--space-3);
  justify-self:start; text-decoration:none; color:var(--ink-strong);
  font-family:var(--font-ui); font-weight:500;
  font-size:var(--step-micro); letter-spacing:var(--ls-micro);
  text-transform:uppercase;
}
.foot__line{
  margin:0; font-family:var(--font-body); font-size:var(--step-body);
  color:var(--ink);
}
.foot__credit{
  margin:0; max-width:60ch;
  font-family:var(--font-ui); font-size:var(--step-caption);
  line-height:var(--lh-caption); color:var(--ink-quiet);
}