/* ============================================================================
   ejmaskarino.com — landing page base. "Same letters, different route."
   Tokens, fonts, reset, the scene/stage primitives, header, page-level actors,
   type primitives, phone rules, reduced-motion edition. Scene styles live in
   css/scenes/*.css and use only these tokens and primitives.
   ========================================================================== */

/* ---------- Fonts: fallbacks carry size-adjust so the name lays out before Anybody lands ---------- */
@font-face {
  font-family: "Anybody Fallback";
  src: local("Arial Black"), local("Impact"), local("Arial Bold"), local("Arial");
  size-adjust: 92%;
  ascent-override: 95%;
  descent-override: 25%;
  font-weight: 100 900;
  font-stretch: 50% 150%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%;
}

/* ---------- Tokens: one day ---------- */
:root {
  --night: #0d1420;
  --veil: #05070a;
  --bone: #f2f0ea;
  --paper: #f2efe8;
  --ink: #111318;
  --dawn: #f2a65a;
  --cream: #f6efdd;
  --forest: #1f4d3a;
  --lakbi: #f5c542;
  --signal: #ffcf5a;
  --fault: #ff4d4d;
  --clear: #4ade80;
  --sky: #8eb6d9;

  /* the plate the page is on right now: set by JS (data-plate) and tweened at dawn / golden hour */
  --plate-bg: var(--night);
  --fg: var(--bone);
  /* muted text tiers: both stay >= 4.5:1 on their plate (night: fg-2 6.7:1, fg-3 5.4:1) */
  --fg-2: color-mix(in srgb, var(--bone) 62%, transparent);
  --fg-3: color-mix(in srgb, var(--bone) 55%, transparent);
  --line: color-mix(in srgb, var(--bone) 18%, transparent);
  /* the focus ring: Signal on night, the plate's ink on paper and cream */
  --focus: var(--signal);
  /* red for text on light plates (xAI, "alongside"): 4.9:1 on paper; --fault stays for the 503 on night */
  --fault-ink: #c62828;

  --display: "Anybody", "Anybody Fallback", "Arial Black", Impact, sans-serif;
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 3.4vw, 56px);
  --header-h: 56px;
  --mono-s: clamp(12px, 0.8vw, 14px);
  --mono-m: clamp(12px, 0.9vw, 15px);
  --serif-l: clamp(22px, 2.6vw, 42px);
  --serif-xl: clamp(26px, 3.6vw, 60px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}
/* paper: fg-2 5.6:1, fg-3 4.7:1 */
html[data-plate="paper"] {
  --fg: var(--ink);
  --fg-2: color-mix(in srgb, var(--ink) 68%, transparent);
  --fg-3: color-mix(in srgb, var(--ink) 61%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --focus: var(--ink);
  color-scheme: light;
}
/* cream: fg-2 5.0:1, fg-3 4.6:1 */
html[data-plate="cream"] {
  --fg: var(--forest);
  --fg-2: color-mix(in srgb, var(--forest) 80%, transparent);
  --fg-3: color-mix(in srgb, var(--forest) 77%, transparent);
  --line: color-mix(in srgb, var(--forest) 18%, transparent);
  --focus: var(--forest);
  color-scheme: light;
}
/* chapters that carry their own light plate keep a visible ring whatever the page plate is doing */
[data-scene="train"],
[data-scene="work"] {
  --focus: var(--ink);
}
[data-scene="lakbay"] {
  --focus: var(--forest);
}
/* big screens: the corners and the story lines grow with the name */
@media (min-width: 2200px) {
  :root {
    --mono-s: 15px;
    --mono-m: 17px;
    --serif-l: clamp(42px, 2.2vw, 60px);
    --serif-xl: clamp(60px, 3.1vw, 84px);
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
}
html.motion:not(.lenis) {
  scroll-behavior: smooth;
}
/* scroll anchoring fights sticky stages and the resize restore in home.js */
html.motion,
html.motion body {
  overflow-anchor: none;
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--plate-bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--mono-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus, var(--signal));
  outline-offset: 3px;
}
/* programmatic focus targets (skip link → main, anchor → chapter heading) move the caret, not a ring */
main:focus,
[tabindex="-1"]:focus {
  outline: none;
}
::selection {
  background: var(--signal);
  color: var(--night);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--signal);
  color: var(--night);
  font-family: var(--mono);
  font-size: 13px;
  transform: translateY(-200%);
}
.skip:focus-visible {
  transform: none;
  outline-offset: 0;
}

