/* Al-Muʿāhid
   Type carries the emotion, the room carries the identity.
   Newsreader for anything that speaks, a neutral grotesque for anything
   that instructs. Nothing shouts. */

:root{
  --off-white:#F5F4EF;
  --cream:#F6F1E9;
  --ink:#171715;
  --sage:#7E8D7A;
  --olive:#4F5E4D;
  --paper:#D6CDBA;
  --gold:#C7A35E;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:Avenir,"Avenir Next","Nunito Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --arabic:"Noto Naskh Arabic","Amiri",serif;

  --gutter:clamp(20px,4vw,64px);
  --hero-opacity:0;
  --measure:34ch;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:#0B0B0A;}
body{
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;}
#scroll-length{height:760vh;}
@media (max-width:820px){#scroll-length{height:560vh;}}

/* ---------- surface: paper grain, a light wash, a held vignette ---------- */
#surface{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:multiply;opacity:.34;
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(255,255,255,0) 40%, rgba(120,110,92,.22) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.34'/></svg>");
}

/* ---------- navigation ---------- */
#overlay{position:fixed;inset:0;z-index:4;pointer-events:none;}
#overlay a,#overlay button{pointer-events:auto;}

#nav{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:22px var(--gutter);
  transition:background .6s ease,color .6s ease,border-color .6s ease;
  border-bottom:1px solid transparent;
  color:var(--cream);
}
#nav.is-solid{
  background:rgba(246,241,233,.94);
  color:var(--ink);
  border-bottom-color:rgba(23,23,21,.1);
  backdrop-filter:saturate(120%) blur(6px);
}
.nav-mark{
  font-family:var(--serif);font-size:19px;font-weight:300;letter-spacing:.05em;
  text-decoration:none;color:inherit;
}
#nav-list{display:flex;gap:26px;}
#nav-list a{
  font-size:12.5px;letter-spacing:.09em;text-decoration:none;color:inherit;
  opacity:.82;padding:4px 0;border-bottom:1px solid transparent;
}
#nav-list a:hover,#nav-list a:focus-visible{opacity:1;border-bottom-color:currentColor;}
#nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;}
#nav-toggle span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0;}

/* ---------- hero ---------- */
#hero{
  position:absolute;left:var(--gutter);bottom:clamp(64px,12vh,132px);
  max-width:var(--measure);color:var(--ink);
  opacity:var(--hero-opacity);
  transition:opacity .2s linear;
}
#hero.is-hidden{visibility:hidden;}
#hero{isolation:isolate;}
#hero::before{
  content:"";position:fixed;left:0;top:0;bottom:0;width:58vw;z-index:0;pointer-events:none;
  background:linear-gradient(to right, rgba(246,241,233,.9) 0%, rgba(246,241,233,.66) 36%, rgba(246,241,233,.24) 66%, rgba(246,241,233,0) 100%);
}
#brandmark,#strap,#line,.hero-actions{position:relative;z-index:1;}
#brandmark{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(42px,6.4vw,86px);line-height:1;letter-spacing:.06em;
  margin:0 0 18px;
}
#strap{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(17px,2vw,22px);margin:0 0 10px;opacity:.92;
}
#line{
  font-size:14.5px;line-height:1.65;max-width:30ch;margin:0 0 30px;opacity:.78;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.btn{
  font-family:var(--sans);font-size:13px;letter-spacing:.055em;
  padding:13px 22px;border-radius:1px;cursor:pointer;
  border:1px solid currentColor;background:none;color:inherit;
  transition:background .35s ease,color .35s ease;
}
.btn-primary{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.btn-primary:hover{background:transparent;color:var(--ink);}
.btn-quiet{opacity:.85;}
.btn-quiet:hover{background:rgba(23,23,21,.06);}

/* ---------- bay captions ---------- */
#captions{position:absolute;inset:0;}
.caption{
  isolation:isolate;position:absolute;z-index:1;right:var(--gutter);bottom:clamp(70px,14vh,150px);
  width:min(30ch,38vw);margin:0;
  opacity:0;transform:translateY(14px);
  transition:opacity 1s ease,transform 1s ease;
  color:var(--ink);
}
.caption.is-visible{opacity:1;transform:none;}
#captions::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:52vw;pointer-events:none;z-index:0;
  opacity:0;transition:opacity 1s ease;
  background:linear-gradient(to left, rgba(246,241,233,.93) 0%, rgba(246,241,233,.72) 34%, rgba(246,241,233,.3) 64%, rgba(246,241,233,0) 100%);
}
#captions.is-lit::after{opacity:1;}
.caption h2,.caption p,.caption .link{position:relative;z-index:1;}
.caption h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(23px,2.6vw,33px);
  line-height:1.24;margin:0 0 12px;
}
.caption p{font-size:14.5px;line-height:1.72;margin:0 0 18px;opacity:.88;max-width:32ch;}
.link{
  background:none;border:0;padding:0 0 3px;cursor:pointer;color:var(--olive);
  font-family:var(--sans);font-size:12.5px;letter-spacing:.07em;
  border-bottom:1px solid rgba(79,94,77,.45);
}
.link:hover{border-bottom-color:var(--olive);}

