/*
Theme Name: JC General Contractors
Theme URI: https://jcgeneralcontractors.net/
Author: JC General Contractors
Description: Roofing-first editorial industrial craft theme for a San Antonio roofing and general contracting company. Code-native architectural visuals, no photographic dependencies.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jcg
*/

/* ---------------------------------------------------------------------------
   Design rules locked for this theme:

   THEME LOCK    Light page (limestone). Iron is not an inversion: it is the
                 structural band, used only for the masthead/hero bookend, the
                 contact conversion band, and the footer. No other section
                 changes theme family.
   ACCENT LOCK   One accent: copper. --copper for fills, --copper-ink for
                 copper text on light, --copper-light for copper text on iron.
                 No second accent anywhere.
   SHAPE LOCK    Radius 0 everywhere. Squared edges throughout, no exceptions.
   MOTION        Restrained. Hover/focus/active state changes only. No scroll
                 animation, no autoplay motion, no parallax. Every transition
                 names its properties; `transition: all` is banned because it
                 animates unrelated properties on repaint.
   TYPE          System serif display + humanist system sans. No remote font
                 request, so no FOIT/FOUT and no third-party dependency.
--------------------------------------------------------------------------- */

:root {
  /* Structure */
  --iron:        #1c2124;
  --iron-raised: #262c30;
  --iron-line:   #3a4247;

  /* Surface */
  --limestone:      #e8e3d9;
  --limestone-pale: #f4f1ea;
  --paper:          #fbfaf7;
  --rule:           #d3cec2;

  /* Ink */
  --ink:           #1c2124;
  --ink-muted:     #5a625f;
  --on-iron:       #f4f1ea;
  --on-iron-muted: #b3bab8;

  /* Accent: copper. One accent, three roles. */
  --copper:       #b4552d; /* fills; white text on this passes AA at 4.91:1 */
  --copper-ink:   #8a3d1e; /* copper text on light; 7.59:1 on paper */
  --copper-light: #d98a5a; /* copper text on iron; 5.99:1 on iron */

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: Optima, Candara, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  /* Rhythm: 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s16: 4rem;
  --s24: 6rem;

  --measure: 65ch;
  --shell: 1180px;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.12; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem);  line-height: 1.2; }
h4 { font-size: 1.05rem; line-height: 1.3; }

p, ul, ol { margin: 0 0 var(--s4); }
p { max-width: var(--measure); }

a { color: var(--copper-ink); }
a:hover { color: var(--copper); }

img, svg, picture { max-width: 100%; }
img { height: auto; }

strong { font-weight: 700; }

/* Visible focus on every interactive element. Never removed. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
}
.band-iron :where(a, button, input, textarea, summary):focus-visible,
.hero :where(a, button):focus-visible,
.masthead :where(a, button):focus-visible,
.footer :where(a, button):focus-visible {
  outline-color: var(--copper-light);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--iron);
  color: var(--on-iron);
  padding: var(--s3) var(--s4);
  z-index: 100;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Layout primitives
--------------------------------------------------------------------------- */

.shell {
  width: min(var(--shell), 100% - 2.5rem);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .shell { width: min(var(--shell), 100% - 4rem); }
}

.section { padding-block: var(--s16); }
@media (min-width: 768px) {
  .section { padding-block: var(--s24); }
}

/* Spacing utilities. Deliberately few: three steps off the rhythm scale, used
   only to space a block against the one above or below it. */
.u-mt   { margin-top: var(--s8); }
.u-mt-l { margin-top: var(--s12); }
.u-mb   { margin-bottom: var(--s8); }

.band-limestone { background: var(--limestone-pale); }
.band-iron {
  background: var(--iron);
  color: var(--on-iron);
}
.band-iron h1,
.band-iron h2,
.band-iron h3 { color: var(--on-iron); }
.band-iron p { color: var(--on-iron-muted); }
.band-iron a { color: var(--copper-light); }

.lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.band-iron .lede { color: var(--on-iron-muted); }

/* Eyebrow. Rationed: at most one per three sections. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-ink);
  margin: 0 0 var(--s3);
  max-width: none;
}
.band-iron .eyebrow,
.hero .eyebrow { color: var(--copper-light); }

/* ---------------------------------------------------------------------------
   Masthead
--------------------------------------------------------------------------- */

.masthead {
  background: var(--iron);
  color: var(--on-iron);
  border-bottom: 1px solid var(--iron-line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 72px; /* nav height cap: 80px desktop */
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--on-iron);
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--copper);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: none;
}
.brand__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  display: block;
}
.brand__sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-iron-muted);
  display: block;
  margin-top: 2px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  background: transparent;
  border: 1px solid var(--iron-line);
  color: var(--on-iron);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.nav-toggle:hover { background: var(--iron-raised); border-color: var(--copper); }

