/* Wildomi base: brand tokens, type, header, footer and shared controls. Mobile first.
   v7 look (design/direction-b.md): warm travel off-white, dark ink, mint for actions, coral and sky as accents,
   one grotesk face. The old token names stay so every module keeps working. */
:root{
 --cream:#eeeee6;--paper:#f8f8f4;--ocean:#262626;--ocean-2:#3a3a38;--lime:#3ed19f;--lime-2:#8fe3c4;--sage:#e2e2d8;--sand:#e6e4da;
 --warm:#ff5345;--muted:#5f5f5a;--line:rgba(38,38,38,.16);--error:#b3261e;--ink:#262626;
 --mint:#3ed19f;--coral:#ff5345;--sky:#78b7e5;--stone:#cdc8bb;--night:#262626;
 --serif:'Hanken Grotesk',system-ui,sans-serif;--sans:'Hanken Grotesk',system-ui,sans-serif;
 --gutter:16px;--radius:4px;--pill:999px;--space:clamp(16px,5vw,72px);
 --ease-out:cubic-bezier(.23,1,.32,1);
 --step-display:clamp(40px,10.5vw,96px);--step-2:clamp(30px,6.2vw,56px);--step-3:20px;--step-body:17px;--step-small:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:24px}
body{margin:0;color:var(--ink);background:var(--cream);font:400 var(--step-body)/1.55 var(--sans);overflow-x:hidden}
img,video{max-width:100%;display:block}
img[hidden],video[hidden]{display:none}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.55}
button,a,[role="button"],summary,label{touch-action:manipulation}
button,.btn,.co-button,summary{-webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}
/* Focus: an ink ring with a cream gap, so it reads on the light ground, on photographs and on dark bands. */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--cream)}
main:focus{outline:none}
main{min-height:55vh;display:block}
h1,h2,h3,p,figure,blockquote{margin:0}
p{text-wrap:pretty}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:var(--step-display)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-3);font-family:var(--sans);font-weight:600;letter-spacing:-.01em;line-height:1.3}
em{font-style:italic;font-weight:400}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:var(--pill)}
.skip-link:focus{top:12px}
/* Kept for modules that still use the editorial label: sentence case, never tiny or spaced out. */
.eyebrow{font-size:15px;font-weight:600;letter-spacing:0;margin-bottom:14px}
.eyebrow.light{color:var(--mint)}

