/* v7 destination, animal and info pages (design/direction-b.md): camera-roll frames with a coloured strip fused
   to the lower edge, full-bleed travel scenes with a white headline and a light pill, coordinates as a quiet readout.
   Mobile first (320–430 px). Tokens only, square corners, no shadows at rest; every move has a reduced-motion
   and global-pause fallback. Scoped to the .pg page roots so the home page and checkout keep their own look. */

/* ---------- Frames: "Thailand · Mali" ---------- */
.shot{margin:0;display:flex;flex-direction:column;min-width:0;background:var(--paper);transition:transform .16s var(--ease-out)}
.shot-photo{position:relative;display:block;overflow:hidden}
.shot-media{aspect-ratio:4/5}
.shot-media>img{width:100%;height:100%;object-fit:cover}
/* One 28 px line; a long "Place · Name" on a narrow phone, zoomed or with wider text spacing wraps instead of being cut off. */
.shot-strip,.tile-strip,.stage-strip{display:block;min-height:28px;padding:4px 10px;font:500 13px/20px var(--sans);letter-spacing:.005em;overflow-wrap:anywhere}
.is-stone>.shot-strip,.tile-strip.is-stone{background:var(--stone);color:var(--ink)}
.is-mint>.shot-strip,.tile-strip.is-mint{background:var(--mint);color:var(--ink)}
.is-sand>.shot-strip,.tile-strip.is-sand{background:var(--sand);color:var(--ink)}
.is-night>.shot-strip,.tile-strip.is-night{background:var(--night);color:var(--cream)}
/* A frame inside a link gives a small press, like picking up a print. */
:is(.pg-roll-item>a,.dest-animal-photo,.trip-roll a,.about-roll a):active .shot{transform:scale(.98)}
@media(min-width:760px){.shot-strip,.tile-strip,.stage-strip{font-size:14px}}

/* Light pill for photographs; the firm lower edge comes from .btn. */
.btn.pg-light{background:var(--cream);color:var(--ink)}
@media(hover:hover) and (pointer:fine){.btn.pg-light:hover{background:var(--paper)}}

/* ---------- Shared page rhythm ---------- */
.pg-intro{display:grid;gap:22px;margin-bottom:32px}
.pg-intro h1{font-size:clamp(38px,9.6vw,76px)}
.pg-intro p{font-size:18px;line-height:1.5;margin-top:12px;max-width:52ch}
.pg-body{padding-top:44px}
.pg-sec{margin-top:72px}
.pg-sec h2{font-size:clamp(30px,7.4vw,56px)}
@media(min-width:900px){.pg-sec{margin-top:128px}.pg-body{padding-top:72px}}

/* Quick-jump list: a short scrolling list of places whose ends fade (kit .fade-list). */
.jump-list{list-style:none;margin:0;padding:14px 16px;background:var(--paper)}
.jump-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:17px}
.jump-list a{justify-content:flex-start}
.jump-list a>span:first-child{min-width:0;margin-right:auto}
.jump-list small,.jump-list .coords{flex-shrink:0;font-size:14px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.jump-list a:hover>span:first-child{text-decoration:underline;text-underline-offset:4px}}

/* A kind of animal (/adopt/<kind>): tiles of its animals, the near relatives people also look for, and the way on. */
.group-page .pg-intro p+p{margin-top:0}
.group-related{display:grid;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.group-related li{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.group-related li>span{font-size:16px;line-height:1.5;color:var(--muted)}
.group-links{display:flex;flex-wrap:wrap;column-gap:24px;margin-top:24px}
.group-index .jump-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));column-gap:24px;margin-top:20px}
.animal-kind{margin-top:4px}

/* Dark band with a light pill. */
.pg-band{display:grid;gap:18px;justify-items:start;margin:72px calc(var(--gutter)*-1) 0;padding:48px var(--gutter) 52px;background:var(--night);color:var(--cream)}
.pg-band h2{font-size:clamp(30px,7.4vw,56px);max-width:16ch}
.pg-band p{font-size:17px;line-height:1.55;max-width:52ch}
@media(min-width:900px){.pg-band{margin:128px 0 0;padding:72px 64px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}.pg-band h2{grid-row:span 2}.pg-band p{font-size:18px}}

