/* ============================================================
   Re:Jason — mobile / responsive layer
   Link this AFTER each page's inline style block so these
   rules win on source order:
     1. link  rejason.css
     2. the page's own inline style block
     3. link  rejason-mobile.css   <- must be last

   Breakpoints:  900px = tablet & below   600px = phone
   ============================================================ */

.rj-burger{display:none;}

/* ── Never let anything push the page sideways ───────────── */
/* NOTE: overflow-x must NOT go on the body element. It turns body into a
   scroll container, which silently breaks position:sticky on the top bar.
   Keep it on the html element only. */
html{max-width:100%;overflow-x:hidden;}
body{max-width:100%;}
img{max-width:100%;height:auto;}

/* ============================================================
   TABLET AND BELOW  (≤900px)
   ============================================================ */
@media (max-width:900px){

  /* ── Shared chrome ─────────────────────────────────────── */
  /* NB: no will-change/transform may be left active on the topbar while the
     menu is open — either turns it into a containing block for the fixed nav
     panel, which then sizes itself to the 61px bar instead of the viewport. */
  .rj-topbar{justify-content:space-between;padding:8px 16px;
    transition:transform .25s ease;}
  body.rj-bar-hidden .rj-topbar{transform:translateY(-100%);}
  body.rj-menu-open .rj-topbar{transform:none;transition:none;}
  .rj-topbar-left{display:none;}          /* strapline drops, wordmark stays */
  /* the nav panel is a child of the topbar, so the wordmark needs to be
     lifted above it to stay visible while the menu is open */
  .rj-wordmark{font-size:22px;position:relative;z-index:60;}

  /* Nine links won't fit a phone, so they move into a full-screen panel.
     Everything below is gated on .rj-has-js (set by rejason-mobile.js) so
     that with JavaScript off the nav stays a plain, visible, wrapping row. */
  .rj-has-js .rj-burger{display:flex;align-items:center;justify-content:center;
    position:relative;z-index:60;width:44px;height:44px;margin-right:-10px;
    padding:0;background:none;border:none;cursor:pointer;}
  .rj-burger-bars{position:relative;display:block;width:22px;height:2px;
    background:var(--rj-yellow);transition:background .2s;}
  .rj-burger-bars::before,.rj-burger-bars::after{content:"";position:absolute;
    left:0;width:22px;height:2px;background:var(--rj-yellow);transition:transform .2s;}
  .rj-burger-bars::before{transform:translateY(-7px);}
  .rj-burger-bars::after{transform:translateY(7px);}

  .rj-has-js .rj-nav{position:fixed;inset:0;z-index:45;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
    background:var(--rj-ink);padding:116px 24px 48px;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;}
  .rj-has-js .rj-nav a{font-family:'Fraunces',serif;font-size:30px;font-weight:400;
    letter-spacing:-.02em;text-transform:none;opacity:.9;padding:14px 0;
    border-bottom:1px solid rgba(244,241,234,.12);}
  .rj-has-js .rj-nav a.active{color:var(--rj-yellow);text-decoration:none;}

  body.rj-menu-open .rj-nav{opacity:1;visibility:visible;transform:none;}
  body.rj-menu-open .rj-burger-bars{background:transparent;}
  body.rj-menu-open .rj-burger-bars::before{transform:rotate(45deg);}
  body.rj-menu-open .rj-burger-bars::after{transform:rotate(-45deg);}

  /* No JavaScript: let the row wrap rather than run off the edge */
  html:not(.rj-has-js) .rj-nav{flex-wrap:wrap;justify-content:flex-start;}

  .fb-breadcrumb{padding:12px 16px;}
  .fb-nav-strip{grid-template-columns:1fr;}
  .fb-nav-item{padding:18px 16px;}
  .fb-nav-item:first-child{border-right:none;border-bottom:1px solid rgba(14,14,14,.15);}
  .fb-nav-title{font-size:19px;}
  .rj-footer{margin:40px 16px 0;flex-direction:column;gap:10px;text-align:left;}

  /* ── Home: hero ────────────────────────────────────────── */
  .rj-hero{grid-template-columns:1fr;gap:32px;padding:40px 16px 24px;}
  .rj-h1{font-size:clamp(46px,12vw,74px);}
  .rj-lede{max-width:none;margin-top:20px;}
  .rj-aside{min-height:0;}

  /* ── Home: meta strip, features, edition band ──────────── */
  .rj-meta{grid-template-columns:repeat(2,1fr);gap:14px;margin:32px 16px 0;}
  .rj-features{grid-template-columns:repeat(2,1fr);gap:22px;padding:40px 16px 0;}
  .rj-edband{grid-template-columns:1fr;margin:48px 16px 0;}
  .rj-edtext{padding:26px 20px;}
  .rj-edtitle{font-size:clamp(34px,9vw,52px);}

  /* ── Home: tin cans ────────────────────────────────────── */
  .rj-tin{padding:48px 16px 32px;margin-top:48px;}
  .rj-tin-head{grid-template-columns:1fr;gap:22px;}
  .rj-tin-title{font-size:clamp(40px,10vw,64px);}
  .rj-tin-grid{grid-template-columns:repeat(3,1fr);}

  /* ── Home: index table ─────────────────────────────────── */
  .rj-index{padding:48px 16px 24px;}
  .rj-index-title{font-size:clamp(40px,10vw,64px);}
  .rj-chip{padding:7px 11px;}          /* easier tap target */
  .rj-td-title{font-size:16px;}

  /* ── Home: closing CTAs ────────────────────────────────── */
  .rj-cta{grid-template-columns:1fr;margin:48px 16px 0;}
  .rj-cta-primary,.rj-cta-secondary{padding:30px 22px;}
  .rj-cta-heading{font-size:30px;}
  .rj-cta-body{max-width:none;}

  /* ── Home: project lightbox ────────────────────────────── */
  .rj-overlay{padding:0;align-items:flex-end;}
  .rj-lightbox{max-height:92vh;}
  .rj-lb-body{padding:20px 18px 28px;}
  .rj-lb-title{font-size:29px;}
  .rj-lb-desc{max-width:none;}
  .rj-lb-thumb{width:76px;height:57px;}
}

