/* ═══════════════════════════════════════════════════════════════════════════
   DISCURSA — PAPER EDITION (design proposal, v3)
   One system for every page: a desk, and sheets of paper laid on it.

   Desk      the page background: warm linen, never content
   Sheet     every block of content is a sheet: grained, torn at the top,
             shadowed, and dealt onto the desk as it scrolls into view
   Stocks    ivory (default) · manila (folders) · ledger (ruled) · ink (dark)
   Ink       teal is the working ink; gold is punctuation only — the dot in
             "discursa." and the word "understood."
   Pencil    hand marks (underlines, circles, notes) draw themselves once
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --desk: #e9e2d3;
  --desk-2: #e2dac9;
  --sheet: #fbf8f1;
  --sheet-2: #f6f1e5;
  --manila: #ecdcb5;
  --manila-2: #e3cf9f;
  --ledger: #f9f7f0;
  --ink: #1b1915;
  --ink-2: #3a362f;
  --muted: #6e685c;
  --rule: rgba(27, 25, 21, 0.14);
  --rule-2: rgba(27, 25, 21, 0.5);
  --teal: #0e6b64;
  --teal-2: #2a8a80;
  --teal-soft: rgba(14, 107, 100, 0.08);
  --pencil: #2f6f69;
  --gold: #c9a96e;
  --stock: #191915;
  --stock-ink: #ece6d8;
  --stock-muted: #a39d8f;
  --stock-teal: #86c9c0;
  --tape: rgba(226, 214, 180, 0.7);

  --display: 'Playfair Display', Georgia, serif;
  --text: 'Newsreader', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --arabic: 'Amiri', 'Noto Naskh Arabic', serif;
  --hand: 'Caveat', 'Segoe Print', cursive;

  --wrap: 1240px;
  --sheet-max: 1340px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* paper grain: fine tooth + long fibres. Shared by every sheet. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .3' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .26 0 0 0 .08 -.025'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .85 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .3' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .86 0 0 0 .05 -.015'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .02' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  /* a torn top edge, used as a mask so it takes the sheet's own colour */
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 7 L9 5.6 L17 7.4 L26 4.9 L35 6.8 L44 5.2 L52 7.9 L61 5.5 L70 6.3 L79 4.4 L88 6.9 L97 5.4 L105 7.6 L114 4.8 L123 6.1 L132 5 L141 7.3 L150 5.6 L158 6.6 L167 4.3 L176 6.9 L185 5.2 L194 7.7 L203 5.1 L211 6.4 L220 4.7 L229 7.1 L238 5.3 L247 6.5 L256 4.6 L264 7.4 L273 5.5 L282 6.2 L291 4.4 L300 6.8 L309 5.1 L317 7.5 L326 5.3 L335 6.4 L344 4.6 L353 7.2 L362 5.5 L370 6.6 L379 4.5 L388 7 L397 5.2 L406 7.6 L415 5 L423 6.3 L432 4.7 L441 6.9 L450 5.4 L459 7.3 L468 5.1 L476 6.2 L485 4.5 L494 7.1 L503 5.3 L512 6.7 L521 4.8 L529 7.4 L538 5.2 L547 6.4 L556 4.6 L565 7 L574 5.5 L582 6.8 L591 5 L600 6.5 L600 14 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ───────────── base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background-color: var(--desk);
  background-image: var(--linen), radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.55), transparent 60%);
  font: 400 20px/1.62 var(--text);
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: rgba(14, 107, 100, 0.18); }
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1.1em; hyphens: auto; }
em { font-style: italic; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sc { font: 600 12px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--teal); color: #fff; padding: 10px 14px; font: 600 13px var(--sans); }
.skip:focus { top: 12px; }

/* page turns between pages (Chrome, Edge, Safari 18+); elsewhere a plain load */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: leaf-out 0.62s var(--ease-io) both; transform-origin: 0 50%; z-index: 2; }
::view-transition-new(root) { animation: leaf-in 0.62s var(--ease-io) both; z-index: 1; }
@keyframes leaf-out { to { transform: perspective(2200px) rotateY(-28deg) translateX(-12%); opacity: 0; filter: brightness(0.94); } }
@keyframes leaf-in { from { transform: scale(0.985); filter: brightness(0.93); } }

