/* BLOG Nº 01, experimental edition. Opt-in layer of the brand: the motion is aggressive (hard cuts, stepped
   reveals, takeovers); form stays the brand's (square, hairlines, no shadows, no blur). Paper only, no dark mode. */
:root {
  --black: #000000;
  --white: #ffffff;
  --graphite: #2f2f2f;
  --ghost: #c9c9c9;
  --pink: #ff0088;
  --orange: #fa8334;
  --gold: #bf9b4e;
  --font-strike: "Cinzel Decorative", "Times New Roman", serif;
  --font-voice: "Newsreader", Georgia, serif;
  --font-read: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-system: "Space Mono", ui-monospace, monospace;
  --gutter: max(20px, 5vw);
  --bar-h: 52px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: clip; }
body.ed {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-read);
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.label {
  font: 600 12px/1.3 var(--font-read);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Bar: white type in difference mode, so it reads on the black cover and on paper. */
.ed-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--bar-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--white);
  mix-blend-mode: difference;
}
.ed-mark {
  font: 700 13px var(--font-system);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.ed-bar-nav { display: flex; gap: 22px; }
.ed-bar-nav a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Ornament: part of the newspaper object only (masthead, back cover). */
.ed-greca {
  height: 18px;
  width: min(760px, 80vw);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 11.5H12M1.5 11.5V.5H10.5V8.5H4.5V3.5H7.5V6' fill='none' stroke='%23bf9b4e' stroke-width='.6'/%3E%3C/svg%3E") repeat-x;
  background-size: auto 100%;
}
.ed-ola {
  height: 16px;
  width: 260px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 7.5H3C6 7.5 7 1 10 1S13 4 11.5 5 9 4.5 9.5 3.5M10 7.5H16' fill='none' stroke='%23000' stroke-width='.5'/%3E%3C/svg%3E") repeat-x;
  background-size: auto 100%;
}

/* A + C · Cover: printed by the press, then the cursor opens a window onto the contents. */
.ed-cover {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.ed-cover.inv { filter: invert(1); }
.ed-ink {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  text-align: center;
  padding: var(--bar-h) var(--gutter) 40px;
}
.ed-mast {
  display: flex;
  font: 400 clamp(84px, 19vw, 280px)/0.9 var(--font-strike);
  letter-spacing: 0.02em;
}
.ed-sub { margin: 0; font: italic 300 clamp(18px, 2vw, 24px)/1.3 var(--font-voice); }
.ed-issue { margin: 0; color: var(--pink); }
.ed.is-printing .ed-mast span:not(.on),
.ed.is-printing .ed-sub,
.ed.is-printing .ed-issue { visibility: hidden; }
.ed.is-printing .ed-greca { width: var(--g, 0px); }

.ed-paper {
  position: absolute;
  inset: 0;
  background: var(--white);
  color: var(--black);
  padding: calc(var(--bar-h) + 28px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  clip-path: inset(var(--t, 50%) var(--r, 50%) var(--b, 50%) var(--l, 50%));
}
.ed-paper p { margin: 0; }
.ed-lede { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 980px; }
.ed-lede p { font: 300 clamp(17px, 1.7vw, 21px)/1.45 var(--font-voice); }
.ed-toc { margin-top: auto; max-width: 1100px; }
.ed-toc a {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--black);
  text-decoration: none;
}
.ed-toc a:last-child { border-bottom: 1px solid var(--black); }
.ed-toc a:hover .t { color: var(--pink); }
.ed-toc .t { font: 400 clamp(22px, 2.6vw, 34px)/1.15 var(--font-voice); }
.ed-toc .t i { display: block; font-weight: 300; font-size: 0.6em; color: var(--graphite); }

/* Essays */
.ed-main { display: block; }
.ed-essay { padding: calc(var(--bar-h) + 64px) var(--gutter) 120px; }
.ed-head {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--black);
}
.ed-meta { margin: 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ed-head h2 {
  margin: 0;
  font: 400 clamp(44px, 7vw, 104px)/0.98 var(--font-voice);
  letter-spacing: -0.015em;
  max-width: 14ch;
  text-wrap: balance;
}
.ed-head h2.mis { text-shadow: 6px -4px 0 var(--pink); transform: translate(-4px, 3px); }
.ed-deck { margin: 0; font: italic 300 clamp(20px, 2.2vw, 28px)/1.3 var(--font-voice); max-width: 40ch; }
.ed-lang { display: flex; gap: 0; }
.ed-lang button {
  background: var(--white);
  border: 1px solid var(--black);
  margin-left: -1px;
  padding: 9px 14px;
  cursor: pointer;
  font: 600 12px/1 var(--font-read);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ed-lang button[aria-pressed="true"] { background: var(--black); color: var(--white); }

/* B · Cuchilla: both languages share one box; the blade decides where Spanish ends and English begins. */
.ed-body {
  position: relative;
  max-width: 700px;
  margin: 48px auto 0;
  display: grid;
}
.ed-layer { grid-area: 1 / 1; min-width: 0; }
.is-bilingual { cursor: none; --x: 100%; }
.is-bilingual .es { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.is-bilingual .en { clip-path: inset(0 0 0 var(--x)); }
.ed-blade {
  position: absolute;
  top: -24px;
  bottom: 0;
  left: var(--x);
  border-left: 1px solid var(--pink);
  pointer-events: none;
}
/* Chrome counts the label's untransformed box as overflow; keep it from widening the page. */
.ed-essay { overflow-x: clip; }
.ed-blade .label {
  position: sticky;
  top: calc(var(--bar-h) + 12px);
  display: inline-block;
  transform: translateX(var(--lab, -100%));
  background: var(--white);
  color: var(--pink);
  padding: 2px 8px;
  white-space: nowrap;
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}

/* E · Imprenta: text stays ghost until it crosses the reading line. */
.ed-layer p,
.ed-layer li {
  margin: 0 0 18px;
  font: 400 clamp(19px, 1.5vw, 22px)/1.48 var(--font-read);
  hyphens: auto;
}
.ed-layer h2, .ed-layer h3 { margin: 42px 0 16px; font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--font-voice); }
.ed-layer strong { font-weight: 600; }
.ed-layer ul, .ed-layer ol { padding-left: 24px; margin: 0 0 18px; }
.ed-layer hr {
  border: 0;
  height: 30px;
  width: 160px;
  margin: 40px auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30'%3E%3Cpath d='M0 15H65M95 15H160M74 22.5V7.5H86V18.5H78V12.5H82' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ed-layer > p:first-of-type::first-letter {
  float: left;
  font: 400 86px/0.8 var(--font-strike);
  padding: 8px 14px 0 0;
}
.ed-layer > p:first-of-type.flash::first-letter { background: var(--black); color: var(--white); }
.ed.press .ed-layer :is(p, li, h2, h3, .pull) { color: var(--ghost); transition: color 0.36s steps(4); }
.ed.press .ed-layer .inked { color: var(--black); }
.pull {
  margin: 30px 0;
  padding-left: 24px;
  border-left: 1px solid var(--pink);
  font: italic 400 clamp(26px, 2.4vw, 32px)/1.12 var(--font-voice);
  letter-spacing: -0.01em;
}

.ed-line {
  position: fixed;
  left: 0;
  right: 0;
  top: 42vh;
  z-index: 20;
  border-top: 1px solid var(--pink);
  pointer-events: none;
  display: none;
}
.ed-line .label { position: absolute; right: var(--gutter); top: -22px; color: var(--pink); }
.ed.press.reading .ed-line { display: block; }

/* F · Guadaña */
.ed-cala {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  border-top: 1px solid var(--black);
}
.ed-half {
  background: var(--white);
  padding: calc(var(--bar-h) + 56px) var(--gutter) 120px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.ed-half.a { position: relative; }
.ed-half.b { position: absolute; inset: 0; visibility: hidden; }
.ed-half p { margin: 0; }
.ed-half .ed-meta { width: 100%; max-width: 1100px; }
.ed-half h2 { margin: 18px 0 0; font: 400 clamp(54px, 8vw, 116px)/0.95 var(--font-strike); letter-spacing: 0.02em; }
.ed-ctx { font: italic 300 clamp(19px, 2vw, 24px)/1.3 var(--font-voice); }
.ed-verses {
  margin-top: 26px;
  padding-top: 32px;
  border-top: 1px solid var(--black);
  width: min(100%, 980px);
  columns: 3 230px;
  column-gap: 52px;
  column-rule: 1px solid var(--black);
}
.v { break-inside: avoid; margin: 0 0 26px; font: 400 clamp(17px, 1.4vw, 19px)/1.34 var(--font-read); }
.v b { display: block; margin-bottom: 4px; font: 600 11.5px var(--font-read); letter-spacing: 0.16em; text-transform: uppercase; }
.ed-cala .ed-verses .v:last-child { cursor: pointer; }
.ed-cala[data-who="dieguito"] .v:not([data-who="dieguito"]),
.ed-cala[data-who="muerte"] .v:not([data-who="muerte"]),
.ed-cala[data-who="x"] .v:not([data-who="x"]) { color: var(--ghost); }
/* Redacted name: a solid black bar, nothing underneath. */
.redacted {
  display: inline-block;
  width: 3.6em;
  height: 0.82em;
  vertical-align: -0.06em;
  background: currentColor;
}

.ed-cala.cut .ed-half.a { clip-path: polygon(0 0, 100% 0, 100% var(--y2, 38%), 0 var(--y1, 74%)); }
.ed-cala.cut .ed-half.b { visibility: visible; clip-path: polygon(0 var(--y1, 74%), 100% var(--y2, 38%), 100% 100%, 0 100%); }
.ed-slash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; clip-path: inset(0 var(--d, 100%) 0 0); }
.ed-slash line { stroke: var(--black); stroke-width: 1; }

/* Back cover */
.ed-back {
  min-height: 100vh;
  background: var(--black);
  color: var(--white);
  padding: calc(var(--bar-h) + 28px) var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.ed-back .ed-greca { width: 100%; }
.ed-sig { margin: auto 0; display: grid; gap: 22px; justify-items: center; text-align: center; }
.ed-sig .name { font: 400 clamp(52px, 8vw, 110px)/1 var(--font-strike); }
.ed-sig .hair { width: 140px; border-top: 1px solid var(--pink); }
.ed-sig .role { font-size: 15px; }
.ed-sig .tag { font: italic 300 clamp(20px, 2.4vw, 30px)/1.3 var(--font-voice); max-width: 26ch; }
.ed-sig .url { color: var(--orange); font-size: 15px; text-decoration: none; }
.ed-filete { display: flex; align-items: center; gap: 12px; width: min(440px, 80vw); color: var(--gold); }
.ed-filete::before, .ed-filete::after { content: ""; flex: 1; border-top: 1px solid currentColor; }
.ed-filete svg { width: 26px; height: 26px; }
.ed-back-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ed-btn {
  border: 1px solid var(--white);
  padding: 12px 18px;
  text-decoration: none;
  font: 600 12px/1.3 var(--font-read);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ed-btn:hover { background: var(--white); color: var(--black); }
.ed-back-folio { margin: 0; width: 100%; display: flex; justify-content: space-between; border-top: 1px solid #444; padding-top: 14px; }

/* G · Pliego: a straight edge on the right; drag it to bring the next page in. */
.ed-grip {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 35;
  width: 16px;
  border-left: 1px solid var(--black);
  background: var(--white);
  cursor: ew-resize;
  touch-action: none;
  display: none;
}
.ed.folding-ready .ed-grip { display: block; }
.ed-fold {
  position: fixed;
  inset: 0;
  z-index: 34;
  pointer-events: none;
  visibility: hidden;
  --x: 100%;
}
.ed-fold.on { visibility: visible; }
.ed-fold-sheet {
  position: absolute;
  inset: 0;
  background: var(--white);
  padding: calc(var(--bar-h) + 64px) var(--gutter) 40px;
  clip-path: inset(0 0 0 var(--x));
}
.ed-fold-sheet p { margin: 0; }
.ed-fold-sheet h3 { margin: 18px 0; font: 400 clamp(44px, 7vw, 104px)/0.98 var(--font-voice); max-width: 14ch; }
.ed-fold-text { font: italic 300 clamp(20px, 2.2vw, 28px)/1.3 var(--font-voice); max-width: 40ch; }
.ed-fold-edge { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 1px solid var(--black); }

/* Visitor hints: bilingual, one at a time, gone once used. */
.ed-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 45;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--white);
  font: 600 12px/1.3 var(--font-read);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: max-content;
  max-width: min(760px, calc(100% - 40px));
  pointer-events: none;
}
.ed-hint.on { display: flex; }
.ed-hint .bl { flex: none; width: 7px; height: 7px; background: var(--pink); animation: ed-blink 1.2s steps(1) infinite; }
.ed-hint .hen { color: #bdbdbd; }
.ed-hint .sep { color: #666; }
@keyframes ed-blink { 50% { visibility: hidden; } }

@media (hover: none) {
  .ed-blade .label { padding: 8px 12px; border: 1px solid var(--pink); }
  .ed-grip { width: 24px; }
}

@media (max-width: 760px) {
  :root { --bar-h: 48px; }
  .ed-bar-mid { display: none; }
  .ed-lede { grid-template-columns: 1fr; gap: 12px; }
  .ed-toc a { grid-template-columns: 60px 1fr; }
  .ed-essay { padding-bottom: 80px; }
  .ed-hint { width: calc(100% - 32px); }
  .ed-layer > p:first-of-type::first-letter { font-size: 64px; }
  .ed-half h2 { font-size: 11vw; }
  .ed-line .label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-hint .bl { animation: none; }
  .ed.press .ed-layer :is(p, li, h2, h3, .pull) { transition: none; }
}