/* v7 home page (design/direction-b.md): camera roll, travel modules, letter from Emma.
   Mobile first (320–430 px), then tablet and desktop. Tokens only; no shadows at rest, no rules, no gradients
   except the neutral scrim under text on a photograph. Every move has a reduced-motion and global-pause fallback. */

/* Hero: a text panel. One statement, the price from the catalogue, one action, the trip's coordinates. */
.roll-hero{padding:28px var(--gutter) 30px;background:var(--cream)}
.roll-hero h1{font-size:clamp(36px,10.4vw,112px);line-height:.98}
.roll-hero [data-hero-place]{white-space:nowrap}
.roll-price{margin-top:14px;font-size:19px;line-height:1.4;max-width:30ch}
/* Where was your last trip? Two rows of place chips that scroll sideways; the page follows the choice. */
.trip-ask{margin-top:20px}
.trip-ask-title{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.trip-ask-hint{margin-top:2px;font-size:15px;line-height:1.4;color:var(--muted)}
.trip-chips{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;margin:12px calc(-1 * var(--gutter)) 0;padding:2px var(--gutter) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter);scrollbar-width:none;
 -webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 40px),#0000)}
.trip-chips::-webkit-scrollbar{display:none}
.trip-chip{min-height:44px;padding:0 16px;border-radius:var(--pill);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--stone);font:500 16px/1 var(--sans);color:var(--ink);white-space:nowrap;transition:background-color .15s ease,color .15s ease,transform .12s var(--ease-out)}
.trip-chip[aria-pressed="true"]{background:var(--ink);color:var(--cream);box-shadow:none}
.trip-chip:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.trip-chip:not([aria-pressed="true"]):hover{background:var(--sand)}}
@media(prefers-reduced-motion:reduce){.trip-chip{transition:none}.trip-chip:active{transform:none}}
.roll-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.roll-hero-actions .btn{min-height:52px}
.roll-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px;color:var(--muted)}
.roll-where>span:first-child{font-weight:500;color:var(--ink)}
/* The chosen trip's scenery, full-bleed behind the hero: the lead animal's film over its first frame, under a scrim.
   The scrim is at least 52% dark where the large heading sits and 68% or more under the smaller copy, so cream text
   keeps 3:1 (large) and 4.5:1 (body) contrast even over a white picture. The scene never sets the hero's height. */
.roll-hero.has-scene{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:var(--cream)}
.roll-scene{position:absolute;inset:0;z-index:-1;background:var(--night)}
.roll-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.roll-scene-out{transition:opacity .45s var(--ease-out)}
.roll-scene-out.is-leaving{opacity:0}
.roll-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,20,.52) 0%,rgba(22,22,20,.6) 14%,rgba(22,22,20,.68) 26%,rgba(22,22,20,.74) 100%)}
.has-scene .trip-ask-hint,.has-scene .roll-where,.has-scene .roll-where .coords{color:var(--sage)}
.has-scene .roll-where>span:first-child{color:var(--cream)}
.has-scene .trip-chip{background:rgba(22,22,20,.55);box-shadow:inset 0 0 0 1.5px rgba(238,238,230,.5);color:var(--cream)}
.has-scene .trip-chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:none}
.has-scene :focus-visible{outline-color:var(--cream);box-shadow:0 0 0 3px var(--night)}
@media(hover:hover) and (pointer:fine){.has-scene .trip-chip:not([aria-pressed="true"]):hover{background:rgba(22,22,20,.78)}}
@media(prefers-reduced-motion:reduce){.roll-scene-out{transition:none}}
:root[data-motion-paused="true"] .roll-scene-out{transition:none}

