/* Self-hosted Archivo + Geist (SIL OFL), mirrored from Google Fonts' CSS with the same
   unicode-range subsets, so first paint doesn't wait on two extra origins. The latin
   files are preloaded in each page's <head>. */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shared by every page: grounds, type, links, nav, chrome, the red pen and
   the floods. Page-specific layout stays inline on each page. */
:root {
  --paper: #F2EFE8;
  --ink:   #111110;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-maxw: 90rem;
}
/* Two grounds. Restating `color` alongside the tokens is what actually
   re-inks the text on an inverted subtree (taste.md, Colour). */
:root, .g-paper {
  --sc-canvas: var(--paper); --sc-surface: #E7E3D9;
  --sc-ink: var(--ink);      --sc-ink-soft: #57534B;
  --sc-accent: #C42D14;      --sc-accent-ink: var(--paper);
  --pen: #E8361C;
}
.g-ink {
  --sc-canvas: var(--ink);   --sc-surface: #1C1B19;
  --sc-ink: var(--paper);    --sc-ink-soft: #A8A49B;
  --sc-accent: #FF5436;      --sc-accent-ink: var(--ink);
  --pen: #FF4A2E;
}
.g-paper, .g-ink { background: var(--sc-canvas); color: var(--sc-ink); }
/* The engine computes its hairlines once, at :root, from the paper ink. Restate
   them per ground or every divider on an ink section disappears. */
.g-paper, .g-ink, .on-ink {
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
}
/* Ink-ground text that sits over a flood layer, without painting a ground of its own. */
.on-ink {
  --sc-ink: var(--paper); --sc-ink-soft: #A8A49B; --sc-accent: #FF5436; --pen: #FF4A2E;
  color: var(--sc-ink);
}

.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------- type ------ */
.h1, .h2, .h3, .big {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 104;
  margin: 0; text-wrap: balance;
}
.h1 {
  font-weight: 800;
  font-size: clamp(2.9rem, 1rem + 4.45vw, 6.4rem);
  line-height: 0.9; letter-spacing: -0.045em;
}
.h2 {
  font-weight: 750;
  font-size: clamp(2.3rem, 1.2rem + 4.4vw, 5.6rem);
  line-height: 0.95; letter-spacing: -0.04em;
  max-width: 16ch;
}
.h3 {
  font-weight: 700;
  font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.7rem);
  line-height: 1.02; letter-spacing: -0.03em;
  max-width: 22ch;
}
.lede { font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -0.012em; max-width: 44ch; margin: 0; text-wrap: pretty; }
.body { max-width: 60ch; color: var(--sc-ink-soft); margin: 0; text-wrap: pretty; }
.body + .body { margin-top: var(--sc-4); }
.body strong, .lede strong { color: var(--sc-ink); font-weight: 600; }
.kicker {
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0;
}
a { transition: color var(--sc-d-fast) var(--sc-ease-out); }
.go {
  display: inline-flex; gap: 0.45em; align-items: baseline;
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 0.1em;
}
.go span { transition: transform var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .go:hover span { transform: translateX(4px); }
  .go:hover { color: var(--sc-accent); }
}
.go:active { transform: translateY(1px); }

/* ------------------------------------------------ the red pen -------- */
/* Signature move. Each mark is an SVG the page sizes to its real text box
   (script below), drawn by scroll: --sc-p is the progress of the nearest act,
   --a is where the stroke starts and --len how much scroll it takes. */
.pen { position: relative; white-space: nowrap; }
.pen > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pen path {
  fill: none; stroke: var(--pen); stroke-width: var(--pen-w, 3);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--sc-p, 1) - var(--a, 0.3)) / var(--len, 0.14)), 1));
}

/* --------------------------------------------------- chrome ---------- */
/* The folio lives in the side margins, set vertically, so it never sits
   over a line of copy. Difference blending inverts it on either ground. */
