/* LEDGER — Stephen Mayo Grass / The Maple Street Ledger. Newsprint cream + ink, oxblood, bourbon, Spanish-moss green. */
.t-ledger{--paper:#efe7d6;--paper2:#f5efe1;--ink:#1b1712;--ox:#7a1c1e;--bourbon:#a8611f;--moss:#58683e;
  --slab:'Big Shoulders Display',Impact,sans-serif;--mono:'Courier Prime',ui-monospace,monospace;--serif:'Libre Caslon Text',Georgia,serif;--black:'UnifrakturMaguntia',serif;
  background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--serif)}
.t-ledger a{text-decoration:none}
.t-ledger :focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.lg-head{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ink);color:var(--paper);padding:12px clamp(16px,3vw,40px);font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em}
.lg-brand{display:inline-flex;align-items:center;gap:10px}
.lg-brand svg{width:16px;height:16px;fill:var(--paper)}
.lg-head nav{display:flex;gap:24px}
.lg-head a:hover,.lg-foot a:hover{color:#e9c48f}
/* sliced hero */
.slices{position:relative;height:210vh;background:#120e0b}
.slices-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.slices-stage{position:relative;width:min(100vw,160vh);aspect-ratio:16/10;container-type:size;--k:.16;--g:3px}
.slice{position:absolute;left:calc(var(--x) * 100cqw + var(--g));top:calc(var(--y) * 100cqh + var(--g));width:calc(var(--w) * 100cqw - var(--g) * 2);height:calc(var(--h) * 100cqh - var(--g) * 2);
  background:#2a221b url(/assets/art/ledger-photo-hero.jpg?v=f51add80) no-repeat;background-image:image-set(url(/assets/art/ledger-photo-hero.webp?v=bd6ada1f) type("image/webp"),url(/assets/art/ledger-photo-hero.jpg?v=f51add80) type("image/jpeg"));
  background-size:100cqw 100cqh;
  background-position:calc(var(--x) * -100cqw - var(--g) - var(--dx) * var(--k) * .031cqw) calc(var(--y) * -100cqh - var(--g) - var(--dy) * var(--k) * .031cqw);
  transform:translate3d(calc(var(--dx) * var(--k) * .0694cqw),calc(var(--dy) * var(--k) * .0694cqw),0) scale(calc(1 + var(--ds) * var(--k)));
  box-shadow:0 10px 24px rgba(0,0,0,.45);will-change:transform}
.sl-tag{position:absolute;margin:0;background:var(--paper);color:var(--ink);font:700 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;padding:9px 12px;z-index:3}
.sl-tl{top:22px;left:22px}
.sl-br{bottom:22px;right:22px;background:var(--ox);color:var(--paper)}
.sl-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--paper);font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.8;z-index:3}
.halftone-band{height:70px;background:radial-gradient(circle,var(--ink) 1.6px,transparent 1.9px) 0 0/9px 9px;-webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}
/* newspaper lead graphic (halftone art from the aerial photo of downtown Atlanta; scripts/make-ledger-graphic.py) */
.lg-photo{margin:0 0 28px;border:1px solid var(--ink);background:var(--paper2);padding:10px 10px 0}
.lg-photo .ph{position:relative;display:block;overflow:hidden}
.lg-photo img{display:block;width:100%;height:auto}
.lg-photo figcaption{display:flex;justify-content:space-between;gap:12px;padding:9px 2px 10px;font:400 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.lg-photo figcaption span:last-child{color:var(--ox)}
/* newspaper */
.paper{position:relative;width:min(1240px,calc(100% - 6vw));margin:0 auto;padding:44px 0 90px}
.paper::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.05;background:radial-gradient(circle,var(--ink) 1px,transparent 1.3px) 0 0/5px 5px}
.masthead{display:grid;grid-template-columns:190px 1fr 190px;align-items:center;gap:24px;border-top:1px solid var(--ink);padding:18px 0 14px}
.nameplate{font:400 clamp(44px,7.2vw,112px)/1 var(--black);text-align:center;letter-spacing:.005em}
.ear{border:1px solid var(--ink);padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px;text-align:center;
  background:radial-gradient(circle,rgba(122,28,30,.22) 1.2px,transparent 1.5px) 0 0/6px 6px,var(--paper2)}
