/* ==========================================================================
   AMINO — LAYOUT PRIMITIVES
   The 12-column editorial grid, the floating page frame, and the three
   sanctioned grid-breaks. Everything else stays inside the rails.
   ========================================================================== */

/* --- THE PAGE FRAME -------------------------------------------------------
   Reference move: content sits inside a large-radius container floating on
   black. Reads as a "device", and gives the mega type a hard edge to crop
   against — which is what makes cropped type look intentional, not broken. */

.frame {
  position: relative;
  z-index: var(--z-content);
  border-radius: var(--r-frame);
  overflow: clip;                    /* clip, not hidden — keeps sticky alive */
  isolation: isolate;
  /* .frame sits outside any [data-theme], so --bg never resolved here and it
     fell back to paper — a white plate behind predominantly dark pages that
     flashes during load and between pinned sections. */
  background: var(--ink);
}

.page {
  padding: clamp(0px, 0.9vw, 0.875rem);
  background: var(--ink);
}

/* --- SECTIONS -------------------------------------------------------------- */

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
  overflow: clip;
}

.section--lg   { padding-block: var(--section-y-lg); }
.section--flush{ padding-block: 0; }
.section--top  { padding-block-start: 0; }
.section--btm  { padding-block-end: 0; }

/* Seam between an ink section and a paper section. The reference decks let
   the incoming section round over the outgoing one rather than butt-joining. */
.section--lap {
  border-start-start-radius: var(--r-frame);
  border-start-end-radius: var(--r-frame);
  margin-block-start: calc(var(--r-frame) * -1);
}

/* --- CONTAINERS ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide  { max-width: 1760px; }
.wrap--bleed { max-width: none; padding-inline: 0; }

.measure    { max-width: var(--max-text); }
.measure-sm { max-width: 34ch; }
.measure-md { max-width: 46ch; }

/* --- GRID ------------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--col-gap);
}

.grid--rows { display: grid; gap: var(--col-gap); }

/* Column span/start helpers — used sparingly, only where a section genuinely
   needs to hang off-axis. Named spans beat a hundred one-off classes. */
.c-2  { grid-column: span 2; }
.c-3  { grid-column: span 3; }
.c-4  { grid-column: span 4; }
.c-5  { grid-column: span 5; }
.c-6  { grid-column: span 6; }
.c-7  { grid-column: span 7; }
.c-8  { grid-column: span 8; }
.c-9  { grid-column: span 9; }
.c-10 { grid-column: span 10; }
.c-12 { grid-column: 1 / -1; }

.s-1  { grid-column-start: 1; }
.s-2  { grid-column-start: 2; }
.s-3  { grid-column-start: 3; }
.s-4  { grid-column-start: 4; }
.s-5  { grid-column-start: 5; }
.s-6  { grid-column-start: 6; }
.s-7  { grid-column-start: 7; }
.s-8  { grid-column-start: 8; }
.s-9  { grid-column-start: 9; }

/* --- THE ASYMMETRIC HEADER ------------------------------------------------
   Reference move: centred statement, then supporting paragraphs hanging at
   the far left and far right margins, optically aligned to the headline's
   own edges rather than to the grid. Deliberately unbalanced.              */

.stmt {
  position: relative;
  display: grid;
  gap: var(--s-8);
}

.stmt__head {
  text-align: center;
  max-width: 21ch;
  margin-inline: auto;
}

.stmt__wings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
}

.stmt__wing {
  max-width: 42ch;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-mute);
}

.stmt__wing:last-child { justify-self: end; text-align: left; }

/* Left-aligned variant for denser inner-page sections */
.stmt--left .stmt__head { text-align: left; margin-inline: 0; max-width: 18ch; }

/* --- SPLIT ---------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: start;
}

.split__aside { grid-column: 1 / span 4; position: sticky; top: 8rem; }
.split__main  { grid-column: 6 / -1; }

/* --- STACKS ---------------------------------------------------------------- */

.stack   { display: grid; gap: var(--s-5); align-content: start; justify-items: start; }
.stack-2 { display: grid; gap: var(--s-2); }
.stack-3 { display: grid; gap: var(--s-3); }
.stack-4 { display: grid; gap: var(--s-4); }
.stack-6 { display: grid; gap: var(--s-6); }
.stack-8 { display: grid; gap: var(--s-8); }
.stack-9 { display: grid; gap: var(--s-9); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.row--between { justify-content: space-between; }
.row--end     { justify-content: flex-end; }
.row--tight   { gap: var(--s-2); }
.row--loose   { gap: var(--s-6); }
.row--top     { align-items: flex-start; }

/* --- RULES ----------------------------------------------------------------- */

.rule {
  height: var(--hair);
  background: var(--line);
  border: 0;
  width: 100%;
}

/* Rule that draws itself in on scroll — set by js/modules/reveal.js */
.rule--draw { transform-origin: left center; }

/* --- GRID BREAKS -----------------------------------------------------------
   Exactly three sanctioned ways to leave the grid. Anything else is a bug. */

.bleed      { width: 100vw; margin-inline: calc(50% - 50vw); }  /* full-bleed */
.bleed-r    { margin-inline-end: calc((100vw - min(100%, var(--max))) / -2 - var(--gutter)); }
.overhang   { margin-inline: calc(var(--gutter) * -1); }         /* nudge out */

/* --- UTILITY --------------------------------------------------------------- */

.rel   { position: relative; }
.clip  { overflow: clip; }
.center{ text-align: center; }
.right { text-align: right; }
.nowrap{ white-space: nowrap; }
.fill  { position: absolute; inset: 0; }
.pe-none { pointer-events: none; }

.sticky-top { position: sticky; top: 0; }

/* --- GRAIN ----------------------------------------------------------------
   A whisper of luminance noise over the whole page. Kills banding in the
   large flat fills and the WebGL gradients, and adds the film quality the
   reference decks have. Generated, not an image asset.                     */

.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-frame);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 180px 180px;
  will-change: transform;
  animation: grain-shift 6s steps(6) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(-2%, -3%, 0); }
  33%  { transform: translate3d(-4%, 2%, 0); }
  50%  { transform: translate3d(2%, -4%, 0); }
  66%  { transform: translate3d(-1%, 3%, 0); }
  83%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}