.folio, .folio__cta {
  position: fixed; z-index: var(--sc-z-chrome); bottom: 1.5rem;
  width: var(--sc-gutter); display: flex; justify-content: center;
  writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg);
  font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); mix-blend-mode: difference; margin: 0;
}
.folio { left: 0; pointer-events: none; }
.folio__cta { right: 0; align-items: flex-end; text-decoration: none; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
html[data-ch="Contact"] .folio__cta { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .folio, .folio__cta { display: none; } }

/* ------------------------------------------------ portrait video --- */
/* Plays, pauses or replays a portrait clip (site.js); top right of its frame, clear of the head.
   The frame itself ignores the pointer (Safari redraws a hovered video without its blend).
   White, because the frame is multiplied onto the paper: it reads as paper, over the clip or not. */
.portrait-control {
  position: absolute; z-index: 3; top: clamp(0.75rem, 5%, 2.5rem); right: clamp(0.5rem, 6%, 3rem); pointer-events: auto; cursor: pointer;
  padding: 0.55em 0.9em; border: 1px solid var(--sc-hairline-strong); border-radius: 0; background: #fff; color: var(--sc-ink-soft);
  font: 600 var(--sc-t-xs) / 1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.portrait-control:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.portrait-control:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ------------------------------------------------ back to top ------ */
/* An arrow box in the right margin, one gap inside the folio's "Get in touch", which runs up
   the outer edge (site.js shows the arrow once the reader is past the opening). On phones there
   is no folio, so it sits at the content edge and the closing rows leave room for it.
   Difference-blended like the folio, so it reads on paper and on ink. */
:root { --totop-right: calc(1.25rem + var(--sc-3)); }
/* How far the arrow (plus one gap) reaches past the content edge into the page; 0 when the margin holds it. */
:root { --totop-reach: max(0px, calc(var(--totop-right) + 2.75rem + var(--sc-5) - var(--sc-gutter) - (100vw - min(100vw, var(--sc-maxw))) / 2)); }
@media (max-width: 860px) { :root { --totop-right: var(--sc-gutter); } }  /* no folio on phones */
.totop {
  position: fixed; z-index: var(--sc-z-chrome); right: var(--totop-right); bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid currentColor; font-size: 1rem;
  color: var(--paper); mix-blend-mode: difference; text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base), background var(--sc-d-fast) var(--sc-ease-out);
}
.totop.is-shown { opacity: 1; visibility: visible; transition: opacity var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out); }
.totop:hover, .totop:focus-visible { background: var(--paper); color: var(--ink); }
/* An inner page's closing row sits level with the arrow, and its links end with its rule. Where the
   margin is too narrow for the arrow, the rule and links stop one gap short of it together. On phones
   the arrow shares the row, so only the links leave it room and the rule runs full width. */
.totop ~ .plate { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.totop ~ .plate .plate__foot { align-items: center; margin-right: var(--totop-reach); }
@media (max-width: 860px) { .totop ~ .plate .plate__foot { margin-right: 0; padding-right: calc(2.75rem + var(--sc-5)); } }
.totop ~ .plate .plate__foot ul { min-height: 2.75rem; align-items: center; }

/* ------------------------------------------------ nav + buttons ---- */
.nav { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--sc-5); }
.nav .mark { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; text-decoration: none; }
.nav ul { display: flex; gap: clamp(1rem, 3vw, 2.5rem); list-style: none; margin: 0; padding: 0; font-weight: 500; }
.nav ul a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .nav ul a:hover { color: var(--sc-accent); } }
.ctas { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6); align-items: center; margin: 0; }
.btn {
  display: inline-flex; gap: 0.5em; align-items: center;
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: 0.85em 1.4em; font-weight: 600; text-decoration: none;
  transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--sc-accent); color: var(--sc-accent-ink); } }
.btn:active { transform: scale(0.97); }
.plain { font-weight: 600; text-underline-offset: 0.3em; }
/* The language switch: a small line globe at the end of the nav that opens a menu of the two
   languages, in the margin labels' grey. */