/* The camera roll: a contact sheet of frames in two offset columns, each fused to its coloured strip. */
.roll{padding:0 var(--gutter);background:var(--cream)}
.roll-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 16px;margin-bottom:20px}
.roll-head h2{font-size:clamp(28px,6.2vw,56px)}
.roll-head h2:focus{outline:none}
.roll-head p{grid-column:1/-1;max-width:46ch;font-size:16px;color:var(--muted)}
.roll-motion{min-height:44px;padding:0 2px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.roll-sheet{list-style:none;margin:0;padding:0 0 calc(21% + 24px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
/* Photo and pick button share the first grid cell, so the button stays on the photo's corner however tall the strip grows. */
.frame{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0}
/* The second column sits lower, like prints laid out on a sheet. */
.frame:nth-child(even){transform:translateY(34%)}
.frame-photo{position:relative;display:block;grid-area:1/1}
.frame-photo::after{content:"";position:absolute;inset:0;z-index:2;border:3px solid var(--mint);opacity:0;pointer-events:none;transition:opacity .2s ease}
.frame:has(.frame-pick[aria-pressed="true"]) .frame-photo::after{opacity:1}
.frame-media{aspect-ratio:4/5;background:var(--sand)}
.frame-media.is-missing>.media-fallback,.run-media.is-missing>.media-fallback{font-size:22px}
/* One 28 px line; a long "Place · Name" on a narrow phone, zoomed or with wider text spacing wraps instead of being cut off. */
.frame-strip{grid-area:2/1;min-height:28px;padding:4px 8px;font-size:13px;font-weight:500;line-height:20px;overflow-wrap:anywhere;background:var(--strip,var(--stone));color:var(--strip-ink,var(--ink))}
.strip-stone{--strip:var(--stone)}
.strip-mint{--strip:var(--mint)}
.strip-sand{--strip:var(--sand)}
.strip-night{--strip:var(--night);--strip-ink:var(--cream)}

/* Pick button: a 44 px round control. The plus folds into a check when the animal is on the roll. */
.frame-pick{position:relative;grid-area:1/1;align-self:end;justify-self:end;margin:0 8px 8px 0;z-index:3;width:44px;height:44px;border-radius:50%;background:var(--cream);color:var(--ink);box-shadow:inset 0 -2px 0 rgba(0,0,0,.16);transition:background-color .2s ease,transform .16s var(--ease-out)} /* taste-skill-ignore: the tactile button's firm lower edge (direction-b), not a drop shadow */
.frame-pick>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.frame-pick::before,.frame-pick::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2.5px;margin:-1.25px 0 0 -9px;border-radius:2px;background:currentColor;transition:transform .28s var(--ease-out)}
.frame-pick::after{transform:rotate(90deg)}
.frame-pick[aria-pressed="true"]{background:var(--mint)}
.frame-pick[aria-pressed="true"]::before{transform:translate(-4px,2px) rotate(45deg) scaleX(.5)}
.frame-pick[aria-pressed="true"]::after{transform:translate(2.5px,-1px) rotate(-50deg) scaleX(.9)}
.frame-pick:active{transform:scale(.9);box-shadow:inset 0 -1px 0 rgba(0,0,0,.16)} /* taste-skill-ignore: the tactile button's firm lower edge (direction-b), not a drop shadow */
/* The button sits on a photograph: an ink ring against the button and a cream outline against the photo,
   so the focus reads on dark jungle and bright sand alike. */
.frame-pick:focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.16),0 0 0 3px var(--ink)} /* taste-skill-ignore: focus ring plus the tactile lower edge, not a drop shadow */
@media(hover:hover) and (pointer:fine){.frame-pick:hover{background:var(--paper)}.frame-pick[aria-pressed="true"]:hover{background:var(--lime-2)}}

