/* ============================================================================
   ABYSSAL INSTRUMENT — the pheun.org design system
   ============================================================================
   One identity, worn by both public pages: the landing page and the
   whitepaper. It lives here rather than in each page because it was
   previously declared twice, in two different naming schemes, with
   identical values — so changing the beacon hue meant remembering both
   files, and the two pages could drift apart silently.

   The system, in one paragraph. The ground is an abyssal blue-black: this
   is an instrument for reading a planetary mesh, not a document. Against
   it there is exactly ONE warm signal — the lighthouse beacon — spent on
   the thing the reader should act on, and a cold bioluminescent cyan that
   answers it wherever the page is stating fact rather than asking for
   attention. Neutrals are not grey; they carry the ground's own cyan bias
   (hues 188–198) so they read as part of the water. Headlines are warm
   paper-white, not the cyan-biased body colour, which is what makes a
   heading feel lit from the beacon side.

   Type is three faces doing three jobs: Fraunces (variable optical size)
   for display, where its higher optical sizes get the drama at large sizes
   and stay readable small; Hanken Grotesk for running text; JetBrains Mono
   for anything that is DATA — byte offsets, packet ids, coordinates,
   labels. The mono face is a semantic signal here, not decoration: if it
   is set in mono it is a value the protocol actually carries.

   CONSUMED BY: index.html (landing), whitepaper/index.html
   FONTS: self-hosted woff2 in /assets/fonts — no CDN, so nothing about
   the page depends on a third party being up or watching the reader.
   ========================================================================= */

/* ── faces ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/assets/fonts/fraunces-opsz.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url('/assets/fonts/fraunces-opsz-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/assets/fonts/hanken-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800;
  font-display: swap; src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2');
}

:root {
  /* ── ground ─────────────────────────────────────────────────────────
     Four depths, not one flat panel colour. A card sits ON the water;
     a code well sits IN it, which is why --depth-code is DARKER than the
     card rather than lighter. */
  --depth-0: hsl(196 44% 4%);      /* abyssal canvas */
  --depth-1: hsl(197 38% 6%);      /* raised panel */
  --depth-2: hsl(198 32% 8.5%);    /* card surface */
  --depth-3: hsl(198 26% 12%);     /* muted / hover */
  --depth-code: hsl(197 40% 6%);   /* code well — recessed, not raised */

  --hairline: hsl(195 28% 16%);      /* structural rule */
  --hairline-lit: hsl(188 42% 26%);  /* rule that is carrying meaning */

  /* ── signal ─────────────────────────────────────────────────────────
     One warm, one cold, and they are not interchangeable. Beacon is for
     what the reader should DO or what the page is claiming. Abyss is for
     what is measured or true. Spend the beacon rarely — its whole power
     is that it is the only warm thing on a cold page. */
  --beacon:   hsl(38 96% 60%);
  --beacon-2: hsl(16 92% 62%);     /* coral — beacon's far end */
  --abyss:    hsl(186 90% 54%);    /* bioluminescent cyan */
  --abyss-2:  hsl(200 92% 60%);    /* ocean blue */
  --seafoam:  hsl(158 68% 50%);    /* harmony green — states that are GOOD */
  --gold:     hsl(48 92% 64%);     /* code literals only */
  --rose:     hsl(2 80% 64%);      /* states that are NOT good */

  /* ── text ───────────────────────────────────────────────────────────
     Headlines are WARM (40deg); body is COOL (190deg). That two-degree
     family split is doing real work — it is why a heading reads as lit
     and body reads as submerged, without changing size or weight. */
  --ivory:  hsl(40 32% 96%);
  --text:   hsl(190 14% 85%);
  --text-2: hsl(194 12% 67%);
  --text-3: hsl(197 12% 50%);
  --text-4: hsl(198 16% 36%);      /* coordinates, byte offsets, faint labels */

  --grad-beacon: linear-gradient(100deg, var(--beacon), var(--beacon-2));
  --grad-signal: linear-gradient(115deg, var(--abyss) 0%, var(--abyss-2) 38%, var(--beacon) 100%);

  --maxw: 1180px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);

  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Courier New', monospace;

  /* One easing for the whole site: expo-out. Things arrive quickly and
     settle, which reads as instrument rather than as decoration. */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 0.75s;

  /* ── page-local aliases ─────────────────────────────────────────────
     The two pages were written against two different names for the same
     values. Rather than rewrite several hundred rule bodies — a blind
     sweep across a stylesheet this size is how you lose an evening to a
     colour that was right the first time — the old names are kept as
     aliases OF the canonical tokens above. One source of truth, both
     vocabularies still valid. New rules should use the canonical names. */
  --ink:    var(--depth-0);
  --ink-2:  var(--depth-1);
  --ink-3:  var(--depth-2);
  --ink-4:  var(--depth-3);
  --rule:   var(--hairline);
  --rule-2: var(--hairline-lit);

  --bg:            var(--depth-0);
  --bg-card:       var(--depth-2);
  --bg-card-hover: var(--depth-3);
  --bg-code:       var(--depth-code);
  --border:        var(--hairline);
  --border-strong: var(--hairline-lit);
  --text-dim:      var(--text-2);
  --text-bright:   var(--ivory);
  --accent:        var(--beacon);
  --accent-glow:   hsl(38 96% 60% / 0.15);
  --accent2:       var(--abyss);
  --accent3:       var(--abyss-2);
  --success:       var(--seafoam);
  --gradient-1:    var(--grad-beacon);
  --gradient-2:    linear-gradient(115deg, hsl(186 90% 54%), hsl(200 92% 60%));
}

