/* En Armonía Studio — base.css: the shared brand layer (R16). Every page loads tokens.css, then this, then its own
   stylesheet. What lives here is what makes a page feel like ours: the paper, the type, the header and lockup, the
   mark, seals, paper pieces, buttons, fields, the thread's knots and stamps, the footer. Page stylesheets compose
   these; they don't restyle them. Every component here is shown on brand.html: add a component here and there in the
   same change. Values come only from tokens.css. */

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
:root { --header-h: 64px; --paper-tex: url("../textures/paper003.jpg"); }
body {
  background: var(--paper) var(--paper-tex) center top / 1024px auto; color: var(--ink);
  font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
:lang(zh), :lang(ja) { font-family: var(--font-cjk); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; color: var(--ink-2); }
h1:lang(zh), h2:lang(zh) { font-family: var(--font-cjk); font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--ink-2); text-decoration-color: var(--line); text-underline-offset: .15em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.label { font-family: var(--font-text); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
:lang(zh) .label, .label:lang(zh) { letter-spacing: .08em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
main, .header, .explore { position: relative; z-index: 1; }

/* Seal: a square stamp in an area colour (Explore popover) */
.seal { --c: var(--seal-color, var(--accent)); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 5px;
  background: var(--c); color: var(--paper); font-size: 15px; line-height: 1; flex: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--paper) 35%, transparent); }

/* Paper piece: lighter paper (Paper 001) carrying words, with a torn edge */
.piece {
  background: color-mix(in oklab, var(--paper) 80%, white) url("../textures/paper001.jpg") center / 600px auto;
  color: var(--ink); border-radius: 2px;
  clip-path: polygon(0 6%, 3% 0, 22% 3%, 41% 0, 60% 4%, 79% 1%, 100% 5%, 99% 55%, 100% 94%, 97% 100%, 78% 97%, 58% 100%, 39% 96%, 18% 100%, 0 96%, 1% 50%);
}

/* ========== Header: Explore left, ES/EN right; the centre belongs to the brand lockup ========== */
.header {
  --p: 0;
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--gutter);
  background: color-mix(in oklab, var(--paper) calc(var(--p) * 92%), transparent);
  backdrop-filter: blur(calc(var(--p) * 10px));
  border-bottom: 1px solid color-mix(in oklab, var(--line) calc(var(--p) * 100%), transparent);
}
.header .spacer { flex: 1; }


.lang-toggle { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-chip); padding: 2px; }
.lang-toggle button { padding: 3px 9px; border-radius: var(--r-chip); font-size: var(--t-label); letter-spacing: .08em; color: var(--muted); }
.lang-toggle button[aria-pressed="true"] { background: var(--ink-2); color: var(--paper); }

/* ========== The mark (v3, R22): the prism A ==========
   The A in charcoal; its crossbar is a taper that turns to light in the right leg, and js/prisma.js draws the spectrum
   (.ea-fan) for every .ea-mark. The fan reaches past the mark's box, so marks never clip. */
.ea-mark { overflow: visible; }
.ea-mark .ea-body { fill: var(--ea-a, var(--name-ink)); }
.on-dark .ea-mark { --ea-a: var(--theater-ink); }

/* ========== The full logo (R22): "en Armonía", the A is the mark ==========
   For large spaces (the hero, the brand kit). Set it in IM Fell English at any size; everything scales with the
   font size. The e and the last a are one drawn letter (#ea-e), the a turned 180°, sized to IM Fell's x-height; the A
   stands a little taller than a capital so it reads as the mark, and its spectrum runs behind "rmoní" and fades before
   the last a (js/prisma.js measures it). The letters keep a thin paper halo where the light passes behind them. */
.ea-logo { display: inline-block; white-space: nowrap; font-family: var(--font-title); font-weight: 400; line-height: 1;
  color: var(--name-ink); --ea-xh: .456em; --ea-ah: .87em; }
.ea-logo .ea-glyph { display: inline-block; width: var(--ea-xh); height: var(--ea-xh); vertical-align: baseline;
  overflow: visible; margin-inline: .02em .01em; fill: none; color: inherit; }
.ea-logo-a { display: inline-block; width: var(--ea-ah); height: var(--ea-ah); margin: 0 0 0 .07em;
  vertical-align: calc(var(--ea-ah) * -3.3 / 86); }        /* the A's baseline (y 96) on the text's baseline */
.ea-logo-a svg { display: block; width: 100%; height: 100%; }
.ea-logo .ea-t { text-shadow: 0 0 .04em var(--paper), 0 0 .09em var(--paper); }
.on-dark .ea-logo { color: var(--theater-ink); }
.on-dark .ea-logo .ea-t { text-shadow: 0 0 .04em var(--theater), 0 0 .09em var(--theater); }

/* The name (R18): the logo's letters and "Studio" wear the A's charcoal, the same ink and the same grain (the alpha
   of textures/charcoal-grain.webp, sized with the type), but never the colour. Always IM Fell English.
   .ea-grain is set by js/prisma.js once the grain has loaded, so the name is never masked away. */