/* ───────────── links & buttons ───────────── */
.ink-link {
  font: 600 15px/1 var(--sans); letter-spacing: 0.02em; color: var(--teal); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px; transition: background-size 0.35s ease;
}
.ink-link:hover, .ink-link:focus-visible { background-size: 100% 1px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; white-space: nowrap;
  font: 600 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fbf8f1; background: var(--teal); border: 1px solid var(--teal);
  padding: 14px 20px; border-radius: 2px; position: relative; overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 6px 14px -8px rgba(14,107,100,0.6);
}
.btn::after { /* a sheen, like light across coated card */
  content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease);
}
.btn:hover { background: #0b5853; transform: translateY(-2px); box-shadow: 0 2px 0 rgba(0,0,0,0.1), 0 14px 22px -12px rgba(14,107,100,0.75); }
.btn:hover::after { transform: translateX(120%); }
.btn.ghost { background: transparent; color: var(--teal); box-shadow: none; }
.btn.ghost:hover { background: var(--teal-soft); }

/* ───────────── masthead + nav ───────────── */
.masthead { padding-top: 22px; position: relative; z-index: 3; }
.mast-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; color: var(--muted); padding-bottom: 14px; }
.mast-top .sc:last-child { text-align: right; }
.logo { font: 800 40px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.logo .dot { color: var(--gold); display: inline-block; }
.masthead .logo .dot { animation: dotdrop 1s var(--ease) 0.35s both; }
@keyframes dotdrop { 0% { transform: translateY(-46px); opacity: 0; } 55% { transform: translateY(5px); opacity: 1; } 75% { transform: translateY(-2px); } 100% { transform: none; } }
.double-rule { border: 0; border-top: 2px solid var(--ink); margin: 0; position: relative; transform-origin: left; animation: drawx 1.2s var(--ease) both; }
.double-rule::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--ink); }
@keyframes drawx { from { transform: scaleX(0); } }

nav.navbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--desk) 90%, transparent);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); border-bottom: 1px solid var(--rule); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 60px; }
.nav-left { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.nav-mark { font: 800 22px/1 var(--display); text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s var(--ease); }
.nav-mark .dot { color: var(--gold); }
.scrolled .nav-mark, .nav-mark.always { opacity: 1; transform: none; }
.folio { font: italic 500 16px var(--display); color: var(--teal); white-space: nowrap; opacity: 0; transform: translateY(5px); transition: opacity 0.35s, transform 0.35s var(--ease); }
.folio.on { opacity: 1; transform: none; }
.nav-links { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links > li + li::before { content: ''; position: absolute; left: 0; top: 50%; height: 14px; margin-top: -7px; border-left: 1px solid var(--rule); }
.nav-links a, .nav-links .drop-btn { display: block; padding: 6px 13px; text-decoration: none; color: var(--ink-2); white-space: nowrap; background: none; border: 0; cursor: pointer;
  font: 500 13px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.cur, .nav-links .drop-btn:hover, .nav-links a[aria-current="page"] { color: var(--teal); }
.drop-btn::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.3s var(--ease); }
.drop.open .drop-btn::after { transform: translateY(0) rotate(225deg); }
/* the products menu: a slip of paper that unfolds downward */
.drop-menu { position: absolute; top: calc(100% + 14px); left: 4px; min-width: 250px; list-style: none; margin: 0; padding: 10px 0;
  background: var(--sheet) var(--grain); box-shadow: 0 2px 3px rgba(60,45,20,0.1), 0 20px 34px -14px rgba(60,45,20,0.45);
  transform-origin: top; transform: perspective(700px) rotateX(-75deg); opacity: 0; visibility: hidden;
  transition: transform 0.5s var(--ease), opacity 0.3s, visibility 0s 0.5s; }
.drop.open .drop-menu { transform: none; opacity: 1; visibility: visible; transition: transform 0.5s var(--ease), opacity 0.25s, visibility 0s; }
.drop-menu a { padding: 12px 22px; display: block; font: 500 13px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.drop-menu a small { font: 600 10px var(--sans); letter-spacing: 0.14em; color: var(--teal); text-transform: uppercase; }
.drop-menu a:hover { background: var(--teal-soft); }
.nav-right { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; background: none; border: 1px solid var(--rule-2); border-radius: 2px; padding: 9px 12px; font: 600 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.readline { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--teal); transform-origin: left; transform: scaleX(0); opacity: 0.85; }

/* ───────────── sheets on the desk ───────────── */
.desk { position: relative; padding: 18px 0 40px; overflow: clip; } /* sheets that have not arrived yet never change the page height */
.sheet {
  --bg: var(--sheet);
  position: relative; max-width: var(--sheet-max); margin: 0 auto; z-index: 1;
  background-color: var(--bg); background-image: var(--grain), var(--fibre);
  box-shadow: 0 1px 1px rgba(60,45,20,0.08), 0 2px 6px -2px rgba(60,45,20,0.12), 0 30px 60px -34px rgba(60,45,20,0.45);
  padding: clamp(60px, 7vw, 104px) 0 clamp(60px, 7vw, 104px);
}
.sheet::before { /* the torn top edge, in the sheet's own colour */
  content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--bg);
  -webkit-mask: var(--tear) 0 0 / 100% 100% no-repeat; mask: var(--tear) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 -2px 2px rgba(60,45,20,0.10));
}
.sheet.clean::before { display: none; }
.sheet::after { /* torn at the bottom too */
  content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 14px; background: var(--bg); transform: scaleY(-1);
  -webkit-mask: var(--tear) 0 0 / 100% 100% no-repeat; mask: var(--tear) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 -3px 3px rgba(60,45,20,0.14));
}
.sheet:nth-of-type(even)::after { -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: scale(-1, -1); }
/* the bottom corner lifts as you reach the end of a sheet, as if about to be turned */

