/* ============================================================
   YOUR STORY REVEALED — Homepage & shared editorial sections
   Tokens, buttons, nav, cards, and motion primitives live in main.css.
   Sections: hero · question · story · featured · join · explore ·
             book · greg · latest · support · page (start-here/support)
   ============================================================ */

/* ============================================================
   LIGHT EDITORIAL CONCEPT
   Warm paper opens the experience; dark sections retain cinematic rhythm.
   ============================================================ */
.home-light .hero {
  background:#f2eee6;
  color:var(--text-dark);
}
.home-light .hero::after {
  background:
    radial-gradient(62% 62% at 76% 24%,rgba(201,164,92,.16),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.28),transparent 38%);
}
.home-light .hero__rays { opacity:.2; mix-blend-mode:multiply; }
.home-light .hero__grain { opacity:.035; mix-blend-mode:multiply; }
.home-light .hero__ghost { -webkit-text-stroke:1px rgba(58,48,31,.12); }
.home-light .hero__l1 { color:#171511; }
.home-light .hero__l2 { color:#9a7535; }
.home-light .hero .eyebrow { color:#84652f; }
.home-light .hero .eyebrow::before { background:#a9823f; }
.home-light .hero__formats { color:#756f65; }
.home-light .hero__formats li:not(:last-child)::after { color:#9a7535; }
.home-light .hero__scroll { color:#756f65; }
.home-light .hero__scroll::after { background:linear-gradient(180deg,#9a7535,transparent); }
.home-light .hero .btn--ghost { color:#171511; border-color:rgba(23,21,17,.28); }
.home-light .hero .btn--ghost:hover { color:#171511; border-color:#9a7535; background:rgba(154,117,53,.06); }
.home-light .hero .btn--gold { box-shadow:0 18px 45px -22px rgba(86,62,20,.5); }

/* ---------- Shared ---------- */
.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; }

[data-enter] {
  opacity: 0;
  transform: translateY(26px);
  animation: enter 1.1s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes enter { to { opacity: 1; transform: none; } }

/* ============================================================
   1. HERO — typographic, cinematic dark
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink-0);
  padding: clamp(7rem, 10vh, 8rem) 0 clamp(1.8rem, 3vh, 2.5rem);
  isolation: isolate;
}
.hero__rays {
  position: absolute;
  top: -70%; left: 50%;
  width: 170vmax; height: 170vmax;
  transform: translateX(-50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg 14deg,   rgba(201,164,92,0.06) 20deg, transparent 26deg 40deg,
    rgba(201,164,92,0.045) 46deg, transparent 52deg 78deg,
    rgba(201,164,92,0.07) 84deg, transparent 90deg 118deg,
    rgba(201,164,92,0.05) 124deg, transparent 130deg 168deg,
    rgba(201,164,92,0.06) 174deg, transparent 180deg 220deg,
    rgba(201,164,92,0.045) 226deg, transparent 232deg 268deg,
    rgba(201,164,92,0.065) 274deg, transparent 280deg 318deg,
    rgba(201,164,92,0.05) 324deg, transparent 330deg 360deg
  );
  animation: rays 140s linear infinite;
  opacity: 0.5;
  pointer-events: none;
  z-index: -3;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 18% 100%, rgba(201,164,92,0.12), transparent 62%),
    radial-gradient(closest-side at 50% 38%, transparent 45%, var(--ink-0) 100%);
  pointer-events: none;
}
.hero__grain {
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.hero__ghost {
  position: absolute;
  right: -0.04em; bottom: -0.16em;
  z-index: -1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(9rem, 28vw, 30rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 164, 92, 0.16);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.hero__inner { position:relative; margin-block:auto; display:block; min-height:0; }
.hero__copy { min-width:0; }
.hero__copy { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(2rem,5vw,5rem) 0; }
.hero__title {
  margin: 1.35rem 0 1.65rem;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: .98;
  max-width: none;
}
.hero__title span { display: block; }
.hero__l1 { font-size:clamp(3.2rem,6.3vw,7rem); color:var(--text-hi); white-space:nowrap; }
.hero__l2 {
  font-size:clamp(3.2rem,6.3vw,7rem);
  font-style: italic;
  color: var(--gold);
  margin-top: .14em;
  padding-left: 0;
}
.hero__lede { max-width: 47ch; font-size:clamp(1rem,1.3vw,1.15rem); }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero-lead { position:relative; display:block; min-width:0; width:100%; aspect-ratio:4/3; color:inherit; overflow:hidden; cursor:pointer; background:var(--ink-2); border:1px solid rgba(201,164,92,.2); border-radius:2px; box-shadow:0 45px 100px -48px rgba(0,0,0,.95),0 0 70px -54px var(--gold-glow); transition:transform .7s var(--ease-out),border-color .7s var(--ease-out); }
.hero-lead:hover { transform:translateY(-5px); border-color:rgba(201,164,92,.5); }
.hero-lead:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.hero-lead__media { position:absolute; inset:0; overflow:hidden; }
.hero-lead__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,9,12,.96)); }
.hero-lead__media img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.hero-lead:hover .hero-lead__media img { transform:scale(1.035); }
.hero-lead__media .play-badge { z-index:2; }
.hero-lead__body { position:absolute; z-index:3; left:clamp(1.4rem,2.4vw,2.4rem); right:clamp(1.4rem,2.4vw,2.4rem); bottom:clamp(1.35rem,2.2vw,2.2rem); display:flex; flex-direction:column; align-items:flex-start; }
.hero-lead__meta { color:var(--gold); font-size:.68rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase; }
.hero-lead h2 { margin:.6rem 0 .9rem; font-size:clamp(1.35rem,1.7vw,1.8rem); line-height:1.12; max-width:25ch; text-shadow:0 3px 20px rgba(0,0,0,.8); }
.hero-lead__action { margin-top:auto; color:var(--gold-bright); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }

.hero__foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: clamp(2rem, 4vh, 3rem);
}
.hero__formats {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-lo);
}
.hero__formats li { display: flex; align-items: center; gap: 1.6rem; }
.hero__formats li:not(:last-child)::after { content: "✦"; color: var(--gold); font-size: 0.5rem; }
.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-lo);
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2.2s var(--ease-luxe) infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 900px) {
  .hero { min-height: 94svh; padding-top: 6.5rem; }
  .hero__inner { min-height:0; }
  .hero__copy { padding:2rem 0 3rem; }
  .hero__l2 { padding-left: 0; }
  .hero__l1 { white-space:normal; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__ghost { font-size: 40vw; right: -0.08em; bottom: -0.1em; }
  .hero__foot { flex-direction: column; align-items: flex-start; padding-top: 2.5rem; }
  .hero__scroll { display: none; }
  .hero__formats { font-size: 0.64rem; letter-spacing: 0.22em; gap: 0.5rem 1.1rem; }
  .hero__formats li { gap: 1.1rem; }
  .hero-lead { min-height:0; aspect-ratio:4/3; }
  .hero-lead__media { position:absolute; }
  .hero-lead__body { position:absolute; }
}
@media (min-width:901px) and (max-width:1250px) {
  .hero__l1,.hero__l2 { font-size:clamp(3.5rem,5.7vw,5.7rem); }
  .hero__l1 { white-space:normal; }
}

/* ============================================================
   2. WHAT STORY MUST BE TRUE? — parchment, typographic
   ============================================================ */
.question { padding-block: var(--section-pad); overflow: hidden; }
.question__title {
  margin-top: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.028em;
  font-size: clamp(3rem, 11.5vw, 11rem);
  color: var(--text-dark);
  text-align:center;
}

/* ---------- THINK STORY FIRST — the conceptual hinge ---------- */
.habit { position:relative; padding-block:var(--section-pad); overflow:hidden; background:var(--ink-0); isolation:isolate; }
.habit__ghost { position:absolute; inset:auto -0.04em -0.22em auto; z-index:-1; font-family:var(--font-display); font-style:italic; font-size:clamp(12rem,34vw,34rem); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(201,164,92,.1); }
.habit__intro { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; border-bottom:1px solid var(--hairline); padding-bottom:1.4rem; }
.habit__intro p { max-width:43ch; color:var(--text-mid); font-family:var(--font-display); font-style:italic; font-size:clamp(1.1rem,1.8vw,1.45rem); }
.habit__title { margin:clamp(2.5rem,5vw,4.5rem) 0; text-transform:uppercase; font-size:clamp(4rem,15vw,14rem); line-height:.72; letter-spacing:-.055em; }
.habit__title span { display:block; }
.habit__title span:nth-child(2) { color:var(--gold); padding-left:clamp(0rem,12vw,12rem); font-style:italic; }
.habit__title span:nth-child(3) { padding-left:clamp(0rem,24vw,24rem); }
.habit__lower { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,9rem); align-items:start; }
.habit__body { font-family:var(--font-display); font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.4; color:var(--text-hi); }
.habit__examples { border-top:1px solid var(--hairline); }
.habit__examples li { display:grid; grid-template-columns:.7fr 1.3fr; gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--hairline); }
.habit__examples span { color:var(--gold-bright); font-weight:600; }
.habit__examples p { color:var(--text-mid); }
@media(max-width:900px){.habit__intro,.habit__lower{display:grid;grid-template-columns:1fr}.habit__title span{padding-left:0!important}.habit__examples li{grid-template-columns:1fr;gap:.4rem}}

/* ---------- EDITORIAL FRANCHISES ---------- */
.lanes { padding-block:var(--section-pad); }
.lanes__head { max-width:760px; }
.lanes__head h2 { margin:1rem 0 1.3rem; }
.lane-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(3rem,6vw,5rem); background:var(--hairline); border:1px solid var(--hairline); }
.lane-grid>li { background:var(--ink-1); }
.lane { position:relative; display:flex; flex-direction:column; min-height:34rem; height:100%; padding:clamp(1.6rem,3vw,2.6rem); color:inherit; overflow:hidden; transition:background .5s var(--ease-out); }
.lane::after { content:""; position:absolute; inset:auto -25% -40% 10%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(201,164,92,.14),transparent 68%); opacity:0; transition:opacity .6s; }
.lane:hover { background:var(--ink-2); }
.lane:hover::after { opacity:1; }
.lane__num { font-family:var(--font-display); font-size:clamp(3rem,5vw,5rem); color:transparent; -webkit-text-stroke:1px rgba(201,164,92,.35); }
.lane__label { margin-top:auto; color:var(--gold); font-size:.68rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase; }
.lane h3 { margin:.8rem 0 1rem; font-size:clamp(1.7rem,2.5vw,2.4rem); line-height:1.05; }
.lane p { color:var(--text-mid); line-height:1.65; }
.lane__link { margin-top:2rem; color:var(--gold-bright); font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
@media(max-width:900px){.lane-grid{grid-template-columns:1fr}.lane{min-height:25rem}}

/* ---------- THE STORY MAP — primary conversion ---------- */
.story-map { position:relative; padding-block:var(--section-pad); overflow:hidden; background:var(--ink-0); }
.story-map__lines { position:absolute; inset:0; opacity:.32; background:linear-gradient(90deg,transparent 0 8%,rgba(201,164,92,.2) 8% 8.08%,transparent 8.08% 92%,rgba(201,164,92,.2) 92% 92.08%,transparent 92.08%),radial-gradient(ellipse at 50% 50%,rgba(201,164,92,.15),transparent 56%); }
.story-map__inner { position:relative; display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(3rem,8vw,8rem); align-items:center; }
.story-map__mark { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; color:var(--gold); font-family:var(--font-display); font-size:clamp(2rem,4vw,4rem); }
.story-map__mark i { height:1px; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); position:relative; }
.story-map__mark i::before,.story-map__mark i::after { content:""; position:absolute; top:50%; width:9px; height:9px; border:1px solid var(--gold); border-radius:50%; transform:translateY(-50%); background:var(--ink-0); }
.story-map__mark i::before{left:0}.story-map__mark i::after{right:0}
.story-map__copy h2 { margin:1rem 0 1.3rem; }
.story-map__copy .lede { max-width:57ch; }
.story-map__form { margin-top:2.2rem; max-width:620px; }
.story-map__note { margin-top:.8rem; color:var(--text-lo); font-size:.78rem; }
@media(max-width:900px){.story-map__inner{grid-template-columns:1fr}.story-map__mark{max-width:18rem}}
.question__title span { display: block; }
.question__title span:nth-child(2) { padding-left:0; }
.question__title span:nth-child(3) { padding-left:0; }
.question__title span:nth-child(4) {
  padding-left:0;
  font-style: italic; font-weight: 400;
  color: var(--gold-deep);
}
.question__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  margin-top: clamp(3rem, 6vw, 5.5rem);
  align-items: start;
}
.question__list { counter-reset: q; border-top: 1px solid var(--hairline-dark); }
.question__list li {
  counter-increment: q;
  display: flex; gap: 1.4rem; align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline-dark);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.25;
  color: var(--text-dark);
}
.question__list li::before {
  content: counter(q, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--gold-deep);
}
.question__intro {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.45;
  color: var(--text-dark) !important;
}
.question__copy p + p { margin-top: 1.2rem; max-width: 58ch; }
.question__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; }
.question__coming {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-dark-lo);
}
.question__pull {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  color: var(--text-dark) !important;
  max-width: 30ch;
}
@media (max-width: 900px) {
  .question__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .question__title span { padding-left: 0 !important; }
}

/* ============================================================
   3. THE STORY — editorial timeline
   ============================================================ */
.story { padding:var(--section-pad) 0 clamp(4rem,6vw,6rem); overflow:hidden; }
.story__head { max-width:980px; margin-inline:auto; text-align:center; }
.story__head .display-lg { margin-bottom: 1.3rem; }
.story__head .lede { max-width:68ch; margin-inline:auto; }
.story__head .eyebrow { justify-content:center; }

.storyline-h { position: relative; margin-top: clamp(3.5rem, 7vw, 6rem); }
.stages {
  --num-h: clamp(3.4rem, 5.2vw, 5rem);
  --node-y: calc(var(--num-h) + 1.1rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
}
.storyline-h__rule {
  position: absolute;
  left: 0; right: 0;
  top: var(--node-y, 5rem);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold) 82%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.2s var(--ease-luxe) 0.2s;
}
.storyline-h__rule.is-in { transform: none; }
.stage { position: relative; padding-top: calc(var(--num-h) + 3rem); padding-right: 0.4rem; }
.stage__num {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--num-h);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.stage__node {
  position: absolute; left: 0;
  top: var(--node-y);
  width: 11px; height: 11px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ink-1);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 5px var(--ink-1);
}
.stage--key .stage__node {
  background: var(--gold-bright);
  box-shadow: 0 0 0 5px var(--ink-1), 0 0 28px 4px var(--gold-glow);
}
.stage--here .stage__node { background:#fff; border-color:#fff; box-shadow:0 0 0 5px var(--ink-1),0 0 26px 5px rgba(255,255,255,.32); }
.stage__here { position:absolute; top:calc(var(--node-y) + 1rem); left:0; color:#fff; font-size:.58rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; }
.stage--here .stage__node::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(201,164,92,0.55);
  animation: herePulse 3.2s ease-out infinite;
}
@keyframes herePulse {
  0%   { transform: scale(0.55); opacity: 1; }
  100% { transform: scale(1.9);  opacity: 0; }
}
.stage__label {
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
  line-height: 1.3;
}
.stage--here .stage__label { color: var(--text-hi); }
.stage p { margin-top: 0.7rem; font-size: 0.93rem; line-height: 1.6; color: var(--text-mid); }
.story__cta { margin-top:clamp(2.5rem,4vw,4rem); }

@media (max-width: 1000px) {
  .stages { grid-template-columns: 1fr; gap: 2.4rem; padding-left: 2.4rem; --num-h: 2.8rem; }
  .storyline-h__rule {
    left: 5px; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--gold), var(--gold) 88%, transparent);
    transform: scaleY(0);
    transform-origin: top;
  }
  .stage { padding-top: 0; }
  .stage__num { position: static; display: block; margin-bottom: 0.5rem; }
  .stage__node { left: -2.4rem; top: 1rem; }
  .stage__here { top:.65rem; left:1rem; }
  .stage p { max-width: 52ch; }
}

/* ============================================================
   4. FEATURED — one dominant piece
   ============================================================ */
.featured { padding-block: var(--section-pad); background: var(--ink-0); }
.featured__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.feature {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink-2);
  cursor: pointer;
  isolation: isolate;
  color: inherit;
  transition: border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.feature:hover { border-color: rgba(201,164,92,0.35); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); }