.ea-grain :is(.ea-logo .ea-t, .ea-logo .ea-glyph, .hero-studio, .kit-spec-title) {
  -webkit-mask-image: url(../textures/charcoal-grain.webp); mask-image: url(../textures/charcoal-grain.webp);
  -webkit-mask-size: 2em; mask-size: 2em;
}

/* ========== Footer ========== */
.footer { text-align: center; padding: var(--s8) var(--gutter) var(--s9); color: var(--muted); font-size: var(--t-small); }
.footer .mark { display: block; width: 40px; height: 40px; margin: 0 auto var(--s5); overflow: visible; }

/* ========== Header layouts and the dark variant ==========
   .header-grid: a page other than the stream (back link · lockup · ES/EN). .on-dark: over the theater. */
.header.is-solid { --p: 1; }
.header-grid { display: grid; grid-template-columns: 1fr auto 1fr; }
.header-grid .lang-toggle { justify-self: end; }
.header { transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), color var(--d-base) var(--ease); }
.header.on-dark { background: var(--theater); color: var(--theater-ink); border-bottom-color: transparent; backdrop-filter: none; }
.header.on-dark .lang-toggle { border-color: var(--theater-line); }
.header.on-dark .lang-toggle button { color: var(--theater-quiet); }
.header.on-dark .lang-toggle button[aria-pressed="true"] { background: var(--theater-ink); color: var(--theater); }

.back-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font-size: var(--t-small); text-decoration: none; }
.on-dark .back-link { background: transparent; border-color: var(--theater-line); color: var(--theater-ink); }

/* The lockup, docked and still (pages without the hero handoff): the A alone (R22) */
.brand-static { display: grid; place-items: center; text-decoration: none; }
.brand-static svg { width: 34px; height: 34px; }

/* ========== Paper ========== */
.paper-light { background: var(--paper-light) url("../textures/paper001.jpg") center / 600px auto; color: var(--ink); }

/* ========== Buttons and fields ==========
   .btn: a pill, 44px tall. .btn-ink = the main action; .btn-line = a quiet one. Both flip on .on-dark. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-chip); font-size: var(--t-small); line-height: 1.2; text-decoration: none; white-space: nowrap; }
.btn svg { flex: none; }
.btn-ink { background: var(--ink-2); color: var(--paper); }
.btn-line { border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); }
.on-dark .btn-ink { background: var(--theater-ink); color: var(--theater); }
.on-dark .btn-line { background: transparent; border-color: var(--theater-line); color: var(--theater-ink); }

/* Round icon button (44px): give it a visually hidden label */
.btn-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); flex: none; }
.btn-round svg { width: 16px; height: 16px; }
.on-dark .btn-round { background: transparent; border-color: var(--theater-line); color: var(--theater-ink); }

/* Segmented choice (Todo · Video · Audio) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-chip); }
.seg button { min-height: 38px; padding: 0 13px; border-radius: var(--r-chip); font-size: var(--t-small); color: var(--text-quiet); }
.seg button[aria-pressed="true"] { background: var(--ink-2); color: var(--paper); }

/* A field drawn as a single ink line, like writing on paper */
.field-line { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1.5px solid var(--ink-2); color: var(--ink-2); }
.field-line input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--t-body); color: var(--ink); }
.field-line input:focus-visible { outline: none; }
.field-line:focus-within { border-bottom-color: var(--accent); box-shadow: 0 1.5px 0 var(--accent); }

/* An area seal as a toggle (44px) */
.seal-btn { width: 44px; height: 44px; border-radius: 7px; font-size: 17px; }
.seal-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c); }

/* ========== Small marks ==========
   .dot-indie: an independent platform. .leader: the dotted rule of a programme line. .year-stamp: a year on the thread. */
.dot-indie { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); vertical-align: middle; flex: none; }
.leader { flex: 1 1 12px; min-width: 12px; border-bottom: 1.5px dotted color-mix(in oklab, var(--ink-2) 42%, transparent); transform: translateY(-.3em); }
.year-stamp { display: inline-block; padding: 2px 9px; border: 1px solid var(--ink-2); border-radius: var(--r-chip); background: var(--paper);
  font-family: var(--font-display); font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
.member-a { color: var(--accent); }   /* "A ·" before a collective member's name */

/* ========== The thread and its knots ==========
   The dashed line that ties things together (the stream's thread; the media page's timeline). A knot is a play
   button sitting on it: ringed in the accent when new, filled when its work is on the theater. */
.thread-path { fill: none; stroke: var(--ink-2); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.knot { display: grid; place-items: center; width: var(--knot); height: var(--knot); border-radius: 50%;
  border: 1.5px solid var(--ink-2); background: var(--paper); color: var(--ink-2); }
.knot svg { width: 12px; height: 12px; }
.knot.is-new { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent-2); }
.knot.is-on { background: var(--ink-2); color: var(--paper); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header { transition: none; }
}