/* v3 layer on the live Big Island base. Loads AFTER /shared/*.css and assets/site.css. Additive only.
   Theme tokens come from the per-guide <style data-slot="theme"> block. Below 1024px nothing changes except the
   'Original Illustration' label (rule copied from UX guide-v3.css, selector re-scoped from body.g3 to live figures). */
:is(.day-image,#route-map,.plan-extra-a,.hero-art){position:relative}
.art-label{position:absolute;left:12px;top:12px;z-index:2;display:inline-block;margin:0;padding:5px 9px;font:700 11px/1 system-ui,sans-serif;letter-spacing:.08em;border-radius:3px;background:var(--berry-deep);color:var(--maple);border:1px solid var(--maple);white-space:nowrap;pointer-events:none}
.hero-art figcaption{font-weight:700}
@media (min-width:1024px){
  main{--v3-gap:32px}
  .overview{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--v3-gap);align-items:start}
  .overview>.overview-head{grid-column:1/-1}
  .overview>.overview-cards{grid-column:8/13;grid-row:2;position:sticky;top:96px}
  .overview>.overview-route{grid-column:1/8;grid-row:2}
  .day .accordion-panel-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--v3-gap);align-items:start}
  .day .accordion-panel-inner>.day-copy{grid-column:1;grid-row:1}
  .day .accordion-panel-inner>.day-image{grid-column:2;grid-row:1;position:sticky;top:96px}
  .day .accordion-panel-inner>.day-photo{grid-column:1/-1}
  .plan-grid.plan-grid-single{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--v3-gap)}
  .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* prose measure: live widths run to ~140 chars per line at 1440; cap prose at 34em (about 75 chars) */
  main :is(p,li):not(nav *,dl *,figure *,.tx-chips *,.jump-nav *,.share-control *,.gallery-grid *,.cd-price){max-width:34em}
  main :is(.eat-gate-card,.ce-big-in,.about-cta-copy,.route-head) :is(p,li){margin-inline:auto}
  main :is(.ce-guar,.photo-credits,.sources-inner) :is(p,li){margin-inline:0}
  .art-label{font-size:14px}
}

/* ===== v3 DESKTOP LAYOUT (template, every guide; Core/owner 8:40 PM Oct 27 2026). Phone and tablet below 1180px are untouched.
   Loads before cp-inline/eat-site, so overrides use extra specificity (html body ...) instead of !important. ===== */