.feature:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.feature__media { position: relative; aspect-ratio: 21 / 9; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.feature:hover .feature__media img { transform: scale(1.035); }
.feature__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.62) 42%, rgba(8,9,12,0.08) 75%),
    linear-gradient(180deg, transparent 45%, rgba(8,9,12,0.85));
}
.feature .play-badge { left: 50%; }
.feature__body {
  position: absolute; z-index: 3;
  left: clamp(1.4rem, 4vw, 3.6rem); right: clamp(1.4rem, 4vw, 3.6rem); bottom: clamp(1.4rem, 4vw, 3.2rem);
  max-width: 36rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
}
.feature__meta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.feature__meta b { font-weight: 600; color: var(--gold-bright); }
.feature__title { font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.1; }
.feature__desc { font-size: 0.98rem; color: var(--text-mid); max-width: 48ch; }
.feature__body .btn { margin-top: 0.6rem; }
@media (max-width: 900px) {
  .feature__media { aspect-ratio: 16 / 10; }
  .feature__media::after { background: linear-gradient(180deg, transparent 35%, var(--ink-2) 100%); }
  .feature .play-badge { left: 0; }
  .feature__body { position: static; padding: 0 1.4rem 1.8rem; margin-top: -1.2rem; max-width: none; }
}

/* ============================================================
   5. JOIN — quiet, centered
   ============================================================ */
