/**
 * @fileoverview The visual directions of the Phase3 proposal (round S2, 02/11/2026). Each one is the
 * same page and the same brand tokens with different role values and a few flourishes; the default
 * roles in base.css are "editorial".
 *
 * @remarks
 * Eneko decides which directions reach the selector the team sees; this file holds every candidate
 * of the round. None introduces a colour or a font outside tokens.css: a direction that needed one
 * would be proposed as a new token first (inventory A6, criterio.md).
 *
 * - editorial: the live site's language finished (base.css defaults).
 * - blueprint: engineering sheet. Hairline grid, numbered sections, mono labels, smaller headings.
 * - control: carbon ground, chalk type, pale violet; the footer block flips to chalk.
 * - chalk: warm paper ground, calmer headings, longer reading measure.
 * - phases (idea): the three phase colours become the system's marker for sections and audiences.
 */

/* Blueprint */
[data-dir="blueprint"] {
  --h1-size: clamp(44px, 7vw, 104px);
  --h1-track: -0.03em;
  --h2-size: clamp(32px, 4.6vw, 64px);
  --h2-color: var(--fg);
  --section-gap: clamp(72px, 9vw, 140px);
}
[data-dir="blueprint"] body {
  background-image:
    linear-gradient(to right, rgb(32 35 32 / .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(32 35 32 / .06) 1px, transparent 1px);
  background-size: 24px 24px;
}
[data-dir="blueprint"] main { counter-reset: sec; }
[data-dir="blueprint"] :is(.how, .gap, .doors, .vision, .close) {
  counter-increment: sec;
  padding-top: 32px;
  margin-top: var(--section-gap);
  background: linear-gradient(var(--fg), var(--fg)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px;
}
[data-dir="blueprint"] .how .eyebrow::before,
[data-dir="blueprint"] :is(.gap, .doors, .vision) h2::before,
[data-dir="blueprint"] .close .statement::before {
  content: counter(sec, decimal-leading-zero) " /";
  display: block;
  margin-bottom: 18px;
  font: 500 13px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--accent-text);
}
[data-dir="blueprint"] .how .eyebrow::before { display: inline; margin-right: 10px; }
[data-dir="blueprint"] .phase-keys { display: flex; gap: 18px; position: absolute; left: var(--gutter); top: -6px; font: 500 12px/1 var(--mono); letter-spacing: .08em; }
[data-dir="blueprint"] .phase-keys span:nth-child(1) { color: var(--accent-text); }
[data-dir="blueprint"] .phase-keys span:nth-child(2) { color: var(--fg); }
[data-dir="blueprint"] .phase-keys span:nth-child(3) { color: var(--fg-muted); }
[data-dir="blueprint"] .phases path { stroke-width: 1.4; }
[data-dir="blueprint"] .figure-slot { border: 1px solid var(--fg); background: var(--ground); }
[data-dir="blueprint"] .door-title { font-size: clamp(22px, 2.2vw, 32px); }
[data-dir="blueprint"] .statement { font-size: clamp(28px, 3.6vw, 48px); }

/* Control room */
[data-dir="control"] {
  color-scheme: dark;
  --bg: var(--carbon);
  --fg: var(--chalk);
  --fg-body: var(--carbon-body);
  --fg-muted: var(--carbon-muted);
  --line: var(--carbon-rule);
  --accent: var(--l1-pale);
  --accent-text: var(--l1-pale);
  --focus: var(--l1-pale);
  --phase-1: var(--l1-pale);
  --phase-2: var(--chalk);
  --phase-3: var(--carbon-muted);
  --h2-color: var(--l1-pale);
  --block-bg: var(--chalk);
  --block-fg: var(--carbon);
  --block-body: var(--body);
  --block-muted: var(--muted);
  --block-line: var(--rule);
  --block-accent: var(--l1-ink);
}
[data-dir="control"] ::selection { background: var(--l1-pale); color: var(--carbon); }
[data-dir="control"] .figure-slot { background: var(--carbon-raised); border-style: solid; }

/* Chalk */
[data-dir="chalk"] {
  --bg: var(--chalk);
  --h1-size: clamp(44px, 6.4vw, 96px);
  --h1-track: -0.03em;
  --h2-size: clamp(32px, 4.4vw, 60px);
  --h2-color: var(--fg);
  --body-size: clamp(18px, 1.4vw, 20px);
  --measure: 60ch;
  --section-gap: clamp(88px, 11vw, 168px);
}
[data-dir="chalk"] .wrap { max-width: 1120px; }
[data-dir="chalk"] h1 { max-width: 14ch; }
[data-dir="chalk"] h2 { max-width: 20ch; }
[data-dir="chalk"] .phases { max-width: 1120px; margin-left: auto; margin-right: auto; }
[data-dir="chalk"] .phases path { stroke-width: 1.4; }
[data-dir="chalk"] .door-list { border-top-color: var(--line); }
[data-dir="chalk"] .door { border-bottom-color: var(--line); }

/* Phase-coded (idea) */
[data-dir="phases"] {
  --h2-color: var(--fg);
}
[data-dir="phases"] :is(.gap, .doors, .vision) h2::before,
[data-dir="phases"] .site-foot .talk::before {
  content: '';
  display: block;
  width: 72px;
  height: 14px;
  margin-bottom: 28px;
  background:
    linear-gradient(var(--phase-1), var(--phase-1)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--phase-2), var(--phase-2)) 0 6px / 100% 2px no-repeat,
    linear-gradient(var(--phase-3), var(--phase-3)) 0 12px / 100% 2px no-repeat;
}
[data-dir="phases"] .site-foot .talk::before {
  background:
    linear-gradient(var(--l1-pale), var(--l1-pale)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--chalk), var(--chalk)) 0 6px / 100% 2px no-repeat,
    linear-gradient(var(--carbon-muted), var(--carbon-muted)) 0 12px / 100% 2px no-repeat;
}
[data-dir="phases"] .steps li:nth-child(3n + 1)::before { color: var(--accent-text); }
[data-dir="phases"] .steps li:nth-child(3n + 2)::before { color: var(--fg); }
[data-dir="phases"] .steps li:nth-child(3n)::before { color: var(--fg-muted); }
[data-dir="phases"] .door { padding-left: 20px; border-left: 4px solid var(--phase-1); }
[data-dir="phases"] .door-list li:nth-child(2) .door { border-left-color: var(--phase-2); }
[data-dir="phases"] .phase-keys { display: flex; gap: 18px; position: absolute; left: var(--gutter); top: -6px; font: 500 12px/1 var(--mono); letter-spacing: .08em; }
[data-dir="phases"] .phase-keys span:nth-child(1) { color: var(--accent-text); }
[data-dir="phases"] .phase-keys span:nth-child(2) { color: var(--fg); }
[data-dir="phases"] .phase-keys span:nth-child(3) { color: var(--fg-muted); }

