/* ==========================================================================
   Risalah TV — frontend styles "Illuminated manuscript at night"

   Palette and ornament are taken from Islamic manuscript illumination: the
   gold leaf and deep green of the channel's own mark, the rub-el-hizb (۞)
   that divides a mushaf into parts, and the unwan — the illuminated headpiece
   that opens a chapter — which here frames the live broadcast.

   Load AFTER theme.css so these tokens win. Everything is namespaced under
   .rt- or [data-rt] so it cannot collide with the Porto theme classes.
   ========================================================================== */

:root {
  /* Ground: black with an emerald undertone, never neutral grey */
  --rt-ink:        #071310;
  --rt-ink-2:      #0c1c17;
  --rt-ink-3:      #143026;
  --rt-ink-4:      #1b3d30;

  /* Illumination */
  --rt-gold:       #cba658;
  --rt-gold-lift:  #e9d3a0;
  --rt-gold-deep:  #8f6f2e;
  --rt-emerald:    #2e8b6b;
  --rt-emerald-lo: #1c5a45;

  /* Parchment, for daylight sections */
  --rt-parchment:  #f0eadc;
  --rt-parchment-2:#e3dac6;

  /* Verse marker red. Used only for the live indicator. */
  --rt-vermilion:  #c1452f;

  /* Text */
  --rt-text:       #ece7dc;
  --rt-text-dim:   #9aa79f;
  --rt-text-ink:   #14251e;

  /* Rules and glass */
  --rt-rule:       rgba(203, 166, 88, 0.22);
  --rt-rule-soft:  rgba(203, 166, 88, 0.10);
  --rt-veil:       rgba(7, 19, 16, 0.72);

  /* Type */
  --rt-display: "Amiri", "Lateef", Georgia, serif;
  --rt-body:    "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rt-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid scale, 1.25 ratio at the small end opening to 1.33 at the large */
  --rt-t-xs:   0.75rem;
  --rt-t-sm:   0.8125rem;
  --rt-t-base: 0.9375rem;
  --rt-t-md:   1.0625rem;
  --rt-t-lg:   clamp(1.3rem, 0.7vw + 1.1rem, 1.6rem);
  --rt-t-xl:   clamp(1.75rem, 1.8vw + 1.3rem, 2.75rem);
  --rt-t-2xl:  clamp(2.5rem, 4.2vw + 1.4rem, 5rem);

  /* Space: 4px base */
  --rt-s1: 0.25rem;  --rt-s2: 0.5rem;   --rt-s3: 0.75rem;
  --rt-s4: 1rem;     --rt-s5: 1.5rem;   --rt-s6: 2rem;
  --rt-s7: 3rem;     --rt-s8: 4.5rem;   --rt-s9: 7rem;

  --rt-shell: 84rem;
  --rt-radius: 2px;      /* manuscript edges are cut, not rounded */
  --rt-radius-lg: 4px;

  --rt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Gold as a material Flat #cba658 reads as yellow paint. Leaf catches light
   across its surface, so the key gold elements use a gradient that runs
   dark → bright → dark. This is the single change that most makes the page
   look gilded rather than coloured-in. */
  /* The darkest stop is lifted from #8f6f2e to #a8843a. A gold button carries
   near-black text, and the hover shift slides the gradient across the face,
   so every band has to clear 4.5:1 on its own — the old dark ends measured
   3.3:1 once they travelled under the label. */
  --rt-gold-leaf: linear-gradient(135deg,
      #a8843a 0%, #cba658 22%, #f0dcb0 48%, #cba658 74%, #a8843a 100%);
  --rt-gold-edge: linear-gradient(90deg,
      transparent, rgba(233, 211, 160, 0.55), transparent);

  /* Elevation Three depths only. On a near-black ground a shadow alone is
   invisible, so each level pairs a shadow with a hairline of light along
   the top edge, the way a raised surface catches a lamp above it. */
  --rt-lift-1: 0 1px 0 rgba(233, 211, 160, 0.06) inset,
               0 2px 10px rgba(0, 0, 0, 0.35);
  --rt-lift-2: 0 1px 0 rgba(233, 211, 160, 0.10) inset,
               0 10px 30px rgba(0, 0, 0, 0.45);
  --rt-lift-3: 0 1px 0 rgba(233, 211, 160, 0.14) inset,
               0 24px 60px rgba(0, 0, 0, 0.55);

  --rt-glow-gold: 0 0 0 1px rgba(203, 166, 88, 0.35),
                  0 8px 34px rgba(203, 166, 88, 0.12);

  /* Surfaces are a gradient, not a flat fill, so large panels have a light
   source instead of reading as a rectangle of paint. */
  --rt-surface: linear-gradient(168deg, #10231c 0%, #0b1a15 60%, #091612 100%);
  --rt-surface-2: linear-gradient(168deg, #16302700 0%, #0e211b 100%);
}

/* ==========================================================================
   Reset (scoped to the frontend shell)
   ========================================================================== */

/* The ground is not one flat colour. Two very wide, very faint pools of
   light — emerald low-left, gold high-right — give the page a direction of
   illumination, and the girih tessellation sits over it at 3% so the dark
   reads as textured vellum rather than empty black. */
body[data-rt]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 8% 88%, rgba(46, 139, 107, 0.13), transparent 62%),
    radial-gradient(55% 45% at 94% 6%, rgba(203, 166, 88, 0.10), transparent 60%),
    var(--rt-ink);
  pointer-events: none;
}
body[data-rt]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../img/girih.svg");
  background-size: 240px 240px;
  opacity: 0.030;
  pointer-events: none;
}

body[data-rt] {
  margin: 0;
  background: var(--rt-ink);
  color: var(--rt-text);
  font-family: var(--rt-body);
  font-size: var(--rt-t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-rt] *,
[data-rt] *::before,
[data-rt] *::after { box-sizing: border-box; }

[data-rt] img,
[data-rt] video { max-width: 100%; display: block; }

[data-rt] a { color: inherit; text-decoration: none; }

[data-rt] :focus-visible {
  outline: 2px solid var(--rt-gold);
  outline-offset: 3px;
}

.rt-shell {
  width: 100%;
  max-width: var(--rt-shell);
  margin-inline: auto;
  padding-inline: var(--rt-s5);
}

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

/* ==========================================================================
   Type roles
   ========================================================================== */

/* Large sizes need tighter tracking than small ones: letterspacing that
   looks right at 15px looks loose at 80px. */
.rt-display {
  font-family: var(--rt-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Eyebrow: the small caps label that names a section. Mono, because on a
   broadcast channel these read as station identification. */
.rt-eyebrow {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rt-gold);
}

.rt-lede {
  font-size: var(--rt-t-md);
  color: var(--rt-text-dim);
  max-width: 56ch;
}

.rt-time {
  font-family: var(--rt-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Arabic runs right-to-left in Amiri at a larger optical size */
.rt-arabic {
  font-family: var(--rt-display);
  direction: rtl;
  font-size: 1.45em;
  line-height: 2;
}

/* ==========================================================================
   Ornament — rub-el-hizb (۞), two squares crossed at 45° Drawn in CSS so it
   stays crisp and takes the colour of its context.
   ========================================================================== */

.rt-rosette {
  width: 1em; height: 1em;
  display: inline-block;
  flex: none;
  color: var(--rt-gold);
}
.rt-rosette svg { width: 100%; height: 100%; display: block; }

/* Section divider: a hairline rule with a rosette centred on it. */
.rt-divider {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  color: var(--rt-gold);
}
.rt-divider::before,
.rt-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--rt-rule), transparent);
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.rt-masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--rt-ink) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--rt-rule-soft);
}
/* A hairline of gold along the bottom edge, brightest at the centre. It
   reads as the ruled line that closes a manuscript's header panel. */
.rt-masthead::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--rt-gold-edge);
  pointer-events: none;
}

.rt-masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--rt-s5);
  min-height: 68px;
}

.rt-brand {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  flex: none;
}
[data-rt] .rt-brand img { height: 38px; width: auto; }
.rt-brand__word {
  font-family: var(--rt-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rt-text);
}
.rt-brand__word em {
  font-style: normal;
  color: var(--rt-gold);
}

.rt-nav {
  display: flex;
  align-items: center;
  gap: var(--rt-s1);
  margin-inline-start: auto;
}
.rt-nav a {
  position: relative;
  padding: var(--rt-s2) var(--rt-s3);
  font-size: var(--rt-t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rt-text-dim);
  transition: color 0.2s var(--rt-ease);
}
.rt-nav a:hover { color: var(--rt-text); }

/* The active page is marked with a gold underline that starts from the
   centre — a small nod to the centred rules in an illuminated page. */
.rt-nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 0; height: 1px;
  background: var(--rt-gold);
  transform: translateX(-50%);
  transition: width 0.28s var(--rt-ease);
}
.rt-nav a:hover::after { width: calc(100% - 1.5rem); }
.rt-nav a[aria-current="page"] { color: var(--rt-gold); }
.rt-nav a[aria-current="page"]::after { width: calc(100% - 1.5rem); }

.rt-masthead__end {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  flex: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s2);
  padding: 0.62rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--rt-radius);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s var(--rt-ease), border-color 0.2s var(--rt-ease),
              color 0.2s var(--rt-ease), transform 0.2s var(--rt-ease);
}
.rt-btn:active { transform: translateY(1px); }

.rt-btn--gold {
  background: var(--rt-gold-leaf);
  background-size: 200% 100%;
  background-position: 0 0;
  color: #16100a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
              0 6px 18px rgba(203, 166, 88, 0.18);
  transition: background-position 0.5s var(--rt-ease),
              box-shadow 0.3s var(--rt-ease),
              transform 0.2s var(--rt-ease);
}
/* The highlight travels across the face on hover, the way light moves over
   metal when you tilt it. */
.rt-btn--gold:hover {
  background-position: 100% 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
              0 8px 26px rgba(203, 166, 88, 0.30);
}

.rt-btn--ghost {
  border-color: var(--rt-rule);
  color: var(--rt-text);
  background: transparent;
}
.rt-btn--ghost:hover {
  border-color: var(--rt-gold);
  color: var(--rt-gold);
}

.rt-btn--quiet {
  color: var(--rt-text-dim);
  padding-inline: var(--rt-s2);
}
.rt-btn--quiet:hover { color: var(--rt-text); }

.rt-btn--sm {
  padding: 0.34rem 0.7rem;
  font-size: var(--rt-t-xs);
}

/* ==========================================================================
   Live indicator
   ========================================================================== */

.rt-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rt-text);
}
.rt-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rt-vermilion);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--rt-vermilion) 70%, transparent);
  animation: rt-pulse 2.4s var(--rt-ease) infinite;
}
@keyframes rt-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rt-vermilion) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================================
   Unwan — page signature In a manuscript the unwan is the illuminated panel
   that opens a chapter. Here it frames the live broadcast: a double gold
   hairline, a rosette at each corner, and a slow breath of light along the
   top edge while on air.
   ========================================================================== */

.rt-stage {
  position: relative;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(203, 166, 88, 0.10), transparent 38%),
    var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-3);
}

/* Ornamental band: the girih tessellation masked to a thin band inside the
   frame. */
.rt-stage__band {
  position: absolute;
  inset: 5px;
  border-radius: var(--rt-radius);
  background-image: url("../img/girih.svg");
  background-size: 52px 52px;
  opacity: 0.20;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
          mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
          mask-clip: content-box, border-box;
          mask-composite: exclude;
  padding: 11px;
}

/* the inner hairline — the second rule of the double frame */
.rt-stage::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  pointer-events: none;
}

/* the breath of light that travels the top edge while on air */
.rt-stage::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rt-gold-lift), transparent);
  opacity: 0;
  pointer-events: none;
}
.rt-stage[data-live="true"]::after {
  animation: rt-breathe 5.5s ease-in-out infinite;
}
@keyframes rt-breathe {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.85; }
}

.rt-stage__corner {
  position: absolute;
  width: 22px; height: 22px;
  color: var(--rt-gold-lift);
  filter: drop-shadow(0 0 6px rgba(203, 166, 88, 0.45));
  z-index: 2;
}
.rt-stage__corner--tl { top: -11px;    left: -11px; }
.rt-stage__corner--tr { top: -11px;    right: -11px; }
.rt-stage__corner--bl { bottom: -11px; left: -11px; }
.rt-stage__corner--br { bottom: -11px; right: -11px; }

.rt-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--rt-radius);
  overflow: hidden;
}
.rt-player video,
.rt-player iframe {
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}

/* Placeholder shown before the stream attaches */
.rt-player__wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--rt-s4);
  background:
    radial-gradient(120% 90% at 50% 0%, #14302633 0%, transparent 60%),
    linear-gradient(180deg, #0a1b16, #050d0b);
  color: var(--rt-text-dim);
}
.rt-player__wait .rt-rosette {
  width: 44px; height: 44px;
  opacity: 0.5;
}

/* the strip under the player: what is on now, and what follows */
.rt-nowbar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--rt-s3) var(--rt-s5);
  padding: var(--rt-s4) var(--rt-s2) var(--rt-s2);
}
.rt-nowbar__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  color: var(--rt-text);
  margin: 0;
}
.rt-nowbar__meta {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.08em;
  color: var(--rt-text-dim);
}
.rt-nowbar__end {
  margin-inline-start: auto;
  align-self: center;
  display: flex;
  gap: var(--rt-s2);
  flex-wrap: wrap;
}

/* ==========================================================================
   Margin panel — schedule, messages, comments
   ========================================================================== */

.rt-broadcast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--rt-s6);
  align-items: start;
  padding-block: var(--rt-s6) var(--rt-s8);
}

.rt-margin {
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-ink-2);
  overflow: hidden;
}

.rt-margin__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s4) var(--rt-s4) var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-margin__date { display: flex; flex-direction: column; }
.rt-margin__date strong {
  font-family: var(--rt-body);
  font-size: var(--rt-t-base);
  font-weight: 600;
  color: var(--rt-text);
}
.rt-margin__date span {
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--rt-text-dim);
}
.rt-margin__nav { margin-inline-start: auto; display: flex; gap: var(--rt-s1); }
.rt-margin__nav button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text-dim);
  cursor: pointer;
  transition: color 0.2s var(--rt-ease), border-color 0.2s var(--rt-ease);
}
.rt-margin__nav button:hover:not(:disabled) {
  color: var(--rt-gold);
  border-color: var(--rt-rule);
}
.rt-margin__nav button:disabled { opacity: 0.3; cursor: not-allowed; }

.rt-margin__list {
  list-style: none;
  margin: 0;
  padding: var(--rt-s2);
  max-height: 27rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rt-ink-4) transparent;
}
.rt-margin__list::-webkit-scrollbar { width: 6px; }
.rt-margin__list::-webkit-scrollbar-thumb {
  background: var(--rt-ink-4);
  border-radius: 3px;
}

.rt-slot {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: var(--rt-s3);
  align-items: baseline;
  padding: var(--rt-s3);
  border-radius: var(--rt-radius);
  transition: background 0.18s var(--rt-ease);
}
.rt-slot:hover { background: var(--rt-ink-3); }

.rt-slot__time {
  font-family: var(--rt-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--rt-text-dim);
  letter-spacing: 0.02em;
}
.rt-slot__title {
  font-size: var(--rt-t-sm);
  line-height: 1.45;
  color: var(--rt-text);
  margin: 0;
}

.rt-slot__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
}

/* The programme on air now is marked with a rosette, exactly as a mushaf
   marks the start of a part — not with a coloured bar. */
.rt-slot--now {
  background: color-mix(in srgb, var(--rt-emerald) 12%, transparent);
  align-items: start;
}
.rt-slot--now .rt-slot__time {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--rt-gold);
}
.rt-slot--now .rt-slot__title { font-weight: 600; }
.rt-slot__mark { width: 12px; height: 12px; }

.rt-slot--past { opacity: 0.42; }

/* live-page.js writes schedule rows as .schedule and marks the programme on
   air with .active, so those selectors carry the same styling as .rt-slot.
   Changing the class names would mean rewriting the player script too. */
.schedule {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: var(--rt-s3);
  align-items: start;
  padding: var(--rt-s3);
  border-radius: var(--rt-radius);
  transition: background 0.18s var(--rt-ease);
}
.schedule:hover { background: var(--rt-ink-3); }
.schedule .rt-slot__time {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
}
.schedule .rt-slot__mark { opacity: 0; transition: opacity 0.2s var(--rt-ease); }
.schedule .rt-slot__title { display: block; }
.schedule .rt-slot__title:hover { color: var(--rt-gold); }

.schedule.active { background: color-mix(in srgb, var(--rt-emerald) 12%, transparent); }
.schedule.active .rt-slot__time { color: var(--rt-gold); }
.schedule.active .rt-slot__title { font-weight: 600; }
.schedule.active .rt-slot__mark { opacity: 1; }

/* message and comment panels */

.rt-quote {
  margin: 0 0 var(--rt-s2);
  padding: var(--rt-s4);
  border-inline-start: 2px solid var(--rt-rule);
  background: var(--rt-ink-3);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  line-height: 1.7;
  color: var(--rt-text);
}
.rt-quote :last-child { margin-bottom: 0; }

.rt-empty {
  padding: var(--rt-s5) var(--rt-s4);
  text-align: center;
  color: var(--rt-text-dim);
  font-size: var(--rt-t-sm);
}

.write-field {
  position: relative;
  display: flex;
  gap: var(--rt-s2);
  padding: var(--rt-s3);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-input {
  flex: 1;
  min-height: 2.6rem;
  max-height: 7rem;
  padding: var(--rt-s2) var(--rt-s3);
  background: var(--rt-ink);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  resize: vertical;
}
.rt-input::placeholder { color: var(--rt-text-dim); }
.rt-input:focus {
  outline: none;
  border-color: var(--rt-gold);
}
#sendComment {
  flex: none;
  width: 2.6rem;
  display: grid;
  place-items: center;
  background: var(--rt-gold);
  border: 0;
  border-radius: var(--rt-radius);
  color: #1a1205;
  cursor: pointer;
  transition: background 0.2s var(--rt-ease);
}
#sendComment:hover { background: var(--rt-gold-lift); }

/* ==========================================================================
   Tabs (comments / message / schedule)
   ========================================================================== */

.rt-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rt-rule-soft);
  padding-inline: var(--rt-s2);
}
.rt-tabs button {
  flex: 1;
  padding: var(--rt-s3) var(--rt-s2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
  cursor: pointer;
  transition: color 0.2s var(--rt-ease), border-color 0.2s var(--rt-ease);
}
.rt-tabs button:hover { color: var(--rt-text); }
.rt-tabs button[aria-selected="true"] {
  color: var(--rt-gold);
  border-bottom-color: var(--rt-gold);
}

.rt-panel { display: none; }
.rt-panel[data-open="true"] { display: block; }

/* ==========================================================================
   Verse strip
   ========================================================================== */

/* The verse band is the quiet centre of the page, so it carries the pattern
   more strongly than anywhere else — the eye should rest here. */
.rt-verse {
  position: relative;
  border-block: 1px solid var(--rt-rule-soft);
  background:
    radial-gradient(80% 140% at 50% 0%, rgba(46, 139, 107, 0.14), transparent 70%),
    var(--rt-ink-2);
  padding-block: var(--rt-s8);
  text-align: center;
  overflow: hidden;
}
.rt-verse::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/girih.svg");
  background-size: 150px 150px;
  opacity: 0.055;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent 78%);
  pointer-events: none;
}
.rt-verse > * { position: relative; }
.rt-verse__text {
  font-family: var(--rt-display);
  font-size: clamp(1.15rem, 1.6vw + 0.8rem, 1.75rem);
  line-height: 1.75;
  color: var(--rt-text);
  max-width: 46ch;
  margin: var(--rt-s4) auto var(--rt-s3);
}
.rt-verse__ref {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rt-gold);
}

/* ==========================================================================
   Sections and the program archive
   ========================================================================== */

.rt-section { padding-block: var(--rt-s8); }
.rt-section--light {
  background: var(--rt-parchment);
  color: var(--rt-text-ink);
}
.rt-section--light .rt-lede { color: #4b5b52; }
.rt-section--light .rt-eyebrow { color: var(--rt-gold-deep); }

.rt-section__head {
  display: flex;
  align-items: flex-end;
  gap: var(--rt-s5);
  margin-bottom: var(--rt-s6);
  flex-wrap: wrap;
}
.rt-section__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-xl);
  font-weight: 700;
  line-height: 1.15;
  margin: var(--rt-s2) 0 0;
}
.rt-section__head .rt-btn { margin-inline-start: auto; }

.rt-grid {
  display: grid;
  gap: var(--rt-s5);
  grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
}

.rt-card {
  display: flex;
  flex-direction: column;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  box-shadow: var(--rt-lift-1);
  transition: border-color 0.28s var(--rt-ease), transform 0.28s var(--rt-ease),
              box-shadow 0.28s var(--rt-ease);
}
.rt-card:hover {
  border-color: var(--rt-rule);
  transform: translateY(-4px);
  box-shadow: var(--rt-lift-2), var(--rt-glow-gold);
}
.rt-card__art {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--rt-ink-3), var(--rt-ink));
  overflow: hidden;
}

/* A programme with no poster gets the rosette rather than an empty box, so
   a missing image reads as part of the design instead of a broken one. */
.rt-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6 22.4 12 12 22.4 1.6 12z' fill='none' stroke='%23cba658' stroke-width='1.3'/%3E%3Cpath d='M4.6 4.6h14.8v14.8H4.6z' fill='none' stroke='%23cba658' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46px;
  opacity: 0.16;
  pointer-events: none;
}
.rt-card__art:has(img)::after { content: none; }
[data-rt] .rt-card__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--rt-ease);
}
.rt-card:hover .rt-card__art img { transform: scale(1.04); }

.rt-card__body { padding: var(--rt-s4); display: flex; flex-direction: column; gap: var(--rt-s2); flex: 1; }
.rt-card__kicker {
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-card__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--rt-text);
}
.rt-card__meta {
  margin-top: auto;
  padding-top: var(--rt-s2);
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
}

.rt-section--light .rt-card {
  background: #fff;
  border-color: rgba(20, 37, 30, 0.10);
}
.rt-section--light .rt-card__title { color: var(--rt-text-ink); }
.rt-section--light .rt-card__kicker { color: var(--rt-gold-deep); }
.rt-section--light .rt-card__meta { color: #6d7d74; }

/* ==========================================================================
   Pillars
   ========================================================================== */

.rt-pillars {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  background: var(--rt-rule-soft);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
}
.rt-pillar {
  padding: var(--rt-s6) var(--rt-s5);
  background: var(--rt-ink);
  display: flex;
  flex-direction: column;
  gap: var(--rt-s3);
  transition: background 0.24s var(--rt-ease);
}
.rt-pillar:hover { background: var(--rt-ink-2); }
.rt-pillar__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0;
}
.rt-pillar p { color: var(--rt-text-dim); margin: 0; font-size: var(--rt-t-sm); }
.rt-pillar__go {
  margin-top: var(--rt-s2);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
}
.rt-pillar__go::after {
  content: "→";
  transition: transform 0.24s var(--rt-ease);
}
.rt-pillar:hover .rt-pillar__go::after { transform: translateX(4px); }

/* ==========================================================================
   Donation band
   ========================================================================== */

.rt-give {
  position: relative;
  padding-block: var(--rt-s8);
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(203, 166, 88, 0.14), transparent 70%),
    var(--rt-ink-2);
  border-top: 1px solid var(--rt-rule-soft);
  text-align: center;
  overflow: hidden;
}
.rt-give::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/girih.svg");
  background-size: 170px 170px;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(70% 100% at 50% 100%, #000, transparent 75%);
          mask-image: radial-gradient(70% 100% at 50% 100%, #000, transparent 75%);
  pointer-events: none;
}
.rt-give > * { position: relative; }
.rt-give__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-2xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
  line-height: 1.1;
  margin: var(--rt-s4) 0 var(--rt-s3);
}
.rt-give .rt-lede { margin-inline: auto; }
.rt-give__actions {
  display: flex;
  justify-content: center;
  gap: var(--rt-s3);
  flex-wrap: wrap;
  margin-top: var(--rt-s5);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.rt-footer {
  position: relative;
  background:
    radial-gradient(80% 110% at 50% 0%, rgba(46, 139, 107, 0.09), transparent 66%),
    var(--rt-ink);
  border-top: 1px solid var(--rt-rule-soft);
  padding-block: var(--rt-s8) var(--rt-s5);
  font-size: var(--rt-t-sm);
  overflow: hidden;
}
.rt-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--rt-gold-edge);
}
.rt-footer .rt-shell { position: relative; }
/* CSS forbids repeat(auto-fit, ...) alongside a flexible track such as
   1.4fr: the whole declaration is dropped, which is why the footer had
   collapsed to a single stacked column. Explicit tracks with breakpoints
   instead. */
