/* Archive design for the Leslie Cross document pages (body.archive).
   Warm ivory, charcoal serif text, quiet red accents, fine rules. Layered over letters.css. */
body.archive { --ivory:#f8f5ee; --ink:#22201d; --muted:#6f6a63; --rule:#ddd6ca; --accent:#a8322a; background:var(--ivory); color:var(--ink); }
body.archive .hero { display:none; }

.doc-head { max-width:1180px; margin:0 auto; padding:6.4rem 1.5rem 0; }
.doc-crumbs { font-family:'Source Serif 4',Georgia,serif; font-size:1rem; color:var(--muted); }
.doc-crumbs a { color:var(--accent); text-decoration:none; }
.doc-crumbs a:hover { text-decoration:underline; }
.doc-crumbs span { margin:0 0.5rem; color:var(--rule); }
.doc-titlerow { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; margin-top:0.9rem; }
.doc-title { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:clamp(2.3rem,5.5vw,3.6rem); line-height:1.05; letter-spacing:-0.01em; margin:0; color:var(--ink); }
.doc-byline { font-family:'Source Serif 4',Georgia,serif; font-size:1.25rem; color:var(--muted); margin:0.45rem 0 0; }
.doc-key { color:var(--accent); font-size:0.95rem; margin-left:0.6rem; }
.doc-tools { display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem; }
.doc-btn { font-family:'Source Serif 4',Georgia,serif; font-size:1rem; color:var(--ink); background:#fff; border:1px solid var(--rule); padding:0.5rem 1rem; border-radius:3px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.45rem; }
.doc-btn:hover { border-color:var(--ink); }
.doc-views { display:inline-flex; border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
.doc-views button { font-family:'Source Serif 4',Georgia,serif; font-size:1rem; padding:0.55rem 1.05rem; border:0; border-left:1px solid var(--rule); background:#fff; color:var(--ink); cursor:pointer; }
.doc-views button:first-child { border-left:0; }
.doc-views button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.doc-size { display:inline-flex; border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
.doc-size button { font-family:'Source Serif 4',Georgia,serif; border:0; background:#fff; color:var(--ink); padding:0.45rem 0.8rem; cursor:pointer; }
.doc-size button + button { border-left:1px solid var(--rule); }
.doc-size button:disabled { color:#c4bdb2; cursor:default; }
body.archive .lang-toggle { margin:1rem 0 0; border-color:var(--rule); border-width:1px; }
body.archive .lang-toggle a { color:var(--muted); }
body.archive .lang-toggle a[aria-current="true"] { background:var(--ink); color:#fff; }

/* Reading area */
body.archive .letter-body { background:transparent; padding:2rem 1.5rem 3rem; }
body.archive .letter-inner { max-width:1180px; margin:0 auto; }
.doc-grid { display:block; }
.doc-grid[data-view="side"] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 3rem; }
.doc-grid[data-view="side"] .doc-text { border-left:1px solid var(--rule); padding-left:3rem; }
.doc-grid[data-view="original"] .doc-text, .doc-grid[data-view="readable"] .doc-scan { display:none; }
.doc-scan img { width:100%; height:auto; display:block; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 10px 30px rgba(0,0,0,0.08); }
.doc-scan figcaption { font-family:'Source Serif 4',Georgia,serif; font-size:0.9rem; color:var(--muted); margin-top:0.6rem; }
.doc-label { font-family:'Source Serif 4',Georgia,serif; font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin:0 0 1.4rem; }
.doc-text { --doc-size:1.25rem; max-width:40rem; }
.doc-grid[data-view="readable"] .doc-text { margin:0 auto; }
body.archive .doc-text p { font-family:'Source Serif 4',Georgia,serif; font-size:var(--doc-size); line-height:1.62; color:var(--ink); margin:0 0 1.15em; }
body.archive .doc-text blockquote { font-family:'Source Serif 4',Georgia,serif; font-style:italic; font-size:calc(var(--doc-size) * 1.12); line-height:1.5; color:var(--ink); border-left:3px solid var(--accent); background:none; margin:1.6em 0; padding:0.1em 0 0.1em 1.4em; }
body.archive .doc-text .sig { font-size:calc(var(--doc-size) * 0.85); color:var(--muted); }
body.archive .letter-note { font-family:'Source Serif 4',Georgia,serif; background:none; border:0; border-bottom:1px solid var(--rule); padding:0 0 1.1rem; margin:0 0 1.8rem; color:var(--muted); font-size:1rem; }
body.archive .letter-source { display:none; }
.doc-cite { font-family:'Source Serif 4',Georgia,serif; font-size:1rem; color:var(--muted); border-top:1px solid var(--rule); padding-top:0.9rem; margin-top:2rem; }
.doc-cite em { color:var(--ink); }
body.archive .letter-download a { color:var(--accent); }

/* Video, audio, previous / next */
body.archive .letter-audio { background:transparent; border-top:1px solid var(--rule); }
body.archive .letter-nav { max-width:1180px; margin:0 auto; border-top:1px solid var(--rule); }
body.archive .letter-nav a { font-family:'Source Serif 4',Georgia,serif; color:var(--ink); }
body.archive .letter-nav a:hover { color:var(--accent); }
body.archive footer { background:transparent; border-top:1px solid var(--rule); color:var(--muted); }

@media (max-width: 900px) {
  .doc-grid[data-view="side"] { display:block; }
  .doc-grid[data-view="side"] .doc-text { border-left:0; padding-left:0; margin-top:2rem; }
}
@media (max-width: 640px) {
  .doc-head { padding:5rem 1.1rem 0; }
  .doc-byline { font-size:1.05rem; }
  .doc-text { --doc-size:1.12rem; }
  body.archive .letter-body { padding:1.5rem 1.1rem 2.5rem; }
}
.doc-views[hidden] { display:none; }
body.archive .doc-btn.letter-listen-top { font-family:'Source Serif 4',Georgia,serif; font-size:1rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); background:#fff; border:1px solid var(--rule); padding:0.5rem 1rem; margin:0; }
body.archive .doc-btn.letter-listen-top::before, body.archive .doc-btn.letter-listen-top::after { content:none; }
/* Printed-page view (typeset from the real text when no scan exists) */
.doc-grid[data-view="side"] { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.doc-page { background:#f1e6cf; background-image:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.35), rgba(120,90,40,0.10)); color:#2a2520; padding:2.2rem 2.4rem 2.6rem; box-shadow:0 1px 3px rgba(0,0,0,0.15), 0 12px 32px rgba(60,40,10,0.12); border-radius:2px; }
.doc-page-head { display:flex; justify-content:space-between; font-family:'Source Serif 4',Georgia,serif; font-size:0.8rem; letter-spacing:0.22em; text-transform:uppercase; border-bottom:1px solid rgba(42,37,32,0.55); padding-bottom:0.5rem; }
.doc-page-title { font-family:'Source Serif 4',Georgia,serif; font-weight:400; text-transform:uppercase; letter-spacing:0.08em; text-align:center; font-size:clamp(1.6rem,2.6vw,2.3rem); margin:1.6rem 0 0.4rem; color:#2a2520; }
.doc-page-by { text-align:center; font-family:'Source Serif 4',Georgia,serif; font-size:0.85rem; letter-spacing:0.12em; margin-bottom:1.4rem; }
.doc-page-cols { column-count:2; column-gap:1.8rem; }
body.archive .doc-page-cols p { font-family:'Source Serif 4',Georgia,serif; font-size:0.86rem; line-height:1.45; text-align:justify; hyphens:auto; margin:0 0 0.7em; text-indent:1em; color:#2a2520; }
body.archive .doc-page-cols p:first-child { text-indent:0; }
body.archive .doc-page-cols p:first-child::first-letter { float:left; font-size:3.1em; line-height:0.8; padding:0.06em 0.08em 0 0; }
body.archive .doc-page-cols blockquote { font-family:'Source Serif 4',Georgia,serif; font-style:italic; font-size:0.88rem; line-height:1.45; border:0; margin:0.6em 1em 0.9em; padding:0; background:none; break-inside:avoid; }
body.archive .doc-page-cols .sig { text-indent:0; font-size:0.8rem; }
@media (max-width: 640px) { .doc-page { padding:1.4rem 1.2rem 1.8rem; } .doc-page-cols { column-count:1; } }
body.archive .doc-page .doc-page-title { font-family:"Source Serif 4",Georgia,serif !important; font-weight:400; letter-spacing:0.1em; }
body.archive .doc-page-cols blockquote { color:#2a2520; }
/* Closer to the reference layout */
.doc-head, body.archive .letter-inner, body.archive .letter-nav { max-width:1440px; }
.doc-titlerow { align-items:flex-start; }
.doc-tools { flex-direction:column; align-items:flex-end; gap:1rem; margin-top:-2.6rem; }
.doc-tools .doc-size { order:3; }
body.archive .lang-toggle { margin-top:0.8rem; }
.doc-views button { padding:0.7rem 1.4rem; font-size:1.05rem; }
.doc-grid[data-view="side"] { gap:0 3.5rem; }
.doc-grid[data-view="side"] .doc-text { max-width:none; --doc-size:1.75rem; }
.doc-grid[data-view="side"] .doc-text p { line-height:1.42; }
.doc-grid[data-view="side"] .letter-note { display:none; }
.doc-page { border-radius:3px; padding:2.4rem 3rem 3rem; }
.doc-page-head { font-size:0.95rem; letter-spacing:0.3em; }
body.archive .doc-page .doc-page-title { font-size:clamp(2rem,3vw,2.9rem); letter-spacing:0.12em; margin:1.8rem 0 0.5rem; }
.doc-page-by { font-size:1rem; letter-spacing:0.18em; text-transform:uppercase; }
body.archive .doc-page-cols p { font-size:0.95rem; }
.doc-scan figcaption { font-size:0.95rem; }
body.archive .letter-nav { display:flex; justify-content:space-between; padding:1.6rem 1.5rem; }
body.archive .letter-nav a { font-size:1rem; text-decoration:none; }
body.archive .letter-nav .all { color:var(--muted); }
@media (max-width: 900px) { .doc-tools { margin-top:0; align-items:flex-start; } .doc-grid[data-view="side"] .doc-text { --doc-size:1.25rem; } }
body.archive .doc-grid[data-view="side"] .doc-text p { font-size:calc(var(--doc-size) * 1.32); }
body.archive .doc-grid[data-view="side"] .doc-text blockquote { font-size:calc(var(--doc-size) * 1.42); }
@media (max-width: 900px) { body.archive .doc-grid[data-view="side"] .doc-text p, body.archive .doc-grid[data-view="side"] .doc-text blockquote { font-size:var(--doc-size); } }
/* Book-page refinement: classic book face, no broken words, squarer page with shaded edges */
.doc-page { font-family:'EB Garamond',Georgia,serif; background:#efe3c8; background-image:radial-gradient(ellipse 85% 75% at 50% 45%, rgba(255,252,240,0.55) 0%, rgba(255,250,235,0) 70%); box-shadow:inset 0 0 70px rgba(110,80,35,0.28), inset 0 0 14px rgba(110,80,35,0.18), 0 2px 4px rgba(0,0,0,0.12), 0 14px 34px rgba(60,40,10,0.14); padding:3rem 3.4rem 3.4rem; }
.doc-page-head, .doc-page-by { font-family:'EB Garamond',Georgia,serif; }
body.archive .doc-page .doc-page-title { font-family:'EB Garamond',Georgia,serif !important; font-weight:500; }
body.archive .doc-page-cols { column-gap:2.4rem; }
body.archive .doc-page-cols p, body.archive .doc-page-cols blockquote { font-family:'EB Garamond',Georgia,serif; font-size:1.02rem; line-height:1.4; hyphens:none; -webkit-hyphens:none; text-align:justify; text-align-last:left; word-spacing:-0.02em; }
body.archive .doc-page-cols blockquote { font-size:1.06rem; margin:0.8em 1.4em 1em; }
body.archive .doc-page-cols p:first-child::first-letter { font-size:3.4em; line-height:0.78; }
body.archive .doc-text p, body.archive .doc-text blockquote { font-family:'EB Garamond',Georgia,serif; hyphens:none; -webkit-hyphens:none; }
.doc-text { --doc-size:1.35rem; }
.doc-grid[data-view="side"] { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
@media (max-width: 1300px) { body.archive .doc-page-cols p, body.archive .doc-page-cols blockquote { text-align:left; } }
/* Comfortable reading spec: Libre Baskerville, 20px desktop / 18px mobile, 1.7 line spacing, ~62ch, left aligned */
body.archive .doc-text, body.archive .doc-grid[data-view="side"] .doc-text { --doc-size:20px; max-width:62ch; color:#22201d; }
body.archive .doc-text p, body.archive .doc-grid[data-view="side"] .doc-text p { font-family:'Libre Baskerville',Georgia,serif; font-size:var(--doc-size); line-height:1.7; text-align:left; hyphens:none; color:#22201d; }
body.archive .doc-text blockquote, body.archive .doc-grid[data-view="side"] .doc-text blockquote { font-family:'Libre Baskerville',Georgia,serif; font-size:var(--doc-size); line-height:1.7; text-align:left; color:#22201d; }
@media (max-width: 640px) { body.archive .doc-text, body.archive .doc-grid[data-view="side"] .doc-text { --doc-size:18px; } }
/* Aged-print look for the page panel: paper grain, uneven toning, gutter shadow, soft ink */
.doc-page { position:relative; overflow:hidden; transform:rotate(-0.35deg); background-color:#e9dcbd;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.15  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.12  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>"),
    radial-gradient(ellipse 80% 70% at 48% 42%, rgba(255,250,232,0.55) 0%, rgba(255,248,228,0) 65%),
    linear-gradient(90deg, rgba(90,60,20,0.22) 0%, rgba(90,60,20,0) 6%, rgba(90,60,20,0) 94%, rgba(90,60,20,0.18) 100%);
  box-shadow:inset 0 0 90px rgba(120,85,35,0.32), inset 0 0 18px rgba(110,75,30,0.25), 0 1px 2px rgba(0,0,0,0.2), 0 18px 40px rgba(50,35,10,0.22); }
.doc-page, .doc-page-head, .doc-page-by, body.archive .doc-page .doc-page-title, body.archive .doc-page-cols p, body.archive .doc-page-cols blockquote { font-family:'IM Fell DW Pica','EB Garamond',Georgia,serif !important; }
body.archive .doc-page-cols p, body.archive .doc-page-cols blockquote, .doc-page-head, .doc-page-by, body.archive .doc-page .doc-page-title { color:#2b2219 !important; text-shadow:0 0 0.6px rgba(43,34,25,0.55), 0.3px 0.2px 0.4px rgba(43,34,25,0.25); }
body.archive .doc-page-cols p { font-size:1rem; line-height:1.38; }
body.archive .doc-page .doc-page-title { font-weight:400; letter-spacing:0.08em; }
.doc-page-head { border-bottom-color:rgba(43,34,25,0.7); }
.doc-page::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 12% 88%, rgba(130,90,40,0.10), transparent 28%), radial-gradient(circle at 86% 14%, rgba(130,90,40,0.08), transparent 24%); }
@media (max-width: 640px) { .doc-page { transform:none; } }
.doc-grid[data-view="original"] .doc-scan { max-width:780px; margin:0 auto; }
/* Readability first: clear book face, crisp ink, lighter paper grain */
.doc-page { transform:none; background-color:#efe4ca; }
.doc-page, .doc-page-head, .doc-page-by, body.archive .doc-page .doc-page-title, body.archive .doc-page-cols p, body.archive .doc-page-cols blockquote { font-family:'Libre Baskerville',Georgia,serif !important; }
body.archive .doc-page-cols p, body.archive .doc-page-cols blockquote, .doc-page-head, .doc-page-by, body.archive .doc-page .doc-page-title { text-shadow:none; color:#26201a !important; }
body.archive .doc-page-cols p { font-size:0.95rem; line-height:1.6; }
body.archive .doc-page-cols blockquote { font-size:0.95rem; line-height:1.6; }
body.archive .doc-page .doc-page-title { font-size:clamp(1.6rem,2.4vw,2.2rem); }
.doc-page::after { opacity:0.5; }
/* Match the reference page: pale cream paper, soft edge tone, Caslon type, drop cap + small caps */
.doc-page { transform:none; border-radius:5px; padding:2.6rem 3.2rem 3rem; background-color:#f3ebdb;
  background-image:radial-gradient(ellipse 95% 90% at 50% 45%, rgba(255,252,244,0.7) 0%, rgba(255,252,244,0) 70%), linear-gradient(180deg, rgba(150,120,70,0.06), rgba(150,120,70,0.10));
  box-shadow:inset 0 0 60px rgba(160,130,80,0.22), 0 1px 3px rgba(0,0,0,0.12), 0 8px 22px rgba(60,45,20,0.10); }
.doc-page::after { display:none; }
.doc-page, .doc-page-head, .doc-page-by, body.archive .doc-page .doc-page-title, body.archive .doc-page-cols p, body.archive .doc-page-cols blockquote { font-family:'Libre Caslon Text',Georgia,serif !important; color:#2a2622 !important; }
.doc-page-head { font-size:0.95rem; letter-spacing:0.12em; padding-bottom:0.7rem; border-bottom:1.5px solid rgba(42,38,34,0.75); }
body.archive .doc-page .doc-page-title { font-weight:400; font-size:clamp(2rem,3.4vw,3rem); letter-spacing:0.05em; margin:1.8rem 0 0.5rem; }
.doc-page-by { text-transform:none; letter-spacing:0.04em; font-size:1rem; margin-bottom:2rem; }
.doc-page-by b { font-weight:400; letter-spacing:0.16em; text-transform:uppercase; font-size:0.92em; }
.doc-page-cols { column-gap:2.6rem; }
body.archive .doc-page-cols p { font-size:1.02rem; line-height:1.5; text-align:justify; text-indent:1.2em; margin:0 0 0.9em; }
body.archive .doc-page-cols blockquote { font-style:italic; font-size:1.05rem; line-height:1.55; text-align:left; margin:1.1em 0 1.3em 1.4em; }
body.archive .doc-page-cols p:first-child::first-letter { font-size:3.9em; line-height:0.82; padding:0.04em 0.07em 0 0; }
.doc-page-cols .sc { font-variant:small-caps; letter-spacing:0.04em; }
@media (max-width: 1300px) { body.archive .doc-page-cols p { text-align:left; } }
/* Reference paper: warm cream, edges toned darker all round, faint mottling through the sheet */
.doc-page { background-color:#f1e7d3;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.22  0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.32  0 0 0 0 0.2  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    radial-gradient(ellipse 72% 68% at 50% 46%, rgba(252,247,236,0.85) 0%, rgba(248,240,224,0.35) 55%, rgba(220,200,160,0) 100%);
  box-shadow:inset 0 0 22px rgba(170,135,80,0.28), inset 0 0 110px rgba(185,150,95,0.30), 0 1px 3px rgba(0,0,0,0.12), 0 8px 22px rgba(60,45,20,0.10); }
/* Real paper texture, stretched to the page so its toned edges sit on every side */
.doc-page { background:#f3e9d3 url("/lesliecross/paper.jpg") center / 100% 100% no-repeat; box-shadow:0 1px 3px rgba(0,0,0,0.14), 0 8px 22px rgba(60,45,20,0.12); }