/* ---------------------------------------------------------------------------------------------
 * Round S2c (02/11/2026): mixes of Editorial (A) and Phase-coded (idea), on the live field
 * background. Eneko: "me llaman A y E, pero hay que cambiar cosas", and asked Claude to propose
 * the changes. What the frame review found on A and the idea with the live field:
 * - violet is spent three times (giant violet H2, violet washes, L1), so none of them reads as L1;
 * - the three-line rule above every section turns into decoration by the third time;
 * - the doors' side borders close into L-shaped boxes;
 * - the dashed figure slot and the bare sections float on the field with nothing under them.
 * Every mix keeps H2 in ink and violet for L1 only.
 * ------------------------------------------------------------------------------------------- */

/* Shared by the four mixes. */
:is([data-dir="ed-phase"], [data-dir="sheets"], [data-dir="instrument"], [data-dir="flow"]) { --h2-color: var(--fg); }
:is([data-dir="ed-phase"], [data-dir="sheets"], [data-dir="instrument"], [data-dir="flow"]) .steps li:nth-child(3n + 1)::before { color: var(--accent-text); }
:is([data-dir="ed-phase"], [data-dir="sheets"], [data-dir="instrument"], [data-dir="flow"]) .steps li:nth-child(3n + 2)::before { color: var(--fg); }
:is([data-dir="ed-phase"], [data-dir="sheets"], [data-dir="instrument"], [data-dir="flow"]) .steps li:nth-child(3n)::before { color: var(--fg-muted); }
:is([data-dir="ed-phase"], [data-dir="sheets"], [data-dir="instrument"], [data-dir="flow"]) .figure-slot { border-style: solid; background: rgb(240 239 232 / .72); }
/* Doors carry their phase as a small tag, not as a side border. The alt text after "/" keeps the tag out of screen readers. */
:is([data-dir="ed-phase"], [data-dir="sheets"], [data-dir="instrument"], [data-dir="flow"]) .door-title::before { content: 'L1' / ''; display: block; margin-bottom: 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--accent-text); }
:is([data-dir="ed-phase"], [data-dir="sheets"], [data-dir="instrument"], [data-dir="flow"]) .door-list li:nth-child(2) .door-title::before { content: 'L2' / ''; color: var(--fg); }
/* The three-line rule, now only where it means something: above the hero lead and the doors. */
:is([data-dir="ed-phase"], [data-dir="flow"]) :is(.hero .lead, .doors h2)::before {
  content: '';
  display: block;
  width: 72px;
  height: 14px;
  margin-bottom: 24px;
  background:
    linear-gradient(var(--phase-1), var(--phase-1)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--phase-2), var(--phase-2)) 0 6px / 100% 2px no-repeat,
    linear-gradient(var(--phase-3), var(--phase-3)) 0 12px / 100% 2px no-repeat;
}