.rt-footer__grid {
  display: grid;
  gap: var(--rt-s6) var(--rt-s5);
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  padding-bottom: var(--rt-s6);
}
@media (max-width: 60rem) { .rt-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .rt-footer__grid { grid-template-columns: 1fr; } }
.rt-footer h3 {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rt-gold);
  margin: 0 0 var(--rt-s3);
}
.rt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rt-s2); }
.rt-footer a { color: var(--rt-text-dim); transition: color 0.2s var(--rt-ease); }
.rt-footer a:hover { color: var(--rt-gold); }
.rt-footer__base {
  display: flex;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--rt-s5);
  border-top: 1px solid var(--rt-rule-soft);
  color: var(--rt-text-dim);
  font-size: var(--rt-t-xs);
}
.rt-footer__base .rt-rosette { width: 0.9em; height: 0.9em; opacity: 0.6; }

/* ==========================================================================
   Dropdown menu and modal

   These replace Porto's .header-nav-features-* components. Porto's toggle
   script binds inside #header, which the redesigned masthead does not use, so
   both the CSS and the behaviour are owned here instead (see risalah.js).
   ========================================================================== */

.rt-menu { position: relative; }

.rt-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: 0.5rem var(--rt-s3);
  background: transparent;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s var(--rt-ease), color 0.2s var(--rt-ease);
}
.rt-menu__toggle:hover { border-color: var(--rt-gold); color: var(--rt-gold); }
[data-rt] .rt-menu__toggle img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.rt-menu__badge {
  position: absolute;
  top: -5px; inset-inline-end: -5px;
  min-width: 17px;
  padding: 0 4px;
  background: var(--rt-vermilion);
  border-radius: 9px;
  color: #fff;
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  line-height: 17px;
  text-align: center;
}

.rt-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: min(28rem, calc(100vh - 6rem));
  overflow-y: auto;
  padding: var(--rt-s2);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  display: none;
}
.rt-menu__panel[data-open="true"] { display: block; }

.rt-menu__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
  margin-bottom: var(--rt-s2);
}
[data-rt] .rt-menu__head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.rt-menu__head strong { display: block; font-size: var(--rt-t-sm); color: var(--rt-text); }
.rt-menu__head span { font-size: var(--rt-t-xs); color: var(--rt-text-dim); }

.rt-menu__item {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s3);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
  transition: background 0.16s var(--rt-ease), color 0.16s var(--rt-ease);
}
.rt-menu__item:hover { background: var(--rt-ink-3); color: var(--rt-text); }
[data-rt] .rt-menu__item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.rt-menu__item p { margin: 0; font-size: var(--rt-t-xs); color: var(--rt-text-dim); }
.rt-menu__empty { padding: var(--rt-s4); text-align: center; color: var(--rt-text-dim); font-size: var(--rt-t-sm); }

/* modal */

.rt-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: var(--rt-s5) var(--rt-s4);
  background: rgba(3, 9, 7, 0.82);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* block, not grid. A centred grid item taller than the viewport has its top
   cut off and cannot be scrolled to — which is exactly how the sign-in
   panel was appearing sliced through the header. Auto margins on a block
   child centre it when it fits and let it scroll normally when it does not. */
.rt-modal[data-open="true"] { display: block; }

.rt-modal__box {
  position: relative;
  width: min(29rem, 100%);
  margin: auto;
  padding: var(--rt-s6) var(--rt-s5) var(--rt-s5);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(203, 166, 88, 0.10), transparent 60%),
    var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-3), var(--rt-glow-gold);
}
/* a gilt rule across the head of the panel */
.rt-modal__box::before {
  content: "";
  position: absolute;
  inset-inline: 18%;
  top: 0;
  height: 1px;
  background: var(--rt-gold-edge);
}
.rt-modal__close {
  position: absolute;
  top: var(--rt-s3); inset-inline-end: var(--rt-s3);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.rt-modal__close:hover { color: var(--rt-gold); border-color: var(--rt-rule); }

.rt-modal__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-xl);
  font-weight: 700;
  margin: 0 0 var(--rt-s2);
}
.rt-modal__note {
  margin: var(--rt-s4) 0 0;
  padding-top: var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
  text-align: center;
}
.rt-modal__note a { color: var(--rt-gold); font-weight: 600; }

/* forms */

.rt-field { margin-bottom: var(--rt-s3); }
.rt-field label {
  display: block;
  margin-bottom: var(--rt-s1);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}

/* Applied to the existing .form-control inputs so the markup keeps the
   class names that scripts.js and the server-side validation already rely
   on. */
[data-rt] .form-control {
  width: 100%;
  padding: 0.7rem var(--rt-s4);
  background: var(--rt-ink);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  line-height: 1.5;
}
[data-rt] .form-control::placeholder { color: var(--rt-text-dim); }
[data-rt] .form-control:focus {
  outline: none;
  border-color: var(--rt-gold);
  box-shadow: none;
}

.rt-oauth { display: grid; gap: var(--rt-s2); margin-bottom: var(--rt-s4); }
@media (min-width: 26rem) { .rt-oauth { grid-template-columns: 1fr 1fr; } }
.rt-oauth a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s2);
  padding: 0.6rem var(--rt-s3);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  font-weight: 500;
  color: var(--rt-text);
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease);
}
.rt-oauth a:hover { border-color: var(--rt-gold); background: var(--rt-ink-3); }

.rt-alert {
  padding: var(--rt-s3) var(--rt-s4);
  margin-bottom: var(--rt-s3);
  background: color-mix(in srgb, var(--rt-vermilion) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--rt-vermilion) 45%, transparent);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
}
.rt-alert ul { margin: var(--rt-s1) 0 0; padding-inline-start: var(--rt-s4); }

/* The recaptcha iframe has a fixed width; let it shrink rather than push
   the page wide enough to create a horizontal scrollbar. */
.rt-modal__box .g-recaptcha { transform-origin: 0 0; max-width: 100%; overflow: hidden; }

/* ==========================================================================
   Academy — catalogue hero, filters, curriculum

   The structure here follows what course platforms have settled on, because
   those patterns genuinely help: a hero that states what is on offer, filters
   by subject, cards carrying enough metadata to choose, and a course page
   that shows the curriculum before you commit. Every figure shown is read
   from the database. There are no ratings or enrolment counts, because this
   schema does not store them and inventing them would be a lie to the reader.
   ========================================================================== */

.rt-academy-hero {
  padding-block: var(--rt-s7) var(--rt-s6);
  border-bottom: 1px solid var(--rt-rule-soft);
  background:
    radial-gradient(70% 130% at 15% 0%, rgba(46, 139, 107, 0.14), transparent 68%),
    radial-gradient(50% 100% at 90% 10%, rgba(203, 166, 88, 0.08), transparent 70%),
    var(--rt-ink-2);
}
.rt-academy-hero__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-2xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
  line-height: 1.08;
  margin: var(--rt-s3) 0;
}

.rt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s6);
  margin-top: var(--rt-s5);
  padding-top: var(--rt-s5);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-stat strong {
  display: block;
  font-family: var(--rt-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rt-gold);
}
.rt-stat span {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}

/* filter chips */

.rt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s2);
}
.rt-chip {
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--rt-rule-soft);
  border-radius: 999px;
  color: var(--rt-text-dim);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  cursor: pointer;
  transition: border-color 0.18s var(--rt-ease), color 0.18s var(--rt-ease),
              background 0.18s var(--rt-ease);
}
.rt-chip:hover { border-color: var(--rt-rule); color: var(--rt-text); }
.rt-chip[aria-pressed="true"] {
  background: var(--rt-gold);
  border-color: var(--rt-gold);
  color: #1a1205;
  font-weight: 600;
}
.rt-chip__n { opacity: 0.6; margin-inline-start: 0.35rem; font-size: 0.8em; }

.rt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  margin-bottom: var(--rt-s5);
}
.rt-toolbar__count {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
  margin-inline-start: auto;
}

/* course card metadata */

.rt-course__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s3);
  padding-top: var(--rt-s1);
}
.rt-course__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--rt-text-dim);
}
.rt-course__meta i { color: var(--rt-gold); opacity: 0.7; }

.rt-course__progress {
  margin-top: var(--rt-s2);
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
}

/* course detail hero */

.rt-course-hero {
  position: relative;
  padding-block: var(--rt-s7);
  border-bottom: 1px solid var(--rt-rule-soft);
  background: var(--rt-ink-2);
  overflow: hidden;
}
.rt-course-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
}
[data-rt] .rt-course-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.rt-course-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--rt-ink-2) 20%, transparent 90%);
}
.rt-course-hero .rt-shell { position: relative; z-index: 1; }
.rt-course-hero__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-2xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
  line-height: 1.08;
  margin: var(--rt-s3) 0;
  max-width: 24ch;
}

/* curriculum */

.rt-curriculum {
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  background: var(--rt-ink-2);
}
.rt-curriculum__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s4);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-curriculum__head h2 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0;
}
.rt-curriculum__head .rt-card__meta { margin-inline-start: auto; }

.rt-unit {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: var(--rt-s3);
  align-items: center;
  padding: var(--rt-s3) var(--rt-s4);
  color: var(--rt-text-dim);
  transition: background 0.16s var(--rt-ease);
}
.rt-unit + .rt-unit { border-top: 1px solid var(--rt-rule-soft); }
.rt-unit__n {
  font-family: var(--rt-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--rt-text-dim);
}
.rt-unit__title { font-size: var(--rt-t-base); color: var(--rt-text); margin: 0; font-weight: 500; }
.rt-unit__tags { display: flex; gap: var(--rt-s2); align-items: center; }
.rt-unit__tag {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-unit__lock { color: var(--rt-ink-4); font-size: 0.8rem; }

a.rt-unit:hover { background: var(--rt-ink-3); }
a.rt-unit:hover .rt-unit__title { color: var(--rt-gold); }
.rt-unit--done .rt-unit__n { color: var(--rt-emerald); }

/* A locked lesson previously 0.55 opacity on the whole row, which stacked
   on top of the already-dimmed row colour and left the titles barely
   readable. The point of the lock is to say "not yet", not to hide what the
   course contains — that list is the main reason someone reads this page.
   The title stays at full strength; only the padlock carries the state. */
.rt-unit--locked { opacity: 1; }
.rt-unit--locked .rt-unit__title { color: var(--rt-text); }
.rt-unit--locked .rt-unit__n,
.rt-unit--locked .rt-unit__tag { opacity: 0.7; }
.rt-unit__lock { color: var(--rt-gold); opacity: 0.55; }

/* enrol card */

.rt-enrol {
  position: sticky;
  top: 88px;
  padding: var(--rt-s5);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
@media (max-width: 62rem) { .rt-enrol { position: static; } }

.rt-enrol__art {
  aspect-ratio: 16 / 9;
  border-radius: var(--rt-radius);
  overflow: hidden;
  margin-bottom: var(--rt-s4);
  background: var(--rt-ink-3);
}
[data-rt] .rt-enrol__art img { width: 100%; height: 100%; object-fit: cover; }
.rt-enrol__price {
  font-family: var(--rt-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--rt-text);
  margin: 0 0 var(--rt-s1);
}
.rt-enrol__note {
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
  margin: 0 0 var(--rt-s4);
}
.rt-enrol .rt-btn { width: 100%; }
.rt-enrol__includes {
  list-style: none;
  margin: var(--rt-s4) 0 0;
  padding: var(--rt-s4) 0 0;
  border-top: 1px solid var(--rt-rule-soft);
  display: grid;
  gap: var(--rt-s2);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
}
.rt-enrol__includes li { display: flex; align-items: center; gap: var(--rt-s3); }
.rt-enrol__includes i { color: var(--rt-gold); width: 1rem; text-align: center; }

/* ==========================================================================
   Academy — courses, live classes, lessons

   A course is a text worked through part by part, so progress is shown the
   way a mushaf marks its divisions: a filled rosette for a part completed, a
   hollow one for the part you are on, nothing for what is still ahead.
   ========================================================================== */

.rt-course {
  display: flex;
  flex-direction: column;
  background: var(--rt-surface);
  box-shadow: var(--rt-lift-1);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  transition: border-color 0.24s var(--rt-ease), transform 0.24s var(--rt-ease);
}
.rt-course:hover {
  border-color: var(--rt-rule);
  transform: translateY(-4px);
  box-shadow: var(--rt-lift-2), var(--rt-glow-gold);
}

.rt-course__art {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--rt-ink-3), var(--rt-ink));
  overflow: hidden;
}
[data-rt] .rt-course__art img { width: 100%; height: 100%; object-fit: cover; }
.rt-course__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 19, 16, 0.85));
  pointer-events: none;
}

.rt-course__state {
  position: absolute;
  top: var(--rt-s3);
  inset-inline-start: var(--rt-s3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--rt-radius);
  background: var(--rt-veil);
  backdrop-filter: blur(6px);
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rt-course__state--open    { color: var(--rt-emerald); border: 1px solid color-mix(in srgb, var(--rt-emerald) 50%, transparent); }
.rt-course__state--pending { color: var(--rt-gold);    border: 1px solid var(--rt-rule); }
.rt-course__state--locked  { color: var(--rt-text-dim); border: 1px solid var(--rt-rule-soft); }

.rt-course__body {
  display: flex;
  flex-direction: column;
  gap: var(--rt-s2);
  padding: var(--rt-s4);
  flex: 1;
}
.rt-course__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--rt-text);
}
.rt-course__desc {
  margin: 0;
  font-size: var(--rt-t-sm);
  line-height: 1.6;
  color: var(--rt-text-dim);
}
.rt-course__foot {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin-top: auto;
  padding-top: var(--rt-s3);
}
.rt-course__foot .rt-btn { margin-inline-start: auto; }

/* live classes attached to a course */

.rt-classes {
  border-top: 1px solid var(--rt-rule-soft);
  background: color-mix(in srgb, var(--rt-emerald) 8%, transparent);
}
.rt-classes__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s3) var(--rt-s4) var(--rt-s2);
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-class {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--rt-s2) var(--rt-s3);
  align-items: center;
  padding: var(--rt-s2) var(--rt-s4);
}
.rt-class + .rt-class { border-top: 1px solid var(--rt-rule-soft); }
.rt-class__time {
  font-family: var(--rt-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--rt-text);
}
.rt-class__acts { display: flex; align-items: center; gap: var(--rt-s2); }
.rt-class__icon {
  background: transparent;
  border: 0;
  padding: 0.2rem;
  color: var(--rt-text-dim);
  cursor: pointer;
  font-size: 0.95rem;
  transition: color 0.18s var(--rt-ease);
}
.rt-class__icon:hover { color: var(--rt-gold); }

/* search suggestions */

.rt-suggest {
  position: relative;
  max-width: 32rem;
}
.rt-suggest__list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: none;
  padding: var(--rt-s2);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.rt-suggest__list ul { list-style: none; margin: 0; padding: 0; }
.rt-suggest__list li a,
.rt-suggest__list li.not-found {
  display: block;
  padding: var(--rt-s2) var(--rt-s3);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
}
.rt-suggest__list li a:hover { background: var(--rt-ink-3); color: var(--rt-gold); }

/* the lesson reader */

.rt-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: var(--rt-s6);
  align-items: start;
}
@media (max-width: 62rem) {
  .rt-lesson { grid-template-columns: 1fr; }
}

.rt-index {
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
}
.rt-index__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s4);
  border-bottom: 1px solid var(--rt-rule-soft);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-index__list {
  list-style: none;
  margin: 0;
  padding: var(--rt-s2);
  max-height: 30rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rt-ink-4) transparent;
}
.rt-index__list::-webkit-scrollbar { width: 6px; }
.rt-index__list::-webkit-scrollbar-thumb { background: var(--rt-ink-4); border-radius: 3px; }

.rt-step {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--rt-s3);
  align-items: start;
  padding: var(--rt-s3);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
  transition: background 0.16s var(--rt-ease), color 0.16s var(--rt-ease);
}
.rt-step:hover { background: var(--rt-ink-3); color: var(--rt-text); }
.rt-step__mark { width: 14px; height: 14px; margin-top: 3px; color: var(--rt-ink-4); }

/* a part already worked through: the rosette is filled */
.rt-step--done .rt-step__mark { color: var(--rt-emerald); }
.rt-step--done .rt-step__mark svg path { fill: currentColor; fill-opacity: 0.28; }

/* the part you are on */
.rt-step--current {
  background: color-mix(in srgb, var(--rt-emerald) 14%, transparent);
  color: var(--rt-text);
  font-weight: 600;
}
.rt-step--current .rt-step__mark { color: var(--rt-gold); }

.rt-progress {
  padding: var(--rt-s3) var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
}
.rt-progress__bar {
  height: 3px;
  margin-top: var(--rt-s2);
  background: var(--rt-ink-4);
  border-radius: 2px;
  overflow: hidden;
}
.rt-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rt-emerald), var(--rt-gold));
}

.rt-assign {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s3) var(--rt-s4);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
  transition: border-color 0.2s var(--rt-ease);
}
.rt-assign + .rt-assign { margin-top: var(--rt-s2); }
.rt-assign:hover { border-color: var(--rt-gold); color: var(--rt-gold); }
.rt-assign i { margin-inline-start: auto; }

.rt-finish {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  margin-top: var(--rt-s6);
  padding: var(--rt-s4);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
}
.rt-finish .rt-btn { margin-inline-start: auto; }

/* ==========================================================================
   Account panel (userpanel shell)
   ========================================================================== */

.rt-panel-grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--rt-s6);
  align-items: start;
}
@media (max-width: 62rem) {
  .rt-panel-grid { grid-template-columns: 1fr; }
}

.rt-side {
  position: sticky;
  top: 88px;
  padding: var(--rt-s5) var(--rt-s4);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
}
@media (max-width: 62rem) { .rt-side { position: static; } }

.rt-side__avatar {
  display: grid;
  justify-items: center;
  gap: var(--rt-s3);
  padding-bottom: var(--rt-s4);
  margin-bottom: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
  text-align: center;
}
.rt-side__avatar strong { font-size: var(--rt-t-sm); color: var(--rt-text); }

.rt-avatar {
  position: relative;
  display: block;
  width: 84px; height: 84px;
  cursor: pointer;
}
[data-rt] .rt-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rt-rule);
}
.rt-avatar__badge {
  position: absolute;
  right: 0; bottom: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--rt-gold);
  border-radius: 50%;
  color: #1a1205;
  font-size: 0.7rem;
}

.rt-side__nav { display: grid; gap: 2px; }
.rt-side__nav a {
  padding: var(--rt-s3);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
  transition: background 0.16s var(--rt-ease), color 0.16s var(--rt-ease);
}
.rt-side__nav a:hover { background: var(--rt-ink-3); color: var(--rt-text); }
.rt-side__nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--rt-emerald) 14%, transparent);
  color: var(--rt-gold);
  font-weight: 600;
}

.rt-panel-main { min-width: 0; }

.rt-banner {
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  margin-bottom: var(--rt-s5);
  background: var(--rt-ink-3);
}
[data-rt] .rt-banner img { width: 100%; height: auto; display: block; }

/* radio / checkbox groups */

.rt-choice { border: 0; padding: 0; margin-bottom: var(--rt-s4); }
.rt-choice legend {
  padding: 0;
  margin-bottom: var(--rt-s2);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-choice__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  margin-inline-end: var(--rt-s4);
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
  cursor: pointer;
}
.rt-choice__opt input { accent-color: var(--rt-gold); }

.rt-form { max-width: 40rem; }

/* ==========================================================================
   Two-up statements and note cards
   ========================================================================== */

.rt-twoup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--rt-s6);
}
.rt-twoup article p {
  margin: 0 0 var(--rt-s3);
  color: var(--rt-text-dim);
  line-height: 1.75;
  max-width: 62ch;
}
.rt-twoup__title {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0 0 var(--rt-s4);
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
}
.rt-twoup__title .rt-rosette { width: 16px; height: 16px; flex: none; }

.rt-note {
  display: flex;
  flex-direction: column;
  gap: var(--rt-s3);
  padding: var(--rt-s5);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  transition: border-color 0.22s var(--rt-ease);
}
.rt-note:hover { border-color: var(--rt-rule); }
.rt-note .rt-rosette { width: 18px; height: 18px; }
.rt-note__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  margin: 0;
}
.rt-note__body {
  font-size: var(--rt-t-sm);
  line-height: 1.7;
  color: var(--rt-text-dim);
}
.rt-note__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Detail pages — program, support entry, lesson
   ========================================================================== */

.rt-backlink {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--rt-s2);
  margin-bottom: var(--rt-s5);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
  transition: color 0.2s var(--rt-ease);
}
.rt-backlink:hover { color: var(--rt-gold); }

.rt-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--rt-s6);
  align-items: start;
}
@media (max-width: 62rem) {
  .rt-detail { grid-template-columns: 1fr; }
}

/* Long-form body copy. Kept narrow: past about 70 characters the eye loses
   the start of the next line. */
.rt-prose {
  max-width: 68ch;
  margin-top: var(--rt-s5);
  font-size: var(--rt-t-md);
  line-height: 1.75;
  color: var(--rt-text-dim);
}
.rt-prose > * + * { margin-top: var(--rt-s4); }
.rt-prose h2, .rt-prose h3 {
  font-family: var(--rt-display);
  color: var(--rt-text);
  margin-top: var(--rt-s6);
}
.rt-prose strong { color: var(--rt-text); font-weight: 600; }
.rt-prose a { color: var(--rt-gold); text-decoration: underline; text-underline-offset: 3px; }
.rt-prose img { border-radius: var(--rt-radius); margin-block: var(--rt-s4); }
.rt-prose ul, .rt-prose ol { padding-inline-start: var(--rt-s5); }
.rt-prose li + li { margin-top: var(--rt-s2); }

.rt-factbox {
  position: sticky;
  top: 88px;
  padding: var(--rt-s5);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
}
@media (max-width: 62rem) { .rt-factbox { position: static; } }

.rt-factbox__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  margin: 0 0 var(--rt-s4);
  padding-bottom: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-factbox__head .rt-rosette { width: 13px; height: 13px; }

.rt-facts { margin: 0; display: grid; gap: var(--rt-s3); }
.rt-facts dt {
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-facts dd {
  margin: 2px 0 0;
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
}

/* ==========================================================================
   Page header
   ========================================================================== */

.rt-pagehead {
  padding-block: var(--rt-s7) var(--rt-s6);
  border-bottom: 1px solid var(--rt-rule-soft);
  background:
    radial-gradient(60% 130% at 20% 0%, rgba(46,139,107,0.10), transparent 70%),
    var(--rt-ink-2);
}
.rt-pagehead__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-2xl);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
  line-height: 1.08;
  margin: var(--rt-s3) 0 var(--rt-s3);
}

/* search */

.rt-search {
  display: flex;
  gap: var(--rt-s2);
  max-width: 32rem;
  margin-top: var(--rt-s5);
}
.rt-search input {
  flex: 1;
  padding: 0.7rem var(--rt-s4);
  background: var(--rt-ink);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
}
.rt-search input::placeholder { color: var(--rt-text-dim); }
.rt-search input:focus { outline: none; border-color: var(--rt-gold); }

/* Category rail. Replaces owl.carousel: scroll-snap gives the same behaviour
   with no JavaScript, and keeps native keyboard and touch scrolling. */

.rt-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(15rem, 78vw), 17rem);
  gap: var(--rt-s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--rt-s3);
  scrollbar-width: thin;
  scrollbar-color: var(--rt-ink-4) transparent;
}
.rt-rail > * { scroll-snap-align: start; }
.rt-rail::-webkit-scrollbar { height: 6px; }
.rt-rail::-webkit-scrollbar-thumb { background: var(--rt-ink-4); border-radius: 3px; }

.rt-railhead {
  display: flex;
  align-items: baseline;
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s4);
}
.rt-railhead h2 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0;
}
.rt-railhead .rt-rosette { width: 14px; height: 14px; align-self: center; }

/* list rows, used for search results */

.rt-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--rt-s5);
  padding: var(--rt-s4);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-ink-2);
  transition: border-color 0.22s var(--rt-ease);
}
.rt-row + .rt-row { margin-top: var(--rt-s4); }
.rt-row:hover { border-color: var(--rt-rule); }
.rt-row__art {
  aspect-ratio: 16 / 10;
  border-radius: var(--rt-radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--rt-ink-3), var(--rt-ink));
}
[data-rt] .rt-row__art img { width: 100%; height: 100%; object-fit: cover; }
.rt-row__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  margin: var(--rt-s1) 0 var(--rt-s2);
}
.rt-row p { margin: 0; color: var(--rt-text-dim); font-size: var(--rt-t-sm); }

