/* ============================================================
   MAGICSHIFT — Core stylesheet
   Light linen field, dark ink, hairline structure, tiny bright
   accents. Precision of an engineering drawing; temperature of
   a beach house.
   ============================================================ */

:root {
  /* Surfaces — eggshell through to light grey */
  --paper:    #F8F6F2;
  --linen:    #EFEDE7;
  --sand:     #E3E0D9;
  --shell:    #D3D0C8;

  /* Ink — anthracite and charcoal, deliberately cool against the warm paper */
  --ink:      #26292B;
  --ink-2:    #4B4F52;
  --ink-3:    #83878A;

  /* Structure */
  --rule:     rgba(38,41,43,.18);
  --rule-2:   rgba(38,41,43,.34);
  --rule-3:   rgba(38,41,43,.085);

  /* Accents — marks only, never fills */
  --coral:    #E23A16;
  --teal:     #0E8C7A;
  --sun:      #E8A100;
  --cobalt:   #1F4FD8;
  --plum:     #8B3FBF;

  --max:      1280px;
  --pad:      clamp(1.25rem, 4vw, 3.25rem);
  --ease:     cubic-bezier(.2,.7,.2,1);

  --mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:     "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  color-scheme: only light;
}

* { box-sizing: border-box; }
html { color-scheme: only light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Some browsers auto-invert light pages. Re-assert the palette explicitly. */
@media (prefers-color-scheme: dark) {
  html, body { background: #EFEDE7; color: #26292B; forced-color-adjust: none; }
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { background: rgba(255,79,43,.22); }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.container { width: min(calc(100% - (var(--pad) * 2)), var(--max)); margin-inline: auto; }

.sr-only {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
.skip-link {
  position: fixed; top:.75rem; left:.75rem; z-index:10000;
  transform: translateY(-160%); background: var(--ink); color: var(--paper);
  padding:.7rem 1rem; font: 500 .7rem/1 var(--mono); letter-spacing:.1em;
}
.skip-link:focus { transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(241,238,231,.86);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); background: rgba(241,238,231,.95); }

.utility-line { border-bottom: 1px solid var(--rule-3); }
.utility-line__inner {
  min-height: 32px; display:flex; justify-content:space-between; align-items:center;
  font: 500 .625rem/1 var(--mono); color: var(--ink-3);
  letter-spacing:.13em; text-transform:uppercase;
}
.utility-line__status { display:flex; align-items:center; gap:.5rem; }
.utility-line__status i {
  width:6px; height:6px; border-radius:50%; background: var(--teal);
}

.nav-shell { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.brand { display:inline-flex; align-items:center; gap:.8rem; flex:0 0 auto; }
.brand__mark { width:34px; height:34px; }
.brand__wordmark { display:grid; gap:.24rem; white-space:nowrap; line-height:1; }
.brand__wordmark > span { font:700 .92rem/1 var(--sans); letter-spacing:.02em; }
.brand__wordmark b { font:400 .5rem/1 var(--mono); letter-spacing:.15em; color: var(--ink-3); text-transform:uppercase; }

.primary-nav { display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.primary-nav a {
  position:relative; font:500 .72rem/1 var(--mono); color: var(--ink-2);
  letter-spacing:.08em; text-transform:uppercase; transition:color .22s var(--ease);
}
.primary-nav a:not(.nav-action)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-.65rem; height:2px;
  background: var(--coral); transition:right .28s var(--ease);
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { right:0; }

.nav-action {
  display:inline-flex; align-items:center; gap:.7rem; min-height:42px; padding:0 1.15rem;
  border:1px solid var(--ink); color: var(--ink)!important; background: transparent;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav-action:hover { background: var(--ink); color: var(--paper)!important; }
.nav-action:hover span { color: var(--sun); }
.nav-action span { color: var(--coral); }
.nav-action::after { display:none!important; }

.nav-toggle { display:none; width:44px; height:44px; padding:0; border:1px solid var(--rule-2); background:transparent; }
.nav-toggle span { display:block; width:20px; height:1.5px; margin:5px auto; background: var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Type ---------- */
main { overflow: hidden; }

.precision-label, .section-kicker, .eyebrow, .card-code,
.crumbs, .article-meta, .footer-label {
  font:500 .655rem/1.35 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}

.precision-label { display:flex; flex-wrap:wrap; gap:1.1rem; color: var(--ink-3); }
.precision-label span:first-child { color: var(--ink); }

.display-title {
  margin:0; font-family: var(--display);
  font-size: clamp(2.35rem, 4.9vw, 4.5rem);
  line-height: 1.02; letter-spacing: -.036em; font-weight: 700;
}
.display-title em { font-style: normal; color: var(--ink-2); font-weight: 400; }

.section { padding: clamp(3.75rem, 7vw, 6.75rem) 0; position: relative; }
.section--tight { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--sand { background: var(--sand); border-block: 1px solid var(--rule); }
.section--paper { background: var(--paper); border-block: 1px solid var(--rule); }

/* Hairline grid overlay — engineering drawing cue */
.section--grid::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: linear-gradient(90deg,
    transparent calc(25% - .5px), var(--rule-3) 25%, transparent calc(25% + .5px),
    transparent calc(50% - .5px), var(--rule-3) 50%, transparent calc(50% + .5px),
    transparent calc(75% - .5px), var(--rule-3) 75%, transparent calc(75% + .5px));
}

.section-heading {
  display:grid; grid-template-columns:minmax(150px,.34fr) 1fr; gap:2rem;
  align-items:start; margin-bottom: clamp(2.25rem, 5vw, 4.25rem);
}
.section-kicker { color: var(--ink-3); display:flex; align-items:center; gap:.7rem; }
.section-kicker::before { content:""; width:18px; height:2px; background: var(--coral); }

.section-heading h2, .page-hero h1 {
  margin:0; font-family: var(--display);
  font-size: clamp(1.85rem, 3.3vw, 2.9rem);
  line-height:1.08; letter-spacing:-.032em; font-weight:700; max-width:16ch;
}
.section-heading__body { color: var(--ink-2); max-width:56ch; }
.section-heading__body p { margin:0 0 1rem; }
.section-heading__body p:last-child { margin-bottom:0; }

@media (max-width: 860px) {
  .section-heading { grid-template-columns:1fr; gap:1.1rem; }
  .section-heading h2, .page-hero h1 { max-width:none; }
}

.rule { height:1px; background: var(--rule); border:0; margin:0; position:relative; }
.rule::before { content:""; position:absolute; left:0; top:-2px; width:5px; height:5px; background: var(--coral); }

/* ---------- Home hero ---------- */
.home-hero { position:relative; padding: clamp(2.75rem,5vw,4.5rem) 0 clamp(2.75rem,5vw,4.5rem); overflow:hidden; min-height:min(88vh,780px); display:flex; align-items:center; }
.hero-field { position:absolute; inset:0; z-index:0; }
.hero-field canvas { width:100%; height:100%; }
.hero-field__veil {
  position:absolute; inset:0;
  background: linear-gradient(100deg, var(--linen) 0%, rgba(241,238,231,.82) 34%, rgba(241,238,231,.28) 62%, transparent 88%);
}
.hero-layout { position:relative; z-index:2; display:grid; grid-template-columns:1fr minmax(230px,.32fr); gap:clamp(2rem,5vw,4rem); align-items:end; }
@media (max-width: 940px) { .hero-layout { grid-template-columns:1fr; align-items:start; } }

.hero-copy > .precision-label { margin-bottom:1.6rem; }
.hero-copy .display-title { margin-bottom:1.6rem; }
.hero-copy > p { max-width:52ch; font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-2); margin:0 0 2rem; }

.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; }

.hero-rail { display:grid; gap:1px; background: var(--rule); border:1px solid var(--rule); }
.hero-index { background: var(--linen); padding:1.05rem 1.15rem; display:grid; gap:.3rem; }
.hero-index__number { font:500 .6rem/1 var(--mono); letter-spacing:.14em; color: var(--ink-3); }
.hero-index__line { font-size:.86rem; color: var(--ink); }
.hero-index:nth-child(1) .hero-index__number { color: var(--coral); }
.hero-index:nth-child(2) .hero-index__number { color: var(--teal); }
.hero-index:nth-child(3) .hero-index__number { color: var(--cobalt); }
.hero-index:nth-child(4) .hero-index__number { color: var(--sun); }

/* ---------- Buttons ---------- */
.button {
  display:inline-flex; align-items:center; gap:.75rem; min-height:48px; padding:0 1.5rem;
  font:500 .7rem/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.button:hover { transform: translateY(-1px); }
.button span { transition: transform .22s var(--ease); }
.button:hover span { transform: translateX(3px); }

.button--primary { background: var(--ink); color: var(--paper); }
.button--primary:hover { background:#000; }
.button--primary span { color: var(--sun); }

.button--dark { background:transparent; }
.button--dark:hover { background: var(--ink); color: var(--paper); }

.text-link {
  display:inline-flex; align-items:center; gap:.45rem;
  font:500 .68rem/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  border-bottom:2px solid var(--coral); padding-bottom:.3rem; color:var(--ink);
  transition: gap .22s var(--ease);
}
.text-link:hover { gap:.8rem; }

/* ---------- Page hero ---------- */
.page-hero { padding: clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--rule); position:relative; }
.crumbs { display:flex; flex-wrap:wrap; gap:.6rem; color:var(--ink-3); margin-bottom:1.5rem; }
.crumbs a:hover { color:var(--coral); }
.page-hero h1 { max-width:20ch; }
.page-hero > .container > p { margin:1.35rem 0 0; max-width:58ch; font-size:clamp(1rem,1.4vw,1.14rem); color:var(--ink-2); }
.page-hero__meta { display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2rem; font:500 .64rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.page-hero__meta span { display:flex; align-items:center; gap:.5rem; }
.page-hero__meta span::before { content:""; width:5px; height:5px; background:var(--teal); }

/* ---------- Cards & grids ---------- */
.capability-grid, .evidence-grid, .related-grid, .notes-grid, .library-grid {
  display:grid; gap:1px; background: var(--rule); border:1px solid var(--rule);
}
@media (min-width:720px) {
  .capability-grid, .evidence-grid, .notes-grid, .library-grid { grid-template-columns:repeat(2,1fr); }
  .related-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
}
@media (min-width:1040px) {
  .capability-grid { grid-template-columns:repeat(3,1fr); }
}
/* Four guides sit as a 2x2 so no empty cells show the grid background */
.library-grid { grid-auto-rows:1fr; }

.capability-card, .evidence-card, .note-card, .related-card, .library-card {
  background: var(--paper); padding: clamp(1.5rem,2.5vw,2.1rem);
  transition: background .25s var(--ease);
}
.capability-card:hover, .note-card:hover, .related-card:hover, .library-card:hover { background:#fff; }

.card-code { color: var(--ink-3); margin-bottom:1.1rem; display:block; }
.capability-card h3, .evidence-card h3, .note-card h3, .related-card h3, .library-card h3 {
  margin:0 0 .7rem; font-size:1.13rem; font-weight:700; letter-spacing:-.012em; line-height:1.28;
}
.capability-card p, .evidence-card p, .note-card p, .related-card p, .library-card p {
  margin:0; color: var(--ink-2); font-size:.95rem;
}
.capability-card .text-link, .note-card .text-link, .library-card .text-link { margin-top:1.3rem; }

.note-card__meta, .library-card__meta { color:var(--ink-3); margin-bottom:.9rem; display:flex; gap:.9rem; }

/* Colour-coded card accents, cycled */
.capability-card:nth-child(3n+1) .card-code { color: var(--coral); }
.capability-card:nth-child(3n+2) .card-code { color: var(--teal); }
.capability-card:nth-child(3n+3) .card-code { color: var(--cobalt); }

/* ---------- Numbered engagement / steps ---------- */
.engagement-grid { display:grid; gap:0; }
.engagement {
  display:grid; grid-template-columns:4.5rem 1fr; gap:1.6rem; align-items:start;
  padding: clamp(1.6rem,3vw,2.4rem) 0; border-top:1px solid var(--rule);
}
.engagement:last-child { border-bottom:1px solid var(--rule); }
.engagement__number { font:500 .68rem/1 var(--mono); letter-spacing:.12em; color:var(--ink-3); padding-top:.42rem; }
.engagement:nth-child(5n+1) .engagement__number { color: var(--coral); }
.engagement:nth-child(5n+2) .engagement__number { color: var(--teal); }
.engagement:nth-child(5n+3) .engagement__number { color: var(--cobalt); }
.engagement:nth-child(5n+4) .engagement__number { color: var(--sun); }
.engagement:nth-child(5n+5) .engagement__number { color: var(--plum); }
.engagement h3 { margin:0 0 .6rem; font-size:1.22rem; font-weight:700; letter-spacing:-.015em; }
.engagement p { margin:0; color:var(--ink-2); max-width:74ch; }
@media (max-width:640px) { .engagement { grid-template-columns:2.75rem 1fr; gap:1rem; } }

/* ---------- Two column + sidebar ---------- */
.two-column { display:grid; grid-template-columns:1fr minmax(240px,.36fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:940px) { .two-column { grid-template-columns:1fr; } }

.prose { max-width:66ch; }
.prose h2 { font-family:var(--display); font-size:clamp(1.7rem,3.1vw,2.6rem); line-height:1.1; letter-spacing:-.03em; font-weight:700; margin:0 0 1.2rem; }
.prose h3 { font-size:1.2rem; font-weight:700; margin:2.2rem 0 .7rem; letter-spacing:-.012em; }
.prose p { margin:0 0 1.15rem; color:var(--ink-2); }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--ink); font-weight:700; }
.prose ul, .prose ol { margin:0 0 1.15rem; padding-left:1.15rem; color:var(--ink-2); }
.prose li { margin-bottom:.5rem; }
.prose li::marker { color: var(--coral); }
.prose blockquote {
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:2px solid var(--coral);
  font-size:1.18rem; line-height:1.5; color:var(--ink); font-weight:600; letter-spacing:-.012em;
}
.prose a:not(.button):not(.text-link) { border-bottom:1px solid var(--rule-2); }
.prose a:not(.button):not(.text-link):hover { border-color:var(--coral); color:var(--coral); }
.prose code { font:500 .88em/1 var(--mono); background:var(--sand); padding:.15em .4em; }

.sidebar-panel { background:var(--paper); border:1px solid var(--rule); padding:clamp(1.4rem,2.4vw,1.9rem); }
.sidebar-panel h3 { margin:0 0 1.1rem; font-size:.98rem; font-weight:700; }

.data-list { margin:0; display:grid; gap:0; }
.data-list > div { display:grid; gap:.2rem; padding:.85rem 0; border-top:1px solid var(--rule-3); }
.data-list > div:first-child { border-top:0; padding-top:0; }
.data-list dt { font:500 .6rem/1.3 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.data-list dd { margin:0; font-size:.92rem; color:var(--ink); }

/* ---------- Article ---------- */
.article-shell { display:grid; grid-template-columns:1fr minmax(210px,.3fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:940px) { .article-shell { grid-template-columns:1fr; } }

.article { max-width:68ch; }
.article > p:first-of-type { font-size:1.12rem; color:var(--ink); }
.article h2 {
  font-family:var(--display); font-size:clamp(1.6rem,2.8vw,2.25rem); line-height:1.12;
  letter-spacing:-.028em; font-weight:700; margin:2.8rem 0 1rem; padding-top:1.6rem;
  border-top:1px solid var(--rule);
}
.article h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.article h3 { font-size:1.16rem; font-weight:700; margin:2rem 0 .6rem; }
.article p { margin:0 0 1.15rem; color:var(--ink-2); }
.article strong { color:var(--ink); }
.article ul, .article ol { margin:0 0 1.3rem; padding-left:1.2rem; color:var(--ink-2); }
.article li { margin-bottom:.55rem; }
.article li::marker { color:var(--coral); }
.article blockquote {
  margin:1.9rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:2px solid var(--teal);
  font-size:1.2rem; line-height:1.5; color:var(--ink); font-weight:600; letter-spacing:-.012em;
}
.article a:not(.button):not(.text-link) { border-bottom:1px solid var(--rule-2); }
.article a:not(.button):not(.text-link):hover { border-color:var(--coral); color:var(--coral); }
.article code { font:500 .88em/1 var(--mono); background:var(--sand); padding:.15em .4em; }

.article-meta { display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:1.6rem; color:var(--ink-3); }
.article-aside { position:sticky; top:110px; }
.article-aside nav { display:grid; gap:0; margin-top:.9rem; }
.article-aside nav a {
  padding:.65rem 0; border-top:1px solid var(--rule-3);
  font:500 .655rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.article-aside nav a:hover { color:var(--coral); }
@media (max-width:940px) { .article-aside { position:static; } }

/* ---------- FAQ ---------- */
.faq-list { border-top:1px solid var(--rule); }
.faq-item { border-bottom:1px solid var(--rule); }
.faq-item h3 { margin:0; font-size:1.06rem; font-weight:700; padding:1.35rem 0 .1rem; letter-spacing:-.01em; }
.faq-answer { padding-bottom:1.35rem; }
.faq-answer p { margin:.55rem 0 0; color:var(--ink-2); max-width:66ch; }

/* ---------- Timeline ---------- */
.timeline { display:grid; gap:0; }
.timeline-row {
  display:grid; grid-template-columns:minmax(130px,.2fr) 1fr; gap:1.8rem;
  padding:1.7rem 0; border-top:1px solid var(--rule);
}
.timeline-row:last-child { border-bottom:1px solid var(--rule); }
.timeline-row__date { font:500 .64rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding-top:.3rem; }
.timeline-row h3 { margin:0 0 .45rem; font-size:1.14rem; font-weight:700; }
.timeline-row p { margin:0; color:var(--ink-2); max-width:60ch; }
@media (max-width:720px) { .timeline-row { grid-template-columns:1fr; gap:.5rem; } }

/* ---------- CTA panel ---------- */
.cta-panel {
  display:grid; grid-template-columns:1fr auto; gap:clamp(1.5rem,4vw,3rem);
  align-items:center; padding:clamp(1.8rem,4vw,2.8rem);
  background:var(--paper); border:1px solid var(--ink);
}
.cta-panel h2 { font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.1; letter-spacing:-.028em; font-weight:700; margin:.7rem 0 .6rem; }
.cta-panel p { margin:0; color:var(--ink-2); max-width:52ch; }
@media (max-width:760px) { .cta-panel { grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.contact-layout { display:grid; grid-template-columns:1fr minmax(250px,.38fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:940px) { .contact-layout { grid-template-columns:1fr; } }

.contact-form { display:grid; gap:1.3rem; }
.field { display:grid; gap:.45rem; }
.field label { font:500 .655rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); }
.field input, .field select, .field textarea {
  width:100%; padding:.85rem .95rem; background:var(--paper);
  border:1px solid var(--rule-2); color:var(--ink); font-size:.95rem;
  transition:border-color .2s var(--ease);
}
.field textarea { min-height:9rem; resize:vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--coral); }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-3); }
.field--full { grid-column:1/-1; }
.form-note { font-size:.85rem; color:var(--ink-3); }
.form-footer { display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; }

/* ---------- Footer ---------- */
.site-footer { background:var(--sand); border-top:1px solid var(--rule); }
.footer-main {
  display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(1.8rem,4vw,3rem);
  padding:clamp(3rem,6vw,4.5rem) 0;
}
@media (max-width:940px) { .footer-main { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .footer-main { grid-template-columns:1fr; } }

.footer-brand p { margin:1.1rem 0 0; color:var(--ink-2); font-size:.92rem; max-width:34ch; }
.footer-column { display:grid; gap:.6rem; align-content:start; }
.footer-label { color:var(--ink-3); margin-bottom:.35rem; }
.footer-column a, .footer-column span { font-size:.92rem; color:var(--ink-2); }
.footer-column a:hover { color:var(--coral); }
.footer-bottom {
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding:1.4rem 0; border-top:1px solid var(--rule);
  font:500 .625rem/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
.footer-bottom a { margin-left:1.1rem; }
.footer-bottom a:hover { color:var(--coral); }

/* ---------- Reveal ---------- */
[data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* ---------- Mobile nav ---------- */
@media (max-width:940px) {
  .nav-toggle { display:block; }
  .primary-nav {
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    padding:.5rem 0;
  }
  .primary-nav.is-open { display:flex; }
  .primary-nav a { padding:.95rem var(--pad); }
  .primary-nav a:not(.nav-action)::after { display:none; }
  .nav-action { margin:.6rem var(--pad); justify-content:center; }
  .nav-shell { position:relative; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
  [data-reveal] { opacity:1; transform:none; }
}

/* Utility line: on narrow screens keep only the status, so it stays one line */
@media (max-width: 620px) {
  .utility-line__inner > span:first-child { display: none; }
  .utility-line__inner { justify-content: flex-end; }
}