/* Layout: a postcard album. Sticky header with the stamp, a banner hero, then grids of
   stamp-framed cards, each franked with a postmark showing the post's date. */
:root{
  --coffee:#F6D365;--coffee-ink:#3A2E12;
  --paper:#F7F4EC;      /* page ground, warm like the banner damask */
  --card:#FFFDF8;       /* card surface */
  --stamp:#EAE5D4;      /* the brand stamp beige */
  --stamp-edge:#CFC6A8; /* stamp inner frame */
  --ink:#3F3D38;        /* body text */
  --grey:#8A8A8A;       /* the wordmark grey */
  --muted:#6E6A60;      /* secondary text */
  --script:#7A6A45;     /* tagline brown-gold */
  --red:#B8312B;        /* the anniversary ribbon red, used sparingly */
  --teal:#2E9C95;       /* the couple illustration's teal */
  --line:#E2DCCB;
  --shadow:0 1px 2px rgba(63,61,56,.06),0 6px 18px rgba(63,61,56,.07);
  --f-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-script:"Italianno","Brush Script MT",cursive;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1E1D1A;--card:#282622;--stamp:#3A372E;--stamp-edge:#5A5442;--ink:#E9E4D6;--grey:#B5B1A7;--muted:#A8A293;--script:#CDB98A;--red:#E0625A;--teal:#5CC4BC;--line:#3A372F;--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1E1D1A;--card:#282622;--stamp:#3A372E;--stamp-edge:#5A5442;--ink:#E9E4D6;--grey:#B5B1A7;--muted:#A8A293;--script:#CDB98A;--red:#E0625A;--teal:#5CC4BC;--line:#3A372F;--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--card)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;color:var(--ink)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--card);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:24px;min-height:68px;flex-wrap:wrap;position:relative}
.search-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex-shrink:0;margin-left:-12px}
.search-btn:hover{background:var(--stamp)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand img{height:36px;width:auto}
nav.main{display:flex;gap:4px;overflow-x:auto;margin-left:auto;scrollbar-width:none;min-width:0}
nav.main::-webkit-scrollbar{display:none}
nav.main a{font-family:var(--f-display);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:999px;white-space:nowrap}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--stamp)}
@media (max-width:760px){header.site .wrap{gap:0;padding-block:10px 4px}.brand{width:100%;justify-content:center}nav.main{margin:0 -8px;width:calc(100% + 16px)}.search-btn{position:absolute;top:10px;right:max(16px,env(safe-area-inset-right,0px));margin:0;width:36px;height:36px}}

/* hero */
.hero{position:relative;background:var(--stamp)}
.hero img{display:block;width:100%;height:auto;aspect-ratio:2000/870;object-fit:cover;max-width:100%}
.lede{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding-block:44px 8px}
.lede .script{font-family:var(--f-script);font-size:clamp(44px,6vw,64px);line-height:.9;color:var(--script)}
.lede p{margin:0;max-width:58ch;color:var(--muted);font-size:18px}
.lede .pillars{font-family:var(--f-display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-top:10px}
@media (max-width:700px){.lede{grid-template-columns:1fr;gap:10px;padding-top:28px}}

/* section heads */
section.block{padding-block:40px}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap}
.shead h2{font-size:clamp(24px,3vw,32px);font-weight:300;letter-spacing:.01em}
.shead h2 em{font-family:var(--f-script);font-style:normal;color:var(--script);font-size:1.45em;font-weight:400;margin-left:4px}
.shead a{font-family:var(--f-display);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-decoration:none}
.shead a:hover{text-decoration:underline}

/* cards: stamp-framed placeholders */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 22px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
@media (max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:22px 14px}.grid.wide{grid-template-columns:1fr}.card h3{font-size:15px}.stampin .mono{font-size:44px}.postmark{width:52px;height:52px;font-size:7px;right:10px;top:10px}.postmark::after{display:none}.stampin .soon{font-size:8px}}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none;min-width:0}
.stampbox{position:relative;aspect-ratio:4/3;max-width:100%;padding:9px;background:var(--card);box-shadow:var(--shadow);
  -webkit-mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/16px 100% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;
  mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/16px 100% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;
  transition:transform .25s ease}