/* ============================================================
   PHONE  (≤600px)
   ============================================================ */
@media (max-width:600px){

  .rj-hero{padding:32px 16px 20px;}
  .rj-h1{font-size:clamp(40px,13vw,56px);}
  .rj-aside{padding:20px;}

  .rj-features{grid-template-columns:1fr;gap:30px;}
  .rj-tin-grid{grid-template-columns:repeat(2,1fr);}

  /* Seven columns is too many — keep colour dot, title and year */
  .rj-table th:nth-child(1),.rj-table td:nth-child(1),
  .rj-table th:nth-child(4),.rj-table td:nth-child(4),
  .rj-table th:nth-child(5),.rj-table td:nth-child(5),
  .rj-table th:nth-child(7),.rj-table td:nth-child(7){display:none;}
  .rj-table td{padding:12px 8px;}
  .rj-td-title{font-size:15px;}

  .rj-pager{flex-wrap:wrap;gap:8px;}
  .rj-cta-heading{font-size:27px;}
  .rj-lb-title{font-size:25px;}
}

/* Respect a reduced-motion preference for the menu */
@media (prefers-reduced-motion: reduce){
  .rj-nav,.rj-topbar,.rj-burger-bars,
  .rj-burger-bars::before,.rj-burger-bars::after{transition:none!important;}
  body.rj-bar-hidden .rj-topbar{transform:none;}
}

/* ============================================================
   INTERIOR PAGES
   Every multi-column grid collapses, section padding drops from
   32px to 16px, and the big display type scales instead of
   sitting at a fixed size.
   ============================================================ */
