/* ===============================
   Portal of Hope — Shared Styles
   HTML + CSS only
   =============================== */

:root{
  /* Core palette (cover-aligned) */
  --bg0:#070A0F;
  --bg1:#0B1220;

  --card: rgba(255,255,255,0.06);
  --card-soft: rgba(255,255,255,0.03);

  --text:#EAF0FF;
  --muted: rgba(234,240,255,0.78);
  --muted2: rgba(234,240,255,0.58);

  --line: rgba(234,240,255,0.14);

  /* Midnight base (reduced "startup cyan") */
  --accent:#9EE7FF;
  --accent-soft: rgba(158,231,255,0.10); /* was 0.14 */
  --accent-line: rgba(158,231,255,0.28); /* was 0.35 */

  /* Gaia + starlight (from cover) */
  --accent-life: #7FAE6A;                 /* leaf green */
  --accent-life-soft: rgba(127,174,106,0.18);

  --accent-starlight: #E6D6A8;            /* horizon gold */
  --accent-starlight-soft: rgba(230,214,168,0.12);

  --shadow: 0 18px 60px rgba(0,0,0,0.55);

  --radius: 18px;
  --radius-inner: 12px;
  --max: 980px;
}

/* Global link visibility */
a { 
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { 
  opacity: 0.9;
}


/* Reset / base */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Fixed living background */
  background:
    linear-gradient(
  rgba(7,10,15,0.72),
  rgba(7,10,15,0.72)
    ),
    url("../images/web_back.jpg") center center / cover no-repeat fixed;

  overflow-x:hidden;
}

/* Layout */
.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}

.card{
  width:100%;
  max-width: var(--max);
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}

/* --- Epic Atmosphere Overlay (no images) --- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.95;
}

/* make sure content stays above overlays */
.wrap{ position:relative; z-index:1; }

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(158,231,255,0.12), transparent 55%),
    radial-gradient(700px 260px at 18% 10%, rgba(127,174,106,0.10), transparent 55%);
  pointer-events:none;
  opacity:0.9;
}
.card{
  backdrop-filter: blur(4px);
}

.inner{
  position:relative;
  padding: 34px 34px 28px;
}