.v3-rail{display:none}
/* >=1024 tidy: trip-card and official-links 'Reviewed' actions overflowed the page by 41px at 1100 (pre-existing, nowrap) */
@media (min-width:1024px){
  html body main .verified-date:not(.verified-date--hero) .vb-line{display:flex;flex-wrap:wrap}
  html body main .verified-date:not(.verified-date--hero) .vb-line .vb-acts{flex-basis:100%;flex-wrap:wrap;white-space:normal}
  html body main .verified-date:not(.verified-date--hero) .vb-line .vb-acts>.vb-sep:first-child{display:none}
  html body .hero .verified-date--hero .vb-line{width:max-content;max-width:none}
}
@media (min-width:1180px){
  :root{--max:1248px;--v3-gap:32px}
  /* hero: copy 7 / poster 5, never taller than the screen */
  html body .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:0;max-height:calc(100svh - 120px)}
  html body .hero-copy{padding:26px 24px 24px max(24px,calc((100vw - var(--max))/2 + 24px));gap:10px;justify-content:center}
  html body .hero h1{font-size:clamp(2.6rem,3.3vw,3.1rem);line-height:1.02;max-width:20ch;margin-bottom:8px}
  html body .hero :is(.kicker,.category-badges){margin-bottom:6px}
  html body .hero .kicker{max-width:none}
  html body .hero .hero-meta{padding-top:10px}
  html body .hero .guide-style-tags{margin-bottom:0}
  html body .hero .dek{max-width:34em}
  html body .hero-art{padding:24px max(24px,calc((100vw - var(--max))/2 + 24px)) 24px 24px;align-self:center;text-align:center}
  html body .hero-art img{height:min(calc(100svh - 300px),480px);width:auto;max-width:100%;margin:0 auto;display:block;object-fit:contain}
  html body .hero-art figcaption{left:52px;top:52px}
  /* custom-plan / sign-up bands: wide strips, copy left, button column right (button <= 480px) */
  html body .ce-wrap{max-width:var(--max);margin:0 auto;padding:0 24px;box-sizing:border-box}
  html body .ce-wrap .cd-plan{flex-direction:row;align-items:center;gap:24px;padding:18px 28px;margin:18px 0;text-align:left}
  html body .ce-wrap .cd-plan-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);column-gap:40px;align-items:center;padding:0}
  html body .ce-wrap .cd-plan-b>:is(h2,p:not(.cd-price)){grid-column:1;text-align:left;margin-inline:0}
  html body .ce-wrap .cd-plan-b>h2{grid-row:1;align-self:end}
  html body .ce-wrap .cd-plan-b>p:not(.cd-price){grid-row:2 / span 2;align-self:start;margin-bottom:0}
  html body .ce-wrap .cd-plan-b>:is(.ce-btn,.cd-price,.cd-smlink){grid-column:2}
  html body .ce-wrap .cd-plan-b>.ce-btn{grid-row:1 / span 2;align-self:center;width:100%;max-width:480px}
  html body .ce-wrap .cd-plan-b>.cd-price{grid-row:3;margin:4px 0 0}
  html body .ce-wrap .cd-plan-b>.cd-smlink{grid-row:4}
  html body .ce-wrap .cd-thumb{flex:none}
  html body .route .ce-wrap{padding:0}
  /* big custom-plan section: wide card, multi-column inside, centred buttons */
  html body section.ce-big.ce-g .ce-big-in{max-width:1040px}
  html body section.ce-big .ce-ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  html body section.ce-big .ce-btn{max-width:480px;margin-inline:auto}
  html body section.ce-big :is(.ce-ex,.tw-trio,.lad-row){max-width:840px;margin-inline:auto}
  html body section.ce-big .lad-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
  html body section.ce-big .lad-row>.lad{width:auto;max-width:none;margin:0}
  html body section.ce-big .tw-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  html body section.ce-big .tw-trio>.tw-ribbon{grid-column:1/-1;justify-self:center}
  html body section.ce-big .ce-btn{display:flex}
  html body section.ce-big .ce-guar ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px}
  html body section.ce-big .ce-guar ul>li{margin:0;break-inside:avoid}
  /* section photos never taller than the screen, never upscaled */
  html body .guide-hero img{width:100%;height:min(70svh,620px);max-height:none;max-width:100%;object-fit:cover;margin:0;display:block}
  html body .guide-hero figcaption{text-align:center}
  html body :is(.day-photo,.gallery-grid figure,.pack-photo,.plan-extra) img{max-height:70svh}
  /* overview: idea + day summary 7 / trip card 5 (map moves to the route rail) */
  html body .overview-route{display:block}
  html body .overview-route>#route-map{display:none}
  html body .overview .day-summary{margin-top:28px}
  html body .overview .day-summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .overview .day-summary-list>*{margin:0}
  /* route: sticky map rail (4 cols) beside the day-by-day (8 cols) */
  html body #route{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--v3-gap);align-items:start}
  html body #route>*{grid-column:1/-1}
  html body #route>.route-head{grid-row:1}
  html body #route>.v3-rail{display:block;grid-column:1/5;grid-row:2;position:sticky;top:88px;margin:0}
  html body #route>.day-accordion{grid-column:5/13;grid-row:2}
  html body .v3-rail-map{margin:0}
  html body .v3-rail-map img{display:block;width:auto;max-width:100%;max-height:calc(100svh - 220px);margin:0 auto}
  /* inside each day: text left, day card + photo right */
  html body .day .accordion-panel-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;row-gap:20px}
  html body .day .accordion-panel-inner>.day-copy{grid-column:1;grid-row:1 / span 2}
  html body .day .accordion-panel-inner>.day-image{grid-column:2;grid-row:1;position:static}
  html body .day .accordion-panel-inner>.day-photo{grid-column:2;grid-row:2;align-self:start}
  /* lower sections: multi-column */
  html body .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--v3-gap);align-items:start}
  html body .faq>:not(details){grid-column:1/-1}
  html body section.checks{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--v3-gap);align-items:start}
  html body section.checks>:not(ul){grid-column:1}
  html body section.checks>ul{grid-column:2;grid-row:1/span 3;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  html body main section.checks ul>li{max-width:none;padding-right:96px;box-sizing:border-box;width:min(100%,calc(29em + 126px))}
  html body .references .photo-credits ul{columns:2;column-gap:var(--v3-gap)}
  /* prose measure: <= 68 characters per line */
  html body main :is(p,li):not(nav *,dl *,figure *,.tx-chips *,.jump-nav *,.share-control *,.gallery-grid *,.cd-price,.verified-date){max-width:min(100%,29em)}
  html body main :is(.intro-copy,.day-copy,.faq details,.checks,.route-head,.related-head,.sources-inner .section-sub) :is(p,li){font-size:17px;line-height:1.6}
  html body main .eat-gate-btns .eat-gate-btn{max-width:480px;margin-inline:auto}
  html body main .eat-gate-btns{justify-content:center}
}
@media (min-width:1400px){
  html body main :is(.intro-copy,.day-copy,.faq,.checks,.route-head,.related-head,.sources-inner .section-sub,.plan-grid,.ce-ex) :is(p,li),html body .hero .dek{font-size:18px}
}

