/* =====================================================================
   Experiment: the second section starts as a red screen and a white circle
   opens with the text as you scroll (from version 1, colours reversed).
   To undo, delete two lines in index.html:
     <link rel="stylesheet" href="css/intro-x.css">
     <script src="js/intro-x.js" defer></script>
   ===================================================================== */
.intro { --intro-red: #B0141C; padding: 0; background: var(--paper); }
.intro .intro-panel {
  width: 100%; margin: 0; border-radius: 0; min-height: 100svh;
  position: relative; overflow: hidden; --r: 150%;
  background: var(--intro-red); color: var(--ink);
  display: grid; place-items: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 4rem;
}
/* the white circle that grows over the red as you scroll */
.intro .intro-panel::before {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  clip-path: circle(var(--r) at 50% var(--cy, 50%));
}
.intro .intro-inner { position: relative; z-index: 1; }
/* no hold: the panel scrolls on like any section while the circle opens (Bar, 2026-10-13) */
.intro .intro-inner { width: min(100%, 1180px); max-width: none; display: grid; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .intro .intro-inner { grid-template-columns: minmax(0, 1fr) auto; } }
/* the school logo sits to the left of the text (the end side in RTL) */
.intro .intro-logo { margin: 0; justify-self: center; }
/* no drop-shadow filter (Bar 2026-10-18): while the logo turns and fades in, the browser drew the shadow as a faint square around it */
.intro .intro-logo img { width: clamp(150px, 22vw, 300px); height: auto; }
@media (max-width: 899px) { .intro .intro-logo { order: -1; } .intro .intro-logo img { width: clamp(120px, 34vw, 180px); } }
.intro .intro-p { font-size: clamp(1.1rem, .9rem + 1vw, 1.65rem); line-height: 1.55; max-width: 52ch; }
.intro .intro-big { color: var(--red); margin-block: .5em .6em; }
.intro .btn-white { --bg: var(--red); --fg: var(--white); --bd: var(--red); }
@media (hover: hover) and (pointer: fine) { .intro .btn-white:hover { --bg: var(--red-deep); --bd: var(--red-deep); } }
.intro .btn-ghost { --bg: transparent; --fg: var(--red-deep); --bd: var(--red); }
@media (hover: hover) and (pointer: fine) { .intro .btn-ghost:hover { --bg: var(--red); --fg: var(--white); --bd: var(--red); } }
.intro :focus-visible { outline-color: var(--red); }


/* Desktop, short windows (Bar, 2026-10-15): text, logo and spacing also follow the window height,
   so the whole panel, buttons included, fits under the header on a small laptop. Unchanged on tall screens. */
@media (min-width: 900px) {
  .intro .intro-panel { padding-block: calc(var(--header-h) + min(2rem, 3vh)) clamp(1.5rem, 5vh, 4rem); }
  .intro .intro-p { font-size: clamp(1.05rem, min(.9rem + 1vw, 3.4vh), 1.65rem); }
  .intro .intro-big { font-size: clamp(2.2rem, min(2rem + 3.3vw, 9vh), 4.8rem); margin-block: min(.5em, 3vh) min(.6em, 3.6vh); }
  .intro .intro-logo img { width: clamp(130px, min(22vw, 40vh), 300px); }
}