/* ============================================================
   ROAST PAGES (site/coffee/medium-roast, espresso, dark-roast): one template, three pages, made by scripts/build-roasts.mjs.
   Loads after site.css and index.css and only adds what those two don't already have: the section system
   (section.light cards on the ink page, section.dark bands), kickers, buttons, .specs-inline, .rcard,
   .reveal and the shared footer all come from them unchanged.
   ============================================================ */

/* ---- Hero: a cream card like the home page's, the bag gallery on the left and the buy box on the right ---- */
.p-hero{position:relative;overflow:hidden;padding:calc(104px + env(safe-area-inset-top,0px)) 0 clamp(32px,3.6vw,52px)}

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--stone);letter-spacing:0}
.crumbs a{color:var(--stone);transition:color .3s}
.crumbs a:hover{color:var(--ink)}

.p-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(12px,1.6vw,24px)}

/* Gallery: a scroll-snap track (a native swipe on phones), thumbnails underneath, arrows on pointer screens */
.p-gallery{position:relative;min-width:0}
.pg-stage{position:relative;width:100%;aspect-ratio:1;max-height:max(420px,calc(100svh - 336px))}   /* on a laptop the whole hero, thumbnails included, fits the first screen */
/* the track fills the stage absolutely: WebKit resolves a height:100% child against the stage's unclamped aspect-ratio height, so the bag spilled over the arrows */
.pg-track{list-style:none;position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;outline-offset:-2px}
.pg-track::-webkit-scrollbar{display:none}
.pg-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.pg-slide img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none}
.pg-segs{display:flex;justify-content:center;gap:8px;margin-top:6px}   /* one short line per view, the current one dark and longer (no arrows, no captions) */
.pg-segs button{width:44px;height:18px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.pg-segs button::before{content:'';display:block;width:100%;height:2px;border-radius:2px;background:var(--rule-light);transition:height .3s var(--ease-out),background-color .3s var(--ease-out)}
.pg-segs button.on::before{height:4px;background:var(--ink)}
@media (hover:hover){.pg-segs button:not(.on):hover::before{background:var(--stone)}}
.pg-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:100%;margin:18px 0 0}
.pg-thumbs button{position:relative;aspect-ratio:1;border-radius:12px;border:1px solid var(--rule-light);background:var(--parchment);overflow:hidden;transition:border-color .35s var(--ease-out),transform .5s var(--ease-out)}
.pg-thumbs button:hover{border-color:var(--stone)}
.pg-thumbs button[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}   /* the picture you are on: a dark frame, as on the Wellness site */
.pg-thumbs img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}

/* Buy box */
.p-info{max-width:560px}
.p-hero .kicker{color:var(--ink);background:var(--yellow);border-color:var(--yellow)}   /* hero only: filled Ultimate Yellow, as on the home page */
.p-info h1{font-size:clamp(52px,5.4vw,100px);letter-spacing:-.045em;line-height:.96;margin:18px 0 20px}
.p-info h1 .disp{font-size:1.04em;letter-spacing:-.01em}
.p-info .lede{font-size:clamp(19px,1.45vw,23px);max-width:32ch}
.p-facts{margin-top:26px;gap:6px}
.p-facts li{font-size:10.5px;padding:8px 11px;letter-spacing:.1em}   /* the four facts fit one row on a laptop */
.p-specs{margin-top:26px;border-top:1px solid var(--rule-light)}
.p-specs div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule-light)}
.p-specs dt{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.p-specs dd{font-size:15.5px;line-height:1.45;color:var(--ink)}
.nw{white-space:nowrap}
/* Roast level: the five dashes printed under the roast name on the front of the bag */
.p-bars{display:inline-flex;gap:4px;margin-right:12px;vertical-align:middle;position:relative;top:-1px}
.p-bars i{display:block;width:24px;height:4px;border-radius:2px;background:var(--sand)}
.p-bars i.on{background:var(--ink)}
.p-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.p-note{margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--stone);max-width:44ch}

/* ---- Shared section parts ---- */
.p-sec{padding:clamp(96px,12vw,160px) 0}
.p-sec h2,.p-others .roasts-head h2{font-size:clamp(36px,3.9vw,64px);letter-spacing:-.04em;line-height:1.01;margin:14px 0 22px}
.p-sec h2 .disp{font-size:1.02em}
.p-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.p-photo{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--ink-2)}
.p-photo img{width:100%;height:100%;object-fit:cover;display:block}
.light .p-photo{background:var(--sand)}
.p-sec .lede{max-width:46ch}
.p-sec .cta-row{margin-top:34px}

/* Tasting notes: the headline in the display face, the three notes from the bag in LT Superior a size below it on ruled rows, then the bag's own sentence */
.p-notes h2{font-family:var(--display);font-weight:900;font-size:clamp(44px,5.2vw,84px);line-height:1.02;letter-spacing:-.01em}
.p-notes h2 .disp{font-size:1em;line-height:inherit}
.p-notes-list{list-style:none;margin-top:clamp(28px,3.5vw,48px);border-top:1px solid var(--rule-dark)}
.p-notes-list li{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--rule-dark)}
.p-notes-list .snum{flex:none;width:2.4em;font-size:10.5px;color:var(--on-dark-faint)}
.p-notes-list .w{font-family:var(--sans);font-weight:500;font-size:clamp(28px,3vw,48px);line-height:1.1;letter-spacing:-.02em;color:var(--on-dark)}
.p-notes .p-bagnote{margin-top:24px;padding-top:0;border-top:0;font-size:16px;line-height:1.55;color:var(--on-dark-soft)}   /* the last note's rule is already above it */

