/* Dhiphos — minimalist, modern industrial styling.
   Palette: #333333 / #888888 / #ffffff / #B45309  (warm amber / forge)
   Fonts:   Geist          (display + body — neutral frontier-tech sans)
            Geist Mono     (identifiers — entry titles, chips, eyebrows)
            Space Grotesk  (brand wordmark only — `.topnav-wordmark`)
   All fonts are self-hosted from `assets/fonts/` to keep the site
   third-party-free at runtime. Geist + Geist Mono are shipped as
   single full-Latin variable-font WOFF2 files (covering every weight
   we use). Space Grotesk is kept latin-only and used in exactly one
   place — the topnav wordmark — so the brand name has a typographic
   signature distinct from the rest of the page. */

/* ---------- @font-face ---------- */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-sans.woff2') format('woff2-variations'),
       url('../fonts/geist-sans.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono.woff2') format('woff2-variations'),
       url('../fonts/geist-mono.woff2') format('woff2');
}

/* Space Grotesk — brand wordmark only. Kept on the latin subset
   (the wordmark "Dhiphos" is ASCII-only) and only requested when
   the .topnav-wordmark element is on the page. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:        #ffffff;
  --bg-elev:   #ffffffeb;          /* translucent surface for the top nav */
  --fg:        #333333;
  --muted:     #888888;
  --accent:    #B45309;            /* amber-700 */
  --accent-2:  #F59E0B;            /* amber-500 */
  --on-accent: #ffffff;
  --rule:      #88888833;
  --selection: #B4530933;

  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
                  Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono",
                  monospace;
  --font-brand:   "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;

  --measure: 64ch;
  --pad-x: clamp(1.25rem, 4vw, 2.25rem);
  --pad-y: clamp(2.5rem, 6vw, 4.5rem);

  --nav-h:    56px;
  --mark-size: 0.55em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1a1a1a;
    --bg-elev:   #1a1a1aeb;
    --fg:        #ffffff;
    --muted:     #888888;
    --accent:    #F59E0B;
    --accent-2:  #FBBF24;
    --on-accent: #1a1a1a;
    --rule:      #ffffff1f;
    --selection: #F59E0B33;
  }
  html {
    -webkit-tap-highlight-color: rgba(245, 158, 11, 0.25);
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

/* Mobile tap highlight — replace the default system blue flash with a
   warm amber wash so touch feedback blends with the brand palette. */
html {
  -webkit-tap-highlight-color: rgba(180, 83, 9, 0.22);
}

body {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 350;            /* Geist 400 reads heavier than other sans at 400;
                                  350 leans on Geist's variable axis to land on
                                  a body weight that reads as quiet as a typical
                                  non-Geist regular. */
  line-height: 1.65;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 720px) {
  body { font-size: 19px; }
}

::selection { background: var(--selection); }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* When jumping to anchors via the top nav, leave breathing room
   below the sticky nav so the heading isn't tucked underneath. */
:target,
.block,
.hero {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}

/* ---------- A11y utilities ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip link — hidden until keyboard-focused */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  background: var(--fg);
  color: var(--bg);
  padding: 0.5rem 0.85rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform 150ms ease;
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--bg);
  text-decoration: none;
}

/* ---------- Top navigation ---------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  background: var(--bg-elev);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
          backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;                 /* mark + wordmark lockup spacing */
  text-decoration: none;
  color: var(--fg);
  margin-right: auto;          /* push everything else right */
  flex: 0 0 auto;
}
.topnav-brand:hover { color: var(--fg); text-decoration: none; }

/* Topnav mark — small icon paired with the wordmark, theme-aware
   like the (now-retired) hero logo treatment.
   The two source SVGs have different glyph-to-canvas ratios:
     - logo-dark.svg has the glyph filling its viewBox (~100%).
     - logo-light.svg wraps the glyph in a dark box, so the glyph
       occupies only ~72.7% of its viewBox.
   We render the light variant larger (33px) so its inner glyph
   reads at the same visual size as the dark variant (24px), and
   center each variant inside a fixed-width slot so the wordmark
   sits at the same X position regardless of which is visible. */
.topnav-logo-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
}
.topnav-logo {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}
.topnav-logo-light {
  display: block;
  width: 33px;
  height: 33px;
}
.topnav-logo-dark {
  display: none;
  width: 24px;
  height: 24px;
}
@media (prefers-color-scheme: dark) {
  .topnav-logo-light { display: none; }
  .topnav-logo-dark  { display: block; }
}

/* The wordmark text in the source is "Dhiphos"; we render it as
   "DHIPHOS" purely typographically so the source-of-truth for the
   brand name stays consistent across markup and metadata. */
.topnav-wordmark {
  font-family: var(--font-brand);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--fg);
  text-transform: uppercase;
}

.topnav-nav {
  display: none;               /* hidden on small screens */
  gap: 1.5rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
@media (min-width: 640px) {
  .topnav-nav { display: inline-flex; }
}

.topnav-nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0;
  padding: 0.4rem 0;
}
.topnav-nav a:hover,
.topnav-nav a:active {
  color: var(--accent);
  text-decoration: none;
}

