/* Proof & Principle · Mobile guide QA · v206
   Mobile-only repairs. Desktop and tablet layouts above 760px remain unchanged. */

@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}

  /* Keep the approved logo size, but give navigation its own readable row. */
  .pp-guide-header{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    align-items:center!important;
    gap:0!important;
    padding:7px 14px 0!important;
  }
  .pp-guide-header>a:first-child,
  .pp-guide-header>.brand{
    grid-column:1!important;
    width:max-content!important;
    max-width:100%!important;
    min-width:0!important;
    justify-self:start!important;
  }
  .pp-guide-header img{
    display:block!important;
    width:180px!important;
    height:52px!important;
    max-width:180px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .pp-guide-progress{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    margin:5px 0 0!important;
    border-top:1px solid var(--line,#deddd7)!important;
  }
  .pp-guide-progress__inner{
    min-height:40px!important;
    grid-template-columns:auto minmax(0,1fr) 64px!important;
    gap:9px!important;
  }
  .pp-guide-progress__contents{
    min-width:0!important;
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0 2px!important;
    font-size:10.5px!important;
    line-height:1!important;
    letter-spacing:.09em!important;
  }
  .pp-guide-progress__current{gap:8px!important;min-width:0!important}
  .pp-guide-progress__count{display:none!important}
  .pp-guide-progress__title{
    font-size:12px!important;
    line-height:1.2!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .pp-guide-progress__meter{
    width:64px!important;
    height:2px!important;
    min-width:0!important;
  }
  .pp-guide-progress__menu{
    top:100%!important;
    left:0!important;
    right:0!important;
    padding:8px 0 10px!important;
  }
  .pp-guide-progress__menu-inner{grid-template-columns:1fr!important}
  .pp-guide-progress__menu a{
    min-height:44px!important;
    padding:10px 8px!important;
  }
  .pp-guide-progress__menu a span{font-size:10.5px!important}
  .pp-guide-progress__menu a strong{font-size:13px!important;line-height:1.25!important}

  /* Long-form reading comfort. */
  .hub-breadcrumbs{
    padding-left:14px!important;
    padding-right:14px!important;
    font-size:11.5px!important;
    line-height:1.55!important;
    letter-spacing:.065em!important;
    overflow-wrap:anywhere!important;
  }
  .hub-breadcrumbs a{display:inline!important;padding-bottom:2px!important}
  .eyebrow,.guide-meta{line-height:1.45}
  .chapter h2,.tequila-chapter h2,.fruit-chapter h2,
  .chapter-deck,.lead,.hero-note{overflow-wrap:anywhere}
  .chapter-next{min-height:44px}
  .quick-check__button{min-height:44px!important}
  .reference-collapsible__summary{min-height:56px;padding-top:17px!important;padding-bottom:17px!important}
  .reference-collapsible__title{line-height:1.2!important}
  .source-panel summary{min-height:48px}

  /* Buttons must fit narrow phones and remain easy to tap. */
  .button,.button-primary,.button-orange,.hero-start,.resume-link{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  a.button,button.button,.button-primary,.button-orange{
    min-height:44px!important;
    text-align:center!important;
  }
  .tequila-close .button-orange{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:min(100%,330px)!important;
    padding-left:16px!important;
    padding-right:16px!important;
    line-height:1.35!important;
  }

  /* Images and figures: no fixed desktop frame may force mobile overflow. */
  figure,.figure,.media-card,.production-figure{max-width:100%!important;min-width:0!important}
  figure img,.figure img,.media-card img,.production-figure img{max-width:100%!important}
  .section-grid,.section-grid.reverse,.two-col,.three-col,.split-panel,
  .fermentation-evidence-row,.producer-evidence-grid,.material-content{
    min-width:0!important;
  }

  /* Cognac: the three-column age table is still readable without a forced 680px canvas. */
  #labels .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #labels .table-scroll .category-table{min-width:560px!important}

  /* Caribbean Rum: keep the five tasting questions readable and stop the colour scale forcing page width. */
  #tasting .sensory-tool{padding:20px!important}
  #tasting .sensory-grid{grid-template-columns:1fr!important;gap:10px!important}
  #tasting .sensory-grid div{min-width:0!important;padding:16px!important}
  #tasting .sensory-grid b{white-space:normal!important;min-height:0!important}
  #tasting .colour-row,
  #tasting .colour-labels{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
    gap:3px!important;
  }
  #tasting .colour-row div{height:64px!important;min-width:0!important}
  #tasting .colour-labels span{
    min-width:0!important;
    font-size:11.5px!important;
    line-height:1.22!important;
    overflow-wrap:anywhere!important;
    hyphens:auto!important;
  }

  /* Jamaica: ester unit must wrap rather than widen the article. */
  .ester-measurement{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important}
  .ester-measurement__label,.ester-measurement__copy{min-width:0!important}
  .ester-measurement__unit{white-space:normal!important;overflow-wrap:anywhere!important}

  /* Mobile footer: preserve approved copy, remove accidental width pressure. */
  .site-footer-minimal{max-width:100%;overflow:hidden}
  .site-footer-minimal .footer-motto,
  .site-footer-minimal .footer-legal{max-width:100%;overflow-wrap:anywhere}
}

@media (max-width:360px){
  .pp-guide-header{padding-left:12px!important;padding-right:12px!important}
  .pp-guide-progress__inner{grid-template-columns:auto minmax(0,1fr) 52px!important;gap:7px!important}
  .pp-guide-progress__contents{font-size:10px!important;letter-spacing:.075em!important}
  .pp-guide-progress__title{font-size:11.5px!important}
  .pp-guide-progress__meter{width:52px!important}
  .hub-breadcrumbs{padding-left:12px!important;padding-right:12px!important;font-size:11px!important}
  #tasting .colour-labels span{font-size:10.5px!important}
}

@media (max-width:330px){
  .pp-guide-progress__inner{grid-template-columns:auto minmax(0,1fr) 40px!important;gap:6px!important}
  .pp-guide-progress__meter{width:40px!important}
  .pp-guide-progress__title{font-size:11px!important}
  .tequila-close .button-orange{width:100%!important}
}

/* v206 refinement: the Caribbean colour scale becomes a labelled 4 × 2 mobile grid.
   This keeps every colour name legible instead of squeezing eight captions across one phone row. */
@media (max-width:760px){
  #tasting .colour-row.rum{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:30px 6px!important;
    width:100%!important;
    margin-bottom:26px!important;
  }
  #tasting .colour-row.rum div{
    position:relative!important;
    height:64px!important;
    min-width:0!important;
  }
  #tasting .colour-row.rum div::after{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    text-align:center;
    color:var(--muted,#666);
    font-family:'Times New Roman',Times,serif;
    font-size:11.5px;
    line-height:1.15;
    white-space:normal;
    overflow-wrap:normal;
    hyphens:none;
  }
  #tasting .colour-row.rum div:nth-child(1)::after{content:'Clear'}
  #tasting .colour-row.rum div:nth-child(2)::after{content:'Pale straw'}
  #tasting .colour-row.rum div:nth-child(3)::after{content:'Gold'}
  #tasting .colour-row.rum div:nth-child(4)::after{content:'Amber'}
  #tasting .colour-row.rum div:nth-child(5)::after{content:'Copper'}
  #tasting .colour-row.rum div:nth-child(6)::after{content:'Chestnut'}
  #tasting .colour-row.rum div:nth-child(7)::after{content:'Mahogany'}
  #tasting .colour-row.rum div:nth-child(8)::after{content:'Deep brown'}
  #tasting .colour-labels{display:none!important}
}