.ear span{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.ear small{font:italic 400 12.5px/1.3 var(--serif)}
.dateline{display:flex;justify-content:space-between;gap:12px;border-top:4px double var(--ink);border-bottom:1px solid var(--ink);padding:9px 2px;font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.16em}
.dateline span:nth-child(even){color:var(--ox)}
.paper-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 36px;margin-top:38px}
.lead-story{grid-column:1/9;padding-right:36px;border-right:1px solid var(--ink)}
.kicker{display:inline-block;font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--paper);background:var(--moss);padding:7px 10px;margin-bottom:18px}
.headline{font:900 clamp(40px,5.2vw,80px)/.94 var(--slab);text-transform:uppercase;letter-spacing:.004em}
.byline{display:flex;gap:6px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:9px 0;margin:24px 0 26px;font:400 12.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.byline strong{color:var(--ox)}
.story-note{font:700 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px;color:var(--ox)}
.story-cols{columns:3 200px;column-gap:28px;column-rule:1px solid rgba(27,23,18,.35);font-size:14.5px;line-height:1.6;text-align:justify;hyphens:auto}
.story-cols p{margin-bottom:.9em}
.story-cols p:first-child::first-letter{float:left;font:900 4.6em/.8 var(--slab);color:var(--ox);margin:6px 8px 0 0}
.side{grid-column:9/13}
.slip{display:block;background:var(--paper2);border:1px solid var(--ink);padding:12px 12px 16px;transform:rotate(1.4deg);box-shadow:6px 8px 0 rgba(27,23,18,.14)}
.slip figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px}
.stamp-red{font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ox);border:2px solid var(--ox);padding:7px 10px;transform:rotate(-3deg)}
.slip-sub{font:italic 400 14px/1.3 var(--serif)}
.ledger-table{position:relative;margin-top:44px;background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(88,104,62,.55) 33px 34px),#f3eedd;border:1px solid var(--ink);padding:0 0 6px}
.ledger-table::before{content:"";position:absolute;top:49px;bottom:0;left:46px;width:5px;border-left:1px solid var(--ox);border-right:1px solid var(--ox)}
.lt-title{font:800 22px/1 var(--slab);text-transform:uppercase;letter-spacing:.06em;padding:14px 14px 12px;border-bottom:2px solid var(--ink);background:var(--paper2)}
.lt-row{display:grid;grid-template-columns:46px 1fr 104px;height:34px;align-items:end;padding-bottom:6px;font:400 13px/1 var(--mono)}
.lt-row span{padding:0 10px}
.lt-row span:first-child{text-align:center;padding:0}
.lt-headrow{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--moss)}
.lt-row span:last-child{color:var(--ox);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.lg-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;background:var(--ink);color:var(--paper);padding:28px clamp(16px,3vw,40px);font:400 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.1em}
/* ledger book page */
.lb-cover{grid-column:1/6}
.lb-cover .slip{transform:rotate(-1.2deg)}
.lb-text{grid-column:6/13}
.lb-text .kicker a{color:inherit}
.lb-text .byline a{color:inherit;border-bottom:1px solid currentColor}
.lb-cols{columns:2 220px}
.lb-ex{margin-top:36px;border-top:4px double var(--ink);padding-top:18px}
.lb-ex blockquote{font:italic 400 clamp(19px,1.9vw,24px)/1.55 var(--serif);border-left:3px solid var(--ox);padding-left:20px}
@media (max-width:760px){
  .lb-cover,.lb-text{grid-column:1}.lb-cover{max-width:380px;margin:0 auto 36px}
  .lg-head{flex-direction:column;align-items:flex-start;gap:10px}
  .lg-head nav{gap:14px;flex-wrap:wrap}
  .slices{height:190vh}
  .slices-stage{width:min(100vw,68svh);aspect-ratio:600/880;--g:2px;
    }
  .slice{background-image:url(/assets/art/ledger-photo-portrait.jpg?v=5c7948af);background-image:image-set(url(/assets/art/ledger-photo-portrait.webp?v=7ec3d340) type("image/webp"),url(/assets/art/ledger-photo-portrait.jpg?v=5c7948af) type("image/jpeg"))}
  .masthead{grid-template-columns:1fr 1fr;gap:12px}
  .nameplate{grid-column:1/-1;grid-row:1;font-size:clamp(40px,13vw,64px)}
  .dateline{flex-wrap:wrap;justify-content:center;font-size:10.5px}
  .dateline span:nth-child(even){display:none}
  .paper-grid{grid-template-columns:1fr}
  .lead-story{grid-column:1;border-right:0;padding-right:0}
  .side{grid-column:1;margin-top:44px}
  .story-cols{columns:1}
  .sl-br{left:12px;right:auto;bottom:12px}.sl-tl{top:12px;left:12px}
  .sl-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){.slices{height:auto}.slices-sticky{position:relative;height:auto;padding:4vh 0}.slice{transform:none}}
.byline a{margin-left:4px;text-decoration:underline;text-underline-offset:3px}
.byline a:hover{color:var(--ox)}