/* Active-section indicator. JS adds `.is-active` to the link whose
   target section is currently in view. Subtle 2px amber underline,
   anchored to the link baseline so it doesn't shift the layout. */
.topnav-nav a.is-active {
  color: var(--fg);
}
.topnav-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* ---------- Hero ---------- */

.hero {
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1rem, 3vw, 2rem);   /* hero leads with H1 — minimal lead-in below the sticky nav */
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--rule);
}

/* Hero copy fills the full column on every viewport — same horizontal
   footprint as the section headings, chip-rails, illustrations, and
   entry border-rules used elsewhere on the page. No artificial inner
   caps; readability is governed by the wrap's `--measure` token, which
   itself widens responsively (64ch → 72ch → 78ch) on bigger screens. */
.tagline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 1.25rem;
}

.lede {
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
}

/* SAP product chip rail — small monospaced "tags" that signal native
   expertise in the manufacturing suite without taking visual real estate. */
.chip-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

/* Mono eyebrow above each chip rail — same family as .entry-title so
   the rails read as part of the same typographic system. Rendered as
   a quiet lowercase label, matching the lowercase-identifier register
   used for H2s, entry titles, and most chips elsewhere on the page. */
.chip-rail-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0 0 0.55rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
/* Strengthen the chip border in dark mode — the global `--rule` token
   is intentionally faint (#ffffff1f) for hairline section dividers,
   but at chip scale it almost disappears against #1a1a1a. */
@media (prefers-color-scheme: dark) {
  .chip { border-color: #ffffff33; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 0;
}

.btn-link {
  font: inherit;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.btn-link:hover,
.btn-link:active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

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

.btn {
  font: inherit;
  font-weight: 500;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--rule);
  padding: 0.45rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn-primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-primary:hover,
.btn-primary:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Trailing arrow on CTA buttons — slides right on hover/focus to
   reinforce the "go" affordance. Keep zero motion when the user
   has prefers-reduced-motion enabled. */
.btn-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 150ms ease;
}
.btn:hover .btn-arrow,
.btn:focus-visible .btn-arrow,
.btn:active .btn-arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .btn-arrow { transition: none; }
  .btn:hover .btn-arrow,
  .btn:focus-visible .btn-arrow,
  .btn:active .btn-arrow { transform: none; }
}

/* ---------- Section blocks ---------- */

.block { margin: clamp(2rem, 5vw, 3rem) 0; }

/* Section-to-section separator. Hairline rule + extra air so each
   block reads as a discrete unit on the page. Entry-level rules
   (top/bottom of the .entry stack) handle sub-section separation. */
.block + .block {
  border-top: 1px solid var(--rule);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.section {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;          /* Geist 600 reads loud at H2 size; 500 keeps the
                                heading calm while size (1.5rem) carries the
                                hierarchy. */
  letter-spacing: 0.005em;
  line-height: 1.25;
  margin: 0 0 1.25rem;
  color: var(--fg);
}

.block-lede {
  color: var(--muted);
  margin: 0 0 1.75rem;
  max-width: 60ch;
}

.entry {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.entry:last-child {
  border-bottom: 1px solid var(--rule);
}

.entry-title {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--accent);
  letter-spacing: 0;
}

.entry p {
  font-family: var(--font-display);
  font-weight: 350;
  margin: 0;
  color: var(--fg);
  max-width: 62ch;
  line-height: 1.65;
}

.muted { color: var(--muted); }

/* ---------- Diamond marker ---------- */

.prompt,
.caret {
  display: inline-block;
  width: var(--mark-size);
  height: var(--mark-size);
  background: var(--accent);
  transform: rotate(45deg);
  margin-right: 0.7rem;
  vertical-align: 0.18em;
  -webkit-user-select: none;
  user-select: none;
  flex: 0 0 auto;
}

.section .caret {
  --mark-size: 0.5em;
  margin-right: 0.65rem;
  vertical-align: 0.18em;
}

.foot .caret {
  --mark-size: 0.5em;
  margin-right: 0.6rem;
  vertical-align: 0.18em;
}

/* ---------- Illustrations ---------- */

.illus {
  margin: 1.5rem 0 2rem;
  padding: 0;
}
.illus-img {
  display: block;
  width: 100%;                 /* fill the prose column at every viewport so
                                  illustrations grow along with `--measure` on
                                  wider screens, instead of being capped. */
  height: auto;
  margin: 0;
  border-radius: 8px;
}
.illus-light { display: block; }
.illus-dark  { display: none; }
@media (prefers-color-scheme: dark) {
  .illus-light { display: none; }
  .illus-dark  { display: block; }
}

/* ---------- Contact section ---------- */

.block-contact { margin-top: clamp(3rem, 7vw, 4.5rem); }

.signup { margin: 0 0 1.25rem; }

.signup-label {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
  letter-spacing: 0.01em;
}

.signup-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  padding: 0.65rem 0.9rem;
  background: transparent;
  border-radius: 6px;
  transition: border-color 120ms ease;
  max-width: 36rem;
}
.signup-row:focus-within { border-color: var(--accent); }

