/* =============================================================================
   Al Khawaneej School — art direction layer over Pico 2.

   Warm interface aesthetics, editorial composition. The rules this follows:

   TYPE      One soft, rounded family, Rubik, for everything. Contrast comes from
             size and weight, not from more fonts or from tight tracking.
   COLOUR    Deep forest green and saturated ochre on a warm bone ground. No white
             anywhere: the page background is a rich tone, and the dark sections
             are a near-black green, not grey.
   LAYOUT    Full-canvas sections that ignore the content column, a split-screen
             hero whose headline crosses onto the image panel, and cut shapes.
             Standard equal-column grids are avoided on purpose.
   MOTION    Scroll-driven, CSS-only, behind @supports and prefers-reduced-motion.
             Nothing here is required for the page to work or to be read.

   This is longer than the ~90 line theme the spec budgeted, because the spec
   assumed a tinted Pico rather than an art-directed one. Pico still supplies
   form controls, focus rings and typographic defaults underneath.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   The typeface: Rubik, self-hosted. SIL Open Font License, text in fonts/OFL-Rubik.txt.

   Chosen after the owner found Georgia's sharp bold serifs "edgy". Rubik has low
   contrast and softened corners, one variable file carries every weight from 300
   to 900, and it has an Arabic companion on the same weight axis, so switching
   SiteConfig to Arabic keeps the same identity. Readex Pro was the runner-up and
   lost on one hard fact: its files have no tabular figures, so marks in the
   gradebook would not line up down a column. Rubik's do.

   Served from this machine rather than from Google: no third-party request on a
   site with student sign-ins, and the local-network fallback works with the
   internet down. unicode-range means an English page downloads only the 35 KB
   Latin file; the Arabic and extended-Latin files load only when such text
   appears.

   No italic file, on purpose. With Pico on the page Chrome fetched the 36 KB
   italic face on every page, italic text or not, and Rubik's italic is close to
   a slanted roman anyway, so the browser's synthesised slant costs nothing a
   reader would notice.
   -------------------------------------------------------------------------- */

/* Order matters. When unicode-ranges overlap, the last rule is tried first, and
   the Arabic and Latin ranges share U+200C-200E and U+2010-2011, so Latin is
   declared last and an English page never fetches the Arabic file. */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/rubik-arabic-wght-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/rubik-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/rubik-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Ground: warm, never white */
  --bone: #f4ede1;
  --bone-2: #eadfcc;
  --cream: #fdfaf3;

  /* Deep forest green */
  --ink: #10201a;
  --forest: #1b3a2a;
  --forest-lit: #27543c;

  /* Saturated ochre, and terracotta as the second accent */
  --ochre: #d98e2b;
  --ochre-deep: #a96412;
  --terracotta: #c0563a;

  --ink-70: rgba(16, 32, 26, 0.72);
  --ink-45: rgba(16, 32, 26, 0.48);
  --bone-70: rgba(244, 237, 225, 0.74);
  --bone-40: rgba(244, 237, 225, 0.4);

  --font-display: "Rubik", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Editorial scale: the jumps between steps are large on purpose */
  --t-mega: clamp(2.6rem, 7.2vw, 6.6rem);
  --t-xl: clamp(2.4rem, 6vw, 4.6rem);
  --t-lg: clamp(1.7rem, 3.2vw, 2.7rem);
  --t-md: 1.22rem;
  --t-body: 1.09rem;
  --t-small: 0.83rem;

  --edge: clamp(1.35rem, 5vw, 5.5rem);
  --gap: clamp(1.5rem, 3vw, 3rem);
  --air: clamp(4rem, 11vh, 9.5rem);
  --measure: 34rem;

  --cut: 2.25rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Pico, retuned */
  --pico-font-family: var(--font-sans);
  --pico-font-size: 100%;
  --pico-line-height: 1.62;
  --pico-border-radius: 0;
  --pico-spacing: 1.5rem;
  --pico-typography-spacing-vertical: 1rem;
}

