/* Dr. Archana Krishna — "The Prospectus".
   Ice-white paper, slate ink, institutional blue, silver hairlines.
   Old-book serif throughout; small-caps labels; thin double rules.
   System stacks only — this site works offline. Layered cascade. */
@layer base, components;

@layer base {
  :root {
    color-scheme: light dark;
    --paper: #f2f4f6;
    --ink: #2f3a44;
    --blue: #3a5a7a;
    --line: #c8ccd2;
    --ink-soft: color-mix(in srgb, var(--ink) 64%, transparent);
    --wash: color-mix(in srgb, var(--ink) 5%, var(--paper));
  }
  [data-theme="dark"] {
    color-scheme: dark;
    --paper: #171c22;
    --ink: #dde3e9;
    --blue: #9dbfd9;
    --line: #3b4550;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #171c22;
      --ink: #dde3e9;
      --blue: #9dbfd9;
      --line: #3b4550;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 17px/1.7 Georgia, "Times New Roman", Times, serif;
  }
  h1, h2 {
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 12px;
  }
  p { margin: 0 0 12px; }
  a { color: var(--blue); }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  section { scroll-margin-top: 92px; }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: -999px;
  }
  .skip-link:focus {
    inset-inline-start: 12px;
    inset-block-start: 8px;
    background: var(--paper);
    padding: 6px 10px;
  }

  /* ---- masthead: institution line + prospectus contents ---- */
  .institute-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 18px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(6px);
    border-block-end: 3px double var(--line);
  }
  .institute-mark {
    margin: 0;
    font-size: 0.95rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    display: none;
  }
  @media (min-width: 860px) {
    .institute-mark { display: block; }
  }
  .contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
  }
  .contents-link {
    font-size: 0.98rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.09em;
    text-decoration: none;
    color: var(--ink-soft);
    padding: 4px 1px;
    border-block-end: 2px solid transparent;
  }
  .contents-link:hover { color: var(--ink); }
  .contents-link[aria-current="true"] {
    color: var(--ink);
    border-block-end-color: var(--blue);
  }
  .contents-numeral {
    color: var(--blue);
    font-style: italic;
    margin-inline-end: 5px;
  }
  .theme-toggle {
    margin-inline-start: 10px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    padding: 7px;
    cursor: pointer;
  }
  .theme-toggle .ic-moon { display: none; }
  [data-theme="dark"] .theme-toggle .ic-sun { display: none; }
  [data-theme="dark"] .theme-toggle .ic-moon { display: block; }

  /* ---- the prospectus body ---- */
  .prospectus-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 90px;
  }

  /* front matter (the cover page) */
  .front-matter {
    text-align: center;
    padding: 54px 0 46px;
  }
  .front-edition {
    margin: 0 0 20px;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.28em;
    color: var(--blue);
  }
  .front-crest {
    margin: 0 auto 20px;
    width: min(216px, 62%);
  }
  .front-crest svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .crest-line { stroke: var(--ink); stroke-width: 2; }
  .crest-flame { stroke: var(--blue); }
  .crest-sprig, .crest-leaf { stroke: var(--blue); stroke-width: 1.5; }
  .crest-spine { stroke-width: 1.5; }
  .crest-page { stroke: var(--line); stroke-width: 1.5; }
  .crest-caption {
    margin-block-start: 10px;
    font-size: 0.8rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
  }
  .front-matter h1 {
    font-size: clamp(2rem, 5.6vw, 3.2rem);
    letter-spacing: 0.03em;
    margin: 0 0 12px;
  }
  .front-degrees {
    margin: 0 auto 18px;
    font-size: 1.08rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
  }
  .front-standfirst {
    max-width: 58ch;
    margin: 0 auto 14px;
    font-size: 1.06rem;
  }
  .front-note {
    max-width: 60ch;
    margin: 0 auto;
    font-size: 0.95rem;
    color: var(--ink-soft);
  }

  /* ---- ledger sections: departments, terms, principal, office ---- */
  .department, .terms-block, .principal-record, .office-block {
    padding: 40px 0 26px;
    border-block-start: 1px solid var(--line);
  }
  .department-title, .block-title {
    margin: 0 0 14px;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    padding-block-end: 10px;
    border-block-end: 3px double var(--line);
  }
  .department-numeral {
    display: block;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-style: italic;
    font-variant-caps: normal;
    letter-spacing: 0.02em;
    color: var(--blue);
    margin-block-end: 4px;
  }
  .department-opening, .block-opening { font-size: 1.04rem; }
  .department-opening::first-letter, .block-opening::first-letter {
    float: left;
    font-size: 3.1em;
    line-height: 0.82;
    padding-inline-end: 0.09em;
    color: var(--blue);
  }

  .department-register { margin: 16px 0 0; }
  .department-register dt {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.09em;
    color: var(--blue);
  }
  .department-register dd {
    margin: 2px 0 14px;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--line);
    color: var(--ink-soft);
  }

  /* terms of admission */
  .terms-fee { font-size: 1.06rem; }
  .terms-note, .office-note, .about-sources {
    font-size: 0.9rem;
    color: var(--ink-soft);
  }
  .sample-badge {
    display: inline-block;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.14em;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 0 8px 1px;
    margin-inline-end: 8px;
  }

  /* the principal */
  .portrait-slot {
    margin: 8px 0 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 200px;
    padding: 22px 12px;
    border: 3px double var(--line);
    text-align: center;
  }
  .monogram {
    font-size: 2.7rem;
    letter-spacing: 0.14em;
    color: var(--blue);
  }
  .portrait-note {
    font-size: 0.78rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
  }

  /* the office */
  .office-address {
    font-style: normal;
    line-height: 1.8;
    margin: 4px 0 0;
  }
  .office-form {
    display: grid;
    gap: 8px;
    align-content: start;
    max-width: 470px;
  }
  .form-label {
    font-size: 0.98rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.09em;
    margin-block-start: 8px;
  }
  .form-optional { color: var(--ink-soft); }
  .form-field {
    font: inherit;
    color: inherit;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--wash);
  }
  .form-field.invalid { border-color: var(--blue); }
  .form-error {
    min-height: 1.3em;
    margin: 0;
    font-size: 0.92rem;
    font-style: italic;
  }
  .form-submit {
    justify-self: start;
    font: inherit;
    font-size: 1.02rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    padding: 10px 28px;
    border: 1px solid var(--blue);
    border-radius: 0;
    background: var(--blue);
    color: var(--paper);
    cursor: pointer;
  }
  .form-submit:hover { filter: brightness(1.1); }

  /* two-column ledger on wide screens — set on section content,
     never on wrapper elements */
  @media (min-width: 50rem) {
    .department, .terms-block, .principal-record, .office-block {
      display: grid;
      grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
      column-gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
    }
    .department > .department-title,
    .terms-block > .block-title,
    .principal-record > .block-title,
    .office-block > .block-title {
      grid-column: 1;
      grid-row: 1;
    }
    .department > :not(.department-title),
    .terms-block > :not(.block-title),
    .principal-record > :not(.block-title),
    .office-block > :not(.block-title) {
      grid-column: 2;
    }
    .principal-record > .portrait-slot { grid-row: 2 / span 3; }
    .office-block > .office-address { grid-row: 2 / span 2; }
    .office-block > .office-form { grid-row: 1 / span 3; }
    .office-block > .office-note { grid-column: 1 / -1; }
  }

  /* ---- colophon ---- */
  .prospectus-foot {
    border-block-start: 3px double var(--line);
    padding: 26px 18px 48px;
    text-align: center;
  }
  .foot-imprint {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
  }
  .foot-note {
    margin: 0 auto;
    font-size: 0.82rem;
    color: var(--ink-soft);
    max-width: 66ch;
  }
}