:root { --ink:#171714; --paper:#f5f0e5; --red:#ef5b3f; --blue:#16384a; --line:#cfc7b6; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; }
.masthead { max-width:1380px; margin:auto; padding:54px 42px 34px; border-bottom:2px solid var(--ink); }
.eyebrow { margin:0 0 10px; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; max-width:900px; font-family:Georgia, serif; font-size:clamp(3rem,7vw,7rem); line-height:.86; letter-spacing:-.06em; }
h1 em { color:var(--red); font-weight:400; }
.masthead>p:last-child { margin:24px 0 0; color:#514e47; font-size:1.05rem; }
main { max-width:1380px; margin:auto; padding:34px 42px 70px; }
.viewer { background:#fff; border:2px solid var(--ink); box-shadow:8px 8px 0 var(--ink); }
.viewer-topline { display:flex; justify-content:space-between; padding:14px 18px; border-bottom:2px solid var(--ink); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.dot { padding:0 9px; color:var(--red); }.format { color:var(--red); }
.stage { position:relative; padding:24px 60px 12px; }
figure { margin:0; }
#post-image { display:block; width:100%; aspect-ratio:2/1; object-fit:contain; background:white; }
figcaption { display:flex; gap:30px; justify-content:space-between; align-items:end; padding:18px 0 4px; }
figcaption h2 { margin:0 0 8px; font-family:Georgia, serif; font-size:clamp(1.7rem,3vw,2.8rem); }
figcaption p { margin:0; line-height:1.45; color:#555149; }
.tags { max-width:420px; text-align:right; color:var(--blue); font-size:.85rem; font-weight:700; }
.nav { position:absolute; top:40%; width:40px; height:56px; border:0; background:var(--ink); color:white; font-size:1.5rem; cursor:pointer; }
.nav:hover,.nav:focus-visible { background:var(--red); }.previous { left:0; }.next { right:0; }
.slider-dots { display:flex; justify-content:center; gap:8px; padding:14px; border-top:1px solid var(--line); }
.slider-dots button { width:9px; height:9px; padding:0; border:1px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; }
.slider-dots button.active { background:var(--red); border-color:var(--red); transform:scale(1.35); }
.schedule { margin-top:76px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; border-bottom:2px solid var(--ink); padding-bottom:16px; }
.section-heading h2 { margin:0; font-family:Georgia, serif; font-size:clamp(1.8rem,4vw,3.2rem); }
.section-heading>p { font-size:.75rem; text-transform:uppercase; font-weight:700; letter-spacing:.08em; }
.legend-mark { display:inline-block; width:9px; height:9px; margin-right:6px; background:var(--red); border-radius:50%; }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); border-left:1px solid var(--line); }
.day { min-height:176px; padding:15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.32); }
.day.has-post { cursor:pointer; background:#fff; }.day.has-post:hover,.day.has-post.active { box-shadow:inset 0 -6px 0 var(--red); }
.day-name { display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.day-number { display:block; margin:7px 0 25px; font-family:Georgia, serif; font-size:2rem; }
.day h3 { margin:0 0 7px; font-size:.88rem; }.day p { margin:0; font-size:.72rem; color:#686359; line-height:1.35; }
.day.rest { background:repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(0,0,0,.025) 8px,rgba(0,0,0,.025) 16px); }
footer { padding:25px 42px; text-align:center; color:#f6f0e6; background:var(--blue); font-family:Georgia, serif; font-style:italic; }
.share-bar{display:flex;align-items:center;gap:10px;padding:14px 0 10px;border-top:1px solid var(--line)}.share-bar>span:first-child{margin-right:auto;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.share-button{border:1px solid var(--ink);padding:10px 14px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}.share-button:hover,.share-button:focus-visible{background:var(--ink);color:#fff}.share-status{min-width:0;color:#52636b;font-size:.72rem}.share-status:empty{display:none}
@media (max-width:800px) { .masthead,main{padding-left:18px;padding-right:18px}.stage{padding:14px 42px 8px}.calendar{grid-template-columns:1fr 1fr}.day{min-height:145px}figcaption,.section-heading{align-items:start;flex-direction:column}.tags{text-align:left}.section-heading>p{margin-bottom:0} }
@media (max-width:480px) { .calendar{grid-template-columns:1fr}.day{min-height:auto}.day-number{margin-bottom:12px} }
@media(max-width:600px){.share-bar{align-items:stretch;flex-direction:column}.share-bar>span:first-child{margin:0 0 4px}.share-button{text-align:left}}
.site-nav{max-width:1380px;margin:auto;padding:22px 42px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.site-nav div{display:flex;gap:28px}.site-nav a{color:var(--ink);text-decoration:none;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.wordmark{font-family:Georgia,serif;font-size:1rem!important;text-transform:none!important}.masthead .lede{margin:30px 0 18px;max-width:720px;color:#514e47;font:1.25rem/1.55 Georgia,serif}.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;padding:90px 0}.story h2,.comic-intro h2{margin:0;font:clamp(2.4rem,5vw,5rem)/.98 Georgia,serif;letter-spacing:-.04em}.story-copy{font:1.08rem/1.75 Georgia,serif}.story-copy p{margin:0 0 1.4em}.dropcap:first-letter{float:left;color:var(--red);font-size:4.8rem;line-height:.7;padding:10px 10px 0 0}.principles{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);margin-bottom:100px}.principles article{padding:28px;border-right:1px solid var(--ink)}.principles article:last-child{border:0}.principles span{color:var(--red);font-weight:800}.principles h3{font:1.5rem Georgia,serif;margin:28px 0 12px}.principles p{color:#5b574f;line-height:1.55}.comic-intro{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:32px}.comic-intro .eyebrow{grid-column:1/-1}.comic-intro>p:last-child{color:#5b574f;line-height:1.6}.quiet-state{padding:4rem;text-align:center}@media(max-width:800px){.site-nav{padding-left:18px;padding-right:18px}.story,.comic-intro{grid-template-columns:1fr;gap:24px}.principles{grid-template-columns:1fr}.principles article{border-right:0;border-bottom:1px solid var(--ink)}}