/* ---------------------------------------------------------------- 0. fonts
   Self-hosted. Faster than a third-party host, works with no signal inside the
   PWA, and nothing about a student praying on campus gets sent to anyone else. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("/assets/fonts/amiri.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ==========================================================================
   salfordisoc.com
   Palette: the prayer day is a day — limestone and pre-dawn indigo,
   champagne from the society mark for display, azure for "now".
   See DESIGN-NOTES.md.
   ========================================================================== */

/* ------------------------------------------------------------- 1. tokens */
:root {
  /* light is the base definition. every colour on the site is declared here. */
  --ground:        #EFEFF6;
  --ground-deep:   #E5E5F0;
  --surface:       #FBFBFE;
  --surface-2:     #F4F4FB;
  --ink:           #12123A;
  --ink-2:         #4A4A78;
  --ink-3:         #63638C;
  --border-control:#84849F;
  --line:          #DCDCE9;
  --line-strong:   #C3C3D8;

  --navy:          #1D1B6E;

  --metal:         #6C6248;
  --metal-soft:    #EFEADD;
  --metal-ink:     #574E37;

  --accent:        #2447C4;
  --accent-soft:   #DEE4FA;
  --accent-ink:    #1B3596;

  --alert:         #8C2F16;
  --alert-soft:    #F7E4DE;

  --shadow-1: 0 1px 2px rgba(22,20,44,.05), 0 6px 18px -8px rgba(22,20,44,.14);
  --shadow-2: 0 2px 6px rgba(22,20,44,.06), 0 24px 48px -24px rgba(22,20,44,.24);

  --pattern-opacity: .085;
  --hero-wash: linear-gradient(176deg, #E4E4F2 0%, var(--ground) 64%);

  /* type */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "Amiri", "Noto Naskh Arabic", serif;

  /* scale */
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(.95rem, .92rem + .16vw, 1.05rem);
  --step-1:  clamp(1.12rem, 1.05rem + .34vw, 1.34rem);
  --step-2:  clamp(1.4rem, 1.26rem + .7vw, 1.9rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.9vw, 4.4rem);

  --wrap: 1180px;
  --gutter: clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --radius: 4px;
  --radius-lg: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #09091E;
    --ground-deep:   #050514;
    --surface:       #12123A;
    --surface-2:     #191948;
    --ink:           #ECECF7;
    --ink-2:         #A3A3C6;
    --ink-3:         #918FB6;
    --border-control:#63619A;
    --line:          #242352;
    --line-strong:   #35346E;

    --navy:          #2B2AA9;

    --metal:         #DFD6C0;
    --metal-soft:    #2A2718;
    --metal-ink:     #EFE7D3;

    --accent:        #8FA6FF;
    --accent-soft:   #1E2668;
    --accent-ink:    #B3C2FF;

    --alert:         #F0917A;
    --alert-soft:    #331711;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
    --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 48px -24px rgba(0,0,0,.8);

    --pattern-opacity: .10;
    --hero-wash: linear-gradient(176deg, #14144A 0%, var(--ground) 64%);
  }
}

:root[data-theme="dark"] {
  --ground:        #09091E;
  --ground-deep:   #050514;
  --surface:       #12123A;
  --surface-2:     #191948;
  --ink:           #ECECF7;
  --ink-2:         #A3A3C6;
  --ink-3:         #918FB6;
  --border-control:#63619A;
  --line:          #242352;
  --line-strong:   #35346E;

  --navy:          #2B2AA9;

  --metal:         #DFD6C0;
  --metal-soft:    #2A2718;
  --metal-ink:     #EFE7D3;

  --accent:        #8FA6FF;
  --accent-soft:   #1E2668;
  --accent-ink:    #B3C2FF;

  --alert:         #F0917A;
  --alert-soft:    #331711;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 48px -24px rgba(0,0,0,.8);

  --pattern-opacity: .10;
  --hero-wash: linear-gradient(176deg, #14144A 0%, var(--ground) 64%);
}

/* --------------------------------------------------------------- 2. base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.014em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; max-width: 66ch; }
a { color: inherit; }

ul, ol { margin: 0; padding-left: 1.15em; }
li { margin-block: .3em; }

strong { font-weight: 600; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--line-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--metal); color: var(--ground); }

.arabic { font-family: var(--arabic); font-weight: 400; }

/* utilities that carry meaning, not decoration */
.eyebrow {
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }
.nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

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

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--ground);
  padding: .7rem 1.1rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 8px; }

/* ------------------------------------------------------------ 3. layout */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - (var(--gutter) * 2), 760px); margin-inline: auto; }

.stack { display: flex; flex-direction: column; }
.stack-xs { gap: .5rem; }  .stack-sm { gap: .85rem; }
.stack-md { gap: 1.5rem; } .stack-lg { gap: 2.5rem; }
.stack-xl { gap: 4rem; }

