/* ═══════════════════════════════════════════════════════════════════════════
   School of Advanced Level Studies — Anse Royale, Mahé
   Shared stylesheet. Dark, warm, low-glare.
   No inline <style> or style="" anywhere, so the CSP needs nothing but 'self'.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink0:#12100e; --ink1:#1a1613; --ink2:#241e19;
  --cream:#f3e8d8; --sand:#c9b79c; --dim:#9a8971;
  --line:rgba(214,193,163,.13); --line2:rgba(214,193,163,.26);
  --terra:#c9683d; --brass:#d2a24c; --sage:#8a9a63; --slate:#7ba0bf; --rose:#c9807a;
  --display:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --wrap:72rem; --ease:cubic-bezier(.22,1,.36,1); --r:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink0); color:var(--cream);
  font-family:var(--display); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(70% 50% at 12% -8%, rgba(201,104,61,.10), transparent 60%),
    radial-gradient(60% 45% at 92% 4%, rgba(123,160,191,.07), transparent 58%),
    radial-gradient(80% 40% at 50% 104%, rgba(210,162,76,.06), transparent 62%);
  background-attachment:fixed;
}
img{max-width:100%; height:auto}
a{color:inherit}
.wrap{width:min(var(--wrap),100% - 2.6rem); margin-inline:auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ── Reveal ─────────────────────────────────────────────────────────────────
   Gated on html.js-rv, which app.js sets as its very first statement. With JS
   off, blocked or broken, none of this applies and the page renders in full.  */
html.js-rv .rv{opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js-rv .rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.07s} .rv.d2{transition-delay:.14s}
.rv.d3{transition-delay:.21s} .rv.d4{transition-delay:.28s}
.rv.d5{transition-delay:.35s} .rv.d6{transition-delay:.42s}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.badge{display:grid; place-items:center; border-radius:50%; background:#f7f2e8;
  box-shadow:0 0 0 1px rgba(214,193,163,.35), 0 18px 44px -18px rgba(0,0,0,.85);
  flex:0 0 auto; overflow:hidden}
.badge img{width:74%; height:74%; object-fit:contain; display:block}
.badge.lg{width:170px; height:170px}
.badge.sm{width:44px; height:44px}

/* ── Masthead ────────────────────────────────────────────────────────────── */
.mast{position:sticky; top:0; z-index:60; backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  background:rgba(18,16,14,.72); border-bottom:1px solid var(--line)}
.mast .wrap{display:flex; align-items:center; gap:.85rem; padding:.7rem 0}
.mast a.home{display:flex; align-items:center; gap:.85rem; text-decoration:none; min-width:0}
.mast .nm{min-width:0; line-height:1.15}
.mast .nm b{display:block; font-size:.94rem; font-weight:600; letter-spacing:-.02em}
.mast .nm span{display:block; font-size:.65rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim); margin-top:2px}
.mast .back{margin-left:auto; font-size:.85rem; color:var(--sand); text-decoration:none;
  border:1px solid var(--line2); border-radius:100px; padding:.42rem 1rem; white-space:nowrap;
  transition:color .3s, border-color .3s, background .3s}
.mast .back:hover{color:var(--cream); border-color:var(--brass); background:rgba(210,162,76,.09)}

/* ── Type ────────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.05}
.motto{font-family:var(--serif); font-weight:400; letter-spacing:.02em;
  color:var(--brass); font-size:clamp(1.15rem,2.6vw,1.5rem); line-height:1.3}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--brass)}
.lede{font-size:clamp(1.02rem,1.7vw,1.16rem); color:var(--sand); line-height:1.7;
  max-width:62ch; margin:1.1rem 0 0}
.serif{font-family:var(--serif); font-weight:400; letter-spacing:-.01em}

/* ── Landing ─────────────────────────────────────────────────────────────── */
/* position:relative is load-bearing, not decorative: without it the
   absolutely-positioned photo and overlay resolve against an ancestor, and
   overflow:hidden cannot clip them (that exact bug once widened the page). */
.hero{position:relative; overflow:hidden; min-height:100svh; display:grid;
  align-content:center; padding:5rem 0 3.5rem; text-align:center}
.hero .wrap{position:relative; z-index:2}
/* The bay at Anse Royale, dimmed to a backdrop. A <div> with a background,
   not an <img>: if the file is ever missing the page simply stays dark —
   no broken-image box on a school's homepage. --py is the parallax offset,
   written from app.js. */
.hero-photo{position:absolute; inset:-12% 0; z-index:0; pointer-events:none;
  background:url("img/coast.jpg") center 38%/cover no-repeat; opacity:.30;
  transform:translate3d(0,var(--py,0px),0) scale(1.06);
  animation:herodrift 36s ease-in-out infinite alternate}
