/* ===========================================================================
   Lech Digital — Sunburst
   Apollo-era structure, Fillmore-poster warmth, neon-noir edge.
   No JavaScript. No third-party requests. Fonts are self-hosted.
   =========================================================================== */

/* --- 1. Fonts --------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-2.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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-3.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500-1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500-2.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500-3.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-2.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-3.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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400-1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400-2.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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400-3.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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-2.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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-3.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;
}

/* --- 2. Tokens -------------------------------------------------------- */

:root {
  --base:    #0F0A0D;
  --surface: #171015;
  --paper:   #F2E8DC;
  --muted:   #A1917F;
  --dim:     #6D5C52;
  --amber:   #FFC46B;
  --orange:  #FF7A2F;
  --magenta: #D8447F;
  --violet:  #8B3CBE;

  --hairline: rgba(242, 232, 220, 0.13);
  --hairline-strong: rgba(242, 232, 220, 0.22);

  --sun-ramp: linear-gradient(96deg, var(--amber), var(--orange) 46%, var(--magenta));

  /* Shadows are light, not darkness. Nothing on this site casts black. */
  --glow-rest:  0 14px 40px -22px rgba(255, 122, 47, 0.55),
                0 1px 0 0 rgba(255, 196, 107, 0.05) inset;
  --glow-raised: 0 20px 48px -18px rgba(216, 68, 127, 0.55),
                 0 0 34px -8px rgba(255, 140, 60, 0.32),
                 0 1px 0 0 rgba(255, 196, 107, 0.14) inset;
  --glow-focus: 0 0 30px -6px rgba(255, 196, 107, 0.4);

  --display: 'Barlow Condensed', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --grid-cell: 34px;

  --step: clamp(56px, 9vw, 104px);
}

/* --- 3. Reset --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Safari on iOS does not reliably honour overflow-x set on <body> alone,
     so the page could be panned sideways. Belt to the braces below. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--base);
  background-image:
    radial-gradient(72% 54% at 8% 104%, rgba(139, 60, 190, 0.30), transparent 64%),
    radial-gradient(58% 46% at 98% 84%, rgba(255, 122, 47, 0.16), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--paper);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* --- 4. Decorative layers (grid + grain) ------------------------------ */

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* engineering grid */
body::before {
  background-image:
    linear-gradient(rgba(242, 232, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 232, 220, 0.05) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}

/* film grain */
body::after {
  background-image: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 3px
  );
  opacity: 0.5;
}

/* --- 5. Layout -------------------------------------------------------- */

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding-block: var(--step);
  border-top: 1px solid var(--hairline);
}

.section:first-of-type { border-top: 0; }

/* --- 6. Typography ---------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
}

h1 {
  font-size: clamp(3.2rem, 11.5vw, 7.4rem);
  line-height: 0.86;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 0.92;
  margin-bottom: 0.6em;
}

h3 {
  font-size: 1.32rem;
  line-height: 1.1;
  letter-spacing: 0.055em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
  line-height: 1.66;
  color: var(--muted);
  max-width: 46ch;
}

.prose { max-width: 62ch; color: var(--muted); }
.prose strong { color: var(--paper); font-weight: 500; }
.prose em { color: var(--paper); font-style: italic; }

code {
  font-family: var(--mono);
  font-size: 0.84em;
  color: var(--amber);
  background: rgba(255, 196, 107, 0.07);
  border: 1px solid rgba(255, 196, 107, 0.17);
  padding: 1px 5px;
  white-space: nowrap;
}

a {
  color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--paper); }

/* --- 7. Telemetry / labels -------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.7;
}

.section-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 22px;
  display: block;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 30px;
}
.section-head .section-label { margin-bottom: 0; }
.section-head .count { color: var(--muted); }

/* --- 8. Masthead ------------------------------------------------------ */

.masthead {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px 14px;
  border-bottom: 1px solid var(--hairline);
}

.mark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.mark:hover { color: var(--paper); }

