/*
Theme Name: ESRAG Updates
Theme URI: https://esrag.org/
Author: Member Minder Pro, LLC
Author URI: https://memberminderpro.com/
Description: Standalone block theme for the ESRAG interim notice site. Reproduces the static esrag.org suspension notice and publishes member updates from the ESRAG board as posts. Deliberately neutral and unbranded: no Rotary or ESRAG logos, wheel marks, or brand colours. Ships zero front-end JavaScript.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esrag-updates
Tags: block-theme, one-column, full-site-editing
*/

/* ==========================================================================
   Design tokens

   The light palette lives in theme.json (settings.color.palette and
   settings.custom), so it also reaches core blocks and the editor as
   --wp--preset--color--* / --wp--custom--*.

   theme.json cannot express a media query, so the dark palette has to
   re-declare those generated properties here. This is expected, not a
   workaround for something done wrong. The doubled :root:root selector
   raises specificity above the global-styles block WordPress prints in
   <head>, so this wins regardless of stylesheet order.
   ========================================================================== */

:root {
  --bg: var(--wp--preset--color--bg);
  --surface: var(--wp--preset--color--surface);
  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --ink-faint: var(--wp--preset--color--ink-faint);
  --line: var(--wp--preset--color--line);
  --accent: var(--wp--preset--color--accent);
  --accent-strong: var(--wp--preset--color--accent-strong);
  --num: var(--wp--preset--color--num);
  --focus: var(--wp--preset--color--focus);
  --halo: var(--wp--custom--halo);
  --shadow: var(--wp--custom--shadow);
}

@media (prefers-color-scheme: dark) {
  :root:root {
    --wp--preset--color--bg: #14171b;
    --wp--preset--color--surface: #1b2026;
    --wp--preset--color--ink: #e9edf2;
    --wp--preset--color--ink-soft: #aab3bf;
    --wp--preset--color--ink-faint: #79828e;
    --wp--preset--color--line: #2a3039;
    --wp--preset--color--accent: #7fb1d2;
    --wp--preset--color--accent-strong: #a4cae3;
    --wp--preset--color--num: #6a7480;
    --wp--preset--color--focus: #7fb1d2;
    --wp--custom--halo: rgba(127, 177, 210, 0.07);
    --wp--custom--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 44px -28px rgba(0, 0, 0, 0.8);
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

/* No scroll-behavior: smooth — it silently cancels the jump to a #fragment
   while the entrance animations are still settling, leaving the TOC dead. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Thin institutional accent bar */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  z-index: 2;
}

/* WordPress wraps every block template in .wp-site-blocks, so the layout the
   static site puts on <body> lands here instead. */
.wp-site-blocks {
  min-height: 100vh;
}

/* Skip link: core markup, themed to match the focus treatment. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.65rem 1rem;
  background: var(--surface);
  color: var(--accent-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Shared link treatment. The underline is a background gradient, not
   text-decoration, so it can animate from 0 to full width on hover. */
a {
  color: var(--accent-strong);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
  border-radius: 2px;
}

a .ext {
  display: inline-block;
  width: 0.64em;
  height: 0.64em;
  margin-left: 0.18em;
  vertical-align: baseline;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  opacity: 0.65;
}

@media (hover: hover) {
  a:hover {
    color: var(--accent);
    background-size: 100% 2px;
  }
  a:hover .ext { opacity: 1; }
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  background-size: 100% 2px;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Notice page — the front page, and the body of 404 responses
   ========================================================================== */

.notice-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Full height so .notice's auto margins centre it in the free space and the
     footer is pushed to the bottom, the way the static page centres <main>. */
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 2.5rem);
  background-image: radial-gradient(60% 50% at 50% 0%, var(--halo) 0%, transparent 70%);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  line-height: 1.65;
}

.notice {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 43rem;
  margin: auto 0;
}