/* ---------- Destinations index: the camera roll ---------- */
.dest-index .pg-intro{margin-bottom:36px}
.pg-roll{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}
.pg-roll-item{min-width:0}
.pg-roll-item>a{display:grid;gap:10px;align-content:start}
.pg-roll-copy{display:grid;gap:2px;justify-items:start;min-width:0}
.pg-roll-name{font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.pg-roll-price{font-size:15px;line-height:1.4}
.pg-roll-copy .season-line{margin-top:6px}
@media(hover:hover) and (pointer:fine){.pg-roll-item>a:hover .pg-roll-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}}
@media(min-width:760px){.pg-roll{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 20px}.pg-roll-name{font-size:20px}}
@media(min-width:900px){.index-intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}.index-intro .jump-list{max-height:260px}}
@media(min-width:1080px){.pg-roll{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Full-bleed scenes (destination, how it works) ---------- */
.pg-top{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.pg-top .crumbs{margin-bottom:4px}
.pg-scene{position:relative;display:grid;align-items:end;min-height:max(520px,min(76svh,760px));overflow:hidden;isolation:isolate;background:var(--night);color:var(--paper)}
.pg-scene-photo{position:absolute;inset:0;z-index:0;background:var(--night)}
.pg-scene-photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.pg-scene-travel{z-index:1}
.pg-scene-travel.is-missing{display:none}
/* The one gradient: a neutral scrim under the words. It rides on the copy (full bleed), not the scene, so on tall
   desktop scenes the coordinates and headline at the top of the copy are covered too: at least 72% night behind
   every line keeps cream text at 4.5:1 or more over any photo, then it fades out over 96 px above the copy. */
.pg-scene-copy{position:relative;z-index:3;display:grid;gap:12px;justify-items:start;width:100%;max-width:1320px;margin:0 auto;padding:40px var(--gutter) 28px}
.pg-scene-copy::before{content:"";position:absolute;inset:-96px -100vw 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)}
.pg-scene h1{font-size:clamp(36px,10vw,88px);color:var(--paper)}
.pg-scene-lede{font-size:18px;line-height:1.45;max-width:34ch}
.pg-scene-actions{margin-top:6px}
.pg-scene-fine{font-size:15px;line-height:1.4}
.scene-coords{min-height:20px}
@media(min-width:900px){
 .pg-top{padding:0 var(--space)}
 .pg-scene{min-height:min(84svh,820px)}
 .pg-scene-copy{gap:16px;padding:56px var(--space) 56px}
 .pg-scene h1{max-width:16ch}
 .pg-scene-lede{font-size:20px}
}

/* ---------- Destination page ---------- */
.dest-animals{margin-top:56px}
@media(min-width:900px){.dest-animals{margin-top:96px}}
.dest-animals>h2{margin-bottom:28px}
.dest-roll{list-style:none;margin:0;padding:0;display:grid;gap:48px}
.dest-animal{display:grid;gap:16px;min-width:0}
.dest-animal-photo{display:block;width:88%}
/* Prints laid down one after another, alternating sides. */
.dest-animal:nth-child(even) .dest-animal-photo{justify-self:end}
.dest-animal-copy{display:grid;gap:8px;justify-items:start}
.dest-animal-copy h3{font-size:clamp(32px,8.4vw,48px);font-weight:500;letter-spacing:-.035em;line-height:1.02}
.dest-animal-moment{font-size:18px;line-height:1.45;max-width:40ch}
.dest-animal .actions{gap:8px 20px;margin-top:6px}
@media(hover:hover) and (pointer:fine){.dest-animal-copy h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}}
@media(min-width:760px){
 .dest-roll.n2,.dest-roll.n3{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 28px}
 .dest-roll.n2 .dest-animal-photo,.dest-roll.n3 .dest-animal-photo{width:100%}
 .dest-roll.n2 .dest-animal:nth-child(even),.dest-roll.n3 .dest-animal:nth-child(even){padding-top:80px}
 .dest-roll.n1 .dest-animal{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
 .dest-roll.n1 .dest-animal-photo{width:100%}
}
@media(min-width:1080px){.dest-roll.n2{max-width:920px}.dest-roll.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.dest-roll.n3 .dest-animal:nth-child(even){padding-top:112px}}

/* Whole trip: a dark band with the animals held as a fan of prints (kit .fan). */
.trip-band{display:grid;gap:28px;margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);padding:48px var(--gutter) 52px;background:var(--night);color:var(--cream)}
.trip-band h2{color:var(--cream)}
.trip-band-copy{display:grid;gap:18px;justify-items:start}
.pg .trip-offer{grid-area:auto}
.trip-band .trip-offer{width:100%;padding:0;background:transparent;gap:14px}
.trip-band .trip-offer p{font-size:17px}
.trip-band .trip-offer strong{color:var(--cream)}
.trip-honest{font-size:16px;line-height:1.6;max-width:56ch}
.trip-fan.fan,.how-fan.fan{height:178px;margin-top:4px}
.trip-fan.fan,.how-fan.fan{--fan-spread:2.6}
.trip-fan.fan>*,.how-fan.fan>*{width:108px;height:135px;border:5px solid var(--paper);transform:translateX(calc(var(--fan-shift,0px)*var(--fan-spread))) translateY(calc(-1*var(--fan-lift,0px))) rotate(var(--fan-turn,0deg))}
@media(min-width:400px){.trip-fan.fan,.how-fan.fan{--fan-spread:3.4}}
.trip-band.is-single{gap:0}
@media(min-width:900px){
 .trip-band{margin-left:0;margin-right:0;padding:72px 64px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
 .trip-band.is-single{grid-template-columns:minmax(0,1fr)}
 .trip-band.is-single .trip-band-copy{max-width:720px}
 .trip-fan.fan{height:240px}.trip-fan.fan>*{width:150px;height:188px}
 .trip-band .trip-offer{grid-template-columns:1fr auto;align-items:center}.trip-band .trip-offer .btn{width:auto}
}

.dest-others{display:grid;gap:18px}
@media(min-width:900px){.dest-others{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}

/* ---------- Animals index ---------- */
.animals-index .product-tile>a{gap:0}
.animals-index .tile-species{margin-top:8px;font-size:15px}
@media(hover:hover) and (pointer:fine){.animals-index .product-tile>a:hover .tile-strip{text-decoration:underline;text-underline-offset:3px}}

/* ---------- Animal page ---------- */
.animal-page .product-info{gap:16px}
.animal-page .product-info h1{font-size:clamp(36px,10vw,80px)}
.stage-strip{margin:0 calc(var(--gutter)*-1);padding:4px var(--gutter);background:var(--mint);color:var(--ink)}
/* 8 px of padding so the focus ring is not clipped by the sideways scroller. */
.animal-page .image-tabs{gap:10px;margin:9px -3px 0;padding:8px}
.animal-page .image-tabs button{width:64px;height:80px;border-radius:0;background:var(--sand);box-shadow:none;transition:transform .16s var(--ease-out)}
/* Selected and focused must look different: the selected thumbnail gets an ink frame inside its edge (with a cream
   line so it reads on dark thumbnails), and keyboard focus keeps the shared outline outside it. */
.animal-page .image-tabs button[aria-pressed="true"]{box-shadow:none;outline:none}
.animal-page .image-tabs button[aria-pressed="true"]::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 5px var(--cream)}
.animal-page .image-tabs button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--cream)}
.animal-page .image-tabs button:active{transform:scale(.96)}
.animal-page .image-tabs .video-tab{background:var(--night);color:var(--cream)}
.tab-play{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cream);color:var(--ink)}
.tab-play svg{margin-left:2px}
.animal-page .image-tabs .video-tab small{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:2px 0;background:var(--night);color:var(--cream);font-size:13px;line-height:1.3;text-align:center}
.animal-page .media-captions{margin-top:2px}
.name-meaning{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:16px;line-height:1.45}
.name-meaning strong{font-weight:600}
.name-say{font-size:15px;color:var(--muted)}
.name-gloss{flex-basis:100%}
.animal-page .product-species{font-size:17px}
.animal-where{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:15px;font-weight:500}
.animal-page .price-line strong{font:500 40px/1 var(--sans);letter-spacing:-.04em}
.animal-page .product-help{background:var(--sand)}
.animal-page .animal-facts dd{gap:8px}
.facts-note{font-size:14px;line-height:1.5;color:var(--muted)}
/* The own-tracked-animal upgrade: a tone step, not an outlined box. */
.animal-page .own-card{gap:12px;padding:22px 18px;background:var(--sand);box-shadow:none}
.animal-page .own-card h2{font:500 clamp(24px,6.4vw,32px)/1.1 var(--sans);letter-spacing:-.03em}
.animal-page .own-card-price .own-price strong{font:500 32px/1 var(--sans)}
.animal-page .own-card .track-badge.is-delayed,.animal-page .product-help+.animal-facts .track-badge.is-delayed{background:var(--paper)}
.animal-page .animal-facts .track-badge.is-delayed{background:var(--sand)}
.animal-page .offer-bundle-rows h2{font:500 24px/1.15 var(--sans);letter-spacing:-.025em}
@media(min-width:900px){.stage-strip{margin:0;padding:4px 12px}.animal-page .product-info{padding-top:8px}}
/* The search phrase over an h1 ("Adopt a sea otter"): a small line inside the heading, so the heading carries it. */
.h1-kicker{display:block;margin-bottom:12px;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:.06em;text-transform:uppercase}

