/* =========================================================================
   Johns Hopkins Polyclinic - atmosphere layer
   Everything that makes the site feel like a place rather than a document:
   texture, illustration panels, editorial blocks and motion.
   Loaded after site.css, which holds the tokens this file uses.
   ========================================================================= */

/* ----------------------------------------------------------- 1. TEXTURE */

/* A mashrabiya-inspired lattice, dialled almost to invisible. It reads as
   paper grain until you look for it, which is the point. */
.textured { position: relative; isolation: isolate; }
.textured::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("/assets/img/art/tile-mashrabiya.svg");
  background-size: 108px 108px;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}
.band.textured::before { opacity: 0.09; filter: invert(1); }

/* Slow-drifting light behind a section. */
.aurora { position: relative; isolation: isolate; overflow: clip; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(10px); pointer-events: none;
}
.aurora::before {
  inline-size: 46vw; block-size: 46vw; max-inline-size: 620px; max-block-size: 620px;
  inset-block-start: -18%; inset-inline-end: -12%;
  background: radial-gradient(circle at 40% 40%, rgba(28, 94, 166,0.16), rgba(28, 94, 166,0) 66%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.aurora::after {
  inline-size: 38vw; block-size: 38vw; max-inline-size: 480px; max-block-size: 480px;
  inset-block-end: -16%; inset-inline-start: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(201,162,74,0.18), rgba(201,162,74,0) 68%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(-4%, 6%, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(5%, -7%, 0) scale(1.12); } }

/* Hairline rule with a small gold node, used between major sections. */
.rule {
  display: flex; align-items: center; gap: 1rem;
  color: var(--gold-500); margin-block: 0;
}
.rule::before, .rule::after {
  content: ""; block-size: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.rule__node {
  inline-size: 9px; block-size: 9px; flex: none;
  background: var(--gold-500); rotate: 45deg; border-radius: 2px;
}

/* --------------------------------------------------- 2. SCROLL PROGRESS */

.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 130;
  block-size: 3px; background: transparent; pointer-events: none;
}
.progress__bar {
  block-size: 100%; inline-size: 0;
  background: linear-gradient(90deg, var(--brand-600), var(--gold-500));
  transition: inline-size 0.12s linear;
}

/* ------------------------------------------------------- 3. ART PANELS */

/* The frame every illustration sits in. Real photography drops straight in:
   swap the <img> and keep the figure. */
.plate {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--brand-900);
  box-shadow: var(--shadow-lg);
  margin: 0;
  isolation: isolate;
}
.plate img, .plate > svg {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; display: block;
  transition: transform 1.1s var(--ease);
}
.plate--tall { aspect-ratio: 4 / 4.6; }
.plate--wide { aspect-ratio: 16 / 10; }

/* The map is an iframe, not an image, so it cannot use .plate: .plate sizes its
   image child to fill a 16/10 box, and an iframe ignores that, leaving the
   plate's navy ground showing underneath. This frame sizes the iframe itself. */
.map-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  line-height: 0;
  margin-block-start: 1.4rem;
}
.map-frame iframe {
  display: block;
  inline-size: 100%;
  block-size: clamp(320px, 46vw, 520px);
  border: 0;
}
.plate--card { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); box-shadow: none; }
.plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 27, 56,0.5));
}
.plate__caption {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 1;
  padding: 1.1rem 1.4rem;
  color: rgba(255,255,255,0.92);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.plate__badge {
  position: absolute; inset-block-start: 1.1rem; inset-inline-start: 1.1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  background: rgba(6, 27, 56,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 230, 174,0.35);
  color: #FFE6AE; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
a:hover > .plate img, .card--link:hover .plate img { transform: scale(1.05); }

/* Glass information card floated over or beside a plate. */
.glass {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.9rem 1.15rem;
  display: grid; gap: 0.15rem;
  max-inline-size: 250px;
  animation: bob 9s ease-in-out infinite alternate;
}
.glass strong { font-size: 0.95rem; }
.glass span { font-size: 0.78rem; color: var(--muted); }
.glass--tl { inset-block-start: 7%; inset-inline-start: -7%; }
.glass--br { inset-block-end: 8%; inset-inline-end: -6%; animation-delay: -4s; }
.glass .stars { color: var(--gold-500); letter-spacing: 0.1em; font-size: 0.9rem; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@media (max-width: 860px) { .glass { display: none; } }

/* -------------------------------------------------- 4. FEATURE SECTIONS */

/* Alternating art / copy rows. */
.feature { display: grid; gap: clamp(1.8rem, 1rem + 3.4vw, 3.6rem); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__art { order: 2; }
}
.feature + .feature { margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); }
.feature__copy > * + * { margin-block-start: 1rem; }

/* ---------------------------------------------------- 5. SERVICE CARDS */

.showcase { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .showcase--3 { grid-template-columns: repeat(3, 1fr); } }

.service {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.service:hover, .service:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-100);
  color: inherit;
}
.service__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-900); }
.service__art img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.service:hover .service__art img { transform: scale(1.06); }
.service__body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.service__body h3 { font-size: var(--step-1); }
.service__body p { color: var(--muted); font-size: 0.95rem; }
.service__foot {
  margin-block-start: auto; padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.service__price { font-family: var(--font-subhead); font-size: 1.02rem; color: var(--brand-700); font-weight: 600; }
.service__go { font-family: var(--font-subhead); font-weight: 600; font-size: 0.9rem; color: var(--brand-700); display: inline-flex; align-items: center; gap: 0.4rem; }
.service__go::after { content: "→"; transition: transform 0.22s var(--ease); }
[dir="rtl"] .service__go::after { content: "←"; }
.service:hover .service__go::after { transform: translateX(4px); }

/* Small factual chips: duration, sessions, downtime. */
.specs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.spec {
  font-family: var(--font-subhead);
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.76rem; font-weight: 600; color: var(--ink-2);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: 999px; padding: 0.3rem 0.7rem;
}
.spec svg { inline-size: 13px; block-size: 13px; color: var(--brand-600); flex: none; }

/* ------------------------------------------------- 6. AT A GLANCE STRIP */

.glance {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 560px) { .glance { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .glance { grid-template-columns: repeat(4, 1fr); } }
.glance__item { background: var(--surface); padding: 1.3rem 1.4rem; display: grid; gap: 0.25rem; }
.glance__label {
  font-family: var(--font-subhead);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold-600);
}
.glance__value { font-family: var(--font-subhead); font-weight: 600; font-size: var(--step-1); color: var(--ink); line-height: 1.2; }
.glance__note { font-size: 0.82rem; color: var(--muted); }

/* ------------------------------------------------------- 7. STAT BLOCKS */

.stats { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { text-align: center; display: grid; gap: 0.3rem; }
.stat__num {
  font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1; color: var(--brand-700); font-variant-numeric: tabular-nums;
}
.band .stat__num { color: #FFE6AE; }
.stat__label { font-size: 0.9rem; color: var(--muted); }
.band .stat__label { color: rgba(233, 241, 250,0.82); }

/* ---------------------------------------------------------- 8. MARQUEE */

.ticker {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; inline-size: max-content; gap: 3rem;
  animation: slide 46s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.ticker__item::before {
  content: ""; inline-size: 6px; block-size: 6px; rotate: 45deg;
  background: var(--gold-500); flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }
[dir="rtl"] .ticker__track { animation-name: slide-rtl; }
@keyframes slide-rtl { to { transform: translateX(50%); } }

/* ------------------------------------------------------ 9. PULL QUOTES */

.pull {
  border-inline-start: 3px solid var(--gold-500);
  padding-inline-start: clamp(1.2rem, 0.8rem + 1.4vw, 2rem);
  margin-block: clamp(1.6rem, 1rem + 2vw, 2.6rem);
}
.pull p {
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: 1.3; color: var(--ink); text-wrap: balance;
}
.pull cite {
  display: block; margin-block-start: 0.8rem; font-style: normal;
  font-size: var(--step--1); font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em;
}
.band .pull p { color: #fff; }
.band .pull cite { color: var(--gold-200); }

/* -------------------------------------------- 10. NUMBERED PROCESS RAIL */

.rail { counter-reset: rail; display: grid; gap: 0; }
.rail__step {
  counter-increment: rail;
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  padding-block: 1.5rem;
  position: relative;
}
.rail__step + .rail__step { border-block-start: 1px solid var(--line-soft); }
.rail__dot {
  inline-size: 46px; block-size: 46px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  font-family: var(--font-subhead); font-size: 1rem; font-weight: 700; color: var(--brand-700);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.rail__dot::before { content: counter(rail, decimal-leading-zero); }
.rail__step:hover .rail__dot { background: var(--brand-700); color: #fff; transform: scale(1.06); }
.rail__body h3 { font-size: var(--step-1); margin-block-end: 0.3rem; }
.rail__body p { color: var(--muted); font-size: 0.96rem; }
.band .rail__step + .rail__step { border-block-start-color: rgba(255,255,255,0.14); }
.band .rail__dot { background: rgba(255,255,255,0.08); border-color: rgba(255, 230, 174,0.3); color: #FFE6AE; }
.band .rail__body p { color: rgba(233, 241, 250,0.82); }

/* ------------------------------------------------- 11. STICKY BOOK BAR */

.bookbar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 125;
  display: none; gap: 0.6rem; padding: 0.7rem 0.9rem;
  padding-block-end: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(251,248,243,0.94);
  backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.bookbar.is-up { transform: translateY(0); }
.bookbar .btn { flex: 1; padding-block: 0.85rem; }
@media (max-width: 720px) {
  .bookbar { display: flex; }
  .wa-float { inset-block-end: 76px; }
}

/* ------------------------------------------------------ 12. LINK CARDS */

.linkgrid { display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .linkgrid { grid-template-columns: repeat(2, 1fr); } }
.linkrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), background 0.22s var(--ease);
}
.linkrow:hover { border-color: var(--brand-100); background: var(--brand-50); transform: translateX(3px); color: var(--ink); }
[dir="rtl"] .linkrow:hover { transform: translateX(-3px); }
.linkrow strong { font-weight: 600; font-size: 0.98rem; }
.linkrow span { font-size: 0.82rem; color: var(--muted); display: block; }
.linkrow::after { content: "→"; color: var(--brand-700); flex: none; }
[dir="rtl"] .linkrow::after { content: "←"; }

/* --------------------------------------------------------- 13. MOTION */

/* Directional reveals, on top of the base fade in site.css. */
.has-js [data-reveal="left"] { transform: translateX(-26px); }
.has-js [data-reveal="right"] { transform: translateX(26px); }
.has-js [data-reveal="scale"] { transform: scale(0.965); }
.has-js [data-reveal].is-in { transform: none; }

/* Children stagger themselves, so markup stays clean. */
.has-js [data-stagger] > * { opacity: 0; transform: translateY(20px); }
.has-js [data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.has-js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0.04s; }
.has-js [data-stagger].is-in > *:nth-child(2) { transition-delay: 0.12s; }
.has-js [data-stagger].is-in > *:nth-child(3) { transition-delay: 0.2s; }
.has-js [data-stagger].is-in > *:nth-child(4) { transition-delay: 0.28s; }
.has-js [data-stagger].is-in > *:nth-child(5) { transition-delay: 0.36s; }
.has-js [data-stagger].is-in > *:nth-child(6) { transition-delay: 0.44s; }
.has-js [data-stagger].is-in > *:nth-child(n+7) { transition-delay: 0.52s; }

/* Depth on scroll. The script writes --shift; CSS decides what to do with it. */
.has-js [data-parallax] { will-change: transform; transform: translate3d(0, var(--shift, 0px), 0); }

/* Headline that wipes in word by word. */
/* The mask is overflow:hidden, and the heading line-height (1.12) is shorter
   than the font's descenders - so g, y and p get their tails cut off. Pad the
   mask to make room and pull the same amount back off the margin, which keeps
   the line spacing identical. The slide then has further to travel, hence 128%
   rather than 105%, or the top of each word would peek below the mask. */
.has-js .reveal-words > span {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block-end: 0.18em;
  margin-block-end: -0.18em;
}
.has-js .reveal-words > span > i {
  display: inline-block; font-style: inherit;
  transform: translateY(128%);
  transition: transform 0.85s cubic-bezier(0.16, 0.84, 0.28, 1);
}
.has-js .reveal-words.is-in > span > i { transform: none; }
.has-js .reveal-words.is-in > span:nth-child(1) > i { transition-delay: 0.02s; }
.has-js .reveal-words.is-in > span:nth-child(2) > i { transition-delay: 0.08s; }
.has-js .reveal-words.is-in > span:nth-child(3) > i { transition-delay: 0.14s; }
.has-js .reveal-words.is-in > span:nth-child(4) > i { transition-delay: 0.2s; }
.has-js .reveal-words.is-in > span:nth-child(5) > i { transition-delay: 0.26s; }
.has-js .reveal-words.is-in > span:nth-child(6) > i { transition-delay: 0.32s; }
.has-js .reveal-words.is-in > span:nth-child(n+7) > i { transition-delay: 0.38s; }

/* Sheen that crosses a button once on hover. */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%;
  inline-size: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn:hover::after { animation: sheen 0.85s var(--ease); }
@keyframes sheen { from { inset-inline-start: -60%; opacity: 1; } to { inset-inline-start: 130%; opacity: 0; } }
.btn--ghost::after, .btn--light::after { background: linear-gradient(100deg, transparent, rgba(23, 80, 143,0.12), transparent); }

/* Cards lift with a warm edge. */
.card--link { position: relative; }
.card--link::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(140deg, rgba(201,162,74,0.5), rgba(28, 94, 166,0.35));
  opacity: 0; transition: opacity 0.3s var(--ease); z-index: -1;
}
.card--link:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .glass, .ticker__track { animation: none !important; }
  .has-js [data-reveal],
  .has-js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .has-js [data-parallax] { transform: none !important; }
  .has-js .reveal-words > span > i { transform: none !important; }
  .btn:hover::after { animation: none; }
  .bookbar { transition: none; }
}

@media print {
  .progress, .bookbar, .ticker { display: none !important; }
  .plate { box-shadow: none; }
}

/* --------------------------------------------- 14. PAGE HERO WITH ART */

.hero-split { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.2rem); align-items: center; }
@media (min-width: 920px) { .hero-split { grid-template-columns: 1.05fr 0.95fr; } }
.hero-split .page-hero__inner { max-width: none; }

/* On tablets a 4:4.6 panel eats the whole screen, so widen it. */
@media (max-width: 900px) { .plate--tall { aspect-ratio: 16 / 11; } }

/* Section heading with a rule running off to the side. */
.section-head { display: grid; gap: 0.9rem; margin-block-end: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.section-head--split { align-items: end; }
@media (min-width: 860px) {
  .section-head--split { grid-template-columns: 1fr auto; gap: 2rem; }
  .section-head--split > :last-child { justify-self: end; }
}

/* ------------------------------------------------------ 15. DOCTOR CARDS */

.doctor {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.doctor:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.doctor__avatar {
  position: relative;
  inline-size: 76px; block-size: 76px;
  background:
    url("/assets/img/art/tile-mashrabiya.svg") center / 44px 44px,
    linear-gradient(150deg, var(--brand-100), var(--sand));
  font-size: 1.5rem;
}
.doctor__avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(23, 80, 143, 0.12);
}

/* ------------------------------------------------------- 16. FAQ POLISH */

.faq summary { transition: background 0.2s var(--ease), padding-inline-start 0.2s var(--ease); }
.faq details[open] summary { background: var(--brand-50); }
.faq details[open] { border-inline-start: 3px solid var(--gold-500); }

/* The sticky book bar must not sit on top of the last line of the footer. */
@media (max-width: 720px) {
  .site-footer { padding-block-end: 88px; }
}


/* ------------------------------------------- 18. ASCENT RAIL (Longvitality)

   A variant of the numbered rail for an ordered sequence where the order is
   the argument. A spine runs up through the dots and warms from brand blue at
   the base to gold at the top, so the eye reads it as a climb rather than as
   four unrelated rows. The horizontal dividers come off: two axes competing
   is what made the plain version feel like a table.                        */

.rail--ascent { position: relative; }
.rail--ascent .rail__step { padding-block: 1.35rem; }
.rail--ascent .rail__step + .rail__step { border-block-start: 0; }

/* The spine. Starts and ends at the centre of the first and last dot, so it
   never overshoots into the padding. */
.rail--ascent::before {
  content: "";
  position: absolute; z-index: 0;
  inset-inline-start: 22px;
  inset-block: calc(1.35rem + 23px);
  inline-size: 2px;
  border-radius: 2px;
  /* Warms downward, because 01 is at the top and 04 is the end of the climb. */
  background: linear-gradient(to bottom, var(--brand-100) 0%, var(--brand-600) 45%, var(--gold-500) 100%);
}

.rail--ascent .rail__dot {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 2px solid var(--brand-100);
  box-shadow: 0 0 0 5px var(--sand);
  font-size: 1.05rem;
}
.rail--ascent .rail__step:hover .rail__dot {
  background: var(--brand-700); color: #fff; border-color: var(--brand-700);
}

/* The top of the climb is marked in gold: it is earned, not bought. */
.rail--ascent .rail__step:last-child .rail__dot {
  border-color: var(--gold-500);
  color: var(--gold-600);
}
.rail--ascent .rail__step:last-child:hover .rail__dot {
  background: var(--gold-500); color: #241A05; border-color: var(--gold-500);
}

/* The lead-in phrase carries the sequence, so it gets the accent colour. */
.rail--ascent .rail__body p strong { color: var(--brand-700); font-weight: 700; }
.rail--ascent .rail__step:last-child .rail__body p strong { color: var(--gold-600); }

.rail--ascent .rail__body h3 { letter-spacing: -0.01em; }
.rail--ascent .specs { margin-block-start: 0.6rem; }

/* --------------------------------------------------- 19. SOFT LIGHT PANEL

   The light counterpart to .band. Instead of a flat fill it layers two very
   wide, very weak radial washes over a near-white gradient, so the surface has
   depth without ever reading as a colour. A gold hairline across the top edge
   is the only hard line in it.                                             */

.panel {
  --panel-bg: #F8FAFD;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(1.6rem, 1.2rem + 2.2vw, 3rem);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(28, 94, 166, 0.07), transparent 58%),
    radial-gradient(95% 85% at 0% 100%, rgba(201, 162, 74, 0.09), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAFCFE 42%, var(--panel-bg) 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* The lattice, kept even across the whole surface rather than vignetted, so
   it reads as paper rather than as a stain in the middle. */
.panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("/assets/img/art/tile-mashrabiya.svg");
  background-size: 132px 132px;
  opacity: 0.035;
  pointer-events: none;
}
.panel::after {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 12%;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500) 45%, transparent);
  opacity: 0.55;
}

/* The dot halo punches through the spine, so it has to match whatever surface
   it is sitting on. */
.rail--ascent .rail__dot { box-shadow: 0 0 0 5px var(--panel-bg, var(--sand)); }

/* ------------------------------------------------ 20. PLATE MOTION LAYER

   Restores the motion the illustrated hero used to carry, now that a
   photograph sits in its place: orbital rings, a gold arc, pulse points and a
   slow light sweep, laid over the image. Screen blending means it only ever
   adds light, so it lifts off the dark areas of the photograph and disappears
   against the bright ones instead of sitting on top like a sticker.        */

.plate__motion {
  position: absolute; inset: 0; z-index: 1;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
}
/* The caption has to stay legible through it. */
.plate__caption, .plate__badge { z-index: 2; }

@media (prefers-reduced-motion: reduce) { .plate__motion { opacity: 0.32; } }