/* V9 responsive layout stabilization
   Loaded after site.css by assets/js/site.js so these rules are the final cascade guard. */

h1,h2,h3,
.section-head h2,
.collection-copy h3,
.visual-tile-copy h3,
.article h2,
.article h3{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

.section-head>*,
.collection-feature>*,
.split>*,
.visual-grid>*,
.editorial-grid>*,
.article,
.editorial-wide .article{
  min-width:0;
}

/* Long-form pages: use the desktop canvas while keeping a readable text measure. */
@media (min-width:1025px){
  .editorial-shell.article-layout--with-sidebar{
    width:min(calc(100% - 48px),1280px);
    grid-template-columns:minmax(0,900px) minmax(230px,260px);
    justify-content:space-between;
    align-items:start;
    gap:clamp(46px,5vw,72px);
  }
  .editorial-wide .article>p,
  .editorial-wide .article>ul,
  .editorial-wide .article>ol{
    max-width:82ch;
  }
  .editorial-wide .article table,
  .editorial-wide .article .figure,
  .editorial-wide .article .media-gallery,
  .editorial-wide .article .source-list{
    max-width:100%;
  }
  .editorial-shell .side-nav{
    display:block;
    position:sticky;
    top:104px;
    width:100%;
    padding:20px 0 0;
  }
}

/* Tablet: collapse fragile editorial headers before the title column gets squeezed. */
@media (max-width:900px){
  .section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
    align-items:start;
  }
  .section-head>p{
    max-width:68ch;
    margin:0;
  }
  .split,
  .location-brief-grid,
  .compact-duo{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* Phone: one readable flow; never allow headings to fall letter-by-letter. */
@media (max-width:700px){
  :root{--space-section:clamp(2.8rem,12vw,4rem)}
  html,body{max-width:100%;overflow-x:clip}
  .container{width:min(calc(100% - 32px),var(--max))}

  .site-header{backdrop-filter:blur(10px)}
  .nav{min-height:68px;gap:12px}
  .brand{gap:10px;font-size:.78rem;letter-spacing:.13em}
  .brand-mark{width:106px;height:50px;flex:0 0 106px}
  .nav-toggle{min-width:64px;min-height:44px;padding:8px 12px;color:var(--ink)}
  .nav-links{top:68px;left:12px;right:12px}

  .section{padding:var(--space-section) 0}
  .section-head{
    display:block!important;
    width:100%;
    margin-bottom:clamp(2rem,9vw,3rem)!important;
  }
  .section-head>div,
  .section-head>p{
    width:100%;
    min-width:0;
    max-width:none!important;
  }
  .section-head>p{
    margin-top:16px!important;
    font-size:1rem;
    line-height:1.65;
  }
  .section-head h2{
    max-width:none!important;
    width:100%;
    font-size:clamp(2rem,10vw,2.9rem);
    line-height:1.06;
    letter-spacing:-.035em;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .section-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    font-size:.7rem;
    line-height:1.45;
    letter-spacing:.15em;
  }
  .section-kicker:before{width:26px;flex:0 0 26px}

  .collection-stack{gap:clamp(2.6rem,13vw,4.5rem)}
  .collection-feature,
  .collection-feature:nth-child(even){
    grid-template-columns:minmax(0,1fr)!important;
    gap:20px;
  }
  .collection-feature:nth-child(even) .collection-media{order:0}
  .collection-copy h3{
    max-width:none;
    font-size:clamp(2.15rem,11vw,3.35rem);
  }
  .collection-copy .collection-number{margin-bottom:.8rem}
  .collection-media{width:100%;aspect-ratio:4/3}

  .split,
  .location-brief-grid,
  .compact-duo,
  .visual-grid,
  .editorial-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
  }
  .plan-story .split{align-items:start}
  .visual-tile{min-height:330px}
  .visual-tile-copy{inset:auto 18px 18px}
  .visual-tile-copy h3{font-size:clamp(1.75rem,8.5vw,2.5rem)}
  .visual-tile-copy p{font-size:.94rem;line-height:1.5}

  .product-grid{grid-template-columns:1fr 1fr}
  .product-card{min-width:0;min-height:165px;padding:18px 14px}
  .product-card strong{font-size:clamp(1.7rem,9vw,2.5rem)}
  .product-card span{font-size:.8rem;line-height:1.45}

  .article-hero{
    min-height:min(410px,68svh);
    padding-top:5rem;
  }
  .article-hero .container{min-width:0}
  .article-hero h1{
    max-width:100%;
    font-size:clamp(2.45rem,12vw,3.7rem);
    line-height:1.02;
    overflow-wrap:normal;
    word-break:normal;
  }
  .article-hero .lead{font-size:1rem;line-height:1.6}
  .breadcrumb{padding-block:14px;white-space:normal}

  .article-layout,
  .article-layout--with-sidebar,
  .editorial-shell.article-layout--with-sidebar{
    grid-template-columns:minmax(0,1fr)!important;
    gap:2.25rem!important;
    padding-block:clamp(2.4rem,10vw,3.2rem)!important;
  }
  .article{width:100%;font-size:1rem}
  .article>p:first-of-type{font-size:1.08rem}
  .article p,.article li{max-width:none!important;line-height:1.72}
  .article h2{
    max-width:none!important;
    width:100%;
    margin-top:clamp(2.8rem,12vw,4rem);
    padding-top:1rem;
    font-size:clamp(1.9rem,9.2vw,2.45rem)!important;
    line-height:1.08;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .article h3{font-size:clamp(1.35rem,6.8vw,1.7rem)}
  .article table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .article th,.article td{min-width:130px;padding:12px}
  .source-list{padding:20px 16px}
  .side-nav{position:static!important;width:100%;padding:18px 0 0}

  .figure,.media-gallery{max-width:100%}
  .figure-caption{font-size:.9rem;line-height:1.45}
  .hero-actions{gap:8px}
  .hero-actions .btn{width:100%}

  .footer-grid{grid-template-columns:minmax(0,1fr)!important;gap:34px}
  .footer-links{grid-template-columns:1fr 1fr}
}

@media (max-width:390px){
  .container{width:min(calc(100% - 24px),var(--max))}
  .brand{font-size:.73rem;letter-spacing:.1em}
  .product-grid{grid-template-columns:1fr}
  .product-card:last-child{grid-column:auto}
  .footer-links{grid-template-columns:1fr}
}