/* ==========================================================================
   Transformational Bible Institute
   Design system — oxblood leather, antique gilt, ink on paper-white
   Built by Kings Domain
   ========================================================================== */

:root {
  /* This site is designed light. Without this, iOS and some Android browsers
     force-darken backgrounds while leaving text colours alone, which turns
     plain sections into black boxes with near-invisible dark text. */
  color-scheme: only light;

  /* Color — black, red and white, with gold as the accent metal */
  --ink:          #111111;
  --ink-soft:     #44403E;
  --ink-faint:    #6E6967;
  --page:         #FFFFFF;
  --page-alt:     #F4F2F1;
  --rule:         #E2DEDC;
  --brand:      #C41230;
  --brand-deep: #0C0C0C;
  --brand-lift: #E01B3D;
  --gilt:         #C9A227;   /* metal: borders, rules, text on dark only */
  --gilt-ink:     #806413;   /* text-safe gold for light backgrounds (5.6:1 on white) */
  --gilt-light:   #E6CE7E;
  --redletter:    #C41230;

  /* Type */
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Space */
  --gap:     clamp(1rem, 3vw, 2rem);
  --bay:     clamp(3.5rem, 8vw, 7rem);
  --shell:   1180px;
  --shell-narrow: 780px;

  --shadow-card: 0 1px 2px rgba(25,20,18,.05), 0 8px 24px -12px rgba(25,20,18,.18);
  --shadow-lift: 0 2px 4px rgba(25,20,18,.06), 0 18px 40px -18px rgba(62,10,19,.32);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #FFFFFF; color-scheme: only light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
main { background: var(--page); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-lift); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gilt); outline-offset: 2px; border-radius: 2px; }

/* --- Type ----------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.15em; max-width: 68ch; }
.lede { font-size: clamp(1.1rem, 1.9vw, 1.32rem); color: var(--ink-soft); line-height: 1.6; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gilt-ink);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 90px;
  background: var(--rule);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after, .eyebrow--center::before {
  content: ""; height: 1px; flex: 0 0 60px; background: var(--rule);
}

/* Red-letter emphasis — the tradition of setting the words of Christ in red */
.redletter { color: var(--redletter); font-style: italic; }

.mono { font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; }

/* --- Layout --------------------------------------------------------------- */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.shell-narrow { width: min(100% - 2.5rem, var(--shell-narrow)); margin-inline: auto; }
.bay { padding-block: var(--bay); background: var(--page); }
.bay--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bay--paper { background: var(--page-alt); }
.bay--ink { background: var(--brand-deep); color: #F2EFEE;
  background-image: radial-gradient(circle at 90% 8%, rgba(196,18,48,.25), transparent 55%); }
