/* The Iru — page styles. Design tokens live in design-system/. Everything here is
   layout scaffolding, keyframes, hover/focus states and the responsive value ladder
   that the page's inline styles consume through custom properties. */

:root{
  --nav-pad:24px 80px;
  --logo-scale:1.6;
  --hero-h:100vh;
  --hero-pos:60% 45%;
  --hero-cap-max:40%;
  --cap-size:12px;
  --section-pad:120px 80px;
  --cta-pad:140px 80px;
  --course-cols:repeat(2,1fr);
  --course-gap:36px 110px;
  --map-h:380px;
  --card-w:372px;
  --card-pad:30px 28px 34px;
  --card-min-h:210px;
  --band-h:640px;
  --gallery-cols:repeat(4,1fr);
  --tile-row:180px;
  --footer-img-h:72%;
  --footer-pad:420px 80px 36px;
  --word-size:26.5vw;
}

@media (max-width:1279px){
  :root{
    --nav-pad:22px 48px;--logo-scale:1.5;--hero-h:100vh;--hero-pos:60% 45%;--hero-cap-max:46%;--cap-size:12px;
    --section-pad:104px 48px;--cta-pad:120px 48px;--course-cols:repeat(2,1fr);--course-gap:34px 56px;
    --map-h:300px;--card-w:34vw;--card-pad:30px 28px 34px;--card-min-h:200px;--band-h:520px;
    --tile-row:150px;--footer-img-h:66%;--footer-pad:300px 48px 32px;--word-size:27vw;
  }
}
@media (max-width:1023px){
  :root{
    --nav-pad:20px 32px;--logo-scale:1.3;--hero-h:92vh;--hero-pos:center 45%;--hero-cap-max:52%;--cap-size:11.5px;
    --section-pad:80px 32px;--cta-pad:96px 32px;--course-cols:1fr;--course-gap:32px;
    --map-h:220px;--card-w:46vw;--card-pad:28px 26px 30px;--card-min-h:190px;--band-h:400px;
    --tile-row:112px;--footer-img-h:58%;--footer-pad:210px 32px 28px;--word-size:28vw;
  }
}
@media (max-width:767px){
  :root{
    --nav-pad:18px 24px;--logo-scale:1.1;--hero-h:90vh;--hero-pos:58% 45%;--hero-cap-max:58%;--cap-size:11px;
    --section-pad:64px 24px;--cta-pad:76px 24px;--course-gap:30px;
    --map-h:180px;--card-w:68vw;--card-pad:26px 24px 28px;--card-min-h:180px;--band-h:340px;
    --tile-row:96px;--footer-img-h:52%;--footer-pad:150px 24px 24px;--word-size:29vw;
  }
}
@media (max-width:559px){
  :root{
    --nav-pad:16px 20px;--logo-scale:0.95;--hero-h:86vh;--hero-cap-max:64%;--cap-size:10.5px;
    --section-pad:56px 20px;--cta-pad:64px 20px;--course-gap:28px;
    --map-h:150px;--card-w:80vw;--card-pad:24px 22px 26px;--card-min-h:170px;--band-h:300px;
    --tile-row:84px;--footer-img-h:48%;--footer-pad:120px 20px 20px;--word-size:30vw;
  }
}

/* Gallery column count and the narrow-viewport uniform tile */
@media (max-width:1099px){
  :root{ --gallery-cols:repeat(3,1fr); }
  [data-tile]{ grid-column:span 1 !important; grid-row:span 2 !important; }
}
@media (max-width:699px){
  :root{ --gallery-cols:repeat(2,1fr); }
}

html{ scroll-behavior:smooth; }
body{ margin:0; background:#F5F0E8; overflow-x:hidden; }
a{ color:inherit; text-decoration-color:currentColor; }
a:hover{ text-decoration-color:#C9973B; }
img{ border-style:none; }

/* Accessibility: visually-hidden text, skip link, keyboard focus */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:8px; left:8px; z-index:200; transform:translateY(-160%); transition:transform 200ms ease; background:var(--bone); color:var(--iru-black); font-family:var(--font-sans); font-size:14px; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; padding:12px 20px; border-radius:2px; box-shadow:0 2px 12px rgba(0,0,0,0.25); }
.skip-link:focus{ transform:none; outline:2px solid var(--brass); outline-offset:2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }

/* Nav: desktop row above 900px, hairline button below */
.nav-desktop{ display:flex; }
.nav-toggle{ display:none; }
@media (max-width:899px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:flex; }
}
/* The compact nav panel carries an inline display:flex, so the [hidden] attribute
   (toggled by js/site.js) needs !important to close it. Closed until opened. */
#nav-panel[hidden]{ display:none !important; }

/* Hover and focus states (these were per-element in the design source) */
.pill:hover,.cta-pill:hover{ outline:1px solid #C9973B; }
.pill:hover{ outline-offset:5px; }
.cta-pill:hover{ outline-offset:6px; }
.story-card:hover{ transform:translateY(-8px); }
.rail:focus-visible{ outline:1px solid #C9973B; outline-offset:6px; }
.rail::-webkit-scrollbar{ display:none; }
.rail-btn:hover{ background:rgba(201,151,59,0.12); }
.ds-btn:hover{ border-color:var(--brass); }
.ds-textlink:hover{ text-decoration-color:var(--brass); }

/* Motion */
@keyframes iru-load-wipe{ 0%,72%{ transform:translateY(0); visibility:visible; } 100%{ transform:translateY(-101%); visibility:hidden; } }
@keyframes iru-load-draw{ from{ stroke-dashoffset:1200; } to{ stroke-dashoffset:0; } }
@keyframes iru-load-mark{ 0%{ opacity:0; } 12%{ opacity:1; } 52%{ opacity:1; } 68%,100%{ opacity:0; } }
@keyframes iru-load-word{ 0%,24%{ opacity:0; transform:translateY(10px); } 42%,52%{ opacity:1; transform:none; } 66%,100%{ opacity:0; transform:none; } }
@keyframes iru-hero-rise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
#iru-preloader{ animation:iru-load-wipe 4200ms cubic-bezier(0.76,0,0.24,1) forwards; }

@media (prefers-reduced-motion:reduce){
  #iru-preloader{ display:none; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
  /* JS reveals these by clearing opacity; it bails under reduced motion, so
     force them visible here — the footer wordmark bakes opacity:0 into the HTML. */
  [data-letter],[data-reveal],[data-tile],[data-card],[data-item],[data-rule]{
    opacity:1 !important; transform:none !important;
  }
}