/* Layout: a page from an 1897 druggist's catalog — heavy masthead rules, Didone headlines,
   price-list dot leaders, real documents framed as plates. One deliberate light look (paper). */
:root{
  --paper:#ECE8DD;      /* bone label paper, cool rather than cream */
  --paper-2:#E3DED0;    /* plate / inset paper */
  --ink:#1C1A17;        /* printer's black, slightly warm */
  --ink-2:#55504A;      /* secondary text */
  --cobalt:#1F3F78;     /* apothecary cobalt-glass blue: the one accent */
  --amber:#9A5A17;      /* amber bottle: dates and small marks only */
  --rule:#2A2622;
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text:"Libre Caslon Text", "Caslon", Georgia, "Times New Roman", serif;
  --wrap:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.65;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
img{max-width:100%;height:auto;display:block}
a{color:var(--cobalt);text-underline-offset:3px}
a:hover{color:var(--ink)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto}
.narrow{max-width:760px;margin:0 auto}

/* masthead */
.mast{border-bottom:4px double var(--rule);padding-block:14px 0}
.mast-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:8px}
.mast-name{display:flex;align-items:center;justify-content:center;gap:.4em;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem, 5.4vw, 4.4rem);letter-spacing:-.01em;line-height:1;padding-block:18px 14px;text-align:center;text-wrap:balance}
.mast-name img{width:.9em;height:.9em;border-radius:50%;flex:none}
.mast.small .mast-name{font-size:clamp(1.5rem, 3.6vw, 2.4rem);padding-block:12px 10px}
.nav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-block:9px}
.nav a{color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}
.nav a:hover,.nav a.on{color:var(--cobalt)}
.nav a.on{text-decoration:underline;text-decoration-thickness:1px}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem, 5vw, 3.7rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem, 3vw, 2.2rem)}
h3{font-size:1.45rem;line-height:1.2}
p{margin:0 0 1em;max-width:66ch}
.eyebrow{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin:0 0 .9em}
.lede{font-size:1.18rem;color:var(--ink)}
.muted{color:var(--ink-2)}
.sc{font-variant:small-caps;letter-spacing:.06em}

/* sections */
section{padding-block:56px}
section + section{border-top:1px solid var(--rule)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.sec-head .note-r{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:56px}
.hero > *{min-width:0}
.hero h1 em{font-style:italic;color:var(--cobalt)}
.actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:1.4em}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;padding:.95em 1.6em;border:1px solid var(--ink)}
.btn:hover{background:var(--cobalt);border-color:var(--cobalt);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.plate{margin:0;background:var(--paper-2);border:1px solid var(--rule);padding:14px;box-shadow:6px 6px 0 var(--rule);transform:rotate(.6deg)}
.plate img{filter:sepia(.25) contrast(1.05);mix-blend-mode:multiply}
.plate figcaption,.fig-cap{font-size:.78rem;line-height:1.45;color:var(--ink-2);margin-top:10px}

/* latest episode */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.feature > *{min-width:0}
.thumb{border:1px solid var(--rule);display:block}
.status{display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:.25em .7em;border:1px solid currentColor;color:var(--cobalt);margin-left:.6em;vertical-align:middle}
.meta{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.8em}

/* price-list leaders (the catalog's own convention) */
.leaders{list-style:none;margin:0;padding:0}
.leaders li{display:flex;align-items:baseline;gap:.6em;padding-block:.55em;border-bottom:1px solid rgba(42,38,34,.18)}
.leaders .no{font-family:var(--display);font-style:italic;color:var(--amber);min-width:3.2em}
.leaders .t{min-width:0}
.leaders .dots{flex:1;border-bottom:2px dotted rgba(42,38,34,.45);transform:translateY(-.3em);min-width:1.5em}
.leaders .d{white-space:nowrap;font-size:.86rem;letter-spacing:.06em;color:var(--ink-2)}
.leaders a{color:var(--ink);text-decoration:none}
.leaders a:hover{color:var(--cobalt);text-decoration:underline}

/* upcoming covers */
.covers{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:24px;margin-top:30px}
.covers figure{margin:0}
.covers figcaption{font-size:.86rem;margin-top:8px;line-height:1.4}
.covers figcaption b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:600;line-height:1.2}
.covers .date{color:var(--amber);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}

/* method */
.method{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:0 48px}
.method div{border-top:1px solid var(--rule);padding-block:18px 8px}
.method h3{font-size:1.25rem;margin-bottom:.35em}
.method p{font-size:.96rem;color:var(--ink-2)}

/* episode page */
.ep-head{text-align:center;padding-block:48px 24px}
.ep-head h1{max-width:20ch;margin:0 auto .5em}
.ep-head .actions{justify-content:center}
.ep-thumb{max-width:900px;margin:0 auto 8px}
.chap .no{min-width:2.2em}
.docs{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:32px}
.docs figure{margin:0}
.docs .plate{transform:none;box-shadow:4px 4px 0 var(--rule)}
.src{list-style:none;padding:0;margin:0;counter-reset:s}
.src li{counter-increment:s;display:grid;grid-template-columns:2.4em 1fr;gap:4px 10px;padding-block:14px;border-bottom:1px solid rgba(42,38,34,.18)}
.src li::before{content:"[" counter(s) "]";font-family:var(--display);color:var(--amber)}
.src .what{display:block;font-size:.88rem;color:var(--ink-2)}

/* notices and footer */
.notice{border:1px solid var(--rule);border-left:6px solid var(--cobalt);padding:14px 18px;font-size:.95rem;max-width:none}
footer{border-top:4px double var(--rule);margin-top:24px;padding-block:28px 40px;text-align:center;font-size:.82rem;color:var(--ink-2)}
footer .nav{border:0;padding-block:4px 12px}
footer img{width:44px;height:44px;border-radius:50%;margin:0 auto 10px}

@media (max-width:860px){
  .hero,.feature{grid-template-columns:1fr;gap:32px}
  .plate{transform:none}
  .covers{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:17px}
  section{padding-block:40px}
  .covers,.method,.docs{grid-template-columns:1fr}
  .nav{gap:16px}
  .nav a{font-size:.68rem;letter-spacing:.14em}
  .mast-top span:nth-child(2){display:none}
  .leaders .dots{display:none}
  .leaders li{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}