.bay--ink h2, .bay--ink h3 { color: #fff; }
.bay--ink p { color: #CFC9C7; }
.bay--ink .eyebrow,
.hero .card-tag, .banner .card-tag, .bay--ink .card-tag,
.hero .eyebrow, .banner .eyebrow { color: var(--gilt-light); }
.bay--ink .program-code, .bay--ink .course-meta, .bay--ink .step::before { color: var(--gilt-light); }
.bay--ink .eyebrow::after, .bay--ink .eyebrow::before { background: rgba(217,190,124,.3); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide { grid-template-columns: 1.15fr .85fr; } }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-lift); color: #fff; }
.btn--gilt { background: var(--gilt); color: var(--brand-deep); }
.btn--gilt:hover { background: var(--gilt-light); color: var(--brand-deep); }
.btn--ghost { border-color: var(--rule); color: var(--ink); background: #FFFFFF; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.bay--ink .btn--ghost, .hero .btn--ghost, .banner .btn--ghost { background: transparent; }
.btn--ghost-light { border-color: rgba(243,237,228,.4); color: #F3EDE4; background: transparent; }
.btn--ghost-light:hover { border-color: var(--gilt); color: var(--gilt-light); }
.btn--sm { padding: .55rem 1rem; font-size: .85rem; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Header --------------------------------------------------------------- */
.utility {
  background: #0C0C0C;
  color: #C9C4C2;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
}
.utility .shell { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .5rem; flex-wrap: wrap; }
.utility a { color: #C9C4C2; text-decoration: none; }
.utility a:hover { color: var(--gilt-light); }
.utility-links { display: flex; gap: 1.25rem; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .shell { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); }
.brand-seal { width: 48px; height: 48px; flex: none; display: block; }
/* Name over slogan, each held to a single line so the header keeps a steady
   two-line height. The slogan is hidden before it can wrap. */
.brand-text { display: block; min-width: 0; }
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 1.06rem;
  line-height: 1.25; letter-spacing: -.01em;
  display: block; white-space: nowrap;
}
.brand-sub {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  display: block; white-space: nowrap; line-height: 1.3; margin-top: .15rem;
}
/* Below this the two lines start competing with the nav for width, so the
   slogan goes rather than wrapping across three lines. */
@media (max-width: 1240px) { .masthead .brand-sub { display: none; } }
@media (max-width: 430px) {
  .brand-name { font-size: .92rem; white-space: normal; line-height: 1.15; }
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav-cta { display: none; }
.nav a {
  position: relative;
  padding: .6rem .78rem;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 2px;
}
.nav a:hover { color: var(--brand); }

/* SIGNATURE: the ribbon bookmark marks your place, the way a ribbon marks a page */
.nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 8px);
  width: 15px;
  height: 26px;
  background: var(--gilt);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  box-shadow: 0 2px 4px rgba(62,10,19,.22);
}

.nav-actions { display: flex; align-items: center; gap: .6rem; }

.cart-btn {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .55rem .85rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: .45rem;
}
.cart-btn:hover { border-color: var(--brand); color: var(--brand); }
.cart-count {
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: .68rem;
  display: grid; place-items: center;
}
.cart-count[data-empty="true"] { background: var(--rule); color: var(--ink-faint); }

.burger { display: none; background: none; border: 1px solid var(--rule); border-radius: 2px; padding: .5rem .6rem; cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; transition: transform .2s; }

@media (max-width: 1010px) {
  .burger { display: block; }

  /* THE MENU PANEL IS FIXED TO THE SCREEN, NOT TO THE MASTHEAD. A backdrop
     filter makes its element the containing block for every fixed descendant,
     and the panel is written inside the masthead, so the blur was shrinking a
     full-height menu into a box the height of the header bar. The blur is not
     missed at this width: the bar is opaque and the page simply scrolls under
     it. */
  .masthead { backdrop-filter: none; -webkit-backdrop-filter: none; background: #FFFFFF; }

  /* The button stays on top of the panel it opened, and becomes a cross. The
     panel covers the whole screen, so without this there is no way to close
     the menu on a phone except by choosing something from it. */
  .burger { position: relative; z-index: 2; background: #FFFFFF; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .burger span { transition: transform .2s, opacity .2s; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--page);
    border-left: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    padding: 5.5rem 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-lift);
    overflow-y: auto;
  }
  /* Hidden as well as moved. A panel that is only translated off the right
     edge still counts toward the page's width, so the phone gets a page wider
     than its own screen and the whole layout is drawn shrunken; its links also
     stay in the tab order. visibility is held until the slide finishes so the
     panel does not vanish mid-animation. */
  .nav { visibility: hidden; transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s; }
  .nav[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s; }

  /* The call to action lives in the panel on a phone, because the masthead has
     no room for it beside the wordmark. */
  .nav-cta { display: inline-flex; justify-content: center; margin-top: 1.25rem; }
  .nav a { padding: .9rem .5rem; font-size: 1.05rem; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"]::after { top: 50%; left: -.5rem; transform: translateY(-50%) rotate(-90deg); }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--brand-deep);
  color: #F5EFE6;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(196,18,48,.42), transparent 58%),
    radial-gradient(circle at 12% 88%, rgba(201,162,39,.14), transparent 55%),
    linear-gradient(165deg, #1A1A1A 0%, #0C0C0C 70%);
}
/* Gilt page-edge: the gold leaf on a Bible's edge */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--gilt-light), var(--gilt) 35%, #8C6E2C 70%, var(--gilt-light));
}
.hero .shell { position: relative; z-index: 1; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; display: block; color: var(--gilt-light); }
.hero .lede { color: #D5CFCD; max-width: 54ch; }
.hero .eyebrow { color: var(--gilt-light); }
.hero .eyebrow::after { background: rgba(217,190,124,.35); }
.hero .btn-row { margin-top: 2rem; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 3.25rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(217,190,124,.24);
}
.hero-facts div { min-width: 110px; }
.hero-facts dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(217,190,124,.85); margin-bottom: .3rem; }
.hero-facts dd { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: #fff; }

/* Page banner for interior pages */
.banner {
  background: var(--brand-deep);
  color: #FFFFFF;
  position: relative;
  border-bottom: 4px solid var(--gilt);
}
.banner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% 10%, rgba(196,18,48,.38), transparent 60%),
    linear-gradient(150deg, #1A1A1A, #0C0C0C 72%);
}
.banner .shell { position: relative; z-index: 1; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.banner h1 { color: #fff; margin-bottom: .6rem; font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.banner p { color: #D2CCCA; max-width: 62ch; margin: 0; }
.banner .eyebrow { color: var(--gilt-light); }
.banner .eyebrow::after { background: rgba(217,190,124,.35); }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--gilt); }
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--ink-soft); font-size: .97rem; margin-bottom: 1.1rem; }
.card .card-foot { margin-top: auto; }
.card-tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gilt-ink); display: block; margin-bottom: .75rem;
}
.card-link {
  font-family: var(--body); font-weight: 600; font-size: .9rem;
  color: var(--brand); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.card-link:hover { gap: .65rem; }

/* Program listing rows */
.program-row {
  display: grid; gap: 1rem 2rem; align-items: start;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) { .program-row { grid-template-columns: 190px 1fr auto; align-items: center; } }
.program-row:first-of-type { border-top: 1px solid var(--rule); }
.program-code { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--gilt-ink); text-transform: uppercase; }
.program-row h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.program-row p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* --- Catalog -------------------------------------------------------------- */
.catalog-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 940px) { .catalog-layout { grid-template-columns: 250px 1fr; } }

