/* ==========================================================================
   Responsive layer
   - Below 1240px: navigation collapses into the "Index" panel
   - 640px / 900px / 1100px: progressive multi-column compositions
   ========================================================================== */

/* ---------- Navigation: tablet & mobile index panel ---------- */

@media (max-width: 1239.98px) {
  .index-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-top, 6.75rem);
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--midnight);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .primary-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s;
  }

  .primary-nav__list {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule-light);
  }

  .primary-nav__list a {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule-light);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
    font-weight: 400;
    color: var(--ivory);
    white-space: normal;
  }

  .primary-nav__list a:hover,
  .primary-nav__list a[aria-current="page"] {
    color: var(--terracotta-light);
  }

  .primary-nav__list a::after {
    display: none;
  }

  .primary-nav__num {
    flex: 0 0 2rem;
    margin: 0;
    color: var(--sage);
  }

  .primary-nav__list a[aria-current="page"] .primary-nav__num {
    color: var(--terracotta-light);
  }

  .primary-nav :focus-visible {
    outline-color: var(--sage);
  }

  .primary-nav__footer {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.92rem;
    color: rgba(245, 241, 232, 0.72);
  }

  .primary-nav__footer p {
    margin: 0 0 0.25rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sage);
  }

  .primary-nav__footer a {
    color: var(--ivory);
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .brand__role {
    display: none;
  }

  .brand__name {
    font-size: 1rem;
  }

  .brand__mark {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.85rem;
  }

  .masthead__bar {
    min-height: 4rem;
    gap: 0.75rem;
  }

  .index-toggle {
    padding-inline: 0.75rem;
  }

  .masthead__rail a {
    display: none;
  }

  .viewer__caption {
    padding-right: 0;
  }

  .viewer__controls {
    position: static;
    justify-content: flex-end;
    margin-top: 0.75rem;
  }
}

@media (max-width: 359.98px) {
  .brand__name {
    font-size: 0.92rem;
  }

  .index-toggle [data-nav-label] {
    display: none;
  }

  .index-toggle::before {
    content: "";
  }
}

/* ---------- ≥ 640px ---------- */

