/* Ultimate Primary School — Ikeja, Lagos.
 *
 * The world is the exercise book: a red margin rule down the left of the
 * writing area and blue feint lines across it. Every Nigerian primary pupil
 * owns twenty of them. The day-arc is written on those lines rather than
 * decorated with them, which is the whole of the idea — the page is the book
 * the child writes in, not a poster about childhood.
 */

:root {
  --paper:      #ffffff;
  --paper-warm: #fdfbf6;
  --ink:        #16242e;
  --ink-soft:   #4a5b66;
  --rule:       #a9c0d6;   /* the feint line */
  --margin:     #c2352e;   /* the red margin, 5.2:1 on paper */
  --green:      #0e6b4e;   /* uniform green, 5.9:1 on paper */
  --green-deep: #0a4e39;
  --chalk:      #f0bc42;

  --measure: 68ch;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --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%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.6 Karla, ui-sans-serif, system-ui, sans-serif;
  font-synthesis-weight: none;
}

/* Browser surfaces belong to the design too. */
::selection { background: var(--chalk); color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
html { scrollbar-color: var(--rule) var(--paper-warm); }

img, svg { max-width: 100%; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

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

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

.masthead-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}
.masthead-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  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.25rem;
  border-radius: 12px;
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn-solid {
  background: var(--green);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 78, 57, 0.28), 0 8px 20px -12px rgba(10, 78, 57, 0.55);
}
.btn-solid:hover { background: var(--green-deep); }
.btn-line {
  border: 1.5px solid var(--rule);
  color: var(--ink);
  background: var(--paper);
}
.btn-line:hover { border-color: var(--green); color: var(--green); }
.btn-quiet {
  background: var(--paper-warm);
  border: 1.5px solid var(--rule);
  color: var(--ink);
  min-height: 2.5rem;
  padding: 0.5rem 0.9375rem;
}
.btn-quiet:hover { border-color: var(--green); color: var(--green); }
.btn-wide { width: 100%; max-width: 22rem; }

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

.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 5rem); }
.hero-title {
  margin: 0;
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-weight: 800;
  font-size: clamp(2.75rem, 1.4rem + 6.2vw, 5.75rem);
  line-height: 0.98;
  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.25rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* ── The day, written on ruled paper ─────────────────────────────────────── */

.section-title {
  margin: 0;
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.section-lede {
  margin: 1rem 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.day {
  padding-block: clamp(2.5rem, 7vw, 5rem);
  background: var(--paper-warm);
  border-block: 1px solid var(--rule);
}

.ruled {
  --line: 3.25rem;
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0 0 0 clamp(2.75rem, 7vw, 4.5rem);
  position: relative;
}
/* The margin rule. One line, the width of a pen, in the place a book puts it. */
.ruled::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--line) * -0.25) 0;
  left: clamp(1.5rem, 4.5vw, 3rem);
  width: 1.5px;
  background: var(--margin);
  opacity: 0.8;
}
.ruled-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 clamp(0.75rem, 2vw, 1.5rem);
  align-items: baseline;
  min-height: var(--line);
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--rule);
}
.ruled-row.is-last { border-bottom: 0; }
.ruled-time {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  letter-spacing: -0.02em;
}
.ruled-what {
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* On a narrow screen the fixed time column eats the measure and the
 * description breaks after four or five words. Below 34rem the time takes its
 * own line — the book still reads top to bottom, and the sentence gets the
 * full width. */
@media (max-width: 34rem) {
  .ruled { padding-left: 1.75rem; }
  .ruled::before { left: 0.75rem; }
  .ruled-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding-block: 1rem;
  }
  .ruled-time { font-size: 1rem; }
}
.ruled-what strong { color: var(--ink); font-weight: 700; }

/* The one authored moment: the rows settle onto the lines, once. */
.ruled.is-armed .ruled-row {
  opacity: 0;
  transform: translateY(0.5rem);
}
.ruled.is-settled .ruled-row {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.ruled.is-settled .ruled-row:nth-child(1) { transition-delay: 0ms; }
.ruled.is-settled .ruled-row:nth-child(2) { transition-delay: 45ms; }
.ruled.is-settled .ruled-row:nth-child(3) { transition-delay: 90ms; }
.ruled.is-settled .ruled-row:nth-child(4) { transition-delay: 135ms; }
.ruled.is-settled .ruled-row:nth-child(5) { transition-delay: 180ms; }
.ruled.is-settled .ruled-row:nth-child(6) { transition-delay: 225ms; }
.ruled.is-settled .ruled-row:nth-child(7) { transition-delay: 270ms; }
.ruled.is-settled .ruled-row:nth-child(8) { transition-delay: 315ms; }
.ruled.is-settled .ruled-row:nth-child(9) { transition-delay: 360ms; }

/* ── Stances ─────────────────────────────────────────────────────────────── */

.learning { padding-block: clamp(3rem, 8vw, 5.5rem); }
.learning-lead { max-width: var(--measure); }
.learning-lead p { color: var(--ink-soft); margin: 1rem 0 0; }

.stances {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 56rem) {
  .stances { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); }
}
.stance { padding-top: 1.25rem; border-top: 2px solid var(--chalk); }
.stance dt {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.stance dd {
  margin: 0.625rem 0 0;
  color: var(--ink-soft);
}

/* ── Joining ─────────────────────────────────────────────────────────────── */

.joining {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}
.joining-lede { margin: 1rem 0 0; max-width: var(--measure); color: var(--ink-soft); }
.joining-grid {
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(2rem, 4vw, 2.5rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 48rem) {
  .joining-grid { grid-template-columns: 1.4fr 1fr; }
}
.joining-block h3 {
  margin: 0 0 0.75rem;
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
.joining-block p, .joining-block address {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-style: normal;
  max-width: 48ch;
}
.joining-note { font-size: 0.9375rem; }
.link { color: var(--green); text-underline-offset: 0.25em; }
.link:hover { color: var(--green-deep); }

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

.foot {
  padding-block: 2.5rem;
  border-top: 1px solid var(--rule);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem var(--gap);
  align-items: center;
  justify-content: space-between;
}
.foot-name { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.foot-name b { color: var(--ink); font-weight: 700; }
.foot-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot-nav a { color: var(--ink-soft); font-size: 0.9375rem; text-underline-offset: 0.25em; }
.foot-nav a:hover { color: var(--green); }

@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;
}