@media (max-width: 40rem) {
  .rt-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 62rem) {
  .rt-broadcast { grid-template-columns: 1fr; }
  .rt-margin__list { max-height: 20rem; }
}

@media (max-width: 48rem) {
  :root { --rt-s8: 3.25rem; --rt-s7: 2.25rem; }
  .rt-shell { padding-inline: var(--rt-s4); }
  .rt-nav { display: none; }
  .rt-nav[data-open="true"] {
    display: flex;
    position: absolute;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--rt-s3);
    background: var(--rt-ink-2);
    border-bottom: 1px solid var(--rt-rule);
  }
  .rt-nav[data-open="true"] a { padding: var(--rt-s3) var(--rt-s4); }
  .rt-nav[data-open="true"] a::after { display: none; }
  .rt-stage { padding: 8px; }
  .rt-stage__corner { width: 11px; height: 11px; }
  .rt-section__head .rt-btn { margin-inline-start: 0; }
}

/* The burger only exists on small screens */
.rt-burger { display: none; }
@media (max-width: 48rem) {
  .rt-burger {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    background: transparent;
    border: 1px solid var(--rt-rule-soft);
    border-radius: var(--rt-radius);
    color: var(--rt-text);
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-rt] *,
  [data-rt] *::before,
  [data-rt] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   Entrance

   Content lifts in once, as it enters the viewport, and never animates again.
   Movement is small (14px) and quick: enough to give the page a sense of
   being composed rather than dumped, not enough to make anyone wait.
   ========================================================================== */

[data-rt-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--rt-ease), transform 0.6s var(--rt-ease);
  transition-delay: var(--rt-reveal-delay, 0ms);
}
[data-rt-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* If the observer never runs — old browser, script blocked — the content
   must still be readable, so nothing is hidden without JS having said so. */
html:not(.rt-js) [data-rt-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rt-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   Overrides
   ========================================================================== */

/* Account pages open on a header that only carries a title, so it does not
   need the full editorial height a landing page header does. */
.rt-pagehead--compact { padding-block: var(--rt-s6) var(--rt-s5); }
.rt-pagehead--compact .rt-pagehead__title { font-size: var(--rt-t-xl); margin-bottom: 0; }

/* Curriculum rows were reading as empty because the title sat alone in a
   wide column with the tags pinned far right. Cap the row and give the tags
   air. */
.rt-unit { padding-block: var(--rt-s3); }
.rt-unit__title { max-width: 52ch; }
.rt-unit__tags { gap: var(--rt-s3); }

/* Sidebar avatar: the default user silhouette is a light image on a dark
   panel, which shouts. Dim it and let the ring carry the shape. */
[data-rt] .rt-avatar img { filter: saturate(0.55) brightness(0.82); }
.rt-avatar:hover img { filter: none; }

/* The schedule margin collapsed to a thin strip whenever nothing was
   scheduled, leaving the player beside a mostly empty box. */
.rt-margin { min-height: 22rem; display: flex; flex-direction: column; }
.rt-margin .rt-panel[data-open="true"] { flex: 1; display: flex; flex-direction: column; }
.rt-margin__list { flex: 1; }
.rt-empty { display: grid; place-content: center; gap: var(--rt-s3); min-height: 8rem; }

/* On air line: the title is written by the player script, so before it
   arrives the block must not collapse onto the timezone line. */
.rt-nowbar__title:empty::before { content: "On air now"; color: var(--rt-text-dim); }

/* sign-in panel refinements */

.rt-modal__mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0 auto var(--rt-s4);
  border: 1px solid var(--rt-rule);
  border-radius: 50%;
  color: var(--rt-gold);
}
.rt-modal__mark .rt-rosette { width: 20px; height: 20px; }

.rt-modal__title { text-align: center; }
.rt-modal__sub {
  margin: 0 0 var(--rt-s5);
  text-align: center;
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
}

/* "or with your email" — a rule with the label sitting in a gap in it */
.rt-or {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: var(--rt-s4) 0;
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-or::before, .rt-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rt-rule-soft);
}

.rt-field--pair {
  display: grid;
  gap: var(--rt-s3);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 26rem) { .rt-field--pair { grid-template-columns: 1fr; } }


/* ==========================================================================
   Broadcast sizing

   The video should be as large as the screen allows, which is not the same as
   filling the screen's height: a 16:9 picture stretched to a tall box just
   grows black bars. So the frame keeps its ratio and is bounded on BOTH axes
   — by the column's width and by the height left under the masthead — and the
   browser picks whichever limit bites first. On a wide monitor that is the
   height; on a laptop it is the width.

   dvh rather than vh, so mobile browser chrome sliding in and out does not
   crop the picture.
   ========================================================================== */

@media (min-width: 62rem) {
  /* A wider shell here only. The rest of the site stays at its reading width;
   video is the one thing that genuinely benefits from the extra pixels. */
  .rt-broadcast {
    max-width: min(108rem, 100% - 3rem);
    grid-template-columns: minmax(0, 1fr) 21rem;
    padding-block: var(--rt-s4) var(--rt-s6);
    align-items: start;
  }

  .rt-broadcast > .player-container { min-width: 0; }

  .rt-broadcast .rt-stage { margin-inline: auto; width: 100%; }

  .rt-broadcast .rt-player {
    aspect-ratio: 16 / 9;
    width: 100%;
    /* room for masthead, the on-air caption and the section padding */
    max-height: calc(100vh - 68px - 9.5rem);
    max-height: calc(100dvh - 68px - 9.5rem);
    margin-inline: auto;
  }

  .rt-broadcast .rt-margin {
    max-height: calc(100vh - 68px - 4rem);
    max-height: calc(100dvh - 68px - 4rem);
  }
  .rt-broadcast .rt-margin__list { max-height: none; }
}

@media (max-width: 62rem) {
  .rt-broadcast { padding-block: var(--rt-s4) var(--rt-s6); }
  .rt-broadcast .rt-player { aspect-ratio: 16 / 9; }
}

/* The on-air line: state, then title. Laid out as a caption to the picture
   rather than three stacked fragments. */
.rt-nowbar { align-items: center; padding-top: var(--rt-s3); }
.rt-nowbar__state {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
}
.rt-nowbar__title { margin: var(--rt-s1) 0 0; }

/* ==========================================================================
   Donation form
   ========================================================================== */

.rt-give-form { max-width: 34rem; }

.rt-give-block {
  border: 0;
  padding: 0;
  margin: 0 0 var(--rt-s6);
}
.rt-give-block__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: var(--rt-s4);
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  color: var(--rt-text);
}
.rt-give-block__n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border: 1px solid var(--rt-rule);
  border-radius: 50%;
  font-family: var(--rt-mono);
  font-size: 0.75rem;
  color: var(--rt-gold);
}

/* Preset amounts. A blank number field asks the reader to invent a figure;
   four suggestions turn it into a choice. */
.rt-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rt-s2);
}
@media (max-width: 30rem) { .rt-amounts { grid-template-columns: repeat(2, 1fr); } }

.rt-amount {
  padding: var(--rt-s3) var(--rt-s2);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-base);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.18s var(--rt-ease), color 0.18s var(--rt-ease),
              background 0.18s var(--rt-ease);
}
.rt-amount:hover { border-color: var(--rt-rule); color: var(--rt-gold); }
.rt-amount[aria-pressed="true"] {
  background: var(--rt-gold-leaf);
  border-color: transparent;
  color: #16100a;
  font-weight: 600;
}

/* Radio cards. Native radios in a row are hard to hit and give no room to
   say what each option means. */
.rt-picks { display: grid; gap: var(--rt-s2); }

.rt-pick {
  display: flex;
  align-items: flex-start;
  gap: var(--rt-s3);
  padding: var(--rt-s4);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  cursor: pointer;
  transition: border-color 0.18s var(--rt-ease), background 0.18s var(--rt-ease);
}
.rt-pick:hover { border-color: var(--rt-rule); }
.rt-pick input {
  margin-top: 3px;
  accent-color: var(--rt-gold);
  flex: none;
}
.rt-pick__body { display: grid; gap: 2px; }
.rt-pick__body strong { font-size: var(--rt-t-base); color: var(--rt-text); }
.rt-pick__body small { font-size: var(--rt-t-xs); color: var(--rt-text-dim); }
.rt-pick:has(input:checked) {
  border-color: var(--rt-gold);
  background: color-mix(in srgb, var(--rt-emerald) 10%, transparent);
}

.rt-btn--lg { padding: 0.9rem 1.6rem; font-size: var(--rt-t-base); width: 100%; }

.rt-give-form__fine {
  margin: var(--rt-s3) 0 0;
  text-align: center;
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
}

/* ==========================================================================
   Course cards

   Descriptions vary in length, so without this the action button sat at a
   different height in every card and the row looked ragged.
   ========================================================================== */

.rt-grid { align-items: stretch; }
/* Three lines, always. min-height was set against an earlier font size, so
   a one-line description reserved 3.9em while a three-line one needed 4.8em
   and the two cards ended up different heights. Both numbers now derive
   from the same line-height, so the box is exactly three lines whatever
   fills it. */
.rt-course__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.6em);
}
.rt-course__foot { align-items: center; }


/* ==========================================================================
   Light theme

   Video wants a dark room; reading and studying want a lit page. The live
   broadcast keeps the night ground, and every other page switches to this one
   — set by data-theme="light" on <body> in layouts/app.blade.php.

   It is the same brand at a different hour, not a second design: identical
   gold, identical emerald, the same girih tessellation, the same rosette.
   Only the ground and the ink swap. Everything is done at token level, so
   each component follows without needing its own light-mode rule.

   The paper is a cool ivory rather than the warm cream that dark-on-light
   pages usually reach for, and the body text is a deep emerald ink rather
   than near-black, which keeps the daylight pages tied to the night ones.
   ========================================================================== */

[data-rt][data-theme="light"] {
  /* Paper, not parchment. The first attempt used a warm ivory and it read as
   dated rather than calm — beige plus an ornamental ground is the look of a
   2010 template. This is a near-white with the faintest green cast, so it
   stays related to the night theme without tinting the page yellow. */
  --rt-ink:        #f4f6f3;   /* the page */
  --rt-ink-2:      #ffffff;   /* raised card */
  --rt-ink-3:      #eef1ed;   /* hover / inset */
  --rt-ink-4:      #dde2dd;   /* dividers on tints */

  /* Two golds. The first is gold-as-ink and must clear 4.5:1 on white at
   label sizes, so it is deep. The leaf below is the fill. */
  --rt-gold:       #7d6018;
  --rt-gold-lift:  #96762c;
  --rt-gold-deep:  #5c4611;
  --rt-emerald:    #15604a;
  --rt-emerald-lo: #0d3b2d;

  --rt-text:       #16281f;   /* emerald ink, not black */
  --rt-text-dim:   #566a5e;
  --rt-text-ink:   #16281f;

  --rt-rule:       rgba(22, 40, 31, 0.16);
  --rt-rule-soft:  rgba(22, 40, 31, 0.08);
  --rt-veil:       rgba(244, 246, 243, 0.88);

  /* On white, a metallic gradient reads as a skeuomorphic button from an old
   theme. The primary action becomes solid deep emerald instead: it carries
   white text at 9:1, and it leaves gold free to do what it is actually good
   at here — rules, rosettes, labels and active states. */
  --rt-gold-leaf:  linear-gradient(180deg, #17694f 0%, #12563f 100%);
  --rt-gold-edge:  linear-gradient(90deg,
      transparent, rgba(125, 96, 24, 0.35), transparent);

  /* Shadows on paper are the whole story, so they are tighter and cooler than
   the night theme's, which had to fight a black ground. */
  --rt-lift-1: 0 1px 2px rgba(22, 40, 31, 0.04), 0 1px 3px rgba(22, 40, 31, 0.05);
  --rt-lift-2: 0 2px 4px rgba(22, 40, 31, 0.04), 0 8px 20px rgba(22, 40, 31, 0.08);
  --rt-lift-3: 0 4px 8px rgba(22, 40, 31, 0.05), 0 18px 44px rgba(22, 40, 31, 0.10);

  --rt-glow-gold: 0 0 0 1px rgba(21, 96, 74, 0.18),
                  0 12px 28px rgba(21, 96, 74, 0.12);

  --rt-surface:   #ffffff;
  --rt-surface-2: linear-gradient(180deg, #ffffff 0%, #f7f9f6 100%);

  --rt-parchment:   #16281f;
  --rt-parchment-2: #10201a;
}

/* Atmosphere. The tessellation is dropped from the page ground entirely: at
   any opacity that made it visible it turned the whole page into wallpaper.
   It survives where it belongs — inside the illuminated frame and behind
   the two quiet bands — and nowhere else. */
[data-rt][data-theme="light"]::before {
  background:
    radial-gradient(70% 55% at 6% 92%, rgba(21, 96, 74, 0.05), transparent 64%),
    radial-gradient(60% 45% at 96% 4%, rgba(125, 96, 24, 0.04), transparent 62%),
    var(--rt-ink);
}
[data-rt][data-theme="light"]::after { display: none; }

[data-theme="light"] .rt-verse::before,
[data-theme="light"] .rt-give::before,
[data-theme="light"] .rt-stage__band {
  background-image: url("../img/girih-ink.svg");
}
[data-theme="light"] .rt-verse::before,
[data-theme="light"] .rt-give::before { opacity: 0.035; }

/* pieces that named a colour instead of a token */

[data-theme="light"] .rt-masthead {
  background: color-mix(in srgb, #ffffff 86%, transparent);
  border-bottom-color: var(--rt-rule-soft);
}
/* The primary fill is emerald on this theme, not gold, so the label has to
   flip to white. Leaving the night theme's near-black ink on it would put
   dark text on a dark green button. */
[data-theme="light"] .rt-btn--gold,
[data-theme="light"] .rt-amount[aria-pressed="true"],
[data-theme="light"] #sendComment,
[data-theme="light"] .rt-avatar__badge,
[data-theme="light"] .profile-image-button,
[data-theme="light"] .profile-image-button i {
  color: #ffffff !important;
}
[data-theme="light"] .rt-btn--gold {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
              0 4px 12px rgba(18, 86, 63, 0.25);
}
[data-theme="light"] .rt-btn--gold:hover {
  background-position: 0 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 6px 18px rgba(18, 86, 63, 0.34);
  filter: brightness(1.12);
}
[data-theme="light"] .rt-avatar__badge,
[data-theme="light"] .profile-image-button { background: var(--rt-emerald) !important; }
[data-theme="light"] .rt-menu__badge { color: #fff; }

/* The player itself stays black whatever the page around it does. */
[data-theme="light"] .rt-player { background: #05100c; }
[data-theme="light"] .rt-player__wait {
  background:
    radial-gradient(120% 90% at 50% 0%, #16281f55 0%, transparent 60%),
    linear-gradient(180deg, #0a1b16, #050d0b);
  color: #9aa79f;
}

/* Section that was a light band on the dark theme becomes a dark band here,
   so the page still has a change of key partway down. */
[data-theme="light"] .rt-section--light { color: #ece7dc; }
[data-theme="light"] .rt-section--light .rt-card { background: #10201a; }
[data-theme="light"] .rt-section--light .rt-card__title { color: #ece7dc; }

/* The give band reads as an inked panel rather than a glow. */
[data-theme="light"] .rt-give {
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(150, 118, 44, 0.10), transparent 70%),
    #e9e7dd;
}
[data-theme="light"] .rt-verse {
  background:
    radial-gradient(80% 140% at 50% 0%, rgba(28, 107, 80, 0.09), transparent 70%),
    #eceada;
}
[data-theme="light"] .rt-footer {
  background:
    radial-gradient(80% 110% at 50% 0%, rgba(28, 107, 80, 0.07), transparent 66%),
    #e7e5da;
}
[data-theme="light"] .rt-pagehead,
[data-theme="light"] .rt-academy-hero,
[data-theme="light"] .rt-course-hero { background: var(--rt-surface-2); }
[data-theme="light"] .rt-pillar { background: #ffffff; }
[data-theme="light"] .rt-pillar:hover { background: #fbfaf5; }


/* ==========================================================================
   Light theme — components

   On a dark ground a hairline border is what separates a card from the page.
   On white it is the shadow that does that job, and keeping both makes every
   card look like a boxed-in table cell. Borders go, shadows carry it.
   ========================================================================== */

[data-theme="light"] .rt-card,
[data-theme="light"] .rt-course,
[data-theme="light"] .rt-note,
[data-theme="light"] .rt-side,
[data-theme="light"] .rt-factbox,
[data-theme="light"] .rt-curriculum,
[data-theme="light"] .rt-margin,
[data-theme="light"] .rt-row {
  border-color: transparent;
  box-shadow: var(--rt-lift-1);
}
[data-theme="light"] .rt-card:hover,
[data-theme="light"] .rt-course:hover,
[data-theme="light"] .rt-row:hover {
  border-color: transparent;
  box-shadow: var(--rt-lift-2);
  transform: translateY(-3px);
}
[data-theme="light"] .rt-enrol { box-shadow: var(--rt-lift-2); }

/* The scrim over card art existed to keep white text legible on the night
   theme. There is no text over the image here, so it only dulled the
   photograph — which on a course catalogue is the thing selling the course. */
[data-theme="light"] .rt-card__art::after,
[data-theme="light"] .rt-course__art::after { content: none; }

/* Pillars are separated by the grid's own hairlines; on paper they need a
   surface instead. */
[data-theme="light"] .rt-pillars {
  background: transparent;
  border: 0;
  gap: var(--rt-s4);
}
[data-theme="light"] .rt-pillar {
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  transition: box-shadow 0.24s var(--rt-ease), transform 0.24s var(--rt-ease);
}
[data-theme="light"] .rt-pillar:hover {
  box-shadow: var(--rt-lift-2);
  transform: translateY(-3px);
}

/* Filter chips read as buttons, not as washed-out tags. */
[data-theme="light"] .rt-chip {
  background: #ffffff;
  border-color: var(--rt-rule);
  box-shadow: var(--rt-lift-1);
}
[data-theme="light"] .rt-chip:hover { border-color: var(--rt-emerald); color: var(--rt-emerald); }
[data-theme="light"] .rt-chip[aria-pressed="true"] {
  background: var(--rt-text);
  border-color: var(--rt-text);
  color: #ffffff;
}

[data-theme="light"] .rt-search input,
[data-theme="light"] .rt-input { box-shadow: var(--rt-lift-1); }

/* Focus ring follows the theme's accent. */
/* data-rt and data-theme sit on the same element, so a descendant selector
   between them never matches. One selector, not two. */
[data-theme="light"] :focus-visible { outline-color: var(--rt-emerald); }

/* ==========================================================================
   Course card

   The button previously bottom-right with the meta row stranded on the left,
   so no two cards in a row lined up. Meta and action now sit on one baseline,
   and the description is clamped so every card in a row is the same height.
   ========================================================================== */

.rt-course__body { gap: var(--rt-s3); padding: var(--rt-s5) var(--rt-s4) var(--rt-s4); }
.rt-course__title { font-size: 1.0625rem; line-height: 1.35; }
.rt-course__desc { font-size: 0.875rem; line-height: 1.6; }

.rt-course__foot {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin-top: auto;
  padding-top: var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-course__foot .rt-btn { margin-inline-start: auto; }

/* The category label sits over the image rather than repeating above the
   title, which frees a line and gives the image an anchor. */
.rt-course__art { position: relative; }
.rt-course__tag {
  position: absolute;
  bottom: var(--rt-s3);
  inset-inline-start: var(--rt-s3);
  z-index: 1;
  padding: 0.22rem 0.55rem;
  border-radius: var(--rt-radius);
  background: var(--rt-veil);
  backdrop-filter: blur(8px);
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold);
}

/* sidebar */

[data-theme="light"] .rt-side { background: #ffffff; }
.rt-side__nav a {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
}
.rt-side__nav a::before {
  content: "";
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: transparent;
  transition: background 0.16s var(--rt-ease);
}
.rt-side__nav a[aria-current="page"]::before { background: var(--rt-emerald); }
[data-theme="light"] .rt-side__nav a[aria-current="page"] {
  background: var(--rt-ink-3);
  color: var(--rt-text);
}

/* stats bar */

.rt-stats {
  gap: 0;
  border-top: 0;
  padding-top: 0;
}
.rt-stat {
  padding-inline-end: var(--rt-s6);
  margin-inline-end: var(--rt-s6);
  border-inline-end: 1px solid var(--rt-rule-soft);
}
.rt-stat:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.rt-stat strong { font-size: 2rem; letter-spacing: -0.02em; }
[data-theme="light"] .rt-stat strong { color: var(--rt-text); }


/* ==========================================================================
   Matrimony profile card

   The list was an eight-column table, which on a phone became a horizontal
   scroll and on a desktop buried the two numbers that actually matter — how
   many people you have approached and how many have approached you. Those are
   now the largest thing after the name.
   ========================================================================== */

.rt-profile {
  display: flex;
  flex-direction: column;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  box-shadow: var(--rt-lift-1);
  transition: box-shadow 0.26s var(--rt-ease), transform 0.26s var(--rt-ease),
              border-color 0.26s var(--rt-ease);
}
.rt-profile:hover {
  transform: translateY(-3px);
  box-shadow: var(--rt-lift-2);
  border-color: var(--rt-rule);
}

.rt-profile__art {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--rt-ink-3);
  overflow: hidden;
}
[data-rt] .rt-profile__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--rt-ease);
}
.rt-profile:hover .rt-profile__art img { transform: scale(1.04); }

.rt-profile__body {
  display: flex;
  flex-direction: column;
  gap: var(--rt-s3);
  padding: var(--rt-s4);
  flex: 1;
}
.rt-profile__name {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--rt-text);
}
.rt-profile__meta {
  margin: 0;
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--rt-text-dim);
}

.rt-profile__facts { margin: 0; display: grid; gap: var(--rt-s2); }
.rt-profile__facts > div { display: flex; gap: var(--rt-s3); align-items: baseline; }
.rt-profile__facts dt {
  flex: none;
  width: 4.6rem;
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-profile__facts dd {
  margin: 0;
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
}

.rt-profile__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: auto;
  background: var(--rt-rule-soft);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  overflow: hidden;
}
.rt-profile__stats a {
  padding: var(--rt-s3);
  background: var(--rt-ink-2);
  text-align: center;
  transition: background 0.16s var(--rt-ease);
}
.rt-profile__stats a:hover { background: var(--rt-ink-3); }
.rt-profile__stats strong {
  display: block;
  font-family: var(--rt-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--rt-gold);
}
[data-theme="light"] .rt-profile__stats strong { color: var(--rt-emerald); }
.rt-profile__stats span {
  font-family: var(--rt-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}

.rt-profile__foot {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  padding-top: var(--rt-s3);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-profile__foot .rt-btn--gold { margin-inline-start: auto; }
.rt-profile__status { font-size: var(--rt-t-xs); }

/* the sidebar icons added by the matrimony shell */
.rt-side__icon { width: 1rem; text-align: center; opacity: 0.7; font-size: 0.8rem; }
.rt-side__nav a[aria-current="page"] .rt-side__icon { opacity: 1; color: var(--rt-emerald); }


/* ==========================================================================
   Person page and interest lists
   ========================================================================== */

.rt-person {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--rt-s5);
  align-items: center;
  padding: var(--rt-s5);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  margin-bottom: var(--rt-s5);
}
@media (max-width: 40rem) { .rt-person { grid-template-columns: 1fr; text-align: center; } }

.rt-person__art {
  aspect-ratio: 1;
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  background: var(--rt-ink-3);
}
[data-rt] .rt-person__art img { width: 100%; height: 100%; object-fit: cover; }

.rt-person__body { display: grid; gap: var(--rt-s2); }
.rt-person__name {
  font-family: var(--rt-display);
  font-size: var(--rt-t-xl);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: var(--rt-text);
}

/* The one-line summary: age, height, status, faith — separated by rules
   rather than bullets so it reads as a caption, not a list. */
.rt-person__line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s3);
  margin: 0;
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
}
@media (max-width: 40rem) { .rt-person__line { justify-content: center; } }
.rt-person__line span { display: flex; align-items: center; }
.rt-person__line span + span::before {
  content: "";
  width: 1px;
  height: 0.9em;
  margin-inline-end: var(--rt-s3);
  background: var(--rt-rule);
}
.rt-person__acts {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin-top: var(--rt-s2);
  flex-wrap: wrap;
}
@media (max-width: 40rem) { .rt-person__acts { justify-content: center; } }

/* a titled block of detail */

.rt-panel-block {
  padding: var(--rt-s5);
  margin-bottom: var(--rt-s4);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
.rt-panel-block__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0 0 var(--rt-s4);
  padding-bottom: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-panel-block__head .rt-rosette { width: 13px; height: 13px; }

/* Two columns of label/value. Labels are fixed width so the values line up
   into a column the eye can run down. */
.rt-datalist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--rt-s3) var(--rt-s5);
  margin: 0;
}
.rt-datalist > div { display: flex; gap: var(--rt-s3); align-items: baseline; }
.rt-datalist dt {
  flex: none;
  width: 8rem;
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-datalist dd { margin: 0; font-size: var(--rt-t-sm); color: var(--rt-text); }

.rt-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-locked i { color: var(--rt-gold); opacity: 0.6; }

/* compact person card used inside interest lists */

.rt-mini {
  display: flex;
  flex-direction: column;
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  overflow: hidden;
  transition: border-color 0.2s var(--rt-ease), transform 0.2s var(--rt-ease);
}
.rt-mini:hover { border-color: var(--rt-rule); transform: translateY(-2px); }
.rt-mini__art { aspect-ratio: 1; background: var(--rt-ink-3); overflow: hidden; }
[data-rt] .rt-mini__art img { width: 100%; height: 100%; object-fit: cover; }
.rt-mini__body { padding: var(--rt-s3); display: grid; gap: var(--rt-s2); }
.rt-mini__name {
  margin: 0;
  font-family: var(--rt-display);
  font-size: var(--rt-t-sm);
  font-weight: 700;
  color: var(--rt-text);
}
.rt-mini__meta { margin: 0; font-size: 0.6875rem; color: var(--rt-text-dim); line-height: 1.5; }
.rt-mini__foot { display: flex; align-items: center; gap: var(--rt-s2); flex-wrap: wrap; }

.rt-profile__about {
  margin: 0;
  font-size: var(--rt-t-sm);
  line-height: 1.6;
  color: var(--rt-text-dim);
}


/* ==========================================================================
   Auth pages
   ========================================================================== */

.rt-authpage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--rt-s5);
  padding: var(--rt-s6) var(--rt-s4);
}

.rt-authpage__panel {
  position: relative;
  width: min(27rem, 100%);
  padding: var(--rt-s6) var(--rt-s5) var(--rt-s5);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(203, 166, 88, 0.10), transparent 60%),
    var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-3);
}
.rt-authpage__panel::before {
  content: "";
  position: absolute;
  inset-inline: 18%;
  top: 0;
  height: 1px;
  background: var(--rt-gold-edge);
}

.rt-authpage__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s5);
}
[data-rt] .rt-authpage__brand img { height: 34px; width: auto; }

