/* ==========================================================================
   ALI WAKRIM — responsive.css
   Layouts are recomposed per range, not merely scaled down.
   Ranges: 1920 / 1440 / 1280 / 1024 / 820 / 768 / 480 / 414 / 390 / 375 / 320
   ========================================================================== */

/* ==========================================================================
   LARGE DESKTOP — 1600px and up
   Keep reading measures civilised as the shell widens.
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --shell: 1520px;
    --gutter: 5rem;
    --measure: 36rem;
    --measure-wide: 46rem;
  }
  .hero__standfirst { max-width: 40ch; }
}

@media (min-width: 1900px) {
  :root { --shell: 1600px; }
  body { font-size: 1.0625rem; }
}

/* ==========================================================================
   DESKTOP — up to 1280px
   ========================================================================== */
@media (max-width: 1280px) {
  :root { --gutter: clamp(1.25rem, 3.6vw, 3rem); }

  .hero__title .line--indent { padding-left: clamp(0rem, 6vw, 5rem); }
}

/* ==========================================================================
   SMALL DESKTOP / LARGE TABLET — up to 1120px
   The 12-column index grid folds to a 6-column grid.
   ========================================================================== */
@media (max-width: 1120px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* `grid-column-end: span N` is used throughout rather than the
     `grid-column` shorthand, so that a `.start-*` class can set the start
     line without silently resetting the span to a single column. */
  .c-1 { grid-column-end: span 2; }
  .c-2 { grid-column-end: span 2; }
  .c-3 { grid-column-end: span 3; }
  .c-4 { grid-column-end: span 3; }
  .c-5 { grid-column-end: span 6; }
  .c-6 { grid-column-end: span 6; }
  .c-7 { grid-column-end: span 6; }
  .c-8 { grid-column-end: span 6; }
  .c-9 { grid-column-end: span 6; }
  .c-10 { grid-column-end: span 6; }

  .start-2, .start-3, .start-4,
  .start-5, .start-6, .start-7, .start-8 { grid-column-start: auto; }

  /* The sticky rail becomes a static header above its content. */
  .rail { position: static; top: auto; }
  .rail__title { display: inline; }

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

/* ==========================================================================
   TABLET — up to 1024px  (iPad landscape / small laptops)
   Navigation collapses into the drawer here so links never crowd.
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --nav-h: 62px; }

  .nav-toggle { display: inline-flex; }

  .masthead__inner { position: relative; }

  .nav {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(1.5rem, 5vw, 3rem) var(--gutter)
             calc(3rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--rule);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility var(--dur-fast) var(--ease);
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav__link {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ink);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
  }
  .nav__link::after { display: none; }
  .nav__link::before {
    content: attr(data-idx);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    color: var(--ember);
    flex: none;
  }
  .nav__link[aria-current="page"] { color: var(--ember); }

  .nav .lock-btn {
    display: inline-flex;
    margin-top: 1.75rem;
    align-self: flex-start;
  }

  /* Lock button in the bar is moved into the drawer on small screens. */
  .masthead__actions .lock-btn { display: none; }

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

/* ==========================================================================
   TABLET PORTRAIT — up to 900px
   ========================================================================== */
@media (max-width: 900px) {
  .principle { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

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

  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure-cell:nth-child(2n) { border-right: 0; }
  .figure-cell { padding-right: clamp(0.75rem, 2vw, 1.25rem); }

  .footer-grid { row-gap: 2.25rem; }
}

/* ==========================================================================
   820px — iPad Air portrait
   ========================================================================== */
@media (max-width: 820px) {
  :root { --section-y: clamp(3.25rem, 7vw, 5.5rem); }

  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c-1, .c-2, .c-3, .c-4 { grid-column: auto / span 2; }
  .c-5, .c-6, .c-7, .c-8, .c-9, .c-10 { grid-column: 1 / -1; }

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

/* ==========================================================================
   768px — tablet portrait / large phones landscape
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --gutter: clamp(1.125rem, 4.5vw, 2rem);
    --measure: 100%;
    --measure-wide: 100%;
  }

  .hero__title .line--indent { padding-left: 0; }
  .hero__standfirst { max-width: 100%; }

  .statement, .statement--wide { max-width: 24ch; }

  .ledger__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.4rem;
    padding: 1rem 0;
  }
  .ledger__note { text-align: left; white-space: normal; }

  /* Keep the two section labels on one line rather than stacking them,
     where stacking reads as a two-line heading rather than a pair. */
  .sec-head { flex-wrap: wrap; gap: 0.35rem 1rem; }

  .era__num { font-size: clamp(2.75rem, 12vw, 4rem); }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__tag { max-width: 46ch; }
  .footer__social-note { max-width: 46ch; }
}

/* ==========================================================================
   640px — phones
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --section-y: clamp(2.75rem, 9vw, 4rem);
    --nav-h: 58px;
  }

  body { line-height: 1.62; }

  .grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .c-1, .c-2, .c-3, .c-4, .c-5,
  .c-6, .c-7, .c-8, .c-9, .c-10, .c-12 { grid-column: 1 / -1; }

  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure-cell { border-right: 0; padding-right: 0; }

  .chrono__row { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
  .chrono__year { padding-top: 0; }

  .marks__item { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; }

  .next-read { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .next-read__arrow { padding-bottom: 0; }

  .opener__kicker { flex-wrap: wrap; gap: 0.5rem; }
  .opener__kicker span:not(:last-child)::after { margin-left: 0.5rem; }

  .plate { padding: 0.4rem; }
  .plate__caption { flex-direction: column; gap: 0.3rem; }

  .dossier__panel + .dossier__panel { border-top: 0; }

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

  .contact-line__value { font-size: clamp(1.2rem, 6.5vw, 1.7rem); }

  .btn { width: 100%; justify-content: space-between; }
  .btn + .btn { margin-top: 0.75rem; }

  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   480px
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --t-mega: clamp(2.8rem, 15.5vw, 4.1rem);
    --t-display: clamp(2.1rem, 10.5vw, 2.9rem);
  }

  .hero__title { line-height: 0.92; letter-spacing: -0.03em; }

  .statement { font-size: clamp(1.45rem, 6.4vw, 1.9rem); max-width: 100%; }

  .era__num { font-size: 2.75rem; }

  .social__item { width: 42px; height: 42px; }

  table.data { min-width: 30rem; }
}

/* ==========================================================================
   414px — iPhone Plus / Pro Max class
   ========================================================================== */
@media (max-width: 414px) {
  :root { --gutter: 1.125rem; }

  .wordmark__name { font-size: 1.05rem; }
  .nav__link { font-size: 1.5rem; }
}

/* ==========================================================================
   390px — iPhone 12–15 class
   ========================================================================== */
@media (max-width: 390px) {
  :root {
    --t-mega: clamp(2.6rem, 16vw, 3.9rem);
    --t-h2: clamp(1.5rem, 7vw, 1.85rem);
  }

  .eyebrow { letter-spacing: 0.16em; }
  .eyebrow::before { width: 1.15rem; }

  .figure-cell__num { font-size: 2.1rem; }
}

/* ==========================================================================
   375px — iPhone SE / mini class
   ========================================================================== */
@media (max-width: 375px) {
  :root { --gutter: 1rem; }

  .nav__link { font-size: 1.35rem; padding: 0.65rem 0; }
  .lock-btn, .nav-toggle { padding: 0.5rem 0.65rem; letter-spacing: 0.1em; }
  .gate__input { letter-spacing: 0.24em; font-size: 1rem; }
}

/* ==========================================================================
   320px — smallest supported viewport
   ========================================================================== */
@media (max-width: 340px) {
  :root {
    --gutter: 0.875rem;
    --t-mega: 2.5rem;
    --t-meta: 0.6875rem;
  }

  .wordmark__name { font-size: 0.95rem; }
  .nav-toggle span.nav-toggle__word { display: none; }
  .btn { padding: 0.85rem 1rem; letter-spacing: 0.1em; }
  .contact-line__value { font-size: 1.1rem; }
  table.data { min-width: 26rem; }
}

/* ==========================================================================
   SHORT VIEWPORTS — landscape phones
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .gate { min-height: auto; padding-block: 3rem; }
  .nav { padding-top: 1.25rem; padding-bottom: 2rem; }
  .nav__link { font-size: 1.15rem; padding: 0.5rem 0; }
}

/* ==========================================================================
   POINTER / TOUCH REFINEMENTS
   Remove hover-only movement on touch devices where it cannot be undone.
   ========================================================================== */
@media (hover: none) {
  .contact-line:hover { padding-left: 0; }
  .hero__index-item:hover { padding-left: 0; }
  .next-read:hover .next-read__arrow { transform: none; }
  .wordmark:hover .wordmark__dot { transform: translateY(-0.25em); }
}

/* iOS Safari: keep the sticky masthead clear of the notch in landscape. */
@supports (padding: max(0px)) {
  .masthead .shell {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .site-footer { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   HIGH CONTRAST / FORCED COLOURS
   ========================================================================== */
@media (forced-colors: active) {
  .plate::before, .plate::after { display: none; }
  .btn, .social__item, .lock-btn, .nav-toggle { border: 1px solid currentColor; }
  .progress { display: none; }
}