.section { padding-block: clamp(3rem, 1.5rem + 5vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ------------------------------------------------------------ 4. header */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 66px;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; font-family: var(--display);
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); margin-right: auto; white-space: nowrap;
}
.brand-mark {
  flex: none; width: 34px; height: 34px;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/logo-mask.png") center / contain no-repeat;
  mask: url("/assets/img/logo-mask.png") center / contain no-repeat;
}
.brand:hover .brand-mark { background-color: var(--metal); }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font-weight: 600; letter-spacing: -.02em; }
.brand-name small {
  font-family: var(--sans); font-size: .56rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  margin-top: .18rem;
}
/* the mark used large — in the footer and the hero watermark */
.mark-big { display: block;
  width: clamp(72px, 9vw, 104px); aspect-ratio: 1;
  background-color: var(--metal);
  -webkit-mask: url("/assets/img/logo-mask.png") center / contain no-repeat;
  mask: url("/assets/img/logo-mask.png") center / contain no-repeat;
  flex: none;
}

.nav { display: none; align-items: center; gap: .25rem; }
@media (min-width: 940px) { .nav { display: flex; } }

.nav a, .nav > .has-menu > button {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .875rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--radius);
  background: none; border: 0; cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}
.nav a:hover, .nav > .has-menu > button:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; display: block; position: absolute;
}
.has-menu { position: relative; }
.has-menu > button > svg { width: 11px; height: 11px; opacity: .55; transition: transform .16s ease; }
.has-menu[data-open="true"] > button > svg { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 230px; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  display: none; flex-direction: column;
}
.has-menu[data-open="true"] .menu { display: flex; }
.menu a { padding: .55rem .65rem; border-radius: var(--radius); }
.menu a small { display: block; font-size: .75rem; color: var(--ink-3); font-weight: 400; }

.masthead-tools { display: flex; align-items: center; gap: .4rem; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink-2); cursor: pointer;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.icon-btn svg { width: 18px; height: 18px; }
@media (min-width: 940px) { .icon-btn.only-mobile { display: none; } }

/* mobile drawer */
.drawer {
  position: fixed; inset: 66px 0 0; z-index: 99;
  background: var(--ground); overflow-y: auto;
  padding: 1.5rem var(--gutter) 6rem;
  display: none;
}
.drawer[data-open="true"] { display: block; }
@media (min-width: 940px) { .drawer { display: none !important; } }
.drawer .drawer-group { font-family: var(--sans); font-size: .688rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin: 1.75rem 0 .4rem; }
.drawer .drawer-group:first-child { margin-top: 0; }
.drawer a {
  display: block; padding: .7rem 0; text-decoration: none;
  font-size: 1.08rem; font-weight: 500;
  border-bottom: 1px solid var(--line);
}

/* mobile bottom bar — one thumb-reachable target */
.thumbbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
@media (min-width: 940px) { .thumbbar { display: none; } }
body.has-thumbbar { padding-bottom: 76px; }
@media (min-width: 940px) { body.has-thumbbar { padding-bottom: 0; } }

.announce {
  background: var(--accent-soft); color: var(--accent-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.announce-in {
  display: flex; gap: .8rem; align-items: flex-start;
  padding-block: .8rem; font-size: .875rem; line-height: 1.5;
}
.announce svg { flex: none; width: 17px; height: 17px; margin-top: .15rem; }
.announce p { margin: 0; max-width: 78ch; }
.announce b { font-weight: 600; }
.announce .extra { display: block; margin-top: .2rem; opacity: .85; }
.announce a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.announce .close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .6; font: inherit; font-size: 1.1rem; line-height: 1;
  padding: .1rem .35rem; border-radius: var(--radius);
}
.announce .close:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* -------------------------------------------------------------- 5. hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-wash);
  border-bottom: 1px solid var(--line);
}
.hero-pattern {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: var(--pattern-opacity); pointer-events: none;
  -webkit-mask-image: radial-gradient(115% 105% at 88% -8%, #000 0%, rgba(0,0,0,.55) 42%, transparent 82%);
  mask-image: radial-gradient(115% 105% at 88% -8%, #000 0%, rgba(0,0,0,.55) 42%, transparent 82%);
}
.hero-in { position: relative; padding-block: clamp(2.25rem, 1rem + 4vw, 4rem) clamp(2.5rem, 1rem + 4vw, 4.25rem); }

.hero-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); align-items: center; }
}

/* the clock — the one place boldness is spent */
.hero-id {
  display: flex; align-items: center; gap: .7rem;
  font-size: .688rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero-id::before {
  content: ""; width: 26px; height: 1px; background: var(--metal); flex: none;
}
.clock { display: flex; flex-direction: column; gap: .5rem; }
.clock-label { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.clock-name {
  font-family: var(--display); font-size: var(--step-2);
  font-weight: 500; letter-spacing: -.02em;
}
.clock-ar { font-family: var(--arabic); font-size: var(--step-2); color: var(--metal); line-height: 1; }
.clock-count {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(4.4rem, 2rem + 11vw, 7.8rem);
  line-height: .86; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .06em;
}
.clock-count .unit {
  font-family: var(--sans); font-size: .19em; font-weight: 600;
  letter-spacing: .03em; color: var(--ink-3); margin-right: .3em;
  transform: translateY(-.24em);
}
.clock-count > span:not(.unit) { font-feature-settings: "tnum" 1; }
.clock-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; color: var(--ink-2); font-size: var(--step--1); }
.clock-meta b { color: var(--ink); font-weight: 600; }

.datestrip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem;
  color: var(--ink-2); font-size: var(--step--1); line-height: 1.4;
}
.datestrip .hijri {
  font-family: var(--arabic); font-size: 1.22em; color: var(--metal);
}
.datestrip .caveat { flex-basis: 100%; font-size: .69rem; color: var(--ink-3); }
.datestrip .where { font-weight: 500; color: var(--ink); }
/* the hairline separators only make sense while the line holds together */
@media (min-width: 720px) {
  .datestrip .hijri, .datestrip .where {
    padding-left: .9rem; border-left: 1px solid var(--line-strong);
  }
}
@media (max-width: 719px) {
  .datestrip { gap: .1rem .8rem; }
  .datestrip .hijri { flex-basis: 100%; }
}