/* any small paper object can be torn: JS wraps it so the shadow survives the torn edge */
.torn-w { position: relative; filter: drop-shadow(0 1px 1px rgba(60,45,20,0.1)) drop-shadow(0 14px 16px rgba(60,45,20,0.17)); }
.paper-group { filter: drop-shadow(0 1px 1px rgba(60,45,20,0.1)) drop-shadow(0 16px 18px rgba(60,45,20,0.18)); }

/* a pencil mark that circles whatever is chosen, and redraws itself when the choice moves */
.marked { position: relative; }
.pmark { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0;
  transition: left 0.55s var(--ease), top 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease); }
.pmark path { fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.9; }
.pmark.draw path { animation: pdraw 0.9s var(--ease) 0.15s forwards; }
@keyframes pdraw { to { stroke-dashoffset: 0; } }
.pmark.static path { stroke-dashoffset: 0; }
.ink .pmark path { stroke: var(--stock-teal); }
.sheet + .sheet { margin-top: 44px; }
.sheet:nth-of-type(odd):not(.ink):not(.manila):not(.ledger) { --bg: #faf7ef; }
.sheet.manila { --bg: var(--manila); }
.sheet.ledger { --bg: var(--ledger); }
/* black paper: warm, with its own pale fibres and grain, and a soft light falling across it */
.sheet.ink { --bg: #1e1c18; color: var(--stock-ink);
  background-image: var(--grain-light), var(--fibre-light), radial-gradient(ellipse 70% 60% at 28% 0%, rgba(255,246,225,0.07), transparent 70%), radial-gradient(ellipse 60% 50% at 90% 100%, rgba(0,0,0,0.25), transparent 70%); }
.sheet.ink .chap-title h2 { text-shadow: 0 1px 0 rgba(0,0,0,0.65), 0 -1px 0 rgba(255,255,255,0.06); } /* pressed into the paper */
.sheet.ink .tape { background: rgba(214,201,165,0.55); }
.sheet.ink .chap-title .standfirst { color: #d9d2c3; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.5; max-width: 32em; }
.sheet.narrow { max-width: 1120px; }
/* sheets are dealt onto the desk as they arrive */
.js .sheet.deal { transform: translateY(-34px) scale(1.012) rotate(var(--tilt, 0.6deg)); opacity: 0.001; transition: transform 1.15s var(--ease), opacity 0.6s ease; }
.js .sheet.deal.in { transform: none; opacity: 1; }
.sheet:nth-of-type(even) { --tilt: -0.6deg; }

/* loose papers lying on the desk between sheets: quotes, notes */
.loose { position: relative; z-index: 2; display: flex; justify-content: center; padding: 0 var(--gutter); margin: -34px 0; pointer-events: none; }
.loose .qcard { pointer-events: auto; position: relative; max-width: 760px; background: var(--sheet-2) var(--grain); padding: 44px clamp(26px, 5vw, 64px) 38px; text-align: center;
  box-shadow: 0 1px 1px rgba(60,45,20,0.1), 0 24px 40px -22px rgba(60,45,20,0.55); rotate: var(--r, -1.2deg); }
.loose .qcard .tape { top: -14px; left: 50%; margin-left: -50px; }
.loose blockquote { margin: 0; font: 500 clamp(26px, 3vw, 40px)/1.24 var(--display); letter-spacing: -0.01em; }
.loose blockquote em { color: var(--teal); }
.loose cite { display: block; margin-top: 18px; font: normal 600 11px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.js .loose.deal .qcard { transform: translateY(-30px) scale(1.04) rotate(4deg); opacity: 0; transition: transform 1.2s var(--ease) 0.15s, opacity 0.6s ease 0.15s; }
.js .loose.deal.in .qcard { transform: none; opacity: 1; }

.tape { position: absolute; width: 100px; height: 28px; background: var(--tape); z-index: 3;
  box-shadow: 0 1px 2px rgba(60,45,20,0.12); clip-path: polygon(3% 8%, 97% 0, 100% 46%, 96% 100%, 4% 94%, 0 52%); }

/* ───────────── chapter heads ───────────── */
.chap-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px; margin-bottom: clamp(36px, 4vw, 60px); }
.chap-num, .chap-title { position: relative; padding-top: 16px; }
.chap-num::before, .chap-title::before { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 2px solid currentColor; transform-origin: left; }
.chap-title::before { border-top: 1px solid var(--rule-2); }
.ink .chap-title::before { border-top-color: rgba(236,230,216,0.3); }
.chap-num .sect { font: italic 500 46px/1 var(--display); display: block; margin-bottom: 8px; }
.chap-num .sc { color: var(--teal); }
.ink .chap-num .sc, .ink .chap-title h2 em { color: var(--stock-teal); }
.chap-title h2 { font: 700 clamp(38px, 4.8vw, 70px)/1.02 var(--display); letter-spacing: -0.015em; margin: 0; max-width: 15em; }
.chap-title h2 em { font-weight: 500; color: var(--teal); }
.chap-title .standfirst { margin: 22px 0 0; max-width: 34em; font-size: 21px; color: var(--ink-2); }
.js .chap-head.rv::before { display: none; }
.js .chap-head .chap-num::before, .js .chap-head .chap-title::before { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.js .chap-head .chap-title::before { transition-delay: 0.15s; }
.js .chap-head.in .chap-num::before, .js .chap-head.in .chap-title::before { transform: none; }
.js .chap-head .sect, .js .chap-head .chap-num .sc, .js .chap-head .standfirst { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease 0.25s, transform 0.9s var(--ease) 0.25s; }
.js .chap-head.in .sect, .js .chap-head.in .chap-num .sc, .js .chap-head.in .standfirst { opacity: 1; transform: none; }

/* headlines ink in, word by word: soft and blurred, then sharp, like ink taking to paper */
.js [data-ink] .w { display: inline-block; opacity: 0; filter: blur(7px); transform: translateY(0.14em); transition: opacity 0.9s ease, filter 1s ease, transform 1s var(--ease); transition-delay: var(--wd, 0s); }
.js .in [data-ink] .w, .js [data-ink].in .w { opacity: 1; filter: blur(0); transform: none; }

.body-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px; }
.margin { font: 15px/1.5 var(--text); color: var(--muted); }
.margin .note { border-top: 1px solid var(--rule); padding-top: 10px; margin-bottom: 26px; }
.margin .note sup, .fn { font: 600 0.62em/0 var(--sans); color: var(--teal); vertical-align: super; margin-left: 1px; }
.measure { max-width: 38em; }
.dropcap::first-letter { float: left; font: 700 5.4em/0.78 var(--display); padding: 0.08em 0.1em 0 0; color: var(--teal); }
.ink .dropcap::first-letter { color: var(--stock-teal); }

/* ───────────── pencil & marginalia ───────────── */
.pencil { position: absolute; pointer-events: none; overflow: visible; }
.pencil path { fill: none; stroke: var(--pencil); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) var(--d, 0s); }
.in .pencil path, .pencil.in path { stroke-dashoffset: 0; }
.hand { font: 600 25px/1.05 var(--hand); color: var(--pencil); position: absolute; white-space: nowrap; pointer-events: none;
  clip-path: inset(-10% 100% -10% 0); transition: clip-path 1.5s var(--ease) var(--d, 0.3s); }
.in .hand, .hand.in { clip-path: inset(-10% -4% -10% 0); }
.ink .hand { color: #9fd6cf; }

/* ───────────── reveal ───────────── */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease, transform 0.9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .chap-head.rv { opacity: 1; transform: none; }

/* ───────────── shared components ───────────── */
.kicker { color: var(--teal); display: flex; align-items: center; gap: 14px; }
.kicker::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.chip { all: unset; cursor: pointer; position: relative; z-index: 1; padding: 8px 14px; font: italic 500 19px/1 var(--display); color: var(--muted); transition: color 0.3s; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--teal); }
.chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.chip .c { font: 600 11px var(--sans); letter-spacing: 0.06em; vertical-align: super; margin-left: 3px; font-style: normal; font-variant-numeric: lining-nums; opacity: 0.8; }
.filters { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }

/* a document card: a small sheet with a torn top, used for studies and guides */
.doc { position: relative; background: #fdfbf6 var(--grain); padding: 30px 30px 26px; display: flex; flex-direction: column; rotate: var(--r, 0deg);
  transition: rotate 0.6s var(--ease), translate 0.6s var(--ease); }
.doc:hover { rotate: 0deg; translate: 0 -8px; }
/* a folded corner: JS cuts the corner off the sheet along the crease (data-fold); this is the flap, folded down
   over the sheet. Its two outer edges are torn like every other edge; only the crease is straight. */
.fold-flap, .doc[data-fold]::after, .face[data-fold]::before {
  content: ''; position: absolute; top: 0; right: 0; width: var(--fold, 24px); height: var(--fold, 24px); z-index: 2; pointer-events: none;
  background: linear-gradient(225deg, #d6c9ab 0%, #e6dcc5 38%, #f3ecdc 100%);
  filter: drop-shadow(-1px 1px 1px rgba(60,45,20,0.18));
  clip-path: polygon(0 0, 26% 24.5%, 51% 51.5%, 76% 75%, 100% 100%,
    93% 93%, 88% 99%, 81% 91%, 74% 97.5%, 68% 90.5%, 60% 100%, 54% 92%, 46% 96.5%, 40% 89%, 33% 98.5%, 26% 92%, 19% 97%, 12% 90%, 6% 98%, 0 100%,
    7% 94%, 2% 87%, 10% 81%, 1% 73%, 8% 67%, 0 59%, 9% 53%, 2% 46%, 7.5% 39%, 0 32%, 10% 26%, 1.5% 19%, 6% 12%);
}
.doc[data-fold] { --fold: 26px; }
.face[data-fold] { --fold: 32px; }

.doc .meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); margin-bottom: 14px; padding-right: 20px; }
.doc .meta .sc { color: var(--teal); }
.doc .meta .date { font: italic 15px var(--text); white-space: nowrap; }
.doc h3 { font: 600 25px/1.15 var(--display); margin: 0 0 12px; }
.doc h3 a { text-decoration: none; }
.doc h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link */
.doc p { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
.doc .stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 4px 0 16px; }
.doc .stats div { padding: 10px 0 8px; text-align: center; border-left: 1px solid var(--rule); }
.doc .stats div:first-child { border-left: 0; }
.doc .stats b { display: block; font: 600 26px/1.05 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.doc .stats span { font: 500 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.doc .go { margin-top: auto; font: 600 14px var(--sans); color: var(--teal); }
.js .deal-in { opacity: 0; transform: translateY(-36px) scale(1.03) rotate(3deg); transition: opacity 0.7s ease var(--dd, 0s), transform 1s var(--ease) var(--dd, 0s), rotate 0.6s var(--ease), translate 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.js .in .deal-in, .js .deal-in.in { opacity: 1; transform: none; }

/* ───────────── colophon ───────────── */
footer.colophon { position: relative; z-index: 1; margin-top: clamp(70px, 9vw, 120px); }
footer.colophon .top { border-top: 2px solid var(--ink); position: relative; }
footer.colophon .top::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--ink); }
.colo { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding: 44px 0 30px; }
.colo h5 { margin: 0 0 12px; color: var(--muted); }
.colo p, .colo li { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.colo ul { list-style: none; padding: 0; margin: 0; }
.colo a { text-decoration: none; } .colo a:hover { color: var(--teal); }
.colo .logo { font-size: 34px; display: inline-block; margin-bottom: 12px; }
.colo-line { border-top: 1px solid var(--rule); padding: 18px 0 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 15px; }
.colo-line i { font-family: var(--text); font-size: 15px; }
.colo-line a { text-decoration: none; } .colo-line a:hover { color: var(--teal); }

/* the Discursa Agent, re-dressed for the paper edition */
/* ── the Discursa Agent, in the paper edition ── */
body .da-launch { width: 62px !important; height: 62px !important; border: 0 !important; animation: none !important;
  background: radial-gradient(circle at 34% 30%, #fdf8ec, #e3d8be 74%) !important;
  box-shadow: inset 2px 2px 3px rgba(255,255,255,0.9), inset -2px -3px 5px rgba(120,95,50,0.28), 0 2px 3px rgba(60,45,20,0.2), 0 14px 24px -10px rgba(60,45,20,0.5) !important; }
body .da-launch::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; box-shadow: inset 1px 1px 1px rgba(120,95,50,0.3), inset -1px -1px 1px rgba(255,255,255,0.9); }
body .da-launch svg { stroke: var(--teal) !important; width: 23px !important; height: 23px !important; position: relative; }
body .da-launch .da-dot { right: 15px !important; top: 17px !important; background: var(--gold) !important; }
body .da-launch:hover { transform: translateY(-3px) rotate(-4deg) !important; }
body .da-teaser { background: #fdfbf6 var(--grain) !important; border: 0 !important; border-radius: 0 !important; color: var(--ink) !important;
  font: 400 15px/1.5 var(--text) !important; padding: 16px 32px 14px 18px !important; rotate: -1.2deg;
  box-shadow: 0 1px 1px rgba(60,45,20,0.1), 0 16px 26px -14px rgba(60,45,20,0.5) !important; }
body .da-teaser::before { content: ''; position: absolute; top: -11px; left: 50%; width: 74px; height: 22px; margin-left: -37px; background: var(--tape); rotate: -3deg;
  clip-path: polygon(3% 8%, 97% 0, 100% 46%, 96% 100%, 4% 94%, 0 52%); }
body .da-panel { background: var(--sheet) var(--grain) !important; border: 0 !important; border-radius: 0 !important; font-family: var(--text) !important;
  box-shadow: 0 1px 1px rgba(60,45,20,0.1), 0 30px 60px -24px rgba(60,45,20,0.55) !important; }
body .da-panel.open { animation: da-paper-in 0.55s var(--ease) both; }
@keyframes da-paper-in { from { opacity: 0; transform: translateY(24px) rotate(1.5deg); } }
body .da-head { background: transparent !important; padding: 18px 20px 14px !important; border-bottom: 2px solid var(--ink); margin: 0 18px; padding-left: 0 !important; padding-right: 0 !important; position: relative; }
body .da-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; border-top: 1px solid var(--ink); }
body .da-head-name { font: 700 21px/1.1 var(--display) !important; color: var(--ink) !important; }
body .da-head-name span { color: var(--gold) !important; }
body .da-head-tag { font: 600 10px/1.4 var(--sans) !important; letter-spacing: 0.18em !important; color: var(--teal) !important; margin-top: 4px !important; }
body .da-close { color: var(--muted) !important; } body .da-close:hover { color: var(--ink) !important; }
body .da-msgs { padding: 22px 18px 14px !important; gap: 12px !important; }
body .da-msg { font: 400 16px/1.55 var(--text) !important; border-radius: 0 !important; }
body .da-msg.bot { background: #fdfbf6 !important; border: 0 !important; color: var(--ink-2) !important; box-shadow: 0 1px 1px rgba(60,45,20,0.08), 0 8px 14px -10px rgba(60,45,20,0.45); rotate: -0.3deg; }
body .da-msg.user { background: transparent !important; color: var(--teal) !important; border-right: 2px solid var(--teal); padding-right: 12px !important; font-style: italic !important; }
body .da-msg.err { background: transparent !important; border: 0 !important; border-left: 2px solid var(--rule-2) !important; color: var(--muted) !important; }
body .da-typing { background: transparent !important; border: 0 !important; }
body .da-typing span { background: var(--pencil) !important; }
body .da-chips { gap: 4px 10px !important; padding: 0 18px 12px !important; }
body .da-chip { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 4px 0 !important; color: var(--teal) !important;
  font: italic 500 15px/1.3 var(--display) !important; background-image: linear-gradient(currentColor, currentColor) !important; background-size: 0 1px !important;
  background-position: 0 100% !important; background-repeat: no-repeat !important; transition: background-size 0.35s ease !important; text-align: left; }
body .da-chip:hover { background-size: 100% 1px !important; }
body .da-inrow { background: transparent !important; border-top: 1px solid var(--rule) !important; padding: 14px 18px 12px !important; }
body .da-in { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--rule-2) !important; border-radius: 0 !important; font: 400 16px/1.4 var(--text) !important; padding: 8px 0 !important; }
body .da-in:focus { border-bottom-color: var(--teal) !important; }
body .da-send { border-radius: 2px !important; font: 600 12px/1 var(--sans) !important; letter-spacing: 0.14em !important; text-transform: uppercase; padding: 0 16px !important; }
body .da-note { background: transparent !important; color: var(--muted) !important; font: italic 400 12px var(--text) !important; }

/* ───────────── reduced motion: final states, nothing moves on its own ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .prog { animation: none !important; }
}

/* ───────────── responsive ───────────── */
@media (max-width: 1560px) { .folio { display: none; } }
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-block; }
  .navbar.open .nav-links { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 60px; left: 0; right: 0; background: var(--sheet) var(--grain); border-bottom: 1px solid var(--rule); padding: 6px var(--gutter) 18px; box-shadow: 0 24px 30px -20px rgba(60,45,20,0.4); }
  .navbar.open .nav-links > li + li::before { display: none; }
  .navbar.open .nav-links > li + li { border-top: 1px solid var(--rule); }
  .navbar.open .nav-links a, .navbar.open .drop-btn { padding: 15px 0; }
  .drop-menu { position: static; box-shadow: none; background: none; transform: none; opacity: 1; visibility: visible; padding: 0 0 8px; display: none; }
  .drop.open .drop-menu { display: block; }
  .drop-menu a { padding: 10px 0; }
}
@media (max-width: 900px) {
  body { font-size: 19px; }
  .mast-top { grid-template-columns: 1fr; text-align: center; }
  .mast-top .sc { display: none; }
  .chap-head, .body-grid { grid-template-columns: 1fr; }
  .chap-num { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
  .chap-num .sect { font-size: 32px; margin: 0; }
  .margin { order: 2; margin-top: 10px; }
  .colo { grid-template-columns: 1fr 1fr; gap: 26px; }
  .colo > div:first-child { grid-column: 1 / -1; }
  .sheet { margin-left: 8px; margin-right: 8px; }
  .loose { margin: -24px 0; }
  .hand.hide-sm, .hide-sm { display: none !important; }
  .nav-in .btn { padding: 11px 14px; font-size: 11px; letter-spacing: 0.1em; }
  .nav-in .btn span { display: none; }
}
@media (max-width: 520px) {
  .colo { grid-template-columns: 1fr; }
}