/* Ultimate Secondary School — Ikeja, Lagos.
 *
 * The world is the timetable. Secondary school is experienced as a grid of
 * periods, and the grid is the page's structure rather than a section inside
 * it: the type is set on the same rhythm, and the one piece of motion fills
 * the week the way a student reads it.
 *
 * Sans display over serif body, deliberately inverted from the school-brochure
 * habit — the serif does the reading and the grotesque does the naming.
 */

:root {
  --paper:   #f7f5f2;
  --card:    #ffffff;
  --ink:     #141a20;
  --slate:   #55646f;   /* 5.3:1 on paper */
  --maroon:  #7a1f2b;   /* 9.0:1 on paper */
  --maroon-deep: #5c1620;
  --brass:   #b08833;   /* rules and large marks only, never body text */
  --line:    #ddd7cf;

  --measure: 68ch;
  --bleed: clamp(1.25rem, 5vw, 4rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* The masthead is sticky, so an in-page link lands with its heading underneath
 * it. Every anchor target keeps the header's height clear — found by jumping
 * to a section and reading the result rather than by reasoning about it. */
:target,
[id] { scroll-margin-top: calc(4.5rem + 1rem); }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line) var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.65 "Source Serif 4", Georgia, serif;
  font-synthesis-weight: none;
}

::selection { background: var(--maroon); color: #fff; }
:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(74rem, 100%); margin-inline: auto; padding-inline: var(--bleed); }

.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: -9999px; top: 0; background: var(--maroon); color: #fff; padding: 0.75rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* ── Masthead ────────────────────────────────────────────────────────────── */

.masthead { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem; flex-wrap: wrap;
}
.crest { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--maroon); text-decoration: none; }
.crest-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.crest-words {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 92;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--ink);
}
.crest-words b { font-weight: 700; color: var(--maroon); }