.join { padding-block: var(--section-pad); background: var(--ink-0); position: relative; overflow: hidden; }
.join::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(55% 45% at 50% 105%, rgba(201,164,92,0.12), transparent 70%);
  pointer-events: none;
}
.join__inner { position: relative; max-width: 700px; text-align: center; }
.join__inner .eyebrow { margin-bottom: 1.2rem; }
.join__inner .lede { margin: 1.4rem auto 2.4rem; }
.join__form { max-width: 560px; margin-inline: auto; }
.join__form .field { padding-block: 1.15rem; font-size: 1.02rem; }
.join__note { margin-top: 1.1rem; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-lo); }

/* ============================================================
   6. EXPLORE — typographic index
   ============================================================ */
.explore { padding-block: var(--section-pad); background: var(--ink-1); }
.explore .section-head { max-width: none; }
.paths { border-top: 1px solid var(--hairline); }
.path {
  display: grid;
  grid-template-columns: 3.6rem 1fr 1.35fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.3rem) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.55s var(--ease-out);
}
.path:hover { padding-left: 0.8rem; }
.path__num { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em; color: var(--text-lo); }
.path__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1; letter-spacing: -0.015em;
  transition: color 0.4s;
}
.path:hover .path__name { color: var(--gold-bright); }
.path__desc { font-size: 0.98rem; color: var(--text-mid); max-width: 46ch; }
.path__arr { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); transition: transform 0.5s var(--ease-out); }
.path:hover .path__arr { transform: translateX(8px); }
@media (max-width: 900px) {
  .path {
    grid-template-columns: 2.4rem 1fr auto;
    grid-template-areas: "num name arr" "num desc arr";
    row-gap: 0.4rem;
  }
  .path:hover { padding-left: 0; }
  .path__num { grid-area: num; }
  .path__name { grid-area: name; }
  .path__desc { grid-area: desc; }
  .path__arr { grid-area: arr; }
}

