/* ============================================================
   ARETHEUM — design system
   Dark marble, antique gold, silence between the lines.
   ============================================================ */

:root {
  --ink:        #0b0b0e;   /* page ground */
  --ink-2:      #101017;   /* raised surfaces */
  --line:       rgba(201, 169, 97, 0.22);
  --line-faint: rgba(236, 231, 221, 0.08);
  --gold:       #c9a961;
  --gold-hi:    #e9cf92;
  --paper:      #ece7dd;   /* primary text */
  --paper-dim:  #b9b2a4;   /* secondary text */
  --muted:      #7d786c;   /* whispers */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --max: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* faint grain so the black reads as material, not void */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* one deep gold aura, fixed, barely there */
body::after {
  content: "";
  position: fixed;
  left: 50%; top: -30vh;
  width: 130vw; height: 90vh;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center,
              rgba(201, 169, 97, 0.07), transparent 60%);
}

main, header, footer { position: relative; z-index: 2; }

::selection { background: rgba(201, 169, 97, 0.35); color: #fff; }

a { color: inherit; text-decoration: none; }

/* keyboard focus: the default ring is hard to read on this ground */
:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

.door:focus-visible { outline-offset: -5px; }
.btn:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------- type */

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.whisper { color: var(--muted); font-size: 0.9rem; }

em { font-style: italic; }

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

/* ---------------------------------------------------------- nav */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(rgba(11, 11, 14, 0.92), rgba(11, 11, 14, 0.75) 70%, transparent);
  backdrop-filter: blur(6px);
}

.nav .mark {
  display: flex;
  align-items: baseline;
  gap: 0.32em; /* match letter-spacing so the Λ reads as the first letter */
  padding: 0.35rem 0;  /* lifts the tap target past 24px on touch screens */
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.32em;
  color: var(--paper);
}

.nav .mark svg { width: 0.73em; height: 0.8em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.2rem);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links a { color: var(--paper-dim); transition: color 0.25s; }
.nav-links a.plain { padding: 0.45rem 0; }  /* 24px+ tap target on tablets */
.nav-links a:hover { color: var(--gold-hi); }
.nav-links a.active { color: var(--gold); }

/* ---------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--gold);
  color: var(--gold-hi);
  background: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.btn.ghost {
  background: transparent;
  color: var(--gold);
  border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--gold); box-shadow: none; color: var(--gold-hi); }

.btn svg { width: 15px; height: 15px; fill: currentColor; }

/* ============================================================
   LANDING — one screen, no entrance
   The page renders fully formed. The only motion is the drifting
   aura and a single gleam across the wordmark on load.
   The whole page is a flex column exactly one viewport tall:
   the stage takes whatever height the doors and footer leave.
   ============================================================ */

body.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* The one light source in the room drifts and breathes on a slow loop.
   It is fixed-position, so it never adds scroll height. This is the only
   continuous motion on the page — everything else just fades. */
body.landing::after {
  animation: aura 30s ease-in-out infinite;
}

@keyframes aura {
  0%   { opacity: 0.62; transform: translate(-50%, 0)      scale(1); }
  33%  { opacity: 1;    transform: translate(-45%, 3vh)    scale(1.1); }
  66%  { opacity: 0.78; transform: translate(-56%, -1.5vh) scale(1.04); }
  100% { opacity: 0.62; transform: translate(-50%, 0)      scale(1); }
}

.landing #stage-root {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.4rem, 3.4vh, 2.4rem);
  padding: clamp(3rem, 8vh, 5rem) 1.5rem clamp(1.5rem, 4vh, 2.75rem);
  position: relative;
  overflow: hidden;  /* the gleam sweeps past the crest; never let it widen the page */
}

/* ---- the crest -------------------------------------------------
   The Λ is simply the A of ARETHEUM. Nothing draws or assembles.

   --wm drives every dimension of the wordmark. It is a plain length
   (rem/vw only), so the Λ and the letters stay locked to the same
   scale regardless of font-size inheritance. */
.crest {
  --wm: clamp(2rem, 6.2vw, 4rem);
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--wm) * 0.3);
  font-family: var(--serif);
  font-size: var(--wm);
  font-weight: 500;
  line-height: 1;
}

/* 0.65 × --wm puts the glyph at the cap height of the wordmark;
   the negative margin drops it from the viewBox padding onto the baseline */
.lambda-draw {
  width: calc(var(--wm) * 0.65);
  margin-bottom: calc(var(--wm) * -0.024);
  height: auto;
  flex: none;
  filter: drop-shadow(0 0 12px rgba(201, 169, 97, 0.3));
}

/* stroke-width is in viewBox units; 9.4 renders at the weight of the
   serif stems the Λ sits beside */
.lambda-draw path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 9.4;
  stroke-linecap: square;
}

/* negative margin swallows the trailing letter-space so the
   wordmark stays optically centred */
