/* ==========================================================================
   Kewal Singh Dhillon — responsive behaviour
   Ordered large → small. Loaded after style.css.
   ========================================================================== */

/* --- Very large screens ------------------------------------------------- */
@media (min-width:1600px){
  :root{ --maxw:1360px; --gutter:40px; }
}

/* --- 1280px ------------------------------------------------------------- */
@media (max-width:1280px){
  :root{ --gutter:28px; }
  .nav{ gap:18px; }
  .nav a{ font-size:.7rem; letter-spacing:.1em; }
}

/* --- 1120px: mobile navigation takes over ------------------------------- */
@media (max-width:1120px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; top:0; right:0; bottom:0; z-index:96;
    width:min(360px, 86vw);
    background:var(--forest);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:calc(var(--header-h) + 26px) 30px 40px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:-24px 0 60px -30px rgba(0,0,0,.6);
  }
  body.nav-open .nav{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav a{
    font-family:var(--serif); font-size:1.32rem; font-weight:400;
    letter-spacing:-.005em; text-transform:none; color:#DCD5C6;
    padding:17px 0; border-bottom:1px solid rgba(244,238,225,.13);
    min-height:56px; display:flex; align-items:center;
  }
  .nav a{ opacity:0; transform:translateY(-7px); transition:opacity .34s ease, transform .34s cubic-bezier(.22,1,.36,1), color .25s ease; }
  body.nav-open .nav a{ opacity:1; transform:none; }
  body.nav-open .nav a:nth-child(1){ transition-delay:.05s; }
  body.nav-open .nav a:nth-child(2){ transition-delay:.08s; }
  body.nav-open .nav a:nth-child(3){ transition-delay:.11s; }
  body.nav-open .nav a:nth-child(4){ transition-delay:.14s; }
  body.nav-open .nav a:nth-child(5){ transition-delay:.17s; }
  body.nav-open .nav a:nth-child(6){ transition-delay:.20s; }
  body.nav-open .nav a:nth-child(7){ transition-delay:.23s; }
  body.nav-open .nav a:nth-child(8){ transition-delay:.26s; }
  .nav a::after{ display:none; }
  .nav a:hover{ color:#FBF7EE; }
  .nav a[aria-current="page"]{ color:var(--gold-lt); }
  .nav a[aria-current="page"]::before{
    content:""; width:6px; height:6px; background:var(--terracotta);
    margin-right:12px; flex:none; display:block;
  }
  .nav-toggle{ order:3; }
}

/* --- 1080px ------------------------------------------------------------- */
@media (max-width:1080px){
  .stagger .cell,
  .stagger .cell--wide{ grid-column:span 6; }
  .stagger .cell--offset,
  .stagger .cell--offset2{ margin-top:0; }
  .cta-split{ grid-template-columns:1fr; }
}

/* --- 980px -------------------------------------------------------------- */
@media (max-width:980px){
  .opening-grid{ grid-template-columns:1fr; gap:38px; }
  .opening-figure{ order:-1; max-width:560px; }
  .feature-grid{ grid-template-columns:1fr; }
  .era-figure,
  .era-figure--flip{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

/* --- 900px -------------------------------------------------------------- */
@media (max-width:900px){
  body{ font-size:16.5px; }
  .editorial{ grid-template-columns:1fr; gap:32px; }
  .editorial-aside .stick{ position:static; }
  .chapter{ grid-template-columns:1fr; gap:14px; }
  .chapter-label .stick{ position:static; }
  .chapter-label{ display:flex; align-items:baseline; gap:14px; }
  .chapter-label .n{ margin-bottom:0; font-size:1.5rem; }
  .dossier-head{ grid-template-columns:1fr; gap:14px; }
  .dossier-head .ref{ display:flex; align-items:baseline; gap:12px; }
  .dossier-head .ref b{ margin-bottom:0; font-size:1.5rem; }
  .page-head-grid{ grid-template-columns:1fr; align-items:start; gap:32px; }
  .page-head-side{ border-left:0; border-top:1px solid var(--forest-line); padding-left:0; padding-top:26px; }
  .page-head-side dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px 26px; }
  .page-head-side dt{ margin-top:0; }
  .contact-panel{ grid-template-columns:1fr; }
}

/* --- 820px: timeline becomes single column ------------------------------ */
@media (max-width:820px){
  .tl::before{ left:7px; }
  .tl-item,
  .tl-item:nth-child(even){ grid-template-columns:1fr; gap:0; padding-left:34px; }
  .tl-item .tl-body,
  .tl-item:nth-child(even) .tl-body{
    grid-column:1; text-align:left; padding-left:0; padding-right:0;
  }
  .tl-item .tl-void{ display:none; }
  .tl-item::after,
  .tl-item:nth-child(even)::after{ left:7px; transform:translateX(-50%); top:calc(clamp(16px,1.9vw,24px) + 10px); }
  .tl-body .caption,
  .tl-item:nth-child(even) .tl-body .caption{
    border-right:0; border-left:2px solid var(--gold); padding-right:0; padding-left:14px;
  }
}

/* --- 760px -------------------------------------------------------------- */
@media (max-width:760px){
  :root{ --gutter:22px; --header-h:66px; }
  .stagger .cell,
  .stagger .cell--wide{ grid-column:span 12; }
  .stage{ grid-template-columns:1fr; gap:8px; padding:24px 0; }
  .stage .idx{ padding-top:0; }
  .stage .yr{ margin-bottom:4px; }
  .episode{ grid-template-columns:1fr; gap:10px; }
  .episode .when small{ display:inline; margin-top:0; margin-left:12px; }
  .ledger-row{ grid-template-columns:1fr; gap:6px; padding:18px 0; }
  .era-head .tag{ margin-left:0; width:100%; }
  .gal-group-head .meta{ margin-left:0; width:100%; }
  .pullquote{ margin:28px 0; padding-left:22px; }
}

/* --- 620px -------------------------------------------------------------- */
@media (max-width:620px){
  body{ font-size:16px; line-height:1.68; }
  .brand .name{ font-size:.97rem; }
  .brand .sub{ font-size:.53rem; letter-spacing:.18em; }
  .brand .mono{ width:34px; height:34px; font-size:.74rem; }
  .foot-top{ grid-template-columns:1fr; gap:34px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .gal-grid,
  .gal-grid--two{ grid-template-columns:1fr; }
  .matrix{ grid-template-columns:1fr; }
  .strata{ grid-template-columns:1fr; }
  .contact-main,
  .contact-side{ padding:28px 22px; }
  .opening-actions .btn,
  .cta-actions .btn{ flex:1 1 100%; justify-content:center; }
  .editorial-body .drop::first-letter{ font-size:3.4em; }
}

/* --- 480px -------------------------------------------------------------- */
@media (max-width:480px){
  :root{ --gutter:18px; }
  .d1{ font-size:clamp(2.05rem, 10vw, 2.7rem); }
  .d2{ font-size:clamp(1.7rem, 8vw, 2.2rem); }
  .feature-quote{ font-size:1.42rem; }
  .plate{ padding:10px; }
  .rubric{ font-size:.63rem; letter-spacing:.16em; gap:9px; }
  .rubric::before{ width:24px; }
  .opening-meta{ font-size:.6rem; letter-spacing:.15em; gap:8px 18px; }
  .nav{ width:min(320px, 90vw); padding-left:24px; padding-right:24px; }
  .nav a{ font-size:1.18rem; }
  .gate{ padding:18px; }
  .gate-panel{ padding:28px 22px; }
  .tl-item, .tl-item:nth-child(even){ padding-left:26px; }
}

/* --- 360px -------------------------------------------------------------- */
@media (max-width:360px){
  :root{ --gutter:15px; }
  body{ font-size:15.5px; }
  .brand .sub{ display:none; }
  .btn{ padding:13px 20px; font-size:.68rem; letter-spacing:.12em; }
  .contact-line .v{ font-size:1.06rem; }
}

/* --- Landscape phones --------------------------------------------------- */
@media (max-height:520px) and (orientation:landscape){
  .gate{ min-height:auto; padding-block:34px; }
  .nav{ padding-top:calc(var(--header-h) + 14px); }
}

/* --- Print -------------------------------------------------------------- */
@media print{
  .site-head, .nav, .nav-toggle, .nav-scrim, .site-foot, .cta-split, .skip{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .band, .page-head{ background:#fff !important; color:#000 !important; padding-block:18pt; }
  .page-head h1, .band--forest h2, .cta-split h2{ color:#000 !important; }
  .plate{ border:1px solid #999; break-inside:avoid; }
  a{ text-decoration:underline; }
  .rv{ opacity:1 !important; transform:none !important; }
}