.nav__lang { position: relative; align-self: center; }
.nav__lang summary { display: block; list-style: none; cursor: pointer; color: var(--sc-ink-soft); }
.nav__lang summary::-webkit-details-marker { display: none; }
.nav__lang summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.nav__lang svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
.nav__lang details[open] summary { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .nav__lang summary:hover { color: var(--sc-accent); } }
.nav .nav__lang .nav__langs {
  position: absolute; z-index: 5; top: calc(100% + 0.75rem); right: -0.75rem;
  display: grid; gap: 0; min-width: 8.5rem; padding: var(--sc-2) 0; margin: 0;
  background: var(--paper); border: 1px solid var(--sc-hairline-strong); box-shadow: 0 0.5rem 1.5rem rgb(17 17 16 / 0.08);
  font-size: var(--sc-t-sm);
}
.nav__langs a { display: block; padding: var(--sc-2) var(--sc-4); white-space: nowrap; }
.nav__langs [aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: var(--pen); }
/* Narrow phones: the longer Spanish labels need a little less space and size to stay on one line. */
@media (max-width: 400px) {
  .nav ul { gap: 0.875rem; }
  :lang(es) .nav ul { gap: 0.625rem; font-size: 0.8125rem; }
  :lang(es) .nav .mark { font-size: 1.0625rem; }
}
.nav [aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: var(--pen); }

/* ------------------------------------------------ inner pages -------- */
/* The title block every inner page opens with. */
.page-head { padding-block: clamp(2.5rem, 10vh, 7rem) var(--sc-section); }
.page-head .h1 { max-width: 14ch; }  /* the standard headline size, same as the homepage */
.page-head .lede { margin-top: var(--sc-6); font-size: var(--sc-t-xl); max-width: 36ch; }
.page-head .lede + .lede { margin-top: var(--sc-4); }
.chapter { padding-block: var(--sc-section); }
.chapter + .chapter.g-paper, .chapter.g-paper + .chapter.g-paper { border-top: 1px solid var(--sc-hairline); }