.crest .rest {
  white-space: nowrap;
  color: var(--paper);
  letter-spacing: calc(var(--wm) * 0.3);
  margin-right: calc(var(--wm) * -0.3);
}

/* the one piece of entrance motion: a single gleam across the wordmark */
.crest::after {
  content: "";
  position: absolute;
  inset: -10% -6%;
  pointer-events: none;
  background: linear-gradient(105deg,
              transparent 42%,
              rgba(255, 250, 235, 0.14) 50%,
              transparent 58%);
  opacity: 0;
  animation: gleam 1.6s cubic-bezier(0.5, 0, 0.3, 1) 0.7s 1;
}

/* no fill-mode: once the sweep is over the layer returns to opacity 0 and
   an untransformed box, so it never sits outside the page and widens it */
@keyframes gleam {
  0%   { opacity: 0; transform: translateX(-115%); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(115%); }
}

/* ---- dictionary entry ---- */
.defn {
  opacity: 0.68;
  font-family: var(--serif);
  color: var(--paper-dim);
  max-width: 34rem;
}

.defn .word {
  font-size: clamp(1.35rem, 2.7vw, 1.75rem);
  color: var(--paper);
  letter-spacing: 0.04em;
}

.defn .word i { color: var(--muted); font-size: 0.75em; letter-spacing: 0.08em; }

.defn .sense {
  margin-top: 0.4rem;
  font-size: clamp(0.98rem, 1.9vw, 1.1rem);
  font-style: italic;
  line-height: 1.55;
}

/* ---- the two doors ------------------------------------------------
   Two glass panels floating on the dark ground, centred on the same
   axis as the wordmark rather than pinned to the viewport edges. The
   translucent fill sits over the drifting aura, so the light behind
   them moves through the glass. */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2.2vw, 1.75rem);
  width: 100%;
  max-width: min(1180px, 94vw);
  margin: 0 auto;
  padding: clamp(0.4rem, 1.4vh, 1.1rem) clamp(1rem, 3vw, 2rem);
}

.door {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.5rem, 3.6vh, 2.6rem) clamp(1.4rem, 3vw, 2.6rem);
  background:
    linear-gradient(158deg,
      rgba(236, 231, 221, 0.062),
      rgba(236, 231, 221, 0.018) 42%,
      rgba(236, 231, 221, 0.004));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid rgba(236, 231, 221, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -70px 60px -70px rgba(201, 169, 97, 0),
    0 20px 44px -26px rgba(0, 0, 0, 0.95);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease;
}

/* on hover the panel rises, the edge turns gold, and light gathers
   inside the bottom edge */
.door:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 169, 97, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -70px 60px -70px rgba(201, 169, 97, 0.5),
    0 30px 60px -28px rgba(0, 0, 0, 1),
    0 0 44px -14px rgba(201, 169, 97, 0.3);
}

/* gold corner brackets that close in when you approach the door */
.door::before,
.door::after {
  content: "";
  position: absolute;
  width: clamp(16px, 1.6vw, 24px);
  height: clamp(16px, 1.6vw, 24px);
  border: 1px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, top 0.45s ease, left 0.45s ease,
              bottom 0.45s ease, right 0.45s ease;
}

.door::before { top: 17px; left: 17px; border-right: 0; border-bottom: 0; }
.door::after { bottom: 17px; right: 17px; border-left: 0; border-top: 0; }

.door:hover::before { opacity: 0.8; top: 11px; left: 11px; }
.door:hover::after { opacity: 0.8; bottom: 11px; right: 11px; }

/* the markup line-breaks after the whisper; the centred column
   handles its own spacing */
.door br { display: none; }

.door h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0.5rem 0 0.45rem;
  color: var(--paper);
  transition: color 0.4s;
}

.door:hover h2 { color: var(--gold-hi); }

.door p {
  color: var(--paper-dim);
  max-width: 34ch;
  margin-inline: auto;
  font-size: 0.92rem;
  text-wrap: balance;   /* keeps the two centred lines evenly weighted */
}

.door .whisper { font-size: 0.85rem; margin-top: 0.5rem; }

.door .go {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.door .go::after {
  content: "→";
  margin-left: 0.5rem;
  display: inline-block;
  transition: transform 0.35s ease;
}

.door:hover .go::after { transform: translateX(6px); }

/* ---- the closing call to action ---- */
.stage-foot {
  padding: clamp(1.1rem, 2.8vh, 1.9rem) 1.5rem;
  text-align: center;
  border-top: 1px solid var(--line-faint);
  background: radial-gradient(70% 240% at 50% 100%,
              rgba(201, 169, 97, 0.09), transparent 70%);
}

.stage-foot .btn { padding: 0.9rem 2.4rem; }

/* landing footer is a single quiet line, inside the one-screen budget */
.landing footer {
  margin-top: 0;
  padding: 0.65rem clamp(1.4rem, 5vw, 3rem) 0.8rem;
  font-size: 0.74rem;
}

.landing footer .defn-line { font-size: 0.82rem; }
.landing footer .fine { font-size: 0.72rem; }

/* ============================================================
   INTERIOR PAGES
   ============================================================ */

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(8rem, 16vh, 11rem) clamp(1.4rem, 5vw, 3rem) 0;
}

.hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.9rem);
  max-width: 18ch;
  margin: 1.2rem 0 1.4rem;
}

.hero .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  color: var(--paper-dim);
  max-width: 44rem;
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
  opacity: 0.45;
  margin: clamp(3.5rem, 8vh, 5.5rem) 0;
  border: 0;
}

section.block { max-width: 46rem; }

.block h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.1rem;
  color: var(--paper);
}

.block p { color: var(--paper-dim); margin-bottom: 1.05rem; font-size: 1.02rem; }

.block p strong { color: var(--paper); font-weight: 500; }

.block p .gold { color: var(--gold-hi); }

/* quiet enumerations */
.quiet-list {
  list-style: none;
  margin: 1.4rem 0 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
}

.quiet-list li {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.quiet-list li:not(:last-child)::after {
  content: "·";
  color: var(--gold);
  margin-left: 0.9rem;
}

/* three steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
  counter-reset: step;
}

.steps div {
  background: var(--ink-2);
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  padding: 1.8rem 1.6rem;
  counter-increment: step;
}

.steps div::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 1rem;
}

.steps h3 {
  font-size: 1.2rem;
  margin-bottom: 0.55rem;
  color: var(--paper);
}

.steps p {
  font-size: 0.95rem;
  color: var(--paper-dim);
  margin: 0;
  line-height: 1.6;
}

/* CTA panel — the loudest thing on an interior page */
.cta {
  position: relative;
  margin: clamp(4rem, 10vh, 6.5rem) 0 0;
  border: 1px solid rgba(201, 169, 97, 0.38);
  background:
    radial-gradient(80% 130% at 50% 130%, rgba(201, 169, 97, 0.15), transparent 70%),
    var(--ink-2);
  padding: clamp(2.6rem, 6vw, 4rem);
  text-align: center;
}

/* a struck gold line across the top edge */
.cta::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.cta h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  margin-bottom: 0.7rem;
  color: var(--paper);
}

.cta p { color: var(--paper-dim); margin-bottom: 1.8rem; }

.cta .whisper { margin-top: 1.3rem; margin-bottom: 0; }

/* footer */
footer {
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: 2.4rem clamp(1.4rem, 5vw, 3rem) 2.8rem;
  border-top: 1px solid var(--line-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

footer .defn-line {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.92rem;
}

footer .fine { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; }

footer a { color: var(--paper-dim); transition: color 0.3s; }
footer a:hover { color: var(--gold-hi); }

/* ---------------------------------------------------------- faq */

.faq { max-width: 46rem; margin-top: 0.5rem; }

.faq h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.4rem;
  color: var(--paper);
}

.faq details {
  border-top: 1px solid var(--line-faint);
  padding: 1.25rem 0;
}

.faq details:last-child { border-bottom: 1px solid var(--line-faint); }

.faq summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--paper);
  line-height: 1.3;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  transition: color 0.3s;
}

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

.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq details[open] summary::after { content: "−"; }

.faq summary:hover { color: var(--gold-hi); }

.faq details p {
  margin-top: 0.85rem;
  color: var(--paper-dim);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------- article layout
   Used by the SEO resource pages. Reads like a blog post, not a landing page:
   smaller left-aligned title, flowing prose, plain subheads. Inherits the
   dark + gold brand palette so it still feels like Aretheum. */

.article {
  max-width: 44rem;             /* narrower than .page for readable line length */
  margin: 0 auto;
  padding: clamp(8rem, 14vh, 10rem) clamp(1.4rem, 5vw, 2.5rem) 0;
}

.article h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);   /* modest, not a stage headline */
  line-height: 1.2;
  max-width: 22ch;
  margin-bottom: 1.4rem;
}

.article .lede {
  font-family: var(--sans);                  /* plain body, not italic serif */
  font-style: normal;
  font-size: 1.05rem;
  color: var(--paper-dim);
  line-height: 1.7;
  max-width: 40rem;
  margin-bottom: 2.6rem;
}

.article .body p {
  color: var(--paper-dim);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

.article .body h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  color: var(--paper);
  margin: 2.4rem 0 1rem;
  line-height: 1.25;
}

.article .body h2:first-child { margin-top: 0; }

.article .body p strong { color: var(--paper); font-weight: 500; }

.article .body p .gold { color: var(--gold-hi); }

.article .body ul {           /* plain bullet lists where an article needs one */
  margin: 0 0 1.2rem 1.1rem;
  color: var(--paper-dim);
}

