/* sddt.in — the public site's only stylesheet.
 *
 * EVERY COLOUR IS A TOKEN FROM brand/tokens.css. BRAND.md §13.2 and the
 * standing line in CLAUDE.md §6 both say it: there are no literal colours in
 * the stylesheets and no new one may be added. The only hex in this file
 * would be a bug.
 *
 * tokens.css is LOCKED and pinned by proof 358, so anything that needs
 * overriding is overridden here, at matching specificity, and never there.
 *
 * CSP is `default-src 'self'; style-src 'self'` — no inline style attribute
 * anywhere in the templates, no @import, no CDN.
 *
 * Proportion, BRAND.md §6: ~70% white/cream, ~20% indigo, ≤10% saffron/gold.
 * Saffron and gold appear here as the focus ring, the hairline rule and the
 * lattice only — never as text on a light ground, where they fail AA.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
}

/* The focus ring is saffron with a white offset (§6) — decorative use, which
   is the one thing saffron is for. Never removed. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

a { color: var(--link); }
a:hover { color: var(--sddt-indigo); }

img { max-width: 100%; height: auto; }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ---- masthead --------------------------------------------------------- */

/* SYMBOL + LIVE TEXT, one horizontal pass, as tight as the type allows.
 *
 * The band was 189px tall carrying 119px of image, of which a THIRD was the
 * lockup file's own baked-in clear space — uncroppable, because that is what
 * §4 mandates, and the reason the mark sat right of the text column below.
 * Live text has no baked padding: the mark aligns with the content column to
 * the pixel and the band is under half the height.
 *
 * §9's flame lattice stays, faint. It is a header band now rather than a
 * hero, so it is short enough that the pattern reads as a texture.
 */

.mast {
  background-color: var(--surface-warm);
  background-image: url("/brand/pattern/flame-lattice-on-light.svg");
  background-repeat: repeat;
  background-size: 170px auto;
}

.mast__in {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5);
}

/* `inline-flex`, so the link's hit area is the mark and the words and not the
   full width of the band. */
.mast__id {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

/* 45px BOX, which draws a 36px MARK — the top of §4's 32–36px desktop range.
 *
 * MEASURED, not assumed: symbol-full-colour.svg bakes 10% padding top and
 * bottom and 15% left and right into its 1000-unit box, so the flame occupies
 * 80% of the height. A 36px BOX therefore drew a 28.8px mark — BELOW §4's
 * 32px floor. The band was under-size, not over.
 *
 * §4's "32–36px" reads as the MARK, not the canvas: that same section
 * separately mandates clear space "on every side, at least the height of the
 * flame's heart", which is exactly what the file's padding is. A size spec and
 * a clear-space spec cannot both be measuring the same pixels.
 *
 * Going beyond 36px of visible mark would be a real departure from §4 and is
 * the brand chat's call, not this lane's. */
.mast__mark { width: 45px; height: 45px; flex: none; }

.mast__text { display: block; }

/* Cormorant Garamond 500, and 22px clears §5's >= 20px floor for the display
   face. `lining-nums` is set globally by the token file for this family; it is
   restated nowhere here because there are no numerals in the name. */
.mast__name {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--text-heading);
}

/* The Hindi UI face, not the display face: §5 reserves Tiro Devanagari for
   headings, and at 13px this is a strapline. Devanagari's own line-height. */
.mast__motto {
  display: block;
  font-family: var(--font-hindi-ui);
  font-size: var(--text-xs);
  line-height: var(--leading-hindi);
  color: var(--text-secondary);
}

/* The 3px context strip. With no institution in context it takes the default
   --inst-accent, which tokens.css sets to indigo. */
.strip {
  height: 3px;
  background: var(--inst-accent);
}

.rule {
  width: 72px;
  height: 1px;
  border: 0;
  /* Rule gold is for hairline rules and dividers only (§6). */
  background: var(--sddt-rule-gold);
  margin: var(--space-6) auto;
}

/* ---- the photograph ---------------------------------------------------- */

.shot { margin: 0; }

.shot img {
  display: block;
  width: 100%;
  height: clamp(200px, 32vw, 420px);
  object-fit: cover;
}

/* ---- bands ------------------------------------------------------------- */