/* M2 Sheets: the sections are sheets laid on the field, as YoSoySanas lays paper on its backdrop;
   the field shows only in the gaps. Each sheet has a phase tab on its top edge. */
[data-dir="sheets"] { --section-gap: clamp(40px, 6vw, 88px); --h2-size: clamp(36px, 5.4vw, 80px); }
[data-dir="sheets"] :is(.how, .gap, .doors, .vision, .close) {
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(1360px - 2 * var(--gutter));
  margin: var(--section-gap) auto 0;
  padding: clamp(32px, 4.5vw, 72px);
  background: var(--chalk);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgb(32 35 32 / .04), 0 24px 48px -32px rgb(32 35 32 / .35);
}
[data-dir="sheets"] :is(.how, .gap, .doors, .vision, .close)::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(32px, 4.5vw, 72px);
  width: 72px;
  height: 10px;
  background:
    linear-gradient(var(--phase-1), var(--phase-1)) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--phase-2), var(--phase-2)) 0 4px / 100% 2px no-repeat,
    linear-gradient(var(--phase-3), var(--phase-3)) 0 8px / 100% 2px no-repeat;
}
[data-dir="sheets"] .figure-slot { background: var(--ground); }
[data-dir="sheets"] .site-foot { margin-top: clamp(64px, 8vw, 120px); }

/* M3 Instrument: the idea's coding as a reading instrument. Smaller headings, a hairline over each
   section with its number and its phase in mono, as on a panel. */
[data-dir="instrument"] {
  --h1-size: clamp(48px, 8.4vw, 124px);
  --h2-size: clamp(34px, 4.8vw, 72px);
  --section-gap: clamp(80px, 10vw, 156px);
}
[data-dir="instrument"] :is(.how, .gap, .doors, .vision, .close) {
  padding-top: 28px;
  margin-top: var(--section-gap);
  background: linear-gradient(var(--fg), var(--fg)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px;
}
[data-dir="instrument"] :is(.how .eyebrow, .gap h2, .doors h2, .vision h2, .close .statement)::before {
  display: block;
  margin-bottom: 20px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .08em;
}
[data-dir="instrument"] .how .eyebrow::before { content: '01 · L1' / ''; display: inline; margin-right: 12px; color: var(--accent-text); }
[data-dir="instrument"] .gap h2::before { content: '02 · L2' / ''; color: var(--fg); }
[data-dir="instrument"] .doors h2::before { content: '03 · L3' / ''; color: var(--fg-muted); }
[data-dir="instrument"] .vision h2::before { content: '04 · L1' / ''; color: var(--accent-text); }
[data-dir="instrument"] .close .statement::before { content: '05 · L2' / ''; color: var(--fg); }
[data-dir="instrument"] .phase-keys { display: flex; gap: 18px; position: absolute; left: var(--gutter); top: -6px; font: 500 12px/1 var(--mono); letter-spacing: .08em; }
[data-dir="instrument"] .phase-keys span:nth-child(1) { color: var(--accent-text); }
[data-dir="instrument"] .phase-keys span:nth-child(2) { color: var(--fg); }
[data-dir="instrument"] .phase-keys span:nth-child(3) { color: var(--fg-muted); }

/* Idea, Flow: the hero stripe goes; the three phases run inside the fixed backdrop and enter the
   cable whose field is the background, so intro, waves and field are one drawing. They fade as the
   page scrolls (scroll-driven, Chrome and Edge; elsewhere they simply stay faint). */
[data-dir="flow"] .phases { display: none; }
[data-dir="flow"] .hero { padding-bottom: clamp(80px, 12vw, 180px); }