/* --------------------------------------------------- 6. the day strip */
/* the recurring object. prayers are a sequence in time, so they hang on a rail. */
.daystrip { position: relative; padding-left: 26px; }
.daystrip::before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px;
  width: 1px; background: var(--line-strong);
}
.daystrip-now {
  position: absolute; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--ground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: top .5s cubic-bezier(.4,0,.2,1);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .daystrip-now { transition: none; } }

.prayer-row {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: .3rem 1rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.prayer-row:last-child { border-bottom: 0; }
.prayer-row .pname {
  font-family: var(--display); font-size: 1.12rem; font-weight: 500;
  display: flex; align-items: baseline; gap: .45rem;
}
.prayer-row .pname .ar { font-family: var(--arabic); font-size: 1.02em; color: var(--ink-3); }
.prayer-row .sub { grid-column: 1 / -1; font-size: .71rem; color: var(--ink-3); letter-spacing: .01em; margin-top: -.1rem; }
.prayer-row .begins,
.prayer-row .jamaat { font-variant-numeric: tabular-nums; text-align: right; min-width: 4.4ch; }
.prayer-row .begins { font-size: 1.06rem; font-weight: 500; }
.prayer-row .jamaat { font-size: 1.06rem; font-weight: 600; color: var(--accent); min-width: 6.6ch; }
.prayer-row .jamaat.none {
  font-size: .72rem; font-weight: 500; color: var(--ink-3);
  letter-spacing: .02em; text-transform: none;
}

.prayer-row[data-state="now"] { border-bottom-color: transparent; }
.prayer-row[data-state="now"]::before {
  content: ""; position: absolute; inset: -1px -12px -1px -14px; z-index: -1;
  background: var(--accent-soft); border-radius: var(--radius);
  box-shadow: inset 2px 0 0 var(--accent);
}
.prayer-row[data-state="now"] .pname { font-weight: 600; }
/* Opacity fades text below the contrast floor and says nothing to a screen
   reader. Past rows are now a muted colour that still passes, plus the
   struck-through jama'ah time, which is the cue people actually read. */
.prayer-row[data-state="past"] { color: var(--ink-3); }
.prayer-row[data-state="past"] .pname,
.prayer-row[data-state="past"] .nums { color: var(--ink-3); }
.prayer-row[data-state="past"] .jamaat.nums {
  text-decoration: line-through; text-decoration-thickness: 1px;
  color: var(--ink-3);
}
.prayer-row[data-state="past"] .jamaat.none { text-decoration: none; }

.strip-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .8rem; flex-wrap: wrap;
}
.strip-cap h2 { font-size: 1.05rem; }
.strip-cap span { font-size: .72rem; color: var(--ink-3); }
.strip-head {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line-strong);
  font-size: .688rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.strip-head span:nth-child(2) { min-width: 4.4ch; text-align: right; }
.strip-head span:nth-child(3) { min-width: 6.6ch; text-align: right; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.15rem, .8rem + 1vw, 1.6rem);
  box-shadow: var(--shadow-1);
}
.panel-flush { padding: 0; overflow: hidden; }

/* -------------------------------------------------- 6b. the day bar */
/* Where we are between Fajr and Isha. Encodes the shape of the day, which
   is genuinely the thing a person is trying to work out. */
.daybar { display: flex; flex-direction: column; gap: .55rem; max-width: 34rem; }
.daybar-track {
  position: relative; height: 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--border-control) 55%, transparent);
}
.daybar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--metal) 45%, transparent), var(--metal));
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.daybar-tick {
  position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--border-control);
}
.daybar-tick[data-passed="true"] { background: var(--metal); }
.daybar-dot {
  position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--ground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: left .6s cubic-bezier(.4,0,.2,1); z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .daybar-fill, .daybar-dot { transition: none; }
}
.daybar-labels { position: relative; height: 1.1rem; }
.daybar-labels span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: .66rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.daybar-labels span:first-child { transform: none; }
.daybar-labels span:last-child { transform: translateX(-100%); }
.daybar-labels span[data-passed="true"] { color: var(--ink-2); }

/* ----------------------------------------------------------- 7. notices */
.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--step--1); line-height: 1.5;
}
.notice svg { flex: none; width: 17px; height: 17px; margin-top: .12rem; }
.notice p { margin: 0; max-width: 70ch; }
.notice a { color: inherit; }
.notice-alert { border-color: color-mix(in srgb, var(--alert) 40%, var(--line)); background: var(--alert-soft); color: var(--alert); }
.notice-alert a, .notice-alert strong { color: inherit; }
.notice-metal { border-color: color-mix(in srgb, var(--metal) 42%, var(--line)); background: var(--metal-soft); color: var(--metal-ink); }
.notice-accent { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); }