/* What you'll see as a member: preview cards right under the gallery. A sideways row with the next card peeking on
   phones, four columns on desktop. Media boxes and text blocks have fixed sizes, so a card keeps its height while its
   data loads and nothing below moves. */
.peek{display:grid;gap:8px;min-width:0}
.peek-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px}
.peek-head h2{font:500 22px/1.2 var(--sans);letter-spacing:-.02em}
.peek-row{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;margin:0 calc(var(--gutter)*-1);padding:8px var(--gutter) 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.peek-row::-webkit-scrollbar{display:none}
.peek-card{display:grid;min-width:0;scroll-snap-align:start}
.peek-link{display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:12px;border-radius:12px;background:var(--paper);color:var(--ink);transition:transform .16s var(--ease-out)}
.peek-link:active{transform:scale(.98)}
.peek-fill{display:contents}
.peek-kicker{font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.peek-media{position:relative;display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--sand)}
.peek-media img{width:100%;height:100%;object-fit:cover}
.peek-body{display:grid;align-content:start;gap:6px;min-height:96px}
.peek-tag{justify-self:start;padding:2px 8px;border-radius:var(--radius);background:var(--sand);font-size:13px;font-weight:600;line-height:1.4}
.peek-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:17px;font-weight:600;line-height:1.3}
.peek-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;line-height:1.4;color:var(--muted)}
.peek-map .peek-sub{display:block}
/* Live map: the route on the species' satellite picture (or, without one, a dotted night ground, which also shows while
   the picture loads), the start in cream, weekly beads, today's end with a pulse. A dark edge keeps the line, the beads
   and the labels readable over bright sand, snow and surf. */