/* Header / navigation */
header{
  display:flex;
  padding-top: 2px;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.brand{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.brand .kicker{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
}

.brand h1{
  margin:0;
  font-size: 22px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

a.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration:none;
  color: var(--muted);
  background: rgba(0,0,0,0.16);
  transition: transform 0.08s ease,
              background 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
  font-size: 13px;
  white-space:nowrap;
}

a.pill:hover{
  transform: translateY(-1px);
  color: var(--text);
  border-color: var(--accent-line);
  background: rgba(158,231,255,0.09);
}

a.pill.active{
  color: var(--text);
  border-color: rgba(158,231,255,0.38);
  background: var(--accent-soft);
  font-weight: 650;
}

/* Main content */
main{
  padding-top: 22px;
  display:grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 18px;
  align-items:start;
}

.panel{
  padding: 18px 18px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 6px);
  background: rgba(0,0,0,0.18);
}

.panel h2{
  margin: 0 0 10px 0;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: 0.01em;
}

.panel h3{
  margin: 18px 0 10px 0;
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 750;
}

.panel p{
  margin: 0 0 12px 0;
  color: var(--muted);
}

/* Highlight boxes */
.box,
.rulebox,
.callout{
  padding: 16px;
  border-radius: 14px;

  /* Keep the cool glow subtle */
  background: linear-gradient(180deg, rgba(158,231,255,0.09), rgba(0,0,0,0.10));

  /* Option 4: starlight border (subtle, not "golden") */
  border: 1px solid rgba(230,214,168,0.18);

  margin-top: 14px;
}

.box .title,
.rulebox .title,
.callout h3{
  margin:0 0 8px 0;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* Quotes (Gaia leaf) */
.quote{
  border-left: 2px solid rgba(127,174,106,0.40);
  padding-left: 12px;
  margin: 12px 0 0 0;
  color: var(--muted);
}

/* Side column */
.side{
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
}

.side .title{
  margin:0 0 8px 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}

.side ul{
  margin: 10px 0 0 0;
  padding: 0 0 0 18px;
  color: var(--muted);
}

/* Buttons / links */
.btnrow{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
}

a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: var(--radius-inner);
  border: 1px solid var(--line);
  text-decoration:none;
  color: var(--text);
  background: rgba(158,231,255,0.09);
  transition: transform 0.08s ease,
              background 0.2s ease,
              border-color 0.2s ease;
  font-weight: 700;
}

a.btn:hover{
  transform: translateY(-1px);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

a.link{
  color: var(--muted);
  text-decoration:none;
  border-bottom: 1px dashed rgba(234,240,255,0.25);
  padding-bottom:2px;
}

a.link:hover{
  color: var(--text);
  border-bottom-color: rgba(234,240,255,0.55);
}

/* Footer */
footer{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color: var(--muted2);
  font-size: 12px;
}

.tiny{
  color: var(--muted2);
  font-size: 12px;
  margin-top: 10px;
}


/* ===============================
   Gaia Vibrance Patch (CSS only)
   Adds warmth + life without changing layout
   =============================== */

body::before{
  background:
    radial-gradient(800px 420px at 20% 15%, rgba(127,174,106,0.10), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(230,214,168,0.10), transparent 62%),
    radial-gradient(700px 420px at 50% 95%, rgba(158,231,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(7,10,15,0.70), rgba(7,10,15,0.78));
  mix-blend-mode: screen;
  animation: gaia-breathe 14s ease-in-out infinite;
}

@keyframes gaia-breathe{
  0%,100%{ opacity:0.78; filter: blur(0px); }
  50%{ opacity:0.92; filter: blur(0.4px); }
}

.brand h1{
  background: linear-gradient(90deg, var(--text), rgba(230,214,168,0.95), rgba(127,174,106,0.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.panel h2{
  color: var(--text);
  text-shadow: 0 0 18px rgba(230,214,168,0.12);
}

a.btn{
  background: linear-gradient(180deg, rgba(230,214,168,0.10), rgba(127,174,106,0.10));
  border-color: rgba(230,214,168,0.22);
}

a.btn:hover{
  border-color: rgba(127,174,106,0.40);
}

.rules, .steps{
  margin: 10px 0 0 18px;
  color: var(--muted);
}

.rules li, .steps li{
  margin: 8px 0;
}

/* Responsive */
@media (max-width: 880px){
  main{ grid-template-columns: 1fr; }
  .inner{ padding: 26px 18px 18px; }
  .panel h2{ font-size: 26px; }
  header{ align-items:flex-start; }
  nav{ justify-content:flex-start; }
}

/* Full-width section inside the grid (used on long pages) */
.panel.full{
  grid-column: 1 / -1;
}


/* ===============================
   Framework page: informative nodes
   (HTML/CSS only)
   =============================== */

.node-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 900px){
  .node-grid{ grid-template-columns: 1fr; }
}

.node{
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.14);
  border-radius: 14px;
  padding: 14px 14px 12px 14px;
}

.node-title{
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}

.node-body p:last-child{ margin-bottom: 0; }

.steps{
  margin: 10px 0 0 18px;
  padding: 0;
}

.steps li{
  margin: 0 0 10px 0;
}

.steps li strong{
  color: var(--text);
}

.steps li span{
  color: var(--muted);
}

.fold{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,0.14);
  overflow:hidden;
}

.fold summary{
  cursor:pointer;
  padding: 12px 14px;
  font-weight: 650;
  color: var(--text);
  list-style: none;
}

.fold summary::-webkit-details-marker{ display:none; }

.fold summary::after{
  content: "▾";
  float:right;
  color: var(--muted2);
  transition: transform 180ms ease;
}

.fold[open] summary::after{
  transform: rotate(-180deg);
}

.fold-body{
  padding: 0 14px 12px 14px;
  border-top: 1px solid var(--line);
}

.toc{
  display:grid;
  gap: 8px;
  margin-top: 10px;
}

.toc-item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.14);
  color: var(--text);
  text-decoration:none;
}

.toc-item:hover{
  border-color: rgba(127,174,106,0.38);
  background: rgba(127,174,106,0.10);
}

.mini-steps{
  margin: 10px 0 0 18px;
}

.small{
  font-size: 13px;
  color: var(--muted2);
}


/* ===============================
   Equilibrium page helpers
   =============================== */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}