/* ============================================================
   7. THE BOOK — parchment
   ============================================================ */
.book { padding-block: var(--section-pad); overflow: hidden; }
.book__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.book__art { display: grid; place-items: center; }
.book__art img {
  width: min(360px, 78vw); height: auto;
  border-radius: 8px;
  box-shadow: 0 50px 100px -30px rgba(23,21,18,0.5), 0 0 0 1px rgba(23,21,18,0.06);
  transform: rotate(-3deg);
  transition: transform 0.9s var(--ease-luxe);
}
.book__art:hover img { transform: rotate(0deg) scale(1.02); }
.book__copy .display-lg { margin-top: 1rem; }
.book__title { margin-top: 1.6rem; font-family: var(--font-display); color: var(--text-dark) !important; }
.book__title b { display: block; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.9rem; }
.book__title span { display: block; font-style: italic; font-size: 1.1rem; color: var(--text-dark-lo); margin-top: 0.2rem; }
.book__body { margin-top: 1.2rem; max-width: 54ch; }
.book__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2rem; }
.book__rating { margin-top: 1.6rem; display: flex; align-items: center; gap: 0.9rem; font-size: 0.86rem; }
.book__rating .stars { color: var(--gold-deep); letter-spacing: 0.2em; font-size: 0.85rem; }
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline-dark);
}
.reviews blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.06rem; line-height: 1.55;
  color: var(--text-dark) !important;
}
.reviews cite {
  display: block; margin-top: 1rem;
  font-style: normal; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.reviews cite span { color: var(--text-dark-lo); font-weight: 500; letter-spacing: 0.04em; text-transform: none; margin-left: 0.6rem; }
@media (max-width: 900px) {
  .book__grid { grid-template-columns: 1fr; }
  .book__art { order: -1; }
  .reviews { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   8. MEET GREG — image-led
   ============================================================ */
.greg { padding-block: var(--section-pad); background: var(--ink-0); overflow: hidden; }
.greg__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: center;
}
.greg__photo {
  position: relative;
  width: 100%; max-width: 520px;
  aspect-ratio: 4 / 5;
  justify-self: end;
}
.greg__photo::before {
  content: "";
  position: absolute; inset: 0;
  transform: translate(18px, 18px);
  border: 1px solid rgba(201,164,92,0.35);
  border-radius: 4px;
  pointer-events: none;
}
.greg__photo picture, .greg__photo img { position: relative; z-index: 1; width: 100%; height: 100%; }
.greg__photo img { object-fit: cover; object-position: 50% 15%; border-radius: 4px; filter: saturate(0.82) contrast(1.06); }
.greg__photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: 4px;
  background: linear-gradient(180deg, transparent 55%, rgba(8,9,12,0.7));
  pointer-events: none;
}
.greg__copy .display-lg { margin-top: 1rem; }
.greg .roles {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  margin-top: 1.4rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-lo);
}
.greg .roles li { display: flex; align-items: center; gap: 1.4rem; }
.greg .roles li:not(:last-child)::after { content: "✦"; color: var(--gold); font-size: 0.5rem; }
.greg__copy p { color: var(--text-mid); max-width: 56ch; }
.greg__copy p:first-of-type {
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: 1.28rem; line-height: 1.45;
  color: var(--text-hi);
}
.greg__copy p + p { margin-top: 1.1rem; }
.greg__copy .btn { margin-top: 2.2rem; }
@media (max-width: 900px) {
  .greg__grid { grid-template-columns: 1fr; }
  .greg__photo { max-width: 420px; justify-self: start; aspect-ratio: 4 / 4.6; }
}

