/* srijanacharya.com — shared chrome */
html{scroll-behavior:smooth}
img{max-width:100%}
a:focus-visible,button:focus-visible{outline:1px solid #F5F5F5;outline-offset:3px}

/* YouTube embeds */
.yt iframe{display:block}

/* showreel modal */
.reel{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.96);display:flex;align-items:center;justify-content:center;padding:40px}
.reel[hidden]{display:none}
.reel-frame{width:min(1280px,100%);aspect-ratio:16/9}
.reel-frame iframe{width:100%;height:100%;border:0;display:block}
.reel-close{position:absolute;top:24px;right:30px;background:none;border:0;color:#F5F5F5;font:inherit;font-size:12px;line-height:20px;letter-spacing:.4px;text-transform:uppercase;cursor:pointer}

/* loader: shown only on first visit of a session (js adds .is-first) */
.loader{display:none}
body.is-first .loader{display:flex}

/* mobile */
@media (max-width:760px){
  nav[aria-label="Primary"]{padding:18px 20px !important}
  nav[aria-label="Primary"] img{height:34px !important}
  h1{font-size:40px !important;line-height:1.05 !important;letter-spacing:-1.2px !important}
  .two,.g{padding-left:20px !important;padding-right:20px !important}
}

/* info page on phones: undo the fixed block offsets */
@media (max-width:760px){
  .blk{left:0 !important;width:100% !important}
  .portrait{position:static !important;width:220px !important;margin-bottom:32px}
  .big{font-size:34px !important;line-height:36px !important;letter-spacing:-1px !important}
  .about p{font-size:18px !important;line-height:26px !important}
}


/* ===================== phones (≤760px): shared layer for every page ===================== */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  /* inner-page header: Back + wordmark + Info; the "Stills" word moves into the body pages' flow */
  nav[aria-label="Primary"]{padding:16px 20px !important}
  nav[aria-label="Primary"] > span{width:auto !important;gap:18px !important}
  nav[aria-label="Primary"] > a:last-child{width:auto !important}
  nav[aria-label="Primary"] img{height:32px !important}
  /* ticks / bars: let the mono rows wrap instead of pushing the page wide */
  .tick,.bar,.folio{flex-wrap:wrap;gap:4px 16px;padding-left:20px !important;padding-right:20px !important}
  .tc.red{display:none}
  /* grids collapse to one column with a calmer gutter */
  .g{padding-left:20px !important;padding-right:20px !important;gap:12px !important;grid-auto-rows:auto !important}
  .g>*{grid-column:1 / -1 !important;grid-row:auto !important;margin-top:0 !important;box-shadow:none !important}
  .two{grid-template-columns:1fr !important;gap:20px !important;padding-left:20px !important;padding-right:20px !important}
  /* pages that use absolute offsets for an editorial feel */
  .blk{left:0 !important;width:100% !important;margin-bottom:44px !important}
  .portrait{position:static !important;width:200px !important;margin:0 0 28px}
  .big{font-size:34px !important;line-height:36px !important;letter-spacing:-1px !important}
  h1,.h1{font-size:40px !important;line-height:1.02 !important;letter-spacing:-1.4px !important}
  .about p,.lede,p[style*="font-size: 24px"]{font-size:18px !important;line-height:26px !important;letter-spacing:-.2px !important}
  /* readable metadata: nothing under 11px on a phone */
  .s,.mono,.tc,.lbl,.role,.l,figcaption,.folio{font-size:11px !important;line-height:17px !important;letter-spacing:.08em !important}
  /* frames keep their shape but never force a tall column of air */
  .im[style*="aspect-ratio: 4/5"],.im[style*="aspect-ratio: 3/4"]{aspect-ratio:4/5 !important}
  .im[style*="aspect-ratio: 21/9"]{aspect-ratio:16/9 !important}
}