.band { padding: var(--space-8) 0; }
.band--warm { background: var(--surface-warm); }

.band h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  font-variant-numeric: lining-nums;
  color: var(--text-heading);
  margin: 0 0 var(--space-5);
}

.lede {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 var(--space-4);
}

/* 68ch, not 62ch. The measure is in `ch`, which scales with the font size,
   so a 16px paragraph set to the same 62ch as the 18px lede above it wraps
   NARROWER and the two right edges disagree by about 70px. This makes the
   rendered widths match rather than the numbers. */
.body {
  color: var(--text-secondary);
  max-width: 68ch;
  margin: 0 0 var(--space-4);
}

/* The page's one call to action. Cormorant at 2.25rem clears §5's >= 20px
   floor for the display face by a distance, and a telephone number is the one
   place on this page where `tabular-nums` earns its keep — the digits line up
   as a number rather than drifting as words (§5). */
.call {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}

.call a { color: var(--text-heading); text-decoration: none; }
.call a:hover { text-decoration: underline; }

/* ---- institutions ------------------------------------------------------ */

.insts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.inst {
  background: var(--surface-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* The accent as a 3px strip and the name line — identity only, never a
     large background and never a status (§6). */
  border-top: 3px solid var(--inst-accent);
  padding: var(--space-5);
}

.inst--intercollege     { --inst-accent: var(--inst-intercollege); }
.inst--pg-college       { --inst-accent: var(--inst-pg-college); }
.inst--pharmacy-college { --inst-accent: var(--inst-pharmacy-college); }

.inst__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  font-variant-numeric: lining-nums;
  line-height: var(--leading-tight);
  color: var(--inst-accent);
  margin: 0 0 var(--space-3);
}

.inst__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ---- prose (privacy) --------------------------------------------------- */

.prose { max-width: 68ch; }

.prose h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  font-variant-numeric: lining-nums;
  color: var(--text-heading);
  margin: 0 0 var(--space-2);
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  font-variant-numeric: lining-nums;
  color: var(--text-heading);
  margin: var(--space-7) 0 var(--space-3);
}

.prose p { margin: 0 0 var(--space-4); }

.updated {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.contact {
  font-style: normal;
  color: var(--text-secondary);
}

.contact p { margin: 0 0 var(--space-2); }

/* ---- footer ------------------------------------------------------------ */

.foot {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: var(--space-8) var(--space-5);
}

.foot__in {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.foot__lockup { width: 220px; height: auto; }

/* On indigo, white type is 13:1 and gold is 7:1 (§6). Nothing here is
   saffron, which fails on both grounds. */
.foot__trust {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.foot__trust p { margin: 0 0 var(--space-1); }

/* The Trust's own name line, which is the whole reason this footer exists. */
.foot__trust p:first-child {
  color: var(--text-accent-on-dark);
  font-weight: 600;
}

.foot__links { margin-top: var(--space-5); }

.foot__links a {
  color: var(--text-on-dark);
  font-size: var(--text-sm);
}

/* ---- narrow ------------------------------------------------------------ */

/* The name is long; below this it drops to the smaller display size rather
   than crowding the mark. */
@media (max-width: 700px) {
  .mast__in { padding: var(--space-4); }
  /* 37px box draws a 29.6px mark — inside §4's 28–30px mobile range. */
  .mast__mark { width: 37px; height: 37px; }
  .mast__name { font-size: var(--text-lg); }
}

@media (max-width: 480px) {
  .band { padding: var(--space-7) 0; }
}

/* Someone who has asked their system for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* R-70 / WO-69 (CF-129; 24 Sep 2026): the EN | हिं toggle, drawn only when a
   reviewed Hindi bundle exists (the shell tests `hindi_reviewed`). Tokens
   only; the same pill the ERP's pre-login shell uses. */
.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; }
.lang a[aria-current="true"] { background: var(--sddt-indigo); color: var(--text-on-dark); }
.mast__in { display: flex; align-items: center; gap: var(--space-4); }

/* 7 Oct 2026 (RULING_Join_Hindi_Lapse_Retention §D): the retention row's Hindi line, under its English */
.retention .hi-line { display: block; margin-top: var(--space-1); }