@media (min-width: 640px) {
  .hero-home__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-home__facts div {
    padding-right: 1rem;
    border-bottom: 0;
  }

  .hero-home__facts div + div {
    padding-left: 1rem;
    border-left: 1px solid var(--rule);
  }

  .fact-file div {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.5rem;
  }

  .era__events li {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.25rem;
  }

  .role {
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 2rem;
  }

  .role__desc {
    grid-column: 2;
  }

  .case__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .tiers__list,
  .contact-guide__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .enquiry__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .milestones__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .milestone:nth-child(even) {
    transform: translateY(clamp(2rem, 5vw, 4rem));
  }

  .js .milestone[data-reveal]:nth-child(even) {
    transform: translateY(calc(clamp(2rem, 5vw, 4rem) + 18px));
  }

  .js .milestone[data-reveal].is-visible:nth-child(even) {
    transform: translateY(clamp(2rem, 5vw, 4rem));
  }

  .milestones__wall {
    padding-bottom: clamp(2rem, 5vw, 4rem);
  }

  .culture__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .culture__narrow {
    margin-top: clamp(3rem, 8vw, 7rem);
  }

  .perspectives__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

/* ---------- ≥ 900px ---------- */

@media (min-width: 900px) {
  .colophon__top {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 2.5rem clamp(2rem, 4vw, 4rem);
  }

  .ledger__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-home__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }

  .hero-home__portrait {
    justify-self: end;
  }

  .intro__grid {
    grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 2rem clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .intro__label {
    padding-top: 0.6rem;
  }

  .intro__figure {
    margin-top: 6rem;
  }

  .spheres__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sphere {
    padding: 2.25rem 2rem 2.25rem 0;
    border-bottom: 0;
  }

  .sphere + .sphere {
    padding-left: 2rem;
    border-left: 1px solid var(--rule);
  }

  .site-index__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .site-index__intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }

  .site-index__list a:hover {
    padding-inline: 1rem;
  }

  .closing__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
  }

  .closing__side {
    border-top: 0;
    border-left: 1px solid var(--rule-light);
    padding: 0 0 0 clamp(2rem, 4vw, 3.5rem);
  }

  /* About */
  .bio-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .bio-hero__figure {
    justify-self: end;
  }

  .bio__grid {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .chapter-nav {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
  }

  .chapter-nav ol {
    flex-direction: column;
    gap: 0;
    counter-reset: chap;
  }

  .chapter-nav li {
    counter-increment: chap;
  }

  .chapter-nav a {
    display: flex;
    gap: 0.6rem;
    padding: 0.55rem 0 0.55rem 0.9rem;
    border: 0;
    border-left: 2px solid var(--rule);
    background: none;
  }

  .chapter-nav a::before {
    content: counter(chap, decimal-leading-zero);
    font-family: var(--mono);
    font-size: 0.72rem;
    padding-top: 0.15rem;
    color: var(--muted);
  }

  .chapter-nav a:hover,
  .chapter-nav a.is-active {
    background: none;
    border-left-color: var(--terracotta);
  }

  .chapter__split {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    gap: 2.5rem;
    align-items: start;
  }

  .chapter__figure {
    margin-top: 0.5rem;
  }

  /* Career */
  .journey-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .journey-hero__figure {
    justify-self: end;
    width: 100%;
  }

  .era {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2.5rem;
    padding-left: 0;
    border-left: 0;
  }

  .era::before {
    left: 13.9rem;
  }

  .era::after {
    content: "";
    position: absolute;
    left: calc(13.9rem + 5px);
    top: 0.35rem;
    bottom: 0;
    width: 1px;
    background: var(--rule-strong);
  }

  .era:last-child::after {
    display: none;
  }

  .era__marker {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .era__roman {
    font-size: 3.5rem;
  }

  .era__body {
    padding-left: 2.5rem;
  }

  .transitions__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .transition {
    padding: 2.25rem 2rem 2.25rem 0;
    border-bottom: 0;
  }

  .transition + .transition {
    padding-left: 2rem;
    border-left: 1px solid var(--rule-light);
  }

  /* Education */
  .edu-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .philosophy__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .srmist__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  }

  .srmist__body,
  .campus-strip,
  .srmist__note {
    grid-column: 2;
  }

  .srmist__head {
    grid-row: span 3;
  }

  .case__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  }

  .case__tag {
    grid-column: 1 / -1;
  }

  .case__head {
    grid-column: 1;
    grid-row: 2;
  }

  .case__body {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .case__facts {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
  }

  /* Leadership */
  .civic-hero__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .roles__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .role {
    grid-template-columns: minmax(0, 1fr);
  }

  .role__desc {
    grid-column: auto;
  }

  .party__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }

  .party__figure {
    margin-top: 3.5rem;
  }

  .parliament__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }

  .parliament__figure {
    margin-top: 3.5rem;
  }

  .engagement__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
  }

  /* Achievements */
  .mile-hero__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .recognition__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
  }

  .recognition__figure {
    margin-top: 4rem;
  }

  /* Publications */
  .reading-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .reading-hero__figure {
    justify-self: end;
  }

  .catalogue__wrap {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .catalogue__nav {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
  }

  .catalogue__nav ol {
    flex-direction: column;
    gap: 0;
  }

  .catalogue__nav a {
    display: block;
    padding: 0.55rem 0 0.55rem 0.9rem;
    border: 0;
    border-left: 2px solid var(--rule);
  }

  .catalogue__nav a:hover,
  .catalogue__nav a.is-active {
    background: none;
    border-left-color: var(--terracotta);
  }

  /* Gallery */
  .gallery-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Contact */
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    min-height: calc(100vh - var(--header-h));
  }

  .contact__card {
    display: flex;
    justify-content: flex-end;
    padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    padding-right: clamp(2rem, 5vw, 4.5rem);
  }

  .contact__card-inner {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
    width: 100%;
  }

  .contact__form-col {
    padding-left: clamp(2rem, 5vw, 4.5rem);
    padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  }
}

/* ---------- ≥ 1100px ---------- */

@media (min-width: 1100px) {
  .ledger__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .viewer__grid {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 2.5rem;
    align-items: start;
  }

  .viewer__thumbs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 2px solid var(--midnight);
  }

  .viewer__thumb {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .viewer__frame {
    aspect-ratio: 16 / 10;
    max-height: calc(100vh - var(--header-h) - 9rem);
    min-height: 26rem;
  }

  .roles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .register__table,
  .elections__table {
    min-width: 0;
  }
}

@media (min-width: 1440px) {
  body {
    font-size: 1.075rem;
  }
}

/* Landscape phones: keep the hero portrait from filling the screen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-home__panel img {
    max-height: 80vh;
  }

  .primary-nav__list a {
    padding-block: 0.55rem;
    font-size: 1.2rem;
  }
}