/* ===== v3 DESKTOP DESIGN SYSTEM (1180+, template, every guide; pass 3 Oct 27 2026). One rhythm, one container, one card, one button per role.
   Tokens: section rhythm 96px (48px top + 48px bottom), container 1200px, gutter 24px, card radius 12px, card padding 24px,
   card border 1px var(--line), card shadow --ds-shadow, card background var(--white), h2 40px/1.1, eyebrow 13px caps, head-to-content 32px,
   primary button = green pill 380px max, secondary = outline pill 220px min. Polaroid tilt stays only in .pc-snaps. ===== */
@media (min-width:1180px){
  :root{--ds-sec:48px;--ds-gutter:24px;--ds-radius:12px;--ds-pad:24px;--ds-head-gap:32px;--ds-h2:2.5rem;--ds-eyebrow:13px;
        --ds-shadow:0 1px 2px rgba(15,59,68,.06),0 8px 24px rgba(15,59,68,.07);--v3-gap:var(--ds-gutter)}
  /* rhythm: every content section gets the same 96px between it and the next */
  html body main>section:not(.route-browser){padding-block:var(--ds-sec);margin-block:0}
  html body main>section.about-cta{padding-block:var(--ds-sec)}
  html body #route::before{display:none}
  /* headings: eyebrow + h2, left on the 1200 grid, 32px to content */
  html body main>section :is(.section-kicker,.about-cta-kicker,.v3-rail-kicker){font-size:var(--ds-eyebrow);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;text-align:left}
  html body main>section h2:is([id$="-title"]){font-size:var(--ds-h2);line-height:1.1;margin-top:0}
  html body main>section:is(.overview,.route,.planning,.gallery,.faq,.related,.official-links,.references) :is(.route-head,.planning-head,.related-head,.sources-inner>div:first-child){margin-bottom:var(--ds-head-gap)}
  /* one card */
  html body main :is(aside.trip-card,.day,.ce-wrap .cd-plan,.source-list>div,.faq details,section.checks ul>li,.related article,.plan-grid>.pack,.ce-big .ce-big-in,.tw-tile,.lad,.ce-guar){border-radius:var(--ds-radius);border:1px solid var(--line);box-shadow:var(--ds-shadow);background-color:var(--white)}
  html body main :is(aside.trip-card,.ce-wrap .cd-plan,.source-list>div,.plan-grid>.pack,.tw-tile,.lad,.ce-guar){padding:var(--ds-pad)}
  html body main .ce-big .ce-big-in{padding:48px}
  html body main section.checks ul>li{padding:var(--ds-pad) 96px var(--ds-pad) var(--ds-pad)}
  html body main .related article{overflow:hidden}
  /* equal gutters */
  html body main .overview .day-summary-list,html body main section.ce-big :is(.ce-ex,.lad-row,.tw-trio),html body main .plan-grid{gap:var(--ds-gutter)}
  html body main section.checks>ul{gap:16px}
  /* buttons: primary green pill, secondary outline pill */
  html body main .ce-btn{width:100%;max-width:380px;border-radius:999px;padding:14px 24px;justify-content:center}
  html body main .about-cta-button{min-width:220px;border-radius:999px;padding:14px 24px;text-align:center;box-sizing:border-box}
  /* mid custom-plan card: price sits directly under its button */
  html body main .ce-wrap .cd-plan-b{grid-template-rows:auto auto auto}
  html body main .ce-wrap .cd-plan-b>.ce-btn{grid-row:1;align-self:end}
  html body main .ce-wrap .cd-plan-b>.cd-price{grid-row:2;align-self:start;margin:8px 0 0;text-align:center;max-width:380px}
  html body main .ce-wrap .cd-plan-b>.cd-smlink{grid-row:3;align-self:start}
  html body main .ce-wrap .cd-plan-b>p:not(.cd-price){grid-row:2 / span 2}
  /* body overflow-x:hidden made body a scroll container, so no sticky ever stuck; clip keeps the same clipping without that */
  html body{overflow-x:clip;overflow-y:visible}
  html body main #route .day .accordion-panel-inner>.day-image{position:relative;top:auto}
  /* route rail: map + day list, sticky the whole length of the day-by-day */
  html body #route>.v3-rail{align-self:stretch;position:static}
  html body #route>.v3-rail{display:block}
  html body #route>.v3-rail>.v3-rail-in{position:sticky;top:88px}
  html body .v3-rail-map img{max-height:calc(100svh - 540px);min-height:240px}
  html body .v3-rail-days{margin-top:16px;padding:16px var(--ds-pad);border:1px solid var(--line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow);background:var(--white)}
  html body .v3-rail-days ol{list-style:none;margin:0;padding:0}
  html body .v3-rail-days li{margin:0;max-width:none;border-top:1px solid var(--line)}
  html body .v3-rail-days li:first-child{border-top:0}
  html body .v3-rail-days a{display:block;padding:7px 0;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35}
  html body .v3-rail-days a b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,inherit)}
  html body .v3-rail-days a:hover{text-decoration:underline}
  /* official links + references: full-width head, links in a 2-col grid */
  html body main .sources-inner{display:block;max-width:1200px;margin-inline:auto}
  html body main .source-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-gutter);max-width:none}
  html body main .source-list>div{margin:0}
  html body main .source-list>:has(.verified-date){grid-column:1/-1}
  html body main .references .photo-credits{margin-top:48px}
  /* about strip: inner 1200 container, copy left, button right */
  html body .about-cta-inner{max-width:1200px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center;text-align:left;padding-inline:0}
  html body .about-cta-copy>*{margin-inline:0;text-align:left}
  /* route head: eyebrow + h2 then subtitle, all left */
  html body main #route>.route-head{display:block;padding:0;max-width:none}
  html body main #route>.route-head>p.route-sub{margin:12px 0 0;font-size:17px;text-align:left}
  /* no tilted prints outside the postcard/gallery module */
  html body main section:not(.gallery) :is(.stack-print,.plan-extra,.pack-photos>*,.day-photo){transform:none}
  /* the Reviewed row under the links is a footnote, not a card */
  html body main .source-list>:has(.verified-date){border:0;box-shadow:none;background:none;padding:8px 0 0}
  /* trip index band: same 1200 inner container */
  html body .route-browser .browser-inner{max-width:1200px;padding-inline:0}
}

