/*
 * obits directives — full text in DIRECTIVES.md
 * 1. SSOT — Extend the one that exists. Never a second copy that can disagree.
 * 2. Caveman comments — Shortest technical line that lands. Why, not what.
 * 3. No post-mortems — Code says what is, never what it used to be. Git keeps the history.
 * end directives
 */
/* Fonts, palette, reset. Shared by site.css and hub.css; neither works alone.
 * Hand-authored, no build step.
 *
 * The palette is a default: brand_vars() re-declares it per outlet on the
 * public site. The console ignores that and stays in our colours.
 *
 * Fonts are local. No third-party request means no DNS, TLS and redirect in
 * front of the text — that is where font-driven layout shift comes from. The
 * three latin faces are preloaded, so they are usually in hand before paint.
 */

/* ---------- fonts ---------- */
/* All OFL 1.1, cut by tools/fonts.py. wght stays wide enough for a <strong> in
 * a submitted obituary; opsz is whole, because the design sets one face at 11px
 * and at 78px. */
@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Newsreader;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: Newsreader;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  --color-paper: #faf8f4;
  --color-paper-alt: #f2efe8;
  --color-card: #ffffff;

  --color-ink: #2c2a26;
  --color-ink-2: #3a3630;
  --color-ink-3: #4d4841;
  --color-muted: #6f6a61;
  --color-muted-2: #8a8377;

  --color-rule: #eae5dc;
  --color-rule-2: #dcd5c8;
  --color-rule-3: #e5dfd3;

  /* The sage. The one colour an outlet is most likely to change; see
     app/services/branding.py, which derives the rest from theirs. */
  --color-accent: #e7ece3;
  --color-accent-ink: #3e4a3a;
  --color-accent-ink-2: #5c6656;
  --color-accent-rule: #c6d0c0;

  /* The palette has no red. This is for form errors only. */
  --color-danger: #8a1c1c;

  /* Placeholder hatch, for a notice with no photograph. */
  --color-ph-a: #e8e3d8;
  --color-ph-b: #ddd7c9;

  /* The bar's own height. A number anything sitting under a sticky bar has to
     agree with, so it is declared once. */
  --adminbar-h: 38px;

  --font-serif: Newsreader, Georgia, serif;
  --font-sans: "Instrument Sans", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --pad: 40px;
  /* --bar-1 masthead, --bar-2 subnav. Anything pinning below both measures
     from --bars rather than guessing. */
  --bar-1: 53px;
  --bar-2: 86px;
  --bars: calc(var(--bar-1) + var(--bar-2));
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html {
  scroll-behavior: smooth;
  /* Anchor jumps land clear of both sticky bars, not under them. */
  scroll-padding-top: calc(var(--bars) + 24px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
blockquote, dl, dd, figure, h1, h2, h3, h4, h5, h6, p, pre { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset, legend { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-ink); text-decoration: none; transition: opacity .15s ease; }
a:hover { opacity: .7; }
button, input, optgroup, select, textarea {
  font: inherit; letter-spacing: inherit; color: inherit;
  background-color: transparent; margin: 0; padding: 0;
}
button { cursor: pointer; }
/* The browse button is 4px taller with its UA padding. */
::file-selector-button {
  box-sizing: border-box; border: 0 solid; margin: 0; padding: 0;
  font: inherit; color: inherit; background-color: transparent;
}
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; }
/* Chrome pads a date input's internals: 2px taller without this. */
::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field { padding-block: 0; }
[hidden] { display: none !important; }
::selection { background: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hidden to the eye, read aloud. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* ---------- the admin bar ---------- */
/* Thin, dark, above everything, on every page a signed-in person can see -
   their own public site included. Borrowed from WordPress because a newsroom
   already knows what it is and where it lives. */
.adminbar {
  position: sticky; top: 0; z-index: 60;
  background: #2c2a26; color: #d9d4cb;
  font-size: 12.5px; line-height: 1;
}
.adminbar__in {
  max-width: none; margin: 0; padding: 0 10px; height: var(--adminbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.adminbar__left, .adminbar__right { display: flex; align-items: center; gap: 2px; }
/* The console's nav opens from the bar, so a phone has one bar and not two.
   A desk has the nav as a column already, and a page with no drawer behind it
   has nothing to open. */
.navbutton { display: none; }
/* The hover highlight is a shape, so it needs room to be one: enough padding
   that the label sits inside it, and enough height that it never reaches the
   top and bottom of a 38px bar. */
.adminbar a, .adminbar__out {
  color: #d9d4cb; padding: 7px 12px; border-radius: 8px; line-height: 1.4;
  background: none; border: 0; font: inherit; cursor: pointer; white-space: nowrap;
}
.adminbar a:hover, .adminbar__out:hover { background: #3b3630; color: #fff; }
.adminbar__home { font-weight: 500; }
.adminbar__who { color: #8a8377; padding: 0 8px 0 4px; }
.adminbar__count {
  background: #4a443c; border-radius: 6px; padding: 2px 7px; font-size: 11px;
  margin-left: 2px;
}
/* On a phone the links do not fit. They scroll sideways rather than squashing
   the one thing on the right that always has to be reachable: sign out. */
@media (max-width: 760px) {
  /* A phone gets one bar instead of two, so it can be a bar rather than a
     hairline: 52px is a real touch target for the two things on it. */
  :root { --adminbar-h: 52px; }
  .adminbar { font-size: 14px; }
  .adminbar__in { gap: 8px; padding: 0 8px; }
  .adminbar__right { flex: none; }
  .adminbar__who { display: none; }  /* they know who they are; the tool is 390px wide */
  .adminbar__home { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

  .adminbar a, .adminbar__out { padding: 10px 12px; }
  body:has(.navtoggle) .navbutton {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; margin-right: 2px; border-radius: 8px;
    font-size: 17px; line-height: 1; color: #d9d4cb; cursor: pointer;
  }
  body:has(.navtoggle) .navbutton:hover { background: #3b3630; }
  /* The checkbox is the control and the label is only its face, so the focus
     ring has to be moved onto the face by hand. */
  .navtoggle:focus-visible ~ .adminbar .navbutton { outline: 2px solid #d9d4cb; outline-offset: -2px; }
  /* The drawer holds these, and holds them the same way on every page. */
  body:has(.navtoggle) .adminbar__left a:not(.adminbar__home) { display: none; }
}

/* The bar is chrome for one person, not part of the page: it never prints, and
   it never appears in a screenshot of a family's notice. */
@media print { .adminbar { display: none; } }