.peek-map-art{--peek-edge:rgba(24,22,20,.62);background:radial-gradient(rgba(238,238,230,.16) 1px,transparent 1.4px) 0 0/14px 14px var(--night)}
.peek-map-art>svg{position:absolute;inset:0;width:100%;height:100%}
.peek-edge{fill:none;stroke:var(--peek-edge);stroke-width:5.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.peek-line{fill:none;stroke:var(--mint);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.peek-bead{fill:var(--mint);stroke:var(--peek-edge);stroke-width:1.5}
.peek-start{fill:var(--cream)}
.peek-dot{fill:var(--mint);stroke:var(--night);stroke-width:2.5}
.is-satellite .peek-start{stroke:var(--peek-edge);stroke-width:1.5}
.is-satellite .peek-dot{stroke:var(--cream);filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.peek-credit{position:absolute;right:6px;bottom:6px;padding:1px 7px;border-radius:var(--pill);background:rgba(24,22,20,.55);color:rgba(255,255,255,.9);font:500 10px/1.5 var(--sans);letter-spacing:.02em;pointer-events:none}
/* The map card is not one link: its title is, stretched over the card, and the satellite map sits above it so it can be
   dragged and zoomed. A short tap on the map still opens the demo (mountPeekZoom in app.js). */
.peek-covered{position:relative}
.peek-cover{color:inherit;text-decoration:none}
.peek-cover::after{content:"";position:absolute;inset:0;border-radius:12px}
.peek-cover:focus-visible{outline:0;box-shadow:none}
.peek-covered:has(.peek-cover:focus-visible){outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--cream)}
.peek-covered:active{transform:none}
.peek-covered:has(.peek-cover:active){transform:scale(.98)}
/* Phones: one finger still scrolls the page and the card row over the whole picture; once zoomed in, it drags the map. */
.peek-map-art.is-satellite{z-index:1;touch-action:pan-x pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.peek-map-art.is-zoomed{touch-action:none}
.peek-map-art.is-dragging{cursor:grabbing}
/* Zoom buttons in the house style of the journey map (.aj-map-controls): + and − top right, "whole route" bottom left. */
.peek-zoom{position:absolute;inset:6px;pointer-events:none}
.peek-zoom button{pointer-events:auto;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:#f5f1e8f5;color:#123f3c;font:400 23px/1 var(--sans);cursor:pointer;touch-action:manipulation}
.peek-zoom-stack{position:absolute;top:0;right:0;display:grid;border-radius:10px;background:#f5f1e8f5;box-shadow:0 4px 20px #04292f30;overflow:hidden;pointer-events:auto}
.peek-zoom-stack>button{background:transparent}
.peek-zoom-stack>button:first-child{border-bottom:1px solid #123f3c1a}
.peek-zoom-fit{position:absolute;left:0;bottom:0;border-radius:10px;box-shadow:0 4px 20px #04292f30}
.peek-zoom-fit[hidden]{display:none}
.peek-zoom-fit svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.peek-zoom [aria-disabled="true"]{color:#123f3c59;cursor:default}
@media(hover:hover) and (pointer:fine){.peek-zoom button:not([aria-disabled="true"]):hover{background:#e4ecd4}}
.peek-pulse{fill:var(--mint);transform-box:fill-box;transform-origin:center;animation:peek-pulse 2.2s var(--ease-out) infinite}
@keyframes peek-pulse{from{transform:scale(.8);opacity:.6}to{transform:scale(2.6);opacity:0}}
.peek-month{fill:var(--cream);font:600 18px/1 var(--sans);paint-order:stroke;stroke:var(--night);stroke-width:5px;stroke-linejoin:round}
/* Monthly update: a page of the calendar in the trip's tint. */
.peek-month-art{display:grid;align-content:space-between;justify-items:start;padding:12px 14px;background:var(--trip-tint,var(--sand))}
.peek-now{padding:3px 10px;border-radius:var(--pill);background:var(--ink);color:var(--cream);font-size:13px;font-weight:600;line-height:1.3}
.peek-month-art strong{font-size:40px;font-weight:600;line-height:1;letter-spacing:-.03em}
/* Certificate: a small paper with the portrait as a stamp. */
.peek-cert-art{display:grid;place-items:center}
.peek-cert-paper{display:grid;justify-items:center;gap:6px;width:min(64%,180px);padding:10px 10px 12px;background:var(--paper);text-align:center;transform:rotate(-2deg)}
.peek-cert-kicker{font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.peek-cert-stamp{width:48px;height:60px;padding:4px;background:var(--sand)}
.peek-cert-name{font-size:16px;font-weight:600;line-height:1.1}
@media(min-width:600px){.peek-row{grid-auto-columns:44%}}
@media(min-width:900px){
 .product-layout>.peek{grid-column:1/-1;grid-row:2}
 .peek-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:8px 0 0;overflow:visible}
}
@media(hover:hover) and (pointer:fine){.peek-link:hover .peek-title{text-decoration:underline;text-underline-offset:3px}}
@media(prefers-reduced-motion:reduce){.peek-pulse{animation:none;opacity:0}.peek-link{transition:none}.peek-link:active{transform:none}}
:root[data-motion-paused="true"] .peek-pulse{animation:none;opacity:0}
:root[data-motion-paused="true"] .peek-link:active{transform:none}

/* Story: the closer frame and the moment, set as a statement. */
.story-split{display:grid;gap:22px;margin-top:24px}
.story-split .shot{width:86%}
.story-copy{display:grid;gap:16px;align-content:start}
.story-moment{margin:0;font-size:clamp(22px,5.6vw,32px);font-weight:500;line-height:1.3;letter-spacing:-.02em;max-width:26ch}
.story-more p{font-size:17px;line-height:1.6;max-width:62ch;margin-top:12px}
@media(min-width:900px){.story-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end}.story-split .shot{width:100%;max-width:480px}}

/* What's included, as a plain list, beside the certificate preview. */
.incl-cert{display:grid;gap:40px}
.incl-copy h2{margin-bottom:22px}
.incl-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.incl-list li{position:relative;display:grid;gap:2px;padding-left:34px}
.incl-list li::before{position:absolute;left:0;top:0}
.incl-list strong{font-size:17px;font-weight:600;line-height:1.35}
.incl-list span{font-size:16px;line-height:1.5}
.pg-incl-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:18px}
.cert-preview{margin:0;display:grid;gap:12px}
.cert-card{position:relative;display:grid;justify-items:center;gap:8px;padding:30px 20px 36px;background:var(--paper);text-align:center}
.cert-kicker{font-size:14px;font-weight:600;color:var(--muted)}
.cert-title{font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.03em}
/* The kit mask perforates every 10px tile; a second, opaque content-box layer keeps the photograph whole
   so only the paper edge is perforated. */
.cert-card .stamp{width:136px;height:170px;margin:12px 0 0;background:var(--sand);transform:rotate(-3deg);
 -webkit-mask:radial-gradient(5px at 5px 5px,#0000 98%,#000) -5px -5px/10px 10px round,linear-gradient(#000 0 0) content-box;
 mask:radial-gradient(5px at 5px 5px,#0000 98%,#000) -5px -5px/10px 10px round,linear-gradient(#000 0 0) content-box}
.cert-for,.cert-animal{font-size:15px;line-height:1.45}
.cert-for strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.cert-animal strong{font-weight:600}
.cert-seal{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;margin:-40px 0 4px 132px;border-radius:50%}
.cert-seal img{width:28px;height:28px}
.cert-preview figcaption{font-size:15px;line-height:1.45;color:var(--muted)}
@media(min-width:900px){.incl-cert{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}.cert-card{padding:40px 32px 44px}}

/* Complete your trip: the other prints from the same place. */
.complete-trip>h2{margin-bottom:22px}
.trip-roll{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
.trip-roll li{display:grid;gap:10px;align-content:start;min-width:0}
.trip-roll-species{font-size:15px;font-weight:600;line-height:1.35}
.trip-roll .btn{width:100%}
.complete-trip .trip-offer{margin-top:24px;background:var(--sand)}
@media(min-width:760px){.trip-roll{grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px}}

/* ---------- How it works ---------- */
.how-roll{list-style:none;margin:0;padding:0;display:grid;gap:64px}
.how-roll>li{display:grid;gap:22px;min-width:0}
.how-roll .shot{width:84%}
.how-roll>li:nth-child(odd) .shot{justify-self:end}
.how-copy{display:grid;gap:12px;justify-items:start}
.how-copy h2{font-size:clamp(30px,7.4vw,52px)}
.how-copy p{font-size:17px;line-height:1.6;max-width:52ch}
.how-copy .btn{margin-top:4px}
.how-fan.fan{height:196px}
.how-fan.fan>*{width:118px;height:148px}
.track-band{display:grid;gap:18px;justify-items:start;margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);padding:48px var(--gutter);background:var(--sand)}
.track-split{display:grid;gap:18px}
.track-split>span{display:grid;gap:4px;font-size:16px;line-height:1.45;max-width:30ch}
.track-split strong{font-size:clamp(48px,13vw,96px);font-weight:500;line-height:1;letter-spacing:-.045em}
.track-band .body-copy{font-size:17px}
.how-incl>h2,.how-prices>h2{margin-bottom:22px}
.how-prices .bundle-table tbody tr:nth-child(odd){background:var(--paper)}
.pg-close{margin-top:72px}
@media(min-width:760px){.incl-list.two-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 48px}}
@media(min-width:900px){
 .how-roll{gap:112px}
 .how-roll>li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
 .how-roll>li:nth-child(even)>:first-child{order:2}
 .how-roll .shot{width:100%;max-width:440px}
 .how-fan.fan{height:280px}.how-fan.fan>*{width:170px;height:212px}
 .track-band{margin-left:0;margin-right:0;padding:72px 64px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px}
 .track-band>h2{grid-row:span 3}
 .track-split{grid-template-columns:1fr 1fr;gap:32px}
 .pg-close{margin-top:112px}
}

/* ---------- About ---------- */
.about-page h1{font-size:clamp(34px,8.6vw,76px)}
.about-split{gap:36px}
.about-split .shot{width:100%;max-width:520px}
.about-help{margin-top:22px}
.about-roll-sec>h2{margin-bottom:22px}
/* Three prints in their own sideways row on phones. */
.about-roll{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:66%;gap:12px;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.about-roll::-webkit-scrollbar{display:none}
@media(hover:hover) and (pointer:fine){.about-roll{scrollbar-width:thin;scrollbar-color:var(--ink) transparent}}
.about-roll>li{scroll-snap-align:start;min-width:0}
.about-roll a{display:grid;gap:10px}
.about-roll-copy{display:grid;gap:2px;font-size:15px;line-height:1.4}
.about-roll-copy strong{font-size:19px;font-weight:600}
/* Why the name: Wild + domi (Latin "at home"), set large, then each part explained. */
.about-name>h2{margin-bottom:16px}
.about-name-word{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .22em;margin:0 0 22px;font-size:clamp(48px,16.5vw,132px);font-weight:600;line-height:.95;letter-spacing:-.03em}
.about-name-word [lang="la"]{font-style:italic}
.about-name-plus{font-weight:400;color:var(--muted)}
.about-name-parts{display:grid;gap:12px;margin:0 0 22px}
.about-name-parts div{display:grid;gap:4px;padding:14px 16px;border-radius:var(--radius);background:var(--paper)}
.about-name-parts dt{font-size:17px;font-weight:600}
.about-name-parts dd{margin:0;font-size:16px;line-height:1.5}
.about-name-sum{max-width:34em;font-size:19px;line-height:1.45}
@media(min-width:760px){.about-name-parts{grid-template-columns:1fr 1fr;gap:20px}}
@media(min-width:760px){.about-roll{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;overflow:visible}}

/* ---------- Motion fallbacks ---------- */
@media(prefers-reduced-motion:reduce){
 .shot,.animal-page .image-tabs button{transition:none}
 :is(.pg-roll-item>a,.dest-animal-photo,.trip-roll a,.about-roll a):active .shot,.animal-page .image-tabs button:active{transform:none}
}
html[data-motion-paused="true"] :is(.pg-roll-item>a,.dest-animal-photo,.trip-roll a,.about-roll a):active .shot,
html[data-motion-paused="true"] .animal-page .image-tabs button:active{transform:none}

/* Weather near the animal right now: a small weather ticket (after the Ticket study in dqnamo's Kitchen, our own
   build). A night stub with a 9 × 9 dot-matrix sky, a punched perforation with two notches, then the reading.
   The dots light up column by column once; the ticket tilts a little under a mouse. */
.animal-weather{display:grid;gap:8px;margin-top:6px}
.animal-weather[hidden]{display:none}
.wt{--stub:88px;position:relative;display:grid;grid-template-columns:var(--stub) minmax(0,1fr);min-height:118px;border-radius:12px;background:var(--paper);color:var(--ink);transform-origin:30% 60%;transition:transform .22s var(--ease-out)}
.wt-stub{position:relative;display:grid;place-items:center;border-radius:12px 0 0 12px;background:var(--night)}
/* The perforation: punched holes along the seam, and a notch top and bottom in the page colour. */
.wt-stub::after{content:"";position:absolute;top:12px;bottom:12px;right:-2px;width:4px;background:radial-gradient(circle,var(--cream) 1.6px,transparent 2px) center top/4px 9px repeat-y}
.wt::before,.wt::after{content:"";position:absolute;left:calc(var(--stub) - 8px);width:16px;height:16px;border-radius:50%;background:var(--cream)}
.wt::before{top:-8px}
.wt::after{bottom:-8px}
.wt-sky{display:grid;grid-template-columns:repeat(9,6px);grid-auto-rows:6px;gap:2px;--on:#d4d4ca;--alt:#ffc44d}
.wt-sky i{display:block;border-radius:50%;background:rgba(238,238,230,.1);animation:wt-dot .36s var(--ease-out) both}
.wt-sky i.o{background:var(--on);box-shadow:0 0 4px color-mix(in srgb,var(--on) 55%,transparent)}
.wt-sky i.x{background:var(--alt);box-shadow:0 0 4px color-mix(in srgb,var(--alt) 55%,transparent)}
.wt[data-sky="clear"] .wt-sky{--on:#ffc44d;--alt:#ff8a3d}
.wt[data-sky="night"] .wt-sky{--on:var(--cream);--alt:#ffd66b}
.wt[data-sky="partly"] .wt-sky{--on:#e2e2d8;--alt:#ffc44d}
.wt[data-sky="fog"] .wt-sky{--on:#a9a8a0}
.wt[data-sky="rain"] .wt-sky{--on:#c9ccce;--alt:var(--sky)}
.wt[data-sky="snow"] .wt-sky{--on:#c9ccce;--alt:#fff}
.wt[data-sky="thunder"] .wt-sky{--on:#a3a7ab;--alt:#ffd23f}
.wt-sky i:nth-child(9n+2){animation-delay:30ms}.wt-sky i:nth-child(9n+3){animation-delay:60ms}.wt-sky i:nth-child(9n+4){animation-delay:90ms}
.wt-sky i:nth-child(9n+5){animation-delay:120ms}.wt-sky i:nth-child(9n+6){animation-delay:150ms}.wt-sky i:nth-child(9n+7){animation-delay:180ms}
.wt-sky i:nth-child(9n+8){animation-delay:210ms}.wt-sky i:nth-child(9n){animation-delay:240ms}
@keyframes wt-dot{from{opacity:0;transform:scale(.4)}}
.wt-body{display:grid;align-content:center;gap:2px;min-width:0;padding:14px 16px 14px 22px}
.wt-label{font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wt-reading{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:2px}
.wt-f{font-size:44px;font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.wt-c{font-size:17px;font-weight:500;color:var(--muted)}
.wt-cond{font-size:16px;line-height:1.35}
.wt-time{font-size:15px;line-height:1.35;color:var(--muted)}
.wt-note{font-size:14px;line-height:1.45;color:var(--muted)}
.wt-note a{display:inline-block;padding-block:12px;margin-block:-12px;text-decoration:underline;text-underline-offset:3px}
@media(min-width:380px){.wt{--stub:96px}.wt-sky{grid-template-columns:repeat(9,7px);grid-auto-rows:7px}}
@media(hover:hover) and (pointer:fine){.wt:hover{transform:rotate(-1.2deg) translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.wt{transition:none}.wt:hover{transform:none}.wt-sky i{animation:none}}
:root[data-motion-paused="true"] .wt{transition:none}
:root[data-motion-paused="true"] .wt:hover{transform:none}
:root[data-motion-paused="true"] .wt-sky i{animation:none}