@view-transition{navigation:auto}

/* DeVinci — codex.css
   One stylesheet for four static pages. Paths are relative to assets/. */

/* SELF-HOSTED FACES — four Garamond cuts, two mono. Nothing else exists; nothing is synthesised. */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/eb-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/eb-garamond-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --parch:#f0e6c8;--parch-light:#f7f0da;--parch-dark:#e0d3af;--parch-deep:#cfc19e;
  --ink:#1B1512;--ink-mid:#4a3b30;--ink-light:#6d5c4c;--ink-faded:#97866f;--ink-ghost:rgba(27,21,18,0.09);
  --sepia:#7a5c2e;--sanguine:#A34632;--sanguine-faded:rgba(163,70,50,0.5);
  --blue-note:#3a5a7a;--verdigris:#4a7a6a;
  --paper-on-ink:#f2e8cd;
  --serif:'EB Garamond',Georgia,serif;--hand:'EB Garamond',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--parch);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.7;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;font-feature-settings:"liga" 1,"kern" 1;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='2' fill='%234a3b30'/%3E%3C/svg%3E") 3 3,auto}
a,button,.nav-cta{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 16 L9 2 L11 2 L7 16' fill='%23A34632' opacity='0.7'/%3E%3Ccircle cx='10' cy='2' r='1.5' fill='%23A34632' opacity='0.5'/%3E%3C/svg%3E") 5 18,pointer}
code{font-family:var(--mono);font-size:0.9em}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em;transition:color 0.15s}
a:hover{color:var(--sanguine)}
::selection{background:rgba(163,70,50,0.22);color:var(--ink)}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 15% 10%,rgba(180,155,110,0.15),transparent 50%),radial-gradient(ellipse at 85% 90%,rgba(160,140,100,0.12),transparent 50%),radial-gradient(125% 100% at 50% 0%,transparent 62%,rgba(74,59,48,0.09) 100%)}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");background-size:512px 512px}
nav,section,footer,.container{position:relative;z-index:1}
.ink-blot{position:absolute;pointer-events:none;z-index:0;opacity:0.025;background:radial-gradient(ellipse at 40% 40%,var(--ink),transparent 70%);border-radius:45% 55% 60% 40%/55% 45% 55% 45%}

/* NAV — the same header on all four pages. The wordmark goes home; the current
   page is marked on that item alone, not by underlining the whole row. */
nav{view-transition-name:codex-nav;position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:rgba(240,230,200,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--ink-ghost)}
nav h1{font:inherit;margin:0}
.nav-mark{font-family:var(--serif);font-size:1.75rem;font-weight:600;color:var(--ink);letter-spacing:-0.01em;text-decoration:none}
.nav-mark:hover{color:var(--ink)}
.nav-mark em{font-style:italic;font-weight:400;color:var(--sanguine)}
.nav-links{display:flex;gap:1.8rem;align-items:center}
/* Scoped away from .nav-cta: as a descendant selector this rule outranks the
   button's own single-class rule and would take its colour, size and transition. */
.nav-links a:not(.nav-cta){font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--ink-light);text-decoration:none;transition:color 0.15s}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--sanguine-faded);padding-bottom:2px}
.nav-cta{font-family:var(--serif);font-size:0.95rem;font-weight:600;font-style:italic;color:var(--parch-light);background:var(--ink);padding:0.45rem 1.3rem;text-decoration:none;transition:background 0.3s;white-space:nowrap}
.nav-cta:hover{background:var(--sanguine)}

/* ORNAMENT */
.ornament{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 2rem}
.ornament-line{flex:1;max-width:200px;height:1px;background:var(--ink-ghost)}
.ornament svg{width:28px;height:28px;opacity:0.22}

/* SECTION */
section{padding:6.5rem 2rem}
.container{position:relative;max-width:960px;margin:0 auto}
.sec-title{font-family:var(--serif);font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:600;line-height:1.08;letter-spacing:-0.02em;color:var(--ink);margin-bottom:1rem}
.sec-desc{max-width:34em;font-size:1.125rem;line-height:1.72;color:var(--ink-light);margin-bottom:3.25rem}

/* HERO — recovered from the source file: centred composition, the compass
   geometry faint behind the wordmark, marginalia in both margins, the scroll
   cue at the foot. The apocryphal line that sat between wordmark and
   paragraph is gone and the gap is simply closed, not refilled. */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:9rem 2rem 6rem;position:relative;overflow:hidden}