/* ---------- reading panel ---------- */
#panel{
  position:absolute;top:0;right:0;height:100%;
  width:min(470px,100%);
  background:var(--cream);
  transform:translateX(102%);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;overscroll-behavior:contain;
  box-shadow:-40px 0 80px rgba(23,23,21,.14);
  pointer-events:auto;
}
#panel.is-open{transform:none;}
.panel-close{
  position:sticky;top:0;margin-left:auto;display:block;
  background:var(--cream);border:0;cursor:pointer;
  padding:20px var(--gutter);font-size:12px;letter-spacing:.1em;color:var(--ink);opacity:.6;
}
.panel-close:hover{opacity:1;}
.panel-body{padding:4px clamp(24px,4vw,46px) 72px;}
.panel-body .eyebrow{
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--sage);margin:0 0 14px;
}
.panel-body h3{
  font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,34px);
  line-height:1.22;margin:0 0 14px;
}
.panel-body .lede{font-size:15px;line-height:1.72;margin:0 0 30px;opacity:.82;}
.panel-body h4{
  font-family:var(--serif);font-weight:400;font-size:17px;margin:0 0 12px;
}
.panel-body section{padding:22px 0;border-top:1px solid rgba(23,23,21,.1);}
.panel-body ul{margin:0;padding:0;list-style:none;}
.panel-body ul li{
  font-size:14px;line-height:1.55;padding:6px 0 6px 18px;position:relative;opacity:.86;
}
.panel-body ul li::before{
  content:"";position:absolute;left:0;top:14px;width:6px;height:1px;background:var(--sage);
}
.facts{margin:0 0 4px;}
.facts .row{
  display:flex;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid rgba(23,23,21,.08);
}
.facts dt{font-size:12.5px;letter-spacing:.06em;opacity:.6;}
.facts dd{margin:0;font-family:var(--serif);font-size:16px;}
.facts.quiet dd{font-size:14.5px;}
.curriculum{margin:0;padding:0;list-style:none;counter-reset:c;}
.curriculum li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid rgba(23,23,21,.07);
}
.curriculum span{font-family:var(--serif);font-size:16.5px;}
.curriculum em{font-style:normal;font-size:12px;letter-spacing:.05em;opacity:.55;text-align:right;}
.pending{font-size:13px;line-height:1.6;color:var(--olive);opacity:.8;margin:24px 0 0;}
.panel-body .btn-primary{
  margin-top:30px;background:var(--ink);color:var(--cream);border-color:var(--ink);
}
.panel-body .btn-primary:hover{background:transparent;color:var(--ink);}