:root:not([data-theme="dark"]) {
  --pico-background-color: var(--bone);
  --pico-color: var(--ink);
  --pico-h1-color: var(--ink);
  --pico-h2-color: var(--ink);
  --pico-h3-color: var(--ink);
  --pico-h4-color: var(--ink);
  --pico-muted-color: var(--ink-70);
  --pico-muted-border-color: rgba(16, 32, 26, 0.16);
  --pico-primary: var(--ochre-deep);
  --pico-primary-background: var(--forest);
  --pico-primary-hover-background: var(--ink);
  --pico-primary-border: var(--forest);
  --pico-primary-inverse: var(--bone);
  --pico-primary-underline: rgba(169, 100, 18, 0.42);
  --pico-card-background-color: var(--cream);
  --pico-card-border-color: rgba(16, 32, 26, 0.14);
  --pico-code-background-color: var(--bone-2);
  --pico-mark-background-color: #f6dca4;
  --pico-blockquote-border-color: var(--ochre);
  --pico-form-element-background-color: var(--cream);
  --pico-form-element-border-color: rgba(16, 32, 26, 0.22);
}

/* Pico pads body > header/main/footer for a centred column. This design is
   full-canvas, so the padding is removed and each section owns its own. */
body { background: var(--bone); overflow-x: hidden; }
body > header, body > main, body > footer { padding: 0; margin: 0; max-width: none; width: 100%; }
/* Pico gives every section a bottom margin, which on a full-bleed dark section
   shows as a strip of page background between it and the next one. Only the
   bottom is zeroed: the band's negative top margin is what makes it overlap. */
main > section, main > article { margin-block-end: 0; }
main :is(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; }

.edge { padding-inline: var(--edge); }
.measure { max-inline-size: var(--measure); }

/* -----------------------------------------------------------------------------
   Masthead. Sits over the hero and scrolls with it, no sticky bar stealing space.
   -------------------------------------------------------------------------- */

/* The signed-in bar: whoever you are, and the tools you have. Kept off the
   masthead so the public navigation never wraps under the school name. */
.toolbar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding: 0.5rem var(--edge);
  background: var(--ink);
  color: var(--bone-70);
  font-size: 0.85rem;
}
.toolbar__who { font-weight: 600; color: var(--bone); }
.toolbar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.4rem; }
.toolbar__nav a, .toolbar__nav button {
  margin: 0;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: var(--bone-70);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  inline-size: auto;
  border-block-end: 2px solid transparent;
  border-radius: 0;
}
.toolbar__nav a:hover, .toolbar__nav button:hover { color: var(--ochre); }
.toolbar__nav a[aria-current="page"] { color: var(--bone); border-block-end-color: var(--ochre); }
.toolbar__nav form { margin: 0; }

.masthead {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 1.6rem var(--edge);
  background: var(--bone);
}
.masthead__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.masthead__name a { color: inherit; text-decoration: none; }
.masthead__cycle {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-top: 0.3rem;
}
.masthead nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); flex-wrap: wrap; }

/* Link micro-interaction: an ochre rule wipes in from the leading edge. */
.ln {
  position: relative;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.2rem;
}
.ln::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease);
}
.ln:hover::after, .ln:focus-visible::after { transform: scaleX(1); }

/* -----------------------------------------------------------------------------
   Buttons. Fill sweeps up from the bottom; the label stays put.
   -------------------------------------------------------------------------- */

.btn {
  --btn-face: var(--ink);
  --btn-text: var(--bone);
  --btn-sweep: var(--ochre);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  overflow: hidden;
  isolation: isolate;
  padding: 1.05rem 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-face);
  color: var(--btn-text);
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), color 0.28s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep);
  transform: translateY(101%);
  transition: transform 0.42s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--ink); }
.btn__arrow { transition: transform 0.34s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost { --btn-face: transparent; --btn-text: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(16, 32, 26, 0.3); }
.btn--onDark { --btn-face: var(--bone); --btn-text: var(--ink); --btn-sweep: var(--ochre); }

/* -----------------------------------------------------------------------------
   Split-screen hero. The headline crosses the seam onto the image panel.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: stretch;
  min-block-size: min(82vh, 48rem);
  background: var(--bone);
}
/* The type layer spans BOTH columns and sits above the panel, which is what
   lets a line cross the seam. Everything that must stay readable is held inside
   the first column by max-inline-size; only the ochre line is allowed out. */
.hero__type {
  grid-area: 1 / 1 / 2 / 3;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 7vh, 5.5rem) 0 clamp(2.5rem, 7vh, 5.5rem) var(--edge);
  padding-inline-end: 0;
  pointer-events: none;
}
.hero__type > * { pointer-events: auto; }
.hero__art { grid-area: 1 / 2 / 2 / 3; }
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 1.6rem;
}
.hero__kicker::before { content: ""; inline-size: 2.6rem; block-size: 2px; background: var(--ochre); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  /* Dark words stay on the bone side. Crossing dark type onto the dark panel
     would be illegible, so the constraint is a readability rule, not styling. */
  max-inline-size: 52%;
  /* Never split a word to fit the column. "Khawaneej" breaking across lines as
     "Khawane / ej" is worse than any amount of white space. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* The overlap. width:max-content lets this one line escape the constraint above
   and run onto the panel, and ochre on deep forest green stays legible where it
   lands. This is the single line allowed to cross the seam. */
.hero__title em {
  display: block;
  inline-size: max-content;
  max-inline-size: none;
  font-style: normal;
  color: var(--ochre);
  margin-inline-start: clamp(0rem, 30vw, 26rem);
}
.hero__lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-70);
  max-inline-size: min(27rem, 46%);
  margin: 2.1rem 0 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; max-inline-size: min(30rem, 48%); }