.nav-toggle__bars {
  position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  flex: none;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s6);
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-iron);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.primary-nav a:hover { color: var(--copper-light); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_parent > a {
  border-bottom-color: var(--copper);
  color: var(--copper-light);
}

.masthead__call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  background: var(--copper);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 160ms ease;
}
.masthead__call:hover { background: var(--copper-ink); color: #fff; }

@media (max-width: 899px) {
  .primary-nav {
    display: none;
    width: 100%;
    padding-bottom: var(--s4);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .primary-nav li { border-top: 1px solid var(--iron-line); }
  .primary-nav a { min-height: 52px; width: 100%; }
  .masthead__inner { flex-wrap: wrap; }
}

/* Narrow screens: the brand, the menu control, and the call button cannot
   share one line honestly, so the call button becomes a full-width bar rather
   than being squeezed. It is the primary action on a phone, so it gets the
   space instead of losing it. */
@media (max-width: 560px) {
  .brand__name { font-size: 0.95rem; }
  .brand__sub { display: none; }
  .masthead__call {
    flex: 1 1 100%;
    justify-content: center;
    margin-bottom: var(--s3);
  }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block; }
}

/* ---------------------------------------------------------------------------
   Hero: asymmetric split. Copy left, code-native roofline right.
--------------------------------------------------------------------------- */

.hero {
  background: var(--iron);
  color: var(--on-iron);
  padding-block: var(--s16);
  border-bottom: 4px solid var(--copper);
}
@media (min-width: 900px) {
  .hero { padding-block: var(--s24) var(--s16); } /* top padding stays at the 6rem cap */
}

.hero__grid {
  display: grid;
  gap: var(--s12);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s16); }
}