/* ---------- scroll hint ---------- */
#hint{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  margin:0;color:var(--cream);font-size:11px;letter-spacing:.22em;
  opacity:.0;transition:opacity 1.4s ease;
}
[data-stage="enter"] #hint{opacity:.45;color:var(--ink);}
[data-stage="library"] #hint{opacity:0;}
[data-stage="enter"] #nav{color:var(--ink);}
[data-stage="library"] #nav{color:var(--ink);}
#hint span{display:block;animation:drift 3.6s ease-in-out infinite;}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(5px);opacity:.9;}}

/* ---------- fallback ---------- */
#fallback{
  position:fixed;inset:0;z-index:1;
  background:radial-gradient(120% 100% at 50% 60%,#EDE6DA 0%,#CDC2AE 45%,#1B1917 100%);
}
.fb-arch{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(46vw,340px);aspect-ratio:.62;
  border-radius:50% 50% 0 0/38% 38% 0 0;
  background:linear-gradient(180deg,#4A3325,#2A1D14);
  box-shadow:0 0 120px 40px rgba(255,214,150,.22);
}
.fb-light{
  position:absolute;inset:auto 0 0 0;height:36%;
  background:linear-gradient(0deg,rgba(255,220,168,.85),transparent);
}

.noscript{position:fixed;inset:auto 0 0 0;padding:16px;text-align:center;color:#F6F1E9;z-index:9;}

/* ---------- mobile ---------- */

/* ---------- legibility ----------
   Words are never left sitting on the shelving. The hero sits in its own
   pool of shade; bay text sits in a cream margin, like the margin of a page.
   Flat edges, no radius, no glass, no shadow. */
#hero{z-index:2;}
/* once we are inside, the navigation is read against cream, not against shade */
#overlay[data-stage="library"] #nav a,
#overlay[data-stage="library"] .nav-mark{color:var(--ink);opacity:.72;}
#overlay[data-stage="library"] #nav a:hover{opacity:1;}
#nav{z-index:6;}
.caption{padding-top:104px;}
#hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-18vh -34vw -26vh -16vw;
  background:radial-gradient(110% 86% at 24% 76%,
    rgba(12,11,9,.66) 0%, rgba(12,11,9,.40) 38%, rgba(12,11,9,0) 74%);
}

.caption{
  top:0;bottom:0;right:0;width:min(42ch,40vw);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(30px,4vw,64px) clamp(78px,16vh,150px) clamp(52px,7vw,104px);
  background:linear-gradient(to right,
    rgba(246,241,233,0) 0%,
    rgba(246,241,233,.72) 26%,
    rgba(246,241,233,.95) 52%,
    rgba(246,241,233,.97) 100%);
  transform:translateY(0);
}
.caption h2,.caption p,.caption .link{position:relative;z-index:1;}
.caption h2{max-width:20ch;}
.caption p{opacity:.8;}

@media (max-width:820px){
  #nav-list{
    position:fixed;inset:0;background:var(--cream);color:var(--ink);
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:22px;padding:0 var(--gutter);
    transform:translateY(-101%);transition:transform .6s cubic-bezier(.22,.61,.36,1);
  }
  #nav-list a{font-family:var(--serif);font-size:26px;font-weight:300;letter-spacing:0;}
  #nav.is-open #nav-list{transform:none;}
  #nav-toggle{display:block;z-index:2;}
  #nav.is-open{color:var(--ink);}
  #hero{left:var(--gutter);right:var(--gutter);max-width:none;bottom:clamp(54px,10vh,90px);}
  #line{font-size:15px;max-width:34ch;}
  .caption{
    left:0;right:0;top:auto;width:auto;height:auto;
    padding:clamp(28px,6vh,54px) var(--gutter) clamp(52px,10vh,86px);
    background:linear-gradient(to top,
      rgba(246,241,233,.97) 0%,
      rgba(246,241,233,.93) 62%,
      rgba(246,241,233,0) 100%);
  }
  #hero::before{inset:-14vh -30vw -22vh -30vw;}
  .caption p{font-size:15px;}
  #panel{width:100%;}
  #hint{display:none;}
}

@media (prefers-reduced-motion:reduce){
  #hint span{animation:none;}
  .caption{transition-duration:.01ms;}
}