/* ============================================================
   9. LATEST — three current pieces
   ============================================================ */
.latest { padding-block: var(--section-pad); background: var(--ink-1); }
.latest__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.latest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
.item__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--ink-2);
  cursor: pointer;
}
.item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.item:hover .item__media img { transform: scale(1.05); }
.item:hover .play-badge span { transform: scale(1.12); background: rgba(201,164,92,0.85); color: #14100a; box-shadow: 0 0 50px var(--gold-glow); }
.item__body { padding-top: 1.2rem; }
.item__title { margin-top: 0.6rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.28; font-weight: 500; }
.item__title a { transition: color 0.3s; }
.item:hover .item__title a { color: var(--gold-bright); }
.item__meta {
  margin-top: 0.8rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.82rem; color: var(--text-lo);
}
.item__meta .link-line { font-size: 0.84rem; }
.latest__more { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) {
  .latest__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .item { display: grid; grid-template-columns: 118px 1fr; gap: 1.1rem; align-items: center; }
  .item__media { aspect-ratio: 1; border-radius: 12px; }
  .item__body { padding-top: 0; }
  .item__title { font-size: 1.08rem; }
  .item .play-badge span { width: 44px; height: 44px; font-size: 1rem; padding-left: 3px; }
}

/* ============================================================
   10. SUPPORT — quiet band
   ============================================================ */
.support { padding-block: clamp(4rem, 8vw, 7rem); background: var(--parch-1); }
.support__inner { max-width: 640px; text-align: center; }
.support__inner .display-md { margin-top: 1.2rem; }
.support__inner p { margin: 1.2rem auto 2rem; max-width: 54ch; }

/* ============================================================
   INTERIOR PAGES sharing these sections (Start Here, Support)
   ============================================================ */
.steps-intro { max-width: 760px; }
.step-eyebrow { display: inline-flex; align-items: center; gap: 1rem; }
.step-eyebrow::before { display: none; }
.step-eyebrow .n { font-family: var(--font-display); font-weight: 300; font-size: 1.6rem; letter-spacing: 0; color: var(--gold-bright); line-height: 1; }

.intro-read { padding-block: var(--section-pad); }
.intro-read__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.intro-read blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.35;
  color: var(--text-dark) !important;
}
.intro-read blockquote em { font-style: italic; color: var(--gold-deep); }
.intro-read figcaption { margin-top: 1.2rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); }
@media (max-width: 900px) { .intro-read__grid { grid-template-columns: 1fr; } }