.filters { position: sticky; top: 96px; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
.filters legend {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 0 .7rem; border-bottom: 1px solid var(--rule);
  width: 100%; margin-bottom: .8rem;
}
.filter-opt { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; cursor: pointer; font-size: .93rem; }
.filter-opt input { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }
.filter-opt span { color: var(--ink-soft); }
.filter-opt:hover span { color: var(--brand); }

.search-field { position: relative; margin-bottom: 1.5rem; }
.search-field input {
  width: 100%; padding: .8rem 1rem; font-size: .95rem;
  border: 1px solid var(--rule); border-radius: 2px; background: #fff;
}
.search-field input:focus { border-color: var(--gilt); outline: none; box-shadow: 0 0 0 3px rgba(176,141,63,.16); }

.catalog-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
}
.catalog-count { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--ink-faint); }

.course-list { display: grid; gap: 1rem; }
.course {
  display: grid; gap: .35rem 1.5rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  padding: 1.35rem 1.5rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
@media (min-width: 720px) { .course { grid-template-columns: 1fr 150px; align-items: center; } }
.course:hover { border-color: var(--gilt); box-shadow: var(--shadow-card); }
.course-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--gilt-ink); text-transform: uppercase; margin-bottom: .3rem; }
.course h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.course p { font-size: .92rem; color: var(--ink-soft); margin: 0; max-width: 62ch; }
.course-buy { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
@media (min-width: 720px) { .course-buy { align-items: flex-end; } }
.course-price { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.course-price small { display: block; font-size: .68rem; color: var(--ink-faint); letter-spacing: .06em; text-align: inherit; }
.course.is-added { border-color: var(--brand); }

.empty-state { text-align: center; padding: 4rem 1rem; border: 1px dashed var(--rule); border-radius: 3px; }
.empty-state h3 { margin-bottom: .4rem; }
.empty-state p { margin-inline: auto; color: var(--ink-soft); }

/* --- Cart drawer ---------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; background: rgba(25,20,18,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90;
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: var(--page);
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -20px 0 50px -20px rgba(25,20,18,.4);
  overflow-y: auto;
}
.drawer {
  visibility: hidden;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
}
.drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--rule);
  background: #0C0C0C; color: #fff;
  position: sticky; top: 0; z-index: 1;
  flex-shrink: 0;
}
.drawer-head h2 { margin: 0; font-size: 1.25rem; color: #fff; }
.drawer-close { background: none; border: 0; color: #C9C4C2; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.drawer-close:hover { color: var(--gilt-light); }
.drawer-body { padding: 1.25rem 1.5rem; }
.drawer-foot { border-top: 1px solid var(--rule); padding: 1.25rem 1.5rem; background: #fff; }

.line-item { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.line-item h4 { margin: 0 0 .2rem; font-size: 1rem; font-family: var(--display); }
.line-item .mono { color: var(--ink-faint); display: block; }
.line-item-price { font-family: var(--mono); font-size: .95rem; text-align: right; }
.line-remove { background: none; border: 0; color: var(--ink-faint); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: .3rem 0; text-align: left; }
.line-remove:hover { color: var(--redletter); }

.totals { font-family: var(--mono); font-size: .88rem; margin-bottom: 1.1rem; }
.totals div { display: flex; justify-content: space-between; padding: .3rem 0; }
.totals .total-row { border-top: 1px solid var(--rule); margin-top: .5rem; padding-top: .7rem; font-size: 1.15rem; font-weight: 500; }
.totals .muted { color: var(--ink-faint); }

.pay-options { display: grid; gap: .55rem; }
.pay-note { font-size: .78rem; color: var(--ink-faint); margin: .9rem 0 0; line-height: 1.5; }

/* --- Forms ---------------------------------------------------------------- */
.form-card { background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow-card); }
.fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; }
.fieldset > legend {
  font-family: var(--display); font-size: 1.35rem; font-weight: 600;
  padding: 0; margin-bottom: .35rem; width: 100%;
}
.fieldset-note { font-size: .9rem; color: var(--ink-faint); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.field-grid { display: grid; gap: 1.15rem; }
@media (min-width: 640px) {
  .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Grid children default to min-width:auto, so date inputs and selects — which
   carry a wide intrinsic minimum — push past their column and collide. */
.field-grid > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field label { font-size: .85rem; font-weight: 600; letter-spacing: .01em; }
.field label .req { color: var(--redletter); }
.field .hint { font-size: .78rem; color: var(--ink-faint); font-weight: 400; }
.field input, .field select, .field textarea {
  padding: .75rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--page);
  font-size: .97rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
}
/* Safari gives date inputs and selects a wide intrinsic width and its own
   internal padding; normalize both so every control matches its neighbour. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: auto; }
.field select,
.filters select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.9rem;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.75 7 7.25 12.5 1.75' fill='none' stroke='%23444' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 9px;
  cursor: pointer;
}
.field textarea { min-height: 130px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gilt); background-color: #fff;
  box-shadow: 0 0 0 3px rgba(201,162,39,.20);
}
/* background-color only — the shorthand would erase the chevron image */
.field select:focus, .filters select:focus {
  outline: none; border-color: var(--gilt); background-color: #fff;
  box-shadow: 0 0 0 3px rgba(201,162,39,.20);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-full { grid-column: 1 / -1; }
.check { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; font-size: .93rem; }
.check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--brand); flex: none; }
/* .field input dresses a control as a text field: padding, a border and a
   48px floor. Applied to a checkbox it produces an empty box the size of an
   input and shoves the label out of the row. Any checkbox or radio inside a
   .field is reset here, whatever wrapper it sits in. */