/* ===============================
   Choice page: quiet ending
   =============================== */
.quiet-end{
  margin-top: 16px;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(127,174,106,0.40);
  background: rgba(127,174,106,0.08);
}
.quiet-end p{
  margin: 0;
  color: var(--text);
}



/* ===============================
   Index page: node links + buttons
   =============================== */
.linknode{
  text-decoration: none;
  color: inherit;
  display: block;
}
.linknode:hover{
  border-color: rgba(127,174,106,0.38);
  background: rgba(127,174,106,0.10);
}
.btn{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.14);
  color: var(--text);
  text-decoration:none;
}
.btn:hover{
  border-color: rgba(127,174,106,0.38);
  background: rgba(127,174,106,0.10);
}

/* Navigation: compact, consistent, wraps nicely */
nav[aria-label="Portal navigation"]{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Pills: slightly smaller so 11 items look clean */
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
}

nav[aria-label="Portal navigation"]{
  display: grid;

  /* Force wrapping by limiting width */
  max-width: 760px;
  margin: 12px auto 0;

  /* Balanced pill layout */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;

  justify-content: center;
}


/* ===============================
   NAV GRID CANONICAL (Option B)
   =============================== */
nav[aria-label="Portal navigation"]{
  display: grid !important;
  max-width: 760px;
  margin: 12px auto 0;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  justify-content: center;
}
/* =========================================================
   LIFE LAYER — Proximity Glow + Depth (CSS-only)
   Add at END of portal.css
   ========================================================= */

/* 1) Subtle depth haze behind the whole card (no images).
   Creates "space + breath" without looking like a background. */
.card {
  position: relative; /* ensure ::before can sit behind content */
  overflow: hidden;   /* keeps haze inside rounded edges */
}

.card::before {
  content: "";
  position: absolute;
  inset: -40px;               /* larger than card to avoid visible edges */
  pointer-events: none;
  z-index: 0;

  /* Two very soft layers:
     - a dim cool "nebula dust" wash
     - a faint warm "life glow" counterbalance
  */
  background:
    radial-gradient(900px 600px at 80% 10%,
      rgba(255, 255, 255, 0.045),
      transparent 55%),
    radial-gradient(700px 520px at 15% 85%,
      rgba(255, 255, 255, 0.030),
      transparent 60%),
    radial-gradient(520px 420px at 55% 55%,
      rgba(255, 255, 255, 0.020),
      transparent 65%);

  filter: blur(0.6px);
  opacity: 0.75;
}

/* Make sure real content stays above the haze */
.inner,
.inner * {
  position: relative;
  z-index: 1;
}

/* 2) Proximity glow on reading surfaces.
   Applies to panels, callouts, and small boxes. */
.panel,
.callout,
.box,
.rulebox {
  transition:
    box-shadow 260ms ease,
    border-color 260ms ease,
    transform 260ms ease;
  will-change: box-shadow, border-color, transform;
}

