:root {
  --indigo: #1f2a63;
  --indigo-deep: #151d47;
  --marigold: #f0a500;
  --paper: #fafaf7;
  --tint: #eef0f7;
  --text: #22252f;
  --muted: #5a6072;
  --head: "Tiro Devanagari Hindi", serif;
  --body: "Mukta", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1.125rem/1.7 var(--body);
}

a { color: var(--indigo); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* header */
.top { background: var(--indigo-deep); position: sticky; top: 0; z-index: 10; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.mark { font: 1.3rem/1 var(--head); color: #fff; text-decoration: none; padding: 10px 0; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.top nav a { color: #d9ddef; text-decoration: none; font-size: 1rem; }
.top nav a:hover { color: #fff; }
.top nav .nav-cta { background: var(--marigold); color: var(--indigo-deep); font-weight: 700; padding: 4px 14px; border-radius: 4px; }

/* hero */
.hero { background: var(--indigo); color: #fff; padding: 72px 0 0; position: relative; }
.hero h1 {
  font: 400 clamp(2.4rem, 7vw, 5.2rem)/1.15 var(--head);
  margin: 0;
  max-width: 14ch;
  color: var(--marigold);
}
.hero-en { margin: 18px 0 0; color: #c3c8e4; font-size: 1.05rem; }
.hero-lead { font-size: 1.3rem; max-width: 36em; margin: 22px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .hero-actions { padding-bottom: 76px; }

.btn { display: inline-block; padding: 12px 22px; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.btn-solid { background: #fff; color: var(--indigo-deep); }
.btn-line { border: 2px solid #8e97c8; color: #fff; }
.btn-gold { background: var(--marigold); color: var(--indigo-deep); }

/* toran: bunting of hanging triangles at the hero's foot */
.toran {
  height: 26px;
  background:
    linear-gradient(135deg, var(--marigold) 50%, transparent 50%) 0 0 / 36px 26px repeat-x,
    linear-gradient(225deg, var(--marigold) 50%, transparent 50%) 0 0 / 36px 26px repeat-x;
  background-color: var(--paper);
  border-top: 4px solid var(--marigold);
}

/* sections */
.block { padding: 72px 0; }
.block-tint { background: var(--tint); }
.block-ink { background: var(--indigo-deep); color: #e8eaf5; }
.block-ink h2 { color: var(--marigold); }

.two { display: grid; grid-template-columns: 220px 1fr; gap: 24px 48px; }
.two > div, .two > ul, .two > article, .two > address { max-width: 40em; }

h2 { font: 400 2.1rem/1.2 var(--head); color: var(--indigo); margin: 0; }
h3 { font: 600 1.4rem/1.35 var(--body); margin: 4px 0 8px; }
p { margin: 0 0 1em; }
.small { font-size: 1rem; color: var(--muted); }

.facts { margin: 28px 0; border-top: 2px solid var(--indigo); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #d6d9e6; flex-wrap: wrap; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

.aims { margin: 0; padding: 0; list-style: none; }
.aims li { position: relative; padding: 0 0 18px 30px; }
.aims li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 12px; background: var(--marigold); transform: rotate(45deg);
}

.news time { color: var(--muted); font-size: 1rem; }

address { font-style: normal; }
address p { margin-bottom: 1.2em; }

.foot { background: var(--indigo-deep); color: #aab1d6; font-size: .95rem; padding: 22px 0; border-top: 4px solid var(--marigold); }
.foot p { margin: 0; }

@media (max-width: 760px) {
  .hero { padding-top: 48px; }
  .two { grid-template-columns: 1fr; }
  .block { padding: 52px 0; }
  .top nav { gap: 2px 14px; padding-bottom: 10px; }
}