.hero-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 30%, rgba(18,16,14,.72) 78%),
    linear-gradient(rgba(18,16,14,.55), rgba(18,16,14,.18) 34%, rgba(18,16,14,.30) 66%, var(--ink0) 97%)}
@keyframes herodrift{from{background-position:50% 30%}to{background-position:50% 52%}}
.hero .badge{margin:0 auto 2rem; animation:badgefloat 7s ease-in-out infinite}
@keyframes badgefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.4rem); margin-bottom:1.1rem;
  text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero .motto{margin:0 0 1.6rem; text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero .one{max-width:54ch; margin:0 auto; color:#e8dcc8;
  font-size:clamp(1rem,1.7vw,1.14rem); line-height:1.75; text-shadow:0 1px 14px rgba(0,0,0,.65)}
.scroll{margin-top:3rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand); text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ── Doors ───────────────────────────────────────────────────────────────── */
.doors{display:grid; gap:1rem; padding:0 0 6rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.door{position:relative; display:block; text-decoration:none; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--ink1);
  padding:1.9rem 1.7rem 1.8rem; isolation:isolate;
  transition:transform .5s var(--ease), border-color .5s, background .5s}
.door::after{content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  transition:opacity .5s; background:radial-gradient(90% 80% at 12% 0%,var(--glow),transparent 62%)}
/* Cursor light: --mx/--my are written by app.js from the pointer position, so
   the highlight sits under the visitor's hand rather than at a fixed corner.
   Pointer-events stay off — it is light, not a target. */
.door::before,.card::before{content:""; position:absolute; inset:0; z-index:0; opacity:0;
  pointer-events:none; transition:opacity .45s;
  background:radial-gradient(16rem circle at var(--mx,50%) var(--my,50%), rgba(243,232,216,.075), transparent 65%)}
.door:hover::before,.card:hover::before{opacity:1}
.door > *,.card > *{position:relative; z-index:1}
.door:hover{transform:translateY(-4px); border-color:var(--line2); background:var(--ink2)}
.door:hover::after{opacity:1}
.door:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.door .n{font-size:.66rem; letter-spacing:.22em; font-weight:700; color:var(--accent)}
.door h2{margin:.85rem 0 .5rem; font-size:1.42rem; letter-spacing:-.03em}
.door p{margin:0; font-size:.93rem; color:var(--sand); line-height:1.6}
.door .go{display:inline-flex; align-items:center; gap:.4rem; margin-top:1.2rem;
  font-size:.82rem; color:var(--accent); font-weight:600}
.door .go i{font-style:normal; transition:transform .4s var(--ease)}
.door:hover .go i{transform:translateX(5px)}
.door .plate{position:absolute; right:-8%; bottom:-14%; width:9.5rem; opacity:.16;
  pointer-events:none; transition:opacity .5s, transform .6s var(--ease)}
.door:hover .plate{opacity:.32; transform:translateY(-5px) rotate(-4deg)}
.d-sub{--accent:var(--terra); --glow:rgba(201,104,61,.13)}
.d-life{--accent:var(--sage); --glow:rgba(138,154,99,.13)}
.d-rec{--accent:var(--brass); --glow:rgba(210,162,76,.13)}
.d-story{--accent:var(--slate); --glow:rgba(123,160,191,.13)}
.d-visit{--accent:var(--rose); --glow:rgba(201,128,122,.13)}

/* ── Inner pages ─────────────────────────────────────────────────────────── */
.pagehead{padding:4.5rem 0 2.6rem; border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(2rem,5vw,3.3rem); margin-top:.9rem}
.section{padding:3.6rem 0}
.section + .section{border-top:1px solid var(--line)}
.section h2{font-size:clamp(1.5rem,3.2vw,2.1rem); margin-bottom:.6rem}

.grid{display:grid; gap:1rem; margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px;
  background:var(--ink1); padding:1.5rem 1.4rem;
  transition:border-color .4s, background .4s, transform .45s var(--ease)}
.card:hover{border-color:var(--line2); background:var(--ink2); transform:translateY(-3px)}
.card h3{font-size:1.1rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.5rem}
.card p{margin:0; font-size:.92rem; color:var(--sand); line-height:1.6}
.card .n{font-size:.64rem; letter-spacing:.2em; font-weight:700; color:var(--brass)}

.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem}
.chip{font-size:.86rem; color:var(--sand); border:1px solid var(--line2); background:var(--ink1);
  border-radius:100px; padding:.5rem 1.05rem; font-family:inherit; cursor:pointer;
  transition:color .3s, background .3s, border-color .3s}
.chip:hover{color:var(--cream); border-color:var(--brass)}
.chip[aria-pressed="true"]{color:var(--ink0); background:var(--brass);
  border-color:var(--brass); font-weight:600}
.dimmed{opacity:.3}
[data-group]{transition:opacity .55s var(--ease), transform .55s var(--ease)}
[data-group].dimmed{transform:scale(.985)}