/* Glow when hovered OR when keyboard focus is inside (accessible). */
.panel:hover,
.panel:focus-within,
.callout:hover,
.callout:focus-within,
.box:hover,
.box:focus-within,
.rulebox:hover,
.rulebox:focus-within {
  /* A gentle halo (not neon), layered for softness */
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 28px rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

/* 3) Gentle “breathing” of depth (very slow, optional).
   If you prefer ZERO animation, set animation: none; */
@keyframes gaiaDepthBreath {
  0%   { opacity: 0.70; }
  50%  { opacity: 0.82; }
  100% { opacity: 0.70; }
}

.card::before {
  animation: gaiaDepthBreath 28s ease-in-out infinite;
}

/* 4) Optional: soften link hover just a touch (keeps calm tone).
   Comment out if you already tuned link colors and love them. */
a:hover {
  text-decoration-thickness: 2px;
}

/* =========================================================
   LIFE LAYER — Upgrade to “FELT IMMEDIATELY” (Option B)
   Add BELOW the previous LIFE LAYER block
   ========================================================= */

/* 1) A gentle living edge-glow (Gaia presence), always visible.
   It sits ABOVE the haze but BELOW content. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Edge-biased glow: warm life + faint green vitality.
     Kept subtle but unmistakable. */
  background:
    radial-gradient(1200px 700px at 50% 0%,
      rgba(255, 255, 255, 0.045),
      transparent 55%),
    radial-gradient(900px 600px at 10% 30%,
      rgba(140, 255, 200, 0.040),
      transparent 62%),
    radial-gradient(900px 600px at 90% 70%,
      rgba(255, 220, 170, 0.045),
      transparent 62%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.020),
      rgba(0, 0, 0, 0.000) 35%,
      rgba(0, 0, 0, 0.000) 65%,
      rgba(255, 255, 255, 0.018));
  opacity: 0.95;

  /* Subtle “alive” softness */
  filter: blur(0.2px);
}

/* Ensure content remains above both ::before haze and ::after glow */
.inner,
.inner * {
  position: relative;
  z-index: 1;
}

/* 2) Warmth cue on reading surfaces:
   Keep your proximity glow, but bias it slightly warmer + more present. */
.panel:hover,
.panel:focus-within,
.callout:hover,
.callout:focus-within,
.box:hover,
.box:focus-within,
.rulebox:hover,
.rulebox:focus-within {
  box-shadow:
    0 14px 46px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 34px rgba(255, 230, 190, 0.10),  /* warm presence */
    0 0 28px rgba(140, 255, 200, 0.06);  /* life tint */
  border-color: rgba(255, 255, 255, 0.14);
}

/* 3) Make the card’s “breath” slightly more noticeable.
   If you don’t like animation, set to none. */
@keyframes gaiaPresenceBreath {
  0%   { opacity: 0.90; }
  50%  { opacity: 1.00; }
  100% { opacity: 0.90; }
}

/* Apply to the new edge glow */
.card::after {
  animation: gaiaPresenceBreath 22s ease-in-out infinite;
}

/* Optional: if the effect is too strong, quickly dial it down:
   - set .card::after opacity to 0.70–0.80
   - or set animation: none;
*/

/* =========================================================
   GAIA SECTION HEADLINES — Living gradients (CSS-only)
   No HTML changes required.
   ========================================================= */

:root{
  /* Emerald Green = Life / Gaia / Grounding */
  --grad-life: linear-gradient(90deg,
    rgba(255,255,255,0.98),
    rgba(111,227,181,0.95),
    rgba(42,168,118,0.92)
  );

  /* Emerald Blue = Mind / Time / Understanding */
  --grad-mind: linear-gradient(90deg,
    rgba(245,250,255,0.98),
    rgba(122,215,255,0.92),
    rgba(47,127,214,0.90)
  );

  /* Soft Starlight Gold = Subtle emphasis / “important note” labels */
  --grad-star: linear-gradient(90deg,
    rgba(255,255,255,0.96),
    rgba(233,199,122,0.92),
    rgba(184,154,82,0.88)
  );
}

