/**
 * notebook2026.css — the cuaderno reader: DESKcuaderno "PANTALLA COMPLETA"
 * (13a2ca86…32c5) plus the reading sheet from "IDEA PANTALLA" (148874dd…8557).
 *
 * The letter IS the screen (Denis, 31-ago-2026: "full screen igual que los
 * demás" — the board is literally named PANTALLA COMPLETA). The #444 desk the
 * board draws around it is Penpot presentation, like `_Mouse`: the white
 * 1520x920 area is the site's own canvas, so `--k` runs over 1520 like every
 * other page and every coordinate below is the board's x/y minus the
 * letter's 78,146 offset. Above 1520 the canvas centres, same as home.
 *
 * Self-contained (no desk2026.css): that sheet positions `.fl-logo`/`.fl-nav`
 * for the home frames, and importing it to fight its offsets with overrides
 * would leave two sources for every number.
 */

:root {
  --k: calc(min(100vw, 1520px) / 1520);
  /* The reading sheet's own scale, UNCAPPED (Denis, 31-ago-2026: the sheet
     is "full height con esos paddings y el width adaptativo a la ventana"):
     unlike the letter, it keeps growing with the window past 1520. Below
     1520 it equals --k, so the parity window measures the file's numbers. */
  --kl: calc(100vw / 1520);
  --fl-track: 0.04em;
}

* {
  box-sizing: border-box;
}

/* `overflow-x: hidden` on html ONLY. On html AND body it makes body its own
   scroll container (no propagation to the viewport when both are set), and
   the reader's focus() then scrolls the body underneath the window's zero —
   the letter measured at -37 with scrollY 0 in a 700-tall window. One
   scroller: the viewport. (desk2026.css still sets both; nothing there
   focuses into overflow, but the same trap sleeps there.) */