.vitruvian{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;width:min(80vw,680px);height:min(80vw,680px);overflow:visible}
.margin-note{position:absolute;font-family:var(--hand);font-style:italic;font-size:0.95rem;color:var(--ink-faded);line-height:1.45;max-width:158px;pointer-events:none}
.margin-note::before{content:'';display:block;width:24px;height:1px;background:var(--ink-faded);margin-bottom:6px}
.hero-folio{font-family:var(--hand);font-style:italic;font-size:1rem;color:var(--ink-faded);margin-bottom:2.25rem}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(4rem,11vw,9.5rem);line-height:0.86;letter-spacing:-0.035em;color:var(--ink);margin-bottom:1.4rem}
.hero h1 em{font-weight:400;font-style:italic;color:var(--sanguine)}
.hero-line{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2vw,1.3rem);color:var(--ink-faded);margin-bottom:1.5rem}
.hero-body{max-width:33em;font-size:1.1875rem;line-height:1.72;color:var(--ink-mid);margin-bottom:2.75rem}
.hero .hero-btns{justify-content:center}
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.4rem}
.hero-scroll span{font-family:var(--hand);font-style:italic;font-size:0.9rem;color:var(--ink-faded)}
.quill-drop{width:1px;height:2.5rem;background:linear-gradient(to bottom,var(--ink-faded),rgba(151,134,111,0))}

/* THE PORTRAIT, FRAMED — the one ornamental object on the site, and the only
   place it is allowed to carry this much weight. A moulding with real depth:
   the outer edge in shadow, the inner bevel catching light from above, a pale
   fillet between moulding and image, and the whole panel casting onto the
   paper. It hangs still — no hover, no tilt, no zoom. Aligned to the letter's
   measure below it, so the page has one spine. */
.plate{width:100%;max-width:548px;margin:0 auto;padding:1rem 1.5rem 0}
.frame{position:relative;padding:30px;background:linear-gradient(150deg,#54402c 0%,#3a2a1c 38%,#241a12 62%,#3f2e1e 100%);box-shadow:0 30px 60px -20px rgba(27,21,18,0.5),0 8px 18px rgba(27,21,18,0.22),inset 0 0 0 1px rgba(27,21,18,0.6),inset 0 3px 0 rgba(214,182,124,0.28),inset 3px 0 0 rgba(214,182,124,0.13),inset 0 -3px 0 rgba(0,0,0,0.42),inset -3px 0 0 rgba(0,0,0,0.3)}
.frame::after{content:'';position:absolute;inset:24px;pointer-events:none;box-shadow:inset 0 -2px 3px rgba(0,0,0,0.34),inset 0 2px 3px rgba(214,182,124,0.10)}
.frame-mat{position:relative;padding:20px;background:var(--parch-light);box-shadow:inset 0 0 0 1px rgba(122,92,46,0.4),inset 0 4px 9px rgba(27,21,18,0.16),0 0 0 1px rgba(0,0,0,0.45)}
.frame-mat picture{display:block}
.frame-mat img{display:block;width:100%;height:auto;box-shadow:0 2px 8px rgba(27,21,18,0.3)}
.plate-cap{margin-top:1.15rem;font-family:var(--mono);font-size:0.72rem;line-height:1.75;letter-spacing:0.055em;color:var(--ink-light);text-align:left}

/* THE LETTER — no panel, no border, no shadow, no second ground, and nothing
   beside it. One centred measure of 65 characters, which is how a book sets a
   long text. The page is the container. Block flow, so paragraph margins
   collapse and the pivot's 4.4rem stands as written. */
.letter{width:100%;max-width:548px;margin:0 auto;padding:5.5rem 1.5rem 7rem;font-size:1.1875rem;line-height:1.75;color:var(--ink);font-feature-settings:"liga" 1,"kern" 1,"onum" 1;font-variant-numeric:oldstyle-nums;hanging-punctuation:first;text-wrap:pretty;orphans:2;widows:2}
.letter p{margin-bottom:1.6rem}
.letter p:last-of-type{margin-bottom:0}
.letter .letter-open{font-size:1.72rem;line-height:1.42;margin-bottom:1.7rem}
.letter .letter-pivot{margin-top:4.4rem;margin-bottom:4.4rem}
.letter-close{display:block;font-size:1.3125rem;color:var(--sanguine)}
/* The same pair as the hero, repeated at the end of a long page. */
.letter .hero-btns{margin-top:4.4rem}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-start}
.btn-seal{font-family:var(--serif);font-size:1rem;font-weight:600;font-style:italic;color:var(--parch-light);background:var(--sanguine);padding:0.85rem 2.4rem;border:none;cursor:pointer;text-decoration:none;transition:background 0.3s}
.btn-seal:hover{background:var(--ink)}
.btn-ghost{font-family:var(--serif);font-size:1rem;font-weight:600;font-style:italic;color:var(--ink-mid);background:transparent;padding:0.85rem 2.4rem;border:1px solid var(--ink-faded);text-decoration:none;cursor:pointer;transition:border-color 0.3s,color 0.3s}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

/* HOW IT WORKS */
.blueprint{position:relative;border:1px solid var(--ink-ghost);padding:3rem 3rem 3rem 6rem}
.blueprint::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent,transparent 2.8rem,var(--ink-ghost) 2.8rem)}
.blueprint::after{content:'';position:absolute;top:0;bottom:0;left:4.5rem;width:1px;background:var(--sanguine-faded)}
.bp-step{position:relative;padding:0.3rem 0 2.75rem}.bp-step:last-child{padding-bottom:0}
.bp-num{position:absolute;left:-3.5rem;top:0;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--sanguine);width:2rem;text-align:center}
.bp-step h3{font-family:var(--serif);font-size:1.375rem;font-weight:600;color:var(--ink);margin-bottom:0.4rem}
.bp-step p{font-size:1.0625rem;line-height:1.72;color:var(--ink-mid);max-width:36em}
.bp-annotation{font-family:var(--hand);font-style:italic;font-size:0.95rem;color:var(--ink-light);margin-top:0.5rem;display:inline-block}