@media (max-width:900px){

  /* ── About ─────────────────────────────────────────────── */
  .ab-hero{padding:44px 16px;}
  .ab-grid{grid-template-columns:1fr;gap:28px;}
  .ab-made-grid{grid-template-columns:1fr;gap:16px;}
  .ab-name{font-size:clamp(42px,11vw,72px);}
  .ab-dropcap{font-size:54px;}
  .ab-quote{padding:18px 20px;}

  /* ── Contact ───────────────────────────────────────────── */
  .ct-hero{padding:44px 16px;}
  .ct-grid{grid-template-columns:1fr;gap:28px;}
  .ct-strip{grid-template-columns:1fr;}
  .ct-form-wrap{padding:26px 20px;}
  .ct-h1{font-size:clamp(40px,11vw,68px);}
  .ct-input{padding:12px 12px;font-size:16px;}   /* 16px stops iOS zooming on focus */

  /* ── CV ────────────────────────────────────────────────── */
  .cv-wrap{padding:32px 16px;}

  /* ── Fill Bill ─────────────────────────────────────────── */
  .fb-hero{grid-template-columns:1fr;gap:24px;}
  .fb-meta-grid,.fb-count-feature,.fb-info-grid,.fb-info-stats{grid-template-columns:1fr;}
  .fb-title-panel{padding:32px 20px;}
  .fb-count-feature{padding:36px 16px;}
  .fb-gallery{padding:44px 16px;}
  .fb-poster-wrap{padding:24px 16px;}
  .fb-h1{font-size:clamp(40px,11vw,68px);}
  .fb-section-head{font-size:32px;}
  .fb-count-title{font-size:34px;}

  /* ── Lighting and Furniture (shared lt- classes) ───────── */
  .lt-hero{grid-template-columns:1fr;gap:24px;}
  .lt-meta-grid{grid-template-columns:1fr;}
  .lt-works-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .lt-title-panel{padding:36px 20px;}
  .lt-cta{padding:32px 16px;}
  .lt-h1{font-size:clamp(40px,11vw,68px);}
  .lt-section-head{font-size:32px;}
  .lt-grate-feature,.lt-steam-feature,
  .fu-scrub-feature,.fu-lazy-feature{grid-template-columns:1fr;padding:36px 16px;}
  .lt-grate-title,.lt-steam-title,
  .fu-scrub-title,.fu-lazy-title{font-size:34px;}

  /* ── Press and Shop ────────────────────────────────────── */
  .pr-wrap,.sh-wrap{padding:32px 16px;}

  /* ── Everyday Objects ──────────────────────────────────── */
  .eo-grid-frame{grid-template-columns:1fr;}
  .eo-panel-idle-grid{grid-template-columns:repeat(3,1fr);}
  .eo-two-photos{grid-template-columns:1fr;}
  .eo-chapters-grid{grid-template-columns:1fr;}
  .eo-install-grid{grid-template-columns:repeat(4,1fr);}
  .eo-meta{padding:16px 18px;}
  .eo-day-body{padding:18px 18px;}
  .eo-day-num{font-size:46px;}
  .eo-month-name{font-size:34px;}
}

@media (max-width:600px){
  .lt-works-grid{grid-template-columns:1fr;}
  .eo-panel-idle-grid{grid-template-columns:repeat(2,1fr);}
  .eo-install-grid{grid-template-columns:repeat(3,1fr);}
}

/* ============================================================
   INTERIOR PAGES — second pass
   Fixes found by measuring each page at 390px.
   ============================================================ */
@media (max-width:900px){

  /* About: the practice bar is a flex row of label + items + button,
     which is far too wide for a phone. Stack it. */
  .ab-made{padding:44px 16px;}
  .ab-practice{margin:0 16px;padding:18px 20px;flex-direction:column;
    align-items:flex-start;gap:14px;}
  .ab-practice-label{margin-right:0;}
  .ab-practice-link{width:100%;text-align:center;}

}

/* ============================================================
   FILL BILL — poster slideshow
   The posters are absolutely positioned inside a flex container
   that only had height because the desktop hero grid stretched
   it. Once the hero collapses to one column there is nothing to
   stretch against, so the container measured 0px tall and the
   slideshow vanished. Give it an explicit height instead.
   ============================================================ */
@media (max-width:900px){
  .fb-poster-wrap{border-right:none;border-bottom:1.5px solid #0E0E0E;
    padding:28px 16px 40px;}
  .fb-posters-container{min-height:min(420px,108vw);}
  .fb-poster img{max-height:min(420px,108vw);}
  .fb-gallery-grid{columns:2;}
  .fb-pdot{width:10px;height:10px;}        /* 6px is a hard tap target */
  .fb-poster-dots{gap:10px;margin-top:20px;}
}

@media (max-width:600px){
  .fb-gallery-grid{columns:1;}
}

/* ============================================================
   SMALL-LAPTOP BAND (901–1150px)
   Above 900px the hero keeps its two-column desktop layout, but
   the text column is only ~486px wide at 930px — narrower than a
   96px headline needs. The result is a headline broken across
   four or five lines. Scale the display type with the viewport
   until there is genuinely room for the full size.
   ============================================================ */
@media (min-width:901px) and (max-width:1150px){
  .rj-h1{font-size:clamp(58px,8.6vw,96px);}
  .rj-edtitle{font-size:clamp(38px,4.6vw,52px);}
  .rj-tin-title,.rj-index-title{font-size:clamp(44px,5.6vw,64px);}
  .ab-name{font-size:clamp(56px,7.8vw,88px);}
  .ct-h1,.fb-h1,.lt-h1{font-size:clamp(52px,7.2vw,80px);}
  .pr-h1,.sh-h1{font-size:clamp(54px,7.4vw,82px);}
  .cv-h1{font-size:clamp(50px,6.6vw,74px);}
  .eo-h1{font-size:clamp(52px,7.2vw,80px);}
}