/* ==========================================================================
   Sila Museum
   Palette taken from the building and the objects: Kerala laterite red,
   weathered granite, aged bell metal, and the warm off-white of old paper.
   No blues, no pure black — nothing on the page is a colour the museum
   itself does not contain.
   ========================================================================== */

:root{
  --laterite:#a0492a;
  --laterite-2:#7d3720;
  --laterite-3:#5c2716;
  --brass:#b08432;
  --brass-2:#8d6722;

  --paper:#faf6ef;
  --paper-2:#f3ece0;
  --paper-3:#e9dfcf;

  --ink:#241d17;
  --ink-2:#574c42;
  --ink-3:#8a7f73;

  --dark:#241d18;
  --dark-2:#2f2721;

  --line:#ded2c0;
  --line-2:#c9bba5;

  --wa:#25d366;
  --r:4px;
  --r-lg:10px;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.7 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.015em;
  font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}

/* Malayalam needs a face that actually has the glyphs, and a little more
   line-height than the Latin text. Applied whenever the page is in ML. */
html[lang="ml"] body,
.ml-text{
  font-family:"Noto Sans Malayalam",Inter,system-ui,sans-serif;
  line-height:1.85;
}
html[lang="ml"] h1,
html[lang="ml"] h2,
html[lang="ml"] h3,
html[lang="ml"] h4{
  font-family:"Noto Sans Malayalam",Fraunces,Georgia,serif;
  line-height:1.4;letter-spacing:0;font-weight:600;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:999;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px}
:focus-visible{outline:2px solid var(--laterite);outline-offset:3px}

/* ---------- shared section furniture ---------- */
.sec{padding:96px 0}
.sec-alt{background:var(--paper-2)}
.kicker{
  font:600 12px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--laterite);display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--laterite);flex:none}
html[lang="ml"] .kicker{letter-spacing:.06em;text-transform:none;font-size:13px}
.h2{font-size:clamp(30px,4.4vw,46px)}
.lede{margin-top:16px;max-width:60ch;color:var(--ink-2);font-size:18px}
.sec-head{max-width:720px;margin-bottom:52px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--r);
  font:600 15.5px/1 Inter,sans-serif;text-decoration:none;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
html[lang="ml"] .btn{font-family:"Noto Sans Malayalam",Inter,sans-serif;line-height:1.5}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--laterite);color:#fff}
.btn-primary:hover{background:var(--laterite-2)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--paper-3);border-color:var(--ink-3)}
.btn-on-dark{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.btn-on-dark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn-wa{background:var(--wa);color:#06331b}
.btn-wa:hover{background:#1fbb59}
.btn-sm{padding:10px 18px;font-size:14px}
.btn svg{width:17px;height:17px;flex:none}

/* ---------- header ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(250,246,239,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.nav.stuck{border-bottom-color:var(--line);box-shadow:0 1px 20px -8px rgba(36,29,23,.25)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  width:38px;height:38px;flex:none;border-radius:2px;
  background:linear-gradient(150deg,var(--laterite),var(--laterite-3));
  display:grid;place-items:center;color:#f6e3d5;
  font:600 19px/1 Fraunces,Georgia,serif;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt b{font:600 17px/1.2 Fraunces,Georgia,serif;letter-spacing:-.01em}
.brand-txt small{font-size:11px;color:var(--ink-3);letter-spacing:.09em;text-transform:uppercase}
html[lang="ml"] .brand-txt small{letter-spacing:.02em;text-transform:none}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>a:not(.btn){
  padding:9px 13px;border-radius:var(--r);font:500 15px/1 Inter,sans-serif;
  color:var(--ink-2);text-decoration:none;transition:.2s;
}
html[lang="ml"] .nav-links>a:not(.btn){font-family:"Noto Sans Malayalam",Inter,sans-serif;line-height:1.5}
.nav-links>a:not(.btn):hover{color:var(--ink);background:var(--paper-3)}
.nav-links .btn{margin-left:10px}
.lang{
  margin-left:6px;padding:8px 13px;border:1px solid var(--line-2);background:transparent;
  border-radius:var(--r);cursor:pointer;font:600 13px/1 Inter,sans-serif;color:var(--ink-2);
  transition:.2s;
}
.lang:hover{background:var(--paper-3);color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:150px 0 0;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 60% at 78% 8%,rgba(160,73,42,.09),transparent 62%),
    radial-gradient(50% 50% at 8% 88%,rgba(176,132,50,.10),transparent 60%);
}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(44px,7.2vw,82px);letter-spacing:-.03em}
html[lang="ml"] .hero h1{font-size:clamp(36px,6vw,66px)}
.hero-lede{margin-top:24px;font-size:19.5px;line-height:1.72;color:var(--ink-2);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-fig{position:relative}
.hero-rule{height:1px;background:var(--line);margin-top:92px}

/* ---------- facts strip ---------- */
.facts{background:var(--paper-2);border-block:1px solid var(--line)}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:30px 26px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact b{display:block;font:600 20px/1.3 Fraunces,Georgia,serif}
html[lang="ml"] .fact b{font-family:"Noto Sans Malayalam",serif;font-size:17px}
.fact span{display:block;margin-top:5px;font-size:14px;color:var(--ink-3)}
.fact-ic{width:19px;height:19px;color:var(--laterite);margin-bottom:12px}

/* ---------- story ---------- */
.story-in{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.story-copy p+p{margin-top:20px}
.story-copy p{color:var(--ink-2)}
.pull{
  margin-top:34px;padding:24px 0 24px 28px;border-left:3px solid var(--laterite);
  font:600 24px/1.45 Fraunces,Georgia,serif;color:var(--ink);letter-spacing:-.01em;
}
html[lang="ml"] .pull{font-family:"Noto Sans Malayalam",serif;font-size:20px;line-height:1.7}
.story-fig{position:sticky;top:110px}

/* ---------- collection grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.card{display:flex;flex-direction:column}
.card-fig{margin:0 0 20px}
.card h3{font-size:22px}
html[lang="ml"] .card h3{font-size:19px}
.card p{margin-top:10px;color:var(--ink-2);font-size:15.5px;line-height:1.72}

/* ---------- highlights ---------- */
.hi{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.hi-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column}
.sec-alt .hi-item{background:var(--paper)}
.hi-body{padding:24px 24px 28px}
.hi-note{
  font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-2);margin-bottom:11px;display:block;
}
html[lang="ml"] .hi-note{letter-spacing:.02em;text-transform:none;font-size:12.5px;line-height:1.5;
  font-family:"Noto Sans Malayalam",Inter,sans-serif}
.hi-item h3{font-size:24px}
html[lang="ml"] .hi-item h3{font-size:20px}
.hi-item p{margin-top:11px;color:var(--ink-2);font-size:15.5px;line-height:1.72}

/* ---------- schools ---------- */
.schools{background:var(--dark);color:#f3ece2}
.schools .kicker{color:var(--brass)}
.schools .kicker::before{background:var(--brass)}
.schools-in{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.schools h2{color:#fff}
.schools p{color:#c8bcaf}
.schools-note{margin-top:16px;font-size:14.5px;color:#9c8f81}
.schools-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- visit ---------- */
.visit-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:start}
.dl{border-top:1px solid var(--line)}
.dl-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
.dl-row dt{font:600 13px/1.5 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
html[lang="ml"] .dl-row dt{letter-spacing:.02em;text-transform:none;font-size:14px;
  font-family:"Noto Sans Malayalam",Inter,sans-serif}
.dl-row dd{margin:0;font-size:16px}
.dl-row dd a{color:var(--laterite);text-decoration:none;border-bottom:1px solid rgba(160,73,42,.35)}
.dl-row dd a:hover{border-bottom-color:var(--laterite)}

.dirs{margin-top:40px}
.dirs h3{font-size:19px;margin-bottom:16px}
.dir{padding:15px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:18px}
.dir b{font:600 15px/1.6 Inter,sans-serif}
html[lang="ml"] .dir b{font-family:"Noto Sans Malayalam",Inter,sans-serif}
.dir span{color:var(--ink-2);font-size:15.5px}

/* map: nothing loads from Google until the visitor asks for it */
.map{
  position:relative;aspect-ratio:4/3.4;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-3);
}
.map-stub{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:30px;cursor:pointer;border:0;width:100%;
  background:
    repeating-linear-gradient(0deg,rgba(36,29,23,.045) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(36,29,23,.045) 0 1px,transparent 1px 44px),
    var(--paper-3);
}
.map-pin{width:34px;height:34px;color:var(--laterite)}
.map-stub b{font:600 17px/1.4 Fraunces,Georgia,serif}
html[lang="ml"] .map-stub b{font-family:"Noto Sans Malayalam",serif;font-size:16px}
.map-stub small{color:var(--ink-3);font-size:13.5px;max-width:26ch}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- faq ---------- */
.faq{max-width:800px;margin:0 auto}
.faq h2{text-align:center;margin-bottom:40px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:21px 40px 21px 0;position:relative;
  font:600 18px/1.5 Fraunces,Georgia,serif;
}
html[lang="ml"] .qa summary{font-family:"Noto Sans Malayalam",serif;font-size:16.5px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--laterite);border-bottom:2px solid var(--laterite);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa p{padding:0 0 24px;color:var(--ink-2);font-size:16px;max-width:66ch}

/* ---------- closing cta ---------- */
.cta{background:var(--laterite-3);color:#f7e9e0;text-align:center;padding:104px 0}
.cta h2{color:#fff;font-size:clamp(30px,4.6vw,48px)}
.cta p{margin:18px auto 0;max-width:52ch;color:#e3c8b9}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.cta .btn-primary{background:#fff;color:var(--laterite-3)}
.cta .btn-primary:hover{background:var(--paper-2)}

/* ---------- footer ---------- */
.foot{background:var(--dark);color:#a99c8e;padding:64px 0 34px;font-size:14.5px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.foot h4{color:#fff;font-size:17px;margin-bottom:12px}
.foot-brand p{margin-top:10px;max-width:34ch}
.foot a{color:#c8bcaf;text-decoration:none}
.foot a:hover{color:#fff}
.foot li{margin-top:9px}
.foot-bot{
  margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:13px;color:#8b8074;
}

/* ==========================================================================
   PHOTO PLACEHOLDERS
   These appear anywhere data.js has an empty `img`. They are meant to look
   deliberate rather than broken, and each carries its shot number from
   SHOTLIST.md so you know exactly which photo replaces it.
   Once every img is filled in, none of this renders.
   ========================================================================== */
.ph{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px dashed var(--line-2);
  background:
    repeating-linear-gradient(135deg,rgba(160,73,42,.05) 0 10px,transparent 10px 20px),
    linear-gradient(160deg,var(--paper-3),var(--paper-2));
  display:grid;place-content:center;justify-items:center;gap:12px;
  text-align:center;padding:28px;aspect-ratio:4/3;
}
.ph-4x5{aspect-ratio:4/5}
.ph-16x10{aspect-ratio:16/10}
.ph-cam{width:30px;height:30px;color:var(--laterite);opacity:.55}
.ph-shot{
  font:600 10.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--laterite);padding:5px 9px;border-radius:3px;
  position:absolute;top:12px;left:12px;
}
.ph-txt{font:500 13.5px/1.6 Inter,sans-serif;color:var(--ink-2);max-width:30ch}
.ph-txt b{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-in,.story-in,.visit-in,.schools-in{grid-template-columns:1fr;gap:44px}
  .story-fig{position:static}
  .grid-3,.hi{grid-template-columns:repeat(2,1fr)}
  .facts-in{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

@media (max-width:760px){
  .nav-links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);padding:14px 22px 24px;
    gap:2px;display:none;box-shadow:0 18px 40px -22px rgba(36,29,23,.5);
  }
  .nav-links.open{display:flex}
  .nav-links>a:not(.btn){padding:13px 6px;font-size:16.5px}
  .nav-links .btn{margin:8px 0 0}
  .lang{margin:10px 0 0;align-self:flex-start}
  .burger{display:flex}
}

@media (max-width:640px){
  body{font-size:16.5px}
  /* the location line wraps to two lines on a phone and pushes the header
     out of shape — the same words are in the hero two centimetres below */
  .brand-txt small{display:none}
  .brand-txt b{font-size:18px}
  .nav-in{height:66px}
  html{scroll-padding-top:76px}
  .nav-links{inset:66px 0 auto 0}
  .sec{padding:70px 0}
  .hero{padding:118px 0 0}
  .hero-rule{margin-top:62px}
  .grid-3,.hi{grid-template-columns:1fr;gap:32px}
  .facts-in{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--line);padding:24px}
  .fact:last-child{border-bottom:0}
  .dl-row,.dir{grid-template-columns:1fr;gap:6px}
  .foot-in{grid-template-columns:1fr;gap:34px}
  .cta{padding:78px 0}
  .btn{width:100%}
  .hero-cta .btn,.cta-row .btn,.schools-cta .btn{flex:1 1 240px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .nav,.burger,.lang,.cta,.map-stub{display:none}
  body{background:#fff}
}