.rt-authpage__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-xl);
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--rt-s2);
}
.rt-authpage__sub {
  margin: 0 0 var(--rt-s5);
  text-align: center;
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
}
.rt-authpage__foot {
  margin: 0;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rt-authpage__foot a { color: var(--rt-text-dim); }
.rt-authpage__foot a:hover { color: var(--rt-gold); }

/* label on the left, helper link on the right, on one line */
.rt-field__row {
  display: flex;
  align-items: baseline;
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s1);
}
.rt-field__row label { margin-bottom: 0; }
.rt-field__aside {
  margin-inline-start: auto;
  font-size: var(--rt-t-xs);
  color: var(--rt-gold);
}
.rt-field__aside:hover { text-decoration: underline; text-underline-offset: 3px; }

/* password field with a reveal button inside it */
.rt-reveal-field { position: relative; }
.rt-reveal-field .form-control { padding-inline-end: 2.75rem; }
.rt-reveal-field__btn {
  position: absolute;
  inset-inline-end: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: calc(100% - 4px);
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--rt-text-dim);
  cursor: pointer;
  border-radius: var(--rt-radius);
}
.rt-reveal-field__btn:hover { color: var(--rt-gold); }

.rt-alert--ok {
  background: color-mix(in srgb, var(--rt-emerald) 16%, transparent);
  border-color: color-mix(in srgb, var(--rt-emerald) 45%, transparent);
}
.rt-alert ul { margin: 0; padding-inline-start: var(--rt-s4); }
.rt-alert li + li { margin-top: var(--rt-s1); }


/* ==========================================================================
   Academy storefront
   ========================================================================== */

.rt-academy-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--rt-s7);
  align-items: center;
}
@media (max-width: 62rem) {
  .rt-academy-hero__grid { grid-template-columns: 1fr; gap: var(--rt-s5); }
}
.rt-academy-hero__title { max-width: 18ch; }

/* The three counts, lifted into a panel so they read as a claim rather than
   as stray numbers floating above the search box. */
.rt-stats--panel {
  gap: 0;
  padding: var(--rt-s5);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  justify-content: space-around;
}
.rt-stats--panel .rt-stat { text-align: center; }

/* how it works */

.rt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--rt-s5);
  counter-reset: step;
}
.rt-steps li {
  display: flex;
  gap: var(--rt-s4);
  align-items: flex-start;
}
.rt-steps__n {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rt-rule);
  border-radius: 50%;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-sm);
  color: var(--rt-gold);
}
.rt-steps strong {
  display: block;
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  color: var(--rt-text);
  margin-bottom: var(--rt-s1);
}
.rt-steps p { margin: 0; font-size: var(--rt-t-sm); color: var(--rt-text-dim); line-height: 1.6; }

/* On the storefront the hero and the pillars share one surface; the pillars
   are statements, not links, so they lose the arrow affordance. */
.rt-pillar:not(a) { cursor: default; }
.rt-pillar:not(a):hover { transform: none; }


/* ==========================================================================
   Error pages
   ========================================================================== */

.rt-errorpage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s6) var(--rt-s4);
  text-align: center;
}
.rt-errorpage__mark { width: 40px; height: 40px; opacity: 0.55; margin-bottom: var(--rt-s3); }
.rt-errorpage__code {
  margin: 0;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.3em;
  color: var(--rt-gold);
}
.rt-errorpage__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 16ch;
}
.rt-errorpage__text {
  max-width: 44ch;
  margin: 0 0 var(--rt-s4);
  color: var(--rt-text-dim);
  line-height: 1.7;
}

/* ==========================================================================
   Quiz

   The question and its options are written into #contain by quiz-take.js, so
   these style markup this stylesheet never sees in a Blade file. The class
   names below are the ones that script emits; changing them there means
   changing them here too.
   ========================================================================== */

.rt-quiz {
  max-width: 46rem;
  margin-inline: auto;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  overflow: hidden;
}
.rt-quiz__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s4) var(--rt-s5);
  border-bottom: 1px solid var(--rt-rule-soft);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-quiz__head .rt-rosette { width: 13px; height: 13px; }
.rt-quiz__body { padding: var(--rt-s6) var(--rt-s5); }
.rt-quiz__foot {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s4) var(--rt-s5);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-quiz__foot .btn,
.rt-quiz__foot .rt-btn { margin-inline-start: auto; }

/* the counter the script fills in */
#summary {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
#summary #currentQuestion { color: var(--rt-gold); font-weight: 600; }

/* the question itself */
[data-rt] #contain { font-size: var(--rt-t-md); line-height: 1.7; }
[data-rt] #contain > .row:first-child { margin-bottom: var(--rt-s5); }
[data-rt] #contain img.image-item {
  max-width: 100%;
  border-radius: var(--rt-radius);
  margin-block: var(--rt-s3);
}

/* an answer option: the whole row is the target, not just the little circle */
[data-rt] #contain .form-check {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0 0 var(--rt-s2) !important;
  padding: var(--rt-s3) var(--rt-s4);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  cursor: pointer;
  transition: border-color 0.16s var(--rt-ease), background 0.16s var(--rt-ease);
}
[data-rt] #contain .form-check:hover { border-color: var(--rt-rule); }
[data-rt] #contain .form-check:has(input:checked) {
  border-color: var(--rt-gold);
  background: color-mix(in srgb, var(--rt-emerald) 12%, transparent);
}
[data-rt] #contain .form-check-input { margin: 0; flex: none; accent-color: var(--rt-gold); }
[data-rt] #contain label { margin: 0; cursor: pointer; flex: 1; }

/* free-text answers */
[data-rt] #contain .form-control-solid { margin-bottom: var(--rt-s2); }

/* quiz result: a score, then the answers */
.rt-score {
  display: grid;
  justify-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s6);
  margin-bottom: var(--rt-s5);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  text-align: center;
}
.rt-score strong {
  font-family: var(--rt-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--rt-gold);
}
.rt-score span {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}


/* ==========================================================================
   Touch

   Applied on pointers that are not precise, so a mouse keeps the tighter
   desktop rhythm and a finger gets room. WCAG 2.5.8 asks for 24px; list links
   and controls are taken to 44px, which is the size a thumb actually needs.
   Inline links inside a sentence are exempt and stay as they are.
   ========================================================================== */

@media (pointer: coarse) {
  /* Lists of links: footer columns, the account sidebar, the margin tabs */
  .rt-footer ul a,
  .rt-side__nav a,
  .rt-menu__item,
  .rt-nav[data-open="true"] a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .rt-tabs button { min-height: 46px; }

  /* Native radios and checkboxes are 13px by default. The wrapping label is
   the real target, but the control itself should still be catchable. */
  .rt-choice__opt input,
  .rt-pick input,
  [data-rt] .form-check-input,
  [data-rt] input[type="radio"],
  [data-rt] input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  /* Anything wrapping a control becomes a full-width row */
  .rt-choice__opt,
  .rt-pick { min-height: 44px; }

  /* Icon-only buttons */
  .rt-margin__nav button,
  .rt-class__icon,
  .rt-modal__close,
  .rt-reveal-field__btn { min-width: 44px; min-height: 44px; }

  /* Small secondary labels are legible at 11px, not 10 */
  .rt-chip__n,
  .rt-course__tag,
  .rt-unit__tag,
  .rt-profile__stats span,
  .rt-mini__meta { font-size: 0.6875rem; }

  /* Cards and rows get a touch more room between them so a mis-tap does not
   land on the neighbour */
  .rt-grid { gap: var(--rt-s4); }
}

/* Very narrow phones: 320px is still a real device */
@media (max-width: 22.5rem) {
  :root { --rt-s5: 1.15rem; --rt-s6: 1.5rem; }
  .rt-shell { padding-inline: var(--rt-s3); }
  .rt-panel-block,
  .rt-person,
  .rt-authpage__panel { padding: var(--rt-s4); }
  .rt-datalist dt,
  .rt-profile__facts dt { width: 6.5rem; }
  .rt-stat strong { font-size: 1.5rem; }
}


/* ==========================================================================
   Mobile

   Measured on a 390px viewport rather than guessed at. Two classes of problem
   showed up: tap targets under 36px, and the mono labels rendering at
   10–11px, which is below what most people can read comfortably at arm's
   length.

   Both are widened here rather than at every call site, so a component added
   later inherits the behaviour.
   ========================================================================== */

@media (max-width: 48rem) {

  /* tap targets Apple and Android both put the comfortable minimum near 44px.
   Anything a thumb is meant to hit gets there; links inside running prose
   are left alone, because padding them would break the line. */

  .rt-btn { min-height: 44px; }
  .rt-btn--sm { min-height: 38px; }

  .rt-chip { min-height: 40px; display: inline-flex; align-items: center; }

  .rt-nav a,
  .rt-side__nav a,
  .rt-menu__item,
  .rt-footer ul a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .rt-tabs button { min-height: 46px; }

  .rt-backlink,
  .rt-field__aside,
  .rt-pillar__go {
    padding-block: var(--rt-s2);
    min-height: 40px;
    align-items: center;
  }

  .rt-margin__nav button,
  .rt-class__icon,
  .rt-menu__toggle,
  .rt-modal__close { min-width: 42px; min-height: 42px; }

  /* Radios and checkboxes ship at 13px in most browsers, which is a hard
   target on glass even when the label is clickable. */
  [data-rt] input[type="radio"],
  [data-rt] input[type="checkbox"],
  [data-rt] .form-check-input {
    width: 20px;
    height: 20px;
  }
  .rt-pick, .rt-choice__opt { min-height: 44px; }

  /* legibility The mono labels are set in the 0.625–0.6875rem range on
   desktop, which is right beside larger type. On a phone they are read
   alone, so they come up to 0.75rem and lose a little of their
   letterspacing to stay compact. */

  .rt-card__meta,
  .rt-card__kicker,
  .rt-course__tag,
  .rt-course__meta span,
  .rt-course__progress,
  .rt-mini__meta,
  .rt-slot__sub,
  .rt-locked,
  .rt-unit__tag,
  .rt-profile__meta,
  .rt-profile__facts dt,
  .rt-datalist dt,
  .rt-facts dt,
  .rt-stat span,
  .rt-classes__head,
  .rt-progress,
  .rt-menu__badge,
  .rt-course__state,
  .rt-profile__stats span {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  .rt-eyebrow,
  .rt-tabs button,
  .rt-footer h3,
  .rt-panel-block__head,
  .rt-factbox__head,
  .rt-or,
  .rt-margin__date span,
  .rt-nowbar__meta,
  .rt-quiz__head,
  .rt-index__head,
  .rt-errorpage__code,
  .rt-authpage__foot,
  .rt-curriculum__head .rt-card__meta { font-size: 0.75rem; }

  /* Body copy a touch larger; phone reading distance is longer than a desk. */
  .rt-lede { font-size: 1rem; }
  .rt-prose { font-size: 1rem; }
  .rt-course__desc, .rt-note__body, .rt-pillar p { font-size: 0.9375rem; }

  /* spacing Panels lose some inner padding so content is not squeezed into a
   column narrower than it needs to be. */
  .rt-panel-block,
  .rt-person,
  .rt-factbox,
  .rt-side,
  .rt-enrol,
  .rt-authpage__panel { padding: var(--rt-s4); }

  .rt-quiz__body { padding: var(--rt-s5) var(--rt-s4); }
  .rt-quiz__head, .rt-quiz__foot { padding-inline: var(--rt-s4); }

  /* A row of actions that would otherwise overflow wraps and fills instead. */
  .rt-course__foot,
  .rt-profile__foot,
  .rt-nowbar__end,
  .rt-give__actions,
  .rt-person__acts { flex-wrap: wrap; }
  .rt-course__foot .rt-btn,
  .rt-profile__foot .rt-btn--gold { margin-inline-start: auto; }

  /* Section headers stack rather than squeezing a title beside a button. */
  .rt-section__head { flex-direction: column; align-items: flex-start; gap: var(--rt-s3); }
  .rt-section__head .rt-btn { margin-inline-start: 0; }
}

/* Very small phones: 320px still has to work. */
@media (max-width: 22.5rem) {
  .rt-shell { padding-inline: var(--rt-s3); }
  .rt-brand__word { font-size: 1.05rem; }
  [data-rt] .rt-brand img { height: 30px; }
  .rt-stats { gap: var(--rt-s3); }
  .rt-stat { padding-inline-end: var(--rt-s3); margin-inline-end: var(--rt-s3); }
  .rt-stat strong { font-size: 1.5rem; }
  .rt-oauth { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Layout overview

   Four things the measurements turned up once the whole site was in place.
   ========================================================================== */

/* 1. Sticky header vs in-page anchors. The masthead is 68px and sticky, so
   any link to #something scrolled the target underneath it. Everything that
   can be an anchor destination now reserves that height plus a little air. */
:target,
[data-rt] section[id],
[data-rt] [id]:not(body):not(html) { scroll-margin-top: calc(68px + var(--rt-s5)); }

/* 2. Vertical rhythm. Content sections were running at 24px top and bottom
   while the closing bands used 72px, so the middle of a page felt cramped
   against generous ends. Panel pages now open at a consistent, larger
   interval. */
/* Named intervals rather than inline overrides. Nineteen views were setting
   padding-block inline, which beat every class rule and made the site's
   vertical rhythm impossible to change from one place. */
.rt-section         { padding-block: var(--rt-s7); }
.rt-section--snug   { padding-block: var(--rt-s6); }
.rt-section--tight  { padding-block: var(--rt-s5); }
@media (max-width: 48rem) {
  .rt-section        { padding-block: var(--rt-s6); }
  .rt-section--snug,
  .rt-section--tight { padding-block: var(--rt-s5); }
}

/* 3. One picture ratio per job. Course art, card art and profile art were
   on 16:9, 16:10 and 4:3, which reads as three slightly different systems
   when they sit near each other. Editorial art is 16:9 everywhere; a person
   keeps 4:3, because faces need the height. */
.rt-card__art { aspect-ratio: 16 / 9; }
.rt-enrol__art { aspect-ratio: 16 / 9; }
.rt-row__art { aspect-ratio: 16 / 9; }

/* 4. Links inside running text. Colour alone does not distinguish a link
   for a reader who cannot see the difference between gold and the body
   colour. Prose links carry an underline; navigation and buttons do not
   need one, because their shape already says what they are. */
.rt-prose a,
.rt-note__body a,
.rt-modal__note a,
.rt-authpage__foot a,
.rt-lede a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.rt-prose a:hover { text-decoration-thickness: 2px; }


/* ==========================================================================
   Academy hero

   It read as empty rather than calm: no image, no depth, and the page's only
   colour arriving three screens down.

   The hero now borrows the channel's night ground. That does three things at
   once — it gives the page an anchor with real weight, it ties the academy
   back to the broadcast it belongs to, and it lets the course artwork sit on
   a dark field where it actually looks like something.
   ========================================================================== */

[data-theme="light"] .rt-academy-hero {
  position: relative;
  background:
    radial-gradient(70% 90% at 12% 100%, rgba(46, 139, 107, 0.28), transparent 62%),
    radial-gradient(60% 80% at 92% 0%, rgba(203, 166, 88, 0.16), transparent 60%),
    linear-gradient(160deg, #0c1c17 0%, #071310 62%, #050f0c 100%);
  border-bottom: 0;
  overflow: hidden;
  padding-block: var(--rt-s8) var(--rt-s8);
}
[data-theme="light"] .rt-academy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/girih.svg");
  background-size: 190px 190px;
  opacity: 0.05;
  pointer-events: none;
}
/* a gilt rule closing the panel, as under the masthead */
[data-theme="light"] .rt-academy-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 211, 160, 0.5), transparent);
}
[data-theme="light"] .rt-academy-hero .rt-shell { position: relative; z-index: 1; }

/* Text on the dark panel flips to the night palette regardless of page
   theme */
[data-theme="light"] .rt-academy-hero .rt-academy-hero__title,
[data-theme="light"] .rt-academy-hero .rt-stat strong { color: #ece7dc; }
[data-theme="light"] .rt-academy-hero .rt-eyebrow { color: #cba658; }
[data-theme="light"] .rt-academy-hero .rt-lede,
[data-theme="light"] .rt-academy-hero .rt-stat span { color: #9aa79f; }
[data-theme="light"] .rt-academy-hero .rt-btn--gold {
  background: linear-gradient(135deg, #a8843a 0%, #cba658 22%, #f0dcb0 48%, #cba658 74%, #a8843a 100%);
  background-size: 200% 100%;
  color: #16100a !important;
}
[data-theme="light"] .rt-academy-hero .rt-btn--ghost {
  border-color: rgba(203, 166, 88, 0.35);
  color: #ece7dc;
}
[data-theme="light"] .rt-academy-hero .rt-btn--ghost:hover {
  border-color: #cba658;
  color: #cba658;
}

/* The headline is set tighter here; at 80px a 3-line measure was the whole
   screen. Four words a line is enough. */
.rt-academy-hero__title { max-width: 15ch; letter-spacing: -0.025em; }

/* the artwork stack Real course banners, overlapped like a hand of cards. A
   course catalogue sells on its pictures; a hero with none is a brochure
   with the photographs left out. */
.rt-hero-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rt-s3);
}
.rt-hero-stack figure {
  margin: 0;
  aspect-ratio: 16 / 11;
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(203, 166, 88, 0.22);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}
[data-rt] .rt-hero-stack img { width: 100%; height: 100%; object-fit: cover; }
.rt-hero-stack figure:nth-child(1) { transform: translateY(var(--rt-s4)); }
.rt-hero-stack figure:nth-child(4) { transform: translateY(calc(var(--rt-s4) * -1)); }
@media (max-width: 62rem) {
  .rt-hero-stack { grid-template-columns: repeat(4, 1fr); gap: var(--rt-s2); }
  .rt-hero-stack figure { aspect-ratio: 1; transform: none !important; }
}
@media (max-width: 30rem) {
  .rt-hero-stack { grid-template-columns: repeat(2, 1fr); }
}

/* the counts, now inside the dark panel */
[data-theme="light"] .rt-academy-hero .rt-stats--panel {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(203, 166, 88, 0.18);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

/* pillars with more presence Plain white boxes with a small mark read as
   placeholders. A numbered rule and a heavier top edge give each one a
   reason to be a card. */
.rt-pillar { position: relative; padding-top: var(--rt-s6); }
.rt-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--rt-s5);
  height: 2px;
  background: var(--rt-gold-leaf);
  border-radius: 0 0 2px 2px;
  opacity: 0.8;
}


/* ==========================================================================
   Filter bar (matrimony match form)

   general.blade.php was written against .rt-filterbar and .rt-pager, but the
   rules for them were never added — so a twelve-field form rendered as one
   long single column with sliders floating in it. That is the whole reason
   the page looked broken.
   ========================================================================== */

.rt-filterbar {
  padding: var(--rt-s5);
  margin-bottom: var(--rt-s6);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}

.rt-filterbar__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s5);
  padding-bottom: var(--rt-s4);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-filterbar__head h2 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0;
}
.rt-filterbar__head .rt-rosette { width: 14px; height: 14px; flex: none; }

/* Three across on a desk, two on a tablet, one on a phone. The two sliders
   are given the full width of a row, because a range needs the travel. */
.rt-filterbar__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rt-s4) var(--rt-s5);
  align-items: start;
}
@media (max-width: 62rem) { .rt-filterbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .rt-filterbar__grid { grid-template-columns: 1fr; } }

.rt-filterbar__grid .rt-field { margin-bottom: 0; }
.rt-filterbar__grid .rt-field:has(.ui-slider),
.rt-filterbar__grid .rt-field:has([data-plugin-slider]) { grid-column: span 1; }

.rt-filterbar__foot {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  flex-wrap: wrap;
  margin-top: var(--rt-s5);
  padding-top: var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-filterbar__foot .rt-btn--gold { margin-inline-start: auto; }

/* the value beside a slider label */
.rt-filterbar label .rt-field__aside {
  font-family: var(--rt-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rt-emerald);
  font-weight: 600;
}
[data-theme="dark"] .rt-filterbar label .rt-field__aside { color: var(--rt-gold); }

/* the slider needs breathing room inside a grid cell */
.rt-filterbar .ui-slider { margin-block: var(--rt-s5) var(--rt-s3); }

/* pagination */

.rt-pager { margin-top: var(--rt-s6); }
.rt-pager nav { display: flex; justify-content: center; }
.rt-pager .pagination { flex-wrap: wrap; justify-content: center; }


/* ==========================================================================
   Refinements
   ========================================================================== */

/* 1. Profile cards of equal height The "about" paragraph varies from one
   line to five, so cards in a row ended at different heights and the action
   sat at a different place in each. The blurb is clamped and the action
   pinned to the foot. */
.rt-profile__about {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.6em);
}
.rt-profile__facts { min-height: 5.4rem; align-content: start; }
.rt-profile__foot { margin-top: auto; }

/* A person's photograph is the whole point of the card, so it gets more
   room and is framed on the upper body rather than cropped through the
   face. */
.rt-profile__art { aspect-ratio: 4 / 3; }
[data-rt] .rt-profile__art img { object-position: 50% 22%; }

/* "View profile" was a bare text link doing the job of the primary action. */
.rt-profile__foot .rt-btn--quiet {
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  padding: 0.4rem 0.8rem;
  color: var(--rt-text);
}
.rt-profile__foot .rt-btn--quiet:hover { border-color: var(--rt-gold); color: var(--rt-gold); }

/* 2. Course hero: the banner was bleeding through the headline At 0.16
   opacity the poster's own baked-in title showed behind the page title,
   which read as a rendering fault. The image now sits behind a proper scrim
   and only survives on the side away from the text. */
/* The scrim has to stay fully opaque for as long as the headline runs. The
   title reaches about 62% of the width at its longest, so the fade starts
   at 66% — measured, not guessed. Course banners usually have their own
   title printed on them, and seeing that ghosted behind the page title
   reads as a rendering fault rather than as texture. */