.card:hover .stampbox{transform:translateY(-3px) rotate(-.6deg)}
.stampin{height:100%;border:1px solid var(--stamp-edge);background:var(--tint,var(--stamp));display:grid;place-items:center;position:relative;overflow:hidden}
.stampin .mono{font-family:var(--f-script);font-size:64px;line-height:1;color:var(--card);opacity:.95;text-align:center;padding:0 12px}
.stampin .soon{position:absolute;left:10px;bottom:8px;font-family:var(--f-display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--card);opacity:.9}
.postmark{position:absolute;right:16px;top:14px;width:70px;height:70px;border-radius:50%;border:1.5px solid rgba(63,61,56,.45);display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-size:9px;font-weight:600;letter-spacing:.08em;line-height:1.25;color:rgba(63,61,56,.6);transform:rotate(12deg);font-variant-numeric:tabular-nums;background:transparent}
.postmark::after{content:"";position:absolute;right:-46px;top:20px;width:44px;height:26px;background:repeating-linear-gradient(transparent 0 4px,rgba(63,61,56,.35) 4px 5.5px)}
.card .meta{font-family:var(--f-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:18px;font-weight:500;line-height:1.3}
.card .sub{font-size:15px;color:var(--muted);margin:-4px 0 0;line-height:1.45}
.stars{color:var(--red);letter-spacing:.1em;font-size:14px}

/* recipes toolbar */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.search{flex:1 1 260px;min-width:0;position:relative}
.search input{width:100%;font:inherit;font-size:16px;padding:12px 16px 12px 42px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--f-display);font-size:12px;font-weight:500;letter-spacing:.06em;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--muted)}
.chip:hover{color:var(--ink);border-color:var(--stamp-edge)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.count{font-family:var(--f-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:-8px 0 20px}
.empty{padding:40px 0;color:var(--muted);text-align:center}

/* page title band */
.pagehead{padding-block:44px 28px;display:grid;gap:8px}
.pagehead .kicker{font-family:var(--f-script);font-size:40px;line-height:1;color:var(--script)}
.pagehead h1{font-size:clamp(30px,5vw,48px);font-weight:300;letter-spacing:.01em}
.pagehead p{margin:4px 0 0;max-width:62ch;color:var(--muted)}

/* single post */
.post{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-block:20px 60px}
@media (max-width:900px){.post{grid-template-columns:1fr;gap:28px}}
.back{font-family:var(--f-display);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:inline-block;margin-top:28px}
.back:hover{color:var(--ink)}
.post h1{font-size:clamp(28px,4.4vw,44px);font-weight:300;line-height:1.15;margin:12px 0 8px}
.post .dateline{font-family:var(--f-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tag{font-family:var(--f-display);font-size:11px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:var(--stamp);color:var(--ink);text-decoration:none}
.body{max-width:68ch}
.body .feature{margin:26px 0 30px}
.body .feature .stampbox{aspect-ratio:var(--ar,3/2)}
.stampin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.stampin.photo .postmark{color:rgba(255,255,255,.95);border-color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.45);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.stampin.photo .postmark::after{background:repeating-linear-gradient(transparent 0 4px,rgba(255,255,255,.75) 4px 5.5px)}
.inpics{display:grid;gap:10px;margin:22px 0 26px}
.irow{display:flex;gap:10px;min-width:0}
.irow.tall{max-width:62%;margin:0 auto;width:100%}
.inpics button{padding:0;border:0;background:var(--stamp);border-radius:6px;overflow:hidden;cursor:zoom-in;max-width:100%;display:block;min-width:0}
.inpics img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s ease}
.inpics button:hover img{transform:scale(1.03)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:30px 0 10px}
.gallery button{padding:0;border:0;background:var(--stamp);border-radius:6px;overflow:hidden;cursor:zoom-in;aspect-ratio:1;max-width:100%}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gallery button:hover img{transform:scale(1.04)}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(20,19,17,.92);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));object-fit:contain;border-radius:4px;min-width:0;min-height:0}
.lightbox img{cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-prev{left:calc(14px + env(safe-area-inset-left,0px))}
.lb-next{right:calc(14px + env(safe-area-inset-right,0px))}
.lb-count{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);color:#fff;font-family:var(--f-display);font-size:12px;letter-spacing:.14em;background:rgba(0,0,0,.35);padding:6px 12px;border-radius:999px;font-variant-numeric:tabular-nums}
.lightbox button.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;padding:8px 14px;font-family:var(--f-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.side .mini img{width:46px;height:46px;object-fit:cover;border-radius:4px;display:block}
.body p{margin:0 0 1em}
.body h3{font-size:22px;font-weight:500;margin:1.6em 0 .5em}
.body h4{font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:1.8em 0 .7em}
.body .tip{font-style:italic;background:var(--card);border-left:3px solid var(--teal);padding:12px 16px;margin:0 0 1em;border-radius:0 6px 6px 0}
.body ul.ingr{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:2px}
.body ul.ingr li label{display:flex;gap:12px;align-items:flex-start;padding:6px 8px;border-radius:6px;cursor:pointer}
.body ul.ingr li label:hover{background:var(--card)}
.body ul.ingr input{margin-top:6px;accent-color:var(--teal);width:16px;height:16px;flex-shrink:0}
.body ul.ingr input:checked+span{text-decoration:line-through;color:var(--muted)}
.body ul.plain{margin:0 0 1em;padding-left:1.2em}
.body ol.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 1em;display:grid;gap:14px}
.body ol.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:12px}
.body ol.steps li::before{content:counter(s);font-family:var(--f-display);font-weight:300;font-size:24px;line-height:1.2;color:var(--grey);font-variant-numeric:tabular-nums}
.temp{white-space:nowrap;background:var(--stamp);padding:0 6px;border-radius:4px;font-family:var(--f-display);font-size:.82em;font-weight:500}
.source{font-family:var(--f-display);font-size:12px;color:var(--muted);margin-top:30px;word-break:break-all}
.source a{color:var(--muted)}
aside.side{display:grid;gap:28px;align-content:start}
.side .box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px}
.side h4{font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.side .mini{display:grid;gap:12px}
.side .mini a{text-decoration:none;display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;font-size:15px;line-height:1.35}
.side .mini a:hover span{text-decoration:underline}
.side .mini i{display:grid;place-items:center;aspect-ratio:1;background:var(--tint,var(--stamp));border-radius:4px;font-family:var(--f-script);font-style:normal;font-size:26px;color:var(--card)}
.side .couple{width:120px;height:auto;display:block;margin:0 auto 10px}
.side .box p{margin:0;font-size:15px;color:var(--muted)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center;padding-block:20px 60px}
@media (max-width:820px){.about{grid-template-columns:1fr}}
.about img{width:100%;max-width:440px;height:auto;margin:0 auto;display:block}
.people{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media (max-width:460px){.people{grid-template-columns:1fr}}
.person{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.person h3{font-family:var(--f-script);font-size:42px;line-height:1;color:var(--script)}
.person .role{font-family:var(--f-display);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:6px 0}
.person p{margin:0;font-size:15px}
.person .warn{color:var(--red);font-size:14px;margin-top:6px}
.email{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}
.email code{font-family:var(--f-display);font-size:15px;background:var(--stamp);padding:6px 12px;border-radius:6px;user-select:all}
.btn{font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid var(--ink);background:transparent;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--card)}

/* home about strip */
.since{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 28px}
.since img{width:100%;height:auto;max-width:200px}
.since p{margin:0 0 12px;max-width:60ch}
@media (max-width:620px){.since{grid-template-columns:1fr;text-align:center}.since img{margin:0 auto;max-width:160px}}

/* countries */
.countries{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}

.aboutpic{padding:0;border:0;background:var(--stamp);border-radius:10px;overflow:hidden;cursor:zoom-in;display:block;max-width:100%;box-shadow:var(--shadow)}
.aboutpic img{display:block;width:100%;height:auto;max-width:100%;margin:0}
.person{display:flex;flex-direction:column;gap:6px}
.person .phead{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.body .person h3{margin:0;line-height:1}
.person .role{margin:0}
.person p{margin:0}
.person .avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--stamp);display:block;max-width:none;margin:0;flex-shrink:0}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:620px){.mosaic{grid-template-columns:1fr 1fr}}
.mosaic figure{margin:0;display:grid;gap:6px;min-width:0}
.mosaic button{padding:0;border:0;background:var(--stamp);border-radius:8px;overflow:hidden;cursor:zoom-in;aspect-ratio:1;max-width:100%;display:block}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.mosaic button:hover img{transform:scale(1.03)}
.mosaic figcaption{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.srch{position:fixed;inset:0;z-index:40;background:rgba(30,29,26,.45);display:flex;justify-content:center;align-items:flex-start;padding:calc(70px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.srch[hidden]{display:none!important}
.srch-box{width:100%;max-width:640px;max-height:calc(100vh - 110px);display:flex;flex-direction:column;background:var(--card);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.srch-in{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.srch-in svg{flex-shrink:0;color:var(--muted)}
.srch-in input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-family:var(--f-display);font-size:18px;color:var(--ink)}
.srch-in button{border:0;background:var(--stamp);color:var(--ink);font-family:var(--f-display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;cursor:pointer}
.srch-res{overflow-y:auto;padding:8px;display:grid;gap:2px}
.srch-res a{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:8px;border-radius:10px;text-decoration:none}
.srch-res a:hover,.srch-res a.on{background:var(--paper)}
.srch-res img,.srch-res i{width:56px;height:56px;border-radius:8px;object-fit:cover;display:grid;place-items:center;background:var(--tint,var(--stamp));font-family:var(--f-script);font-style:normal;font-size:26px;color:var(--card)}
.srch-res b{font-family:var(--f-display);font-weight:500;font-size:15px;line-height:1.3;display:block}
.srch-res small{font-family:var(--f-display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.srch-res mark{background:var(--stamp);color:inherit;border-radius:3px;padding:0 2px}
.srch-msg{padding:22px 16px;color:var(--muted);font-size:15px;text-align:center}
.srch-hints{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}

/* ===== dynamic layer ===== */
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#view{animation:viewIn .45s ease both}
.pre{opacity:.12;transform:translateY(28px)}
.rv{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.stampin img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .stampin img{transform:scale(1.07)}
.card h3{transition:color .2s ease}
.card:hover h3{color:var(--red)}
nav.main a{position:relative;transition:color .2s ease,background .2s ease}
/* carousel */
.car{position:relative;background:var(--stamp);overflow:hidden;aspect-ratio:2000/870;max-width:100%}
@media (max-width:700px){.car{aspect-ratio:4/3}}
.car .sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
.car .sl.on{opacity:1;visibility:visible;transition:opacity .9s ease}
.car .sl img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.car .sl.on img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.car .sl.banner img{animation:none}
.car .cap{position:absolute;left:0;right:0;bottom:0;padding:48px max(24px,env(safe-area-inset-left,0px)) 34px;background:linear-gradient(transparent,rgba(20,18,14,.72));color:#fff;display:grid;gap:8px}
.car .cap .in{max-width:1160px;margin:0 auto;width:100%;display:grid;gap:8px}
.car .cap .k{font-family:var(--f-display);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.car .cap h2{color:#fff;font-size:clamp(26px,4.4vw,52px);font-weight:300;line-height:1.05;max-width:18ch}
.car .cap p{margin:0;max-width:52ch;font-size:clamp(15px,1.6vw,18px);opacity:.92}
.car .cap a{justify-self:start;margin-top:6px;font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1e1d1a;background:#fff;padding:11px 18px;border-radius:999px;text-decoration:none;transition:transform .2s ease}
.car .cap a:hover{transform:translateX(4px)}
.car .sl.on .cap .in>*{animation:capIn .8s cubic-bezier(.2,.7,.2,1) both}
.car .sl.on .cap .in>*:nth-child(2){animation-delay:.08s}.car .sl.on .cap .in>*:nth-child(3){animation-delay:.16s}.car .sl.on .cap .in>*:nth-child(4){animation-delay:.24s}
@keyframes capIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:700px){.car .cap{padding:40px 18px 44px}.car .cap p{display:none}}
.car .ar{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.82);color:#1e1d1a;display:grid;place-items:center;cursor:pointer;z-index:2;opacity:0;transition:opacity .25s ease}
.car:hover .ar,.car .ar:focus-visible{opacity:1}
.car .ar.p{left:max(16px,env(safe-area-inset-left,0px))}.car .ar.n{right:max(16px,env(safe-area-inset-right,0px))}
@media (hover:none){.car .ar{display:none}}
.car .dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.car .dots button{width:28px;height:4px;border-radius:2px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;overflow:hidden;position:relative}
.car .dots button.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:dot 6.5s linear both}
.car.paused .dots button.on::after,.car.still .dots button.on::after{animation:none;transform:none}
.car .sl.banner~.dots button{background:rgba(63,61,56,.25)}
@keyframes dot{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* bento */
.bento{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:18px;min-height:520px}
.bento a{position:relative;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;background:var(--stamp);display:block;min-height:220px;box-shadow:var(--shadow)}
.bento a:first-child{grid-row:1/3}
.bento img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1);max-width:100%}
.bento a:hover img{transform:scale(1.06)}
.bento .bc{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(20,18,14,.75));display:grid;gap:4px}
.bento .bc small{font-family:var(--f-display);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.bento .bc b{font-family:var(--f-display);font-weight:400;font-size:20px;line-height:1.2}
.bento a:first-child .bc b{font-size:clamp(24px,3vw,34px);font-weight:300}
@media (max-width:760px){.bento{grid-template-columns:1fr;grid-template-rows:none;min-height:0}.bento a:first-child{grid-row:auto;min-height:320px}}
/* surprise */
.surprise{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px}
@media (max-width:760px){.surprise{grid-template-columns:1fr;padding:20px;gap:20px}}
.surprise h2{font-size:clamp(26px,3.4vw,38px);font-weight:300;line-height:1.1}
.surprise h2 em{font-family:var(--f-script);font-style:normal;color:var(--script);font-size:1.35em}
.surprise p{color:var(--muted);margin:10px 0 18px}
.dice{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--red);color:#fff;border:0;border-radius:999px;padding:14px 22px;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease;box-shadow:0 6px 18px rgba(184,49,43,.28)}
.dice:hover{transform:translateY(-2px)}
.dice:active{transform:scale(.97)}
.dice svg{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.dice.spin svg{transform:rotate(360deg)}
.pick{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;text-decoration:none;min-height:150px}
@media (max-width:460px){.pick{grid-template-columns:110px 1fr}}
.pick .ph{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--stamp);box-shadow:var(--shadow);max-width:100%}
.pick img{width:100%;height:100%;object-fit:cover;display:block}
.pick small{font-family:var(--f-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pick b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.2;margin:4px 0}
.pick span.go{font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.pick.rolling .ph img{filter:blur(1.5px)}
.pick.landed .ph{animation:land .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes land{from{transform:scale(.88) rotate(-4deg)}to{transform:none}}
/* map */
.tmap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:860px){.tmap{grid-template-columns:1fr}}
.tmap .mbox{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative}
.tmap svg{display:block;width:100%;height:auto;max-width:100%}
.tmap .sea{fill:var(--paper)}
.tmap .land{fill:var(--stamp);stroke:var(--card);stroke-width:.8}
.tmap .vis{fill:var(--stamp-edge);stroke:var(--card);stroke-width:.8}
.tmap .route{fill:none;stroke:var(--red);stroke-width:1.4;stroke-dasharray:3 5;opacity:.55}
.tmap .pin{cursor:pointer}
.tmap .pin circle.dot{fill:var(--red);stroke:var(--card);stroke-width:2.5;transition:r .2s ease}
.tmap .pin.home circle.dot{fill:var(--teal)}
.tmap .pin circle.ring{fill:none;stroke:var(--red);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.tmap .pin.home circle.ring{stroke:var(--teal)}
.tmap .pin:hover circle.dot,.tmap .pin.on circle.dot{r:9}
.tmap .pin.on circle.ring,.tmap .pin:hover circle.ring{animation:ring 1.6s ease-out infinite}
@keyframes ring{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(3)}}
.tmap .pin text{font-family:var(--f-display);font-size:12.5px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.tmap .pin:focus{outline:none}.tmap .pin:focus-visible circle.dot{stroke:var(--ink)}
.tmap .legend{position:absolute;left:14px;bottom:12px;display:flex;gap:14px;font-family:var(--f-display);font-size:11px;color:var(--muted);background:var(--card);padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.tmap .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:-1px}
.tmap .legend i.h{background:var(--teal)}
.mpanel{display:grid;gap:14px}
.mpanel .stat{display:flex;gap:22px}
.mpanel .stat div{display:grid}
.mpanel .stat b{font-family:var(--f-display);font-weight:300;font-size:40px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.mpanel .stat span{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mpanel h3{font-size:24px;font-weight:300}
.mpanel h3 small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.mpanel .hint{color:var(--muted);font-size:15px;margin:0}
.mlist{display:grid;gap:10px}
.mlist a{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px;transition:border-color .2s ease,transform .2s ease}
.mlist a:hover{border-color:var(--stamp-edge);transform:translateX(3px)}
.mlist img{width:72px;height:56px;object-fit:cover;border-radius:8px;display:block}
.mlist b{font-family:var(--f-display);font-weight:500;font-size:14.5px;line-height:1.3}
.mlist small{display:block;font-family:var(--f-display);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.mpanel.swap{animation:viewIn .35s ease both}
/* scaler + timers */
.scaler{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 4px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.scaler span{font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.scaler button{font-family:var(--f-display);font-size:13px;font-weight:600;min-width:44px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.scaler button[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.scaler small{flex-basis:100%;font-family:var(--f-display);font-size:11.5px;color:var(--muted)}
.ingr .q{transition:background .4s ease;border-radius:4px}
.ingr .q.bump{background:var(--stamp)}
.tmr{display:inline-flex;align-items:center;gap:5px;font:inherit;font-family:var(--f-display);font-size:.84em;font-weight:600;color:var(--teal);background:transparent;border:1px solid currentColor;border-radius:999px;padding:0 9px 0 7px;line-height:1.7;cursor:pointer;vertical-align:baseline;white-space:nowrap}
.tmr:hover{background:var(--teal);color:var(--card)}
.timers{position:fixed;z-index:35;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:8px}
.tbox{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--card);border-radius:999px;padding:8px 8px 8px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-family:var(--f-display);animation:viewIn .3s ease both}
.tbox b{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;min-width:62px}
.tbox span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbox button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:inherit;cursor:pointer;display:grid;place-items:center}
.tbox.done{background:var(--red);animation:pulse 1s ease infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){#view,.car .sl.on img,.car .sl.on .cap .in>*,.tmap .pin circle.ring,.tbox.done,.pick.landed .ph,.mpanel.swap{animation:none!important}.pre{opacity:1!important;transform:none!important}}
.socials{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.soc{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.08em;padding:7px 12px 7px 9px;border:1px solid var(--line);border-radius:999px;background:var(--card);transition:background .2s ease,color .2s ease,border-color .2s ease}
.soc:hover{background:var(--ink);color:var(--card);border-color:var(--ink)}
.side .socials{justify-content:center;margin-top:14px}
.socials.big{margin:0 0 6px}
footer .soc span{display:none}footer .soc{padding:8px}
.tmap .leg{fill:none;stroke:var(--red);stroke-linecap:round;transition:opacity .3s ease,stroke-width .3s ease}
.tmap .leg.air{stroke-width:1.4;stroke-dasharray:2 6;opacity:.6}
.tmap .leg.hop{stroke-width:1.8;stroke-dasharray:5 5;opacity:.55}
.tmap .leg.road{stroke-width:1.6;stroke-dasharray:3 4;opacity:.6}
.tmap .plane path{fill:var(--red)}
.tmap .plane{opacity:.75;transition:opacity .3s ease}
.tmap svg.focus .trip:not(.lit){opacity:.15}
.tmap svg.focus .pin:not(.intrip):not(.home){opacity:.45}
.tmap .pin{transition:opacity .3s ease}
.tmap .trip{transition:opacity .3s ease}
.tmap .trip.lit .leg{opacity:1;stroke-width:2.4;animation:march 1s linear infinite}
.tmap .trip.lit .plane{opacity:1}
@keyframes march{to{stroke-dashoffset:-20}}
.trip-line{font-size:14px!important}
.trip-line b{color:var(--red);font-weight:600}
@media (prefers-reduced-motion:reduce){.tmap .trip.lit .leg{animation:none}}
.coffee{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--coffee-ink);background:var(--coffee);padding:10px 18px;border-radius:999px;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease}
.coffee:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(201,150,30,.3)}
.coffee svg{transition:transform .3s ease}.coffee:hover svg{transform:rotate(-10deg)}
.since-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:620px){.since-cta{justify-content:center}}
.coffee-note{color:var(--muted);font-size:15px}
#bmc-wbtn{display:none!important}
.side-coffee{display:flex;justify-content:center;margin-top:12px}
footer{border-top:1px solid var(--line);margin-top:40px;background:var(--card)}
footer .wrap{padding-block:30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--f-display);font-size:12px;color:var(--muted);letter-spacing:.06em}
footer img{height:24px;width:auto}
footer .script{font-family:var(--f-script);font-size:28px;color:var(--script);letter-spacing:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}