/* ════════════════════════════════════════════════════════════════════
   QISSA — public conference site
   Palette grounded in the coast, not in a template: the teal-black of the
   coast under monsoon, brass from the spice-trade lamps, and the warm
   paper of an Arabi-Malayalam manuscript. Deliberately not cream +
   serif + terracotta.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* LIGHT theme. Coastal palette on paper: deep teal ink for text, brass for
     the accent, warm paper for the page. The white-bg logo blends everywhere. */
  --page:     #faf7ef;   /* the page — warm paper */
  --card:     #ffffff;   /* raised surfaces */
  --ink:      #12312b;   /* deep teal — primary TEXT (name kept for compatibility) */
  --ink-2:    #ffffff;   /* was dark surface; now white card */
  --sea:      #dfd8c6;   /* hairlines / borders on paper */
  --sea-deep: #12312b;   /* deep teal for the dark accent band */
  --brass:    #b07d1e;   /* accent, darkened so it reads on light */
  --brass-lo: #8a6a2a;
  --paper:    #12312b;   /* body TEXT colour (kept name) */
  --paper-lo: #6a6656;   /* muted text on paper */
  --lit:      #b07d1e;

  --f-disp: "Fraunces", Georgia, serif;
  --f-body: "Karla", system-ui, sans-serif;
  --f-mal:  "Noto Sans Malayalam", var(--f-body);

  --wrap: 1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--page); color:var(--paper);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ── header ─────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;
  background:color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sea);
}
.hd-brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.hd-mark{font-family:var(--f-mal);font-size:1.05rem;color:var(--brass);line-height:1}
.hd-name{font-family:var(--f-disp);font-weight:600;font-size:1.05rem;letter-spacing:.01em}
.hd-nav{display:flex;align-items:center;gap:20px;font-size:.9rem}
.hd-nav a{text-decoration:none;color:var(--paper-lo)}
.hd-nav a:hover{color:var(--ink)}
.hd-signin{border:1px solid var(--sea);padding:5px 12px;border-radius:2px}
@media(max-width:600px){ .hd-nav a:not(.hd-signin){display:none} }

.flash{max-width:var(--wrap);margin:12px auto;padding:10px 16px;border-radius:2px;font-size:.9rem}
.flash-success{background:#e7f4ec;color:#1c6b43;border:1px solid #bfe3cd}
.flash-danger{background:#fbeaea;color:#a23b3b;border:1px solid #f0c9c9}

/* ── hero: pure white to match the logo's own background (#fefefe), so the
      logo blends in with NO visible box or card edge. Page goes dark below. ── */
.hero{
  position:relative;
  background:#ffffff;
  padding:clamp(26px,5vw,54px) 22px clamp(40px,7vw,76px);
  text-align:center;
}
/* soft brass hairline where white meets the dark body */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--brass) 25%,var(--brass) 75%,transparent);
  opacity:.7;
}
.hero-in{max-width:820px;margin:0 auto;position:relative;z-index:1}

.hero-logo{
  display:block;width:100%;
  max-width:clamp(280px,48vw,480px);   /* smaller than before */
  height:auto;margin:0 auto;
}
.hero-tag{
  font-family:var(--f-disp);
  font-size:clamp(1.1rem,2.6vw,1.55rem);
  font-weight:400;font-style:italic;
  color:#8a6a1e;
  margin:clamp(4px,1vw,10px) 0 0;
}
.hero-when{
  margin:clamp(14px,2.4vw,22px) 0 0;
  font-size:1rem;color:#4a4636;letter-spacing:.02em;font-weight:500;
}
.hero-when .dot{margin:0 10px;color:var(--brass)}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vw,28px);justify-content:center}
.btn-brass{
  display:inline-flex;align-items:baseline;gap:9px;
  background:var(--ink);color:#fff;
  font-weight:700;font-size:1rem;padding:13px 26px;border-radius:2px;
  text-decoration:none;transition:transform .12s,background .12s;
}
.btn-brass:hover{background:#0c221d;transform:translateY(-1px)}
.btn-fee{font-size:.85rem;font-weight:500;opacity:.72}
.btn-lg{font-size:1.1rem;padding:16px 34px}
.btn-ghost{
  display:inline-flex;align-items:center;border:1px solid #d8cfb8;color:#6a6350;
  padding:13px 22px;border-radius:2px;text-decoration:none;font-size:.95rem;
}
.btn-ghost:hover{border-color:var(--brass);color:var(--ink)}
.btn-closed{display:inline-block;border:1px dashed #d8cfb8;color:#8a836a;padding:13px 22px;border-radius:2px;font-size:.95rem}

.live{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(26px,6vw,58px);margin:clamp(26px,4vw,44px) 0 0;padding:0}
.live div{margin:0}
.live dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8a7f66;margin-bottom:4px}
.live dd{margin:0}
.live-n{font-family:var(--f-disp);font-weight:600;font-size:clamp(2rem,5vw,3rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.live-of{color:#a89f86;font-size:.5em;font-weight:400}

/* ── about ──────────────────────────────────────────────── */
.about{padding:clamp(44px,7vw,80px) 0}
.lede{
  font-family:var(--f-disp);font-size:clamp(1.2rem,2.4vw,1.6rem);
  line-height:1.5;font-weight:400;max-width:34em;margin:0;color:var(--paper);
}
.why{
  display:grid;gap:clamp(22px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(38px,5vw,60px);
}
.why article{border-top:2px solid var(--brass);padding-top:16px}
.why h3{
  font-family:var(--f-disp);font-size:1.12rem;font-weight:600;
  margin:0 0 7px;line-height:1.3;
}
.why p{margin:0;color:var(--paper-lo);font-size:.95rem;line-height:1.6}

/* ── section heads ──────────────────────────────────────── */
.sec-h{margin-bottom:clamp(24px,3.5vw,36px);max-width:46em}
.sec-h h2{
  font-family:var(--f-disp);font-weight:600;
  font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.02em;
  margin:0 0 8px;line-height:1.08;
}
.sec-h p{margin:0;color:var(--paper-lo);font-size:.98rem}
.sec-h strong{color:var(--paper)}

/* ── THE CHAPTER WALL (signature) ───────────────────────── */
.chapters{padding:clamp(44px,7vw,84px) 0;background:#f2ede0;border-block:1px solid var(--sea)}

.wall-tools{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,32px);
}
#wallSearch{
  flex:1;min-width:210px;
  background:#fff;border:1px solid #cfc7b2;color:var(--ink);
  font-family:inherit;font-size:16px;padding:11px 14px;border-radius:2px;
}
#wallSearch:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:transparent}
#wallSearch::placeholder{color:var(--paper-lo)}
.wall-count{font-size:.8rem;color:var(--paper-lo);letter-spacing:.04em}
.wall-count #wallLit{color:var(--brass);font-weight:700}

.region{margin-bottom:clamp(26px,3.4vw,38px)}
.region[hidden]{display:none}
.region-h{
  display:flex;align-items:center;gap:11px;
  font-family:var(--f-body);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper-lo);
  margin:0 0 13px;padding-bottom:9px;border-bottom:1px solid var(--sea);
}
.region-code{
  display:inline-grid;place-items:center;width:22px;height:22px;
  background:var(--brass);color:#fff;border-radius:2px;
  font-size:.72rem;letter-spacing:0;
}
.region-tally{margin-left:auto;color:var(--brass-lo);letter-spacing:.06em}

.wall{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid #ded6c3;border-radius:2px;
  padding:6px 11px;font-size:.85rem;
  color:#8a8570;background:#fbf9f3;
  transition:border-color .15s, color .15s, background .15s;
}
.chip[hidden]{display:none}
.chip.lit{
  border-color:var(--brass);color:#7a5410;font-weight:600;
  background:linear-gradient(180deg,#fbf1d8,#f6e6bd);
  box-shadow:0 1px 0 rgba(176,125,30,.25);
}
.chip.fresh{border-style:dashed}
.chip-c{
  font-family:var(--f-disp);font-weight:700;font-size:.8rem;
  color:#7a5410;font-variant-numeric:tabular-nums;
}
.chip-tag{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-lo)}

.wall-none{color:var(--paper-lo);font-size:.9rem}
.wall-cta{
  margin-top:clamp(28px,4vw,42px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--sea);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.wall-cta p{margin:0;font-family:var(--f-disp);font-size:1.2rem;font-style:italic;color:var(--paper)}

/* ── sponsors ───────────────────────────────────────────── */
.sponsors{padding:clamp(44px,7vw,80px) 0}
.sp-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.sp{border:1px solid #ded6c3;background:#fff;border-radius:2px;padding:18px 16px;text-align:center}
.sp a{text-decoration:none;display:block}
.sp-name{display:block;font-family:var(--f-disp);font-weight:600;font-size:1rem}
.sp-cat{
  display:block;margin-top:5px;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-lo);
}
.sp-title,.sp-platinum{border-color:var(--brass);grid-column:span 2}
.sp-title .sp-name,.sp-platinum .sp-name{font-size:1.3rem}
.sp-title .sp-cat,.sp-platinum .sp-cat{color:var(--brass)}
@media(max-width:520px){ .sp-title,.sp-platinum{grid-column:span 1} }

/* ── faq ────────────────────────────────────────────────── */
.faq{padding:clamp(44px,7vw,80px) 0;background:#f2ede0;border-block:1px solid var(--sea)}
.faq details{border-bottom:1px solid var(--sea);padding:16px 0}
.faq summary{
  cursor:pointer;font-family:var(--f-disp);font-size:1.08rem;font-weight:600;
  list-style:none;display:flex;justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--paper-lo);max-width:60ch}

/* ── closing ────────────────────────────────────────────── */
.close-cta{padding:clamp(56px,9vw,110px) 22px;text-align:center;background:var(--sea-deep);margin-top:0}
.close-q{margin:0;font-family:var(--f-disp);font-size:clamp(1.4rem,3.4vw,2.2rem);color:#c9d6cf}
.close-a{
  margin:2px 0 clamp(26px,4vw,38px);
  font-family:var(--f-disp);font-style:italic;font-weight:600;
  font-size:clamp(2rem,6vw,3.6rem);color:#e9c46a;letter-spacing:-.02em;
}

/* ── footer ─────────────────────────────────────────────── */
.ft{border-top:1px solid var(--sea);padding:clamp(34px,5vw,52px) 22px 26px}
.ft-in{
  max-width:var(--wrap);margin:0 auto;
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.ft-mark{font-family:var(--f-mal);font-size:1.5rem;color:var(--brass);margin-bottom:8px}
.ft-org{margin:0;font-weight:700;font-size:.9rem}
.ft-line{margin:2px 0 0;color:var(--paper-lo);font-size:.88rem}
.ft-line a{color:var(--paper-lo)}
.ft-links{display:flex;flex-direction:column;gap:7px;font-size:.88rem}
.ft-links a{color:var(--paper-lo);text-decoration:none}
.ft-links a:hover{color:var(--brass)}
.ft-tiny{
  max-width:var(--wrap);margin:clamp(28px,4vw,42px) auto 0;
  padding-top:18px;border-top:1px solid var(--sea);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-lo);
}

:focus-visible{outline:2px solid var(--brass);outline-offset:2px}


.ft-logo{height:40px;width:auto;margin-bottom:10px;background:#faf7ef;border-radius:6px;padding:5px 9px}
.hd-logo{height:32px;width:auto;display:block;background:#faf7ef;border-radius:5px;padding:3px 8px}
@media(max-width:600px){.hd-logo{height:26px}}

/* closing band sits dark; its button is brass to read on the dark teal */
.close-cta .btn-brass{background:var(--brass);color:#12312b}
.close-cta .btn-brass:hover{background:#e9c46a}
.close-cta .btn-fee{color:#12312b;opacity:.7}

/* footer on paper */
.ft{background:#f2ede0}
.ft-logo{height:42px;width:auto;margin-bottom:10px;background:transparent;border-radius:0;padding:0}
.hd-logo{height:32px;width:auto;display:block;background:transparent;border-radius:0;padding:0}
@media(max-width:600px){.hd-logo{height:26px}}