/* Image panel. Cut on the leading edge so text can run against the curve. */
.hero__art {
  position: relative;
  overflow: hidden;
  border-start-start-radius: var(--cut);
  border-end-start-radius: calc(var(--cut) * 3);
  background: var(--forest);
}
.hero__art img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* No photograph yet: a drawn grove, so the panel reads as composed rather than
   as a missing asset. Drop a file at static/img/hero.jpg and it takes over. */
.hero__art--drawn {
  background:
    radial-gradient(120% 90% at 78% 8%, var(--forest-lit) 0%, transparent 58%),
    radial-gradient(80% 70% at 18% 96%, rgba(217, 142, 43, 0.3) 0%, transparent 62%),
    var(--forest);
}
.hero__art--drawn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(76deg, rgba(244, 237, 225, 0.09) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-64deg, rgba(244, 237, 225, 0.07) 0 1px, transparent 1px 34px);
}
.hero__frond { position: absolute; inset-block-end: -8%; inset-inline-end: -10%; inline-size: 96%; opacity: 0.62; }

/* -----------------------------------------------------------------------------
   Ochre band. Overlaps the hero seam and carries the standing facts.
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  z-index: 5;
  margin-block-start: -3.25rem;
  margin-inline: var(--edge);
  background: var(--ochre);
  color: var(--ink);
  border-radius: var(--cut);
  padding: 1.8rem clamp(1.5rem, 3vw, 2.8rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  box-shadow: 0 26px 60px -34px rgba(16, 32, 26, 0.65);
}
.band__item { display: flex; flex-direction: column; gap: 0.25rem; }
.band__k { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(16, 32, 26, 0.62); }
.band__v { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.005em; }
.band__spacer { flex-grow: 1; }

/* -----------------------------------------------------------------------------
   Editorial intro. Deliberately off-centre, with a drop cap.
   -------------------------------------------------------------------------- */

.intro { padding: var(--air) var(--edge); display: grid; grid-template-columns: 1fr 1.55fr; gap: var(--gap); }
.intro__label { font-size: var(--t-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ochre-deep); }
.intro__body { font-size: clamp(1.22rem, 2vw, 1.62rem); line-height: 1.5; color: var(--ink); max-inline-size: 36rem; }
.intro__body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: inline-start;
  font-size: 4.6em;
  line-height: 0.78;
  font-weight: 700;
  color: var(--ochre);
  padding-inline-end: 0.09em;
  padding-block-start: 0.04em;
}
.intro__body p + p { margin-top: 1.1rem; font-size: var(--t-body); color: var(--ink-70); }

/* -----------------------------------------------------------------------------
   News as an editorial index. Oversized numerals sit behind the headlines.
   -------------------------------------------------------------------------- */

.news { background: var(--ink); color: var(--bone); padding: var(--air) 0; border-radius: var(--cut) var(--cut) 0 0; }
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); padding-inline: var(--edge); margin-bottom: 2.6rem; flex-wrap: wrap; }
.news__title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1; margin: 0; color: var(--bone); }
.news__note { font-size: 0.9rem; color: var(--bone-70); max-inline-size: 22rem; margin: 0; }

.entry {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 15rem);
  gap: var(--gap);
  align-items: start;
  padding: 2.2rem var(--edge);
  border-block-start: 1px solid rgba(244, 237, 225, 0.17);
  text-decoration: none;
  color: inherit;
  transition: background 0.4s var(--ease);
}
.entry:last-of-type { border-block-end: 1px solid rgba(244, 237, 225, 0.17); }
.entry:hover, .entry:focus-visible { background: var(--forest); }
.entry__no {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 237, 225, 0.45);
  transition: color 0.4s var(--ease), -webkit-text-stroke-color 0.4s var(--ease);
}
.entry:hover .entry__no { color: var(--ochre); -webkit-text-stroke-color: var(--ochre); }
.entry__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
  color: var(--bone);
  transition: transform 0.4s var(--ease);
}
.entry:hover .entry__title { transform: translateX(8px); }
.entry__excerpt { margin: 0; font-size: 0.99rem; line-height: 1.6; color: var(--bone-70); max-inline-size: 40rem; }
.entry__side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding-top: 0.35rem; }
.entry__date { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-40); }
.entry--placeholder { opacity: 0.42; pointer-events: none; }

.tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  background: rgba(244, 237, 225, 0.13);
  color: var(--bone);
}
.tag--locked { background: var(--ochre); color: var(--ink); }
.tag--onLight { background: rgba(16, 32, 26, 0.09); color: var(--ink); }

.news__more { padding: 2.6rem var(--edge) 0; }

/* -----------------------------------------------------------------------------
   Article and page bodies.
   -------------------------------------------------------------------------- */

.sheet { padding: clamp(3rem, 8vh, 6rem) var(--edge) var(--air); }
.sheet__head { max-inline-size: 52rem; margin-bottom: 2.6rem; }
.sheet__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.sheet__title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.02; margin: 0; color: var(--ink); }
.prose { max-inline-size: var(--measure); font-size: var(--t-body); line-height: 1.72; color: var(--ink); }
.prose h2 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; margin: 2.6rem 0 0.8rem; color: var(--ink); }
.prose h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 2rem 0 0.6rem; }
.prose a { color: var(--ochre-deep); text-underline-offset: 3px; }
.prose blockquote { border-inline-start: 3px solid var(--ochre); padding-inline-start: 1.2rem; font-style: italic; color: var(--ink-70); }
.prose em { color: var(--ink-45); }

.notice { background: var(--ochre); color: var(--ink); font-size: 0.93rem; font-weight: 600; padding: 0.85rem var(--edge); }

/* -----------------------------------------------------------------------------
   Footer. The telephone number is set as display type, because it is the thing
   a parent actually came for.
   -------------------------------------------------------------------------- */

.foot { background: var(--forest); color: var(--bone); padding: var(--air) var(--edge) 2.6rem; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: end; padding-bottom: 2.8rem; border-bottom: 1px solid rgba(244, 237, 225, 0.2); }
.foot__call { font-size: var(--t-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ochre); margin: 0 0 0.9rem; }
.foot__phone { font-family: var(--font-display); font-size: clamp(2rem, 5.4vw, 4rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1; color: var(--bone); text-decoration: none; display: inline-block; transition: color 0.3s var(--ease); }
.foot__phone:hover { color: var(--ochre); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gap); padding-top: 2.4rem; }
.foot h2 { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ochre); margin: 0 0 0.9rem; }
/* Pico sets colour on p, address and lists, which beats inheriting from the
   band. Without this the contact block is near-black on dark green. */
.foot :is(p, address, ul, ol, li, dl, dd) { color: var(--bone-70); font-size: 0.95rem; line-height: 1.75; font-style: normal; margin: 0; }
.foot a { color: var(--bone-70); text-decoration: none; }
.foot a:hover { color: var(--bone); }
.foot__links { display: flex; flex-direction: column; gap: 0.5rem; }
.foot__base { margin-top: 3rem; font-size: 0.78rem; color: var(--bone-40); }

/* -----------------------------------------------------------------------------
   Motion. Entirely optional: every rule sits behind both a support test and a
   reduced-motion test, and the page is complete without any of it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
    .hero__art { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .hero__type { animation: settle linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.07) translateY(0); } to { transform: scale(1.07) translateY(-7%); } }
@keyframes settle { to { opacity: 0.35; transform: translateY(26px); } }

/* Pointer-driven extras, added by motion.js only on a fine pointer. */
.magnet { will-change: transform; }
.cursor-hint {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--ochre);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.3s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease);
}
.cursor-hint--on { opacity: 1; }
.cursor-hint--wide { inline-size: 46px; block-size: 46px; background: rgba(217, 142, 43, 0.24); }

/* -----------------------------------------------------------------------------
   Account screens: sign in, change password, People. Forms are the one place
   Pico's defaults are kept almost whole — its focus rings and control sizing are
   better than anything worth hand-writing here. What is added is the frame
   around them, so a form reads as part of the same building as the front page.
   -------------------------------------------------------------------------- */

.flash { padding: 0.9rem var(--edge); background: var(--forest); color: var(--bone); }
.flash p { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--bone); }

