/* Narrow-screen and phone refinements. Loaded after each page's inline styles. */

/* Tablet / narrow desktop: keep the inline nav on one line */
@media (min-width:761px) and (max-width:1020px){
  .top .wrap{flex-wrap:nowrap;gap:12px 20px}
  .nav{flex-wrap:nowrap;gap:6px 16px;font-size:14px;margin-left:auto}
  .brand{white-space:nowrap;font-size:22px}
  .top-cta{white-space:nowrap}
  .panels{height:560px}
  .tabs-media{min-height:420px}
  .hero-copy{gap:20px 32px}
}

@media (max-width:760px){
  html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr,68px) + 12px)}
  body{font-size:16.5px;line-height:1.6;-webkit-tap-highlight-color:transparent}
  a,button,summary{touch-action:manipulation}

  /* Rhythm: calmer vertical spacing, tighter headline scale */
  .sec{padding-block:72px}
  .sec-tight{padding-block:52px}
  .h-xl{font-size:clamp(40px,12vw,56px);line-height:1.02}
  .h-l{font-size:clamp(32px,9.2vw,44px);line-height:1.07}
  .h-m{font-size:clamp(26px,7.4vw,32px)}
  .lede{font-size:17.5px}
  .head-row{margin-bottom:26px;align-items:flex-start}
  .eyebrow{font-size:11.5px;letter-spacing:.18em}
  .btn{min-height:50px}
  .split .txt .btn,.gather-copy .btn{align-self:stretch;justify-content:center}

  /* Header: frosted bar, safe-area aware, refined menu sheet */
  .top{background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
  .top .wrap{padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
  .menu-btn{transition:background .3s ease,border-color .3s ease}
  .menu-open .menu-btn{background:var(--ink);color:var(--ground);border-color:var(--ink)}
  .nav{counter-reset:n;padding-top:8px;background:var(--ground)}
  .nav a{counter-increment:n;display:flex;align-items:baseline;gap:16px;font-size:clamp(30px,9vw,40px);padding-block:16px;
    opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),color .3s ease}
  .nav a::before{content:"0" counter(n);font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-faint);min-width:22px}
  .nav a[aria-current="page"]{font-style:italic}
  .nav a:active{color:var(--bloom)}
  .menu-open .nav a{opacity:1;transform:none}
  .menu-open .nav a:nth-child(1){transition-delay:.06s}
  .menu-open .nav a:nth-child(2){transition-delay:.10s}
  .menu-open .nav a:nth-child(3){transition-delay:.14s}
  .menu-open .nav a:nth-child(4){transition-delay:.18s}
  .menu-open .nav a:nth-child(5){transition-delay:.22s}
  .menu-open .nav a:nth-child(6){transition-delay:.26s}
  .menu-open{backdrop-filter:none;-webkit-backdrop-filter:none}
  body:has(.menu-open){overflow:hidden}

  /* Heroes: edge-hugging frames, tidier copy blocks */
  .hero-frame,.inner-frame{border-radius:18px}
  .inner-frame{height:clamp(420px,68svh,560px)}
  .hero-copy{padding:20px 20px 22px;padding-top:96px;gap:16px}
  .hero h1{font-size:clamp(40px,12.4vw,56px);max-width:11ch}
  .hero-side{flex-basis:100%;gap:14px}
  .hero-side p{font-size:16px;line-height:1.5}
  .inner-frame .copy{padding:80px 20px 22px;gap:12px}
  .inner-frame h1{font-size:clamp(38px,11.6vw,54px)}
  .inner-frame p.sub{font-size:16.5px}
  .crumbs{font-size:11.5px}
  .ticker{margin-top:32px}
  .ticker span{padding:14px 20px}

  /* Scroll-lit statement */
  .lit{font-size:clamp(27px,7.6vw,36px);line-height:1.22}

  /* Chip rows and tabs become swipeable, edge-bleeding strips */
  .chips,.tablist{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .chips::-webkit-scrollbar,.tablist::-webkit-scrollbar{display:none}
  .chip,.tab{flex:none;scroll-snap-align:start;white-space:nowrap}
  .tablist{gap:0}
  .tab{margin-right:24px}

  /* Cards: two-up grid with featured story full width */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .cards .card.feature{grid-column:1 / -1}
  .cards .card.feature .img{aspect-ratio:4/3}
  .card{gap:10px}
  .card .img{border-radius:12px}
  .card .t{font-size:21px;line-height:1.12}
  .cards .card.feature .t{font-size:28px}
  .card .d{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .card .img .badge{left:10px;top:10px;font-size:10.5px;padding:5px 9px}

  /* Story list rows */
  .row a{padding:18px 2px;gap:4px 16px}
  .row a:hover{padding-left:2px}
  .row .name{font-size:clamp(24px,7vw,30px)}
  .row .meta{font-size:13px}
  .row .thumb{border-radius:8px}

  /* Panels, steps, tabs media */
  .panel .label{left:20px;right:20px;bottom:20px}
  .panel h3{font-size:30px}
  .panel.open .more{max-height:360px}
  .pin{border-radius:14px;height:min(52svh,420px);top:calc(var(--hdr,68px) + 8px)}
  .step h3{font-size:clamp(28px,8vw,36px)}
  .step .when{font-size:18px}
  .pin-wrap{gap:20px}
  .tabs-media{border-radius:14px;min-height:300px}
  .tabs-wrap{gap:28px}
  .tabs-body{gap:20px}

  /* Blocks that become single-column */
  .track{grid-template-columns:1fr;gap:26px}
  .stage h3{font-size:26px}
  .offer{gap:12px}
  .offer-item,.value{padding:22px;border-radius:14px}
  .offer-item h3,.value h3{font-size:24px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-block:22px}
  .facts dd{font-size:19px}
  .chapters{gap:30px}
  .chapters h3{font-size:26px}
  .split,.contact-grid,.places,.tabs-wrap{gap:28px}
  .split .media,.split.wide .media{border-radius:14px}
  .places .stage-img{aspect-ratio:4/3;border-radius:14px}
  .places li button{padding:18px 0}
  .film-box,.next-story,.gather-box{border-radius:18px}
  .film-box{height:clamp(320px,90vw,420px)}
  .play{width:72px;height:72px}
  .gather-img{min-height:300px;flex-basis:100%}
  .gather-copy{flex-basis:100%;padding:28px 22px 32px}
  .next-story{height:clamp(300px,82vw,380px)}

  /* Quotes */
  .q blockquote,.single-quote blockquote{font-size:clamp(25px,7vw,32px);line-height:1.26}
  .voice-nav button{width:52px;height:52px}

  /* FAQ */
  .faq summary{padding:20px 0;font-size:21px;gap:16px}
  .faq .a{padding-bottom:22px}

  /* Gallery & lightbox */
  .gallery{columns:2;column-gap:10px}
  .gallery button{margin-bottom:10px;border-radius:10px}
  .lightbox{padding-inline:0}
  .lightbox img{border-radius:0;max-width:100vw}
  .lightbox .lb-btn{width:46px;height:46px;background:rgba(0,0,0,.45)}
  .lightbox .lb-prev{left:10px}
  .lightbox .lb-next{right:10px}

  /* About portraits */
  .portraits{gap:10px}
  .portraits img{border-radius:12px}

  /* Forms: roomy fields, full-width submit */
  .form{border-radius:16px;gap:20px}
  .form .btn{width:100%;justify-content:center}
  .field input,.field textarea,.field select{min-height:52px;font-size:16px}
  .copyable code{font-size:16px;overflow-wrap:anywhere}
  .copybtn{min-height:44px}

  /* Footer */
  .foot .wrap{flex-direction:column;gap:20px;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
  .foot nav{gap:4px 20px}
  .foot nav a{display:inline-flex;align-items:center;min-height:40px}
}

@media (max-width:420px){
  :root{--gutter:18px}
  .cards{gap:26px 12px}
  .card .t{font-size:19px}
  .facts{grid-template-columns:1fr}
  .hero-frame{height:clamp(480px,78svh,640px)}
  .nav a{font-size:30px}
}

@media (max-width:760px) and (orientation:landscape){
  .hero-frame,.inner-frame{height:max(360px,88svh)}
  .nav a{font-size:26px;padding-block:10px}
}

@media (prefers-reduced-motion:reduce){
  .nav a{transition:none;transform:none}
}

/* "How it serves": once the image stacks above the text (single column), keep the image
   as a plain block above the copy so writing never scrolls over it, and lift the dimmed steps. */
@media (max-width:1020px){
  .pin{position:relative;top:0;height:min(46svh,420px);width:100%;flex-basis:auto}
  .step{opacity:.65}
  .step.on{opacity:1}
  .step p{color:var(--ink)}
}