.rt-course-hero__bg { opacity: 0.55; }
.rt-course-hero__bg::after {
  background:
    linear-gradient(90deg, var(--rt-ink-2) 0%, var(--rt-ink-2) 66%,
                    color-mix(in srgb, var(--rt-ink-2) 55%, transparent) 84%, transparent 100%);
}
[data-theme="light"] .rt-course-hero__bg::after {
  background:
    linear-gradient(90deg, #ffffff 0%, #ffffff 66%,
                    rgba(255, 255, 255, 0.60) 84%, rgba(255, 255, 255, 0.15) 100%);
}
/* and a soft floor, so the metadata row at the bottom never sits on a busy
   part of the picture */
.rt-course-hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  z-index: 0;
  background: linear-gradient(180deg, transparent, var(--rt-ink-2));
  pointer-events: none;
}
[data-theme="light"] .rt-course-hero::before {
  background: linear-gradient(180deg, transparent, #ffffff);
}
[data-theme="light"] .rt-course-hero { background: #ffffff; }
.rt-course-hero__title { max-width: 20ch; }

/* 3. Curriculum rows: less air between the title and its tags */
.rt-curriculum { --rt-unit-gap: var(--rt-s5); }
.rt-unit { grid-template-columns: 2.4rem minmax(0, 34rem) auto; }
.rt-unit__tags { margin-inline-start: auto; }

/* 4. Filter bar: a ragged last row reads as a mistake The radio pair is
   narrower than a field, so it is allowed to share a row rather than
   leaving a hole. */
.rt-filterbar__grid > .rt-field:last-child:nth-child(3n - 1) { grid-column: span 2; }
.rt-filterbar .rt-choice__opt { margin-inline-end: var(--rt-s4); }

/* Radios sized like the rest of the controls */
.rt-filterbar input[type="radio"] { width: 18px; height: 18px; accent-color: var(--rt-emerald); }

/* 5. Auth page: quieter ground, aligned controls */
.rt-authpage { position: relative; }
.rt-authpage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../img/girih.svg");
  background-size: 120px 120px;
  opacity: 0.022;
  pointer-events: none;
}
.rt-authpage__panel .rt-choice__opt {
  gap: var(--rt-s3);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
}
.rt-authpage__panel .rt-choice__opt input { width: 17px; height: 17px; }
.rt-authpage__panel .rt-btn--gold { margin-top: var(--rt-s2); }


/* On a phone the headline uses the full width, so a left-to-right scrim can
   never clear it. The picture drops to a texture instead of an image there
   — there is no room for it to be a picture anyway. */
@media (max-width: 48rem) {
  .rt-course-hero__bg { opacity: 0.18; }
  .rt-course-hero__bg::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--rt-ink-2) 55%, transparent), var(--rt-ink-2));
  }
  [data-theme="light"] .rt-course-hero__bg::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.55), #ffffff);
  }
}

/* ==========================================================================
   Academy — lesson player, storefront, enrolment panel

   Three structural moves, then finish work:

   1. The lesson pages leave the account shell. A student watching a lesson
   was shown "Your account", a profile avatar and the practice/exam menu
   before the video — two sidebars deep. The classroom is now its own
   full-width room: a slim course bar on top, the film in the middle, the
   index of parts at the side, nothing that is not the course.

   2. On the course page the enrol plate rises into the hero and stays put
   while the curriculum scrolls — the one card that asks for a decision is the
   one card that is always in view.

   3. The masthead no longer overflows a phone. Signed in, the bell, the
   account chip and the burger measured 431px on a 390px screen, so every page
   scrolled sideways. The name comes off the chip below 46rem; the avatar is
   the chip.
   ========================================================================== */

/* masthead on a phone */

@media (max-width: 46rem) {
  .rt-masthead__inner { gap: var(--rt-s3); }
  .rt-masthead__end   { gap: var(--rt-s2); }
  .rt-menu__toggle    { padding: 0.4rem 0.5rem; }
  /* the account chip keeps its picture and loses its words */
  #headerAccount .rt-menu__toggle > span { display: none; }
}

/* the classroom bar Replaces the "Your account" page head above a lesson.
   One line: the way back, the name of the course, and how far through it
   you are. */

.rt-classbar {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  padding-bottom: var(--rt-s4);
  margin-bottom: var(--rt-s5);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-classbar .rt-backlink { margin: 0; flex: none; }
.rt-classbar__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-classbar__progress {
  margin-inline-start: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
}
.rt-classbar__progress .rt-progress__bar { width: 6.5rem; margin: 0; }
@media (max-width: 40rem) {
  .rt-classbar__title { white-space: normal; flex-basis: 100%; order: 3; }
}

/* the lesson room */

.rt-lesson { grid-template-columns: minmax(0, 1fr) 21rem; }
@media (max-width: 62rem) { .rt-lesson { grid-template-columns: 1fr; } }

/* The index holds its place while the film plays, and grows to the room's
   height instead of stopping at an arbitrary 30rem. */
@media (min-width: 62rem) {
  .rt-index {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 104px);
  }
  .rt-index__list { flex: 1; max-height: none; }
}

/* a part that carries a quiz is marked in its index row */
.rt-step__q {
  font-size: 0.65rem;
  color: var(--rt-gold);
  opacity: 0.7;
  margin-inline-start: var(--rt-s2);
}

/* under the film: title row with the way forward and back */

.rt-nowbar__nav { display: flex; gap: var(--rt-s2); flex: none; margin-inline-start: auto; }

/* assignments as plates, not table rows */

.rt-assign {
  padding: var(--rt-s3);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-surface);
  box-shadow: var(--rt-lift-1);
}
.rt-assign__ic {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--rt-radius);
  background: color-mix(in srgb, var(--rt-gold) 14%, transparent);
  border: 1px solid var(--rt-rule-soft);
  color: var(--rt-gold);
}
.rt-assign .rt-assign__ic i { margin-inline-start: 0; }
.rt-assign__label { font-weight: 500; min-width: 0; }
.rt-assign__go {
  margin-inline-start: auto;
  color: var(--rt-text-dim);
  transition: transform 0.22s var(--rt-ease), color 0.22s var(--rt-ease);
}
.rt-assign:hover { color: var(--rt-text); }
.rt-assign:hover .rt-assign__go { transform: translateX(4px); color: var(--rt-gold); }

/* the one-to-one review card */

.rt-tutor {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  margin-top: var(--rt-s6);
  padding: var(--rt-s4) var(--rt-s5);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
.rt-tutor__ic {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rt-rule);
  color: var(--rt-gold);
}
.rt-tutor__body { flex: 1 1 16rem; min-width: 0; }
.rt-tutor__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  margin: 0 0 2px;
}
.rt-tutor__text { margin: 0; font-size: var(--rt-t-sm); color: var(--rt-text-dim); }
.rt-tutor .rt-btn { flex: none; margin-inline-start: auto; }

/* closing a lesson The form that moves you on is the most important control
   in the room, so it carries the gilded top edge the enrol plate wears. */

.rt-finish {
  position: relative;
  overflow: hidden;
  box-shadow: var(--rt-lift-1);
}
.rt-finish::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: var(--rt-gold-leaf);
}
.rt-finish input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--rt-emerald);
}
.rt-finish--done {
  align-items: center;
  color: var(--rt-emerald);
  font-weight: 600;
}
.rt-finish--done .rt-rosette { width: 18px; height: 18px; color: var(--rt-emerald); }

/* ==========================================================================
   Course page — split hero and overlapping enrolment panel
   ========================================================================== */

@media (min-width: 62rem) {
  .rt-course-hero--split { min-height: 24rem; display: grid; align-items: center; }
  .rt-course-hero--split > .rt-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--rt-s7);
    width: 100%;
  }
  /* the right column is only a reservation; the plate itself lives in the
   section below and is pulled up over the seam */
  .rt-detail--float > .rt-enrol { margin-top: -16rem; }
}
/* z-index alone; position stays sticky from the base rule, or the plate
   scrolls away with the page instead of holding while the curriculum runs */
.rt-detail--float > .rt-enrol { z-index: 2; }

/* the facts a reader weighs before enrolling, set as small sealed pills */
.rt-fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s2);
  margin-top: var(--rt-s5);
}
.rt-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--rt-rule-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rt-ink-2) 55%, transparent);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.04em;
  color: var(--rt-text);
  font-variant-numeric: tabular-nums;
}
.rt-fact i { color: var(--rt-gold); font-size: 0.8em; }
[data-theme="light"] .rt-fact { background: #ffffff; box-shadow: var(--rt-lift-1); }

/* the enrol plate */

.rt-enrol {
  overflow: hidden;
  border-color: var(--rt-rule);
}
.rt-enrol::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  background: var(--rt-gold-leaf);
}
.rt-enrol__corner {
  position: absolute;
  width: 13px; height: 13px;
  color: var(--rt-gold);
  opacity: 0.5;
  top: 11px;
}
.rt-enrol__corner--tl { inset-inline-start: 9px; }
.rt-enrol__corner--tr { inset-inline-end: 9px; }
.rt-enrol__corner svg { width: 100%; height: 100%; }

.rt-enrol__price-row {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0 0 var(--rt-s1);
}
.rt-enrol__price { margin: 0; font-size: 1.9rem; line-height: 1; }
.rt-enrol__badge {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-emerald);
  border: 1px solid color-mix(in srgb, var(--rt-emerald) 45%, transparent);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}

/* curriculum rows earn a hand */

.rt-unit { padding-block: 0.85rem; }
.rt-unit__go {
  width: 14px; height: 14px;
  color: var(--rt-text-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--rt-ease), transform 0.2s var(--rt-ease);
}
a.rt-unit:hover .rt-unit__go { opacity: 1; transform: none; color: var(--rt-gold); }

/* ==========================================================================
   Academy storefront — detail
   ========================================================================== */

/* course art breathes on hover — the photograph is the sales pitch */
@media (prefers-reduced-motion: no-preference) {
  .rt-course__art img { transition: transform 0.6s var(--rt-ease); }
  .rt-course:hover .rt-course__art img { transform: scale(1.045); }
}

/* the four steps wear the rosette's diamond, not a generic circle */
.rt-steps__n {
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--rt-surface);
  box-shadow: var(--rt-lift-1);
}
.rt-steps__n i {
  font-style: normal;
  transform: rotate(-45deg);
}
.rt-steps li { padding-inline-start: 4px; }

/* on a phone the artwork folds to one strip of four, not a 2×2 block that
   fills the first screen */
@media (max-width: 30rem) {
  .rt-hero-stack { grid-template-columns: repeat(4, 1fr); }
  .rt-stats { gap: var(--rt-s5); }
}

/* ==========================================================================
   Video frame, masthead, margin panel, factbox

   Raised from a review against the running site. The floating rosettes at the
   stage corners read as loose buttons rather than a frame; the 72px logo
   blurred on every retina screen; the programme factbox collapsed when a pill
   class landed on its name; and the schedule wrapped its own times.
   ========================================================================== */

/* the brand, sharp and at the true left edge */

/* The masthead runs the full width of the window on every page, so the mark
   sits at the left edge of the screen — level with the broadcast frame —
   instead of at the edge of a centred column. */
.rt-masthead .rt-shell {
  max-width: 100%;
  padding-inline: clamp(1rem, 2.6vw, 2.25rem);
}
/* The bridge sheet carries a responsive helper — [data-rt] img { height:
   auto } — that loads after this file and, at equal specificity, can
   override the 38px brand rule. These win on specificity, not order. */
[data-rt] .rt-brand img { height: 42px; width: auto; }
[data-rt] .rt-menu__toggle img { height: 22px; }
.rt-brand__word { font-size: 1.36rem; }

/* the navigation */

.rt-nav { gap: 2px; }
.rt-nav a {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  transition: color 0.2s var(--rt-ease), background 0.2s var(--rt-ease);
}
.rt-nav a:hover { background: color-mix(in srgb, var(--rt-text) 7%, transparent); }
.rt-nav a::after { bottom: 4px; }
.rt-nav a[aria-current="page"] {
  font-weight: 600;
  background: color-mix(in srgb, var(--rt-gold) 10%, transparent);
}

/* the stage, framed like a plate rather than pinned at the corners The
   rosettes that floated half outside the frame are not used: four loose
   medallions read as UI controls, not as a border. In their place the frame
   itself does the work — an outer gold rule, an inner gilded fillet, and
   corner ticks cut into the fillet the way a mount is cut for a plate. */

.rt-stage__corner { display: none; }

.rt-stage {
  padding: 14px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rt-gold) 26%, transparent),
    var(--rt-lift-3),
    0 40px 110px -30px rgba(203, 166, 88, 0.16);
}

/* the gilded fillet with its corner ticks */
.rt-stage::before {
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--rt-gold) 42%, transparent);
  --tick: linear-gradient(var(--rt-gold-lift), var(--rt-gold-lift));
  background-image:
    var(--tick), var(--tick), var(--tick), var(--tick),
    var(--tick), var(--tick), var(--tick), var(--tick);
  background-repeat: no-repeat;
  background-size: 16px 2px, 2px 16px,  16px 2px, 2px 16px,
                   16px 2px, 2px 16px,  16px 2px, 2px 16px;
  background-position:
    top -1px left -1px,     top -1px left -1px,
    top -1px right -1px,    top -1px right -1px,
    bottom -1px left -1px,  bottom -1px left -1px,
    bottom -1px right -1px, bottom -1px right -1px;
}
.rt-stage__band { opacity: 0.14; inset: 4px; padding: 10px; }
[data-theme="light"] .rt-stage__band { opacity: 0.08; }
[data-theme="light"] .rt-stage {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rt-gold) 30%, transparent),
    var(--rt-lift-3);
}

/* under the broadcast */

.rt-broadcast .rt-nowbar__title { font-size: var(--rt-t-xl); letter-spacing: -0.015em; }
.rt-nowbar__state { display: flex; align-items: center; gap: var(--rt-s4); }
.rt-nowbar__meta { font-family: var(--rt-mono); letter-spacing: 0.08em; }

/* the margin panel v2 */

.rt-margin {
  position: relative;
  border-color: var(--rt-rule);
  box-shadow: var(--rt-lift-2);
}
.rt-margin::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: var(--rt-gold-leaf);
  z-index: 1;
}
.rt-margin__head { padding-top: calc(var(--rt-s4) + 2px); }
.rt-margin__date strong { font-family: var(--rt-display); font-size: var(--rt-t-md); }

.rt-tabs button {
  padding-block: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.rt-tabs button[aria-selected="true"] {
  color: var(--rt-gold);
  box-shadow: inset 0 -2px 0 var(--rt-gold);
}

/* schedule rows: the hour is a chip that never wraps */
.schedule { grid-template-columns: 5rem minmax(0, 1fr); align-items: start; }
.schedule .rt-slot__time,
.rt-slot__time { white-space: nowrap; }
.schedule .rt-slot__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
}

/* verses on the message tab read as inscriptions, not chat bubbles */
.rt-quote {
  position: relative;
  margin: 0 0 var(--rt-s2);
  padding: var(--rt-s3) var(--rt-s4) var(--rt-s3) calc(var(--rt-s4) + 6px);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  line-height: 1.75;
  color: var(--rt-text);
  box-shadow: var(--rt-lift-1);
}
.rt-quote::before {
  content: "";
  position: absolute;
  inset-block: 8px; inset-inline-start: 0;
  width: 2px;
  background: var(--rt-gold-leaf);
  border-radius: 2px;
}

/* the programme factbox v2 The card that answers "what is this?" beside a
   recording. Labels in the margin hand, values in the text hand, one
   hairline between each fact. */

/* No `position` here. A sticky box is just as good a containing block for
   the absolutely positioned band. */
.rt-factbox {
  overflow: hidden;
  border-color: var(--rt-rule);
  box-shadow: var(--rt-lift-2);
}
.rt-factbox::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: var(--rt-gold-leaf);
}
.rt-facts { display: block; }
.rt-facts dt {
  padding-top: var(--rt-s3);
  color: var(--rt-gold);
  letter-spacing: 0.14em;
}
.rt-facts dd {
  margin: 3px 0 0;
  padding-bottom: var(--rt-s3);
  font-size: var(--rt-t-base);
  line-height: 1.55;
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-facts dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* the storefront hero, gilded word */

.rt-gild {
  font-style: italic;
  color: var(--rt-gold-lift);
  padding-inline-end: 0.06em;
}
[data-theme="light"] .rt-gild { color: var(--rt-gold); }

/* a banner that failed to load must never show the browser's broken-image
   glyph in the middle of the storefront */
[data-rt] .rt-hero-stack img { display: block; background: var(--rt-ink-3); }

/* pillars carry a sealed emblem, not a bare mark */

.rt-pillar > .rt-rosette {
  box-sizing: content-box;
  padding: 9px;
  border: 1px solid var(--rt-rule);
  border-radius: 50%;
  background: color-mix(in srgb, var(--rt-gold) 9%, transparent);
  color: var(--rt-gold);
  margin-bottom: var(--rt-s2);
}
.rt-pillar__title { font-size: var(--rt-t-lg); }

/* the shelf: continue-learning cards */

.rt-rail .rt-course__progress { margin-top: var(--rt-s1); }
.rt-rail .rt-progress__bar { height: 4px; }
.rt-rail .rt-course__foot .rt-btn { width: 100%; }

/* the worksheet: assignments live inside one plate */

.rt-sheet {
  margin-top: var(--rt-s6);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  overflow: hidden;
}
.rt-sheet__head {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s4) var(--rt-s5);
  border-bottom: 1px solid var(--rt-rule-soft);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-sheet__head .rt-rosette { width: 13px; height: 13px; }
.rt-sheet__count { margin-inline-start: auto; color: var(--rt-text-dim); letter-spacing: 0.06em; }
.rt-sheet__body { padding: var(--rt-s3); display: grid; gap: var(--rt-s2); }
.rt-sheet .rt-assign { box-shadow: none; border: 1px solid var(--rt-rule-soft); margin: 0; }
.rt-sheet .rt-assign + .rt-assign { margin: 0; }

/* the about page */

.rt-abouthero { display: grid; gap: var(--rt-s6); align-items: center; }
@media (min-width: 62rem) {
  .rt-abouthero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--rt-s7); }
}
.rt-plate {
  position: relative;
  padding: 10px;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-2);
}
[data-rt] .rt-plate img { display: block; width: 100%; border-radius: var(--rt-radius); }
.rt-plate::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--rt-gold) 35%, transparent);
  border-radius: var(--rt-radius);
  pointer-events: none;
}

.rt-tierhead {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: var(--rt-s6) 0 var(--rt-s4);
}
.rt-tierhead h3 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.rt-tierhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rt-rule), transparent);
}
.rt-tierhead .rt-rosette { width: 14px; height: 14px; color: var(--rt-gold); }

.rt-postergrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: var(--rt-s4);
}
.rt-poster {
  display: block;
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  border: 1px solid var(--rt-rule-soft);
  box-shadow: var(--rt-lift-1);
  background: var(--rt-ink-3);
  transition: transform 0.3s var(--rt-ease), box-shadow 0.3s var(--rt-ease);
}
[data-rt] .rt-poster img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rt-poster:hover { transform: translateY(-4px); box-shadow: var(--rt-lift-2), var(--rt-glow-gold); }

.rt-statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--rt-s5);
  padding: var(--rt-s5) var(--rt-s5);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  text-align: center;
}

.rt-contactband { display: grid; gap: var(--rt-s4); }
@media (min-width: 48rem) { .rt-contactband { grid-template-columns: repeat(3, 1fr); } }
.rt-contactband a, .rt-contactband address {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0;
  padding: var(--rt-s4);
  font-style: normal;
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
.rt-contactband i { color: var(--rt-gold); width: 1.1rem; text-align: center; }
.rt-contactband a:hover { color: var(--rt-gold); }

/* ==========================================================================
   Course hero, matrimony matches, long forms
   ========================================================================== */

/* the course page opens dark, like the storefront On paper the course hero
   read as a washed white band with a ghost of the banner in it. A course
   page is a frontispiece: it opens on the same night ground as the academy
   hero, whatever theme the rest of the page wears. */

[data-theme="light"] .rt-course-hero {
  background:
    radial-gradient(70% 90% at 12% 100%, rgba(46, 139, 107, 0.28), transparent 62%),
    radial-gradient(60% 80% at 92% 0%, rgba(203, 166, 88, 0.16), transparent 60%),
    linear-gradient(160deg, #0c1c17 0%, #071310 62%, #050f0c 100%);
  border-bottom: 0;
}
[data-theme="light"] .rt-course-hero .rt-course-hero__title { color: #f5efe0; }
[data-theme="light"] .rt-course-hero .rt-lede { color: rgba(242, 234, 216, 0.78); }
[data-theme="light"] .rt-course-hero .rt-eyebrow { color: #d9b96c; }
[data-theme="light"] .rt-course-hero .rt-backlink { color: rgba(242, 234, 216, 0.62); }
[data-theme="light"] .rt-course-hero .rt-backlink:hover { color: #d9b96c; }
[data-theme="light"] .rt-course-hero .rt-fact {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(203, 166, 88, 0.28);
  color: #f2ead8;
  box-shadow: none;
}
[data-theme="light"] .rt-course-hero .rt-fact i { color: #d9b96c; }
[data-theme="light"] .rt-course-hero__bg::after {
  background: linear-gradient(90deg, #071310 30%, rgba(7, 19, 16, 0.55) 70%, rgba(7, 19, 16, 0.25)),
              linear-gradient(0deg, #050f0c, transparent 40%);
}

/* a match is two people */

.rt-matchhero {
  text-align: center;
  padding: var(--rt-s6) 0 var(--rt-s6);
}
.rt-matchhero__mark {
  width: 26px; height: 26px;
  color: var(--rt-gold);
  margin-bottom: var(--rt-s3);
}
.rt-matchhero__title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-xl);
  font-weight: 700;
  margin: 0 0 var(--rt-s2);
}

.rt-match {
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  overflow: hidden;
}
.rt-match--wide { max-width: 40rem; margin-inline: auto; }

.rt-match__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}
.rt-match__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: var(--rt-s5) var(--rt-s4) var(--rt-s4);
  color: var(--rt-text);
  transition: background 0.2s var(--rt-ease);
}
.rt-match__side:hover { background: color-mix(in srgb, var(--rt-gold) 5%, transparent); }
[data-rt] .rt-match__side img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rt-surface);
  outline: 1px solid var(--rt-rule);
  box-shadow: var(--rt-lift-1);
  margin-bottom: var(--rt-s3);
}
.rt-match__side strong {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  line-height: 1.25;
}
.rt-match__side span {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
}

/* the rosette that ties the two sides, on its own hairline */
.rt-match__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  color: var(--rt-gold);
}
.rt-match__link::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rt-rule), transparent);
}
.rt-match__link .rt-rosette {
  position: relative;
  width: 22px; height: 22px;
  padding: 8px;
  box-sizing: content-box;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: 50%;
}

.rt-match__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--rt-s3);
  padding: var(--rt-s3) var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
  background: color-mix(in srgb, var(--rt-gold) 4%, transparent);
}

/* browse cards: the numbers and the state */

.rt-profile__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--rt-s3);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  overflow: hidden;
}
.rt-profile__stats a {
  padding: var(--rt-s2) var(--rt-s3);
  text-align: center;
  color: var(--rt-text-dim);
  transition: background 0.18s var(--rt-ease);
}
.rt-profile__stats a:hover { background: color-mix(in srgb, var(--rt-gold) 6%, transparent); }
.rt-profile__stats a + a { border-inline-start: 1px solid var(--rt-rule-soft); }
.rt-profile__stats strong {
  display: block;
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  line-height: 1.1;
  color: var(--rt-text);
}
.rt-profile__stats span {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rt-profile__foot { align-items: center; }
.rt-profile__foot .rt-btn--sm { min-width: 7.4rem; justify-content: center; }

/* interest already shown: the button settles into a sealed state */
/* !important answers the light-theme gold rule, which paints button text
   white with !important of its own */
[data-rt] .rt-btn.uninterested {
  border-color: color-mix(in srgb, var(--rt-emerald) 50%, transparent) !important;
  color: var(--rt-emerald) !important;
  background: color-mix(in srgb, var(--rt-emerald) 8%, transparent) !important;
  box-shadow: none;
}
[data-rt] .rt-btn.uninterested:hover {
  border-color: var(--rt-emerald) !important;
  color: var(--rt-emerald) !important;
}

/* gated contact rows on a profile */
.rt-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.28rem 0.65rem;
  border: 1px dashed var(--rt-rule);
  border-radius: 999px;
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-locked i { color: var(--rt-gold); font-size: 0.7rem; }

/* the person at the head of a profile page sits in a plate */
[data-rt] .rt-person__art img {
  border: 3px solid var(--rt-surface);
  outline: 1px solid var(--rt-rule);
  box-shadow: var(--rt-lift-2);
}

/* ==========================================================================
   Long forms — join us, matrimony create and edit All four share
   .contact-form, so one hand dresses them all: the form becomes a plate with
   a gilded top edge, the fields get room to breathe, and focus is marked in
   gold instead of browser blue.
   ========================================================================== */

.contact-form {
  position: relative;
  overflow: hidden;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-2);
  padding: var(--rt-s6) clamp(var(--rt-s4), 4vw, var(--rt-s7)) var(--rt-s7);
}
.contact-form::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  background: var(--rt-gold-leaf);
}