.masthead-nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); flex-wrap: wrap; }
.masthead-nav a {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 0.9375rem; font-weight: 500; color: var(--slate); text-decoration: none; padding: 0.5rem 0;
}
.masthead-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.6875rem 1.375rem;
  border-radius: 4px;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.btn-solid { background: var(--maroon); color: #fff; box-shadow: 0 1px 2px rgba(92, 22, 32, 0.3), 0 10px 24px -14px rgba(92, 22, 32, 0.6); }
.btn-solid:hover { background: var(--maroon-deep); }
.btn-line { border: 1.5px solid var(--line); color: var(--ink); background: var(--card); }
.btn-line:hover { border-color: var(--maroon); color: var(--maroon); }
.btn-quiet { border: 1.5px solid var(--line); color: var(--ink); background: var(--card); min-height: 2.5rem; padding: 0.5rem 1rem; }
.btn-quiet:hover { border-color: var(--maroon); color: var(--maroon); }
.btn-wide { width: 100%; margin-top: 1.25rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero-title {
  margin: 0;
  max-width: 18ch;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-lede { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; max-width: var(--measure); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); color: var(--slate); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section-title {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance;
}
.section-lede { margin: 0.875rem 0 0; max-width: var(--measure); color: var(--slate); }

/* ── The timetable ───────────────────────────────────────────────────────── */

.week { padding-block: clamp(2.75rem, 7vw, 4.5rem); border-top: 1px solid var(--line); background: var(--card); }

.grid-scroll {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  overflow-x: auto;
  /* Snap to a day, so a sideways scroll never stops halfway through a word.
   * Proximity rather than mandatory: it tidies the resting place without
   * fighting the reader mid-gesture. */
  scroll-snap-type: x proximity;
}
.timetable thead th { scroll-snap-align: start; }
.timetable thead th:first-child { scroll-snap-align: none; }
.grid-scroll:focus-visible { outline-offset: 0; }

.timetable {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 0.9375rem;
}
.timetable thead th {
  font-variation-settings: "wdth" 88;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: left;
  padding: 0 0.75rem 0.625rem;
  border-bottom: 2px solid var(--brass);
}
.timetable tbody th {
  text-align: left;
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
  /* The period column stays put while the week scrolls. A timetable read
   * sideways with the period out of view is a list of subjects. */
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
  /* An edge, so the half-scrolled cell beyond it reads as more week rather
   * than as broken words. */
  box-shadow: 1px 0 0 var(--line), 6px 0 10px -8px rgba(20, 26, 32, 0.35);
}
.timetable thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 2;
  box-shadow: 1px 0 0 var(--line), 6px 0 10px -8px rgba(20, 26, 32, 0.35);
}
.row-break th { background: var(--paper); }
.p-num {
  display: inline-block; min-width: 1.5rem;
  font-weight: 700; color: var(--maroon); font-variant-numeric: tabular-nums;
}
.p-time { color: var(--slate); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.timetable td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.is-double { background: rgba(122, 31, 43, 0.06); font-weight: 600; }
.is-cont { background: rgba(122, 31, 43, 0.06); color: var(--slate); }
.cell-note {
  display: block; font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--maroon);
}
.is-games { color: var(--slate); font-style: italic; }
.row-break td {
  background: var(--paper); color: var(--slate);
  font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.grid-hint { margin: 1rem 0 0; max-width: var(--measure); color: var(--slate); font-size: 0.9375rem; }

/* Say that it scrolls, on the screens where it does. A grid clipped at
 * Wednesday with no affordance reads as a grid that only has three days. */
.grid-swipe {
  display: none;
  margin: 0.75rem 0 0;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--maroon);
}
@media (max-width: 44rem) {
  .grid-swipe { display: block; }
}

/* The week fills, once, column by column. */
.timetable.is-armed td { opacity: 0; }
.timetable.is-filled td { opacity: 1; transition: opacity 420ms var(--ease-out); }
.timetable.is-filled td:nth-child(2) { transition-delay: 0ms; }
.timetable.is-filled td:nth-child(3) { transition-delay: 70ms; }
.timetable.is-filled td:nth-child(4) { transition-delay: 140ms; }
.timetable.is-filled td:nth-child(5) { transition-delay: 210ms; }
.timetable.is-filled td:nth-child(6) { transition-delay: 280ms; }

/* ── Streams ─────────────────────────────────────────────────────────────── */

.streams { padding-block: clamp(3rem, 8vw, 5rem); }
.streams-list { margin: clamp(2rem, 5vw, 3rem) 0 0; display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 58rem) { .streams-list { grid-template-columns: repeat(3, 1fr); } }
.stream dt {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 88;
  font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em;
  color: var(--maroon);
  padding-bottom: 0.75rem; border-bottom: 2px solid var(--brass);
}
.stream dd { margin: 1rem 0 0; }
.stream p { margin: 0 0 0.75rem; color: var(--slate); }
.stream-after {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 0.875rem; color: var(--ink);
}

/* ── Admissions ──────────────────────────────────────────────────────────── */

.joining { padding-block: clamp(3rem, 8vw, 5rem); background: var(--card); border-top: 1px solid var(--line); }
.joining-grid { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 52rem) { .joining-grid { grid-template-columns: 1.5fr 1fr; } }
.joining-lede { margin: 0 0 1rem; max-width: var(--measure); font-size: 1.0625rem; }
.joining p { color: var(--slate); max-width: var(--measure); }
.joining-side h3 {
  margin: 0 0 0.75rem;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em;
}
.joining-side address { font-style: normal; color: var(--slate); margin-bottom: 0.75rem; }
.link { color: var(--maroon); text-underline-offset: 0.25em; }
.link:hover { color: var(--maroon-deep); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot { padding-block: 2.5rem; border-top: 1px solid var(--line); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.foot-name { margin: 0; color: var(--slate); font-size: 0.9375rem; }
.foot-name b { color: var(--ink); font-weight: 600; }
.foot-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot-nav a { font-family: Archivo, system-ui, sans-serif; font-size: 0.9375rem; color: var(--slate); text-underline-offset: 0.25em; }
.foot-nav a:hover { color: var(--maroon); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── The privacy page ────────────────────────────────────────────────────────
   One long column of prose, and the only page on this site that is. It gets
   its own rules rather than reusing a section's because everything else here
   is laid out — a day arc, a timetable, a grid of blocks — and prose wants
   the opposite: one measure, generous leading, and nothing competing with
   the sentence being read.

   The Play Store requires a privacy policy at a public URL for any app that
   handles personal information, so this page is not optional furniture; it is
   part of what makes the app publishable. It lives on the school's own site
   rather than on the platform's, because the school is the data controller
   and the page has to be the school's word. */
.prose-page {
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.prose {
  max-width: 40rem;
}
.prose h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.prose h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.25;
  margin: 2.5rem 0 0.6rem;
  /* Anchors are not used on this page today, but the masthead is sticky and
     a heading that a browser's find-in-page scrolls to must not land under
     it. The same rule as the front page's sections. */
  scroll-margin-top: 6rem;
}
.prose p,
.prose li {
  line-height: 1.65;
  margin: 0 0 0.9rem;
}
.prose ul {
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
}
.prose li {
  margin-bottom: 0.55rem;
}
.prose .lede {
  font-size: 1.1rem;
  line-height: 1.55;
}
.prose .stamp {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.prose code {
  font-size: 0.9em;
  word-break: break-all;
}