/* Abstract redirect / notice mark — deliberately non-thematic */
.mark {
  display: block;
  width: clamp(40px, 7vw, 52px);
  height: auto;
  color: var(--accent);
  margin-bottom: clamp(1.6rem, 4vw, 2.25rem);
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.notice h1 {
  font-weight: 600;
  font-size: clamp(1.85rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(1rem, 3vw, 1.5rem);
  text-wrap: balance;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
}

.notice .lead {
  font-size: clamp(1.04rem, 0.97rem + 0.4vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 clamp(2rem, 5vw, 2.5rem);
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}

.notice .divider {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 0 0 clamp(1.5rem, 4vw, 2rem);
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both;
}

.notice ul.resources {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: res;
}

.notice ul.resources > li {
  position: relative;
  counter-increment: res;
  padding: clamp(1.05rem, 3vw, 1.35rem) clamp(1.1rem, 3vw, 1.4rem) clamp(1.05rem, 3vw, 1.35rem) clamp(2.9rem, 8vw, 3.3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s ease;
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.notice ul.resources > li:nth-child(1) { animation-delay: 0.24s; }
.notice ul.resources > li:nth-child(2) { animation-delay: 0.30s; }
.notice ul.resources > li:nth-child(3) { animation-delay: 0.36s; }
.notice ul.resources > li:nth-child(4) { animation-delay: 0.42s; }
.notice ul.resources > li:nth-child(5) { animation-delay: 0.48s; }

.notice ul.resources > li::before {
  content: counter(res, decimal-leading-zero);
  position: absolute;
  left: clamp(1.1rem, 3vw, 1.4rem);
  top: clamp(1.1rem, 3vw, 1.45rem);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--num);
  font-feature-settings: "tnum" 1;
}

@media (hover: hover) {
  .notice ul.resources > li:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
  }
}

/* Featured member-update call-out */
.callout {
  position: relative;
  margin: 0 0 clamp(2rem, 5vw, 2.5rem);
  padding: clamp(1.9rem, 5vw, 2.6rem) clamp(1.4rem, 4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

/* Hairline accent along the leading edge */
.callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent);
}

/* Eyebrow label. Cased in CSS, not markup, so screen readers do not
   announce it letter by letter as an initialism. */
.callout-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.callout-eyebrow svg {
  width: 0.98rem;
  height: 0.98rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.callout-title {
  margin: 0;
  font-size: clamp(1.06rem, 0.99rem + 0.4vw, 1.24rem);
  line-height: 1.45;
  text-wrap: balance;
}

.callout-title strong {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Site text colour; underline stays hidden until hover or focus */
.callout-title a {
  color: var(--ink);
  font-weight: 400;
  background-size: 0 1px;
}

/* Text stays --ink; only the rule underneath picks up the site link colour */
@media (hover: hover) {
  .callout-title a:hover {
    color: var(--ink);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% 2px;
  }
}

.callout-title a:focus-visible {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
}

.callout-meta {
  margin: 0.7rem 0 0;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* Closing quotation */
.notice .closing {
  margin: clamp(2.25rem, 6vw, 3rem) 0 0;
  padding: 0 clamp(0.5rem, 3vw, 1.5rem);
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.16rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  border: none;
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.56s both;
}

.notice .closing p { margin: 0; }
.notice .closing cite { display: none; }

/* ==========================================================================
   Member update — single post
   ========================================================================== */

.update-layout {
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 8vw, 5rem);
  background-image: radial-gradient(60% 40% at 50% 0%, var(--halo) 0%, transparent 70%);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.08rem);
  line-height: 1.7;
}

.update {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

/* Two-column with a sticky contents rail once there is room for one */
@media (min-width: 68rem) {
  .update {
    max-width: 61rem;
    display: grid;
    grid-template-columns: minmax(0, 42rem) 15rem;
    column-gap: 4rem;
    align-items: start;
  }
  .update > .backlink     { grid-column: 1; grid-row: 1; }
  .update > .masthead     { grid-column: 1; grid-row: 2; }
  .update > .divider      { grid-column: 1; grid-row: 3; }
  .update > .letter       { grid-column: 1; grid-row: 4; }
  .update > .more-updates { grid-column: 1; grid-row: 5; }
  .update > .rail {
    grid-column: 2;
    grid-row: 2 / span 3;
    position: sticky;
    top: 2.5rem;
  }
}

/* Return path to the notice page */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 500;
  background-size: 0 1px;
}

.backlink svg {
  width: 0.8em;
  height: 0.8em;
  flex: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.update h1 {
  font-weight: 600;
  font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}

.dateline {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.dateline .sep {
  margin: 0 0.5em;
  color: var(--ink-faint);
}

.dateline a {
  color: var(--ink);
  background-size: 0 1px;
}

.update .divider {
  border: none;
  height: 1px;
  background: var(--line);
  margin: clamp(1.75rem, 4vw, 2.25rem) 0 clamp(1.75rem, 4vw, 2.25rem);
}

/* ==========================================================================
   Contents rail: a disclosure on narrow screens, an open rail on wide ones.
   No script — <details> carries the open/closed state natively.
   ========================================================================== */

/* The gap under the dateline lives on .rail, not on .toc.
   WordPress emits `:root :where(.is-layout-flow) > :first-child
   { margin-block-start: 0 }` at specificity 0,2,0, which outranks a single
   class — so a margin on .toc (the rail's only child) is silently dropped.
   .update > .rail clears that, and .rail is never a first child. */
.update > .rail {
  margin-top: clamp(1.5rem, 4vw, 2rem);
}

.toc {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.toc summary {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}

.toc summary::-webkit-details-marker { display: none; }

.toc summary svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.toc summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: 10px;
}

.toc ol {
  margin: 0;
  padding: 0 1rem 1rem;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  margin-bottom: 0.55rem;
  line-height: 1.4;
}

.toc li:last-child { margin-bottom: 0; }

.toc a {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
  background-size: 0 1px;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 0.6em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
}

@media (min-width: 68rem) {
  /* In the grid the rail is placed by row, so the mobile gap comes off again. */
  .update > .rail { margin-top: 0; }

  .toc {
    margin: 0;
    border: none;
    background: none;
    border-left: 1px solid var(--line);
    border-radius: 0;
  }
  /* Wide viewports show the list outright; the toggle is only for mobile */
  .toc summary { display: none; }
  .toc::details-content { content-visibility: visible; block-size: auto; }
  .toc ol { padding: 0 0 0 1.5rem; }
}

/* ==========================================================================
   Member updates — a read-next block below the letter

   This used to sit in the rail above the letter, which on narrow screens put a
   second stack of navigation between the contents list and the actual content.
   It now follows the letter at every width, lists only the other updates, and
   renders nothing at all when there are none.
   ========================================================================== */

.more-updates {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.rail-heading {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.more-updates ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.more-updates li {
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}

.more-updates li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.u-date {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.more-updates a {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
  background-size: 0 1px;
}

.more-updates .rail-all {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
}

/* Meta links stay quiet until hover; in-prose links keep a resting rule. */
@media (hover: hover) {
  .backlink:hover,
  .dateline a:hover,
  .toc a:hover,
  .more-updates a:hover {
    color: var(--ink);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% 2px;
  }
  .backlink:hover { color: var(--ink-soft); }
  .toc a:hover::before { color: var(--accent); }
}

.backlink:focus-visible,
.dateline a:focus-visible,
.toc a:focus-visible,
.more-updates a:focus-visible {
  background-image: linear-gradient(var(--accent), var(--accent));
}

/* ==========================================================================
   Letter body
   ========================================================================== */

.letter h2 {
  font-weight: 600;
  font-size: clamp(1.14rem, 1.04rem + 0.5vw, 1.34rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(2.1rem, 5vw, 2.75rem) 0 0.75rem;
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}

.letter p {
  margin: 0 0 1.15rem;
  color: var(--ink-soft);
}

.letter .salutation { margin-bottom: 1.4rem; }

.letter ul {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
}

.letter li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  color: var(--ink-soft);
}

/* Restrained marker rather than a bullet glyph */
.letter li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.letter strong {
  color: var(--ink);
  font-weight: 600;
}

.signature {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--line);
}

.signature p { margin: 0 0 0.15rem; color: var(--ink-soft); }
.signature .valediction { margin-bottom: 1.1rem; }
.signature .name { color: var(--ink); font-weight: 600; }
.signature .role { font-size: 0.9rem; color: var(--ink-faint); }

.masthead {
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.letter {
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

/* ==========================================================================
   Member updates index — /updates/
   ========================================================================== */

.updates-index {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

.updates-index .masthead {
  margin-bottom: clamp(1.75rem, 4vw, 2.25rem);
}

.updates-index .lead {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.updates-index .divider {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 0 0 clamp(1.5rem, 4vw, 2rem);
}

.updates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

.updates-list > li {
  padding: clamp(1.15rem, 3vw, 1.45rem) clamp(1.2rem, 3vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s ease;
}

@media (hover: hover) {
  .updates-list > li:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
  }
}

.updates-list .u-date {
  margin-bottom: 0.3rem;
  color: var(--ink-faint);
}

.updates-list .u-heading {
  margin: 0;
  font-size: clamp(1.04rem, 0.98rem + 0.35vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.updates-list .u-heading a {
  color: var(--ink);
  font-weight: 600;
  background-size: 0 1px;
}

@media (hover: hover) {
  .updates-list .u-heading a:hover {
    color: var(--ink);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% 2px;
  }
}

.updates-list .u-heading a:focus-visible {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
}

.updates-list .u-excerpt {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.updates-empty {
  margin: 0;
  color: var(--ink-soft);
}

.updates-pagination {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.75rem;
  font-size: 0.9rem;
}

/* ==========================================================================
   Site footer

   A hairline rule over one subdued credit line, on every template. It aligns
   with the content column above it rather than the full viewport, so the rule
   reads as the end of the page rather than a band across it.
   ========================================================================== */

.site-footer {
  width: 100%;
  max-width: 42rem;
  margin: clamp(2.75rem, 7vw, 4rem) auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
}

.site-footer p { margin: 0; }

/* Quiet until hover, like the other meta links on the site */
.site-footer a {
  color: var(--ink-soft);
  font-weight: 500;
  background-size: 0 1px;
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--ink);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% 2px;
  }
}

.site-footer a:focus-visible {
  background-image: linear-gradient(var(--accent), var(--accent));
}

/* Match the notice column */
.notice-layout > .site-footer { max-width: 43rem; }

/* On a single update the content column widens to take the rail; the footer
   rule follows it so it still spans the full column. */
@media (min-width: 68rem) {
  .update-layout:has(> .update) > .site-footer { max-width: 61rem; }
}

/* ==========================================================================
   Editor only

   This stylesheet is also loaded as the block editor's content style, so the
   staffer writes on the same type and colours the site publishes. The rules
   below style the placeholders that stand in for the theme's PHP-rendered
   blocks; they match nothing on the front end.
   ========================================================================== */

.esrag-editor-placeholder {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.esrag-editor-placeholder__title {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.esrag-editor-placeholder__note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}