/* AUTOBRIDGE */
.bridge-note{max-width:42em;border:1px solid var(--ink-faded);padding:1.5rem 1.7rem;background:rgba(27,21,18,0.02)}
.bridge-line{font-family:var(--mono);font-size:0.875rem;line-height:1.75;color:var(--ink-mid)}
.bridge-sub{display:block;margin-top:1rem;font-family:var(--hand);font-style:italic;font-size:1rem;color:var(--ink-light)}

/* DEMO — the one full-bleed dark band on the whole site. Ground ink, type paper. */
.demo-bg{background:var(--ink);color:var(--paper-on-ink)}
.demo-bg .sec-title{color:var(--paper-on-ink)}
.demo-bg .sec-desc{color:rgba(242,232,205,0.62)}
.codex-stage{max-width:700px;margin:0 auto}
.codex-cta{margin-top:2.25rem}
.demo-bg .btn-seal:hover{background:var(--parch-light);color:var(--ink)}
.codex-page{max-width:700px;margin:0 auto;position:relative;background:rgba(242,232,205,0.045);border:1px solid rgba(242,232,205,0.2)}
.codex-page::after{content:'';position:absolute;bottom:0;right:0;width:30px;height:30px;background:linear-gradient(135deg,rgba(242,232,205,0.045) 50%,var(--ink) 50%);border-left:1px solid rgba(242,232,205,0.16);border-top:1px solid rgba(242,232,205,0.16)}
.codex-header{padding:0.7rem 1.2rem;border-bottom:1px solid rgba(242,232,205,0.16);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.codex-header-left{font-family:var(--hand);font-style:italic;font-size:0.95rem;color:rgba(242,232,205,0.55)}
.codex-header-right{font-family:var(--mono);font-size:0.7rem;color:rgba(242,232,205,0.52);letter-spacing:0.08em}
.codex-body{position:relative;overflow:hidden;padding:1.6rem 1.5rem;font-family:var(--mono);font-size:0.82rem;line-height:1.95}
.codex-body .ln{padding:0.35rem 0;position:relative}
.codex-body .ln::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(242,232,205,0.07)}
.ln-typing{color:rgba(242,232,205,0.52)}
.ln-service{text-align:center}
.ln-typing i{display:inline-block;font-style:normal;margin-right:0.15em}
.c-user{color:#d8a75f;font-weight:500}.c-bot{color:var(--paper-on-ink);font-weight:500}.c-ok{color:#84b8a1}.c-dim{color:rgba(242,232,205,0.52)}.c-addr{color:#93b6d4;text-decoration:underline;text-decoration-style:dotted}
.codex-side{position:absolute;left:-200px;top:1rem;width:170px;text-align:right;font-family:var(--hand);font-style:italic;font-size:0.95rem;color:rgba(242,232,205,0.52);line-height:1.5;padding-right:1rem;border-right:1px solid rgba(242,232,205,0.14)}
.codex-side-r{position:absolute;right:-200px;top:3rem;width:170px;font-family:var(--hand);font-style:italic;font-size:0.95rem;color:rgba(242,232,205,0.52);line-height:1.5;padding-left:1rem;border-left:1px solid rgba(242,232,205,0.14)}

/* FEATURES */
.catalog{display:flex;flex-direction:column}
.catalog-item{display:grid;grid-template-columns:104px 1fr;border-bottom:1px solid var(--ink-ghost);padding:2.25rem 0;position:relative}
.catalog-item:first-child{border-top:1px solid var(--ink-ghost)}
.catalog-fig{font-family:var(--serif);font-style:normal;font-variant-caps:small-caps;font-feature-settings:"smcp" 1;letter-spacing:0.06em;font-size:0.95rem;color:var(--ink-light);padding-top:0.3rem}
.catalog-fig svg{display:block;width:56px;height:56px;margin-bottom:0.55rem}
.catalog-fig svg [stroke]{stroke:var(--ink-light);stroke-width:0.9}
.catalog-fig svg [fill="#4a3b30"]{fill:var(--ink-light)}
.catalog-content h3{font-family:var(--serif);font-size:1.3125rem;font-weight:600;color:var(--ink);margin-bottom:0.4rem}
.catalog-content p{font-size:1.0625rem;line-height:1.72;color:var(--ink-mid);max-width:34em}
.catalog-note{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:0.2rem;font-family:var(--hand);font-style:italic;font-size:0.9rem;line-height:1.4;color:var(--ink-light);max-width:140px;text-align:right}

/* FEES */
.ledger-wrap{background:var(--parch-light);border:1px solid var(--ink-faded);box-shadow:2px 2px 0 var(--ink-ghost)}
.ledger-title{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem 2rem;padding:0.85rem 1.5rem;border-bottom:1px solid var(--ink-faded);font-family:var(--hand);font-style:italic;font-size:1.05rem;color:var(--sepia);background:rgba(207,193,158,0.25)}
.ledger{width:100%;border-collapse:collapse}
.ledger th{font-family:var(--hand);font-style:italic;font-size:1rem;color:var(--ink-light);text-align:left;padding:0.7rem 1.5rem;font-weight:400;border-bottom:1px solid var(--ink-ghost)}
.ledger td{padding:0.75rem 1.5rem;font-size:1.0625rem;border-bottom:1px solid rgba(27,21,18,0.045)}
.ledger tr:last-child td{border-bottom:none}
.ledger .hl{color:var(--sanguine);font-weight:600;font-style:italic}
.ledger-footnote{padding:1.3rem 1.5rem;border-top:1px solid var(--ink-ghost);font-size:1rem;font-style:italic;color:var(--ink-light);line-height:1.75}
.ledger-footnote strong{color:var(--ink);font-style:normal;font-weight:600}

/* $DEVINCI */
.token-lead{font-size:1.5rem;line-height:1.5;color:var(--ink);max-width:30em;margin-bottom:1.9rem}
.token-plain{font-size:1.125rem;line-height:1.72;color:var(--ink-mid);max-width:34em;margin-bottom:1.9rem}
.token-note{font-family:var(--serif);font-size:1.1875rem;font-style:italic;color:var(--ink-mid);line-height:1.75;max-width:34em}
.token-foot{margin-top:3.5rem;font-size:1rem;line-height:1.75;color:var(--ink-light);max-width:38em}
#token .hero-btns{margin-top:2.75rem}

/* THE MATRIX — .ledger-wrap and .ledger reused wholesale. Labels in Garamond,
   values in mono, hairlines between rows, nothing else. */
.matrix{table-layout:fixed}
.matrix th[scope="row"]{color:var(--ink);font-style:normal;font-family:var(--serif);font-weight:600;font-size:1rem;vertical-align:top;border-bottom:1px solid rgba(27,21,18,0.045)}
.matrix thead th{font-size:0.95rem;vertical-align:bottom}
.matrix thead th:first-child{width:12rem}
.matrix td{font-family:var(--mono);font-size:0.8125rem;line-height:1.65;color:var(--ink-mid);vertical-align:top}
.matrix tr:last-child th[scope="row"]{border-bottom:none}
/* The eighth row: an unfinished line on a working sheet. */
.matrix-next th[scope="row"]{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-light);white-space:nowrap}
.fig-no{font-style:normal;font-variant-caps:small-caps;font-feature-settings:"smcp" 1;letter-spacing:0.06em}
.matrix-next th[scope="row"] a{color:inherit;text-decoration:none;transition:color 0.15s}
.matrix-next:hover th[scope="row"] a,.matrix-next th[scope="row"] a:focus-visible{color:var(--sanguine)}
.matrix-next td{text-align:center;color:var(--ink-ghost)}

