/* Entre Monedas / Between Coins
   One look, committed: the palette of the Túmin note and the linoleum cuts.
   No inline styles anywhere — the CSP forbids them. Everything is a class. */

:root {
  color-scheme: dark;

  --ground: #0E100C;
  --ground-2: #141711;
  --band: #1B1F17;
  --ink: #EDEFE6;
  --ink-2: #A9B0A0;
  --ink-3: #737A6C;
  --rule: #262B20;
  --rule-2: #39402F;

  /* The three that carry meaning. Nothing else may borrow them. */
  --ochre: #E0A32E;     /* gold, scarcity, the bull */
  --clay: #C4451F;      /* the linoleum red, the cut */
  --field: #6FB48F;     /* the milpa, the living currency */

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .28s;
  --dur: .55s;

  --maxw: 68rem;
  --col: 34rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: .98; }
h2 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.08; max-width: 15ch; }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.2; }

p { margin: 0; max-width: 56ch; }
.lede { font-size: clamp(1.05rem, 2.1vw, 1.22rem); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- language */
/* Both languages ship in the markup; one is hidden. No fetch, no flash. */
[data-es], [data-en] { display: none; }
html[lang="es"] [data-es] { display: revert; }
html[lang="en"] [data-en] { display: revert; }

.langbar { display: flex; gap: .1rem; align-items: center; font-family: var(--f-mono); font-size: .7rem; }
.langbar button {
  background: none; border: 1px solid transparent; color: var(--ink-3);
  font: inherit; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .55rem; cursor: pointer; border-radius: 2px;
}
.langbar button[aria-pressed="true"] { color: var(--ground); background: var(--ink); }
.langbar button:hover { color: var(--ink); }
.langbar button[aria-pressed="true"]:hover { color: var(--ground); }

/* -------------------------------------------------------------------- nav */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem clamp(1.15rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, rgba(14,16,12,.92), rgba(14,16,12,0));
  transition: background var(--dur) var(--ease);
}
.topbar.is-stuck { background: rgba(14,16,12,.96); border-bottom: 1px solid var(--rule); }
.mark { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.mark:hover { color: var(--ink); }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* The bull is bright ochre through its middle, so the copy needs the scrim to
   have closed well before the text starts. On a phone the hero is short and the
   title block lands higher up the image, which is why the dark half begins
   earlier there. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(14,16,12,.80) 0%,
      rgba(14,16,12,.22) 28%,
      rgba(14,16,12,.74) 58%,
      rgba(14,16,12,.97) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 25%, rgba(14,16,12,.62) 100%);
}
@media (max-width: 640px) {
  .hero-media::after {
    background:
      linear-gradient(180deg,
        rgba(14,16,12,.72) 0%,
        rgba(14,16,12,.30) 20%,
        rgba(14,16,12,.86) 46%,
        rgba(14,16,12,.98) 100%);
  }
}
/* This element is also .wrap, so only the bottom may be set — the padding
   shorthand here would reset .wrap's horizontal gutter and push the title flush
   against the left edge of a phone. */