/* the nested panel-block wrappers inside these forms flatten away */
.contact-form .rt-panel-block { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* the "set your current info" strip becomes a quiet notice */
.contact-form > .rt-panel-block > .rt-panel-block:first-child {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s3) var(--rt-s4);
  margin-bottom: var(--rt-s5);
  background: color-mix(in srgb, var(--rt-gold) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--rt-gold) 30%, transparent);
  border-radius: var(--rt-radius);
  font-weight: 500;
}
.contact-form > .rt-panel-block > .rt-panel-block:first-child i { color: var(--rt-gold); }

.contact-form .go-back {
  display: inline-block;
  margin-bottom: var(--rt-s4);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.contact-form .go-back:hover { color: var(--rt-gold); }
.contact-form .go-back::before { content: "\2190\00a0"; }

.contact-form .row { row-gap: var(--rt-s4); margin-bottom: var(--rt-s2); }
.contact-form .form-group { margin-bottom: var(--rt-s2); }

.contact-form .form-label {
  font-size: var(--rt-t-sm);
  font-weight: 600;
  color: var(--rt-text);
  margin-bottom: 0.35rem;
}
.contact-form .form-label.required::after,
.contact-form label.required::after { content: " *"; color: var(--rt-vermilion); }

.contact-form .form-control,
.contact-form .form-select {
  min-height: 2.85rem;
  padding: 0.55rem 0.9rem;
  background: var(--rt-paper, #fff);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
  box-shadow: none;
  transition: border-color 0.2s var(--rt-ease), box-shadow 0.2s var(--rt-ease);
}
/* the bridge closes every focus ring with its own strong rules; the form
   plate opens one back, in gold */
[data-rt] .contact-form .form-control:focus,
[data-rt] .contact-form .form-select:focus {
  border-color: var(--rt-gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 22%, transparent) !important;
  outline: none;
}
.contact-form .form-control.error { border-color: var(--rt-vermilion); }
.contact-form .input-group-text {
  background: color-mix(in srgb, var(--rt-gold) 8%, transparent);
  border: 1px solid var(--rt-rule);
  border-inline-end: 0;
  color: var(--rt-gold);
  border-start-start-radius: var(--rt-radius);
  border-end-start-radius: var(--rt-radius);
}
.contact-form .input-group .form-control {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.contact-form .alert.error-alert { font-size: var(--rt-t-xs); margin-top: 4px; }

/* the photo, centred in a gold ring with the camera badge */
.contact-form .profile-image-outer-container { text-align: center; }
.contact-form .profile-image-inner-container {
  position: relative;
  display: inline-block;
  width: 128px; height: 128px;
  border-radius: 50%;
  background: var(--rt-ink-3);
  border: 3px solid var(--rt-surface);
  outline: 2px solid color-mix(in srgb, var(--rt-gold) 55%, transparent);
  box-shadow: var(--rt-lift-2);
  overflow: visible;
  cursor: pointer;
}
.contact-form .profile-image-inner-container img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.contact-form .profile-image-button {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rt-emerald) !important;
  border: 2px solid var(--rt-surface);
  box-shadow: var(--rt-lift-1);
}
.contact-form .profile-image-input { margin: var(--rt-s3) auto 0; max-width: 16rem; }

.contact-form .commitment label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--rt-s2) var(--rt-s2) 0;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rt-rule);
  border-radius: 999px;
  font-size: var(--rt-t-sm);
  background: var(--rt-paper, #fff);
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease);
}
.contact-form .commitment label:hover { border-color: var(--rt-gold); }
.contact-form .commitment label:has(input:checked) {
  border-color: var(--rt-emerald);
  background: color-mix(in srgb, var(--rt-emerald) 9%, transparent);
}
.contact-form .commitment input { accent-color: var(--rt-emerald); margin: 0; }

.contact-form [type="submit"] { min-width: 11rem; }

/* the join page splits: why on the left, the form on the right */

.rt-join { display: grid; gap: var(--rt-s6); align-items: start; }
@media (min-width: 62rem) {
  .rt-join { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--rt-s7); }
  .rt-join__aside { position: sticky; top: 92px; }
}
.rt-join__aside {
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  padding: var(--rt-s5);
}
.rt-join__aside h2 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0 0 var(--rt-s3);
}
.rt-join__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rt-s3); }
.rt-join__aside li { display: flex; gap: var(--rt-s3); font-size: var(--rt-t-sm); color: var(--rt-text-dim); }
.rt-join__aside li .rt-rosette { flex: none; width: 13px; height: 13px; margin-top: 3px; color: var(--rt-gold); }
.rt-join__aside li strong { display: block; color: var(--rt-text); }

/* ==========================================================================
   Donation — amounts and types
   ========================================================================== */

.rt-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--rt-s3); }
.rt-amount {
  padding: var(--rt-s4) var(--rt-s3);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-md);
  font-variant-numeric: tabular-nums;
  color: var(--rt-text);
  cursor: pointer;
  box-shadow: var(--rt-lift-1);
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease),
              transform 0.2s var(--rt-ease), box-shadow 0.2s var(--rt-ease);
}
.rt-amount:hover { border-color: var(--rt-gold); transform: translateY(-2px); }
.rt-amount.active,
.rt-amount[aria-pressed="true"] {
  border-color: var(--rt-gold);
  background: color-mix(in srgb, var(--rt-gold) 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 20%, transparent), var(--rt-lift-1);
  font-weight: 600;
}

/* the number field loses its browser spinner; it is money, not a stepper */
.rt-give-form input[type="number"]::-webkit-outer-spin-button,
.rt-give-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rt-give-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* the three kinds of giving, as selectable plates */
.rt-pick {
  display: flex;
  align-items: flex-start;
  gap: var(--rt-s3);
  padding: var(--rt-s4);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  cursor: pointer;
  box-shadow: var(--rt-lift-1);
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease),
              box-shadow 0.2s var(--rt-ease);
}
.rt-pick:hover { border-color: var(--rt-gold); }
.rt-pick input { margin-top: 4px; accent-color: var(--rt-emerald); }
.rt-pick:has(input:checked) {
  border-color: var(--rt-emerald);
  background: color-mix(in srgb, var(--rt-emerald) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-emerald) 15%, transparent), var(--rt-lift-1);
}
.rt-pick__body strong { display: block; font-size: var(--rt-t-base); }
.rt-pick__body small { color: var(--rt-text-dim); font-size: var(--rt-t-sm); }

/* ==========================================================================
   Sign-in panel
   ========================================================================== */

.rt-modal__box {
  position: relative;
  border: 1px solid var(--rt-rule);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rt-gold) 22%, transparent),
              0 40px 100px -20px rgba(0, 0, 0, 0.5);
}
.rt-modal__box::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  background: var(--rt-gold-leaf);
}
.rt-modal__mark .rt-rosette { width: 26px; height: 26px; color: var(--rt-gold); }

.rt-oauth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rt-s3); }
.rt-oauth a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  font-weight: 600;
  /* --rt-paper is a light-theme token. On the sign-in page, which is always
   dark, it fell back to plain white while the text stayed the dark theme's
   pale ink -- near-white lettering on a white button. Both sides now come
   from theme-aware tokens. */
  color: var(--rt-text);
  background: var(--rt-surface);
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease);
}
.rt-oauth a:hover { border-color: var(--rt-gold); background: color-mix(in srgb, var(--rt-gold) 6%, transparent); }
.rt-oauth i { color: var(--rt-gold); }

.rt-or {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: var(--rt-s4) 0;
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-or::before, .rt-or::after { content: ""; flex: 1; height: 1px; background: var(--rt-rule-soft); }

.rt-modal .rt-field input:focus {
  border-color: var(--rt-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 22%, transparent);
  outline: none;
}

/* ==========================================================================
   About page, footer, steps, checkbox, academy rail the Academy keeps its
   student rail, and the paginator stops shouting.
   ========================================================================== */

/* the About frontispiece The page opened on flat paper with a plate
   floating in it. It now opens on the same night ground as the Academy and
   course pages, so all three entrances to the channel look like one
   building. */

.rt-pagehead--dark {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  padding-block: var(--rt-s8);
}
[data-theme="light"] .rt-pagehead--dark,
.rt-pagehead--dark {
  background:
    radial-gradient(70% 90% at 10% 100%, rgba(46, 139, 107, 0.30), transparent 62%),
    radial-gradient(58% 80% at 94% 0%, rgba(203, 166, 88, 0.18), transparent 58%),
    linear-gradient(160deg, #0c1c17 0%, #071310 62%, #050f0c 100%);
}
.rt-pagehead--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/girih.svg");
  background-size: 190px 190px;
  opacity: 0.06;
  pointer-events: none;
}
.rt-pagehead--dark > * { position: relative; }
[data-theme="light"] .rt-pagehead--dark .rt-pagehead__title { color: #f5efe0; }
[data-theme="light"] .rt-pagehead--dark .rt-lede { color: rgba(242, 234, 216, 0.78); }
[data-theme="light"] .rt-pagehead--dark .rt-eyebrow { color: #d9b96c; }

/* the plate that holds the foundation's own mark */
.rt-pagehead--dark .rt-plate {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(203, 166, 88, 0.32);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7);
}
.rt-pagehead--dark .rt-plate::before { border-color: rgba(203, 166, 88, 0.45); }

/* the poster shelves Sixteen course banners in one flat grid read as noise:
   every banner carries its own title, its own colour and its own type. Each
   tier now sits on its own plate, the tiles are larger and fewer to a row,
   and a vignette pulls the loudest banners back so the page has one voice
   instead of sixteen. */

.rt-shelf {
  margin-top: var(--rt-s5);
  padding: var(--rt-s5);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
.rt-shelf + .rt-shelf { margin-top: var(--rt-s5); }
.rt-shelf .rt-tierhead { margin-top: 0; }

.rt-postergrid {
  grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
  gap: var(--rt-s4);
}
.rt-poster {
  position: relative;
  isolation: isolate;
}
.rt-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 19, 16, 0.08), rgba(7, 19, 16, 0.42));
  transition: opacity 0.3s var(--rt-ease);
}
.rt-poster:hover::after { opacity: 0.45; }
[data-rt] .rt-poster img { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: no-preference) {
  .rt-poster img { transition: transform 0.5s var(--rt-ease); }
  .rt-poster:hover img { transform: scale(1.05); }
}

/* the two remaining services Matrimony and Support are advertised with wide
   strip banners; cropping them to a 16:10 tile cut the wordmark in half.
   They keep their own proportion and sit in a card that carries the words
   instead. */

.rt-servicecard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  transition: transform 0.3s var(--rt-ease), box-shadow 0.3s var(--rt-ease);
}
.rt-servicecard:hover { transform: translateY(-3px); box-shadow: var(--rt-lift-2), var(--rt-glow-gold); }
.rt-servicecard__art {
  display: block;
  background: var(--rt-ink-3);
  border-bottom: 1px solid var(--rt-rule-soft);
}
[data-rt] .rt-servicecard__art img {
  display: block;
  width: 100%;
  aspect-ratio: 24 / 7;
  object-fit: cover;
  object-position: center;
}
.rt-servicecard__body { padding: var(--rt-s5); }
.rt-servicecard__body h3 {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0 0 var(--rt-s2);
}
.rt-servicecard__body h3 .rt-rosette { width: 15px; height: 15px; color: var(--rt-gold); flex: none; }
.rt-servicecard__body p { margin: 0 0 var(--rt-s4); color: var(--rt-text-dim); font-size: var(--rt-t-sm); }

/* the counted figures A white strip of four numbers was the quietest thing
   on the page while being the only hard evidence on it. It becomes a gilded
   plate. */

.rt-statband {
  position: relative;
  overflow: hidden;
  padding: var(--rt-s6) var(--rt-s5);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(203, 166, 88, 0.14), transparent 70%),
    linear-gradient(160deg, #0c1c17, #071310);
  border: 1px solid rgba(203, 166, 88, 0.28);
  box-shadow: var(--rt-lift-2);
}
.rt-statband::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: var(--rt-gold-leaf);
}
.rt-statband .rt-stat { position: relative; }
.rt-statband .rt-stat + .rt-stat::before {
  content: "";
  position: absolute;
  inset-block: 12%;
  inset-inline-start: calc(var(--rt-s5) * -0.5);
  width: 1px;
  background: rgba(203, 166, 88, 0.22);
}
.rt-statband .rt-stat strong {
  font-family: var(--rt-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: #f5efe0;
  font-variant-numeric: tabular-nums;
}
.rt-statband .rt-stat span { color: #d9b96c; }
@media (max-width: 34rem) {
  .rt-statband .rt-stat + .rt-stat::before { display: none; }
}

/* getting in touch */

.rt-contactband a:hover { border-color: var(--rt-gold); }
.rt-contactband i { font-size: 1.05rem; }

/* ==========================================================================
   Closing donation appeal
   ========================================================================== */

.rt-give { padding-block: var(--rt-s8) calc(var(--rt-s8) + var(--rt-s4)); }
.rt-give__title { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }

/* a rule of gold either side of the rosette, the way a colophon closes */
.rt-give .rt-divider { position: relative; }

/* the two figures that make the appeal concrete */
.rt-give__facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--rt-s3);
  margin-top: var(--rt-s5);
}
.rt-give__facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rt-rule-soft);
  border-radius: 999px;
  background: var(--rt-surface);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.05em;
  color: var(--rt-text-dim);
}
.rt-give__facts i { color: var(--rt-gold); }

[data-theme="light"] .rt-give {
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(203, 166, 88, 0.20), transparent 70%),
    linear-gradient(180deg, var(--rt-surface-2), #efece1);
  border-top: 1px solid var(--rt-rule-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.rt-footer { padding-block: var(--rt-s8) var(--rt-s5); }
.rt-footer__grid { gap: var(--rt-s6) var(--rt-s6); }

/* each column heading gets its own hairline, so the four lists read as
   separate panels rather than one wall of links */
.rt-footer h3 {
  padding-bottom: var(--rt-s2);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-footer ul { gap: 0; }
.rt-footer li a {
  display: block;
  padding-block: 0.4rem;
  transition: color 0.2s var(--rt-ease), padding-inline-start 0.2s var(--rt-ease);
}
.rt-footer li a:hover { padding-inline-start: 6px; }

.rt-footer__brand p { margin: 0 0 var(--rt-s4); }
.rt-footer__contact {
  list-style: none;
  margin: 0 0 var(--rt-s4);
  padding: 0;
  display: grid;
  gap: var(--rt-s2);
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
}
.rt-footer__contact li { display: flex; gap: var(--rt-s3); align-items: flex-start; }
.rt-footer__contact i { color: var(--rt-gold); width: 1rem; text-align: center; margin-top: 3px; }
.rt-footer__contact a { display: inline; padding: 0; }

.rt-social { display: flex; gap: var(--rt-s2); }
.rt-social a {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rt-rule-soft);
  border-radius: 50%;
  color: var(--rt-text-dim);
  transition: border-color 0.2s var(--rt-ease), color 0.2s var(--rt-ease),
              transform 0.2s var(--rt-ease);
}
.rt-social a:hover {
  border-color: var(--rt-gold);
  color: var(--rt-gold);
  transform: translateY(-2px);
  padding-inline-start: 0;
}

.rt-footer__base { justify-content: space-between; }
.rt-footer__base nav { display: flex; gap: var(--rt-s4); flex-wrap: wrap; }

/* daylight: the footer was a flat beige band with grey type on it */
[data-theme="light"] .rt-footer {
  background:
    radial-gradient(80% 110% at 50% 0%, rgba(28, 107, 80, 0.06), transparent 66%),
    linear-gradient(180deg, #edeae0, #e4e1d5);
  border-top: 1px solid var(--rt-rule);
}
[data-theme="light"] .rt-footer::before { opacity: 0.75; }

/* ==========================================================================
   How it works — step sequence
   ========================================================================== */

.rt-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--rt-s5);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rt-step;
}
.rt-steps li {
  position: relative;
  display: block;
  padding: var(--rt-s5) var(--rt-s4) var(--rt-s4);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  text-align: center;
  transition: transform 0.25s var(--rt-ease), box-shadow 0.25s var(--rt-ease),
              border-color 0.25s var(--rt-ease);
}
.rt-steps li:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rt-gold) 45%, transparent);
  box-shadow: var(--rt-lift-2);
}
/* the thread that runs between the plates */
.rt-steps li::after {
  content: "";
  position: absolute;
  top: calc(var(--rt-s5) + 21px);
  inset-inline-start: 100%;
  width: var(--rt-s5);
  height: 1px;
  background: linear-gradient(90deg, var(--rt-rule), transparent);
}
.rt-steps li:last-child::after { display: none; }

.rt-steps__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin: 0 auto var(--rt-s3);
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--rt-surface);
  border: 1px solid color-mix(in srgb, var(--rt-gold) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rt-gold) 9%, transparent);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-sm);
  font-weight: 600;
  color: var(--rt-gold);
}
.rt-steps__n i { font-style: normal; transform: rotate(-45deg); }
.rt-steps li strong {
  display: block;
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  margin-bottom: 4px;
}
.rt-steps li p { margin: 0; font-size: var(--rt-t-sm); color: var(--rt-text-dim); }

@media (max-width: 62rem) {
  .rt-steps li::after { display: none; }
}

/* ==========================================================================
   Lesson completion control
   ========================================================================== */

.rt-finish {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  padding: var(--rt-s4) var(--rt-s5);
}
.rt-finish .rt-choice__opt { margin: 0; }
.rt-finish .rt-btn { margin-inline-start: auto; }

/* a hand-drawn box: gold rule, emerald fill and a drawn tick when checked */
.rt-check {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s3);
  cursor: pointer;
  font-size: var(--rt-t-base);
  line-height: 1.3;
  user-select: none;
}
.rt-check input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.rt-check__box {
  position: relative;
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--rt-rule);
  border-radius: 7px;
  background: var(--rt-paper, #fff);
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease),
              box-shadow 0.2s var(--rt-ease);
}
.rt-check__box svg {
  width: 14px; height: 14px;
  stroke: #fff;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.28s var(--rt-ease);
}
.rt-check:hover .rt-check__box { border-color: var(--rt-gold); }
.rt-check input:focus-visible + .rt-check__box {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 30%, transparent);
}
.rt-check input:checked + .rt-check__box {
  background: var(--rt-emerald);
  border-color: var(--rt-emerald);
}
.rt-check input:checked + .rt-check__box svg { stroke-dashoffset: 0; }
.rt-check__label { color: var(--rt-text); }

/* ==========================================================================
   Student rail (links to the account pages)
   ========================================================================== */

.rt-studentbar {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  flex-wrap: wrap;
  padding: var(--rt-s3) var(--rt-s4);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
.rt-studentbar__lede {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
  padding-inline-end: var(--rt-s3);
  border-inline-end: 1px solid var(--rt-rule-soft);
}
.rt-studentbar__lede .rt-rosette { width: 13px; height: 13px; }
.rt-studentbar__links { display: flex; gap: var(--rt-s1); flex-wrap: wrap; }
.rt-studentbar__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: var(--rt-t-sm);
  font-weight: 500;
  color: var(--rt-text-dim);
  transition: background 0.2s var(--rt-ease), color 0.2s var(--rt-ease);
}
.rt-studentbar__links a:hover {
  background: color-mix(in srgb, var(--rt-gold) 11%, transparent);
  color: var(--rt-text);
}
.rt-studentbar__links i { color: var(--rt-gold); font-size: 0.85em; }
@media (max-width: 48rem) {
  .rt-studentbar__lede { border: 0; padding: 0; flex-basis: 100%; }
}

/* ==========================================================================
   Live classes on an enrolled course
   ========================================================================== */

.rt-classlist {
  margin-top: var(--rt-s3);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  overflow: hidden;
}
.rt-classrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--rt-s2) var(--rt-s3);
  align-items: center;
  padding: var(--rt-s3);
  background: color-mix(in srgb, var(--rt-gold) 4%, transparent);
}
.rt-classrow + .rt-classrow { border-top: 1px solid var(--rt-rule-soft); }
.rt-classrow__when {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--rt-text);
  white-space: nowrap;
}
.rt-classrow__when i { color: var(--rt-gold); }
.rt-classrow__who {
  grid-column: 1;
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
}
.rt-classrow__acts {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
}
.rt-classrow__note {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-text-dim);
  cursor: pointer;
  transition: color 0.2s var(--rt-ease), border-color 0.2s var(--rt-ease);
}
.rt-classrow__note:hover { color: var(--rt-gold); border-color: var(--rt-gold); }
.rt-classrow__join {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rt-vermilion) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rt-vermilion) 45%, transparent);
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-vermilion);
  white-space: nowrap;
}
.rt-classrow__join:hover { background: color-mix(in srgb, var(--rt-vermilion) 20%, transparent); }
.rt-classrow__join::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rt-vermilion);
  animation: rt-pulse 2.4s var(--rt-ease) infinite;
}

/* the note table inside the panel */
.rt-notetable { width: 100%; border-collapse: collapse; font-size: var(--rt-t-sm); }
.rt-notetable th {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-gold);
  text-align: start;
  padding: var(--rt-s2) var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule);
}
.rt-notetable td {
  padding: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
  vertical-align: top;
  color: var(--rt-text);
}
.rt-notetable td:first-child {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
  white-space: nowrap;
}
.rt-notetable tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Memorise tracker — teacher card
   ========================================================================== */

.rt-teacher {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--rt-s5) var(--rt-s4);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  transition: transform 0.25s var(--rt-ease), box-shadow 0.25s var(--rt-ease);
}
.rt-teacher:hover { transform: translateY(-3px); box-shadow: var(--rt-lift-2); }
[data-rt] .rt-teacher img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--rt-surface);
  outline: 1px solid var(--rt-rule);
  box-shadow: var(--rt-lift-1);
  margin-bottom: var(--rt-s3);
}
.rt-teacher__name {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  margin: 0 0 2px;
}
.rt-teacher__mail {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
  margin: 0 0 var(--rt-s4);
  word-break: break-word;
}

/* ==========================================================================
   Pagination Tailwind, so the arrow SVGs rendered at their intrinsic size:
   two black chevrons the height of a paragraph. This dresses the replacement
   partial.
   ========================================================================== */

.rt-pager { margin-top: var(--rt-s6); }
.rt-pager nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
}
.rt-pager__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-pager__list a,
.rt-pager__list span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 0.6rem;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--rt-text-dim);
  transition: border-color 0.2s var(--rt-ease), color 0.2s var(--rt-ease),
              background 0.2s var(--rt-ease);
}
.rt-pager__list a:hover { border-color: var(--rt-gold); color: var(--rt-gold); }
.rt-pager__list .rt-pager--on {
  border-color: var(--rt-gold);
  background: color-mix(in srgb, var(--rt-gold) 14%, transparent);
  color: var(--rt-text);
  font-weight: 600;
}
.rt-pager__list .rt-pager--gap { border: 0; background: transparent; min-width: 1.4rem; }
.rt-pager__list .rt-pager--off { opacity: 0.35; cursor: not-allowed; }
.rt-pager__list svg { width: 13px; height: 13px; }
.rt-pager__count {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
}

/* ==========================================================================
   Heading overrides

   risalah-bridge.css carries [data-rt] h1..h6 { font-family: display;
   font-weight: 700; color: text }. That selector scores 0,1,1 -- one
   attribute plus one element -- which beats a plain class like
   .rt-factbox__head at 0,1,0, and the bridge loads second. Matching the
   bridge's own specificity wins them back.
   ========================================================================== */

[data-rt] .rt-factbox__head,
[data-rt] .rt-sheet__head {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
  line-height: 1.4;
}

[data-rt] .rt-footer h3 {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rt-gold);
  line-height: 1.4;
}

/* ==========================================================================
   Forms, filter panel, step connector was pushing whole pages sideways.
   ========================================================================== */

