:root {
  --dw-bg: #f1ebdd; --dw-fg: #1b1916; --dw-accent: #c4471b; --dw-panel: rgba(27, 25, 22, .96);
  --dw-font-body: 'Crimson Pro', Georgia, serif; --head: 'Playfair Display', Georgia, serif; --black: 'Grenze Gotisch', 'Old English Text MT', serif;
  --teal: #2e6f73; --rule: #1b1916; --soft: #6b6255; --paper2: #e8e0cc;
}
body { overflow-x: hidden; font-size: 1.12rem; background-image: radial-gradient(#00000008 1px, transparent 1px); background-size: 4px 4px; }
[hidden] { display: none !important; }
.dw-toast { color: #f1ebdd; }
h1, h2, h3 { font-family: var(--head); font-weight: 900; line-height: 1.02; margin: 0 0 .4em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
section { padding: clamp(48px, 7vw, 90px) clamp(16px, 5vw, 64px); border-top: 3px double var(--rule); }
.kicker { font-family: var(--head); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--dw-accent); margin: 0 0 .6rem; }

.topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 10px clamp(16px, 4vw, 40px);
  background: #f1ebddf0; border-bottom: 1px solid var(--rule); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.brand { font-family: var(--black); font-size: 1.6rem; color: var(--dw-fg); text-decoration: none; line-height: 1; }
.topbar nav { display: flex; align-items: center; gap: 18px; font-family: var(--head); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.topbar nav a { color: var(--dw-fg); text-decoration: none; }
.topbar nav a:hover { color: var(--dw-accent); }
@media (max-width: 700px) { .topbar nav a { display: none; } }

.paper { max-width: 1240px; margin: 0 auto; background: var(--dw-bg); box-shadow: 0 0 0 1px #0000000f, 0 30px 80px #0000001a; }
.masthead { text-align: center; padding: 26px clamp(16px, 4vw, 48px) 18px; }
.ears { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--head); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid var(--rule); padding-bottom: .5em; margin: 0; }
.mast-title { font-family: var(--black); font-size: clamp(3.2rem, 11vw, 8.5rem); line-height: 1; margin: .1em 0 0; letter-spacing: .01em; }
.mast-sub { font-style: italic; border-top: 1px solid var(--rule); border-bottom: 3px double var(--rule); padding: .35em 0; margin: .2em 0 0; }

.front { border-top: 0; padding-top: 18px; }
.front h1 { font-size: clamp(2.6rem, 8vw, 6.4rem); text-align: center; letter-spacing: -.01em; margin-bottom: .15em; }
.deck { text-align: center; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-style: italic; max-width: 54ch; margin: 0 auto 1.4rem; color: #3a342b; }
.front-photo { margin: 0; }
.photo { position: relative; overflow: hidden; border: 1px solid var(--rule); }
.photo img { width: 100%; height: auto; transform-origin: 50% 0; }
figcaption { font-size: .95rem; font-style: italic; color: var(--soft); padding: .5em 0; border-bottom: 1px solid var(--rule); }
.briefs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 1.2rem; }
.briefs article { padding: 0 1.1rem; border-left: 1px solid var(--rule); }
.briefs article:first-child { border-left: 0; padding-left: 0; }
.briefs h2 { font-size: 1.15rem; line-height: 1.15; }
.briefs p { margin: 0; font-size: 1rem; }
@media (max-width: 900px) { .briefs { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; } .briefs article:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .briefs { grid-template-columns: 1fr; } .briefs article { border-left: 0; padding: 0 0 1rem; border-bottom: 1px solid #0002; } }

.hs { position: absolute; z-index: 3; width: 7%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed transparent; background: transparent; padding: 0; transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: #fff; background: #ffffff33; }
.hs.is-found { border-color: #ffffff77; }
.hs-comet { left: 62%; top: 15%; width: 10%; } .hs-dog { left: 49%; top: 54%; width: 7%; } .hs-toaster { left: 45%; top: 74%; width: 8%; }
.hs-cables { left: 13%; top: 60%; width: 11%; } .hs-spinner { left: 34%; top: 51%; width: 8%; } .hs-duck { left: 53%; top: 44%; width: 7%; } .hs-checkout { left: 67%; top: 32%; width: 10%; }
.hs-phone { left: 67%; top: 58%; width: 9%; }

.clock-sec { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; background: #1b1916; color: #f1ebdd; }
.clock-sec .kicker { color: #f0a070; }
@media (max-width: 900px) { .clock-sec { grid-template-columns: 1fr; } }
.readout { font-family: var(--head); font-size: 1.4rem; margin: 1rem 0 .2rem; }
.readout b { font-size: 3.4rem; color: #f0a070; font-variant-numeric: tabular-nums; }
.clock-msg { min-height: 3.4em; font-style: italic; opacity: .9; }
.clock-wrap { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 20px; align-items: center; }
@media (max-width: 560px) { .clock-wrap { grid-template-columns: 1fr; justify-items: center; } }
.clock { width: 100%; max-width: 280px; }
.rim { fill: #2b2620; stroke: #c9a66b; stroke-width: 3; }
.face { fill: #f1ebdd; }
.tick { stroke: #1b1916; stroke-width: 1.2; }
.tick.big { stroke-width: 3; }
.danger { fill: #c4471b33; }
.hand { stroke-linecap: round; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 100px 100px; }
.hour { stroke: #1b1916; stroke-width: 6; } .min { stroke: #1b1916; stroke-width: 3.5; } .sec { stroke: #c4471b; stroke-width: 1.5; }
.pin { fill: #c4471b; }
.nudges { display: grid; gap: 6px; }
.nudge-h { margin: .4rem 0 0; font-family: var(--head); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.nudge { font: inherit; font-size: 1rem; text-align: left; padding: .5em .8em; cursor: pointer; border-radius: 3px; border: 1px solid #f1ebdd33; background: #2b2620; color: #f1ebdd; transition: background .2s, transform .1s; }
.nudge.worse::before { content: '▲ '; color: #f0a070; }
.nudge.better::before { content: '▼ '; color: #8fd3c8; }
.nudge:hover, .nudge:focus-visible { background: #3a332a; }
.nudge:active { transform: translateY(1px); }

.obit-sec { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .obit-sec { grid-template-columns: 1fr; } }
.obit-form { display: grid; gap: .4rem; margin-top: 1rem; }
.obit-form label { font-family: var(--head); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.obit-form input, .obit-form select { font: inherit; padding: .5em .7em; border: 1px solid var(--rule); background: #faf6ec; color: var(--dw-fg); border-radius: 0; }
.obit-btns { display: flex; gap: 10px; margin-top: .6rem; flex-wrap: wrap; }
.btn { font-family: var(--head); font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; padding: .75em 1.2em; border: 2px solid var(--rule); background: transparent; color: var(--dw-fg); cursor: pointer; }
.btn:hover { background: var(--rule); color: var(--dw-bg); }
.btn-ink { background: var(--rule); color: var(--dw-bg); }
.btn-ink:hover { background: var(--dw-accent); border-color: var(--dw-accent); }
.obit { position: relative; border: 6px solid var(--rule); outline: 1px solid var(--rule); outline-offset: -12px; padding: clamp(22px, 4vw, 38px); background: #faf6ec; text-align: left; min-height: 380px; }
.obit-k { text-align: center; font-family: var(--head); text-transform: uppercase; letter-spacing: .3em; font-size: .78rem; margin: 0; }
.obit h3 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .2em 0 0; }
.obit-dates { text-align: center; font-style: italic; margin: 0 0 1rem; border-bottom: 1px solid var(--rule); padding-bottom: .6rem; }
#obitBody p { margin: 0 0 .7em; text-indent: 1.2em; }
#obitBody p:first-child { text-indent: 0; }
.obit.is-new #obitBody { animation: ink .9s ease both; }
@keyframes ink { from { opacity: 0; filter: blur(2px); } }
.paw { margin-top: .6rem; background: none; border: 1px dashed #6b6255; padding: .3em .7em; font: inherit; font-size: .95rem; color: var(--soft); cursor: pointer; }

.museum { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--paper2); }
@media (max-width: 900px) { .museum { grid-template-columns: 1fr; } }
.art { position: relative; margin: 0; border: 1px solid var(--rule); }
.art img { width: 100%; height: auto; filter: sepia(.15); }

.editorial { max-width: 1240px; }
.editorial h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: .1em; }
.byline { font-style: italic; color: var(--soft); border-bottom: 1px solid var(--rule); padding-bottom: .8em; }
.ed-art { position: relative; margin: 1.4rem 0; border: 1px solid var(--rule); }
.ed-art img { width: 100%; height: auto; }
.columns { column-count: 3; column-gap: 2.2rem; column-rule: 1px solid #00000026; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.columns p { margin: 0 0 .9em; }
@media (max-width: 980px) { .columns { column-count: 2; } }
@media (max-width: 640px) { .columns { column-count: 1; text-align: left; } }
.dropcap::first-letter { font-family: var(--head); font-weight: 900; float: left; font-size: 4.2em; line-height: .8; padding: .05em .08em 0 0; color: var(--dw-accent); }
.forthcoming { margin-top: 1.6rem; border: 1px solid var(--rule); padding: 1rem 1.4rem; background: #faf6ec; }
.forthcoming h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .14em; }
.forthcoming ul { margin: 0; padding-left: 1.1em; columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .forthcoming ul { columns: 1; } }
.forthcoming li { margin: .25em 0; break-inside: avoid; }

.book { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; background: #1b1916; color: #f1ebdd; }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; justify-items: center; } }
.book-cover { width: 220px; aspect-ratio: 2 / 3; background: linear-gradient(160deg, #e86b2a, #c4471b 55%, #6f2a12); color: #fff7ea; padding: 22px 18px; display: grid; align-content: space-between;
  box-shadow: inset 8px 0 0 #00000033, 0 24px 50px #000a; border-radius: 2px 6px 6px 2px; text-align: center; }
.bc-k { font-family: var(--head); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; }
.bc-t { font-family: var(--black); font-size: 2.8rem; line-height: .95; }
.bc-s { font-style: italic; font-size: .92rem; line-height: 1.25; }
.bc-a { font-family: var(--head); font-weight: 700; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; border-top: 1px solid #fff7ea88; padding-top: .5em; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 1.2rem; }
.offer { font: inherit; font-family: var(--head); font-weight: 700; font-size: 1.05rem; padding: .9em; cursor: pointer; border: 1px solid #f1ebdd55; background: #2b2620; color: #f1ebdd; transition: transform .15s, border-color .2s; }
.offer small { font-family: var(--dw-font-body); font-weight: 400; opacity: .8; }
.offer:hover, .offer:focus-visible { transform: translateY(-2px); border-color: #f0a070; }

.shop { text-align: center; }
.merch { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 1.6rem; text-align: left; }
.item { border: 1px solid var(--rule); padding: 16px; display: grid; gap: .45rem; align-content: start; background: #faf6ec; }
.item h3 { font-size: 1.15rem; margin: .3rem 0 0; }
.item p { margin: 0; }
.item .offer { background: var(--rule); color: var(--dw-bg); border: 0; margin-top: .5rem; }
.item .offer:hover { background: var(--dw-accent); }
.mock { height: 190px; display: grid; place-items: center; position: relative; overflow: hidden; background: var(--paper2); }
.tee::before { content: ''; position: absolute; width: 150px; height: 165px; top: 14px; left: 50%; transform: translateX(-50%); background: #1b1916;
  clip-path: polygon(30% 0, 40% 6%, 60% 6%, 70% 0, 100% 16%, 90% 36%, 80% 30%, 80% 100%, 20% 100%, 20% 30%, 10% 36%, 0 16%); }
.tee-print { position: relative; top: 12px; font-family: var(--black); font-size: 1.25rem; line-height: 1; color: #f0a070; text-align: center; }
.mug::before { content: ''; position: absolute; width: 112px; height: 124px; left: calc(50% - 66px); top: 34px; background: #faf6ec; border: 2px solid var(--rule); border-radius: 4px 4px 14px 14px; }
.mug::after { content: ''; position: absolute; width: 40px; height: 60px; left: calc(50% + 44px); top: 58px; border: 10px solid #faf6ec; outline: 0; border-left: 0; border-radius: 0 30px 30px 0; filter: drop-shadow(2px 0 0 #1b1916); }
.mug-print { position: relative; left: -10px; top: 4px; font-family: var(--head); font-weight: 900; font-size: 2rem; color: var(--dw-accent); }
.stk { font-family: var(--head); font-weight: 900; font-style: italic; font-size: 1.3rem; line-height: 1.05; background: var(--dw-accent); color: #fff7ea; padding: .7em 1.1em; border-radius: 999px; transform: rotate(-6deg); box-shadow: 0 0 0 4px #fff7ea, 0 6px 14px #0003; text-align: center; }
.shop-note { margin-top: 1.4rem; }

.clues { text-align: center; background: var(--paper2); }
.found { font-family: var(--head); font-weight: 700; }
.journal { max-width: 760px; margin: 1rem auto 0; text-align: left; }
.journal li { margin: .5em 0; }
.reward { max-width: 680px; margin: 1.4rem auto 0; padding: 1rem 1.3rem; border: 2px solid var(--dw-accent); background: #faf6ec; }

.subscribe { display: grid; justify-items: center; text-align: center; }
.subscribe > p { max-width: 60ch; }
.subscribe .dw-optin { text-align: left; width: 100%; }
.subscribe .dw-optin input[type=email] { background: #faf6ec; border: 1px solid var(--rule); border-radius: 0; color: var(--dw-fg); }
.subscribe .dw-optin button[type=submit] { background: var(--rule); color: var(--dw-bg); border-radius: 0; font-family: var(--head); }
.subscribe .dw-optin button[type=submit]:hover { background: var(--dw-accent); }
.offer-note { margin: 0; color: var(--dw-accent); font-weight: 700; }

.foot { padding: 30px 16px 10px; text-align: center; }
.more { font-size: 1rem; }
.glyph { font: inherit; font-family: var(--head); font-weight: 700; color: inherit; background: none; border: 1px solid currentColor; border-radius: 3px; padding: 0 .4em; margin-left: .4em; cursor: pointer; }