/* ---------- Page-level actors ---------- */
#light {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html:not(.js) #light,
html:not(.motion) #light {
  display: none;
}
#route {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100vw;
  height: 1px;
  background: var(--bone);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 6px color-mix(in srgb, var(--bone) 45%, transparent);
}
/* the anchor cut: a dip to night between two far chapters (home.js navigate) */
#cut {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--night);
  opacity: 0;
  pointer-events: none;
}
html:not(.motion) #cut {
  display: none;
}
#dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--signal) 60%, transparent);
}

/* ---------- Scenes: a section is scroll room; its stage sticks for the length of it ---------- */
main {
  position: relative;
  z-index: 1;
}
.scene {
  position: relative;
  min-height: calc(var(--vh, 100) * 1svh);
}
.scene__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
}
.scene--flow {
  min-height: 0;
}
.scene--flow .scene__stage {
  position: relative;
  height: auto;
  min-height: 0;
}
/* The still edition: no scroll room, every stage is one screen at its key pose. */
html:not(.motion) .scene {
  min-height: 0;
}
html:not(.motion) .scene__stage {
  position: relative;
  height: auto;
  min-height: 100svh;
}
html:not(.js) .scene__stage {
  position: relative;
  height: auto;
  min-height: 100svh;
}

/* ---------- Type primitives ---------- */
.display {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 125, "wght" 900;
  font-stretch: 125%;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  overflow-wrap: normal;
  word-break: keep-all;
}
.display--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
}
.serif-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--serif-l);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--fg);
  text-wrap: balance;
  max-width: 22ch;
}
.serif-line--xl {
  font-size: var(--serif-xl);
}
.mono {
  font-family: var(--mono);
  font-size: var(--mono-s);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.mono--lc {
  text-transform: none;
  letter-spacing: 0;
}
.mono--strong {
  color: var(--fg);
}
.chapter {
  font-family: var(--mono);
  font-size: var(--mono-s);
  letter-spacing: 0.08em;
  color: var(--fg-2);
}
.chapter::before {
  content: "~ ";
  color: var(--signal);
}
/* a corner: absolute placement inside a stage, gutters respected */
.corner {
  position: absolute;
  z-index: 2;
}
.corner--tl {
  top: calc(var(--header-h) + 8px);
  left: var(--gutter);
}
.corner--tr {
  top: calc(var(--header-h) + 8px);
  right: var(--gutter);
  text-align: right;
}
.corner--bl {
  bottom: max(var(--gutter), 24px);
  left: var(--gutter);
}
.corner--br {
  bottom: max(var(--gutter), 24px);
  right: var(--gutter);
  text-align: right;
}
.link {
  color: var(--sky);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sky) 40%, transparent);
  text-underline-offset: 3px;
}
html[data-plate="paper"] .link {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
html[data-plate="cream"] .link {
  color: var(--forest);
  text-decoration-color: color-mix(in srgb, var(--forest) 35%, transparent);
}
.link:hover {
  text-decoration-color: currentColor;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--mono-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.pill:hover {
  border-color: var(--fg);
}
.pill--solid {
  background: var(--fg);
  color: var(--plate-bg);
  border-color: var(--fg);
}
.pill--solid:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--night);
}
/* small hover / tap / focus card, opened by a <button aria-expanded> */
.card {
  position: absolute;
  z-index: 5;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--plate-bg) 92%, var(--fg));
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--mono-s);
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
}
.card[hidden] {
  display: none;
}
.card p + p {
  margin-top: 8px;
}
.card .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.card .chips span {
  padding: 2px 8px;
  border: 1px solid var(--line);
  font-size: 11px;
}
.disclose {
  cursor: pointer;
}