/* the step thread had escaped its container .rt-steps li::after draws the
   hairline that joins one plate to the next, anchored at
   inset-inline-start:100%. In a multi-column grid it lands in the gap. In a
   single-column list -- the support page sets grid-template-columns to 1fr
   -- every plate is last in its row, so each thread ran off the right edge
   of the document and gave the whole page a horizontal scrollbar. Clipping
   on the x axis alone keeps the lift shadows, which need the y axis,
   intact. */

.rt-steps { overflow-x: clip; }

/* A stacked variant for narrow columns: no thread, and the number sits
   beside the words rather than above them. */
.rt-steps--stack { grid-template-columns: 1fr; gap: var(--rt-s3); }
.rt-steps--stack li {
  display: flex;
  align-items: flex-start;
  gap: var(--rt-s4);
  text-align: start;
  padding: var(--rt-s4);
}
.rt-steps--stack li::after { display: none; }
.rt-steps--stack .rt-steps__n { margin: 2px 0 0; flex: none; }

/* the join form */

/* jquery-validate leaves an empty <label class="error"> after each field it
   watches. The chip styling was dressing those empties as blank pills,
   which is the phantom button that appeared after "Occasional". Only a
   label that actually holds a control becomes a chip. */
.contact-form .commitment label { all: unset; }
.contact-form .commitment label:has(input) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rt-rule);
  border-radius: 999px;
  font-size: var(--rt-t-sm);
  background: var(--rt-paper, #fff);
  cursor: pointer;
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease);
}
.contact-form .commitment label:has(input):hover { border-color: var(--rt-gold); }
.contact-form .commitment label:has(input:checked) {
  border-color: var(--rt-emerald);
  background: color-mix(in srgb, var(--rt-emerald) 10%, transparent);
  font-weight: 600;
}
.contact-form .commitment label.error:empty { display: none; }
.contact-form .commitment input { accent-color: var(--rt-emerald); margin: 0; }

/* amount on the left, how often on the right, wrapping cleanly on a phone */
.rt-pledge { display: grid; gap: var(--rt-s3); align-items: center; }
@media (min-width: 44rem) { .rt-pledge { grid-template-columns: 12rem minmax(0, 1fr); } }
.rt-pledge__chips { display: flex; flex-wrap: wrap; gap: var(--rt-s2); }
.rt-pledge .input-group-text { font-family: var(--rt-mono); font-size: var(--rt-t-xs); }

/* a currency field reads as money, not as a counter */
.contact-form input[type="number"]::-webkit-outer-spin-button,
.contact-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contact-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* the disabled/read-only fields (member type, gender on a set profile)
   should look settled rather than broken */
.contact-form .form-control[readonly],
.contact-form .form-select[disabled],
.contact-form .form-control[disabled] {
  background: color-mix(in srgb, var(--rt-gold) 5%, transparent);
  color: var(--rt-text);
  opacity: 1;
}

/* the matrimony search panel */

.rt-filterbar { padding: var(--rt-s6); }
.rt-filterbar__head { margin-bottom: var(--rt-s5); }
.rt-filterbar__head h2 { font-size: var(--rt-t-xl); letter-spacing: -0.015em; }
.rt-filterbar__head .rt-rosette { color: var(--rt-gold); }

/* every control on the panel gets the same height and the same gold focus */
.rt-filterbar .rt-field > label {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
  margin-bottom: 0.4rem;
}
.rt-filterbar .rt-field__aside {
  font-family: var(--rt-mono);
  color: var(--rt-text);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
[data-rt] .rt-filterbar .form-control,
[data-rt] .rt-filterbar .form-select,
[data-rt] .rt-filterbar .select2-container .select2-selection--single {
  min-height: 2.85rem;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  background: var(--rt-paper, #fff);
  font-size: var(--rt-t-sm);
}
[data-rt] .rt-filterbar .form-control:focus,
[data-rt] .rt-filterbar .form-select:focus {
  border-color: var(--rt-gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 22%, transparent) !important;
  outline: none;
}

/* the two sliders read as a measured rule with two gold handles */
.rt-filterbar .ui-slider {
  height: 4px;
  margin: 1.15rem 0.4rem 0.4rem;
  background: var(--rt-rule);
  border: 0;
  border-radius: 999px;
}
.rt-filterbar .ui-slider .ui-slider-range { background: var(--rt-emerald); border-radius: 999px; }
.rt-filterbar .ui-slider .ui-slider-handle {
  width: 18px; height: 18px;
  top: -7px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--rt-emerald);
  border: 2px solid var(--rt-surface);
  box-shadow: var(--rt-lift-1);
  cursor: grab;
}
.rt-filterbar .ui-slider .ui-slider-handle:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 35%, transparent);
  outline: none;
}

.rt-filterbar__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s3);
  margin-top: var(--rt-s5);
  padding-top: var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-filterbar__foot .rt-btn--gold { min-width: 9rem; }

/* the "looking for" pair sits on one line, aligned with everything else */
.rt-filterbar .rt-choice { margin: 0; }
.rt-filterbar .rt-choice legend {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
  margin-bottom: 0.4rem;
}
.rt-filterbar .rt-choice__opt { margin-bottom: 0.35rem; }

/* a matched profile, set in the right hands */

.rt-profile__name { font-size: var(--rt-t-lg); letter-spacing: -0.01em; }
.rt-profile__meta {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.04em;
  color: var(--rt-text-dim);
  margin: 2px 0 var(--rt-s3);
  padding-bottom: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-profile__facts { display: grid; gap: 0.55rem; margin: 0 0 var(--rt-s3); }
.rt-profile__facts > div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: var(--rt-s3); }
.rt-profile__facts dt {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold);
  padding-top: 2px;
}
.rt-profile__facts dd { margin: 0; font-size: var(--rt-t-sm); line-height: 1.5; color: var(--rt-text); }
.rt-profile__say {
  font-size: var(--rt-t-sm);
  line-height: 1.6;
  color: var(--rt-text-dim);
  margin: 0 0 var(--rt-s3);
}

/* the two-column detail pages start level .rt-detail is a grid, so both
   columns already begin at the same y. The gap above the contact panel came
   from the first card in the main column having no top margin while the
   aside inherited one from its own first child. */
.rt-detail > aside > :first-child,
.rt-detail > div > :first-child { margin-top: 0; }
.rt-detail { align-items: start; }

/* the account rail */

.rt-side__nav { gap: 1px; }
.rt-side__nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: 0.62rem var(--rt-s3);
  font-weight: 500;
}
/* a gold rule marks the page you are on, the way a ribbon marks a page */
.rt-side__nav a::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.18s var(--rt-ease);
}
.rt-side__nav a:hover::before { background: var(--rt-rule); }
.rt-side__nav a[aria-current="page"]::before { background: var(--rt-gold-leaf); }
.rt-side__nav a[aria-current="page"] { color: var(--rt-text); }
.rt-side__nav a i { width: 1rem; text-align: center; color: var(--rt-gold); font-size: 0.85em; }

/* gold on a dark ground The gilded button reads well on paper. Against the
   closing appeal's night ground the ink was a soft brown on soft gold and
   the label went indistinct; it now carries near-black ink and a hairline
   that separates it from the dark behind it. */
.rt-give .rt-btn--gold,
[data-theme="dark"] .rt-btn--gold,
.rt-pagehead--dark .rt-btn--gold {
  color: #120c05 !important;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
              0 10px 26px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(203, 166, 88, 0.35);
}
.rt-give .rt-btn--ghost {
  border-color: rgba(242, 234, 216, 0.4);
  color: #f2ead8;
}
.rt-give .rt-btn--ghost:hover {
  border-color: var(--rt-gold-lift);
  color: var(--rt-gold-lift);
  background: rgba(255, 255, 255, 0.04);
}

/* a live class row that can hold its button The join pill was being
   squeezed between the teacher's name and the card edge, so it wrapped onto
   the eye icon. The row now gives the times and the name the full width and
   puts the actions on their own line, right-aligned, which also keeps the
   pill from ever colliding with a long name. */
.rt-classrow {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding: var(--rt-s3) var(--rt-s4);
}
.rt-classrow__who { grid-column: 1; }
.rt-classrow__acts {
  grid-row: auto;
  grid-column: 1;
  justify-content: flex-end;
  margin-top: 0.3rem;
  padding-top: var(--rt-s2);
  border-top: 1px dashed var(--rt-rule-soft);
}
/* the bridge colours every <a> with --rt-text at the same weight as a
   single class, so the pill's own ink needs the attribute too */
[data-rt] .rt-classrow__join { padding: 0.4rem 0.9rem; color: var(--rt-vermilion); }

/* programme titles in the archive Some titles arrive shouting in full
   capitals and four lines long. They are held to three lines and set in the
   display face at a readable size, so a shelf of cards keeps one baseline
   grid. */
.rt-card__title {
  font-size: var(--rt-t-md);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rt-card__title--shout {
  font-variant-caps: normal;
  text-transform: none;
  letter-spacing: 0.005em;
}

/* ==========================================================================
   Memorise tracker, quiz result, dialogs
   ========================================================================== */

/* a grid child needs min-width:0 or a wide table inside it blows the column */
.rt-join__main { min-width: 0; }

/* ==========================================================================
   the memorisation tracker This page kept its own <style> block with
   hard-coded greens (#148446, #058303) that belonged to no palette, a raw
   Bootstrap table, and an absolutely positioned "go back" link parked 80px
   outside the container. It now uses the same ink as everything else, and the
   table scrolls inside its own plate rather than stretching the page.
   ========================================================================== */

.rt-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rt-ayat {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rt-t-sm);
  min-width: 60rem;
}
.rt-ayat th,
.rt-ayat td {
  padding: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
  vertical-align: middle;
  text-align: start;
}
.rt-ayat thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--rt-surface);
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
  border-bottom: 1px solid var(--rt-rule);
  white-space: nowrap;
}
.rt-ayat tbody tr:hover td { background: color-mix(in srgb, var(--rt-gold) 4%, transparent); }
.rt-ayat tbody tr:last-child td { border-bottom: 0; }
.rt-ayat tbody th {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
  border-bottom: 1px solid var(--rt-rule-soft);
}

/* the two columns of judgement: the student's own marks, and the teacher's */
.rt-ayat .student-bg {
  background: color-mix(in srgb, var(--rt-gold) 7%, transparent);
  text-align: center;
}
.rt-ayat .teacher-bg {
  background: color-mix(in srgb, var(--rt-emerald) 9%, transparent);
  text-align: center;
}
.rt-ayat thead .student-bg,
.rt-ayat thead .teacher-bg { color: var(--rt-text); }
.rt-ayat thead .teacher-bg { color: var(--rt-emerald); }
.rt-ayat thead .student-bg { color: var(--rt-gold); }

/* the ayat itself, in the display face and given room to breathe */
.rt-ayat td.ayat-font {
  font-family: var(--rt-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.1;
  direction: rtl;
  text-align: right;
  color: var(--rt-text);
  min-width: 16rem;
}

/* the A/A size steppers in the column head */
.rt-ayat .font-size-c {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-inline-start: 4px;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-text);
  cursor: pointer;
  font-family: var(--rt-display);
  line-height: 1;
  user-select: none;
  transition: border-color 0.18s var(--rt-ease), color 0.18s var(--rt-ease);
}
.rt-ayat .font-size-c:first-of-type { font-size: 0.7rem; }
.rt-ayat .font-size-c:last-of-type { font-size: 0.95rem; }
.rt-ayat .font-size-c:hover { border-color: var(--rt-gold); color: var(--rt-gold); }

/* the tick boxes a student and a teacher fill in */
[data-rt] .rt-ayat .form-check-input {
  width: 22px; height: 22px;
  margin: 0;
  border: 1.5px solid var(--rt-rule);
  border-radius: 6px;
  cursor: pointer;
  accent-color: var(--rt-emerald);
}
[data-rt] .rt-ayat .form-check-input:checked {
  background-color: var(--rt-emerald);
  border-color: var(--rt-emerald);
}
[data-rt] .rt-ayat .form-check-input:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 30%, transparent);
  outline: none;
}
.rt-ayat td audio { max-height: 34px; max-width: 150px; }
.rt-ayat img.checked-icon { width: 22px; height: 22px; }
[data-rt] .rt-ayat textarea.form-control,
[data-rt] .rt-ayat input.form-control {
  min-height: 2.2rem;
  font-size: var(--rt-t-xs);
  padding: 0.35rem 0.5rem;
}

/* the key above the table */
.rt-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: var(--rt-s3);
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rt-legend__swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  border: 1px solid var(--rt-rule);
}
.rt-legend__swatch--you { background: color-mix(in srgb, var(--rt-gold) 30%, transparent); }
.rt-legend__swatch--ustad { background: color-mix(in srgb, var(--rt-emerald) 34%, transparent); }

/* a from/to pair on one line */
.rt-range { display: flex; align-items: center; gap: var(--rt-s2); }
.rt-range span { color: var(--rt-text-dim); }
[data-rt] .rt-range .form-control { min-width: 0; }

/* competition memorise result */

.rt-result {
  display: grid;
  gap: var(--rt-s4);
  padding: var(--rt-s5);
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
.rt-result__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding-bottom: var(--rt-s3);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-result__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rt-result__row dt {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
.rt-result__row dd {
  margin: 0;
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* the answer a candidate submitted: a picture, a recording or a piece of
   text */
.rt-answer { display: grid; gap: var(--rt-s3); }
.rt-answer__img {
  max-width: 100%;
  max-height: 20rem;
  border-radius: var(--rt-radius);
  border: 1px solid var(--rt-rule-soft);
  justify-self: start;
}
.rt-answer video { max-width: 100%; border-radius: var(--rt-radius); }
.rt-answer audio { width: 100%; max-width: 22rem; }
.rt-answer__mark {
  display: flex;
  align-items: flex-end;
  gap: var(--rt-s3);
  flex-wrap: wrap;
  margin-top: var(--rt-s3);
  padding-top: var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
}
.rt-answer__mark .rt-field { flex: 1 1 10rem; }

/* ==========================================================================
   SweetAlert dialogs

   They now match the sign-in panel, and the classes named in the JS options
   (btn-primary, btn-active-light) are mapped onto the site's own buttons
   rather than Bootstrap's.
   ========================================================================== */

.swal2-container { backdrop-filter: blur(2px); }
.swal2-popup {
  position: relative;
  padding: var(--rt-s6) var(--rt-s6) var(--rt-s5);
  background: var(--rt-surface) !important;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rt-gold) 22%, transparent),
              0 40px 100px -20px rgba(0, 0, 0, 0.5);
  color: var(--rt-text);
}
.swal2-popup::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  border-start-start-radius: var(--rt-radius-lg);
  border-start-end-radius: var(--rt-radius-lg);
  background: var(--rt-gold-leaf);
}
.swal2-title {
  font-family: var(--rt-display) !important;
  font-size: var(--rt-t-xl) !important;
  font-weight: 700;
  color: var(--rt-text) !important;
  letter-spacing: -0.015em;
}
.swal2-html-container,
.swal2-content { color: var(--rt-text-dim) !important; font-size: var(--rt-t-sm) !important; }

.swal2-actions { gap: var(--rt-s3); margin-top: var(--rt-s5); }

/* the option strings the views pass to SweetAlert */
/* the bridge maps .btn-primary onto the emerald button at equal specificity
   and loads after this file, so the dialog's confirm needs [data-rt] too */
[data-rt] .swal2-popup .btn.btn-primary,
[data-rt] .swal2-popup .swal2-confirm,
.swal2-popup .swal2-confirm {
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: var(--rt-radius);
  /* --rt-gold-leaf is the primary fill, and it is emerald on paper and gold
   at night. The ink has to follow it: near-black reads on gold, white reads
   on emerald. Hard-coding one of them left the dialog's confirm button with
   black text on dark green. */
  background: var(--rt-gold-leaf) !important;
  color: #ffffff !important;
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 6px 18px rgba(18, 86, 63, 0.22);
}
[data-theme="dark"] .swal2-popup .btn.btn-primary,
[data-theme="dark"] .swal2-popup .swal2-confirm {
  color: #16100a !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
              0 6px 18px rgba(203, 166, 88, 0.18);
}
[data-rt] .swal2-popup .btn.btn-active-light,
[data-rt] .swal2-popup .swal2-cancel,
.swal2-popup .swal2-cancel {
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--rt-rule) !important;
  border-radius: var(--rt-radius);
  background: transparent !important;
  color: var(--rt-text) !important;
  font-size: var(--rt-t-sm);
  font-weight: 600;
}
[data-rt] .swal2-popup .btn.btn-active-light:hover,
[data-rt] .swal2-popup .swal2-cancel:hover {
  border-color: var(--rt-gold) !important;
  color: var(--rt-gold) !important;
}

/* fields inside a dialog (the session-request form) */
.swal2-popup .form-control,
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea {
  min-height: 2.7rem;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  background: var(--rt-paper, #fff);
  font-size: var(--rt-t-sm);
  box-shadow: none;
  color: var(--rt-text);
}
.swal2-popup .form-control:focus,
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
  border-color: var(--rt-gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 22%, transparent) !important;
  outline: none;
}
.swal2-popup .col-form-label,
.swal2-popup label { font-size: var(--rt-t-sm); font-weight: 600; color: var(--rt-text); text-align: start; }
.swal2-popup .mb-3.row { text-align: start; }

.swal2-icon { border-color: var(--rt-rule); }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--rt-emerald); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--rt-emerald) 40%, transparent); }
.swal2-icon.swal2-error { border-color: color-mix(in srgb, var(--rt-vermilion) 45%, transparent); }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--rt-vermilion); }

/* ==========================================================================
   Sign-in mark, quiz rooms, archive, footer
   ========================================================================== */

/* every branded mark, against the bridge risalah-bridge.css carries
   [data-rt] img { height: auto } at 0,1,1, which beats a plain class
   selector and loads second. One rule now covers every mark. */
[data-rt] .rt-authpage__brand img { height: 40px; width: auto; }
[data-rt] .rt-modal__mark img { height: 34px; width: auto; }

.rt-authpage__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s5);
}
.rt-authpage__brand .rt-brand__word { font-size: 1.2rem; }

/* ==========================================================================
   Quiz room
   ========================================================================== */

.rt-quiz {
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
  overflow: hidden;
}
.rt-quiz::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--rt-gold-leaf);
}
.rt-quiz__body { padding: var(--rt-s6); }

/* the counter sits as a small plate, not a floated line of bold text */
#summary {
  float: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--rt-s5) auto;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rt-rule-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rt-gold) 8%, transparent);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
  width: max-content;
}
#summary span { margin: 0 !important; font-weight: 600; color: var(--rt-gold); }

/* the question itself */
#contain > .row > div:first-child,
#resultSummary .question-text {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  line-height: 1.4;
  color: var(--rt-text);
  margin-bottom: var(--rt-s5);
  padding-bottom: var(--rt-s4);
  border-bottom: 1px solid var(--rt-rule-soft);
  width: 100%;
}

/* the four answers, as plates a finger can hit */
#contain ul,
#resultSummary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rt-s3);
}
#contain ul > li,
#resultSummary ul > li {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s4) !important;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  background: var(--rt-paper, #fff);
  font-size: var(--rt-t-base);
  color: var(--rt-text);
  cursor: pointer;
  transition: border-color 0.2s var(--rt-ease), background 0.2s var(--rt-ease),
              transform 0.2s var(--rt-ease);
}
#contain ul > li:hover { border-color: var(--rt-gold); transform: translateY(-2px); }
#contain ul li span,
#resultSummary ul li span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-sm);
  font-weight: 600;
  color: var(--rt-text-dim);
  flex: none;
}
#contain ul li span i,
#resultSummary ul li span i { font-size: 1.15rem !important; }

/* chosen */
#contain ul li span i.fa-check-circle { color: var(--rt-emerald) !important; }
#contain ul > li:has(i.fa-check-circle) {
  border-color: var(--rt-emerald);
  background: color-mix(in srgb, var(--rt-emerald) 8%, transparent);
}

/* marked afterwards: right, wrong, skipped */
#resultSummary ul li span i.fa-check-circle.success { color: var(--rt-emerald) !important; }
#resultSummary ul li span i.fa-check-circle.danger  { color: var(--rt-vermilion) !important; }
#resultSummary ul li span i.fa-circle.warning       { color: var(--rt-gold) !important; }
#resultSummary ul > li:has(i.success) {
  border-color: var(--rt-emerald);
  background: color-mix(in srgb, var(--rt-emerald) 8%, transparent);
}
#resultSummary ul > li:has(i.danger) {
  border-color: color-mix(in srgb, var(--rt-vermilion) 55%, transparent);
  background: color-mix(in srgb, var(--rt-vermilion) 7%, transparent);
}

@media (min-width: 48rem) {
  #contain > .row,
  #resultSummary .answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rt-s3) var(--rt-s5); }
  #contain > .row > div:first-child { grid-column: 1 / -1; }
}

.next-or-submit {
  display: flex;
  justify-content: flex-end;
  gap: var(--rt-s3);
  margin-top: var(--rt-s6);
  padding-top: var(--rt-s5);
  border-top: 1px solid var(--rt-rule-soft);
  width: auto !important;
}

/* the result summary */

.rt-score {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s6);
}
.rt-score__cell {
  padding: var(--rt-s4);
  text-align: center;
  background: var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
.rt-score__cell strong {
  display: block;
  font-family: var(--rt-display);
  font-size: 1.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--rt-text);
}
.rt-score__cell span {
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
.rt-score__cell--good strong { color: var(--rt-emerald); }
.rt-score__cell--bad strong { color: var(--rt-vermilion); }
.rt-score__cell--skip strong { color: var(--rt-gold); }

#resultSummary .border-bottom-1 { border: 0; margin: var(--rt-s6) 0 0; }
#resultSummary .image-item,
#contain .image-item { max-height: 120px; border-radius: var(--rt-radius); }

/* ==========================================================================
   Program archive
   ========================================================================== */

.rt-card__art { position: relative; }
/* every programme carries the same placeholder poster; a scrim and a date
   plate give each card its own weight so the shelf is readable */
.rt-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 19, 16, 0) 45%, rgba(7, 19, 16, 0.55));
  pointer-events: none;
}
.rt-card__date {
  position: absolute;
  z-index: 1;
  inset-block-end: var(--rt-s3);
  inset-inline-start: var(--rt-s3);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(7, 19, 16, 0.72);
  border: 1px solid rgba(203, 166, 88, 0.35);
  backdrop-filter: blur(3px);
  font-family: var(--rt-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: #f2ead8;
  white-space: nowrap;
}
.rt-card__date i { color: var(--rt-gold-lift); }

.rt-section--band {
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(28, 107, 80, 0.05), transparent 60%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--rt-gold) 4%, transparent));
}
.rt-shelfhead {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s4);
}
.rt-shelfhead h2 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.rt-shelfhead .rt-rosette { width: 14px; height: 14px; color: var(--rt-gold); flex: none; }
.rt-shelfhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rt-rule), transparent);
}
.rt-shelfhead__n {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.06em;
  color: var(--rt-text-dim);
  flex: none;
}

/* ==========================================================================
   Memorisation table
   ========================================================================== */

.rt-ayat thead tr:first-child th { border-bottom: 0; }
.rt-ayat thead .student-bg,
.rt-ayat thead .teacher-bg { border-bottom: 1px solid var(--rt-rule); }
.rt-ayat tbody td.student-bg,
.rt-ayat tbody td.teacher-bg { border-inline: 1px solid var(--rt-rule-soft); }
.rt-ayat tbody th { text-align: center; width: 3.5rem; }
.rt-ayat td:last-child,
.rt-ayat th:last-child { padding-inline-end: var(--rt-s5); }
.rt-ayat td:first-child,
.rt-ayat th:first-child { padding-inline-start: var(--rt-s5); }
/* a remark should read as a note, not as a bare word in a cell */
.rt-ayat td.teacher-bg:not(:has(input)) { font-size: var(--rt-t-xs); text-align: start; }

/* ==========================================================================
   Footer
   ========================================================================== */

[data-theme="light"] .rt-footer {
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(28, 107, 80, 0.10), transparent 62%),
    radial-gradient(60% 100% at 92% 10%, rgba(203, 166, 88, 0.12), transparent 60%),
    linear-gradient(180deg, #e9e6da 0%, #ded9c9 100%);
  border-top: 1px solid color-mix(in srgb, var(--rt-gold) 30%, transparent);
}
.rt-footer::after {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: var(--rt-gold-leaf);
  opacity: 0.55;
}
.rt-footer { position: relative; }
.rt-footer__grid { padding-bottom: var(--rt-s6); }
.rt-footer h3 { margin-bottom: var(--rt-s3); }
[data-theme="light"] .rt-footer li a { color: color-mix(in srgb, var(--rt-text) 78%, transparent); }
[data-theme="light"] .rt-footer li a:hover { color: var(--rt-emerald); }
[data-theme="light"] .rt-footer__brand p,
[data-theme="light"] .rt-footer__contact { color: color-mix(in srgb, var(--rt-text) 72%, transparent); }
[data-theme="light"] .rt-social a { background: rgba(255, 255, 255, 0.6); }
.rt-footer__base {
  padding-top: var(--rt-s4);
  border-top: 1px solid color-mix(in srgb, var(--rt-text) 12%, transparent);
}

