/* ============================================================
   THE BARBER SHOP — DESKTOP OPTIMIZATION PASS
   Everything is scoped to >=1024px so the mobile / tablet
   phone-frame layout (verified, fabrication-free) is untouched.
   At desktop the phone column "breaks out" into a full editorial
   site: full-bleed section colour, content centred in a 1200px
   column with growing side gutters.
   ============================================================ */

@media (min-width:1024px){

  /* growing-gutter container: content caps at 1200px, never edge-to-edge */
  :root{ --gut: max(56px, calc((100% - 1200px) / 2)); }

  /* ---- break the phone frame out into a full-width page ---- */
  .stage{ padding:0; display:block; }
  .phone{
    max-width:none; width:100%;
    border:none; border-radius:0;
    min-height:100vh; overflow:visible;
    box-shadow:none;
  }
  .notch{ display:none; }

  /* ---- shared: full-bleed colour, centred content column ---- */
  section{ padding-block:104px; padding-inline:var(--gut); }
  .nav{ padding-inline:var(--gut); }

  /* ============================================================
     NAV
     ============================================================ */
  .nav{ padding-top:20px; padding-bottom:20px; }
  .nav.scrolled{ padding-top:15px; padding-bottom:15px; }
  .nav-mark{ font-size:24px; }
  .nav-book{ font-size:13px; padding:11px 20px; }

  /* ============================================================
     HERO — asymmetric two-column
     ============================================================ */
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);
    column-gap:64px;
    align-items:center;
    padding-top:84px; padding-bottom:104px;
  }
  .hero-head{ grid-column:1; grid-row:1; margin-bottom:0; }
  .hero .display{
    grid-column:1; grid-row:2;
    margin:18px 0 0;
    font-size:clamp(54px, 4.6vw, 68px);   /* capped — longest line stays on one row */
  }
  .hero-lede{
    grid-column:1; grid-row:3;
    font-size:18px; line-height:1.58; max-width:46ch; margin-top:26px;
  }
  .hero-img-wrap{
    grid-column:2; grid-row:1 / 4;
    margin:0; align-self:center;
    height:min(620px, 72vh);
  }
  .hero-img{ height:100%; min-height:0; max-height:none; }
  .hero-float{ right:18px; bottom:18px; max-width:230px; padding:14px 16px; }
  .hero-float p{ font-size:17px; }
  .kicker{ font-size:12px; }

  /* ============================================================
     MARQUEE — stays full-bleed (no gutter)
     ============================================================ */
  .marquee{ padding:22px 0; }
  .marquee-track span{ font-size:30px; }

  /* ============================================================
     ESSAY — heading left, prose right (max ~68ch)
     ============================================================ */
  .essay{
    display:grid;
    grid-template-columns:0.82fr 1.18fr;
    column-gap:64px; align-items:start;
  }
  .essay > *{ grid-column:1; }
  .essay .essay-body{
    grid-column:2; grid-row:1 / span 4;
    max-width:66ch; font-size:22px; line-height:1.66;
  }
  .essay .section-title{ margin:18px 0 0 !important; }
  .essay-sign{ margin-top:28px; }
  .essay-body .drop{ font-size:88px; }

  /* ============================================================
     THE LEDGER — two-column menu
     ============================================================ */
  .services{
    display:grid;
    grid-template-columns:0.82fr 1.18fr;
    column-gap:64px; align-items:start;
  }
  .services > *{ grid-column:1; }
  .services .ledger-list{
    grid-column:2; grid-row:1 / span 2;
    margin-top:0;
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:48px; row-gap:0;
    align-content:start;
  }
  .services .ledger-note{ grid-column:2; max-width:62ch; }
  .services .svc-foot{ grid-column:1; margin-top:36px; }
  .services .section-title{ margin-top:18px !important; }
  .ledger-name{ font-size:32px; }
  /* tidy the divider rhythm in a 2-col grid */
  .services .ledger-list{ border-top:1px solid var(--line); }

  /* CTA row goes inline on desktop */
  .cta-row{ flex-direction:row; flex-wrap:wrap; gap:12px; }
  .cta-row .btn{ width:auto; }

  /* ============================================================
     BARBERS — 3-up grid, no swipe rail
     ============================================================ */
  .barbers{
    display:grid;
    grid-template-columns:0.6fr 1.4fr;
    column-gap:64px; align-items:start;
  }
  .barbers > .reveal:first-child{ grid-column:1; }
  .barbers .section-title{ grid-column:1; margin-top:18px !important; }
  .barber-rail{
    grid-column:2; grid-row:1 / span 3;
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
    overflow:visible; margin:0; padding:0;
    scroll-snap-type:none;
  }
  .barber-card{ flex:none; width:auto; }
  .rail-hint{ display:none; }

  /* ============================================================
     GALLERY — composed 4-column mosaic
     ============================================================ */
  .gal-grid{
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:236px 236px;
    gap:14px; margin-top:30px;
  }
  .gal-grid .ph{ aspect-ratio:auto !important; }
  .gal-grid .ph:nth-child(1){ grid-column:1; grid-row:1 / 3; }   /* tall */
  .gal-grid .ph:nth-child(2){ grid-column:2; grid-row:1; }
  .gal-grid .ph:nth-child(3){ grid-column:3; grid-row:1; }
  .gal-grid .ph:nth-child(4){ grid-column:2 / 4; grid-row:2; }   /* wide */
  .gal-grid .ph:nth-child(5){ grid-column:4; grid-row:1 / 3; }   /* tall */

  /* ============================================================
     REVIEWS — big number left, supply cards right
     ============================================================ */
  .reviews{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    column-gap:64px; align-items:start;
  }
  .reviews > *{ grid-column:1; }
  .reviews .rev-supply{
    grid-column:2; grid-row:1 / span 3;
    margin-top:0; gap:16px; align-self:start;
  }
  .rev-count{ font-size:104px; margin-top:8px; }
  .reviews .section-title{ margin-top:18px !important; }

  /* ============================================================
     VISIT — details left, map right (full height)
     ============================================================ */
  .location{
    display:grid;
    grid-template-columns:1fr 1.12fr;
    column-gap:64px; align-items:stretch;
  }
  .location > *{ grid-column:1; }
  .location .map-wrap{
    grid-column:2; grid-row:1 / span 6;
    margin-top:0; aspect-ratio:auto; height:100%; min-height:460px;
    align-self:stretch;
  }
  .location .section-title{ margin-top:18px !important; }

  /* ============================================================
     FOOTER — wordmark left, contact rows right
     ============================================================ */
  .foot{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:72px;
    padding-inline:var(--gut);
    padding-top:80px; padding-bottom:64px;
    align-items:start;
  }
  .foot > *{ grid-column:2; }
  .foot > .display{
    grid-column:1; grid-row:1 / 7;
    align-self:start; font-size:48px !important; margin-bottom:0 !important;
  }
  .foot > div:last-child{ margin-top:24px; }

  /* ============================================================
     PROSE FLOOR — no text block runs edge-to-edge
     ============================================================ */
  .lede{ max-width:64ch; }
}

/* ---- generous step-up for very wide screens ---- */
@media (min-width:1536px){
  section{ padding-block:120px; }
  .hero .display{ font-size:68px; }
}