/* Roll bar: docked at the bottom once something is picked; it slides away again when the roll is empty. */
.roll-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--night);color:var(--cream);visibility:hidden;transform:translateY(110%);transition:transform .32s var(--ease-out),visibility 0s linear .32s}
.roll-bar.is-shown{visibility:visible;transform:none;transition:transform .32s var(--ease-out)}
.roll-fan{flex:none;width:76px;height:52px}
.roll-fan>*{width:34px;height:44px;border-width:2px}
.roll-fan>.is-new{animation:roll-drop .34s var(--ease-out) backwards}
@keyframes roll-drop{from{opacity:0;translate:0 -16px}}
.roll-sum{display:grid;flex:1;min-width:0;font-size:15px;line-height:1.3}
.roll-sum strong{font-weight:600;white-space:nowrap}
.roll-sum span{font-size:14px;color:var(--stone)}
.roll-go{flex:none;min-height:48px;padding:10px 18px;white-space:nowrap}
body:has(.roll-bar.is-shown) .site-footer{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
@media(max-width:350px){.roll-fan{display:none}}

/* Travel modules: a full-bleed photograph of people on the trip, a white headline and a light pill. */
.travel{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(125vw,100svh);overflow:hidden;background:var(--night);color:var(--cream)}
.travel-media{position:absolute;inset:0;z-index:-2;background:var(--night)}
.travel-media>img,.travel-media .media-fallback img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.travel-media.is-missing{background:var(--night)}
.travel-media.is-missing>.media-fallback{display:block;padding:0}
/* The scrim rides on the copy, not the section, so it always sits under the words whatever the photo's height:
   at least 72% night behind every line keeps cream text at 4.5:1 or more even over white sand or sky,
   then it fades out over 96 px above the copy. */
.travel-copy{position:relative;display:grid;justify-items:start;gap:12px;padding:40px var(--gutter) 32px}
.travel-copy::before{content:"";position:absolute;inset:-96px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--night) 84%,transparent),color-mix(in srgb,var(--night) 72%,transparent) calc(100% - 96px),transparent)} /* taste-skill-ignore: neutral scrim under text on a photograph */
.travel-copy h2{max-width:14em;color:var(--cream);font-size:clamp(34px,8.6vw,84px)}
.travel-copy p{max-width:34ch;font-size:17px}
.travel-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px;font-weight:500}
.travel-where .coords.is-pending{visibility:hidden}
.btn.travel-pill{margin-top:6px;background:var(--cream);color:var(--ink)}
@media(hover:hover) and (pointer:fine){.btn.travel-pill:hover{background:var(--paper)}}

/* Frame by frame: the remembered trip's photographs in a sideways run, one frame lifted off the table. */
.run-sec{padding:56px 0 52px;background:var(--sand)}
.run-sec>h2,.run-note,.run-links{margin-inline:var(--gutter)}
.run{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;padding:34px var(--gutter) 22px}
.run::-webkit-scrollbar{display:none}
.run:focus-visible{outline-offset:-3px}
/* With a mouse there is no swipe: show a slim scrollbar as the cue that the run moves sideways (touch keeps the peeking next frame). */
@media(hover:hover) and (pointer:fine){.run{scrollbar-width:thin;scrollbar-color:var(--ink) transparent}.run::-webkit-scrollbar{display:block;height:6px}.run::-webkit-scrollbar-thumb{border-radius:var(--pill);background:var(--ink)}}
.run ul{list-style:none;display:flex;gap:14px;width:max-content;margin:0;padding:0}
.run-frame{flex:none;width:min(64vw,300px);scroll-snap-align:start}
.run-media{aspect-ratio:4/5;background:var(--stone)}
.run-frame.is-lifted{padding:6px 6px 0;background:var(--paper);transform:translateY(-20px) rotate(-2.2deg)}
.run-frame a{display:block}
.run-note{max-width:44ch;font-size:19px;line-height:1.45}
.run-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:12px}

/* Inclusions, the places and what always holds: plain name columns, every name at one size. */
.incl{padding:64px var(--gutter);background:var(--cream)}
.incl>h2{margin-bottom:32px}
.incl-cols{display:grid;gap:40px}
.incl-col h3{margin-bottom:10px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted)}
.incl-col ul{list-style:none;display:grid;margin:0;padding:0}
.incl-col li,.incl-always .help-line{font-size:20px;line-height:1.3;font-weight:400;letter-spacing:-.01em}
/* What you get: a check-marked list in regular weight (the check comes from kit.css). */
.incl-col:not(.incl-places) li{display:flex;align-items:center;gap:12px;padding:6px 0}
/* The places are links: rows on a surface that end in an arrow (kit.css). */
.incl-places ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.incl-places li{padding:0}
.incl-places a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 8px 0 14px;border-radius:var(--radius);background:var(--paper);font-size:18px;font-weight:500}
.incl-always .pillar-help{display:block;max-width:none;margin:0;padding:5px 0;background:none;border-radius:0}
.incl-always .help-leaf{display:none}
.incl-always .help-line small{margin-top:6px;font-size:16px;font-weight:400;line-height:1.45;max-width:36ch}
.incl-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:28px}
@media(hover:hover) and (pointer:fine){.incl-places a:hover{background:var(--sand)}}