/* ---------- Header ---------- */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--mono-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.4s;
  pointer-events: none;
}
html.motion .hdr {
  /* the plate flips are scrubbed; the header follows in the same frame */
  transition: none;
}
/* the still edition scrolls every chapter under the header: it always sits on a bar of the plate under it */
html:not(.motion) .hdr {
  background: var(--hdr-bg, var(--plate-bg));
}
.hdr > * {
  pointer-events: auto;
}
.hdr__mark {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "wght" 900;
  font-stretch: 110%;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hdr__glyph {
  display: inline-block;
  width: 0.72em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.hdr--mark .hdr__glyph,
html:not(.motion) .hdr__glyph,
html:not(.js) .hdr__glyph,
.hdr__mark:focus-visible .hdr__glyph {
  opacity: 1;
}
/* in the motion edition the flyers and the slot swap in the same frame: no fade, no dip */
html.motion .hdr__glyph {
  transition: none;
}
.hdr__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}
.hdr__nav a,
.hdr__nav button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  opacity: 0.82;
  transition: opacity 0.25s;
}
.hdr__nav a:hover,
.hdr__nav button:hover,
.hdr__nav [aria-expanded="true"] {
  opacity: 1;
}
.hdr__nav a::after,
.hdr__nav button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.hdr__nav a:hover::after,
.hdr__nav button:hover::after,
.hdr__nav [aria-expanded="true"]::after,
.hdr__nav a[aria-current]::after {
  transform: scaleX(1);
}
.hdr__strong {
  opacity: 1 !important;
}
.hdr__nav .hdr__motion {
  opacity: 0.82;
}
.hdr__nav .hdr__menu {
  display: none;
}
.hdr__nav .hdr__only-phone {
  display: none;
}

/* the CV stub and the phone menu */
.stub,
.menu {
  position: absolute;
  top: calc(var(--header-h) + 4px);
  right: var(--gutter);
  z-index: 30;
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--plate-bg) 94%, var(--fg));
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--mono-s);
  line-height: 1.5;
}
.stub[hidden],
.menu[hidden] {
  display: none;
}
.stub__photo {
  width: 72px;
  height: 72px;
  margin: 0 0 14px;
  padding: 2px;
  border: 1px solid var(--line);
  background: var(--plate-bg);
  object-fit: cover;
  filter: grayscale(1);
}
.stub dl {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 6px 12px;
  margin: 0 0 16px;
}
.stub dt {
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  padding-top: 2px;
}
.stub dd {
  margin: 0;
}
.stub .pill {
  width: 100%;
  justify-content: center;
}
.menu ul {
  display: grid;
  gap: 2px;
}
.menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.menu li:last-child a {
  border-bottom: 0;
}
.menu .menu__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin-top: 12px;
  color: var(--fg-2);
  font-size: 12px;
}
.menu .menu__label {
  margin-right: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu .menu__pages a {
  display: inline-flex;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

/* ---------- Phone edition of the header ---------- */
@media (max-width: 767px) {
  /* a solid plate-coloured bar over the day chapters, so their words never run through the nav */
  .hdr--solid {
    background: var(--hdr-bg, var(--plate-bg));
  }
  .hdr__mark {
    min-width: 48px;
    min-height: 48px;
    margin-left: -8px;
    padding: 0 8px;
  }
  .hdr__nav {
    gap: 2px;
    margin-right: -8px;
  }
  .hdr__nav a,
  .hdr__nav button {
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0 8px;
  }
  .hdr__nav a::after,
  .hdr__nav button::after {
    left: 8px;
    right: 8px;
  }
  .hdr__nav .hdr__desk {
    display: none;
  }
  .hdr__nav .hdr__menu {
    display: inline-flex;
  }
  .hdr__nav .hdr__motion {
    display: none;
  }
  .menu .hdr__motion {
    display: flex;
    min-height: 48px;
    width: 100%;
    opacity: 0.8;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
}
@media (min-width: 768px) {
  .hdr__nav .hdr__only-phone {
    display: none;
  }
}

/* ---------- Motion / reduced motion ---------- */
html:not(.motion) #route,
html:not(.motion) #dot {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Print: the still edition on paper ---------- */
@media print {
  .hdr,
  #light,
  #route,
  #dot,
  .skip {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .scene {
    min-height: 0;
  }
  .scene__stage {
    position: static;
    height: auto;
  }
}