/* ── motion ──────────────────────────────────────────────────────────────
   Scroll reveal is the site's one ambient behaviour, and both pages use
   it identically so that moving from the landing page into the whitepaper
   does not feel like arriving somewhere else. `.stagger-in` children each
   take their index from --i, so a group arrives as a group rather than as
   a burst.

   Reduced motion cancels the transition AND lands the element in its
   final state. A reveal that fails to run must fail VISIBLE — the failure
   mode of "opacity: 0 forever" is a blank page, which is worse than no
   animation at all. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease-settle),
              transform var(--dur-reveal) var(--ease-settle);
}
.reveal.visible { opacity: 1; transform: none; }

.stagger-in > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-settle), transform 0.6s var(--ease-settle);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.stagger-in.visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger-in > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── shared chrome ───────────────────────────────────────────────────── */
::selection     { background: hsl(38 96% 60% / 0.32); color: var(--ivory); }
::-moz-selection { background: hsl(38 96% 60% / 0.32); color: var(--ivory); }

/* Keyboard focus must be visible on the dark ground without being loud;
   the beacon ring reads at a glance and matches the site's one accent. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--beacon);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — present on both pages, visible only when focused. */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px;
  background: var(--beacon); color: hsl(196 44% 6%);
  font: 600 0.85rem/1 var(--font); text-decoration: none;
  transition: transform 0.2s var(--ease-settle);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ── cross-page ribbon ───────────────────────────────────────────────────
   The two pages are one publication, so each carries a persistent way
   back to the other. Mono-set because it is navigation chrome, not prose. */
.pheun-crosslink {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  color: var(--text-2); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 0.5rem 1rem;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.pheun-crosslink:hover {
  color: var(--ivory); border-color: var(--hairline-lit);
  background: hsl(198 32% 8.5% / 0.6);
}
.pheun-crosslink .mark { color: var(--beacon); }


/* ════════════════════════════════════════════════════════════════════════
   MASTHEAD — one component, three pages
   ════════════════════════════════════════════════════════════════════════
   The landing page, the whitepaper and the specification are one
   publication with three entrances. The masthead is therefore identical on
   all three, and the part that carries the most weight is the document
   SWITCHER: three destinations inside one container, with the current one
   lit. A row of bare links does not communicate that they are a set — it
   reads as a list of places to leave. A segmented control reads as where
   you are, which is the thing a reader of a three-part publication needs
   to know at a glance.

   Page-local anchors are deliberately NOT in the masthead on the document
   pages: those documents carry their own contents list, and duplicating it
   above turns the bar into the link soup this component replaced. */

.site-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2rem);
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  padding-top: calc(0.7rem + env(safe-area-inset-top));
  background: hsl(196 44% 4% / 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid hsl(195 28% 16% / 0.7);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-nav.is-fixed { position: fixed; left: 0; right: 0; border-bottom-color: transparent; }
.site-nav.is-fixed.scrolled {
  background: hsl(196 44% 4% / 0.93);
  border-bottom-color: hsl(195 28% 16% / 0.9);
}

/* ── brand ─────────────────────────────────────────────────────────── */
.site-nav .brand {
  display: flex; align-items: center; gap: 0.65rem;
  text-decoration: none; color: var(--ivory); flex-shrink: 0;
}
.site-nav .brand-mark {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  box-shadow: 0 0 0 1px hsl(0 0% 100% / 0.06), 0 4px 14px -6px hsl(196 70% 2% / 0.9);
  transition: transform 0.45s var(--ease-settle), box-shadow 0.45s var(--ease-settle);
}
.site-nav .brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 0 0 1px hsl(38 96% 60% / 0.35), 0 0 22px -4px hsl(38 96% 60% / 0.45);
}
.site-nav .brand-text { display: flex; flex-direction: column; line-height: 1; }
.site-nav .brand-text b {
  font-family: var(--font); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.17em;
}
.site-nav .brand-text small {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.17em;
  color: var(--text-3); text-transform: uppercase; margin-top: 0.3rem; white-space: nowrap;
}