/* v207 refinement: narrative image+text sections must become a true single-column teaching flow on phones.
   No left-side mini visual beside a narrow text column. */
@media (max-width:760px){
  .section-grid,
  .section-grid.reverse,
  .context-pair,
  .legal-choice,
  .download-panel,
  .closing-grid,
  .jump-head,
  .fermentation-evidence-row,
  .producer-evidence-grid,
  .material-content{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    align-items:start!important;
  }

  .section-grid > *,
  .section-grid.reverse > *,
  .context-pair > *,
  .legal-choice > *,
  .download-panel > *,
  .closing-grid > *,
  .jump-head > *{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    justify-self:stretch!important;
  }

  .body-copy,
  .context-copy{
    max-width:none!important;
  }

  .section-grid > figure,
  .section-grid.reverse > figure,
  .context-pair > figure,
  .section-grid > .figure,
  .section-grid.reverse > .figure,
  .context-pair > .figure{
    margin:0!important;
  }

  figure img,
  .figure img,
  .media-card img,
  .production-figure img{
    display:block!important;
    width:100%!important;
    height:auto!important;
  }

  .figure figcaption,
  figure figcaption{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .body-copy h3,
  .context-copy h3{
    font-size:20px!important;
    line-height:1.22!important;
  }

  .body-copy p,
  .context-copy p{
    font-size:17px!important;
    line-height:1.66!important;
  }
}

/* Proof & Principle · v208 mobile reading pass
   Guide-specific repairs found by chapter-by-chapter visual review. */
@media (max-width:760px){
  /* Scotch + Irish colour reference: preserve the intended swatch + explanation row.
     This explicitly overrides the Caribbean tasting-scale rule from the previous pass. */
  #tasting .colour-scale-card{
    padding:18px!important;
    overflow:visible!important;
  }
  #tasting .colour-scale-card .colour-scale{
    display:grid!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
  }
  #tasting .colour-scale-card .colour-scale .colour-row{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }
  #tasting .colour-scale-card .colour-scale .colour-row > div{
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
  }
  #tasting .colour-scale-card .colour-scale .colour-swatch{
    display:block!important;
    width:64px!important;
    height:42px!important;
    min-height:42px!important;
    border:1px solid rgba(0,0,0,.09)!important;
  }
  #tasting .colour-scale-card .colour-meta{
    display:block!important;
    overflow:visible!important;
  }
  #tasting .colour-scale-card .colour-meta strong{
    display:block!important;
    margin:0 0 3px!important;
    font-size:14px!important;
    line-height:1.2!important;
  }
  #tasting .colour-scale-card .colour-meta span{
    display:block!important;
    font-size:14px!important;
    line-height:1.42!important;
    overflow-wrap:anywhere!important;
  }
  #tasting .colour-scale-card .colour-note{
    margin:18px 0 0!important;
    padding-top:14px!important;
    border-top:1px solid var(--line,#deddd7)!important;
  }

  /* Mobile table system: tables become vertical learning cards instead of desktop canvases. */
  #labels .table-scroll,
  #changes .table-scroll{
    overflow:visible!important;
    width:100%!important;
  }

  /* Cognac age designations. */
  #labels .table-scroll .category-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:18px 0 0!important;
    border:0!important;
    table-layout:auto!important;
  }
  #labels .table-scroll .category-table thead{display:none!important}
  #labels .table-scroll .category-table tbody{
    display:grid!important;
    gap:12px!important;
    width:100%!important;
  }
  #labels .table-scroll .category-table tr{
    display:block!important;
    width:100%!important;
    border:1px solid var(--line,#deddd7)!important;
    background:#fff!important;
  }
  #labels .table-scroll .category-table td{
    display:block!important;
    width:100%!important;
    padding:10px 14px!important;
    border:0!important;
    background:#fff!important;
    font-size:16px!important;
    line-height:1.52!important;
    overflow-wrap:anywhere!important;
  }
  #labels .table-scroll .category-table td:first-child{
    padding:14px 14px 8px!important;
    color:var(--green,#102820)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:18px!important;
    font-weight:900!important;
  }
  #labels .table-scroll .category-table td:nth-child(2)::before,
  #labels .table-scroll .category-table td:nth-child(3)::before{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--orange,#e94b16)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }
  #labels .table-scroll .category-table td:nth-child(2)::before{content:"Minimum age"}
  #labels .table-scroll .category-table td:nth-child(3)::before{content:"Equivalent / context"}

  /* Caribbean Rum label-reading table. */
  #origins .category-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:20px 0!important;
    border:0!important;
    overflow:visible!important;
  }
  #origins .category-table thead{display:none!important}
  #origins .category-table tbody{display:grid!important;gap:12px!important;width:100%!important}
  #origins .category-table tr{
    display:block!important;
    width:100%!important;
    border:1px solid var(--line,#deddd7)!important;
    background:#fff!important;
  }
  #origins .category-table td{
    display:block!important;
    width:100%!important;
    padding:10px 14px!important;
    border:0!important;
    background:#fff!important;
    font-size:16px!important;
    line-height:1.52!important;
  }
  #origins .category-table td:first-child{
    padding:14px 14px 8px!important;
    color:var(--green,#102820)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:17px!important;
    font-weight:900!important;
  }
  #origins .category-table td:nth-child(2)::before,
  #origins .category-table td:nth-child(3)::before{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--orange,#e94b16)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }
  #origins .category-table td:nth-child(2)::before{content:"Useful meaning"}
  #origins .category-table td:nth-child(3)::before{content:"What to verify"}

  /* Cane raw-material comparison: each feature is one phone card with three clearly named routes. */
  #changes .compare-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:22px 0!important;
    border:0!important;
    overflow:visible!important;
  }
  #changes .compare-table thead{display:none!important}
  #changes .compare-table tbody{display:grid!important;gap:12px!important;width:100%!important}
  #changes .compare-table tr{
    display:block!important;
    width:100%!important;
    border:1px solid var(--line,#deddd7)!important;
    background:#fff!important;
  }
  #changes .compare-table td{
    display:block!important;
    width:100%!important;
    padding:10px 14px!important;
    border:0!important;
    background:#fff!important;
    font-size:16px!important;
    line-height:1.52!important;
    overflow-wrap:anywhere!important;
  }
  #changes .compare-table td:first-child{
    padding:14px 14px 8px!important;
    color:var(--green,#102820)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:17px!important;
    font-weight:900!important;
  }
  #changes .compare-table td:not(:first-child)::before{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--orange,#e94b16)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }
  #changes .compare-table td:nth-child(2)::before{content:"Fresh cane juice"}
  #changes .compare-table td:nth-child(3)::before{content:"Cane syrup"}
  #changes .compare-table td:nth-child(4)::before{content:"Molasses"}
  #changes .compare-table tr:last-child td:nth-child(2)::before{content:"All three routes"}

  /* Jamaica bottle-reading table. */
  #label .compare-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:22px 0!important;
    border:0!important;
    overflow:visible!important;
  }
  #label .compare-table thead{display:none!important}
  #label .compare-table tbody{display:grid!important;gap:12px!important;width:100%!important}
  #label .compare-table tr{
    display:block!important;
    width:100%!important;
    border:1px solid var(--line,#deddd7)!important;
    background:#fff!important;
  }
  #label .compare-table td{
    display:block!important;
    width:100%!important;
    padding:10px 14px!important;
    border:0!important;
    background:#fff!important;
    font-size:16px!important;
    line-height:1.52!important;
  }
  #label .compare-table td:first-child{
    padding:14px 14px 8px!important;
    color:var(--green,#102820)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:17px!important;
    font-weight:900!important;
  }
  #label .compare-table td:nth-child(2)::before,
  #label .compare-table td:nth-child(3)::before{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--orange,#e94b16)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }
  #label .compare-table td:nth-child(2)::before{content:"Question"}
  #label .compare-table td:nth-child(3)::before{content:"Why it matters"}

  /* Barbados legal/framework table. */
  #labels .compare-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:22px 0!important;
    border:0!important;
    overflow:visible!important;
  }
  #labels .compare-table thead{display:none!important}
  #labels .compare-table tbody{display:grid!important;gap:12px!important;width:100%!important}
  #labels .compare-table tr{
    display:block!important;
    width:100%!important;
    border:1px solid var(--line,#deddd7)!important;
    background:#fff!important;
  }
  #labels .compare-table td{
    display:block!important;
    width:100%!important;
    padding:10px 14px!important;
    border:0!important;
    background:#fff!important;
    font-size:16px!important;
    line-height:1.52!important;
  }
  #labels .compare-table td:first-child{
    padding:14px 14px 8px!important;
    color:var(--green,#102820)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:17px!important;
    font-weight:900!important;
  }
  #labels .compare-table td:nth-child(2)::before,
  #labels .compare-table td:nth-child(3)::before{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--orange,#e94b16)!important;
    font-family:"Instrument Sans",Arial,Helvetica,sans-serif!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }
  #labels .compare-table td:nth-child(2)::before{content:"What is verified"}
  #labels .compare-table td:nth-child(3)::before{content:"How to use it"}
}

