/* MEDITATIONS — companion site — wisdomforgepress.com/meditations
   Tokens are the book's own: EB Garamond text, Bebas Neue display,
   the crimson rule, white paper. */

/* The book's faces, self-hosted. The press site's content-security-policy allows
   styles and fonts from its own origin only, so a Google Fonts import is refused
   and the page silently falls back to Impact/Times. These must stay local.
   EB Garamond Medium/SemiBold ship as separately-named families, so the weight
   is declared here explicitly rather than inferred. */
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-mediumitalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#ffffff;
  --ink:#1c1b1a;
  --ink-soft:#4a4744;
  --rule:#c0272d;      /* the book's crimson, sampled from the plate */
  --rule-deep:#9b1b1e;
  --sea:#dfe6ee;       /* the map's Greek-influence blue, faded */
  --stone:#e9e6e1;     /* the map's land grey */
  --measure:36em;
  --display:'Bebas Neue',Impact,sans-serif;
  --text:'EB Garamond',Garamond,'Times New Roman',serif;
}
*{box-sizing:border-box}
html{font-size:19px;-webkit-text-size-adjust:100%}
@media (max-width:640px){html{font-size:17px}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);line-height:1.5;font-feature-settings:"liga","kern"}
a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:.15em}
a:hover{color:var(--rule-deep)}
:focus-visible{outline:2px solid var(--rule);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:.95;margin:0}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:2.6rem 0 .9rem}
h3{font-size:1.45rem;margin:1.8rem 0 .4rem}
p{margin:0 0 1em;max-width:var(--measure)}
.sc{font-variant:small-caps;letter-spacing:.06em}
.year{font-family:var(--display);color:var(--rule);font-size:1.6rem;letter-spacing:.03em}
.ref{font-family:var(--display);color:var(--rule);font-size:.95em;letter-spacing:.04em;white-space:nowrap}
em{font-style:italic}

/* The crimson rule — the one thing that runs through every page */
.rule{height:9px;background:var(--rule);width:100%}
.rule.thin{height:3px}

/* Header */
.press-bar{padding:.6rem 5vw;border-bottom:1px solid #e5e1dc;display:flex;gap:1.1rem 1.4rem;flex-wrap:wrap;align-items:baseline;font-variant:small-caps;letter-spacing:.08em;font-size:.92rem;background:var(--stone)}
.press-bar a{text-decoration:none;color:var(--ink-soft)}
.press-bar a:hover{color:var(--rule)}
.press-bar a.home{color:var(--rule-deep)}
.footer-press{margin-top:.9rem;font-variant:small-caps;letter-spacing:.07em}
.footer-press a{color:var(--ink-soft)}
.footer-press a:hover{color:var(--rule)}
.site-head{padding:1.6rem 5vw .8rem;display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:1.55rem;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--rule)}
nav.primary{display:flex;gap:1.1rem 1.4rem;flex-wrap:wrap}
nav.primary a{text-decoration:none;font-variant:small-caps;letter-spacing:.08em;font-size:1rem}
nav.primary a[aria-current]{color:var(--rule-deep);border-bottom:2px solid var(--rule)}