/* Helper: gradient text (safe, readable fallback) */
@supports (-webkit-background-clip: text) or (background-clip: text){
  .gaia-grad{
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* 1) Major section headers (inside panels): LIFE */
@supports (-webkit-background-clip: text) or (background-clip: text){
  .panel h2{
    background-image: var(--grad-life);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;

    /* keep your existing glow subtle; add a touch of “alive” */
    text-shadow: 0 0 18px rgba(127,174,106,0.14);
  }
}

/* 2) Subsection headers: MIND */
@supports (-webkit-background-clip: text) or (background-clip: text){
  .panel h3{
    background-image: var(--grad-mind);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 14px rgba(158,231,255,0.10);
  }
}

/* 3) Small label-titles (nodes / side titles / box titles):
      Use starlight by default (reads “important but calm”) */
@supports (-webkit-background-clip: text) or (background-clip: text){
  .node-title,
  .side .title,
  .box .title,
  .rulebox .title{
    background-image: var(--grad-star);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 12px rgba(230,214,168,0.10);
  }

  /* Callouts often feel “conceptual” → give them mind-blue */
  .callout h3{
    background-image: var(--grad-mind);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* 4) If you ever want a specific area to feel more “life” without HTML changes:
      make callout titles life-green when the callout is inside the SIDE column. */
@supports (-webkit-background-clip: text) or (background-clip: text){
  .side .callout h3{
    background-image: var(--grad-life);
  }
}

/* =========================================================
   HOME HERO — Blue Dot / Earth Horizon (CSS-only)
   Only affects index.html where .hero-home is used
   ========================================================= */

.hero{
  position: relative;
  margin: 10px 0 18px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  overflow: hidden;
}

.hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-title{
  margin: 10px 0 14px;
  font-size: clamp(23px, 4.4vw, 46px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: rgba(244,248,255,0.96);
}



/* Use your existing “alive” gradient language */
.hero-title{
  background: linear-gradient(90deg,
    rgba(255,255,255,0.98),
    rgba(233,199,122,0.92),
    rgba(111,227,181,0.90),
    rgba(122,215,255,0.82)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(127,174,106,0.10);
}

.hero-sub{
  margin: 0 auto 10px;
  max-width: 980px;
  font-size: clamp(10px, 1.7vw, 22px);
  line-height: 1.55;
  color: rgba(235,245,255,0.90);
  letter-spacing: 0.02em;
}


.hero-welcome{
  margin-top: 10px;
  font-size: clamp(18px, 2.0vw, 34px);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(233,214,168,0.96);
}


/* Sticker-like tag */
.hero-sticker{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(158,231,255,0.82);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.28),
    0 0 18px rgba(158,231,255,0.08);
}

/* --- The “Blue Dot” Earth-horizon hint (no images) --- */
.hero-home {
  position: relative;
  overflow: hidden;
}

.hero-home .hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-home .hero-inner {
  position: relative;
  z-index: 1;
}

.hero-home .hero-bg-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(900px, 120vw);
  height: auto;
  max-width: none;
  display: block;
  opacity: 0.95;
  mask-image: linear-gradient(to top, black 70%, transparent 100%);
}

/* Mobile sizing */
@media (max-width: 560px){
  .hero{ padding: 18px 16px 16px; border-radius: 16px; }
  .hero-title{ font-size: 34px; }
  .hero-sub{ font-size: 13px; }
}

@media (max-width: 900px){
  header nav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  header nav .pill{
    display: inline-block;
    white-space: nowrap;
  }
}

/* Footer (Option 3) */
footer { text-align: center; }
.footer-inner { padding: 14px 10px; }
.footer-line1 { line-height: 1.4; }
.footer-line2 { line-height: 1.4; margin-top: 4px; opacity: 0.85; }



/* Micro-hero (node page subheader) */
.microhero { margin-top: 10px; }
.microhero .mh1 { font-size: 15px; line-height: 1.4; opacity: 0.95; }
.microhero .mh2 { font-size: 13px; line-height: 1.4; margin-top: 4px; opacity: 0.8; }

/* Footer should span full card width even if inner uses grid */
footer { grid-column: 1 / -1; width: 100%; }



/* Footer spans full width of the main grid */
main > footer {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

footer { text-align: center; }

footer .footer-inner {
  max-width: var(--max);
  margin: 0 auto;
}