.panel {
  background: var(--cream);
  border: 1px solid rgba(16, 32, 26, 0.14);
  border-radius: var(--cut) 0 var(--cut) 0;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.panel + .panel { margin-top: var(--gap); }
.panel > :first-child { margin-top: 0; }
.panel h2 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.panel__note { color: var(--ink-70); font-size: 0.95rem; margin: 0 0 1.4rem; max-inline-size: 40rem; }

/* The sign-in and password screens are a single column at reading width, which
   is all either of them ever needs. */
.form-column { max-inline-size: 27rem; }
.form-column form { margin: 0; }
.form-column button { inline-size: 100%; justify-content: center; }

/* A checkbox and its label on one line. Pico stacks labels above their fields. */
.checkline { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-weight: 600; }
.checkline input[type="checkbox"] { margin: 0; flex: none; }

.help { font-size: 0.9rem; color: var(--ink-70); margin: 1.2rem 0 0; }
.help a { color: var(--ochre-deep); }

.alarm {
  border-inline-start: 3px solid var(--terracotta);
  background: rgba(192, 86, 58, 0.09);
  padding: 0.85rem 1rem;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
}
.errors { color: var(--terracotta); font-size: 0.9rem; margin: 0.3rem 0 0; }

/* The issued password. Deliberately the loudest thing on the page: it is shown
   once, and somebody has to copy it onto paper before they navigate away. */
.issued { background: var(--ink); color: var(--bone); border-radius: var(--cut) 0 var(--cut) 0; padding: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: var(--gap); }
.issued h2 { font-family: var(--font-display); font-size: var(--t-lg); margin: 0 0 0.3rem; color: var(--bone); letter-spacing: -0.012em; }
.issued p { color: var(--bone-70); margin: 0 0 1.2rem; font-size: 0.95rem; }
.issued dl { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; margin: 0; }
.issued dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ochre); margin: 0; }
.issued dd { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: 0; color: var(--bone); font-variant-numeric: tabular-nums; }

.stats { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 0 0 var(--gap); }
.stats div { display: flex; flex-direction: column; }
.stats dt, .stats .stats__k { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); }
.stats .stats__v { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }

.classes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.classes a {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--bone-2);
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.classes a:hover { background: var(--ink); color: var(--bone); }
.classes span { font-size: 0.8rem; color: var(--ink-45); }
.classes a:hover span { color: var(--bone-40); }

/* The results table. Scrolls inside itself rather than pushing the page sideways
   on a phone. */
.rows { overflow-x: auto; }
.rows table { margin: 0; font-size: 0.95rem; }
.rows th { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); }
.rows td { vertical-align: middle; }
.rows form { display: inline; margin: 0; }
.rows .is-inactive td { opacity: 0.55; }

.btn--sm { padding: 0.5rem 1.05rem; font-size: 0.85rem; border-radius: 999px; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 48rem) {
  .stats { gap: 1.4rem; }
  .issued dl { gap: 1rem 2rem; }
}

/* -----------------------------------------------------------------------------
   Narrow screens. The split hero stacks, the overlaps relax, the index simplifies.
   -------------------------------------------------------------------------- */

@media (max-width: 62rem) {
  /* Stacked: nothing overlaps, every constraint that existed to protect
     legibility across the seam is released. */
  .hero { grid-template-columns: 1fr; min-block-size: 0; }
  .hero__type { grid-area: auto; padding: 3rem var(--edge) 2.6rem; }
  .hero__art { grid-area: auto; block-size: 54vw; min-block-size: 15rem; border-radius: var(--cut); margin-inline: var(--edge); }
  .hero__title { max-inline-size: none; }
  .hero__title em { margin-inline-start: 0; inline-size: auto; }
  .hero__lede, .hero__actions { max-inline-size: none; }
  .intro { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; align-items: start; }
  .entry { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .entry__no { font-size: 1.5rem; }
  .entry__side { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .band { margin-block-start: 2rem; }
}

@media (max-width: 34rem) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .band { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Arabic is never letter-spaced or upper-cased: tracking pulls joined letters
   apart. Every label above that is tracked for English is reset the moment
   SiteConfig says rtl. */
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; text-transform: none !important; }
/* Arabic needs taller lines than Latin display type, and a drop cap is a Latin idea. */
[dir="rtl"] :is(h1, h2, h3, h4, .hero__title, .news__title, .sheet__title, .foot__phone) { line-height: 1.3; }
[dir="rtl"] .intro__body > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; color: inherit; padding: 0; margin: 0; }