.field input[type="checkbox"], .field input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; padding: 0; border: 0;
  accent-color: var(--brand); flex: none;
}

.form-status { padding: 1rem 1.15rem; border-radius: 2px; font-size: .93rem; margin-bottom: 1.5rem; display: none; }
.form-status[data-state="ok"]   { display: block; background: #EDF4EE; border-left: 3px solid #3D7A4E; color: #24512F; }
.form-status[data-state="err"]  { display: block; background: #FBEDEE; border-left: 3px solid var(--redletter); color: #7A1723; }

/* --- Data tables ---------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
table.fees { width: 100%; border-collapse: collapse; min-width: 480px; }
table.fees th, table.fees td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--rule); }
table.fees thead th {
  background: var(--page-alt);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
table.fees tbody tr:last-child td { border-bottom: 0; }
table.fees td.num { font-family: var(--mono); font-size: .92rem; text-align: right; }
table.fees tbody tr:hover { background: #FCFAF6; }

/* --- Steps (real sequence, so numbering earns its place) ------------------ */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid; gap: .35rem 1.5rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .step { grid-template-columns: 64px minmax(0, 1fr); }
  /* The ::before counter is itself a grid item, so a step holds three items
     (counter, h3, p) in two columns. Without explicit placement the paragraph
     wraps onto row two of the 64px number column. Pin both explicitly. */
  .step::before { grid-column: 1; grid-row: 1; }
  .step > * { grid-column: 2; }
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 1.5rem; color: var(--gilt-ink); line-height: 1;
}
.step h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .96rem; max-width: 72ch; }