/* OPTIONAL postcard snapshots (.pc-snaps, content.json postcard_snaps.enabled). Big Island site.css has no pc-snap rules,
   so these are copied verbatim from live provincetown-weekend-from-boston/assets/site.css (lines with .pc-snap*). */
.pc-snaps { --snap-mat: #fcf8f1; --snap-ink: #2a2f36; margin: 4px 0 0; }
.pc-snaps h3 { margin: 0 0 10px; font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.pc-snaps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding: 6px 6px 4px; }
.pc-snap { margin: 0; min-width: 0; padding: 7px 7px 9px; background: var(--snap-mat); border: 1px solid var(--line); box-shadow: 0 4px 12px var(--shadow); transform: rotate(-1.2deg); }
.pc-snap:nth-child(even) { transform: rotate(1.2deg); }
.pc-snap img { display: block; width: 100%; height: auto; object-fit: contain; }
.pc-snap figcaption { margin-top: 6px; font-family: "Newsreader", Georgia, serif; font-size: .95rem; line-height: 1.3; color: var(--snap-ink); }
.pc-snap figcaption b { font-weight: 700; }
/* live media rule ".overview-route > .pc-snaps{grid-row:3}" NOT copied: Big Island site.css has no matching .overview-route grid, so it would misplace the block */
/* maplightbox-20261027 (owner 10:38 PM ET): desktop-only route-map lightbox; mobile untouched */
.v3-maplb[hidden]{display:none!important}
@media (min-width:1024px){
html.v3ml-on figure.route-map img{cursor:zoom-in}
.v3-maplb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(10,14,20,.82);padding:3vh 3vw}
.v3-maplb-box{position:relative;max-width:94vw;max-height:94vh;display:flex;flex-direction:column;align-items:center}
.v3-maplb-box img{max-width:94vw;max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#fff;cursor:default}
.v3-maplb-close{position:absolute;top:-.5rem;right:-.5rem;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#111;font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.v3-maplb-close:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}
.v3-maplb .art-label{position:absolute;top:.6rem;left:.6rem}
}

/* fix-a-20261028: route-map "Original Illustration" tag sits in the bottom-left keep-out box, off the title strip (overview, desktop rail, lightbox) */
figure.route-map .rm-wrap{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto}
figure.route-map .rm-wrap>.art-label{top:auto;bottom:10px;left:10px}
.v3-maplb .art-label{top:auto;bottom:.6rem;left:.6rem}
/* fix-c-20261028: center the "Save trips you love, free" link on desktop */
@media (min-width:768px){#ce-cta-end>.eat-plan-signup,.ce-big>.eat-plan-signup{margin-left:auto;margin-right:auto;text-align:center}}