.hero h1 { color: var(--on-iron); margin-bottom: var(--s4); }
.hero h1 em {
  font-style: italic;
  color: var(--copper-light);
  line-height: 1.1; /* descender clearance for italic */
  padding-bottom: 0.08em;
  display: inline-block;
}
.hero__sub {
  font-size: 1.15rem;
  color: var(--on-iron-muted);
  max-width: 46ch;
  margin-bottom: var(--s8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.hero__figure { min-width: 0; }

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s6);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap; /* CTA labels never wrap */
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 100ms ease;
}
.btn--primary { background: var(--copper); color: #fff; }
.btn--primary:hover { background: var(--copper-ink); color: #fff; }
.btn--quiet {
  background: transparent;
  border-color: var(--on-iron-muted);
  color: var(--on-iron);
}
.btn--quiet:hover { border-color: var(--copper-light); color: var(--copper-light); }
.btn--onlight {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--onlight:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.textlink {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--copper-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 160ms ease, color 160ms ease;
}
.textlink:hover { border-bottom-color: var(--copper); }
.band-iron .textlink,
.triage__lead .textlink { color: var(--copper-light); border-bottom-color: var(--iron-line); }

/* ---------------------------------------------------------------------------
   Roofline: code-native architectural drawing. Decorative, aria-hidden.
--------------------------------------------------------------------------- */

.roofline { display: block; width: 100%; height: auto; }
.roofline__field  { fill: none; stroke: var(--iron-line); stroke-width: 1; }
.roofline__deck   { fill: none; stroke: var(--copper-light); stroke-width: 2; }
.roofline__course { fill: none; stroke: var(--on-iron-muted); stroke-width: 1; opacity: 0.55; }
.roofline__solid  { fill: var(--iron-raised); stroke: var(--on-iron-muted); stroke-width: 1; }
.roofline__note   {
  fill: var(--on-iron-muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.roofline__accent { fill: var(--copper); }

/* Light-band variant */
.roofline--light .roofline__field  { stroke: var(--rule); }
.roofline--light .roofline__deck   { stroke: var(--copper); }
.roofline--light .roofline__course { stroke: var(--ink-muted); opacity: 0.4; }
.roofline--light .roofline__solid  { fill: var(--limestone); stroke: var(--rule); }
.roofline--light .roofline__note   { fill: var(--ink-muted); }

/* ---------------------------------------------------------------------------
   Triage: one lead panel plus two stacked. Exactly three cells, three items.
--------------------------------------------------------------------------- */

.triage {
  display: grid;
  gap: var(--s4);
}
@media (min-width: 900px) {
  .triage { grid-template-columns: 1.3fr 1fr; }
  .triage__lead { grid-row: span 2; }
}

.triage__item {
  display: flex;
  flex-direction: column;
  padding: var(--s8);
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.triage__item:hover { border-color: var(--copper); background: var(--limestone-pale); }
.triage__item h3 { margin-bottom: var(--s2); color: var(--ink); }
.triage__item p { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: var(--s6); }
.triage__item .textlink { margin-top: auto; align-self: flex-start; }

.triage__lead {
  background: var(--iron);
  border-color: var(--iron);
  color: var(--on-iron);
  justify-content: flex-end;
  min-height: 300px;
}
.triage__lead h3 { color: var(--on-iron); }
.triage__lead p { color: var(--on-iron-muted); }
.triage__lead:hover { background: var(--iron-raised); border-color: var(--copper); }
.triage__lead .roofline { margin-bottom: var(--s6); }

/* ---------------------------------------------------------------------------
   Split: text beside a drawing or a secondary column.
--------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--s12);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s16); }
  .split--wide-first { grid-template-columns: 1.25fr 0.75fr; }
}

/* ---------------------------------------------------------------------------
   Ledger: process and checklist rows.
--------------------------------------------------------------------------- */

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.ledger > li {
  display: grid;
  gap: var(--s2) var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .ledger > li { grid-template-columns: 12rem 1fr; align-items: start; }
}
.ledger__term {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.ledger p { margin: 0; color: var(--ink-muted); }
.band-iron .ledger { border-top-color: var(--iron-line); }
.band-iron .ledger > li { border-bottom-color: var(--iron-line); }
.band-iron .ledger__term { color: var(--on-iron); }
.band-iron .ledger p { color: var(--on-iron-muted); }

/* ---------------------------------------------------------------------------
   Areas
--------------------------------------------------------------------------- */

.arealist {
  columns: 2;
  column-gap: var(--s8);
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
}
@media (min-width: 700px) { .arealist { columns: 3; } }
.arealist li {
  padding-block: var(--s2);
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   Journal (blog listing)
--------------------------------------------------------------------------- */

.journal { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.journal__item { padding-block: var(--s8); border-bottom: 1px solid var(--rule); }
.journal__item h3 { margin-bottom: var(--s2); }
.journal__item h3 a { color: var(--ink); text-decoration: none; }
.journal__item h3 a:hover { color: var(--copper-ink); }
.journal__meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s3);
}
.journal__item p { color: var(--ink-muted); }

@media (min-width: 900px) {
  .journal__item {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--s8);
    align-items: start;
  }
  .journal__meta { margin: 0; }
}

/* ---------------------------------------------------------------------------
   Article
--------------------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose > * { max-width: none; }
.prose h2 { margin-top: var(--s12); }
.prose h3 { margin-top: var(--s8); }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: var(--s6); }
.prose li { margin-bottom: var(--s2); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.answer {
  border-left: 4px solid var(--copper);
  background: var(--limestone-pale);
  padding: var(--s6);
  margin-bottom: var(--s8);
}
.answer p { max-width: none; }
.answer p:last-child { margin-bottom: 0; }

.sourcelist { font-size: 0.9rem; }

.breadcrumbs {
  font-size: 0.8rem;
  color: var(--ink-muted);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
}
.breadcrumbs li::after { content: "/"; margin-left: var(--s2); color: var(--rule); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--copper-ink); }

.page-header { padding-block: var(--s12) var(--s8); }
.page-header h1 { margin-bottom: var(--s4); }

.page-tail { padding-bottom: var(--s16); }

/* ---------------------------------------------------------------------------
   Contact + form
--------------------------------------------------------------------------- */

.contact-details {
  list-style: none;
  margin: var(--s8) 0 0;
  padding: 0;
  border-top: 1px solid var(--iron-line);
}
.contact-details li { border-bottom: 1px solid var(--iron-line); padding-bottom: var(--s2); }
.contact-details a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--copper-light);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  word-break: break-word;
}
.contact-details a:hover { color: #fff; }
.contact-details__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-iron-muted);
  display: block;
  padding-top: var(--s3);
}

/* Stands in for the form on every cacheable template. Same paper card as .form
   so the iron band keeps its weight. Descendant colors are set against two
   classes on purpose: .band-iron h3/p/a would otherwise paint iron-band text
   colors onto this paper surface. */
.cta-panel {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s8);
  border: 1px solid var(--rule);
}
.cta-panel .cta-panel__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--s3);
}
.cta-panel .cta-panel__body {
  color: var(--ink-muted);
  margin: 0 0 var(--s6);
  max-width: none;
}
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
/* Labels stay on one line (.btn sets nowrap), so let each button size to its
   own label and wrap to a second row rather than squeeze. */