/* Bundles: a large-type table from the catalogue, then the whole collection. */
.bundles{padding:64px var(--gutter);background:var(--paper)}
.bundles-lede{margin-top:12px;max-width:40ch;font-size:19px;line-height:1.4}
.roll-bundles{width:100%;margin-top:28px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.roll-bundles thead th{padding:0 0 8px;font-size:14px;font-weight:500;color:var(--muted);text-align:left}
.roll-bundles thead th:not(:first-child),.roll-bundles td{text-align:right}
.roll-bundles tbody th,.roll-bundles td{padding:14px 0;vertical-align:top}
.roll-bundles tbody tr+tr>*{border-top:1px solid var(--line)}
.roll-bundles tbody th{padding-right:12px;font-size:clamp(24px,6.4vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.03em;text-align:left}
.roll-bundles tbody th small{display:block;margin-top:6px;font-size:14px;font-weight:400;line-height:1.35;letter-spacing:0;color:var(--muted)}
.roll-bundles td:nth-child(2){font-size:clamp(24px,6.4vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.03em;white-space:nowrap}
.roll-bundles td:nth-child(3){padding-left:14px;font-size:16px;line-height:1.9;white-space:nowrap}
.roll-bundles .save{display:block;width:max-content;margin:8px 0 0 auto;padding:2px 7px;border-radius:2px;background:var(--coral);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:0;line-height:1.4}
/* At 320 px (or zoomed to it) with wider text spacing the three columns overflowed; the big figures step down a size. */
@media(max-width:374px){.roll-bundles tbody th,.roll-bundles td:nth-child(2){font-size:21px}.roll-bundles td:nth-child(3){padding-left:8px;font-size:15px}.roll-bundles tbody th{padding-right:8px;overflow-wrap:anywhere}}
.bundles-note{margin-top:22px;max-width:52ch;font-size:16px}
.bundle-stub{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.bundle-stub .stub-audience{font-size:16px;color:var(--muted)}

/* Team and the letter from Emma. A missing team photograph collapses and the letter stands alone. */
.letter-sec{display:grid;gap:32px;padding:64px var(--gutter);background:var(--cream)}
.team-photos{display:grid;grid-template-columns:3fr 2fr;align-items:end;gap:10px}
.team-photos:not(:has(.team-photo:not(.is-missing))){display:none}
.team-photo{aspect-ratio:4/5}
.team-photo+.team-photo{aspect-ratio:3/4}
.letter{display:grid;gap:16px;max-width:38em}
.letter h2{margin-bottom:6px}
.letter p{font-size:18px;line-height:1.6}
.letter-sign{display:flex;flex-wrap:wrap;align-items:end;gap:4px 18px;margin-top:8px}
.letter-signature{width:190px}
.letter-sign p{font-size:16px;line-height:1.4;color:var(--muted)}
.letter-sign strong{display:block;font-weight:600;color:var(--ink)}

/* Questions as reading text. */
.faq-read{padding:64px var(--gutter);background:var(--paper)}
.faq-read>h2{margin-bottom:28px}
.faq-items{display:grid;gap:26px}
.faq-item h3{font-size:20px;line-height:1.3}
.faq-item p{margin-top:6px;max-width:52ch;font-size:17px}
.faq-item a{text-decoration:underline;text-underline-offset:3px}
.faq-read>.text-link{margin-top:20px}

/* Closing: three photographs, then a band. */
.close-sec{padding:48px var(--gutter) 40px;background:var(--cream)}
.close-photos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0}
.close-photos>li{display:grid;align-content:start;gap:10px;min-width:0}
.close-photo{aspect-ratio:4/5}
.close-photos .pillar-title{font:500 17px/1.15 var(--sans);letter-spacing:-.015em}
.close-band{display:grid;justify-items:start;gap:20px;padding:56px var(--gutter);background:var(--mint);color:var(--ink)}
.close-band h2{max-width:14em}

@media(min-width:560px){
 .roll-sheet{grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:calc(11% + 24px);gap:28px 14px}
 .frame-strip{font-size:14px;padding:0 10px}
 .incl-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
 .incl-always{grid-column:1/-1}
 .faq-items{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
 .close-photos{gap:16px}
 .close-photos .pillar-title{font-size:24px}
}
@media(min-width:900px){
 .roll-hero{padding:64px var(--space) 48px}
 .roll-hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:end}
 .roll-hero h1,.trip-ask{grid-column:1/-1}
 .trip-chips{display:flex;flex-wrap:wrap;margin:12px 0 0;padding:2px 0 6px;overflow:visible;-webkit-mask:none;mask:none}
 .roll-price{margin-top:24px;font-size:21px}
 .roll-hero-actions{justify-content:flex-end;margin-top:0}
 .roll{padding:0 var(--space)}
 .roll-head{margin-bottom:32px}
 .travel{min-height:min(88svh,920px)}
 .travel-copy{padding:72px var(--space) 64px}
 .travel-copy p{font-size:19px}
 .run-sec{padding:120px 0 104px}
 .run-sec>h2,.run-note,.run-links{margin-inline:var(--space)}
 .run{padding:44px var(--space) 28px;scroll-padding-inline:var(--space)}
 .run ul{gap:20px}
 .run-frame{width:clamp(240px,24vw,340px)}
 .incl,.bundles,.letter-sec,.faq-read{padding:120px var(--space)}
 .incl-cols{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
 .incl-always{grid-column:auto}
 .incl-col li,.incl-always .help-line{font-size:26px}
 .bundles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:64px;align-items:start}
 .bundles>h2{grid-column:1/-1;margin-bottom:32px}
 .bundles-lede,.bundles-note,.bundle-stub{grid-column:1}
 .bundles-lede{margin-top:0}
 .roll-bundles{grid-column:2;grid-row:2/6;margin-top:0}
 .letter-sec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center}
 .letter-sec:not(:has(.team-photo:not(.is-missing))){grid-template-columns:minmax(0,1fr)}
 .faq-items{gap:40px 64px}
 .close-sec{padding:120px var(--space) 64px}
 .close-photos{gap:24px}
 .close-photos .pillar-title{font-size:30px}
 .close-band{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:96px var(--space)}
 .roll-bar{left:50%;right:auto;bottom:20px;width:min(600px,calc(100% - 48px));padding:8px 8px 8px 16px;border-radius:var(--pill);transform:translate(-50%,160%)}
 .roll-bar.is-shown{transform:translate(-50%,0)}
}
@media(min-width:1200px){
 .roll-sheet{grid-template-columns:repeat(6,minmax(0,1fr));padding-bottom:calc(8% + 24px);gap:32px 18px}
}

@media(prefers-reduced-motion:reduce){
 .frame-pick,.frame-pick::before,.frame-pick::after,.frame-photo::after,.roll-bar,.roll-bar.is-shown{transition:none}
 .roll-fan>.is-new{animation:none}
 .frame-pick:active{transform:none}
}
html[data-motion-paused="true"] :is(.frame-pick,.frame-pick::before,.frame-pick::after,.frame-photo::after,.roll-bar,.roll-bar.is-shown){transition:none}
html[data-motion-paused="true"] .roll-fan>.is-new{animation:none}
html[data-motion-paused="true"] .frame-pick:active{transform:none}

/* Each bundle name opens the bundle picker: an underlined name with the arrow from kit.css. */
.bundle-choose{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;text-decoration-color:rgba(38,38,38,.35)}
.bundle-choose::after{width:28px;height:28px;font-size:15px}