.facts{display:grid; gap:1px; margin-top:2.2rem; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.facts div{background:var(--ink1); padding:1.4rem 1.3rem}
.facts b{display:block; font-size:1.9rem; font-weight:700; letter-spacing:-.04em; color:var(--brass)}
.facts span{display:block; margin-top:.35rem; font-size:.83rem; color:var(--sand); line-height:1.5}

.rail{margin-top:2.4rem; border-left:1px solid var(--line2); padding-left:1.6rem;
  display:grid; gap:2rem}
.rail article{position:relative}
.rail article::before{content:""; position:absolute; left:calc(-1.6rem - 4px); top:.55rem;
  width:7px; height:7px; border-radius:50%; background:var(--brass)}
.rail .yr{font-size:.7rem; letter-spacing:.18em; font-weight:700; color:var(--brass)}
.rail h3{font-size:1.08rem; font-weight:600; margin:.35rem 0 .4rem; letter-spacing:-.02em}
.rail p{margin:0; font-size:.92rem; color:var(--sand); line-height:1.65}

.quote{border:1px solid var(--line2); border-radius:var(--r); margin-top:2.4rem;
  padding:clamp(1.8rem,5vw,3rem);
  background:radial-gradient(80% 100% at 0% 0%,rgba(210,162,76,.09),transparent 58%), var(--ink1)}
.quote blockquote{margin:0; font-family:var(--serif); line-height:1.28;
  font-size:clamp(1.35rem,3.2vw,2.05rem); letter-spacing:-.015em; max-width:24ch}
.quote cite{display:block; margin-top:1.3rem; font-style:normal; font-size:.9rem; color:var(--sand)}
.quote cite b{color:var(--cream); font-weight:600}
.quote cite span{display:block; margin-top:.3rem; font-size:.76rem; color:var(--dim)}

.shot{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:var(--ink1); aspect-ratio:16/10; margin-top:2.2rem}
.shot svg,.shot img{position:absolute; inset:0; width:100%; height:100%; display:block}
/* The photograph arrives the way a slide settles into a projector: a breath
   oversized, easing to fit. Purely cosmetic — opacity alone carries the load
   where motion is unwelcome. */
.shot img{object-fit:cover; opacity:0; transform:scale(1.045);
  transition:opacity .9s var(--ease), transform 1.6s var(--ease)}
.shot img.in{opacity:1; transform:scale(1)}
.shot .cap{position:absolute; left:0; right:0; bottom:0; padding:1rem 1.1rem; z-index:2;
  font-size:.76rem; color:var(--sand);
  background:linear-gradient(transparent,rgba(18,16,14,.92))}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:3rem 0 3.5rem; text-align:center}
footer .badge{margin:0 auto 1.2rem}
footer .mot{font-family:var(--serif); color:var(--brass); letter-spacing:.04em; margin:0 0 .9rem}
footer .meta{font-size:.85rem; color:var(--sand); margin:0}
footer .contact{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:center;
  margin:1rem 0 0; font-size:.86rem}
footer .contact a{color:var(--sand); text-decoration:none; border-bottom:1px solid var(--line2)}
footer .contact a:hover{color:var(--brass); border-bottom-color:var(--brass)}
footer .langs{margin-top:1.1rem; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim)}

@media(max-width:46rem){
  .badge.lg{width:126px; height:126px}
  .mast .nm b{font-size:.85rem}
  .mast .nm span{display:none}
  .section{padding:2.8rem 0}
  .pagehead{padding:3rem 0 2rem}
  .hero-photo{inset:-6% 0}
}

/* ── The masthead condenses once you are reading ────────────────────────────
   Class written by app.js; without JS the bar simply stays put, which is a
   perfectly good bar. */
.mast{transition:box-shadow .4s, background .4s}
.mast .wrap{transition:padding .4s var(--ease)}
.mast.scrolled{background:rgba(18,16,14,.9);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.8)}
.mast.scrolled .wrap{padding:.5rem 0}

/* ── Page turns ─────────────────────────────────────────────────────────────
   Same-document crossfade on navigation where the browser supports it; where
   it does not, pages simply load as they always have. No JavaScript involved,
   so the CSP has nothing new to allow. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtfade .34s var(--ease) both}
::view-transition-new(root){animation:vtfade .34s var(--ease) both reverse}
@keyframes vtfade{from{opacity:1}to{opacity:0}}

/* ── Reduced motion: the whole theatre goes quiet ───────────────────────────
   Reveals are handled in app.js (everything is simply shown). Here: the drift,
   the float, the parallax, the photo settle and the page turns all stand still. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-photo,.hero .badge{animation:none}
  .hero-photo{transform:none}
  .shot img{transform:none; transition:opacity .01s}
  .shot img.in{transform:none}
  .door,.card,[data-group]{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .rv{opacity:1 !important; transform:none !important}
}