/* THE GLOSSES — a dotted rule under the term, and a note in the outer margin
   aligned to the term's own line. No bubble, no card, no box, no motion of any
   kind: it is marginalia, in the same italic the marginalia already use. */
.gloss{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:0.18em;text-decoration-color:var(--ink-light);cursor:help}
.gloss:hover,.gloss[aria-expanded="true"]{text-decoration-color:var(--sanguine)}
.gloss-note{position:absolute;left:100%;margin-left:2rem;width:11rem;font-family:var(--hand);font-style:italic;font-size:0.95rem;line-height:1.45;color:var(--ink-light);pointer-events:none}
.gloss-note::before{content:'';display:block;width:24px;height:1px;background:var(--ink-faded);margin-bottom:6px}
.gloss-note.is-inline{position:static;left:auto;margin:0.9rem 0 0.2rem;width:auto;max-width:34em;pointer-events:auto}

/* EVOLUTION */
.evolution{position:relative;margin-top:2rem}
.chapter{position:relative;padding:2.75rem 0 3.5rem;border-bottom:1px solid var(--ink-ghost)}
.chapter:last-child{border-bottom:none;padding-bottom:0}
.chapter-numeral{font-family:var(--serif);font-size:3.75rem;font-weight:600;color:rgba(27,21,18,0.1);line-height:1;position:absolute;right:0;top:1.75rem;pointer-events:none}
.chapter-label{font-family:var(--hand);font-style:italic;font-size:1rem;color:var(--ink-light);margin-bottom:0.4rem;display:block}
.chapter-state{font-style:italic;font-size:0.9em;color:var(--ink-light);margin-left:1.4rem;letter-spacing:0.05em}
.chapter h3{font-family:var(--serif);font-size:1.625rem;font-weight:600;color:var(--ink);margin-bottom:0.7rem}
.chapter-body{font-size:1.0625rem;color:var(--ink-mid);line-height:1.78;max-width:38em}
.chapter-body em{color:var(--ink);font-style:italic}
.chapter-annotation{display:flex;align-items:baseline;gap:0.6rem;font-family:var(--hand);font-style:italic;font-size:0.95rem;color:var(--ink-light);margin-top:1rem}
.ann-items{display:flex;flex-wrap:wrap;gap:0.15rem 1.5rem}
.chapter.current .chapter-label::after{content:' ← we are here';color:var(--verdigris)}
/* Unwritten chapters: the rule and the numeral at half the written numerals'
   opacity, nothing else — pages cut and numbered, not yet written. */