.signup input[type="email"] {
  flex: 1 1 16ch;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font: inherit;
  padding: 0.2rem 0;
}
.signup input[type="email"]::placeholder { color: var(--muted); }

/* Neutralize browser autofill background. */
.signup input[type="email"]:-webkit-autofill,
.signup input[type="email"]:-webkit-autofill:hover,
.signup input[type="email"]:-webkit-autofill:focus,
.signup input[type="email"]:-webkit-autofill:active {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
          box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--fg);
  transition: background-color 9999s ease-in-out 0s;
}
.signup input[type="email"]:autofill {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

.signup-status {
  min-height: 1.25em;
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.signup-status.ok    { color: var(--fg); }
.signup-status.err   { color: var(--accent); }

.signup-noscript {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.contact-direct {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}
.contact-direct a { color: var(--fg); }

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

.foot {
  border-top: 1px solid var(--rule);
  background: var(--bg);
  color: var(--muted);
}

.foot-wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem var(--pad-x) clamp(2rem, 4vw, 3rem);
}

.foot-row { margin: 0 0 0.4rem; }
.foot p { margin: 0 0 0.4rem; }
.foot .small {
  font-size: 0.9rem;
}
.foot a { color: var(--fg); }
.foot a:hover { color: var(--accent); }

/* Tertiary credit line — visibly de-emphasized vs the contact and legal
   rows so it doesn't compete with primary footer info. */
.foot-credit {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  margin-top: 0.6rem;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .foot-credit { color: var(--muted); opacity: 0.7; }
}

/* Legal/registered company line — sits between the contact row and the
   copyright line. Plain inline flow so the whitespace between the
   year, middot separators, and the rest of the metadata is preserved
   (a flex container would collapse those spaces). */
.foot-legal {
  margin-top: 0.9rem;
  line-height: 1.4;
}
.foot-legal .foot-sep {
  height: 0.95em;
  margin: 0 0.7rem;
  vertical-align: -0.1em;
}

.foot-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  line-height: 1;
}
.foot-contact .caret {
  vertical-align: 0;
  margin-right: 0.6rem;
}
.foot-contact a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.foot-sep {
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--rule);
  margin: 0 0.9rem;
  flex: 0 0 auto;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-decoration: none;
  border: 0;
  padding: 0;
  line-height: 0;
  transition: color 120ms ease, transform 120ms ease;
}
.social-link:hover {
  color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.social-link:active { color: var(--accent); }
.social-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.social-icon { display: block; }

/* ---------- Consent banner ----------
   Modeless dialog that asks the visitor to accept or decline
   Google Analytics. Default-denied is set in the gtag snippet in
   <head>; this banner just persists the visitor's choice and
   calls gtag('consent', 'update', ...). DOM is injected by
   assets/js/consent.js.

   Design notes:
     - Lives at the bottom of the viewport, centered to the prose
       column on tablet/desktop, edge-to-edge on phones.
     - Two buttons of equal weight (Decline / Accept) — France's
       CNIL and other DPAs have fined sites for "Accept" being
       visually dominant. Accept is the right-most button (matches
       the site's primary-action positioning) but the same .btn
       footprint as Decline.
     - Slides up + fades in on first paint; reverse on dismiss. */

.consent {
  position: fixed;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 100;
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 12px 36px -14px rgba(0, 0, 0, 0.22),
              0 2px 6px -2px rgba(0, 0, 0, 0.08);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease;
}
.consent.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.consent-inner {
  padding: 1rem 1.15rem 1.1rem;
}

.consent-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0 0 0.45rem;
  text-transform: lowercase;
}
.consent-title .caret {
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}

.consent-body {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg);
}
.consent-body a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.consent-body a:hover,
.consent-body a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}
.consent-actions .btn { font-size: 0.95rem; }

/* Phones: pin to the bottom edge, fill the width, and let the
   buttons share the row equally — easier to thumb-tap than a
   right-aligned cluster. */
@media (max-width: 540px) {
  .consent {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
  }
  .consent-actions { gap: 0.5rem; }
  .consent-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-color-scheme: dark) {
  .consent {
    box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.7),
                0 2px 6px -2px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ---------- Desktop polish ----------
   The site is designed mobile-first as a single 64ch reading column.
   On wide viewports that column starts to feel stranded in empty
   gutters. We address it without breaking the minimalist aesthetic:
     1. modestly widen the prose measure (≥1024px, again at ≥1440px),
     2. bump body type and hero breathing room a notch (≥1280px).
   Illustrations stay flush with their section's prose column on all
   viewports — no horizontal breakout — so they remain visually part
   of the section they belong to.
   Phones and tablets up to ~1023px see no change at all. */

@media (min-width: 1024px) {
  :root { --measure: 72ch; }
}

@media (min-width: 1280px) {
  body { font-size: 20px; }

  .hero {
    padding-top: clamp(1.5rem, 2.5vw, 2.75rem);
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
  }
  .tagline { font-size: clamp(2.25rem, 2.8vw, 2.85rem); }
}

@media (min-width: 1440px) {
  :root { --measure: 78ch; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .social-link:hover { transform: none; }
}