.listen-band { padding-block: var(--section-pad); background: var(--ink-0); }
.listen-band__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.listen-band__art { width: clamp(140px, 18vw, 220px); aspect-ratio: 1; border-radius: 18px; object-fit: cover; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8); }
.listen-band .platforms { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
@media (max-width: 700px) { .listen-band__grid { grid-template-columns: 1fr; } }

.coming-band { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--ink-1); border-block: 1px solid var(--hairline); }
.coming-band__inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.coming-band h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: -0.01em; }
.coming-band h2 em { font-style: italic; text-transform: none; color: var(--gold); font-weight: 400; }
.coming-band p { margin-top: 0.7rem; color: var(--text-mid); max-width: 60ch; }
@media (max-width: 800px) { .coming-band__inner { grid-template-columns: 1fr; } }

.funds { border-top: 1px solid var(--hairline-dark); margin-top: clamp(2rem, 4vw, 3rem); }
.funds li { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--hairline-dark); }
.funds b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--text-dark); }
.funds span { color: var(--text-dark-lo); }
@media (max-width: 700px) { .funds li { grid-template-columns: 1fr; gap: 0.4rem; } }

.giving-hold {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px dashed var(--hairline-dark);
  border-radius: var(--radius);
  color: var(--text-dark-lo);
  font-size: 0.98rem;
  max-width: 62ch;
}
.giving-hold .tag { display: block; margin-bottom: 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }

/* HOME LIGHT — complete page palette; last for cascade authority. */
.home-light { background:#f1ede5; color:#24211c; }
.home-light main { background:#f1ede5; }
.home-light .hero { background:#f4f0e8; color:#24211c; }
.home-light .hero::after { background:radial-gradient(62% 62% at 76% 24%,rgba(181,139,66,.16),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.5),transparent 42%); }
.home-light .hero__l1 { color:#171511; }
.home-light .hero__l2 { color:#956f2f; }
.home-light .story,.home-light .habit,.home-light .lanes,.home-light .latest,.home-light .greg { background:#f1ede5; color:#24211c; }
.home-light .question,.home-light .book,.home-light .support { background:#faf7f0; }
.home-light .story { border-top:1px solid rgba(38,31,21,.12); }
.home-light .story .display-lg,.home-light .habit__title,.home-light .lanes .display-lg,.home-light .latest .display-md,.home-light .greg .display-lg { color:#171511; }
.home-light .story .lede,.home-light .stage p,.home-light .habit__intro p,.home-light .habit__examples p,.home-light .lanes .lede,.home-light .lane p,.home-light .greg__copy p { color:#625d54; }
.home-light .eyebrow { color:#89682f; }
.home-light .eyebrow::before { background:#a47d39; }
.home-light .stage__node { background:#f1ede5; box-shadow:0 0 0 5px #f1ede5; }
.home-light .stage--key .stage__node { background:#a47d39; box-shadow:0 0 0 5px #f1ede5,0 0 24px rgba(164,125,57,.3); }
.home-light .stage--here .stage__node { background:#171511; border-color:#171511; box-shadow:0 0 0 5px #f1ede5,0 0 22px rgba(23,21,17,.2); }
.home-light .stage__here { color:#171511; }
.home-light .stage--here .stage__label { color:#171511; }
.home-light .stage--here .stage__node::after { border-color:rgba(23,21,17,.35); }
.home-light .storyline-h__rule { background:linear-gradient(90deg,#a47d39,#a47d39 82%,transparent); }
.home-light .story .btn--ghost { color:#24211c; border-color:rgba(38,31,21,.28); }
.home-light .story .btn--ghost:hover { color:#24211c; border-color:#9a7535; background:rgba(154,117,53,.06); }
.home-light .habit { border-block:1px solid rgba(38,31,21,.12); }
.home-light .habit__ghost { -webkit-text-stroke:1px rgba(60,48,29,.09); }
.home-light .habit__intro,.home-light .habit__examples,.home-light .habit__examples li { border-color:rgba(38,31,21,.16); }
.home-light .habit__body { color:#24211c; }
.home-light .habit__examples span { color:#8e692c; }
.home-light .lane-grid { background:rgba(38,31,21,.16); border-color:rgba(38,31,21,.16); }
.home-light .lane-grid>li { background:#f8f4ec; }
.home-light .lane { color:#24211c; }
.home-light .lane:hover { background:#fffdf8; }
.home-light .lane__num { -webkit-text-stroke:1px rgba(142,105,44,.4); }
.home-light .lane__label,.home-light .lane__link { color:#89682f; }
.home-light .latest { border-top:1px solid rgba(38,31,21,.12); }
.home-light .item { background:#f8f4ec; border-color:rgba(38,31,21,.14); }
.home-light .item__title,.home-light .item__title a { color:#24211c; }
.home-light .item__meta { color:#746e64; }
.home-light .latest .link-line { color:#5f584e!important; }
.home-light .greg { border-top:1px solid rgba(38,31,21,.12); }
.home-light .greg .roles { color:#89682f; }
.home-light .greg .btn--ghost { color:#24211c; border-color:rgba(38,31,21,.26); }
/* One dark conversion moment gives the page rhythm and focus. */
.home-light .story-map { background:#171713; color:var(--text-hi); }
.home-light .story-map .display-lg { color:var(--text-hi); }
.home-light .story-map .lede { color:var(--text-mid); }
.home-light .story-map__mark i::before,.home-light .story-map__mark i::after { background:#171713; }

/* Full-width editorial alignment: avoid orphaned copy and empty right fields. */
.question > .container-wide > .eyebrow { justify-content:center; }
.question__title { max-width:16ch; margin-inline:auto; }
.question__pull { max-width:42ch; margin-inline:auto; text-align:center; }
.lanes__head { max-width:980px; margin-inline:auto; text-align:center; }
.lanes__head .eyebrow { justify-content:center; }
.lanes__head .lede { max-width:62ch; margin-inline:auto; }
.latest__head { justify-content:center; text-align:center; }
.latest__head .eyebrow { justify-content:center; }
.latest__head .eyebrow::after { content:""; width:3rem; height:1px; background:var(--gold); }
.latest__more { justify-content:center; }

@media (max-width:900px) {
  .question__title { max-width:none; }
  .question__pull { text-align:left; }
  .lanes__head,.latest__head { text-align:left; }
  .lanes__head .eyebrow,.question > .container-wide > .eyebrow { justify-content:flex-start; }
  .latest__head .eyebrow { justify-content:center; }
  .latest__more { justify-content:flex-start; }
}

/* Light-page cadence: generous, never vacant. */
@media (min-width:901px) {
  .home-light .story,
  .home-light .question,
  .home-light .book,
  .home-light .lanes,
  .home-light .latest,
  .home-light .story-map,
  .home-light .greg { padding-block:clamp(4.75rem,6vw,6.5rem); }
  .home-light .support { padding-block:clamp(3.75rem,5vw,5rem); }
  .home-light .storyline-h { margin-top:clamp(2.75rem,4vw,4rem); }
  .home-light .story__cta { margin-top:2.75rem; }
  .home-light .question__title { margin-top:1.1rem; font-size:clamp(4.5rem,8.5vw,8.5rem); line-height:.84; }
  .home-light .question__grid { margin-top:3.25rem; }
  .home-light .question__pull { margin-top:3.25rem; }
  .home-light .lane-grid { margin-top:2.75rem; }
  .home-light .lane { min-height:27rem; }
  .home-light .latest__head { margin-bottom:1.5rem; }
  .home-light .latest__grid { padding-top:1.25rem; }
  .home-light .latest__more { margin-top:2rem; }
  .home-light .book__grid,
  .home-light .greg__grid { gap:clamp(3rem,6vw,6rem); }
}

/* Consistent premium eyebrow signature: rule · label · rule. */
.home-light main .eyebrow::before,
.home-light main .eyebrow::after {
  content:"";
  display:block;
  flex:0 0 3rem;
  width:3rem;
  height:1px;
  background:#a47d39;
}

/* Complete mobile composition pass. */
@media (max-width:700px) {
  .home-light .container,
  .home-light .container-wide { width:min(100% - 2rem,var(--container)); }

  .home-light .hero { min-height:auto; padding:6.25rem 0 2.5rem; }
  .home-light .hero__copy { padding:2.5rem 0 2rem; }
  .home-light .hero__title { margin:1rem 0 1.3rem; line-height:.98; }
  .home-light .hero__l1,
  .home-light .hero__l2 { font-size:clamp(2.65rem,12vw,4rem); }
  .home-light .hero__actions { width:100%; margin-top:1.6rem; gap:.75rem; }
  .home-light .hero__actions .btn { width:100%; justify-content:center; }
  .home-light .hero__foot { align-items:center; padding-top:1.5rem; }
  .home-light .hero__formats { justify-content:center; gap:.5rem .9rem; }
  .home-light .hero__formats li { gap:.9rem; }

  .home-light .story,
  .home-light .question,
  .home-light .book,
  .home-light .lanes,
  .home-light .latest,
  .home-light .story-map,
  .home-light .greg { padding-block:4rem; }
  .home-light .support { padding-block:3.5rem; }

  .home-light .display-lg { font-size:clamp(2.35rem,11vw,3.4rem); }
  .home-light .display-md { font-size:clamp(2rem,9vw,2.8rem); }
  .home-light .story__head { text-align:left; }
  .home-light .story__head .eyebrow { justify-content:flex-start; }
  .home-light .story__head .lede { font-size:1rem; }
  .home-light .storyline-h { margin-top:2.5rem; }
  .home-light .stages { gap:2rem; padding-left:2rem; }
  .home-light .stage__node { left:-2rem; }
  .home-light .stage__here { left:.8rem; }
  .home-light .story__cta { margin-top:2.5rem; }
  .home-light .story__cta .btn { width:100%; justify-content:center; }

  .home-light .question__title { font-size:clamp(3rem,16vw,5rem); line-height:.82; }
  .home-light .question__grid { margin-top:2.5rem; gap:2rem; }
  .home-light .question__list li { padding:1rem 0; font-size:1.2rem; }
  .home-light .question__actions .btn { width:100%; justify-content:center; }
  .home-light .question__pull { margin-top:2.75rem; padding-top:1.5rem; }

  .home-light .book__grid { gap:2.75rem; }
  .home-light .book__art img { width:min(72vw,290px); }
  .home-light .book__copy { text-align:left; }
  .home-light .book__actions { gap:1rem; }
  .home-light .book__actions .btn { width:100%; justify-content:center; }
  .home-light .reviews { grid-template-columns:1fr; }

  .home-light .lane-grid { margin-top:2.25rem; }
  .home-light .lane { min-height:21rem; padding:1.5rem; }
  .home-light .lane h3 { font-size:1.8rem; }

  .home-light .latest__head { text-align:center; margin-bottom:1.5rem; }
  .home-light .latest__head .eyebrow { justify-content:center; }
  .home-light .latest__grid { padding-top:1rem; }
  .home-light .item { grid-template-columns:105px minmax(0,1fr); gap:1rem; }
  .home-light .item__title { font-size:1rem; }
  .home-light .item__meta { align-items:flex-start; flex-direction:column; gap:.35rem; }
  .home-light .latest__more { justify-content:center; gap:1rem 1.5rem; }

  .home-light .story-map__inner { gap:2.5rem; }
  .home-light .story-map__form .field-row { display:grid; grid-template-columns:1fr; }
  .home-light .story-map__form .btn { width:100%; justify-content:center; }

  .home-light .greg__grid { gap:2.75rem; }
  .home-light .greg__photo { width:min(82vw,360px); justify-self:center; }
  .home-light .greg__copy .btn { width:100%; justify-content:center; }
  .home-light .greg .roles { gap:.45rem 1rem; }
}