/* The lettering is only ~20px tall, well under the 44px a thumb expects. Grow
   the hit area with an absolutely positioned overlay rather than padding: it
   captures the tap but contributes no height, so the masthead does not move
   and the baseline alignment above still holds. */
.mark::after {
  content: '';
  position: absolute;
  inset: -13px -10px;
}

.masthead nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.masthead nav a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-block: 11px;
  display: inline-block;
}
.masthead nav a:hover { color: var(--amber); }

.coords { color: var(--dim); }

/* --- 9. Hero + sunburst (home only) ----------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 104px) clamp(36px, 5vw, 60px);
  /* The sun sits off the right edge on purpose, and .r3 is scaled 1.6 — together
     they reach ~300px past the viewport and made the page pan sideways on a phone.
     Clip the horizontal bleed here, at the source. `clip` rather than `hidden`:
     hidden would turn this into a scroll container and cut the sun's deliberate
     bleed off the *bottom* on narrow screens, which is the whole mobile treatment. */
  overflow-x: clip;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero-foot {
  position: relative;
  z-index: 1;
  margin-top: 30px;
}

h1 .burn {
  /* solid fallback first — if background-clip is unsupported the word
     still renders in amber rather than disappearing */
  color: var(--amber);
  background-image: var(--sun-ramp);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  h1 .burn { color: transparent; }
}

.hero h1 { margin-bottom: 30px; }

.hero-body {
  display: flex;
  gap: 18px;
  margin-bottom: 32px;
}

.hero-body::before {
  content: '';
  flex: 0 0 2px;
  background: linear-gradient(var(--amber), var(--magenta), var(--violet));
}

.offduty {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  color: var(--muted);
}
.offduty .key { color: var(--amber); }
.offduty .sep { color: #574840; }

/* sun disc — home page only, guarded twice */
.sun { display: none; }

body.home .sun {
  display: block;
  position: absolute;
  z-index: 0;
  top: clamp(28px, 5vw, 76px);
  right: clamp(10px, 4.5vw, 90px);
  width: clamp(240px, 32vw, 430px);
  aspect-ratio: 1;
  pointer-events: none;
}

.sun span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.sun .disc {
  background: radial-gradient(
    circle at 42% 34%,
    #FFC46B,
    #FF7A2F 44%,
    #D8447F 74%,
    rgba(139, 60, 190, 0) 100%
  );
  opacity: 0.54;
  box-shadow: 0 0 130px 24px rgba(255, 122, 47, 0.16);
  animation: breathe 13s ease-in-out infinite;
}

.sun .ring {
  border: 1px solid rgba(255, 196, 107, 0.5);
  animation: pulse 13s ease-in-out infinite;
}
.sun .r2 {
  border-color: rgba(255, 196, 107, 0.26);
  transform: scale(1.28);
  animation-delay: 1.1s;
}
.sun .r3 {
  border-color: rgba(255, 196, 107, 0.13);
  transform: scale(1.6);
  animation-delay: 2.2s;
}

/* The sun is the one thing on this page that moves. Slowly. */
@keyframes breathe {
  0%, 100% { transform: scale(1);     opacity: 0.5;  }
  50%      { transform: scale(1.035); opacity: 0.62; }
}

@keyframes breathe-dim {
  0%, 100% { transform: scale(1);     opacity: 0.24; }
  50%      { transform: scale(1.035); opacity: 0.34; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1;    }
}

/* --- 10. Cards -------------------------------------------------------- */

.cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}

.cards.compact { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  background: rgba(23, 16, 21, 0.62);
  border: 1px solid var(--hairline);
  box-shadow: var(--glow-rest);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.24s ease, transform 0.24s ease,
              background-color 0.24s ease, box-shadow 0.24s ease;
}

/* A soft bloom behind the card — light spilling out, not a drop shadow.
   Sits behind the card's own background via z-index, and extends past its
   edges so the glow reads on a near-black page. */