/* Origin: the facts table from the side of the bag */
.p-origin .p-photo{aspect-ratio:4/5}
.p-origin .p-photo img{object-position:50% 50%}
.p-origin .lead-in{font-size:clamp(19px,1.45vw,23px);line-height:1.45;color:var(--ink);max-width:48ch;margin:0 0 16px}
.p-origin .body{max-width:52ch}
.p-origin .p-specs{margin-top:30px;max-width:520px}
.p-photo figcaption{position:absolute;left:20px;bottom:18px;display:grid;gap:4px;color:#FCFAF5;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.p-photo figcaption strong{font-size:17px;font-weight:600;letter-spacing:-.01em}
.p-photo figcaption .mono{font-size:10.5px;letter-spacing:.12em}
.p-photo.has-cap::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(180deg,transparent,rgba(31,25,21,.55))}
.p-photo figcaption{z-index:1}

/* Brew guide: the starting recipe as four numbers in the display face */
.p-brew .p-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.p-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--rule-dark)}
.p-stat{padding:22px 24px 20px 0;border-bottom:1px solid var(--rule-dark)}
.p-stat:nth-child(odd){border-right:1px solid var(--rule-dark)}
.p-stat:nth-child(even){padding-left:24px}
.p-stat .l{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--on-dark-faint)}
.p-stat .v{display:block;margin:12px 0 8px;font-family:var(--display);font-weight:900;font-size:clamp(34px,3.3vw,56px);line-height:1;letter-spacing:-.015em;color:var(--on-dark);white-space:nowrap}
.p-stat .s{display:block;font-size:14px;line-height:1.45;color:var(--on-dark-faint)}
.p-brew .p-after{margin-top:24px;font-size:16.5px;line-height:1.55;color:var(--on-dark-soft);max-width:52ch}
.p-bagnote{display:flex;gap:14px;align-items:baseline;margin-top:28px;padding-top:20px;border-top:1px solid var(--rule-dark);font-size:14px;line-height:1.5;color:var(--on-dark-faint)}
.p-bagnote .mono{flex:none;font-size:10px;letter-spacing:.14em;color:var(--on-dark-soft)}

/* Tested every lot: copy, the four panels, and the QR scan photo with the line printed next to the code on the bag */
.p-tested .p-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.p-tests{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,40px);margin:28px 0 0;padding:0;border-top:1px solid var(--rule-light)}   /* what every lot is tested for: numbered ruled rows, like the tasting notes (no dots) */
.p-tests li{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule-light)}
.p-tests .snum{flex:none;width:2em;font-size:10.5px;color:var(--stone)}
.p-tests .w{font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.p-quote{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:clamp(22px,2.4vw,34px);color:#FCFAF5}
.p-quote p{font-family:var(--display);font-weight:900;font-size:clamp(24px,2.2vw,34px);line-height:1.12;letter-spacing:-.01em;max-width:18ch;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.p-quote footer{margin-top:14px;font-size:10.5px;letter-spacing:.12em;color:rgba(252,250,245,.82)}
.p-tested .p-photo::after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(180deg,transparent,rgba(31,25,21,.78))}

/* The other two roasts: the roast cards from the coffee page, two up, each one a link (.rlink, in index.css) */
.p-others{padding-bottom:clamp(24px,3vw,48px)}   /* the footer's own top padding follows on the same ink, so this band stops short of the usual section padding */
.p-others .roast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- Phones and portrait tablets ---- */
@media (max-width:1000px){.p-others .roast-grid{grid-template-columns:1fr}}
@media (max-width:860px){
  .p-hero{padding-top:calc(92px + env(safe-area-inset-top,0px))}
  .p-grid{grid-template-columns:1fr;gap:22px;margin-top:10px}
  .p-gallery{margin:0 calc(-1*var(--gut))}   /* the bag runs to the card edges; the swipe has the whole width */
  .pg-stage{max-height:none}
  .pg-thumbs{gap:8px;padding:0 var(--gut)}
  .pg-segs button{width:34px}
  .pg-thumbs button{border-radius:10px}
  .p-info{max-width:none}
  .p-info h1{font-size:clamp(46px,13vw,64px);margin:14px 0 14px}
  .p-split,.p-brew .p-split,.p-tested .p-split{grid-template-columns:1fr;gap:32px}
  .p-tested .p-photo{order:-1}
  .p-photo{aspect-ratio:1/1}
}
@media (max-width:640px){
  .p-sec{padding:56px 0}
  .p-others{padding-bottom:40px}
  .p-cta .btn{flex:1 1 100%}
  .p-specs div{grid-template-columns:92px minmax(0,1fr);gap:12px}
  .p-stat{padding:18px 12px 16px 0}.p-stat:nth-child(even){padding-left:14px}
  .p-stat .v{font-size:clamp(25px,7.2vw,34px)}
  .p-tests{column-gap:16px}
  .p-bagnote{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){.pg-track{scroll-behavior:auto}}