.site-nav .nav-spacer { flex: 1; }

/* ── the document switcher ─────────────────────────────────────────── */
.doc-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: hsl(197 40% 6% / 0.85);
  border: 1px solid hsl(195 28% 16% / 0.9);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.035), 0 8px 24px -18px hsl(196 70% 2%);
  flex-shrink: 0;
}
.doc-switch a {
  position: relative; display: inline-flex; align-items: center;
  padding: 0.44rem clamp(0.7rem, 1.6vw, 1.05rem); border-radius: 999px;
  font-family: var(--font); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.005em; white-space: nowrap;
  color: var(--text-3); text-decoration: none;
  transition: color 0.22s var(--ease-settle), background 0.22s var(--ease-settle);
}
.doc-switch a:hover { color: var(--ivory); background: hsl(198 26% 12% / 0.75); }
.doc-switch a[aria-current="page"] {
  color: var(--ivory); font-weight: 600;
  background:
    linear-gradient(180deg, hsl(198 30% 14%) 0%, hsl(198 32% 10%) 100%);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.07),
    0 0 0 1px hsl(38 96% 60% / 0.22),
    0 6px 18px -10px hsl(38 96% 60% / 0.4);
}
/* A hairline of beacon under the live segment — the same signal the hero
   accent uses, so "where you are" reads in one colour across the site. */
.doc-switch a[aria-current="page"]::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 1.5px;
  border-radius: 2px; background: var(--grad-beacon); opacity: 0.85;
}

/* ── secondary links + actions ─────────────────────────────────────── */
.site-nav .nav-links {
  display: flex; align-items: center; gap: clamp(0.55rem, 1.5vw, 1.15rem);
}
.site-nav .nav-links a {
  font-family: var(--font); font-size: 0.8rem; font-weight: 450;
  color: var(--text-3); text-decoration: none; white-space: nowrap;
  transition: color 0.2s;
}
.site-nav .nav-links a:hover { color: var(--ivory); }

.site-nav .nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid hsl(195 28% 16% / 0.9); color: var(--text-3);
  background: hsl(197 40% 6% / 0.7); flex-shrink: 0;
  transition: color 0.22s, border-color 0.22s, transform 0.22s var(--ease-settle);
}
.site-nav .nav-icon:hover { color: var(--ivory); border-color: var(--hairline-lit); transform: translateY(-1px); }
.site-nav .nav-icon svg { width: 17px; height: 17px; }

.site-nav .nav-cta {
  background: var(--grad-beacon); color: hsl(30 100% 5%) !important;
  padding: 0.5rem 1rem; border-radius: 999px; text-decoration: none;
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em;
  box-shadow: 0 8px 22px -10px hsl(38 96% 60% / 0.65);
  transition: filter 0.2s, transform 0.2s var(--ease-settle);
  flex-shrink: 0;
}
.site-nav .nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

.site-nav .nav-toggle {
  display: none; background: hsl(197 40% 6% / 0.7);
  border: 1px solid hsl(195 28% 16% / 0.9); border-radius: 999px;
  width: 38px; height: 38px; cursor: pointer; color: var(--ivory);
  align-items: center; justify-content: center; flex-shrink: 0;
}
.site-nav .nav-toggle svg { width: 18px; height: 18px; }

/* ── responsive ────────────────────────────────────────────────────── */
/* The switcher survives every breakpoint — it is the navigation. Only the
   page-local link group collapses, and only where one exists. */