.chapter-blank{height:72px;padding:0}
.chapter-blank .chapter-numeral{top:6px;color:rgba(27,21,18,0.05)}
/* Colophon: no box and no rule of its own; Chapter VIII's rule above is enough.
   Body size, the chapter paragraphs' measure to the pixel, muted ink. */
.colophon{padding-top:2.75rem;font-family:var(--serif);font-size:1.125rem;line-height:1.78;color:var(--ink-light);max-width:36em}
.colophon p+p{margin-top:1rem}
/* The last chapter, set apart: twice the chapter gap above it and a full-width hairline in the
   muted ink — the unwritten pages end, this one is different. Its numeral slot holds a word. */
.chapter-last{margin-top:5.5rem;border-top:1px solid var(--ink-faded);padding-top:5.5rem}
.chapter-last .chapter-numeral{top:4.5rem}
.chapter-ultimo{font-style:italic;font-weight:400;font-size:2.2rem;letter-spacing:0.01em}

footer{view-transition-name:codex-foot;padding:2.25rem;margin-top:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem 3rem;border-top:1px solid var(--ink-ghost)}
footer p{font-family:var(--serif);font-size:0.95rem;color:var(--ink-faded);font-style:italic}
footer a{color:var(--ink-light);text-decoration:none;transition:color 0.15s}
footer a:hover{color:var(--ink)}