.article .body ul li {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 0.4rem;
}

.article .faq { margin-top: 2.6rem; }

/* per-article CTA panel — softer than the landing .cta, less "stage" energy */
.article .cta-soft {
  margin: 3rem 0 0;
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 130% at 50% 130%, rgba(201, 169, 97, 0.10), transparent 70%),
    var(--ink-2);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}

.article .cta-soft h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-bottom: 0.7rem;
  color: var(--paper);
}

.article .cta-soft p {
  color: var(--paper-dim);
  margin-bottom: 1.6rem;
  font-size: 0.98rem;
  line-height: 1.7;
}

.article .cta-soft .whisper {
  margin-top: 1.1rem;
  margin-bottom: 0;
}

/* ---------------------------------------------------------- resources hub */

.resource-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(8rem, 14vh, 10rem) clamp(1.4rem, 5vw, 3rem) 0;
}

.resource-grid .cat { margin-bottom: 3rem; }

.resource-grid .cat h2 {
  font-size: 1.3rem;
  color: var(--paper);
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-faint);
}

.resource-grid .cat ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem 1.5rem;
}

.resource-grid .cat a {
  font-size: 0.95rem;
  color: var(--paper-dim);
  line-height: 1.9;
  transition: color 0.25s;
}

.resource-grid .cat a:hover { color: var(--gold-hi); }

@media (max-width: 600px) {
  .resource-grid .cat ul { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- the team */

.mentors {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(8rem, 14vh, 10rem) clamp(1.4rem, 5vw, 3rem) 0;
}

.mentors > .kicker { display: block; margin-bottom: 1rem; }

.mentors > h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  max-width: 16ch;
  margin-bottom: 1.2rem;
}

.mentors > .lede {
  font-family: var(--sans);
  font-style: normal;
  font-size: 1.05rem;
  color: var(--paper-dim);
  line-height: 1.7;
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 6vh, 3.75rem);
}

.mentor-group { margin-bottom: clamp(2.5rem, 6vh, 3.75rem); }

/* group headings read as section labels, not as page headings */
.mentor-group > h2 {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* real gaps between cards instead of a 1px hairline mesh */
.mentor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
}

.mentor {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(236, 231, 221, 0.022), transparent 55%),
    var(--ink);
  border: 1px solid var(--line-faint);
  border-top-color: var(--line);   /* a gold cap on every card */
  padding: 1.45rem 1.35rem 1.35rem;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

.mentor:hover { border-color: var(--line); }

.mentor .name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--paper);
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.mentor .cref {
  font-family: var(--sans);
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-hi);
  margin-top: 0.5rem;
  line-height: 1.6;
}

.mentor .field {
  font-size: 0.92rem;
  color: var(--paper-dim);
  margin-top: 0.95rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line-faint);
  line-height: 1.55;
  flex: 1 1 auto;
}

.mentor .tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.94rem;
  color: var(--muted);
  margin-top: 0.7rem;
  line-height: 1.5;
}

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

/* scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; gap: 0.8rem; }
  .steps { grid-template-columns: 1fr; }
  .nav-links { gap: 1rem; }
  .nav-links a.plain { display: none; }  /* keep nav to mark + discord on phones */
  footer .seo-links { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }

  /* Two stacked doors cannot share a phone screen with the stage, so the
     goal here is "one screen plus a nudge", not a second full screen.
     The landing has no fixed nav, so the stage needs no top clearance. */
  .stage { padding: 1.6rem 1.25rem 0.85rem; gap: 0.9rem; }
  .defn .sense { line-height: 1.45; }
  .door { padding: 1.15rem 1.25rem; }

  /* 34ch is narrower than the column once the doors stack, so the cap was
     forcing an extra wrapped line per door. Let the text use the width. */
  .door p { max-width: none; text-wrap: initial; }
  .door .go { margin-top: 0.6rem; }

  .stage-foot { padding: 0.9rem 1.25rem; }
  .stage-foot .btn { padding: 0.8rem 1.6rem; font-size: 0.75rem; }

  .landing footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    line-height: 1.5;
    padding: 0.55rem 1rem 0.7rem;
  }
}

/* Short desktop windows (a 1280×600 browser, a laptop with the dock up).
   Everything vertical tightens so the landing still lands on one screen;
   when there is slack the stage absorbs it and nothing looks different. */
@media (min-width: 761px) and (max-height: 760px) {
  .stage { padding-top: 2.25rem; padding-bottom: 1rem; gap: 1rem; }
  .crest { --wm: clamp(1.9rem, 5.4vw, 3.1rem); }
  .door { padding-block: 1.15rem; }
  .stage-foot { padding-block: 0.85rem; }
  .stage-foot .btn { padding: 0.75rem 2rem; }
}

/* ---------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}