/* ==========================================================================
   Image sizing

   risalah-bridge.css carries [data-rt] img { max-width: 100%; height: auto },
   which scores 0,1,1 -- one attribute plus one element. Every rule here of
   the form `.some-class img` scores exactly the same, and the bridge loads
   second, so every height this stylesheet asked for is overridden. Matching
   the bridge's own weight restores object-fit across the site.
   ========================================================================== */

/* ==========================================================================
   the photograph on a form Used by the join form and by both matrimony
   profile forms. The picture is round, fills its frame whatever shape it
   arrives in, and the file picker sits under it rather than across it.
   ========================================================================== */

.contact-form .profile-image-outer-container {
  display: grid;
  justify-items: center;
  gap: var(--rt-s3);
  margin-bottom: var(--rt-s3);
}
[data-rt] .contact-form .profile-image-inner-container img,
[data-rt] .contact-form #profilePhoto,
[data-rt] .contact-form #currentPhoto {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.contact-form .profile-image-button { z-index: 2; }
.contact-form .profile-image-input {
  margin: 0;
  max-width: 17rem;
  font-size: var(--rt-t-xs);
}
.contact-form label.photo-label,
.contact-form .photo-label {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
}

/* validation messages under a field should not add a line of empty space */
.contact-form .alert.error-alert {
  padding: 0;
  margin: 4px 0 0;
  background: transparent;
  border: 0;
  color: var(--rt-vermilion);
  font-size: var(--rt-t-xs);
}

/* the submit row: right-aligned without floating it out of the flow */
.contact-form .form-group:has(> [type="submit"]),
.contact-form .rt-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--rt-s3);
  margin-top: var(--rt-s5);
  padding-top: var(--rt-s5);
  border-top: 1px solid var(--rt-rule-soft);
}
[data-rt] .contact-form [type="submit"] { float: none; }

/* profile cards: the numbers keep to one line */
.rt-profile__stats span { line-height: 1.25; }
@media (max-width: 26rem) {
  .rt-profile__stats { grid-template-columns: 1fr; }
  .rt-profile__stats a + a { border-inline-start: 0; border-top: 1px solid var(--rt-rule-soft); }
}

/* ==========================================================================
   Additional overrides

   The enrolment badge, the photograph on a profile card, and the row of
   controls under it.
   ========================================================================== */

/* ==========================================================================
   the enrolment badge It sat on a translucent veil with coloured text. Over a
   dark banner that read well; over a bright one -- the yellow Islamic Studies
   artwork, the pale Arabic manuscript -- the veil went milky and the label
   disappeared into it. A badge that labels a photograph cannot depend on what
   the photograph happens to look like, so it is now an opaque plate: solid
   ground, dark ink, and only the small mark carries the colour.
   ========================================================================== */

.rt-course__state {
  gap: 0.45rem;
  padding: 0.34rem 0.65rem;
  background: var(--rt-surface);
  backdrop-filter: none;
  border: 1px solid var(--rt-rule);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  color: var(--rt-text);
  font-weight: 600;
}
[data-theme="light"] .rt-course__state { background: #ffffff; }
.rt-course__state i { font-size: 0.8em; }
.rt-course__state--open    { color: var(--rt-text); border-color: color-mix(in srgb, var(--rt-emerald) 45%, var(--rt-rule)); }
.rt-course__state--open i  { color: var(--rt-emerald); }
.rt-course__state--pending { color: var(--rt-text); border-color: color-mix(in srgb, var(--rt-gold) 55%, var(--rt-rule)); }
.rt-course__state--pending i { color: var(--rt-gold); }
.rt-course__state--locked  { color: var(--rt-text-dim); border-color: var(--rt-rule); }

[data-theme="light"] .rt-course__state--open,
[data-theme="light"] .rt-course__state--pending { color: var(--rt-text); }
[data-theme="light"] .rt-course__state--open i  { color: var(--rt-emerald); }
[data-theme="light"] .rt-course__state--pending i { color: var(--rt-gold); }

/* the banner behind it gets a short gradient at the top so a badge never
   sits on a blown-out highlight */
.rt-course__art::after {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 19, 16, 0.34), transparent);
}
.rt-course__art { position: relative; }

/* ==========================================================================
   the portrait on a profile card Matrimony photographs arrive as phone
   portraits, passport scans and group shots. The frame is now a touch taller
   than wide -- the proportion a person is usually photographed in -- and the
   picture is anchored to the top of the frame so a face is never cropped off
   at the chin.
   ========================================================================== */

.rt-profile__art { aspect-ratio: 5 / 4; }
[data-rt] .rt-profile__art img { object-position: center 22%; }

/* the counters */

.rt-profile__stats a { padding: var(--rt-s3) var(--rt-s2); }
.rt-profile__stats strong { font-size: var(--rt-t-xl); }
.rt-profile__stats span {
  margin-top: 2px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ==========================================================================
   the controls under a card A bare pencil in a full-width button looked like
   a mistake next to the gilded Open. It becomes a proper square icon button,
   and the two sit as a pair at the end of the row.
   ========================================================================== */

.rt-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-text-dim);
  transition: border-color 0.2s var(--rt-ease), color 0.2s var(--rt-ease),
              background 0.2s var(--rt-ease);
}
.rt-iconbtn:hover {
  border-color: var(--rt-gold);
  color: var(--rt-gold);
  background: color-mix(in srgb, var(--rt-gold) 7%, transparent);
}
.rt-iconbtn i { font-size: 0.85rem; }

.rt-profile__foot { gap: var(--rt-s2); padding-top: var(--rt-s4); }
.rt-profile__foot .rt-iconbtn { margin-inline-start: auto; }
.rt-profile__foot .rt-btn--gold { margin-inline-start: 0; min-width: 6.5rem; justify-content: center; }
.rt-profile__status { margin-inline-end: auto; }
.rt-profile__status:empty { display: none; }

/* ==========================================================================
   Card footers, form controls and the closing band
   ========================================================================== */

/* Card footers: the meta line and the button share one baseline, and the
   footer keeps a fixed height so a row of cards lines up whether or not a
   card has meta text. */
.rt-course__foot,
.rt-profile__foot {
  min-height: 3.15rem;
  padding-top: var(--rt-s4);
  border-top: 1px solid var(--rt-rule-soft);
  align-items: center;
}
.rt-course__foot .rt-card__meta,
.rt-course__foot > span:first-child {
  margin: 0;
  line-height: 1.2;
  align-self: center;
}
.rt-course__foot .rt-btn {
  align-self: center;
  flex: none;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   Select controls

   Bootstrap paints its own caret and, once a form has been validated, a green
   tick as background images. This stylesheet previously set `background` as a
   shorthand, which resets background-repeat to `repeat`; the tick then tiled
   across the whole field. Only the colour is set here, and one caret is drawn
   for every select on the site.
   ========================================================================== */

[data-rt] select.form-select,
[data-rt] select.form-control,
[data-rt] .contact-form select,
[data-rt] .rt-field select,
[data-rt] .rt-filterbar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--rt-paper, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d6018' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  padding-inline-end: 2.5rem;
}
[data-rt] select.form-select::-ms-expand { display: none; }

/* the validated state keeps our caret instead of a tiled tick */
[data-rt] .was-validated select.form-select:valid,
[data-rt] .was-validated select.form-control:valid,
[data-rt] .was-validated select.form-select:invalid,
[data-rt] select.form-select.is-valid,
[data-rt] select.form-select.is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d6018' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  padding-inline-end: 2.5rem;
}

/* text inputs and textareas: colour only, never the shorthand */
[data-rt] .contact-form .form-control:not(select),
[data-rt] .rt-filterbar .form-control:not(select) {
  background-color: var(--rt-paper, #fff);
  background-image: none;
}

/* select2 renders its own box; give it the same caret and height */
[data-rt] .select2-container--default .select2-selection--single {
  min-height: 2.85rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  background-color: var(--rt-paper, #fff);
}
[data-rt] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--rt-gold) transparent transparent;
  border-width: 6px 5px 0;
}
[data-rt] .select2-container--default.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--rt-gold);
  border-width: 0 5px 6px;
}

/* ==========================================================================
   The photograph on a form
   ========================================================================== */

/* The circle is the control: it is a <label for="photo">, so the whole
   picture opens the file chooser. The input itself is hidden. */
.contact-form label.profile-image-inner-container { cursor: pointer; }
.contact-form label.profile-image-inner-container:hover {
  outline-color: var(--rt-gold);
}
.contact-form label.profile-image-inner-container:focus-within {
  outline: 2px solid var(--rt-gold);
  outline-offset: 2px;
}
/* beats the width:100% helper in risalah-bridge.css, which loads later */
[data-rt] .profile-image-outer-container input.profile-image-input,
[data-rt] .contact-form input.profile-image-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.contact-form .profile-image-name {
  display: block;
  margin-top: var(--rt-s2);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
  text-align: center;
}
.contact-form .profile-image-name:empty::before {
  content: attr(data-empty);
}

/* ==========================================================================
   Donation amounts
   ========================================================================== */

.rt-amount { position: relative; }
.rt-amount__cur { opacity: 0.55; margin-inline-end: 1px; font-size: 0.85em; }

/* The selected amount reads as chosen: gold ground, dark ink, a ring and a
   tick in the corner. */
[data-rt] .rt-amount.active,
[data-rt] .rt-amount[aria-pressed="true"] {
  border-color: var(--rt-gold);
  background: var(--rt-gold-leaf);
  color: #16100a;
  font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 26%, transparent),
              var(--rt-lift-1);
}
[data-rt] .rt-amount.active .rt-amount__cur,
[data-rt] .rt-amount[aria-pressed="true"] .rt-amount__cur { opacity: 0.75; }
[data-theme="light"] [data-rt] .rt-amount.active,
[data-theme="light"] .rt-amount.active,
[data-theme="light"] .rt-amount[aria-pressed="true"] { color: #fff; }
.rt-amount.active::after,
.rt-amount[aria-pressed="true"]::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 6px; inset-inline-end: 8px;
  font-size: 0.62rem;
  opacity: 0.85;
}

/* ==========================================================================
   Closing donation band

   The band sits on paper in the light theme and on the night ground in the
   dark one, so the buttons take their ink from the theme rather than assuming
   a dark ground.
   ========================================================================== */

[data-theme="light"] .rt-give .rt-btn--gold {
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset,
              0 10px 26px -8px rgba(18, 86, 63, 0.45);
}
[data-theme="light"] .rt-give .rt-btn--ghost {
  border-color: var(--rt-rule);
  color: var(--rt-text);
  background: var(--rt-surface);
}
[data-theme="light"] .rt-give .rt-btn--ghost:hover {
  border-color: var(--rt-gold);
  color: var(--rt-gold);
  background: var(--rt-surface);
}
.rt-give__actions { gap: var(--rt-s3); }
.rt-give__actions .rt-btn { min-width: 10rem; justify-content: center; }

/* ==========================================================================
   Footer, light theme
   ========================================================================== */

[data-theme="light"] .rt-footer {
  background: linear-gradient(180deg, #f4f2ea 0%, #eceadf 100%);
  border-top: 2px solid var(--rt-gold);
}
[data-theme="light"] .rt-footer::before { opacity: 0.4; }
[data-theme="light"] .rt-footer h3 { color: var(--rt-gold); }
[data-theme="light"] .rt-footer li a,
[data-theme="light"] .rt-footer__contact li,
[data-theme="light"] .rt-footer__brand p { color: #46564c; }
[data-theme="light"] .rt-footer li a:hover { color: var(--rt-emerald); }
[data-theme="light"] .rt-social a {
  background: #fff;
  border-color: var(--rt-rule);
  color: #46564c;
}
[data-theme="light"] .rt-social a:hover { color: var(--rt-emerald); border-color: var(--rt-emerald); }
[data-theme="light"] .rt-footer__base { border-top-color: var(--rt-rule); color: #566a5e; }

/* ==========================================================================
   Archive and support cards

   Many programs carry the same stock poster, so the card leans on its words:
   a shorter picture, a subject or speaker line, and a link cue that appears
   on hover.
   ========================================================================== */

.rt-card--archive { display: flex; flex-direction: column; }
.rt-card--archive .rt-card__art { aspect-ratio: 16 / 8; }
.rt-card--archive .rt-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.rt-card--archive .rt-card__title { font-size: var(--rt-t-md); line-height: 1.32; }
.rt-card--archive .rt-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  min-height: 1.1rem;
}
.rt-card--archive .rt-card__meta i { color: var(--rt-gold); font-size: 0.82em; }
.rt-card--archive .rt-card__desc {
  margin: 0;
  font-size: var(--rt-t-sm);
  line-height: 1.5;
  color: var(--rt-text-dim);
}
.rt-card__go {
  margin-top: auto;
  padding-top: var(--rt-s3);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rt-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rt-gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s var(--rt-ease), transform 0.22s var(--rt-ease);
}
.rt-card--archive:hover .rt-card__go { opacity: 1; transform: none; }
.rt-card__go i { font-size: 0.9em; }

/* the date or subject tag on the artwork */
.rt-card__date i { margin-inline-end: 0.3rem; }

/* a shelf that holds one or two cards should not stretch them across the row */
.rt-rail { scroll-padding-inline: var(--rt-s2); }

/* ==========================================================================
   Select caret inside the theme's wrapper

   risalah-bridge.css styles `.custom-select-1 select` with a `background`
   shorthand and loads after this file, so at equal weight the caret drawn
   above is wiped. These selectors carry more weight than either.
   ========================================================================== */

[data-rt] .custom-select-1 select.form-select,
[data-rt] .custom-select-1 select.form-control,
[data-rt] .contact-form .custom-select-1 select,
[data-rt] .rt-field .custom-select-1 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--rt-paper, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d6018' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  padding-inline-end: 2.5rem;
}

/* ==========================================================================
   Photo upload

   The circle is a <label for>, so it opens the file chooser on its own. These
   rules make that legible: a dashed rim on an empty frame, a veil on hover,
   and a line of instruction underneath.
   ========================================================================== */

.contact-form label.profile-image-inner-container {
  position: relative;
  overflow: hidden;
  outline: 2px dashed color-mix(in srgb, var(--rt-gold) 55%, transparent);
  outline-offset: 3px;
  transition: outline-color 0.2s var(--rt-ease);
}
.contact-form label.profile-image-inner-container:hover { outline-color: var(--rt-gold); }

.profile-image-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 3px;
  justify-items: center;
  border-radius: 50%;
  background: rgba(12, 28, 23, 0.62);
  color: #fff;
  font-family: var(--rt-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s var(--rt-ease);
  pointer-events: none;
}
.profile-image-veil i { font-size: 1rem; }
.contact-form label.profile-image-inner-container:hover .profile-image-veil,
.contact-form label.profile-image-inner-container:focus-within .profile-image-veil { opacity: 1; }

.profile-image-cta {
  display: block;
  margin-top: var(--rt-s3);
  font-size: var(--rt-t-sm);
  font-weight: 600;
  color: var(--rt-gold);
  text-align: center;
}
.contact-form .profile-image-name:empty { display: none; }
.contact-form .profile-image-name:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--rt-s2);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rt-emerald) 10%, transparent);
  color: var(--rt-emerald);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
}

/* ==========================================================================
   Footer, tightened
   ========================================================================== */

.rt-footer { padding-block: var(--rt-s6) var(--rt-s4); }
.rt-footer__grid {
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: var(--rt-s5) var(--rt-s6);
  padding-top: var(--rt-s5);
}
@media (max-width: 62rem) { .rt-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .rt-footer__grid { grid-template-columns: 1fr; } }
.rt-footer__brand p { margin: 0 0 var(--rt-s3); max-width: 34ch; font-size: var(--rt-t-sm); }
.rt-footer__brand .rt-brand { margin-bottom: var(--rt-s3); }
.rt-footer li a { padding-block: 0.28rem; }
.rt-footer__base { margin-top: var(--rt-s4); padding-top: var(--rt-s4); }
.rt-footer__mark { display: inline-flex; align-items: center; gap: var(--rt-s3); }

/* the address column */
.rt-footer__contact { margin: 0; gap: var(--rt-s3); }
.rt-footer__contact li { align-items: flex-start; line-height: 1.5; }
.rt-footer__contact span { display: block; }

/* --- newsletter ---------------------------------------------------------- */

.rt-signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s5);
  flex-wrap: wrap;
  padding-bottom: var(--rt-s5);
  border-bottom: 1px solid var(--rt-rule-soft);
}
.rt-signup__text { flex: 1 1 20rem; }
.rt-signup__text h3 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-lg);
  font-weight: 700;
  color: var(--rt-text);
  margin: 0 0 2px;
  padding: 0;
  border: 0;
  letter-spacing: normal;
  text-transform: none;
}
.rt-signup__text p { margin: 0; font-size: var(--rt-t-sm); color: var(--rt-text-dim); }
.rt-signup__form { display: flex; gap: var(--rt-s2); flex: 0 1 26rem; }
[data-rt] .rt-signup__form input {
  flex: 1;
  min-width: 0;
  min-height: 2.85rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
  background-color: var(--rt-surface);
  color: var(--rt-text);
  font-size: var(--rt-t-sm);
}
[data-rt] .rt-signup__form input:focus {
  border-color: var(--rt-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-gold) 22%, transparent);
  outline: none;
}
.rt-signup__form .rt-btn { flex: none; }
.rt-signup__note {
  margin: var(--rt-s3) 0 0;
  font-size: var(--rt-t-sm);
  color: var(--rt-emerald);
}
.rt-signup__note.is-error { color: var(--rt-vermilion); }

/* --- the footer ground on paper pages ------------------------------------ */

[data-theme="light"] .rt-footer {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(23, 105, 79, 0.07), transparent 62%),
    linear-gradient(180deg, #eceadf 0%, #e3e0d3 100%);
  border-top: 2px solid var(--rt-gold);
}
[data-theme="light"] .rt-signup__text p,
[data-theme="light"] .rt-footer__brand p { color: #4a5a50; }
[data-theme="light"] .rt-signup { border-bottom-color: rgba(22, 40, 31, 0.14); }
[data-theme="light"] .rt-footer__base { border-top-color: rgba(22, 40, 31, 0.14); }
[data-theme="light"] .rt-signup__form input { background-color: #fff; }

/* --- back to top --------------------------------------------------------- */

/* the theme ships its own; this one matches the site */
html .scroll-to-top { display: none !important; }

.rt-totop {
  position: fixed;
  inset-inline-end: var(--rt-s5);
  bottom: var(--rt-s5);
  z-index: 60;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--rt-gold) 45%, transparent);
  border-radius: 50%;
  background: var(--rt-surface);
  color: var(--rt-gold);
  box-shadow: var(--rt-lift-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s var(--rt-ease), transform 0.25s var(--rt-ease),
              visibility 0.25s var(--rt-ease), background 0.2s var(--rt-ease),
              color 0.2s var(--rt-ease);
}
.rt-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.rt-totop:hover { background: var(--rt-gold-leaf); color: #16100a; border-color: transparent; }
[data-theme="light"] .rt-totop:hover { color: #fff; }
@media (max-width: 48rem) {
  .rt-totop { inset-inline-end: var(--rt-s3); bottom: var(--rt-s3); width: 40px; height: 40px; }
}

/* ==========================================================================
   Archive card: the date closes the card
   ========================================================================== */

.rt-card__foot {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  margin: auto 0 0;
  padding-top: var(--rt-s3);
  border-top: 1px solid var(--rt-rule-soft);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.03em;
  color: var(--rt-text-dim);
}
.rt-card__foot i { color: var(--rt-gold); margin-inline-end: 0.35rem; }
.rt-card__when,
.rt-card__dur { display: inline-flex; align-items: center; white-space: nowrap; }
.rt-card__dur { margin-inline-start: auto; }

/* ==========================================================================
   Newsletter signup
   ========================================================================== */

.rt-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  align-items: center;
  gap: var(--rt-s4) var(--rt-s6);
  padding: var(--rt-s5) var(--rt-s5) var(--rt-s5);
  margin-bottom: var(--rt-s5);
  background:
    radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--rt-gold) 12%, transparent), transparent 62%),
    var(--rt-surface);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-lift-1);
}
@media (max-width: 60rem) {
  .rt-signup { grid-template-columns: 1fr; }
}

.rt-signup__text { display: flex; align-items: flex-start; gap: var(--rt-s4); }
.rt-signup__mark {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rt-gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rt-gold) 34%, transparent);
  color: var(--rt-gold);
  font-size: 1rem;
}
.rt-signup__text p { max-width: 46ch; }

/* the field carries its own icon, and the button sits flush against it */
.rt-signup__form { display: flex; gap: var(--rt-s2); align-items: stretch; }
.rt-signup__field { flex: 1; min-width: 0; }
[data-rt] .rt-signup__form input { width: 100%; }
.rt-signup__form .rt-btn {
  position: relative;
  flex: none;
  min-width: 8.5rem;
  justify-content: center;
}

/* while the request is in flight the label gives way to a spinner */
.rt-signup__spin {
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: rt-spin 0.7s linear infinite;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }
.is-busy .rt-signup__label { opacity: 0; }
.is-busy .rt-signup__spin { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rt-signup__spin { animation: none; } }

/* the answer, in place */
.rt-signup__note {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  font-weight: 500;
}
.rt-signup__note.is-on { display: flex; }
.rt-signup__note.is-ok {
  background: color-mix(in srgb, var(--rt-emerald) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rt-emerald) 36%, transparent);
  color: var(--rt-emerald);
}
.rt-signup__note.is-error {
  background: color-mix(in srgb, var(--rt-vermilion) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rt-vermilion) 36%, transparent);
  color: var(--rt-vermilion);
}
@media (prefers-reduced-motion: no-preference) {
  .rt-signup__note.is-on { animation: rt-note-in 0.28s var(--rt-ease); }
  @keyframes rt-note-in { from { opacity: 0; transform: translateY(-4px); } }
}

/* once an address is accepted the field steps back */
.rt-signup__form.is-done .rt-signup__field { opacity: 0.55; }

/* ==========================================================================
   Footer, refined
   ========================================================================== */

/* column headings sit on a short gold rule rather than a full-width one */
.rt-footer h3 {
  position: relative;
  border-bottom: 0;
  padding-bottom: var(--rt-s3);
  margin-bottom: var(--rt-s2);
}
.rt-footer h3::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 1.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rt-gold-leaf);
}

.rt-footer li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.rt-footer li a::before {
  content: "";
  width: 0;
  height: 1px;
  background: var(--rt-gold);
  transition: width 0.22s var(--rt-ease);
}
.rt-footer li a:hover { padding-inline-start: 0; }
.rt-footer li a:hover::before { width: 10px; }

.rt-footer__contact i {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rt-gold) 12%, transparent);
  font-size: 0.72rem;
  margin-top: 0;
}
.rt-footer__contact li { gap: var(--rt-s3); align-items: center; }
.rt-footer__contact a:hover { color: var(--rt-gold); }

.rt-social a { border-radius: 12px; }

.rt-footer__base { align-items: center; gap: var(--rt-s4); flex-wrap: wrap; }
.rt-footer__base nav a { position: relative; }
.rt-footer__base nav a:hover { color: var(--rt-gold); }

[data-theme="light"] .rt-signup {
  background:
    radial-gradient(80% 140% at 0% 50%, rgba(185, 141, 62, 0.12), transparent 62%),
    #fff;
  border-color: rgba(22, 40, 31, 0.10);
}

/* ==========================================================================
   Admin: newsletter summary figures
   ========================================================================== */

.rk-sub-figures { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.rk-sub-figures span { font-size: 0.82rem; color: #7e8299; white-space: nowrap; }
.rk-sub-figures strong { color: #181c32; font-size: 1rem; margin-inline-end: 2px; }

/* On a narrow screen the field and the button share too little room for the
   address to be readable, so they stack. */
@media (max-width: 34rem) {
  .rt-signup__form { flex-wrap: wrap; }
  .rt-signup__field { flex: 1 1 100%; }
  .rt-signup__form .rt-btn { flex: 1 1 100%; }
}