/* ================= THE ONE DRAWN THING =================
   The catalogue figures complete themselves as the reader reaches each row.
   drawLine declares a "from" and no "to", so a path's resting value is
   dashoffset 0 — no script, a stalled clock or reduced motion all land on the
   finished drawing. Nothing else on the site draws, and nothing repeats. */
@keyframes drawLine{from{stroke-dashoffset:var(--len)}}

a:focus-visible,button:focus-visible{outline:2px solid var(--sanguine);outline-offset:3px}

@media(max-width:1160px){.codex-side,.codex-side-r{display:none}}
@media(max-width:900px){.catalog-note,.chapter-numeral{display:none}.chapter-blank .chapter-numeral{display:block}}
/* The marginalia need real outer margin to sit in. Below this the hero
   paragraph reaches into their column, so they go rather than collide. */
@media(max-width:1100px){.margin-note{display:none}}
/* A short viewport leaves the hero no room for a cue at its foot. */
@media(max-height:720px){.hero-scroll{display:none}}
@media(max-width:768px){
  nav{padding:0.8rem 1.2rem}
  .nav-links{gap:1.1rem}
  .nav-links a:not(.nav-cta){font-size:0.95rem}
  .hero{padding:7rem 1.5rem 5rem}
  .letter{padding:3.5rem 1.25rem 4rem}
  .plate{padding:0 1.25rem 0}
  .frame{padding:18px}
  .frame-mat{padding:12px}
  .letter .letter-open{font-size:1.4rem}
  .letter .letter-pivot{margin-top:3.25rem;margin-bottom:3.25rem}
  .blueprint{padding:2rem 2rem 2rem 4rem}
  .blueprint::after{left:2.8rem}.bp-num{left:-2.2rem}
  .catalog-item{grid-template-columns:64px 1fr}
  section{padding:4rem 1.5rem}
}
/* Phones: the three page links must stay reachable, so nothing is hidden.
   Instead the bar leaves the fixed layer, wraps onto two rows and scrolls
   away like any other block — which also gives the content its space back. */
/* Phones: the hero stops filling the screen and stops centring, so wordmark,
   paragraph and the primary button all land in the first screen. */
/* The matrix becomes a stack: the row label as a small heading, the three
   chains beneath it as three labelled lines. The eighth row stays one link. */
@media(max-width:640px){
  .matrix,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:auto}
  .matrix thead{display:none}
  .matrix tr{padding:1.1rem 1.5rem;border-bottom:1px solid var(--ink-ghost)}
  .matrix tr:last-child{border-bottom:none}
  .matrix th[scope="row"]{width:auto;padding:0 0 0.5rem;border-bottom:none;white-space:normal}
  .matrix td{padding:0.15rem 0}
  .matrix td::before{content:attr(data-chain) ': ';font-family:var(--hand);font-style:italic;color:var(--ink-light)}
  .matrix-next td{text-align:left}
}
@media(max-width:640px){
  .hero{min-height:auto;justify-content:flex-start;padding:6.5rem 1.5rem 3.5rem}
  .hero-scroll{display:none}
  .hero h1{font-size:clamp(3.4rem,17vw,5rem)}
  .hero-body{margin-bottom:2.25rem}
  .hero .hero-btns{justify-content:flex-start}
  .plate{padding-top:0}
}
@media(max-width:600px){
  nav{position:static;flex-wrap:wrap;row-gap:0.55rem;padding:0.75rem 1.2rem}
  .nav-links{flex-wrap:wrap;gap:0.5rem 1.2rem}
  .letter{padding-top:2.5rem}
  .hero{padding-top:1.75rem}
  .hero-folio{margin-bottom:1rem}
  .hero h1{font-size:clamp(3.1rem,15.5vw,4.6rem)}
  .hero-body{margin-bottom:1.4rem;line-height:1.62}
  section{padding-top:2.5rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}