@charset "UTF-8";
/* ==========================================================================
   suryasen.com — Responsive layer
   Tested composition targets: 320 · 375 · 390 · 414 · 430 · 768 · 1024
   · 1280 · 1440 · 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE FIRST CORRECTIONS  (< 900px)
   The rail, split panels and multi-column grids collapse to a single column.
   -------------------------------------------------------------------------- */
@media (max-width:899.98px){
  /* .two-col only becomes a grid at 900px; stacked, its children need rhythm. */
  .two-col > * + *{margin-top:clamp(1.35rem,4.5vw,2.25rem)}

  .ed{grid-template-columns:minmax(0,1fr)}
  .ed__rail{display:none}

  /* Horizontal chapter tag replaces the vertical rail on small screens */
  .ed__body > .rail-inline{
    display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
    font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;
    color:var(--fg-faint);
  }
  .ed__body > .rail-inline b{color:var(--accent);font-weight:500}

  .hero__dates{display:none}
  .hero__portrait{max-width:min(48vw,196px);justify-self:start}
  .hero__grid{gap:1.35rem}
  .hero__blurb{font-size:1.02rem;line-height:1.5}
  .hero__foot{margin-top:1.5rem;padding-top:1.1rem}
  .hero{padding-bottom:1.5rem}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .scrollcue{display:none}

  .masthead__meta{gap:.45rem 1.1rem}

  .person{grid-template-columns:minmax(0,1fr)}
  .person__mono{width:76px}

  .lb__foot{flex-direction:column;align-items:flex-start}
  .lb__nav{width:100%;justify-content:space-between}

  .menu__desc{display:none}
  .menu__list{align-self:start}
}

@media (max-width:767.98px){
  .contact-grid > * + *{margin-top:clamp(1rem,3vw,1.5rem)}
}

@media (max-width:479.98px){
  :root{--nav-h:64px}
  .hero__title{letter-spacing:-.035em}
  .hero__blurb{border-left:0;padding-left:0}
  .btn{width:100%;justify-content:space-between}
  .hero__ctas{width:100%}
  .btnrow{width:100%}
  .btnrow .btn{width:100%}
  .plate__tag{top:-.5rem;left:-.5rem;padding:.4rem .55rem}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .footer__legal{flex-direction:column;align-items:flex-start;gap:.35rem}
  .lb__bar{padding-inline:1.25rem}
  .gal__btn img{max-height:52vh}
  .contact-card__v{font-size:1.2rem}
}

/* Very small (320px) safety */
@media (max-width:359.98px){
  :root{--pad:1rem}
  .hero__title{font-size:2.6rem}
  .menu__name{font-size:1.4rem}
  .person__mono{width:66px}
  .person__mono span{font-size:1.6rem}
  .social a,.social span{width:42px;height:42px}
}

/* --------------------------------------------------------------------------
   ≥ 560px
   -------------------------------------------------------------------------- */
@media (min-width:560px){
  .fact{grid-template-columns:minmax(140px,.34fr) minmax(0,1fr);gap:1.5rem;align-items:baseline}
  .ledger__row{grid-template-columns:minmax(88px,.16fr) minmax(0,1fr)}
  .roster__row{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto}
  .seq__item{grid-template-columns:minmax(0,1fr)}
  .objectives{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person__facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.75rem}
}

/* --------------------------------------------------------------------------
   ≥ 768px  (tablet portrait)
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  .hero__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);align-items:end}
  .hero__portrait{max-width:300px}

  .masthead__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.75fr)}

  .seq__item{grid-template-columns:minmax(120px,.2fr) minmax(0,1fr);gap:.4rem 2rem;align-items:baseline}
  .seq__item::before{grid-row:1;grid-column:1}
  .seq__time{grid-row:2;grid-column:1}
  .seq__title{grid-column:2;grid-row:1}
  .seq__body{grid-column:2;grid-row:2}

  .gal{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}

  .footer__top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}

  .contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.75rem)}

  .tl-item__head{flex-wrap:nowrap}
}

/* --------------------------------------------------------------------------
   ≥ 900px  (small laptop / tablet landscape)
   -------------------------------------------------------------------------- */
@media (min-width:900px){
  .rail-inline{display:none}

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

  .person{grid-template-columns:auto minmax(0,1fr);align-items:start}

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

  .two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3.5vw,3.5rem)}
  .two-col--wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .two-col--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .two-col--sticky > .sticky{position:sticky;top:calc(var(--nav-h) + 2.5rem);align-self:start}

  .tl-item__media{max-width:340px}
}

/* --------------------------------------------------------------------------
   ≥ 1024px
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal__item--wide{grid-column:span 2}
  .gal{align-items:start}
  .objectives{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer__top{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.1fr)}
  .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__portrait{max-width:340px}
}

/* --------------------------------------------------------------------------
   NAVIGATION BREAKPOINT — 1180px
   Below this the compact link row is replaced by the full-screen index.
   -------------------------------------------------------------------------- */
@media (max-width:1179.98px){
  .nav__links{display:none}
  .nav__toggle{display:inline-flex}
}
@media (min-width:1180px){
  .nav__toggle{display:none}
  .menu{display:none}
}

/* --------------------------------------------------------------------------
   ≥ 1440px  (large desktop)
   -------------------------------------------------------------------------- */
@media (min-width:1440px){
  :root{--measure:72ch}
  .hero__grid{grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr)}
  .hero__portrait{max-width:380px}
  .two-col{gap:4.5rem}
}

/* ≥ 1920px — keep the measure honest on very wide screens */
@media (min-width:1920px){
  :root{--maxw:1560px;--t-hero:clamp(3rem,10vw,11rem)}
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print{
  .nav,.menu,.totop,.footer__nav,.social,.scrollcue,.strip,.lb{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  body::after{display:none}
  .hero,.masthead,.band,.footer,.split__panel--ink,.split__panel--copper,.on-ink,.person--lead{
    background:#fff!important;color:#000!important
  }
  a{text-decoration:underline}
  .section{padding-block:1.25rem}
  .plate img{max-height:9cm}
}

/* Timeline page: a sticky filter column beside the chronology on wide screens */
@media (min-width:900px){
  .tl-layout{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(2rem,4vw,4rem)}
}

/* Small screens: diagrams keep their type size and pan horizontally */
@media (max-width:767.98px){
  .diagram__stage svg{width:640px;max-width:none}
  .diagram__hint{display:block}
}

/* Hero date rail appears only where the gutter can hold it */
@media (min-width:1180px){
  .hero__dates{display:flex}
}