/* Della Frost — The Obituary Page. Newsprint and ink, an editor's red pencil, raven violet for actions. */
@font-face { font-family: 'UnifrakturMaguntia'; src: url('fonts/unifraktur.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url('fonts/oldstandard-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url('fonts/oldstandard-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Old Standard TT'; src: url('fonts/oldstandard-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('fonts/librecaslon.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('fonts/librecaslon-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #ebe8e1;      /* newsprint */
  --paper-lift: #f6f4ef; /* form fields */
  --ink: #18181b;        /* 14.5:1 on paper */
  --deck: #2d2c2a;       /* 11.4:1 */
  --muted: #55534f;      /* 6.3:1 */
  --red: #a8241e;        /* red pencil, 5.9:1 */
  --violet: #4b3f8c;     /* raven violet, 7.2:1; white on violet 8.8:1 */
  --violet-deep: #2f2760;
  --rule: #18181b;
  --rule-soft: #b9b5ab;
  --masthead: 'UnifrakturMaguntia', 'Old English Text MT', Georgia, serif;
  --head: 'Old Standard TT', Georgia, 'Times New Roman', serif;
  --body: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet); text-underline-offset: 3px; }
a:hover { color: var(--violet-deep); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sheet {
  max-width: 1180px; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 30;
  background: var(--ink); color: var(--paper); padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); }

/* Masthead */
.masthead { padding-top: 28px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.ears {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  font-family: var(--head); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.nameplate {
  font-family: var(--masthead); font-weight: 400; font-size: clamp(54px, 9vw, 112px); line-height: 1.05;
  color: var(--ink); text-decoration: none;
}
.nameplate:hover { color: var(--ink); }
.folio {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px;
  padding: 6px 0; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--head); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.folio .edition { font-weight: 700; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.nav a:hover { color: var(--violet); }
.nav a[aria-current="page"] { color: var(--red); text-decoration-thickness: 2px; }
.nav a.nav-cta { color: var(--violet); font-weight: 700; }

/* Type */
.kicker { margin: 0; font-family: var(--head); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.headline { margin: 0; font-family: var(--head); font-weight: 700; line-height: 1.04; text-wrap: balance; overflow-wrap: break-word; }
.h-lead { font-size: clamp(38px, 5.4vw, 68px); }
.h-second { font-size: clamp(30px, 3.4vw, 42px); }
.h-section { font-size: clamp(26px, 2.6vw, 30px); line-height: 1.1; }
.deck { margin: 0; font-family: var(--head); font-style: italic; font-size: clamp(19px, 2vw, 22px); line-height: 1.4; color: var(--deck); }
.byline { margin: 0; font-family: var(--head); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.comps { margin: 0; font-style: italic; color: var(--muted); }
.cols { column-count: 2; column-gap: 32px; column-rule: 1px solid var(--rule-soft); }
.cols p { margin: 0 0 14px; }
.cols p:last-child { margin-bottom: 0; }
.cols p:first-child::first-letter {
  float: left; font-family: var(--head); font-weight: 700; font-size: 3.4em; line-height: 0.82; padding: 6px 8px 0 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--violet-deep); color: var(--paper); }
.btn-violet { background: var(--violet); color: #ffffff; }
.btn-violet:hover { background: var(--violet-deep); color: #ffffff; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Stories */
.story { padding-block: 40px 48px; display: flex; flex-wrap: wrap; gap: 40px; border-bottom: 1px solid var(--rule); }
.story-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.story-art { flex: 1 1 280px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.story-art img { width: 100%; max-width: 340px; aspect-ratio: 2 / 3; object-fit: cover; filter: grayscale(0.15); }
.story-art figcaption { font-size: 14px; font-style: italic; color: var(--muted); max-width: 340px; }
.story-art a { display: block; max-width: 340px; }
.brief { flex: 2 1 560px; min-width: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.brief .thumb { flex: 0 1 200px; width: 200px; max-width: 100%; align-self: flex-start; }
.brief .thumb img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: grayscale(0.15); }
.brief .brief-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.headline a { color: inherit; text-decoration: none; }
.headline a:hover { color: var(--violet); }

/* Boxes */
.box { padding: 20px; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.box-title { margin: 0; font-family: var(--head); font-weight: 700; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.box p { margin: 0; }
.struck { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.correction { font-weight: 700; color: var(--red); }
.aside { flex: 1 1 280px; min-width: 0; align-self: flex-start; }

.notices { padding-block: 40px 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.notice { padding: 22px; border: 2px solid var(--rule); display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
.notice h2, .notice h3 { margin: 0; font-family: var(--head); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; }
.notice p { margin: 0; max-width: 28em; }

.section { padding-block: 40px 48px; display: flex; flex-wrap: wrap; gap: 40px; border-bottom: 1px solid var(--rule); }
.section > :first-child { flex: 1 1 220px; min-width: 0; }
.section > :last-child { flex: 3 1 560px; min-width: 0; }

.facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.facts li { padding-left: 22px; position: relative; }
.facts li::before { content: "§"; position: absolute; left: 0; color: var(--red); font-family: var(--head); }

.details { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 20px; font-size: 15px; }
.details dt { font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.details dd { margin: 0; }

/* Footer */
.site-footer { padding-block: 18px 28px; border-top: 3px double var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--muted); }
.site-footer a { color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.lost { min-height: 45vh; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-block: 48px; }

@media (max-width: 700px) {
  .cols { column-count: 1; }
  .folio { justify-content: center; text-align: center; }
  .story-art img, .story-art a, .story-art figcaption { max-width: 260px; }
  .brief .thumb { flex-basis: 160px; width: 160px; }
  .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }