/* Public (pre-login) shell and landing page — BRAND.md v1.1 §13.
   Every value is a token from brand/tokens.css; there are no literal colours
   and no font stacks here. CSP is `style-src 'self'` with no 'unsafe-inline'
   (RULING_Stage_4H_CSP_2026-08-27.md §A.2), so the styleguide's <style> block
   and its style="" attributes are reproduced here as classes instead. This is
   a relocation of the reference implementation, not a restyle. */

/* ---- shell ------------------------------------------------------------- */
.pub-bar { display: flex; align-items: center; gap: var(--space-3);
           min-height: 64px; padding: 0 var(--space-5);
           background: var(--gray-0); border-bottom: 1px solid var(--border); }
.pub-bar__mark { height: 36px; width: auto; flex: none; }
.pub-bar__name { font-family: var(--font-display); font-size: 26px; font-weight: 500;
                 color: var(--sddt-indigo); letter-spacing: .01em;
                 font-variant-numeric: lining-nums; }
.pub-strip { height: 3px; background: var(--inst-accent); }

/* Language toggle. Links, not buttons: it is a navigation that sets a cookie,
   so it works with JavaScript disabled and needs no inline script. */
.lang { margin-left: auto; display: inline-flex; flex: none; overflow: hidden;
        border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
.lang a { padding: 6px 14px; font-size: var(--text-sm); font-weight: 600;
          color: var(--link); text-decoration: none;
          transition: background var(--dur-base) var(--ease); }
.lang a:hover { background: var(--indigo-50); }
.lang a[aria-current="true"] { background: var(--sddt-indigo); color: var(--text-on-dark); }

/* ---- page -------------------------------------------------------------- */
.pub-wrap { max-width: 1120px; margin: 0 auto;
            padding: var(--space-6) var(--space-5) var(--space-8); }

.hero { background-color: var(--surface-warm);
        background-image: url("/brand/pattern/flame-lattice-on-light.svg");
        border-radius: var(--radius-lg);
        padding: var(--space-8) var(--space-6); }
.hero__lockup { height: 96px; max-width: 100%; width: auto; }
.hero h1 { font-size: var(--text-4xl); margin: var(--space-5) 0 0; }
.hero__rule { width: 56px; height: 2px; background: var(--sddt-rule-gold);
              border: 0; margin: var(--space-3) 0 var(--space-4); }
.hero__lede { color: var(--text-secondary); max-width: 560px;
              margin: 0 0 var(--space-5); font-size: var(--text-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3);
                 align-items: center; }

/* Hindi display face for the motto, per §5 (Tiro for Hindi headings). The
   token file already switches on :lang(hi); this only sizes it. */
.motto-hi { font-family: var(--font-hindi-display); line-height: var(--leading-hindi); }

/* ---- English headings inside a Hindi-mode document --------------------- */
/* From 288 §B item 4 the document is `lang="hi"` whenever Hindi mode is on,
   even while the strings are still English. tokens.css switches the display
   face on `:lang(hi) h1, :lang(hi) h2` — a DESCENDANT selector, so it also
   catches a heading that is still English and marked `lang="en"`. §5 gives
   Tiro to HINDI headings; and because Tiro is declared with a Devanagari
   `unicode-range`, Latin does not reach it at all — it falls past to a generic
   serif, so an English heading in Hindi mode rendered in neither Cormorant nor
   Tiro. §13.8 asks the page to match the styleguide in type, and it stopped.

   Restated HERE, at matching specificity, and NOT fixed by editing
   `tokens.css`: the token file is locked brand material this lane does not
   write (BRAND.md change control), and proof 358 would redden if it did. This
   is the "closest compliant version" the same clause asks for, and the
   conflict is named in the report.

   The other half of the inheritance — `:lang(hi)` also puts 1.7 leading on
   English body text — is LEFT AS IT IS, deliberately. Devanagari needs the
   room and Latin merely gets a little of it; that is loose, not wrong, and
   unpicking it would take a specificity fight across every text element to
   win back something nobody would notice. */
:lang(hi) h1[lang="en"],
:lang(hi) h2[lang="en"],
:lang(hi) .display[lang="en"] {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
}

/* ---- buttons (styleguide .btn) ----------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center;
       height: var(--control-h); padding: 0 var(--space-5);
       border: 1px solid transparent; border-radius: var(--radius-md);
       font: 600 var(--body-size)/1 var(--font-ui); text-decoration: none;
       cursor: pointer; transition: background var(--dur-base) var(--ease); }
.btn-primary { background: var(--action-primary); color: var(--action-primary-text); }
.btn-primary:hover { background: var(--action-primary-hover); }
.btn-secondary { background: var(--gray-0); color: var(--sddt-indigo);
                 border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--indigo-50); }

/* ---- feature row ------------------------------------------------------- */
.pub-grid { display: grid; gap: var(--space-5); margin-top: var(--space-7);
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pub-card { background: var(--gray-0); border: 1px solid var(--border);
            border-radius: var(--radius-lg); padding: var(--space-5);
            box-shadow: var(--shadow-1); }
.pub-card h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.pub-card p { color: var(--text-secondary); margin: 0; }

/* ---- notice ------------------------------------------------------------ */
/* Shown only in Hindi mode while the Hindi strings are unreviewed (§7, §13.7).
   Warning tokens, paired with a text label — never colour alone (§6). */
.notice { display: flex; gap: var(--space-3); align-items: flex-start;
          background: var(--warning-bg); color: var(--warning);
          border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
          margin-top: var(--space-5); font-size: var(--text-sm); }
.notice svg { flex: none; margin-top: 2px; }

/* ---- footer ------------------------------------------------------------ */
.pub-foot { background: var(--surface-subtle); border-top: 1px solid var(--border);
            margin-top: var(--space-7); padding: var(--space-7) var(--space-5); }
.pub-foot__in { max-width: 1120px; margin: 0 auto; display: flex;
                flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.pub-foot__lockup { height: 52px; width: auto; }
.pub-foot__text { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }
.pub-foot__links { margin-left: auto; display: flex; flex-wrap: wrap;
                   gap: var(--space-5); }
.pub-foot__links a { color: var(--link); font-size: var(--text-sm); }

/* ---- prose (privacy / grievance placeholders) -------------------------- */
.prose { max-width: 680px; }
.prose h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-4); }
.prose p { color: var(--text-secondary); margin: 0 0 var(--space-4); }

/* ---- 390px ------------------------------------------------------------- */
@media (max-width: 640px) {
  .pub-bar { padding: 0 var(--space-4); gap: var(--space-2); }
  .pub-bar__mark { height: 30px; }
  .pub-bar__name { font-size: 22px; }
  .lang a { padding: 6px 11px; }
  .pub-wrap { padding: var(--space-5) var(--space-4) var(--space-7); }
  .hero { padding: var(--space-6) var(--space-5); }
  .hero h1 { font-size: var(--text-2xl); }
  .hero__lockup { height: 64px; }
  .hero__lede { font-size: var(--text-base); }
  .hero__actions .btn { width: 100%; }
  .pub-foot__in { gap: var(--space-4); }
  .pub-foot__links { margin-left: 0; width: 100%; gap: var(--space-4); }
}