html {
  overflow-x: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.fl-display {
  font-family: 'Gloock', Georgia, serif;
  font-weight: 400;
  letter-spacing: var(--fl-track);
  line-height: 1.2;
  white-space: nowrap;
}

.fl-text {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* Visually hidden, still focusable — same pattern as the home's a11y notes. */
.fl-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── the page ──────────────────────────────────────────────────────
   The letter is the whole screen: 1520 wide, centred above that. */

.fl-board {
  position: relative;
  width: calc(1520 * var(--k));
  margin: 0 auto;
}

/* letter — the full-screen page. Everything on it is absolute in its own
   1520x920 coordinates. Never shorter than the window (full screen, like the
   hero's `100svh`) NOR than its file 920: the open sheet reaches 880 and the
   veil must outlast it, or its cut edge shows under the sheet in a short
   window. With more articles it grows past both and the page scrolls. The
   +80 of air under the last entry is an invention — the board only draws
   three articles. */
.fl-letter {
  position: relative;
  width: calc(1520 * var(--k));
  min-height: max(calc(max(920, 579 + var(--rows, 0) * 76 + 80) * var(--k)), 100svh);
  background: #ffffff;
}

/* Reading state: the second frame draws the letter with a 37.2 layer blur
   and a 25% black fill over its white — the reader floats on a blurred,
   veiled letter. The veil is its own element (a pseudo-element would be
   blurred along with the letter). The opening ANIMATES (Denis, 31-ago-2026:
   "un efecto de aparición"): blur and veil ramp in, the sheet rises — the
   boards are static, so the 0.35s and the FAQ's curve are the invented
   part. `blur(0)` at rest and not `none`: `none` does not interpolate. */
.fl-letter {
  filter: blur(0);
  transition: filter 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.is-reading .fl-letter {
  /* The board draws 37.2; the 18 is Denis's order (31-ago-2026, "menos
     agresivo el blur") — a deliberate deviation from the file. */
  filter: blur(calc(18 * var(--k)));
}

/* The veil is the WINDOW, not the canvas (Denis, 31-ago-2026: the reading
   view is full screen like everything else). Fixed: above 1520 an absolute
   veil stopped at the letter's edge and left plain white bands either side
   of the blur, and in short windows it must keep covering while the page
   scrolls to the sheet's bottom. */
.fl-veil {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.is-reading .fl-veil {
  opacity: 1;
}

.fl-veil[hidden] {
  display: none;
}

/* ── nav on the letter — links at y 37, Lato 16 Light ────────────── */

.fl-letter-nav a {
  position: absolute;
  top: calc(37 * var(--k));
  font-size: calc(16 * var(--k));
  font-weight: 300;
  letter-spacing: normal;
  color: #000;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.fl-letter-nav a:focus-visible {
  opacity: 0.6;
}

.fl-letter-nav a[data-nav='studio'] { left: calc(73 * var(--k)); }
.fl-letter-nav a[data-nav='projects'] { left: calc(187 * var(--k)); }
.fl-letter-nav a[data-nav='formatos'] { left: calc(308 * var(--k)); }
.fl-letter-nav a[data-nav='contact'] { left: calc(429 * var(--k)); }

/* logo — 699,37 · Gloock 48. Same two overlapping nodes as the home logo:
   `f` at 0, `luint` at +24. */
.fl-letter-logo {
  position: absolute;
  left: calc(699 * var(--k));
  top: calc(37 * var(--k));
  width: calc(138 * var(--k));
  height: calc(51 * var(--k));
  color: #000;
  text-decoration: none;
}

.fl-letter-logo span {
  position: absolute;
  top: 0;
  font-size: calc(48 * var(--k));
}

.fl-letter-logo-f {
  left: 0;
  letter-spacing: normal;
}

.fl-letter-logo-rest {
  left: calc(24 * var(--k));
}

/* ── índice — 162,369 · Gloock 24, its dash at 240,392 (23x2) ────── */

.fl-index-h {
  position: absolute;
  left: calc(162 * var(--k));
  top: calc(369 * var(--k));
  margin: 0;
  font-size: calc(24 * var(--k));
  color: #000;
}

.fl-index-rule {
  position: absolute;
  left: calc(240 * var(--k));
  top: calc(392 * var(--k));
  width: calc(23 * var(--k));
  height: max(1px, calc(2 * var(--k)));
  background: #000;
}

/* The list is the band's column, in FLOW since 3-sep-2026: a hovered row
   may grow (its excerpt drops under a long title) and the rows below have
   to move with it (Denis: "verse todo entero y debe desplazar el texto
   hacia el lateral adaptando la vista, basicamente empujar elementos").
   Left and top are the board's 142/489; the width runs to the canvas's
   40 margin so a full title and its excerpt have room beside each other. */
.fl-index {
  position: absolute;
  left: calc(142 * var(--k));
  top: calc(489 * var(--k));
  width: calc(1338 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One row per article, a 76-pitch band from 489: hairline at x 142, title in
   Lato 32 at x 161, 14 under it. The board draws rows at 503/579/655 with
   rules at 565/638 — hand jitter; one pitch serves all, so rules ride at
   title−14 (row-2's lands 641, 3 off the board's 638 — named, not hidden).
   The "featured" look the board gives the FIRST row — Gloock at 215,503 with
   the excerpt beside at 735,504 — is the HOVER state of any row: the
   `_Mouse` blob is the pointer sitting on it (Denis, 31-ago-2026). At rest
   every row is equal; row-0's rule at 489 is an invention, the board hides
   it under the hovered state. The li is the hover band. */
.fl-ind-item {
  position: relative;
  /* The band: the whole strip is one hover surface, like a FAQ question's
     line. 76 tall at rest (the board's pitch: 503/579/655); taller only
     while hovered with the excerpt underneath. The Gloock twin and the
     excerpt are flex items — beside each other when they fit, the excerpt
     wrapping under the title when they do not. */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: calc(20 * var(--k));
  row-gap: calc(8 * var(--k));
  box-sizing: border-box;
  min-height: calc(76 * var(--k));
  /* 73 on the left is the twin's x — and the wrapped excerpt's, so it lines
     up under the title instead of under the rule. */
  padding: calc(14 * var(--k)) 0 calc(14 * var(--k)) calc(73 * var(--k));
  /* Entrance (Denis, 31-ago-2026: "efecto de aparición"): the rows fade up
     one after another on load. Invented — the board is static; curve and
     restraint from the FAQ. `both` keeps them hidden through the delay. */
  animation: fl-aparece 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(0.08s + var(--fi) * 0.1s);
}

@keyframes fl-aparece {
  from {
    opacity: 0;
    transform: translateY(calc(14 * var(--k)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The rule does NOT take part in the hover (Denis, 1-sep-2026: "no quiero que
   desaparezcan") — the board draws the featured row without its rule, but the
   separators stay put; only title and excerpt crossfade. */
.fl-ind-item .fl-ind-rule {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(486 * var(--k));
  height: max(1px, calc(1 * var(--k)));
  background: #000;
}

/* The link is the Gloock twin's box in flow (73 from the rule, at least the
   board's 500 so a short title still leaves the excerpt at 593); its ::after
   stretches over the whole band, so the strip stays clickable end to end. */
.fl-ind-item a {
  position: static;
  display: block;
  flex: 0 0 auto;
  min-width: calc(500 * var(--k));
  color: #000;
  text-decoration: none;
}

.fl-ind-item a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* The two faces of the title crossfade like the FAQ opens — nothing moves,
   ink swaps: Lato at 19 (161 of the letter) at rest, Gloock at 73 (215) on
   hover, both 14 under the rule. */
.fl-ind-title {
  position: absolute;
  left: calc(19 * var(--k));
  top: calc(14 * var(--k));
  /* The rest face is nowrap (`.fl-text`); cap it at the Gloock twin's 657 so
     a long future title truncates instead of running past the band. The
     ellipsis is an invention — the board only draws short titles. */
  max-width: calc(657 * var(--k));
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(32 * var(--k));
  letter-spacing: var(--fl-track);
  transition: opacity 0.3s ease;
}

/* The twin is WHOLE, one line, as wide as the title is: the board's 657 box
   only fits its short title, and a real one wrapped over the next row (Denis,
   3-sep-2026: "bug cuaderno", then "tiene que ser como en penpot, verse todo
   entero"). What gives way is the excerpt, beside or under it. */
.fl-ind-title-g {
  display: block;
  font-size: calc(32 * var(--k));
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* At rest the excerpt is out of the flow (absolute, invisible) so a long
   title does not stretch its row before anyone points at it; on hover it
   joins the flex row — after the twin when there is room (the board's 593
   for a short title), under it when there is not — and the row grows. */
.fl-ind-excerpt {
  position: absolute;
  left: calc(593 * var(--k));
  top: calc(15 * var(--k));
  width: calc(345 * var(--k));
  margin: calc(1 * var(--k)) 0 0;
  font-size: calc(16 * var(--k));
  font-style: italic;
  letter-spacing: var(--fl-track);
  color: #000;
  white-space: normal;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* A 4-line excerpt dips ~16px into the next row's band: without this the
     pointer would flip rows along an invisible text edge. The band decides
     the hover; the excerpt is ink, not surface. */
  pointer-events: none;
}

/* Hover, keyboard focus, and the battery's `.is-hover` hook (added by
   notebook.js only under `?fixture=1&hover=1`, so parity can photograph the
   state the board draws) are the same state. `:focus-visible` and not
   `:focus-within`: a mouse click also focuses the link, and the row would
   stay frozen in Gloock after coming back from the reader. */
.fl-ind-item:hover .fl-ind-title,
.fl-ind-item:has(a:focus-visible) .fl-ind-title,
.fl-ind-item.is-hover .fl-ind-title {
  opacity: 0;
}

.fl-ind-item:hover .fl-ind-title-g,
.fl-ind-item:has(a:focus-visible) .fl-ind-title-g,
.fl-ind-item.is-hover .fl-ind-title-g,
.fl-ind-item:hover .fl-ind-excerpt,
.fl-ind-item:has(a:focus-visible) .fl-ind-excerpt,
.fl-ind-item.is-hover .fl-ind-excerpt {
  position: static;
  opacity: 1;
}

/* ── the reading sheet (IDEA PANTALLA) — a full-screen panel, not a card.
   The board draws it at 425,37 · 670x843 in a 1520x920 screen: 37 of air
   above, 40 below, 425 each side. Those proportions ARE the layout: height
   is the window minus the airs, width rides the window (670/1520 of it, via
   `--kl`). At 1520x920 the box is exactly the file's 670x843. It lives
   outside the letter element so the blur does not reach it. No shadow: the
   blur and the veil behind are what lift it off the page. */
.fl-reader {
  position: absolute;
  /* Centred against the WINDOW, not the board: the board is the letter's
     1520-capped box, and a plain `left: 425*kl` would ride on its gutter in
     wide windows. The board is window-centred, so 50% of it is the window's
     centre; half the sheet (335) back from there lands on the board's own
     425 at every width. */
  left: 50%;
  margin-left: calc(-335 * var(--kl));
  top: calc(37 * var(--kl));
  width: calc(670 * var(--kl));
  height: calc(100svh - 77 * var(--kl));
  /* Invented guard, not in the board: keeps the column real in absurdly
     short windows; past it the page scrolls under the fixed veil. */
  min-height: calc(400 * var(--kl));
  background: #ffffff;
  border-radius: calc(5 * var(--kl));
  outline: none;
  /* Closed: invisible and a hair sunken; `is-reading` raises it while fading
     in. notebook.js removes `hidden` a couple of frames before adding the
     class so the transition exists. */
  opacity: 0;
  transform: translateY(calc(14 * var(--kl)));
  transition:
    opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.is-reading .fl-reader {
  opacity: 1;
  transform: none;
}

.fl-reader[hidden] {
  display: none;
}

/* Inside, everything rides `--kl` (the sheet's scale, not the letter's).
   ERGONOMICS OVER THE BOARD (Denis, 31-ago-2026: "hoja de papel, formato
   lectura clásico, que no canse — mantener las tipografías"): the board's
   text block is Lato 11/1.2 in a 302 column hugging the left; what reads
   comfortably is a ~60-character measure, so the block becomes Lato 16 at
   line-height 1.55 in a 470 column CENTRED in the sheet (100 margin each
   side, a classic page). Families untouched — they are the identity.
   Title on the same margin as the text block. */
.fl-reader-h {
  position: absolute;
  left: calc(100 * var(--kl));
  top: calc(79 * var(--kl));
  width: calc(470 * var(--kl));
  margin: 0;
  font-size: calc(32 * var(--kl));
  font-weight: 400;
  letter-spacing: normal;
  color: #000;
  white-space: normal;
}

/* body — the reading column, top at the file's 217, bottom anchored 67 over
   the sheet's edge: it STRETCHES with the sheet, so a taller window reads
   more per page — medir() recounts the pages. One column visible; the gap
   60 only exists between pages and the page step is 470+60. */
.fl-reader-body {
  position: absolute;
  left: calc(100 * var(--kl));
  top: calc(217 * var(--kl));
  width: calc(470 * var(--kl));
  bottom: calc(67 * var(--kl));
  overflow: hidden;
}

.fl-reader-flow {
  height: 100%;
  column-width: calc(470 * var(--kl));
  column-gap: calc(60 * var(--kl));
  column-fill: auto;
  transform: translateX(calc(var(--page, 0) * -530 * var(--kl)));
  transition: transform 0.35s ease;
}

.fl-reader-flow p {
  margin: 0;
  font-family: 'Lato', Arial, sans-serif;
  font-size: calc(16 * var(--kl));
  line-height: 1.55;
  letter-spacing: normal;
  color: #000;
}

/* Air between paragraphs, no indent: light reading. */
.fl-reader-flow p + p {
  margin-top: 0.85em;
}

/* the page turn — OUT of the sheet, at the window's edges, white (Denis,
   1-sep-2026: "sacar las flechas de las hojas como en la navegación de esta
   vista por flechas... al color blanco"). The pattern and the numbers are
   the project viewer's board (2f4f3dd5…): arrows 40 in from either screen
   edge, riding at 479 of its 920 — kept as a proportion of the window.
   Fixed like the veil: the window is their frame, not the sheet; inside
   `.fl-reader` in the DOM so the reader dialog keeps them for the screen
   reader. The glyph is still the cuaderno's own arrow, in white. */
.fl-reader-next,
.fl-reader-prev {
  position: fixed;
  /* The glyph stays the board's 33x12 at 40 from the edge and 479/920 of
     the window; the BUTTON is 24 bigger on every side (81x60), so the
     pointer has a target and not a hairline (Denis, 3-sep-2026: "poco
     radio de deteccion, ampliar"). Background, not padding: the glyph
     is drawn at its own size in the middle of the larger box. */
  top: calc(479 / 920 * 100svh - 30 * var(--kl));
  width: calc(81 * var(--kl));
  height: calc(60 * var(--kl));
  padding: 0;
  border: 0;
  background: url('/assets/images/2026/arrow-page-white.svg') center / calc(33 * var(--kl)) calc(12 * var(--kl)) no-repeat;
  cursor: pointer;
}

.fl-reader-next {
  right: calc(16 * var(--kl));
}

.fl-reader-prev {
  left: calc(16 * var(--kl));
  transform: scaleX(-1);
}

.fl-reader-next[hidden],
.fl-reader-prev[hidden] {
  display: none;
}

.fl-reader-next:focus-visible,
.fl-reader-prev:focus-visible {
  opacity: 0.6;
}

/* the close — position from Denis's spec (31-ago), size corrected 1-sep:
   the x-height of the TITLE's Gloock 32 ("la altura de caja de las
   minúsculas del título") — measured in the live font: 17. WHITE, outside
   the sheet, top-left: glyph top on the sheet's top edge, 24 of air to it;
   the button box pads the hit area around it. */
.fl-reader-close {
  position: absolute;
  top: calc(-8 * var(--kl));
  right: calc(100% + 16 * var(--kl));
  width: calc(33 * var(--kl));
  height: calc(33 * var(--kl));
  padding: 0;
  border: 0;
  background:
    url('/assets/images/2026/x-close.svg') center /
    calc(17 * var(--kl)) calc(17 * var(--kl)) no-repeat;
  cursor: pointer;
}

.fl-reader-close:focus-visible {
  opacity: 0.6;
}

.fl-reader-page {
  position: absolute;
  left: calc(594 * var(--kl));
  bottom: calc(28.8 * var(--kl));
  margin: 0;
  font-size: calc(11 * var(--kl));
  color: #000;
}

/* `&still=1` (class set by notebook.js): the page held still for the
   battery — the checks photograph settled states, the way `?pano=off`
   stills the home page's panoramas. */
.is-still .fl-letter,
.is-still .fl-veil,
.is-still .fl-reader,
.is-still .fl-ind-item {
  animation: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .fl-reader-flow,
  .fl-letter-nav a,
  .fl-letter,
  .fl-veil,
  .fl-reader,
  .fl-ind-title,
  .fl-ind-title-g,
  .fl-ind-excerpt {
    transition: none;
  }

  .fl-ind-item {
    animation: none;
  }
}