/* Extra-small phones: any process sequence carrying explanatory copy becomes one column. */
@media (max-width:360px){
  .process{grid-template-columns:1fr!important}
  #tasting .colour-scale-card .colour-scale .colour-row{grid-template-columns:56px minmax(0,1fr)!important}
  #tasting .colour-scale-card .colour-scale .colour-swatch{width:56px!important;height:40px!important;min-height:40px!important}
}

/* Proof & Principle · v209
   Mobile guide header lock: logo + dedicated Contents/current chapter/progress row
   remain pinned as one guide-navigation unit while reading. */
@media (max-width:760px){
  html{
    scroll-padding-top:112px!important;
    overflow-x:clip!important;
  }
  body{
    overflow-x:clip!important;
  }

  /* Older guide templates use a sticky nav-shell wrapper. */
  .nav-shell{
    position:sticky!important;
    top:0!important;
    z-index:2000!important;
    overflow:visible!important;
    background:#fff!important;
  }
  .nav-shell .pp-guide-header{
    position:relative!important;
    top:auto!important;
    z-index:1!important;
  }

  /* Newer guide templates use the guide header itself as the sticky element. */
  .site-header.pp-guide-header{
    position:sticky!important;
    top:0!important;
    z-index:2000!important;
    overflow:visible!important;
    background:#fff!important;
  }

  .pp-guide-header{
    isolation:isolate!important;
    background:#fff!important;
  }

  /* Dedicated second row under the logo. */
  .pp-guide-progress{
    position:relative!important;
    z-index:2!important;
    background:#fff!important;
  }
  .pp-guide-progress__inner{
    width:100%!important;
  }

  /* Contents panel opens from the pinned row and remains usable on short screens. */
  .pp-guide-progress__menu{
    z-index:2100!important;
    max-height:calc(100dvh - 104px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}