@media (max-width: 1000px) {
  .site-nav .brand-text small { display: none; }
}
@media (max-width: 900px) {
  .site-nav:has(.nav-links) .nav-toggle { display: inline-flex; }
  .site-nav .nav-links {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: hsl(198 36% 7%);
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    box-shadow: 0 26px 44px -22px hsl(196 70% 2% / 0.95);
    padding: 0.3rem clamp(1rem, 4vw, 2rem) 0.9rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.32s var(--ease-settle);
  }
  .site-nav .nav-links.open { clip-path: inset(0 0 0 0); }
  .site-nav .nav-links a {
    padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.98rem;
  }
  .site-nav .nav-links a:last-child { border-bottom: none; }
}
/* The three documents keep their real names at every width — "Whitepaper"
   and "Specification", never abbreviated. What gives way instead is the
   type scale and the bar's own padding, stepped down just enough to keep
   all three segments on one line and fully tappable. The switcher is the
   navigation, so it is the last thing that may be cut. */
@media (max-width: 620px) {
  .site-nav { gap: 0.6rem; }
  .site-nav .brand-text { display: none; }
  .doc-switch a { padding: 0.42rem 0.62rem; font-size: 0.76rem; }
  .site-nav .nav-cta { display: none; }
}
@media (max-width: 430px) {
  .site-nav .nav-icon { display: none; }
  .doc-switch a { padding: 0.4rem 0.5rem; font-size: 0.72rem; }
}
/* The narrowest phones in use — 390 with a menu button beside the switcher,
   down to 320 for a folded device. The mark shrinks with the type so the
   masthead keeps its proportions instead of just getting cramped. */
@media (max-width: 400px) {
  .site-nav { gap: 0.5rem; padding-inline: 0.7rem; }
  .site-nav .brand-mark { width: 30px; height: 30px; }
  .doc-switch a { padding: 0.4rem 0.44rem; font-size: 0.7rem; }
}
@media (max-width: 350px) {
  .site-nav { gap: 0.4rem; padding-inline: 0.55rem; }
  .site-nav .brand-mark { width: 26px; height: 26px; }
  .doc-switch { padding: 2px; }
  .doc-switch a { padding: 0.38rem 0.36rem; font-size: 0.655rem; letter-spacing: -0.005em; }
  .site-nav .nav-toggle { width: 32px; height: 32px; }
}
/* A kicker that wraps to two lines stops reading as a chip. Below the
   breakpoint the publisher drops and the document type carries it alone. */
@media (max-width: 620px) {
  .doc-hero .doc-kicker .kicker-org { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   DOCUMENT HERO — shared by the whitepaper and the specification
   ════════════════════════════════════════════════════════════════════════
   Both are papers and open the same way: what kind of document, its title,
   who it is for, the publisher, the actions. Only the TYPESETTING below
   differs — serif and measured for the paper, sans and dense for the
   specification — so the entrance is shared and the body is not. */

.doc-hero {
  position: relative; isolation: isolate; text-align: center;
  padding: clamp(3.4rem, 10vw, 6.5rem) 0 2.6rem;
}
/* Depth behind the title: the abyss lit from three sides, plus a faint
   survey grid. Without it the page is text floating on flat black, which
   is what a document hero must not look like beside the landing page.

   The wash is FULL-BLEED TO THE VIEWPORT, and the inline inset is what
   makes that safe. It used to be a flat `-50%`, which is half the HERO's
   width — fine on the specification, where the hero already spans the
   page, and wrong on the whitepaper, where the hero is a 43rem reading
   column: half of it hangs off the right edge and the document grows by
   that much. On a phone that is a page you can scroll sideways, which is
   exactly what it did. `calc((100% - 100vw) / 2)` instead makes the
   element exactly one viewport wide however wide its parent is, so the
   glow reaches both page edges and stops there. The only residue is a
   desktop scrollbar's worth of `100vw` overshoot, which the `overflow-x:
   clip` on each page's body absorbs. */
.doc-hero::before {
  content: ''; position: absolute; z-index: -2; pointer-events: none;
  inset-block: -20% -10%;
  inset-inline: calc((100% - 100vw) / 2);
  background:
    radial-gradient(620px circle at 14% 6%,  hsl(186 90% 54% / 0.08) 0%, transparent 52%),
    radial-gradient(860px circle at 86% 14%, hsl(38 96% 60% / 0.13) 0%, transparent 56%),
    radial-gradient(900px circle at 50% 98%, hsl(200 92% 60% / 0.07) 0%, transparent 55%);
}
.doc-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(hsl(195 28% 16% / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, hsl(195 28% 16% / 0.5) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(closest-side at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 20%, transparent 78%);
  opacity: 0.5;
}

/* Kicker as a chip, matching the landing page's status badge. */
.doc-hero .doc-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.95rem; border-radius: 999px;
  background: hsl(186 90% 54% / 0.055); border: 1px solid var(--hairline-lit);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: 2rem;
}
.doc-hero .doc-kicker .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--beacon);
  box-shadow: 0 0 12px var(--beacon); flex-shrink: 0;
}
.doc-hero .doc-kicker .sep { color: var(--hairline-lit); }