/* Page skeleton */
.wrap{padding:0 5vw}
.page{padding:2.2rem 5vw 3rem;max-width:1180px;margin:0 auto}
.lede{font-size:1.2rem;max-width:34em}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:start}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}
.footer{padding:2.5rem 5vw 3rem;font-size:.95rem;color:var(--ink-soft)}
.footer p{max-width:none}
hr{border:0;border-top:1px solid #d8d4cf;margin:2.5rem 0}

/* Home: the six ways in, laid along the rule as a ledger, not cards */
.hero{padding:4rem 5vw 2rem;max-width:1180px;margin:0 auto}
.hero .sub{font-variant:small-caps;letter-spacing:.12em;color:var(--ink-soft);margin:.8rem 0 0;font-size:1.05rem}
.ways{list-style:none;padding:0;margin:0;max-width:1180px;margin:0 auto}
.ways li{border-top:1px solid #d8d4cf;padding:1.3rem 5vw;display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem 2rem;align-items:baseline}
.ways li:last-child{border-bottom:1px solid #d8d4cf}
.ways .n{font-family:var(--display);font-size:2.4rem;color:var(--rule);line-height:1}
.ways a.t{font-family:var(--display);font-size:1.7rem;text-decoration:none;letter-spacing:.02em}
.ways p{margin:.2rem 0 0;color:var(--ink-soft)}
@media (max-width:640px){.ways li{grid-template-columns:4.5rem 1fr}}

/* Timeline: the plate, made scrollable and clickable */
.tl{position:relative;margin:2rem 0 0}
.tl-strip{position:relative;height:280px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;cursor:grab}
.tl-strip.dragging{cursor:grabbing}
.tl-inner{position:relative;height:100%;min-width:2400px}
.tl-line{position:absolute;left:0;right:0;top:50%;height:9px;background:var(--rule);transform:translateY(-50%)}
.tl-tick{position:absolute;top:50%;width:3px;height:22px;background:var(--rule);transform:translateX(-50%)}
.tl-tick.up{transform:translate(-50%,-100%)}
.tl-tick.down{transform:translate(-50%,0)}
.tl-year{position:absolute;transform:translateX(-50%);font-family:var(--display);color:var(--rule);font-size:1.7rem;letter-spacing:.03em;background:none;border:0;cursor:pointer;padding:.2rem .5rem;line-height:1}
.tl-year.up{top:calc(50% - 64px)}
.tl-year.down{top:calc(50% + 32px)}
.tl-year:hover,.tl-year[aria-expanded="true"]{color:var(--ink)}
.tl-year small{display:block;font-family:var(--text);font-variant:small-caps;letter-spacing:.08em;font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.tl-entry{margin:1.6rem 0 0;max-width:var(--measure);min-height:9rem}
.tl-entry h3{margin:0 0 .3rem}
.tl-nav{display:flex;gap:.6rem;margin:.8rem 0 0}
.tl-nav button{font-family:var(--text);font-size:1rem;background:none;border:1px solid var(--ink);padding:.35rem .9rem;cursor:pointer}
.tl-nav button:hover{border-color:var(--rule);color:var(--rule-deep)}
.plate{margin:2.5rem 0 0;overflow-x:auto;border:1px solid #d8d4cf}
.plate img{width:auto;height:340px;max-width:none}
.caption{font-size:.95rem;color:var(--ink-soft);margin:.5rem 0 0}

/* Map: zoom and pan */
.map-frame{position:relative;overflow:hidden;background:var(--stone);border:1px solid #d8d4cf;height:min(72vh,720px);touch-action:none;cursor:grab}
.map-frame.dragging{cursor:grabbing}
.map-frame img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none}
.map-ctl{position:absolute;right:.8rem;bottom:.8rem;display:flex;gap:.4rem}
.map-ctl button{width:2.4rem;height:2.4rem;border:1px solid var(--ink);background:var(--paper);font-family:var(--display);font-size:1.3rem;cursor:pointer}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.6rem 2rem;margin:1.2rem 0 0;font-variant:small-caps;letter-spacing:.06em}
.legend span{display:inline-block;width:1.2rem;height:1.2rem;vertical-align:-.2rem;margin-right:.6rem;border:1px solid #b9b3ac}
.sw-latin{background:var(--rule)}
.sw-latin-i{background:repeating-linear-gradient(45deg,var(--rule) 0 2px,#fff 2px 6px)}
.sw-greek{background:#2f4f7a}
.sw-greek-i{background:var(--sea)}
.sw-border{background:linear-gradient(transparent 45%,var(--rule) 45% 55%,transparent 55%);border:0}
.sw-city{background:radial-gradient(circle,var(--ink) 30%,transparent 32%);border:0}

/* The Twelve */
.twelve{list-style:none;padding:0;margin:1.5rem 0 0;counter-reset:bk}
.twelve li{border-top:1px solid #d8d4cf;padding:1.4rem 0;display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem 2rem;align-items:start}
.twelve li:last-child{border-bottom:1px solid #d8d4cf}
.twelve .bk{font-family:var(--display);color:var(--rule);font-size:2.2rem;line-height:1}
.twelve q{quotes:none;font-size:1.35rem;line-height:1.35;display:block}
.twelve .ref{display:block;margin-top:.4rem}

/* The Debts */
.debts{width:100%;border-collapse:collapse;margin:1.5rem 0 0}
.debts th,.debts td{text-align:left;vertical-align:top;padding:.7rem .8rem .7rem 0;border-top:1px solid #d8d4cf}
.debts th{font-weight:500;white-space:nowrap}
@media (max-width:640px){.debts th{white-space:normal}}
.debts th .who{font-variant:small-caps;letter-spacing:.06em}
.debts th .n{font-family:var(--display);color:var(--rule);margin-right:.7rem;font-size:1.2rem}
.debts td em{color:var(--ink-soft)}

/* Carriers */
.carriers article{border-top:1px solid #d8d4cf;padding:1.6rem 0 .4rem}
.carriers h3{margin-top:0}

/* Documents */
.docs{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));gap:1.6rem 2.2rem}
.docs li{border-top:3px solid var(--rule);padding-top:.9rem}
.docs .slot{aspect-ratio:4/3;background:var(--stone);display:grid;place-items:center;color:var(--ink-soft);font-variant:small-caps;letter-spacing:.1em;font-size:.9rem;margin:.6rem 0 .8rem}
.docs h3{margin:0 0 .3rem;font-size:1.35rem}
.docs p{font-size:.98rem;margin:0 0 .5em}
.docs .held{color:var(--ink-soft)}

/* Sources (Notes on the Essays) */
.notes h3{font-family:var(--text);font-variant:small-caps;letter-spacing:.1em;font-size:1.15rem;margin:2.2rem 0 .6rem;font-weight:500}
.notes p b{font-weight:600}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(20,18,16,.92);display:none;place-items:center;z-index:50;padding:3vh 3vw}
.lb.open{display:grid}
.lb img{max-height:94vh;max-width:94vw;width:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb button{position:absolute;top:1rem;right:1rem;font-family:var(--display);font-size:1.4rem;background:var(--paper);border:0;padding:.3rem .8rem;cursor:pointer}
.zoomable{cursor:zoom-in}
img{max-width:100%;height:auto}
/* figure widths and spacing - these were inline style attributes, which the press
   site's content-security-policy refuses. min() keeps them inside narrow screens. */
.fig-380{max-width:min(380px,100%)}
.fig-420{max-width:min(420px,100%)}
.fig-520{max-width:min(520px,100%)}
.mt-sm{margin-top:1.2rem}
.mt-md{margin-top:1.4rem}
.mt-lg{margin-top:2.5rem}
.hero-cta{margin-top:1.6rem}
.hero-cta a{display:inline-block;border:1px solid var(--rule);color:var(--rule);padding:.55rem 1.3rem;text-decoration:none;font-variant:small-caps;letter-spacing:.08em}
.hero-cta a:hover{background:var(--rule);color:#fff}

/* Buy / about */
.buy{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0 0}
.buy a{border:1px solid var(--ink);padding:.5rem 1.1rem;text-decoration:none;font-variant:small-caps;letter-spacing:.08em}
.buy a:hover{border-color:var(--rule)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.press-bar,.site-head,.footer,.tl-nav,.map-ctl{display:none}}