.cta-panel__actions .btn { flex: 0 1 auto; }
/* Both buttons restate their own color at two-class specificity. `.band-iron a`
   is (0,1,1) and would otherwise beat `.btn--primary`/`.btn--onlight` at (0,1,0)
   and paint copper-light — an iron-band color — onto this paper card. */
.cta-panel .btn--primary { color: #fff; }
.cta-panel .btn--onlight { color: var(--ink); }
.cta-panel .btn--onlight:hover { color: var(--paper); }

.form {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s8);
  border: 1px solid var(--rule);
}
/* Honeypot. Off-canvas rather than display:none, because some bots skip
   display:none inputs. aria-hidden + tabindex=-1 keep it away from real users. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__field { margin-bottom: var(--s6); }
.form__label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.form__req { color: var(--copper-ink); }
.form__hint {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: var(--s2);
  font-weight: 400;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3);
  border: 1px solid #8b8578; /* 3:1+ against paper */
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px minimum stops iOS zoom on focus */
}
.form textarea { resize: vertical; min-height: 140px; }
.form input::placeholder,
.form textarea::placeholder { color: #6b6f6c; opacity: 1; }
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] { border-color: #8f2718; border-width: 2px; }
.form .btn { width: 100%; }

.form__error {
  display: block;
  color: #8f2718; /* passes AA on paper */
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: var(--s2);
}

.notice {
  padding: var(--s4);
  margin-bottom: var(--s6);
  border-left: 4px solid;
}
.notice p { margin: 0; max-width: none; }
.notice--error {
  border-color: #8f2718;
  background: #fbeceb;
  color: #6d1e12;
}
.notice--success {
  border-color: #2e6b3f;
  background: #eaf3ec;
  color: #1e4a2b;
}
.notice--error a { color: #6d1e12; }
.notice__list { margin: var(--s2) 0 0; padding-left: var(--s6); }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.footer {
  background: var(--iron);
  color: var(--on-iron-muted);
  padding-block: var(--s12) var(--s8);
  border-top: 4px solid var(--copper);
}
.footer__grid {
  display: grid;
  gap: var(--s8);
  margin-bottom: var(--s8);
}
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s12); }
}
.footer h2 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-iron-muted);
  font-weight: 600;
  margin-bottom: var(--s4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s1); }
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--on-iron);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer a:hover { color: var(--copper-light); }
.footer p { font-size: 0.9rem; color: var(--on-iron-muted); }
.footer__legal {
  border-top: 1px solid var(--iron-line);
  padding-top: var(--s6);
}
.footer__legal p { font-size: 0.8rem; margin: 0; }

/* ---------------------------------------------------------------------------
   Pagination / 404
--------------------------------------------------------------------------- */

.pagination { margin-top: var(--s8); }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s2);
  border: 1px solid var(--rule);
  margin-right: var(--s2);
  text-decoration: none;
  color: var(--ink);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--iron);
  color: var(--paper);
  border-color: var(--iron);
}

/* ---------------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}