/* --- Quote / president ---------------------------------------------------- */
.portrait {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--page-alt);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.portrait img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.portrait figcaption { padding: 1rem 1.25rem; border-top: 3px solid var(--gilt); background: #fff; }
.portrait figcaption strong { display: block; font-family: var(--display); font-size: 1.1rem; }
.portrait figcaption span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

blockquote.pull {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--gilt);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
}

/* --- Value list ----------------------------------------------------------- */
.values { display: grid; gap: 0; }
.value { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .4rem 2rem; }
@media (min-width: 780px) { .value { grid-template-columns: 260px 1fr; } }
.value h3 { margin: 0; font-size: 1.2rem; }
.value p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* --- Footer --------------------------------------------------------------- */
.footer { background: #0C0C0C; color: #B3AEAC; padding-block: clamp(3rem, 6vw, 4.5rem) 0; font-size: .93rem; }
.footer h4 { color: #fff; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 500; }
.footer a { color: #B3AEAC; text-decoration: none; }
.footer a:hover { color: var(--gilt-light); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer .brand-name { color: #fff; }
.footer .brand-sub { color: #7C736D; }
.footer p { color: #8A8583; font-size: .9rem; }
/* Compliance band — deliberately set apart from the marketing links so an
   auditor or reviewer can find disclosures without hunting the site. */
.compliance-band {
  margin-top: 3rem;
  padding: 1.75rem 0 0;
  border-top: 1px solid #2A2A2A;
  display: grid;
  gap: 1.5rem 3rem;
}
@media (min-width: 820px) { .compliance-band { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); align-items: start; } }
.compliance-band h4 { margin-bottom: .5rem; color: var(--gilt-light); }
.compliance-band p { font-size: .85rem; color: #8A8583; margin: 0; max-width: 42ch; }
.compliance-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .55rem 2rem;
}
@media (min-width: 560px) { .compliance-links { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.compliance-links a {
  font-size: .88rem; color: #C4BFBD; text-decoration: none;
  display: inline-flex; align-items: center; gap: .45rem;
}
.compliance-links a::before { content: "›"; color: var(--gilt); font-size: 1rem; line-height: 1; }
.compliance-links a:hover { color: var(--gilt-light); text-decoration: underline; text-underline-offset: 3px; }

.footer-base {
  margin-top: 2rem; padding-block: 1.5rem;
  border-top: 1px solid #2A2A2A;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; color: #827D7B;
}
.disclaimer { font-size: .78rem; color: #827D7B; line-height: 1.55; max-width: 70ch; margin-top: 1.25rem; }

/* --- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 140%);
  background: #0C0C0C; color: #fff;
  padding: .85rem 1.4rem; border-radius: 3px;
  font-size: .92rem; font-weight: 500;
  box-shadow: var(--shadow-lift);
  z-index: 120; border-left: 3px solid var(--gilt);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  max-width: calc(100vw - 2rem);
}
.toast[data-show="true"] { transform: translate(-50%, 0); }

/* --- Reveal on scroll ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------------------
   Registrar sections.

   The registrar's work is four pages — applications, email wording,
   registrations, promo codes — and they have to read as one tool rather than
   four that happen to share a header. Defined here rather than in each page so
   a change lands on all of them at once; four copies of a nav is three copies
   that will drift.
   --------------------------------------------------------------------------- */
.reg-tabs {
  background: var(--page-alt);
  border-bottom: 1px solid var(--rule);
}
.reg-tabs .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
}
.reg-tabs a {
  display: inline-block;
  padding: .7rem 0;
  font: 500 .88rem/1.2 var(--body);
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reg-tabs a:hover { color: var(--ink); }
.reg-tabs a[aria-current="page"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* --- Registrar's help desk (assets/js/helpdesk.js) ------------------------
   On the student dashboard and the help page. Not on portal-exam.html. */
.hd { border: 1px solid var(--rule); background: #fff; border-radius: 3px; }
.hd-head { padding: 1rem 1.15rem .4rem; }
.hd-title { margin: 0 0 .3rem; }
.hd-sub { margin: 0; font: 400 .85rem/1.5 var(--body); color: var(--ink-soft); }
.hd-log { padding: 0 1.15rem; max-height: 26rem; overflow-y: auto; }
.hd-log:empty { padding: 0; }
.hd-turn { padding: .85rem 0; border-top: 1px solid var(--rule); }
.hd-turn:first-child { border-top: 0; padding-top: .4rem; }
.hd-turn p { margin: 0 0 .5rem; }
.hd-turn p:last-child { margin-bottom: 0; }
.hd-who {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hd-turn--you .hd-who { color: var(--ink-faint); }
.hd-turn--wait p { color: var(--ink-faint); font-style: italic; }
.hd-turn--handoff { background: #FdF9F0; margin: 0 -1.15rem; padding-left: 1.15rem; padding-right: 1.15rem; }
.hd-turn--note p { color: #7A1723; }
.hd-list { margin: 0 0 .5rem; padding-left: 1.1rem; }
.hd-list li { margin: .2rem 0; }
.hd-handoff { margin-top: .6rem !important; }
.hd-form { padding: .9rem 1.15rem 0; border-top: 1px solid var(--rule); }
.hd-label {
  display: block; margin-bottom: .3rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hd-form textarea { width: 100%; }
.hd-actions { display: flex; align-items: center; gap: .75rem; margin: .6rem 0 0; }
.hd-count { font: 400 .78rem/1 var(--body); color: var(--ink-faint); }
.hd-foot { margin: .8rem 1.15rem 1rem; font: 400 .82rem/1.5 var(--body); color: var(--ink-soft); }
.hd-foot:empty { display: none; }
.hd-sendnote { font: 400 .85rem/1.5 var(--body); color: var(--ink-soft); }
.hd-handoff .btn + .hd-sendnote { margin-left: .5rem; }

/* --- Phones ----------------------------------------------------------------
   Everything here exists to keep the page exactly as wide as the screen. A
   page one pixel wider than the viewport can be swiped sideways, and a phone
   browser that finds one often draws the whole layout scaled down to fit,
   which is what "displaced and out of proportion" looks like to a reader. */

/* A belt for the braces above: anything that still reaches past the right edge
   is clipped rather than allowed to widen the page. clip rather than hidden,
   because hidden on the root turns the page into a scroll container and the
   sticky masthead stops sticking. */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* A long address, URL or course code breaks rather than pushing the column
   out. Only where it cannot otherwise fit. */
body { overflow-wrap: break-word; }

@media (max-width: 620px) {
  /* The utility strip carries four lines on a phone and breaks the telephone
     number across two of them. The address and the number are plain text here
     and are carried as live links in the footer, so the strip keeps the two
     links that are worth a tap and holds them to one row. */
  .utility .shell { justify-content: center; gap: .4rem 1.1rem; padding-block: .45rem; }
  .utility .shell > span:first-child { display: none; }
  .utility-links { gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
  .utility-links a[href^="mailto:"] { display: none; }

  /* The masthead holds the wordmark, the cart and the menu. The apply button
     does not fit beside them and moves into the menu panel. */
  .masthead .shell { gap: .75rem; min-height: 64px; }
  .nav-actions { gap: .4rem; }
  .nav-actions > .btn--primary { display: none; }
  .brand { gap: .55rem; min-width: 0; }
  .brand-seal { width: 38px; height: 38px; }
  .brand-text { overflow: hidden; }
  .cart-btn { padding: .45rem .6rem; font-size: .72rem; }
  .burger { padding: .45rem .5rem; }
}

/* A field never sets its own width on a narrow screen. A grid column sized to
   an input's intrinsic width is how a form ends up wider than the phone. */
.mq-field, .form-field, .field { min-width: 0; }
.mq-field input, .mq-field textarea, .mq-field select,
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}