/* Header: a plain bar. Wordmark, bag pill and menu on phones; four links, account and bag on desktop. */
.header{position:relative;z-index:30;display:flex;align-items:center;gap:8px;height:calc(64px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;background:var(--cream)}
.wordmark{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:auto;font-size:28px;font-weight:600;letter-spacing:-.06em;line-height:1}
.brand-mark{width:28px;height:28px;flex-shrink:0}
.mobile-bag,.menu-toggle,#navigation .nav-bag{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-radius:var(--pill);background:var(--paper);color:var(--ink);font-size:16px;font-weight:500;line-height:1;box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);transition:background-color .18s ease,transform .16s var(--ease-out)}
.mobile-bag,#navigation .nav-bag{padding:0 8px 0 16px}
.menu-toggle{padding:0 18px}
.menu-toggle[aria-expanded="true"]{background:var(--ink);color:var(--cream)}
.mobile-bag:active,.menu-toggle:active,#navigation .nav-bag:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}
.header [data-bag-count]{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:var(--pill);background:var(--mint);color:var(--ink);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
#navigation{display:none}
/* The open menu covers the page below the bar, so it needs no shadow to stand apart. */
body.menu-open{overflow:hidden}
#navigation.open{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;height:calc(100svh - 64px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;padding:12px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));background:var(--cream);animation:shell-menu-in .22s var(--ease-out)}
#navigation.open a{display:flex;align-items:center;min-height:56px;font-size:30px;font-weight:500;letter-spacing:-.035em;line-height:1.1}
#navigation.open .nav-account{margin-top:auto;justify-content:center;min-height:52px;border-radius:var(--pill);background:var(--ink);color:var(--cream);font-size:17px;font-weight:600;letter-spacing:0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
#navigation.open .nav-bag{display:none}
@keyframes shell-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* "Adoptions 2" is wider than the old "Bag 2": below 400 px the menu keeps only its icon (the word stays for screen readers). */
@media(max-width:399px){
 .menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .menu-toggle{min-width:44px;justify-content:center;padding:0 12px}
}
@media(max-width:359px){
 .wordmark{font-size:25px;gap:6px}.brand-mark{width:24px;height:24px}
 .mobile-bag{padding-left:12px}.menu-toggle{padding:0 10px}
}
@media(min-width:900px){
 .header{height:76px;gap:32px;padding:0 var(--space)}
 .wordmark{font-size:32px}.brand-mark{width:32px;height:32px}
 .mobile-bag,.menu-toggle{display:none}
 #navigation{display:flex;align-items:center;gap:28px;font-size:16px;font-weight:500}
 #navigation a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
 #navigation .nav-account{margin-left:8px}
}
@media(hover:hover) and (pointer:fine){
 #navigation a:not(.nav-bag):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
 .mobile-bag:hover,.menu-toggle:not([aria-expanded="true"]):hover,#navigation .nav-bag:hover{background:var(--sand)}
}

/* Buttons: pills with a firm lower edge that compresses when pressed. One shape across the store.
   Variants: default (ink), .lime (mint action, ink text), .ghost (stone), .outline, .light (cream, for photographs),
   .danger and .small. */
.btn,.button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:13px 22px;border:0;border-radius:var(--pill);background:var(--ink);color:var(--cream);font:600 16px/1.25 var(--sans);text-align:left;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);transition:background-color .18s ease,transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.btn>span[aria-hidden],.button>span[aria-hidden]{font-weight:400;font-size:20px;line-height:1}
.btn:active,.button:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.22)}
.btn:focus-visible,.button:focus-visible{box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 0 0 3px var(--cream)}
.btn.lime,.btn.mint{background:var(--mint);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.btn.ghost{background:var(--stone);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.btn.light{background:var(--cream);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.btn.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.outline[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.btn.danger{background:transparent;color:var(--error);box-shadow:inset 0 0 0 2px var(--error)}
.btn.lime:active,.btn.mint:active,.btn.ghost:active,.btn.light:active{box-shadow:inset 0 -1px 0 rgba(0,0,0,.14)}
.btn.outline:active,.btn.danger:active{box-shadow:inset 0 0 0 2px currentColor}
.btn.small{min-height:44px;padding:10px 16px;font-size:15px;gap:12px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.btn.small.outline,.btn.small.danger{box-shadow:inset 0 0 0 2px currentColor}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 .btn:hover,.button:hover{background:var(--ocean-2)}
 .btn.lime:hover,.btn.mint:hover{background:var(--lime-2)}
 .btn.ghost:hover{background:var(--sand)}
 .btn.light:hover{background:var(--paper)}
 .btn.outline:hover{background:var(--sand)}
 .btn.outline[aria-pressed="true"]:hover{background:var(--ocean-2)}
 .btn.danger:hover{background:var(--paper)}
}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:16px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.text-button{min-height:44px;padding:0;font-weight:600;text-decoration:underline;text-underline-offset:5px}

/* Footer: the last frames of the camera roll. A statement, the site map with every policy, and help. */
.site-footer{padding:48px var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));background:var(--cream);color:var(--ink)}
.footer-roll{display:grid;gap:8px;max-width:1240px;margin:0 auto}
.footer-tile{display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.footer-tile-body{flex:1;display:grid;align-content:start;gap:16px;padding:28px 20px 32px}
.footer-strip{display:flex;align-items:center;min-height:28px;padding:5px 12px;background:var(--stone);color:var(--ink);font-size:14px;font-weight:500;line-height:1.3}
.footer-statement{container-type:inline-size;background:var(--night);color:var(--cream)}
.footer-statement .footer-tile-body{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:400px;padding-top:28px}
.footer-mark{width:56px;height:56px;margin-bottom:auto;color:var(--mint)}
.footer-mark path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.footer-mark circle{fill:currentColor}
/* Sized to its tile so it stays on two lines at every width. */
.footer-statement-title{margin-top:40px;font-size:clamp(34px,9.5vw,64px);font-size:clamp(34px,11cqi,64px);font-weight:500;line-height:1;letter-spacing:-.04em}
.footer-statement .footer-tile-body p{max-width:34ch;font-size:17px;line-height:1.5}
.footer-statement .btn{margin-top:8px}
.footer-statement .footer-strip{background:var(--mint);color:var(--ink)}
.footer-pages{container-type:inline-size}
.footer-pages .footer-tile-body{gap:28px}
.footer-pages nav{display:grid;align-content:start}
@container (min-width:520px){.footer-pages .footer-tile-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.footer-label{margin-bottom:4px;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--muted)}
.footer-pages nav a{display:flex;align-items:center;min-height:44px;font-size:17px;line-height:1.3}
.footer-help{background:var(--sand)}
.footer-help-title{font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-.035em}
.footer-help .footer-tile-body p{font-size:17px;line-height:1.5}
.footer-help-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.footer-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.footer-controls button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--pill);background:var(--paper);color:var(--ink);font-size:15px;font-weight:500;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.footer-controls button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.footer-help .footer-strip{background:var(--night);color:var(--cream)}
/* Every animal, destination and kind as a plain link, folded on phones so the footer stays short. */
.footer-index .footer-tile-body{gap:0}
.footer-index .footer-label{margin-bottom:8px}
.footer-list{border-top:1px solid var(--line)}
.footer-list:last-child{border-bottom:1px solid var(--line)}
.footer-list summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font-size:17px;font-weight:500;line-height:1.3;cursor:pointer;list-style:none}
.footer-list summary::-webkit-details-marker{display:none}
.footer-list summary::after{content:"+";flex:none;font-size:22px;font-weight:400;line-height:1}
.footer-list[open] summary::after{content:"\2212"}
.footer-list summary:focus-visible,.footer-list nav a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.footer-list nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,112px),1fr));column-gap:16px;padding-bottom:16px}
.footer-list nav a{display:flex;align-items:center;min-height:44px;min-width:0;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
@media(min-width:760px){
 .footer-index{grid-column:1/-1}
 .site-footer{padding:72px var(--space) 32px}
 .footer-roll{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-statement{grid-column:1/-1}
 .footer-statement .footer-tile-body{min-height:420px;padding:40px 40px 44px}
 .footer-mark{width:72px;height:72px}
 .footer-tile-body{padding:32px 32px 36px}
}
@media(min-width:1180px){
 .footer-roll{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
 .footer-statement{grid-column:auto}
 .footer-statement .footer-tile-body{min-height:480px}
}
@media(hover:hover) and (pointer:fine){.footer-list nav a:hover,.footer-list summary:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.footer-pages nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.footer-controls button:not([aria-pressed="true"]):hover{background:var(--cream)}}

/* Toast: one line of news over the page, clear of the bag bar. */
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:60;max-width:calc(100vw - 32px);padding:14px 22px;border-radius:24px;background:var(--night);color:var(--cream);font-size:15px;line-height:1.4;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s ease,transform .25s var(--ease-out)}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* Placeholders fill the first screen so the footer never jumps when the page renders.
   The first paint and the router's placeholder both draw the Wildomi W as an animal track (kit trace loader). */
.loading-state{min-height:calc(100svh - 64px);display:grid;place-items:center;color:var(--ink);font-size:16px}
.loading-state.trace-loader{min-height:calc(100svh - 64px)}
/* Home placeholder: a photograph-sized frame with its caption lines, on the light ground. */
.page-skeleton{min-height:calc(100svh - 64px);padding:0 0 32px;background:var(--cream)}
/* The server-rendered first screen of a real page (seo-pages.mjs): the same height until the app replaces it. */
.prerender{min-height:calc(100svh - 64px)}
.prerender h2{margin-top:32px;font-size:24px;line-height:1.2}
.prerender>p,.prerender li span{max-width:60ch;font-size:17px;line-height:1.5}
.prerender>p{margin-top:12px}
.prerender-list,.prerender-includes{display:grid;gap:4px;margin-top:12px;padding:0;list-style:none}
.prerender-list li{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;min-height:44px}
.prerender-list a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.prerender-includes li{font-size:17px;line-height:1.5}
.prerender-links{display:flex;flex-wrap:wrap;column-gap:20px;margin-top:20px}
.skeleton-card{display:grid;align-content:end;grid-template-columns:minmax(0,1fr);gap:14px;min-height:calc(100svh - 96px);padding:24px var(--gutter) 28px;background:var(--sand)}
.skeleton-line,.skeleton-chips,.skeleton-stamp{display:block;border-radius:var(--radius);background:var(--stone)}
.skeleton-line.title{height:84px;width:86%}
.skeleton-line.short{height:20px;width:52%}
.skeleton-chips,.skeleton-stamp{display:none}
.skeleton-line.action{height:52px;width:min(240px,70%);border-radius:var(--pill);background:var(--paper)}
.skeleton-line.action+.skeleton-line.action{display:none}
@media(min-width:900px){
 .loading-state,.loading-state.trace-loader,.page-skeleton,.prerender{min-height:calc(100svh - 76px)}
 .page-skeleton{padding:0 var(--space) 48px}
 .skeleton-card{min-height:min(calc(100svh - 124px),760px);padding:56px}
 .skeleton-line.title{height:150px;width:min(720px,70%)}
 .skeleton-line.short{width:min(420px,40%)}
}

@media(prefers-reduced-motion:reduce){
 .toast,.btn,.button,.mobile-bag,.menu-toggle,#navigation .nav-bag{transition:none}
 .btn:active,.button:active,.mobile-bag:active,.menu-toggle:active,#navigation .nav-bag:active{transform:none}
 #navigation.open{animation:none}
}
:root[data-motion-paused="true"] #navigation.open{animation:none}

/* Each trip has its own colour: --trip on the boarding pass band (white text, 5:1 or more), --trip-tint, a 30% shade
   on paper, under every photograph of that trip ("Thailand · Mali"), so the same colour always means the same place. */
[data-place="cancun"]{--trip:#0f7178;--trip-tint:#b2d0cf}[data-place="florida"]{--trip:#b4472a;--trip-tint:#e4c3b7}[data-place="hawaii"]{--trip:#a3345f;--trip-tint:#dfbdc7}
[data-place="punta-cana"]{--trip:#1d5a92;--trip-tint:#b6c9d7}[data-place="italy"]{--trip:#5e6a1f;--trip-tint:#cacdb4}[data-place="costa-rica"]{--trip:#a52f29;--trip-tint:#dfbcb7}
[data-place="aruba"]{--trip:#b23f73;--trip-tint:#e3c1cd}[data-place="alaska"]{--trip:#3a6683;--trip-tint:#bfccd2}[data-place="california"]{--trip:#2c6657;--trip-tint:#bbccc5}
[data-place="japan"]{--trip:#9c362f;--trip-tint:#dcbeb9}[data-place="canada"]{--trip:#5b4f8f;--trip-tint:#c9c5d6}[data-place="iceland"]{--trip:#a34b18;--trip-tint:#dfc4b2}
[data-place="thailand"]{--trip:#2f6b3f;--trip-tint:#bccebe}[data-place="kenya"]{--trip:#86591a;--trip-tint:#d6c8b3}
[data-place] :is(.frame-strip,.shot-strip,.tile-strip,.stage-strip,.co-strip){background:var(--trip-tint,var(--stone));color:var(--ink)}