.hero-body {
  position: relative; z-index: 1;
  padding-bottom: clamp(3rem, 9vh, 6rem);
  display: grid; gap: 1.6rem;
  /* The ochre eyebrow and the ochre figures in the meta line land on the bright
     gold of the sun. The scrim alone cannot fix ochre on ochre, so the copy
     carries its own shadow and stays legible over any frame. */
  text-shadow: 0 1px 14px rgba(8,9,7,.8), 0 1px 3px rgba(8,9,7,.55);
}
.hero-body .btn { text-shadow: none; }
.hero-title { display: grid; gap: .35rem; }
.hero-title .alt { font-family: var(--f-display); font-size: clamp(1.3rem, 4vw, 2.4rem); font-style: italic; font-weight: 400; color: var(--ink-2); letter-spacing: -.01em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hero-meta b { color: var(--ochre); font-weight: 500; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-body); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.35rem; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--ochre); background: var(--ochre); color: #14170F;
  text-decoration: none; transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { filter: brightness(1.09); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { border-color: var(--ink-2); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .arr { font-family: var(--f-mono); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ------------------------------------------------------------- sections */
section { padding: clamp(4rem, 11vh, 7.5rem) 0; }
.sec-head { display: grid; gap: .8rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease) var(--d, 0ms), transform var(--dur) var(--ease) var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.d1 { --d: 80ms; } .d2 { --d: 160ms; } .d3 { --d: 240ms; }

/* --------------------------------------------------------------- trailer */
.player { position: relative; border: 1px solid var(--rule); background: #000; aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-cover { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; background: none; width: 100%; }
.player-cover img { width: 100%; height: 100%; object-fit: cover; }
.player-cover .play {
  position: absolute; display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(224,163,46,.94); color: #14170F;
  font-family: var(--f-mono); font-size: 1.4rem; padding-left: .22em;
  transition: transform var(--dur-fast) var(--ease);
}
.player-cover:hover .play { transform: scale(1.07); }
.player-cover:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }
.is-playing .player-cover { display: none; }

/* -------------------------------------------------------------- chapters */
.chapters { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.chapter { background: var(--ground-2); padding: clamp(1.4rem, 3.5vw, 2.2rem); display: grid; gap: 1rem; }
.chapter-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; }
.chapter-n { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tag { font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .26rem .55rem; border-radius: 2px; white-space: nowrap; }
.tag.locked { background: rgba(224,163,46,.14); color: var(--ochre); }
.tag.open { background: rgba(111,180,143,.15); color: var(--field); }
.tag.wip { background: rgba(196,69,31,.16); color: #E8836A; }
.chapter-meta { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; }

/* The chapter tag flips to "unlocked" once the session says so. */
.tag .t-open { display: none; }
.tag.open .t-locked { display: none; }
.tag.open .t-open { display: revert; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- access */
.gate { display: grid; gap: 1rem; max-width: 30rem; }
.gate-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.field {
  flex: 1 1 11rem; min-width: 9rem;
  background: var(--ground-2); border: 1px solid var(--rule-2); color: var(--ink);
  font-family: var(--f-mono); font-size: 1.15rem; letter-spacing: .3em; text-align: center;
  padding: .78rem .9rem; border-radius: 2px;
}
.field::placeholder { color: var(--ink-3); letter-spacing: .3em; }
.field:focus { outline: 2px solid var(--ochre); outline-offset: 1px; border-color: transparent; }

/* The wide tracking belongs to the code field alone. Anything a person types
   words into resets it, placeholder included. */
.field-text { letter-spacing: normal; text-align: left; font-family: var(--f-body); font-size: 1rem; }
.field-text::placeholder { letter-spacing: normal; }
select.field-text { flex: 0 1 14rem; cursor: pointer; }

.msg { font-family: var(--f-mono); font-size: .8rem; min-height: 1.2em; margin: 0; }
.msg.err { color: #E8836A; }
.msg.ok { color: var(--field); }

/* ----------------------------------------------------------------- túmin */
.doors { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.door { background: var(--ground-2); padding: 1.5rem 1.4rem; display: grid; gap: .7rem; align-content: start; }
.door .k { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--field); }
.door p { font-size: .93rem; color: var(--ink-2); }

.tickers { display: flex; flex-wrap: wrap; gap: .5rem; }
.ticker {
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em;
  background: var(--ground-2); border: 1px solid var(--rule-2); color: var(--ink-2);
  padding: .6rem .85rem; border-radius: 2px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ticker:hover { color: var(--ink); border-color: var(--ink-3); }
.ticker[aria-pressed="true"] { border-color: var(--ochre); color: var(--ochre); background: rgba(224,163,46,.09); }
.ticker:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }

.equals { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-3); letter-spacing: .04em; }
.equals b { color: var(--ochre); font-weight: 500; }

.tally { display: flex; flex-wrap: wrap; gap: 1.6rem; font-family: var(--f-mono); font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tally i { font-style: normal; color: var(--ink); font-size: 1.5rem; font-weight: 500; display: block; }

.ledger-form { display: grid; gap: .9rem; max-width: 34rem; }
select.field-text { appearance: none; background-image: none; }

/* ---------------------------------------------------------------- footer */
footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem; }
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; font-family: var(--f-mono); font-size: .73rem; color: var(--ink-3); }
.foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.foot a:hover { color: var(--ochre); border-color: var(--ochre); }

/* -------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-media video { display: none; }
  .hero-media img { display: block; }
}
/* The still is the default; JS swaps in the loop only when motion is welcome. */
.hero-media img { display: block; }
.hero-media video { display: none; }
.motion-ok .hero-media img { display: none; }
.motion-ok .hero-media video { display: block; }

@media (max-width: 640px) {
  .hero-meta { gap: .35rem 1rem; }
}