.doc-hero h1 {
  font-family: var(--display); font-weight: 480;
  font-size: clamp(2.3rem, 6.4vw, 4.05rem); line-height: 1.04;
  letter-spacing: -0.028em; color: var(--ivory);
  text-wrap: balance; max-width: 16ch; margin-inline: auto;
}
.doc-hero h1 .accent {
  display: block; font-style: italic; font-weight: 420;
  background: var(--grad-beacon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.doc-hero .doc-sub {
  max-width: 40rem; margin: 1.7rem auto 0;
  font-family: var(--font); font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6; color: var(--text-2); text-wrap: pretty;
}
.doc-hero .doc-audience {
  max-width: 36rem; margin: 1rem auto 0;
  font-family: var(--font); font-size: 0.88rem; line-height: 1.62; color: var(--text-4);
}
/* The specification says outright that it moves and the whitepaper does not.
   Boxed rather than set as another paragraph, because a reader who takes a
   copy away needs to see the warning without reading the run of hero prose
   first — the whole point is that a saved copy goes stale. */
.doc-hero .doc-living {
  max-width: 38rem; margin: 1.4rem auto 0;
  padding: 0.85rem 1.1rem; border-radius: 6px;
  border: 1px solid var(--hairline-lit);
  border-left: 2px solid var(--beacon);
  background: hsl(197 40% 6% / 0.55);
  font-family: var(--font); font-size: 0.85rem; line-height: 1.6;
  color: var(--text-3); text-align: left;
}
.doc-hero .doc-living strong { color: var(--text); }
.doc-hero .doc-living a {
  color: var(--abyss); text-decoration: none;
  border-bottom: 1px solid hsl(186 90% 54% / 0.35);
}
.doc-hero .doc-living a:hover { border-bottom-color: var(--abyss); }
.doc-hero .doc-kicker time { font: inherit; color: inherit; }
.doc-hero .doc-audience a {
  color: var(--abyss); text-decoration: none;
  border-bottom: 1px solid hsl(186 90% 54% / 0.35);
}
.doc-hero .doc-audience a:hover { border-bottom-color: var(--abyss); }

.doc-hero .byline {
  margin-top: 2rem; padding-top: 1.6rem;
  border-top: 1px solid hsl(195 28% 16% / 0.7);
  max-width: 30rem; margin-inline: auto;
  font-family: var(--font); font-size: 0.88rem; color: var(--text-2);
}
.doc-hero .byline .org { color: var(--text); font-weight: 500; }
.doc-hero .byline .contact {
  display: block; margin-top: 0.42rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--text-4);
}

.doc-actions { margin-top: 1.9rem; display: flex; gap: 0.65rem; justify-content: center; flex-wrap: wrap; }
.doc-actions .btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font); font-size: 0.85rem; font-weight: 500;
  padding: 0.66rem 1.25rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline-lit); background: hsl(197 40% 6% / 0.6);
  color: var(--text); text-decoration: none;
  transition: all 0.22s var(--ease-settle);
}
.doc-actions .btn:hover {
  border-color: var(--beacon); color: var(--ivory);
  transform: translateY(-2px); box-shadow: 0 10px 26px -16px hsl(38 96% 60% / 0.6);
}
.doc-actions .btn.primary {
  background: var(--grad-beacon); border-color: transparent;
  color: hsl(30 100% 5%); font-weight: 650;
  box-shadow: 0 10px 26px -12px hsl(38 96% 60% / 0.65);
}
.doc-actions .btn.primary:hover { color: hsl(30 100% 5%); filter: brightness(1.07); }

@media print {
  .site-nav, .doc-actions { display: none !important; }
  .doc-hero::before, .doc-hero::after { display: none; }
  .doc-hero { padding-top: 0; }
  .doc-hero h1, .doc-hero .doc-sub, .doc-hero .byline { color: #000 !important; }
  .doc-hero h1 .accent { -webkit-text-fill-color: #000; color: #000 !important; background: none; }
  .doc-hero .doc-kicker { border-color: #999 !important; color: #333 !important; background: none !important; }
}