/* The closing plate on inner pages: the one question, the one action. */
.plate { padding-block: var(--sc-section) var(--sc-6); }
.plate__q { margin: 0; }
.plate .ctas { margin-top: var(--sc-7); font-size: var(--sc-t-xl); }
.plate .go { border-bottom-width: 3px; }
.plate__foot {
  margin-top: var(--sc-10); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3) var(--sc-6);
  font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
}
/* A footer bar with no closing question (the contact page): just the small print. */
.plate--slim { padding-block: var(--sc-5); }
.plate--slim .plate__foot { margin-top: 0; padding-top: 0; border-top: 0; }
.plate__foot ul { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); list-style: none; margin: 0; padding: 0; }
.plate__foot a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .plate__foot a:hover { color: var(--sc-ink); } }
/* ------------------------------------------------ evidence parts --- */
/* Figures and the severity bar: used on the homepage and the projects page. */
.figs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sc-6); margin: var(--sc-4) 0 0; }  /* one column per figure */
.figs > div { display: flex; flex-direction: column-reverse; gap: var(--sc-2); border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.figs dd { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-variation-settings: "wdth" 100;
           font-size: clamp(2.6rem, 1rem + 5vw, 6.2rem); line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.figs dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* Severity: one part-to-whole bar on a single-hue ramp (darker = more
   severe), 2px ground gaps, every segment labelled with its count. */
.sev { margin: var(--sc-5) 0 0; display: grid; gap: var(--sc-3); }
.sev__bar { display: flex; gap: 2px; height: 14px; }
.sev__bar > span { flex: var(--n) 1 0; min-width: 4px; background: var(--c); }
.sev__key { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); list-style: none; margin: 0; padding: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.sev__key li { display: flex; align-items: baseline; gap: 0.45em; }
.sev__key li::before { content: ""; width: 10px; height: 10px; background: var(--c); align-self: center; }
.sev__key b { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.s1 { --c: #111110; } .s2 { --c: #45413B; } .s3 { --c: #837D72; } .s4 { --c: #BDB6AA; }

/* Smaller figures for a project inside a section: the same parts at a step down. A figure can
   show a before value small and soft ahead of the after value. */
.figs--sm dd { font-size: clamp(2rem, 0.8rem + 2.6vw, 3.6rem); }

/* ------------------------------------------------ decision types ---- */
/* Every system diagram labels each step by who decides it: rules (a hollow square), AI (a red
   diamond) or a person (a solid dot). Shape, word and colour together, so no one carries it alone. */
.t { display: inline-flex; align-items: center; gap: 0.5em; font: 600 0.6875rem / 1 var(--sc-font-text); letter-spacing: 0.1em;
     text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
.t::before { content: ""; flex: none; width: 0.62em; height: 0.62em; box-sizing: border-box; }
.t--rules::before { border: 1.5px solid currentColor; }
.t--ai { color: var(--sc-accent); }
.t--ai::before { background: currentColor; transform: rotate(45deg) scale(0.86); }
.t--human::before { background: currentColor; border-radius: 50%; }

/* A system as a chain of steps, top to bottom. Each step is a box, styled by its decision type;
   the ends (where work comes in and goes out) are plain text. --sd-w sets the box width; the
   wires run down the middle of it. */
.sd { --sd-w: 100%; --sd-gap: 1.35rem; --sd-x: calc(min(var(--sd-w), 100%) / 2);
      list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sd-gap); justify-items: start; align-content: start; }
.sd > li { position: relative; width: min(var(--sd-w), 100%); box-sizing: border-box; }
.sd > li + li::before { content: ""; position: absolute; left: var(--sd-x); top: calc(-1 * var(--sd-gap)); width: 1px; height: var(--sd-gap); background: var(--sc-ink-soft); }
.sd > li + li::after, .sd__in::before, .sd__in::after {
  content: ""; position: absolute; top: -7px; width: 6px; height: 6px; box-sizing: border-box;
  border: solid var(--sc-ink-soft); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.sd > li + li::after { left: calc(var(--sd-x) - 2.5px); }
.sd__n { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 0.75rem;
         padding: 0.7rem 0.9rem; border: 1px solid var(--sc-ink); background: var(--sc-canvas);
         font-family: var(--sc-font-display); font-weight: 650; font-variation-settings: "wdth" 100;
         font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem); letter-spacing: -0.015em; line-height: 1.2; }
.sd__n.is-ai { border-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); }
.sd__n.is-human { background: var(--sc-ink); color: var(--sc-canvas); }
.sd__n.is-human .t { color: inherit; }
.sd__io { text-align: center; font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100;
          font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); letter-spacing: -0.02em; line-height: 1.2; }
.sd__io small { display: block; margin-top: 0.3rem; font: 500 var(--sc-t-sm) / 1.4 var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
/* A fork: three steps side by side, wired in and out along a bar across their centres. */
.sd__fork { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sd__fork .sd__n { flex-direction: column; justify-content: flex-start; padding: 0.65rem 0.7rem; }
.sd__in, .sd__out { position: absolute; left: calc((100% - 1rem) / 6); right: calc((100% - 1rem) / 6); height: calc(var(--sd-gap) / 2);
                    border: 1px solid var(--sc-ink-soft); pointer-events: none; }
.sd__in { top: calc(var(--sd-gap) / -2); border-bottom: 0; }
.sd__in::before { left: -3.5px; top: calc(var(--sd-gap) / 2 - 8px); }  /* inside the border box, so 1px in */
.sd__in::after { right: -3.5px; top: calc(var(--sd-gap) / 2 - 8px); }
.sd__out { bottom: calc(var(--sd-gap) / -2); border-top: 0; }
/* A run of steps with a note beside it, held by a red bracket. */
.sd__group { display: grid; grid-template-columns: min(var(--sd-w), 100%) minmax(0, 1fr); column-gap: 1.25rem; }
.sd > li.sd__group { width: 100%; }
.sd__note { position: relative; display: flex; align-items: center; margin: 0; padding-left: 1.4rem; color: var(--sc-accent); font-weight: 600; font-size: var(--sc-t-sm); line-height: 1.4; max-width: 18ch; hyphens: auto; overflow-wrap: break-word; }  /* narrow column: long words hyphenate rather than spill out */
.sd__note::before { content: ""; position: absolute; left: 0; top: 0.25rem; bottom: 0.25rem; width: 0.55rem; border: 1.5px solid var(--pen); border-left: 0; }
.sd-fig { margin: 0; display: grid; gap: var(--sc-6); align-content: start; }
.sd-fig figcaption { font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100;
                     font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.55rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 30ch; }

/* A project told in two columns: the copy, and what shows it (a diagram, a chart). With
   --sticky the copy holds its place while a long diagram scrolls past it. */
.pj { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sc-6) var(--sc-9); align-items: start; }
.pj--sticky > :first-child { position: sticky; top: var(--sc-7); }
.pj__copy { display: grid; gap: var(--sc-4); align-content: start; }
.pj__copy .body + .body { margin-top: 0; }
.pj__copy .go { justify-self: start; margin-top: var(--sc-3); }


/* ------------------------------------------------ floods ------------- */
/* A pinned stage that starts on the previous ground and is swept by the next
   one on a diagonal. --v runs 0 to 1 from the moment the stage's top passes
   65% down the viewport until it has been pinned for data-flood viewports,
   so most of the sweep happens with the stage filling the screen. */
.flood { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
[data-flood] {
  --t: clamp(0, var(--v, 1), 1);
  --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
}
.flood__fill {
  position: absolute; inset: 0;
  background: var(--ink);
  /* A diagonal edge (rising 32 degrees to the right) that enters at the bottom-right
     corner at e = 0 and clears the top-left corner at e = 1. Drawn as a clip on a
     full-frame layer, so anything inside it keeps screen coordinates. */
  --c: calc((1 - var(--e)) * (100vh + 62.49vw));
  clip-path: polygon(-100% calc(var(--c) + 62.49vw), 200% calc(var(--c) - 124.98vw), 200% 1000%, -100% 1000%);
}
[data-flood]:focus-within { --v: 1; --k: 1; --r: 1; }
/* The section before a flood is held (top set by site.js) and the flood's stage
   starts see-through, so the sweep covers a screen that has stopped moving. */
.cover > .cover__under { position: sticky; z-index: 0; }  /* beats a section's own position: relative */
/* As the ink arrives on the held title page, everything but the headline (and
   the portrait) steps aside. */
.cover > .cover__under .nav,
.cover > .cover__under .title__foot, .cover > .cover__under .title__scroll,
.cover > .cover__under .portrait-control { opacity: calc(1 - clamp(0, var(--v, 0) * 3, 1)); }
.cover [data-flood] { background: transparent; }
/* The same sweep, fixed to the viewport, over whatever is on screen. It shows
   only while the sweep is under way; at --v 1 the pinned stage underneath is
   already fully ink, so handing over is invisible. */
.sweep {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: clip;
  --t: clamp(0, var(--v, 0), 1);
  --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  opacity: calc(clamp(0, var(--v, 0) * 1000, 1) * clamp(0, (1 - var(--v, 0)) * 1000, 1));
}


@media (max-width: 860px) {
  .nav ul { gap: 0.9rem; font-size: var(--sc-t-sm); }
  .figs { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: var(--sc-4); }
  .figs > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: var(--sc-4); }
  .figs dd { font-size: clamp(2.4rem, 12vw, 3.4rem); min-width: 4ch; }
  .pj { grid-template-columns: minmax(0, 1fr); }
  .figs--sm > div { flex-direction: column-reverse; align-items: flex-start; gap: var(--sc-1); }
  .pj--sticky > :first-child { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .flood__fill { clip-path: none; opacity: var(--t); }
}
/* The narrowest phones (320px): the whole rem scale steps down a little so long
   words like "seleccionado" and the nav still fit. */
@media (max-width: 340px) {
  html { font-size: 87.5%; }
}