.card::after {
  content: '';
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: 40px;
  background:
    radial-gradient(58% 58% at 50% 46%, rgba(255, 140, 60, 0.34), transparent 72%),
    radial-gradient(72% 72% at 50% 92%, rgba(216, 68, 127, 0.24), transparent 74%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}

a.card:hover,
a.card:focus-visible {
  border-color: rgba(255, 196, 107, 0.55);
  background: rgba(31, 21, 26, 0.82);
  box-shadow: var(--glow-raised);
  transform: translateY(-3px);
}

a.card:hover::after,
a.card:focus-visible::after { opacity: 1; }

.card-top {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.card h3 { color: var(--paper); }
.card p { color: var(--muted); font-size: 0.94rem; line-height: 1.62; margin: 0; }

.card .stack {
  color: var(--muted);
  margin-top: auto;
  padding-top: 4px;
}

/* status tags */
.tag {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  white-space: nowrap;
}

.tag-free {
  color: var(--base);
  background-image: var(--sun-ramp);
  box-shadow: 0 0 24px -7px rgba(255, 122, 47, 0.8);
}

.tag-quiet {
  color: var(--muted);
  border: 1px solid var(--hairline-strong);
}

/* --- 11. Project pages ------------------------------------------------ */

.project-head { padding-block: clamp(48px, 8vw, 96px) 0; }

.project-head h1 {
  font-size: clamp(2.7rem, 8.5vw, 5.4rem);
  margin-bottom: 22px;
}

.project-head .lede { max-width: 54ch; margin-bottom: 26px; }

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.project-links a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--hairline-strong);
  padding: 10px 14px;
  transition: border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}
.project-links a:hover {
  border-color: var(--amber);
  color: var(--paper);
  box-shadow: var(--glow-focus);
}

.project-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  line-height: 1.8;
  text-transform: none;
}

.stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack-row span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 6px 10px;
}

.back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 12px;
}

/* --- 12. Contact + footer --------------------------------------------- */

.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--hairline-strong);
  padding: 13px 18px;
  transition: border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}
.contact-list a:hover {
  border-color: var(--amber);
  color: var(--paper);
  box-shadow: var(--glow-focus);
}

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--hairline);
  padding-block: 26px 34px;
  margin-top: var(--step);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  color: var(--muted);
}

/* --- 13. Focus -------------------------------------------------------- */

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--base);
  border: 1px solid var(--amber);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: var(--gutter); top: 12px; }

/* --- 14. Responsive --------------------------------------------------- */

@media (max-width: 860px) {
  .coords { display: none; }
}

@media (max-width: 720px) {
  :root { --grid-cell: 26px; }

  body { font-size: 1rem; }

  .masthead {
    /* Baseline, not flex-start: the nav links carry padding-block: 11px as a tap
       target and the mark carries none, so aligning the boxes by their top edges
       left the mark sitting 10px above the nav text. Baselines line the lettering
       up regardless of the padding, and leave the wrapped layout untouched. */
    align-items: baseline;
    gap: 6px 20px;
  }
  .masthead nav ul { gap: 16px; }

  /* On a narrow screen the disc would sit straight behind the intro text.
     Push it off the bottom-right corner and drop it to a low ember so the
     rings carry the motif instead. */
  body.home .sun {
    top: auto;
    bottom: -26%;
    right: -32%;
    width: min(104vw, 420px);
  }
  .sun .disc {
    box-shadow: none;
    animation-name: breathe-dim; /* keyframe opacity wins over a plain rule */
  }
  .sun .ring { border-color: rgba(255, 196, 107, 0.34); }
  .sun .r2 { border-color: rgba(255, 196, 107, 0.2); }
  .sun .r3 { border-color: rgba(255, 196, 107, 0.11); }

  .offduty { gap: 4px 10px; }

  .hero { padding-block: 44px var(--step); }
  .hero-inner { max-width: none; }

  .cards, .cards.compact { grid-template-columns: 1fr; }
}

/* --- 15. Motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  a.card:hover { transform: none; }
}