.provenance {
  font-size: .75rem; color: var(--ink-3); line-height: 1.5;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.provenance a { color: var(--ink-2); }

/* ----------------------------------------------------------- 8. buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .65rem 1.25rem;
  font: inherit; font-size: .92rem; font-weight: 600; letter-spacing: -.005em;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--ink); color: var(--ground); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
.btn-ghost { border-color: var(--border-control); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn-wide { width: 100%; }
.btn-accent { background: var(--accent); color: var(--ground); }

.btnrow { display: flex; flex-wrap: wrap; gap: .65rem; }

/* -------------------------------------------------------------- 9. cards */
/* stretch, not start: .card is a flex column with .card-go pinned by
   margin-top:auto, which only pays off if the cards are equal height. */
.cards { display: grid; gap: 1rem; align-items: stretch; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.25rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.card:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.card .card-go { margin-top: auto; padding-top: .4rem; font-size: .8rem; font-weight: 600; color: var(--accent); }

/* pills carry state, not decoration */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .55rem; border-radius: 100px;
  font-size: .688rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border-control); color: var(--ink-2); white-space: nowrap;
}
.pill-accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-ink); }
.pill-metal { border-color: color-mix(in srgb, var(--metal) 45%, transparent); background: var(--metal-soft); color: var(--metal-ink); }
.pill-alert { border-color: color-mix(in srgb, var(--alert) 45%, transparent); background: var(--alert-soft); color: var(--alert); }

/* -------------------------------------------------------------- 10. table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.swipe-hint { display: none; }
@media (max-width: 780px) {
  .swipe-hint { display: flex; align-items: center; gap: .4rem;
    font-size: var(--step--1); color: var(--ink-3); margin-bottom: .5rem; }
  .swipe-hint svg { width: 15px; height: 15px; flex: none; }
}
table.month {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums; font-size: .85rem;
  min-width: 720px;
}
table.month th, table.month td { padding: .5rem .55rem; text-align: right; white-space: nowrap; }
table.month tbody th { font-weight: 400; }
table.month td.jam a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
table.month thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface); color: var(--ink-3);
  font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong); padding-block: .7rem;
}
table.month thead th.grp {
  text-align: center; border-bottom: 1px solid var(--line);
  color: var(--ink-2); letter-spacing: .12em;
}
table.month tbody th:first-child, table.month tbody td:first-child, table.month thead th:first-child { text-align: left; }
table.month tbody tr { border-bottom: 1px solid var(--line); }
table.month tbody tr:last-child { border-bottom: 0; }
table.month tbody tr:hover { background: var(--surface-2); }
table.month tbody tr.is-today { background: var(--accent-soft); }
table.month tbody tr.is-today td { font-weight: 600; }
table.month tbody tr.is-friday td:first-child { color: var(--metal-ink); font-weight: 600; }
table.month td.jam { color: var(--accent); font-weight: 600; }
table.month td.none { color: var(--ink-3); font-size: .75rem; }
table.month .daynum { font-weight: 600; }
table.month .dayname { color: var(--ink-3); font-weight: 400; margin-left: .35rem; }

/* ------------------------------------------------------------- 11. pieces */
.shots { display: grid; gap: .5rem; grid-template-columns: 2fr 1fr; }
.shots figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.shots figure:first-child { grid-row: span 2; }
.shots img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
@media (max-width: 560px) {
  .shots { grid-template-columns: 1fr 1fr; }
  .shots figure:first-child { grid-row: auto; grid-column: span 2; }
  .shots figure:first-child img { aspect-ratio: 16/10; }
}

/* Wide variant for ISOC's own photographs: landscape frames with a caption under
   each, rather than the prayer-spaces collage. Must come after the .shots rules
   above — same specificity, so source order is what decides. */
.shots-wide { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;
  margin-block: 1.9rem; align-items: start; }
.shots-wide figure { background: none; overflow: visible; }
/* matches .shots figure:first-child's specificity, which spans it across two
   tracks on narrow screens — every wide photo is its own equal frame. */
.shots-wide figure:first-child { grid-row: auto; grid-column: auto; }
.shots-wide img { height: auto; aspect-ratio: 16/9; border-radius: var(--radius); }
.shots-wide figcaption { padding-top: .5rem; font-size: var(--step--1); color: var(--ink-3); }

/* A card that leads a grid: spans the full width on wide screens and carries a
   tinted ground so the eye lands on it first. */
.card-lead { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.card-lead h3, .card-lead .eyebrow { color: var(--accent-ink); }
.card-lead p { color: var(--accent-ink); }
@media (min-width: 760px) { .cards-2 > .card-lead { grid-column: 1 / -1; } }

/* Three facts, big and countable, to break up a wall of paragraphs. */
.stat-card { padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); display: flex; flex-direction: column; gap: .3rem; }
.stat-big { font-family: var(--display); font-weight: 500; line-height: 1;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); color: var(--navy); margin: .1rem 0 .35rem; }
:root[data-theme="dark"] .stat-big, :root:not([data-theme="light"]) .stat-big { color: var(--accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .stat-big { color: var(--navy); } }

/* ---- tabs -------------------------------------------------------------
   Radio inputs, not JavaScript. The arrow keys already move between radios
   in every browser, the selection survives a page with scripts off, and the
   labels are real labels so the hit area is the whole tab. */
.tabs { display: block; }
.tab-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.tablist {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: -1px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tablist::-webkit-scrollbar { height: 6px; }
.tablist::-webkit-scrollbar-thumb { background: var(--line-strong, var(--line)); border-radius: 3px; }
.tab {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; gap: .12rem; min-width: 9.5rem;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); transition: border-color .15s, background-color .15s, transform .12s;
}
.tab:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.tab-campus { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tab-name { font-weight: 600; font-size: var(--step-0); }
.tab-sub { font-size: var(--step--1); color: var(--ink-2); }
.tab-panel { display: none; }
.tab-panel { border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(1.15rem, .8rem + 1vw, 1.7rem); }
.room-head { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-start;
  justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem; }
.room-title { font-size: var(--step-2); }
.room-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.room-body { display: grid; gap: 1.4rem; }
@media (min-width: 800px) { .room-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }

/* selection: colour the chosen tab, reveal its panel */
.tabs input:nth-of-type(1):checked ~ .tablist .tab:nth-of-type(1),
.tabs input:nth-of-type(2):checked ~ .tablist .tab:nth-of-type(2),
.tabs input:nth-of-type(3):checked ~ .tablist .tab:nth-of-type(3),
.tabs input:nth-of-type(4):checked ~ .tablist .tab:nth-of-type(4),
.tabs input:nth-of-type(5):checked ~ .tablist .tab:nth-of-type(5),
.tabs input:nth-of-type(6):checked ~ .tablist .tab:nth-of-type(6) {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.tabs input:nth-of-type(1):checked ~ .tablist .tab:nth-of-type(1) .tab-name,
.tabs input:nth-of-type(2):checked ~ .tablist .tab:nth-of-type(2) .tab-name,
.tabs input:nth-of-type(3):checked ~ .tablist .tab:nth-of-type(3) .tab-name,
.tabs input:nth-of-type(4):checked ~ .tablist .tab:nth-of-type(4) .tab-name,
.tabs input:nth-of-type(5):checked ~ .tablist .tab:nth-of-type(5) .tab-name,
.tabs input:nth-of-type(6):checked ~ .tablist .tab:nth-of-type(6) .tab-name,
.tabs input:nth-of-type(1):checked ~ .tablist .tab:nth-of-type(1) .tab-campus,
.tabs input:nth-of-type(2):checked ~ .tablist .tab:nth-of-type(2) .tab-campus,
.tabs input:nth-of-type(3):checked ~ .tablist .tab:nth-of-type(3) .tab-campus,
.tabs input:nth-of-type(4):checked ~ .tablist .tab:nth-of-type(4) .tab-campus,
.tabs input:nth-of-type(5):checked ~ .tablist .tab:nth-of-type(5) .tab-campus,
.tabs input:nth-of-type(6):checked ~ .tablist .tab:nth-of-type(6) .tab-campus,
.tabs input:nth-of-type(1):checked ~ .tablist .tab:nth-of-type(1) .tab-sub,
.tabs input:nth-of-type(2):checked ~ .tablist .tab:nth-of-type(2) .tab-sub,
.tabs input:nth-of-type(3):checked ~ .tablist .tab:nth-of-type(3) .tab-sub,
.tabs input:nth-of-type(4):checked ~ .tablist .tab:nth-of-type(4) .tab-sub,
.tabs input:nth-of-type(5):checked ~ .tablist .tab:nth-of-type(5) .tab-sub,
.tabs input:nth-of-type(6):checked ~ .tablist .tab:nth-of-type(6) .tab-sub {
  color: var(--accent-ink);
}
.tabs input:nth-of-type(1):checked ~ .tab-panels .tab-panel:nth-of-type(1),
.tabs input:nth-of-type(2):checked ~ .tab-panels .tab-panel:nth-of-type(2),
.tabs input:nth-of-type(3):checked ~ .tab-panels .tab-panel:nth-of-type(3),
.tabs input:nth-of-type(4):checked ~ .tab-panels .tab-panel:nth-of-type(4),
.tabs input:nth-of-type(5):checked ~ .tab-panels .tab-panel:nth-of-type(5),
.tabs input:nth-of-type(6):checked ~ .tab-panels .tab-panel:nth-of-type(6) { display: block; }
/* keyboard: the radio is invisible, so ring the label instead */
.tabs input:nth-of-type(1):focus-visible ~ .tablist .tab:nth-of-type(1),
.tabs input:nth-of-type(2):focus-visible ~ .tablist .tab:nth-of-type(2),
.tabs input:nth-of-type(3):focus-visible ~ .tablist .tab:nth-of-type(3),
.tabs input:nth-of-type(4):focus-visible ~ .tablist .tab:nth-of-type(4),
.tabs input:nth-of-type(5):focus-visible ~ .tablist .tab:nth-of-type(5),
.tabs input:nth-of-type(6):focus-visible ~ .tablist .tab:nth-of-type(6) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- price card + split ------------------------------------------------ */
.split { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 820px) { .split { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 2.4rem; } }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  display: flex; flex-direction: column; gap: .55rem;
}
.price-card .eyebrow { margin-bottom: .5rem; }          /* the gap that was missing */
.price { font-family: var(--display); font-weight: 500; line-height: .95; letter-spacing: -.02em;
  font-size: clamp(3.2rem, 2rem + 6vw, 4.6rem); color: var(--navy); margin: 0; }
:root[data-theme="dark"] .price { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .price { color: var(--accent); } }
.price-sub { font-size: var(--step--1); color: var(--ink-3); margin: 0 0 1rem; }
.btn-wide { width: 100%; justify-content: center; }
.btn-lg { min-height: 50px; padding: .7rem 1.4rem; font-size: var(--step-0); }

/* ---- feature block ----------------------------------------------------- */
/* For the two things we most want someone to do. Wider, tinted, its own
   heading scale, so it reads as an offer rather than another paragraph. */
.feature {
  display: grid; gap: 1.4rem; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, var(--surface)));
}
@media (min-width: 860px) { .feature { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2.4rem; } }
.feature h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); color: var(--accent-ink); margin-bottom: .3rem; }
.feature p { color: var(--accent-ink); }
.feature .muted, .feature .muted.small { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }
.feature-main { display: flex; flex-direction: column; gap: .8rem; }
.feature-side { display: flex; flex-direction: column; gap: .4rem;
  padding-top: .3rem; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
@media (min-width: 860px) { .feature-side { border-top: 0; padding-top: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding-left: 1.6rem; } }
.feature .btnrow { margin-top: .4rem; }
.feature-metal {
  border-color: color-mix(in srgb, var(--metal) 45%, var(--line));
  background: linear-gradient(150deg, var(--metal-soft), color-mix(in srgb, var(--metal-soft) 45%, var(--surface)));
}
.feature-metal h2, .feature-metal p { color: var(--metal-ink); }
.feature-metal .muted, .feature-metal .muted.small { color: color-mix(in srgb, var(--metal-ink) 80%, transparent); }
.feature-metal .feature-side { border-color: color-mix(in srgb, var(--metal) 40%, transparent); }
.feature-metal .btn-primary { background: var(--metal-ink); color: var(--ground); }
.feature-metal .btn-ghost { border-color: color-mix(in srgb, var(--metal-ink) 55%, transparent); color: var(--metal-ink); }

/* Two Asr columns, two calculations. The sub-label names which is which
   without turning the header row into a paragraph. */
.th-sub { display: block; font-weight: 500; font-size: .72em; color: var(--ink-3);
          letter-spacing: .02em; margin-top: .1rem; }
.deflist { display: grid; gap: .1rem .9rem; grid-template-columns: max-content minmax(0,1fr); font-size: var(--step--1); }
.deflist dt { color: var(--ink-3); padding-block: .3rem; }
.deflist dd { margin: 0; padding-block: .3rem; }

.sittings { display: flex; flex-wrap: wrap; gap: .5rem; }
.sitting {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .8rem; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line); min-width: 5.4rem;
}
.sitting .n {
  font-size: .625rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.sitting .t { font-size: 1.14rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.jum-card[data-live="today"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.jum-card[data-live="today"] .sitting { background: var(--accent-soft); border-color: transparent; }
.jum-card[data-live="next"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.jum-card[data-live="past"] { background: var(--surface-2); border-style: dashed; }
.jum-card[data-live="past"] .sitting .t { color: var(--ink-3);
  text-decoration: line-through; text-decoration-thickness: 1px; }

table.month thead th.grp-jam { color: var(--accent); }

.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: var(--step-1); font-weight: 500;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; font-family: var(--sans); font-size: 1.3rem; font-weight: 400;
  color: var(--ink-3); line-height: 1; flex: none; transition: transform .18s ease;
}
.qa[open] summary::after { content: "\2013"; }
.qa .qa-body { padding-bottom: 1.15rem; color: var(--ink-2); }
.qa .qa-body p { max-width: 68ch; }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font: inherit; font-size: .8rem; font-weight: 500;
  padding: .38rem .8rem; border-radius: 100px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-control); color: var(--ink-2);
  transition: all .14s ease;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }

.event {
  display: grid; gap: .35rem .9rem; grid-template-columns: minmax(0,1fr) auto;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
.event:last-child { border-bottom: 0; }
.event h3 { font-size: var(--step-1); }
.event .when { grid-column: 1; font-size: var(--step--1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.event .when b { color: var(--ink); font-weight: 600; }
.event p { grid-column: 1; font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.event .pill { grid-row: 1; grid-column: 2; }
@media (max-width: 520px) {
  .event { grid-template-columns: minmax(0,1fr); }
  .event .pill { grid-row: auto; grid-column: 1; justify-self: start; }
}

.person {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.person .role { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.person .who { font-size: var(--step--1); color: var(--ink-2); }
.person a { font-size: var(--step--1); color: var(--accent); text-decoration: none; word-break: break-all; }
.person a:hover { text-decoration: underline; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.75rem; font-size: var(--step-2); }
.prose h3 { margin-top: 2rem; font-size: var(--step-1); }
.prose a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }
.prose ul, .prose ol { color: var(--ink-2); }

/* -------------------------------------------------------------- 12. footer */
.foot {
  position: relative; overflow: hidden;
  margin-top: clamp(3rem, 1.5rem + 5vw, 6rem);
  border-top: 1px solid var(--line);
  background: var(--ground-deep);
}
.foot-pattern {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: calc(var(--pattern-opacity) * .85); pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 80%);
  mask-image: linear-gradient(to top, #000, transparent 80%);
}
.foot-in { position: relative; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 2rem; }
.foot-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot h2 {
  font-family: var(--sans); font-size: .688rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .75rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.foot a { font-size: .875rem; color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-mark { margin-top: 2.5rem; opacity: .5; }
.foot-base {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .78rem; color: var(--ink-3);
}
.foot-base p { max-width: 62ch; margin: 0; }
.socials { display: flex; gap: .3rem; }
.socials a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line); }
.socials a:hover { border-color: var(--ink-3); }
.socials svg { width: 16px; height: 16px; }

/* --------------------------------------------------------- 13. page head */
.pagehead { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pagehead-in { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; gap: .85rem; }
.crumbs { font-size: .78rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink-2); text-decoration: underline; }

/* ---- photo band -------------------------------------------------------
   The page head, but over one of ISOC's own photographs. Same shape as
   .pagehead so the two are interchangeable. The scrim is heavy on the left
   where the type sits and thins to the right so the room still reads; text
   always sits on at least 88% navy, which clears AA against white by a mile
   regardless of what the photo is doing underneath. */
.band { position: relative; isolation: isolate; background: #0B0B22; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--band-set, var(--band-img)); background-size: cover; background-position: var(--band-pos, 50% 42%);
  transform: scale(1.04); filter: brightness(1.22) saturate(1.06);
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9,9,30,.55), rgba(9,9,30,.20) 45%, rgba(9,9,30,.75)),
    linear-gradient(96deg, rgba(9,9,30,.96) 12%, rgba(9,9,30,.88) 52%, rgba(9,9,30,.46));
}
.band .pagehead-in { padding-block: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.band h1, .band .lede, .band .eyebrow, .band .crumbs, .band .crumbs a, .band p { color: #F4F4FA; }
.band .eyebrow { color: #B9BEE6; }
.band .lede { color: #D8DAF0; max-width: 46ch; }
.band .crumbs a:hover { color: #fff; }
.band .btn-ghost { border-color: rgba(255,255,255,.55); color: #F4F4FA; }
.band .btn-ghost:hover { background: rgba(255,255,255,.12); }
.band-credit {
  position: absolute; right: .75rem; bottom: .5rem; z-index: 1;
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
@media (max-width: 560px) {
  .band::after { background:
    linear-gradient(180deg, rgba(9,9,30,.72), rgba(9,9,30,.55) 40%, rgba(9,9,30,.88)); }
}

/* -------------------------------------------------------------- 14. motion */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .55s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* --------------------------------------------------------------- 15. print */
@media print {
  .masthead, .drawer, .thumbbar, .foot, .hero-pattern, .no-print, .skip { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .section, .hero-in, .pagehead-in { padding-block: 0; }
  table.month { min-width: 0; font-size: 9.5pt; }
  table.month thead th { background: #fff; color: #000; }
  table.month tbody tr.is-today { background: #f0f0f0; }
  a[href]::after { content: ""; }
  .panel { border: 1px solid #bbb; box-shadow: none; }
  .print-head { display: block !important; margin-bottom: 12pt; }
  /* A printed page has no tabs and nothing to click. Every room, and every
     answer, goes on the paper. */
  .tab-panel { display: block !important; page-break-inside: avoid; }
  .tablist, .swipe-hint { display: none !important; }
  .qa .qa-body { display: block !important; height: auto !important; }
  .qa { break-inside: avoid; }
  .band, .band-mid, .hero { background: #fff !important; color: #000 !important; }
  .band::after, .band::before, .band-mid::after, .band-mid::before { display: none !important; }
  .band h1, .band h2, .band p, .band .lede, .band .eyebrow,
  .band-mid h2, .band-mid p, .band-mid .lede, .band-mid .eyebrow { color: #000 !important; }
  .band-credit, canvas.pattern, .nextbar { display: none !important; }
  a[href^="/"]::after { content: " (salfordisoc.com" attr(href) ")"; font-size: 8pt; color: #555; }
}
.print-head { display: none; }

/* ---- month calendar ---------------------------------------------------- */
.cal-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1rem; }
.cal-key { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cal-head { background: var(--surface-2); color: var(--ink-3); text-align: center;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .5rem .2rem; }
.cal-head abbr { text-decoration: none; }
.cal-cell { background: var(--surface); min-height: 5.4rem; padding: .4rem .45rem;
  display: flex; flex-direction: column; gap: .22rem; }
.cal-blank { background: var(--surface-2); min-height: 0; }
.cal-num { font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.cal-cell.has-jummah .cal-num, .cal-cell.has-event .cal-num { color: var(--ink); }
.cal-cell.is-today { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-cell.is-today .cal-num { color: var(--accent-ink); }
.cal-tag { display: block; font-size: .63rem; line-height: 1.25; font-weight: 600;
  padding: .16rem .3rem; border-radius: 4px; overflow-wrap: anywhere; }
.cal-key .cal-tag { display: inline-block; font-size: .66rem; padding: .2rem .45rem; }
.cal-jummah { background: var(--accent-soft); color: var(--accent-ink); }
.cal-event { background: var(--metal-soft); color: var(--metal-ink); }
.cal-weekly { background: var(--surface-2); color: var(--ink-2); }
@media (max-width: 640px) {
  .cal-cell { min-height: 3.2rem; padding: .3rem .28rem; }
  .cal-num { font-size: .72rem; }
  /* font-size:0 hides the glyphs, not the text — it is still in the DOM and
     still announced. The bar keeps the colour, which is what the key maps. */
  .cal-cell .cal-tag { font-size: 0; line-height: 0; padding: 0;
    height: 5px; border-radius: 3px; margin-top: 3px; }
  .cal-key { font-size: .7rem; }
}

/* A band used mid-page rather than as a page head. */
.band-mid { border-block: 1px solid var(--line); }
.band-mid-in { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.band-mid h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); color: #F6F6FB; }
.band-mid .lede { color: #DCDEF2; max-width: 52ch; font-size: var(--step-1); }
.band-mid p { color: #C6CAE6; }
.band-mid .eyebrow { color: #AEB4E0; }
.band-mid .btn-accent { background: #fff; color: #12123A; border-color: #fff; }
.band-mid .btn-accent:hover { background: #E7E9FA; }

/* ---- masthead countdown ------------------------------------------------
   "How long have I got" on every page, not just the timetable. Hidden until
   the script has a real answer, so it never flashes a placeholder. */
.nextbar {
  display: none; align-items: center; gap: .5rem; margin-left: auto;
  padding: .34rem .7rem .34rem .6rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--ink); white-space: nowrap;
  font-size: .8rem; font-variant-numeric: tabular-nums;
  transition: border-color .15s, background-color .15s;
}
.nextbar:not([hidden]) { display: inline-flex; }
/* The countdown is the single most useful thing on the site and it used to be
   switched off on exactly the devices people check it from. Inline beside the
   brand it pushed a 360px phone 79px sideways, so on phones it takes its own
   slim row under the brand instead — full text, nothing truncated, and the
   page still does not scroll sideways. */
@media (max-width: 700px) {
  .masthead-in { flex-wrap: wrap; row-gap: .35rem; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .masthead-tools { flex: 0 0 auto; }
  .nextbar { order: 3; flex: 1 0 100%; justify-content: center;
    padding: .32rem .6rem; font-size: .78rem; }
  .nextbar:not([hidden]) { display: flex; }
}
.nextbar:hover { border-color: var(--ink-3); background: var(--surface-2); }
.nextbar b { font-weight: 600; }
.nextbar-in, #nextbar-in { color: var(--ink-2); }
.nextbar-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nextbar.is-soon { border-color: color-mix(in srgb, var(--metal) 60%, var(--line)); background: var(--metal-soft); }
.nextbar.is-soon .nextbar-dot { background: var(--metal-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--metal-ink) 22%, transparent);
  animation: nextbar-pulse 2.4s ease-in-out infinite; }
.nextbar.is-soon, .nextbar.is-soon b, .nextbar.is-soon #nextbar-in { color: var(--metal-ink); }
@keyframes nextbar-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .nextbar.is-soon .nextbar-dot { animation: none; } }
/* the nav already claims the middle, so on wide screens sit beside the tools */
@media (min-width: 1024px) { .nextbar { margin-left: .9rem; } }

/* ---- fixes found in review ---------------------------------------------
   1. "Jump to today" landed the row underneath the sticky masthead.
   2. The month table's date column scrolled away, so on a phone you ended up
      reading a wall of times with no idea which day you were on.
   3. .band-credit was white at 50% over a photograph, which is the one place
      on the site where contrast genuinely failed, and on the spaces page it
      carries real information. */
html { scroll-padding-top: 84px; }
#today, tr.is-today, .tab-panel, [id] { scroll-margin-top: 84px; }

.table-scroll { max-height: 74vh; overflow-y: auto; }
table.month tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface); box-shadow: 1px 0 0 var(--line);
}
table.month tbody tr.is-today th[scope="row"] { background: var(--accent-soft); }
table.month thead th { z-index: 3; }
@media print { .table-scroll { max-height: none; overflow: visible; }
  table.month tbody th[scope="row"] { position: static; box-shadow: none; } }

.band-credit { color: rgba(255,255,255,.86); text-shadow: 0 1px 3px rgba(0,0,0,.7); }

table.month td.none { line-height: 1.2; }
table.month .closed { display: block; }
table.month .closed-why { display: block; font-size: .62rem; line-height: 1.25;
  color: var(--ink-3); white-space: normal; max-width: 12ch; margin-left: auto; }
table.month td.none { min-width: 8.5rem; }

.pill-warn { background: var(--metal-soft); color: var(--metal-ink);
  border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); }

.btn-sm { min-height: 34px; padding: .3rem .7rem; font-size: .8rem; }
.room-go { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (min-width: 700px) { .room-head .room-go { margin-left: auto; flex-basis: 100%; justify-content: flex-end; } }