/* ------------------------------------------------------------------
   Distillr, app stylesheet. Built to Jesse's screens in design/reference.
   Parchment pages, forest-green actions, brass accents, copper map pins,
   a near-black wood tab bar with a raised brass Add orb.
   ------------------------------------------------------------------ */
:root{
  --parch:#e3c7a3; --parch-2:#eeddc5; --card:#f2e2cb; --tile:#efdcbf; --card-line:rgba(43,29,18,.16);
  --forest:#1a2617; --forest-dk:#101e12; --forest-lt:#2c3a2a;
  --brass:#c78a48; --brass-lt:#d1965b; --copper:#7a4420; --star:#fca722;
  --ink:#2b1d12; --ink-2:#4a3727; --muted:#7a6a58; --muted-2:#a08f7a;
  --bar:#120e0b; --cream:#e8e3d3; --cream-2:#d8d9cd;
  --display:'Playfair Display',Georgia,serif;
  --serif:'Lora',Georgia,serif;
  --caps:'EB Garamond',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Inter,sans-serif;
  --script:'Dancing Script',cursive;
  --brass-dk:#8a531e;   /* copper darkened for text on parchment (orange washed out on tan) */
  --safe-t:env(safe-area-inset-top,0px);
  /* An old home-screen install (status-bar-style black-translucent) runs
     UNDER the status bar (top inset > 0) in a web view shorter than the
     screen (100vh > 100dvh), and iOS paints the home-indicator band outside
     it while still reporting a 34pt inset: that inset must be 0 there. A new
     install (status-bar-style default) is ALSO shorter than 100vh but sits
     below the status bar (top inset 0) and needs the full inset; the
     Capacitor shell has a top inset but 100vh = 100dvh. So subtract the gap
     only up to the top inset: old install 0, new install and shell 34.
     Pure CSS so it cannot miss the late-arriving insets; app.php's
     html.old-install check backs it up. Verified in both Simulator installs
     2026-09-11 (a first version zeroed the new install too). */
  --safe-b:max(0px, calc(env(safe-area-inset-bottom, 0px) - min(env(safe-area-inset-top, 0px), 100vh - 100dvh)));
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%;overscroll-behavior:none;overflow-x:hidden;max-width:100%}
body{background:var(--bar);color:var(--ink);font:16px/1.45 var(--serif);-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

#shell{display:contents}

/* ── type ── */
.h1{font:600 30px/1.15 var(--display);color:var(--ink);letter-spacing:-.01em}
.h2{font:600 24px/1.2 var(--display);color:var(--ink)}
.h3{font:600 18px/1.25 var(--display);color:var(--ink)}
.eyebrow{font:500 12.5px/1.55 var(--caps);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.eyebrow.light{color:var(--cream)}
.script{font:600 36px/1.1 var(--script);color:var(--cream);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.muted{color:var(--muted)}
.sub{font:400 14px/1.4 var(--sans);color:var(--ink-2)}
.rule{width:44px;height:1px;background:var(--ink-2);margin:10px 0}

/* ── surfaces ── */
/* Horizontal scroll is locked on every page; intentional side-scrollers
   (chips, photo strips) opt back in on their own element. */
.view{position:fixed;left:0;right:0;top:0;bottom:0;display:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;
  /* The base color is what iOS 26 paints behind the status bar in an
     installed web app: it samples the page layer's background-color ONCE, at
     launch, and ignores later screen changes, theme-color and scrolling
     (tested 2026-09-11). Dark, so the photo headers (Collection, Passport,
     Log a Tasting, Detail) read as running to the top. The paper image
     covers it on the parchment screens. */
  background:#16110a url('/assets/paper-page.jpg') center top/100% 100% no-repeat;padding-bottom:calc(var(--tab-h) + var(--safe-b) + 16px)}
.view.on{display:block}
.pad{padding:0 20px}
.card{background:var(--card);border:1px solid var(--card-line);border-radius:14px;box-shadow:0 8px 22px rgba(43,29,18,.12)}
.panel{margin:12px 20px;padding:16px}

/* ── buttons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:999px;
  font:500 15px var(--serif);letter-spacing:.02em;transition:transform .08s}
.btn:active{transform:scale(.985)}
.btn.caps{font:500 15px var(--caps);letter-spacing:.3em;text-transform:uppercase}
.btn.forest{background:var(--forest);color:var(--cream);box-shadow:0 8px 18px rgba(0,0,0,.28);border:1px solid rgba(232,227,211,.25)}
.btn.outline{border:1.5px solid rgba(243,233,214,.85);color:var(--cream);background:rgba(20,16,12,.25);backdrop-filter:blur(4px)}
.btn.outline-dark{border:1.5px solid var(--forest);color:var(--forest);background:transparent;height:46px}
.btn.wide{width:100%}
.btn.small{height:44px;padding:0 14px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-radius:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{display:inline-flex;align-items:center;gap:4px;font:400 15px var(--sans);color:var(--brass-dk)}
.link.center{width:100%;justify-content:center;margin-top:8px;color:var(--ink-2)}
.link.back{color:var(--brass-dk);font-size:17px;margin-bottom:8px}
.thero:not(.tasting) .link.back{color:var(--brass-lt)}   /* on the dark trip photo */
.link.back .ico{width:20px;height:20px;stroke-width:2}
.swap{display:block;width:100%;text-align:center;font:400 14px var(--serif);color:var(--muted);margin-top:14px}
.msg{min-height:0;font-size:14px;color:var(--muted);text-align:center;margin-top:8px}
.msg.on{min-height:20px}
.msg.err{color:#8a2d1c}
.msg.ok{color:var(--forest)}

/* ── forms. Selects match text inputs at 46px. ── */
.frow{margin-bottom:12px}
.fk{display:block;font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 7px}
.field,select.field{display:block;width:100%;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--card-line);
  background:rgba(255,252,246,.8);font:400 16px var(--serif);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.field:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(192,144,63,.2)}
.field.area{height:auto;min-height:96px;padding:12px 14px;line-height:1.45;resize:vertical}
.field.static{display:flex;align-items:center;color:var(--muted)}
.field::placeholder{color:var(--muted-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.search{position:relative}
.search .ico{position:absolute;left:14px;top:12px;color:var(--muted)}
.search .field{padding-left:44px}

/* ── splash ── */
.splash{position:fixed;inset:0;z-index:20;background:#1a1410 url('/assets/scenes/splash.jpg') center top/cover}
.splash-actions{position:absolute;left:24px;right:24px;bottom:calc(30px + var(--safe-b));display:grid;gap:12px}

/* ── sheet (auth) ── */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:88%;overflow-y:auto;padding:12px 22px calc(28px + var(--safe-b));
  background:var(--parch);border-radius:28px 28px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.45);
  animation:rise .32s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-grip{display:block;width:44px;height:4px;border-radius:2px;background:rgba(43,29,18,.3);margin:0 auto 18px;padding:0}
.sheet-scrim{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.15)}
/* GIS bakes a fixed width into its iframe and tops out at 400px, so both
   provider buttons share one 400px lane rather than Apple running wider. */
.socials{display:grid;gap:10px;margin:16px auto 6px;max-width:400px}
.socials > div{min-height:44px;display:flex;justify-content:center}
.socials > div > div{width:100%}
.socials iframe{margin:0 auto}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border-radius:8px;font:600 15px var(--serif)}
.social-btn.g{background:#fff;color:#1f1f1f;border:1px solid rgba(0,0,0,.18)}
.social-btn.a{background:#000;color:#fff}
.or{text-align:center;color:var(--muted);font-size:13px;position:relative;margin:12px 0 14px}
.or::before,.or::after{content:"";position:absolute;top:50%;width:34%;height:1px;background:var(--card-line)}
.or::before{left:0}.or::after{right:0}

/* ── tab bar ── */

/* ── home ── */
.home-top{padding:max(12px, calc(var(--safe-t) + 2px)) 16px 4px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.home-top .eyebrow{font-size:8.6px;letter-spacing:.24em;line-height:1.5}
.greet{font:500 10px var(--caps);letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
.greet-name{font:900 50px/1 var(--display);color:var(--ink);margin:-3px 0 7px;letter-spacing:-.02em}
.avatar{width:42px;height:42px;border-radius:50%;flex:none;border:2px solid var(--forest);
  background:url('/assets/avatar.jpg') center/cover;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.avatar-col{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.avatar-col .eyebrow{font-size:7.8px;letter-spacing:.18em;line-height:1.5;color:var(--ink-2)}
.avatar-col .rule{width:34px;margin:2px 0 0}
.trip-card{margin:8px 15px 8px;border-radius:12px;overflow:hidden;position:relative;height:133px;color:var(--cream);
  background:#2a1c10 url('/assets/scenes/card-landscape.jpg') center/cover;box-shadow:0 10px 24px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.35)}
.trip-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,10,6,.9) 0%,rgba(15,10,6,.55) 55%,rgba(15,10,6,.1) 100%)}
.trip-card .in{position:relative;padding:12px 16px 10px;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.trip-card .eyebrow{font-size:9.5px;letter-spacing:.24em}
.trip-card .name{font:600 22px/1.1 var(--display);margin-top:2px}
.trip-card .dates{font:400 12.5px var(--sans);opacity:.92;margin-top:2px}
.stats{display:flex;gap:0}
.stat{padding:0 14px 0 0;margin-right:14px;border-right:1px solid rgba(243,233,214,.35)}
.stat:last-child{border:0}
.stat b{display:block;font:500 20px/1 var(--display)}
.stat span{font:400 8.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.trip-card .stat b{font-size:17px}
.trip-card .stat span{font-size:7.5px}
.trip-card .go{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--cream);background:radial-gradient(circle at 35% 28%,#e1b56b,#b8843a 55%,#7e5620);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.trip-card.empty::before{background:linear-gradient(90deg,rgba(15,10,6,.92) 0%,rgba(15,10,6,.7) 55%,rgba(15,10,6,.3) 100%)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 15px 0}
.tile{background:var(--tile);border:1px solid var(--card-line);border-radius:12px;padding:11px 8px 8px;text-align:center;
  box-shadow:0 8px 22px rgba(43,29,18,.1);display:flex;flex-direction:column;align-items:center;gap:0}
.tile .ico{width:36px;height:36px;stroke-width:1.5;color:var(--ink);margin-bottom:2px}
.tile .t{font:600 15px/1.13 var(--display);color:var(--ink)}
.tile .r{width:18px;height:1px;background:var(--ink-2);margin:6.5px 0 7px}
.tile .d{font:500 7px/1.5 var(--caps);letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
/* The scene tucks 40px up behind the tiles, as in Home.png, so the tiles float
   over the sky instead of sitting on a hard edge. An alpha fade (not a
   painted parchment gradient) lets the real page show through, and the
   -16px bottom margin runs the scene down behind the bar as in the comp. home-band-v3 is the comp's
   scene with the script line, its rule and the tile slivers painted out,
   and its sky extended upward so it can sit at the comp's scale. */
.tiles{position:relative;z-index:1}
#v-home.on{display:flex;flex-direction:column}
#v-home.on > *{flex-shrink:0}
.band{position:relative;flex:1 0 120px;height:auto;margin:-40px 0 -16px;background:url('/assets/scenes/home-band-v3.jpg') right bottom/cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px);mask-image:linear-gradient(180deg,transparent 0,#000 44px)}
.band .script{position:absolute;left:22px;top:66px;transform:rotate(-6deg);font-size:30px}
.band .rule{position:absolute;left:52px;top:142px;background:var(--cream);opacity:.8}

/* ── trail ── */
.trail-top{position:absolute;left:0;right:0;top:0;z-index:1001;pointer-events:none;padding:calc(16px + var(--safe-t)) 20px 8px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.trail-top > *{pointer-events:auto}
.trail-top.static{position:relative;padding-bottom:4px}
.stops-sheet.flat{margin-top:0;border-radius:0;box-shadow:none;background:none;padding-top:0}
.stops-sheet.flat::before{display:none}
.trail-top .h1{font-size:31px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.trail-top .eyebrow{margin-top:8px;font-size:9.5px;line-height:1.75;letter-spacing:.24em}
.seg{display:flex;background:var(--card);border:1px solid var(--card-line);border-radius:999px;padding:3px;box-shadow:0 4px 12px rgba(43,29,18,.18)}
.seg button{padding:5px 13px;border-radius:999px;font:500 13px var(--serif);color:var(--ink)}
.seg button.on{background:var(--forest);color:var(--cream)}
.iconbtn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.iconbtn .ico{width:24px;height:24px;stroke-width:2}
.iconbtn.dark{background:var(--forest);color:var(--cream);box-shadow:0 6px 14px rgba(0,0,0,.35)}
.trail-tools{display:flex;align-items:center;gap:8px;flex:none}
/* isolation keeps Leaflet's z-indexed panes (400 to 650) inside the map, so
   the stops sheet below can overlap it with its handle and rounded top */
.mapwrap{position:relative;height:clamp(440px,55svh,560px);margin:0;background:var(--parch-2);overflow:hidden;isolation:isolate}
.map{position:absolute;inset:0;background:var(--parch-2)}
.mapwrap::after{content:"";position:absolute;inset:0;z-index:600;pointer-events:none;background:url('/assets/tex-parchment.jpg') center/cover;mix-blend-mode:multiply;opacity:.5}
.mapwrap .fade{position:absolute;left:0;right:0;top:0;height:150px;z-index:601;pointer-events:none;background:linear-gradient(180deg,rgba(226,200,160,.92),rgba(226,200,160,0))}
.mapwrap .ky{position:absolute;z-index:602;right:22px;top:266px;font:500 17px var(--caps);letter-spacing:.3em;color:#4d3a25;opacity:.85;pointer-events:none}
.mapwrap .script{position:absolute;z-index:602;right:16px;top:300px;transform:rotate(-8deg);color:#3a2a18;text-shadow:none;font-size:24px;pointer-events:none}
.mapwrap .rose{position:absolute;z-index:602;right:22px;top:80px;width:46px;height:46px;pointer-events:none;color:#4d3a25;opacity:.8}
/* The vintage look: OSM tiles pushed to sepia parchment. */
.map .leaflet-tile-pane{filter:sepia(.85) saturate(.5) brightness(1.04) contrast(.82)}
.map .leaflet-control-attribution{background:rgba(239,227,207,.7);color:var(--muted);font:8px var(--sans);padding:1px 4px}
.map .leaflet-control-attribution .leaflet-attribution-flag{display:none !important}
.map .leaflet-control-attribution a{color:var(--ink-2)}
.pin{background:none;border:0}
.pin svg{width:30px;height:38px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.pin .num{position:absolute;left:0;right:0;top:6px;text-align:center;font:600 12px var(--serif);color:var(--cream)}
.cluster{background:none;border:0}
.cluster span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font:600 13px var(--serif);color:var(--cream);
  background:radial-gradient(circle at 35% 30%,#b06a3a,#5a2a10 70%);border:2px solid #f2e2cb;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.pin-custom svg .body{fill:var(--forest)}
.statcard{position:absolute;z-index:603;left:14px;bottom:30px;display:flex;background:#eedcbf url('/assets/tex-parchment.jpg') center/cover;border-radius:3px;padding:10px 4px 14px;transform:rotate(-1.5deg);
  box-shadow:0 10px 22px rgba(43,29,18,.35);clip-path:polygon(1% 0,99% 2%,100% 96%,97% 100%,2% 98%,0 90%)}
.statcard .stat{border-right:1px solid rgba(43,29,18,.25);padding:0 12px;margin:0;text-align:center}
.statcard .stat:last-child{border:0}
.statcard .stat b{font-size:22px;color:var(--ink)}
.statcard .stat span{color:var(--ink);opacity:1;font:500 8.5px var(--caps);letter-spacing:.16em}
.locate{position:absolute;z-index:603;right:14px;bottom:34px;width:40px;height:40px}
/* the sheet overlaps the map's last 24px; keep the OSM credit above it */
.mapwrap .leaflet-bottom{bottom:24px}
.stops-sheet{position:relative;margin-top:-24px;background:linear-gradient(rgba(236,217,188,.8),rgba(236,217,188,.8)),#ead6b6 url('/assets/tex-parchment.jpg') center top/100% auto;border-radius:24px 24px 0 0;padding:8px 20px 8px;
  box-shadow:0 -10px 30px rgba(0,0,0,.22)}
.stops-sheet::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:rgba(43,29,18,.3);margin:0 auto 8px}
.stops-head{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 10px}
.stops-head .h2{font-size:22px;font-weight:700}
.stops-head .link{color:var(--ink);font-size:13.5px}
.stop{display:flex;align-items:center;gap:12px;padding:6px 8px 6px 6px;margin-bottom:9px;width:100%;border-radius:12px;text-align:left}
.thumb{position:relative;width:96px;height:60px;border-radius:8px;flex:none;overflow:hidden;
  background:#4a2f1a url('/assets/tex-oak.jpg') center/cover}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5))}
.thumb .badge{position:absolute;left:6px;top:6px;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--forest);color:var(--cream);
  font:600 12px/24px var(--serif);text-align:center;border:1.5px solid rgba(243,233,214,.7)}
.thumb .init{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font:600 26px var(--display);color:var(--cream);text-shadow:0 2px 4px rgba(0,0,0,.6)}
.stop .name{font:600 15.5px/1.15 var(--display);color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop .meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font:400 10.5px var(--sans);color:var(--ink-2);min-width:0}
.stop .meta > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop .meta .ico{width:13px;height:13px;margin-right:4px;vertical-align:-3px}
.stop .sub{font-size:12px}
.stop .chev{color:var(--ink-2);opacity:.6}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font:400 13.5px/1 var(--sans);color:var(--ink);padding:9px 14px;border-radius:999px;border:1px solid var(--card-line);background:var(--card)}
.chip.on{background:var(--brass);color:#fff;border-color:var(--brass)}
.chip.small{padding:5px 9px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* ── detail ── */
.hero{position:relative;height:360px;background:#2a1c10 center/cover;color:var(--cream)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,6,.55) 0%,rgba(15,10,6,0) 30%,rgba(15,10,6,.15) 55%,rgba(15,10,6,.92) 100%)}
.hero .top{position:relative;padding:calc(14px + var(--safe-t)) 20px 0;display:flex;justify-content:space-between;align-items:center}
.hero .top .link.back{margin:0}
.hero .bottom{position:absolute;left:20px;right:20px;bottom:18px}
.hero .h1{color:var(--cream);font-size:38px;font-weight:700;line-height:1;margin-bottom:6px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hero .where{display:flex;align-items:center;gap:6px;font:400 15px var(--sans)}
.hero .where .ico{width:16px;height:16px}
.stars{display:inline-flex;gap:2px;align-items:center;margin-top:8px;color:var(--star)}
.stars .ico{width:18px;height:18px;stroke-width:1.4}
.stars .ico.on{fill:var(--star)}
.stars .n{margin-left:8px;font:400 15px var(--sans);color:var(--cream)}
.stars .n.muted{color:rgba(243,233,214,.7);font-size:13px}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero-actions .btn{flex:1 1 44%;height:40px;border-radius:9px;font:500 10px var(--caps);letter-spacing:.14em;text-transform:uppercase;padding:0 6px;gap:5px;white-space:nowrap}
.hero-actions .btn.forest{border:1.5px solid rgba(192,144,63,.7)}
.hero-actions .btn.outline{border-color:rgba(243,233,214,.7);background:rgba(20,16,12,.35)}
.hero-actions .btn .ico{width:14px;height:14px}
.dtabs{display:flex;gap:0;padding:2px 20px 0;border-bottom:1px solid var(--card-line);margin-bottom:16px}
.dtabs button{padding:14px 0 10px;margin-right:18px;font:500 10.5px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid transparent}
.dtabs button.on{color:var(--ink);border-color:var(--ink)}
.about{display:grid;grid-template-columns:1fr 150px;gap:14px;padding:0 20px}
.about p{font:400 14.5px/1.5 var(--serif);color:var(--ink-2);margin-top:8px}
.about .script{color:var(--ink);text-shadow:none;font-size:21px;margin-top:12px;display:block}
.glance{background:#ead5b5 url('/assets/tex-parchment.jpg') center/cover;border:1px solid var(--card-line);border-radius:4px;padding:10px;box-shadow:0 8px 18px rgba(43,29,18,.2);
  transform:rotate(1.2deg);align-self:start}
.glance .eyebrow{font-size:10.5px;letter-spacing:.16em;border-bottom:1px solid var(--card-line);padding-bottom:8px;margin-bottom:10px}
.gl{display:flex;gap:8px;align-items:flex-start;margin-bottom:9px}
.gl .ico{width:18px;height:18px;color:var(--ink);flex:none;margin-top:1px}
.gl b{display:block;font:400 10.5px/1.3 var(--sans);color:var(--ink-2)}
.gl span{font:400 11px/1.35 var(--sans);color:var(--ink)}
.notes-block{padding:6px 20px 0}
.quote{margin:20px 20px 0;padding:22px 20px;border-radius:12px;color:var(--cream);text-align:center;
  background:#3f4537 url('/assets/tex-oak.jpg') center/cover;position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;inset:0;background:rgba(52,60,45,.9)}
.quote > *{position:relative}
.quote .q{font:italic 400 18px/1.4 var(--serif)}
.quote .who{font:500 11px var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);margin-top:10px}

/* ── simple headers for the plain views ── */
.vhead{padding:calc(18px + var(--safe-t)) 20px 6px}
.vhead .h1{font-size:34px}
.soon{margin:20px;padding:26px 18px;text-align:center}
.soon .ico{width:40px;height:40px;stroke-width:1.3;color:var(--ink-2)}
.soon .h3{margin:8px 0 6px}

/* ── lists ── */
.list-row{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 20px 10px}
.list-row .name{font:600 18px/1.15 var(--display);color:var(--ink)}

/* ── profile ── */
.profile .h2{margin:22px 0 10px}
.btn.danger{color:#8a2d1c;border:1.5px solid rgba(138,45,28,.5);background:transparent;height:46px}

@media (prefers-reduced-motion:reduce){.sheet{animation:none}}

/* ── trip itinerary (Iten screen) ── */
.thero{position:relative;height:200px;color:var(--cream);background:#2a1c10 url('/assets/scenes/hills.jpg') center/cover}
.thero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,6,.5),rgba(15,10,6,.15) 45%,rgba(15,10,6,.7))}
.thero .top{position:relative;padding:calc(12px + var(--safe-t)) 16px 0;display:flex;justify-content:space-between;align-items:center}
.thero .top .link.back{margin:0;font-size:17px}
.iconbtn.ring{border:1.5px solid rgba(243,233,214,.8);color:var(--cream);width:36px;height:36px}
.thero .ttitle{position:absolute;left:20px;right:20px;bottom:22px;text-align:center}
.thero .h1{color:var(--cream);font-size:32px;font-weight:600;line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.thero .eyebrow.light{margin-top:8px;font-size:11px;letter-spacing:.28em}
.thero .eyebrow.small{font-size:9px;margin-top:6px;opacity:.9}
.tsheet{position:relative;margin-top:-18px;border-radius:24px 24px 0 0;background:var(--parch-2) url('/assets/paper-page.jpg') center top/100% auto;padding:12px 0 8px;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.ttabs{display:flex;margin:0 20px 8px;background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:4px;box-shadow:0 4px 12px rgba(43,29,18,.14)}
.ttabs button{flex:1;padding:10px 4px;border-radius:9px;font:500 13px var(--serif);color:var(--ink)}
.ttabs button.on{background:var(--forest);color:var(--cream)}
.tday{padding:12px 20px 4px}
.tday-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--card-line);padding-bottom:8px;margin-bottom:6px}
.tday-head .h3{font-size:16px;letter-spacing:.04em}
.tday-head .h3 .sub{font-size:12px;margin-left:6px;letter-spacing:0}
.tday-span{display:flex;gap:4px;align-items:flex-start;font:500 9.5px/1.5 var(--caps);letter-spacing:.18em;color:var(--ink);text-align:right}
.tday-span .ico{width:14px;height:14px;color:var(--brass-dk);flex:none}
.timeline{position:relative;padding-left:0}
.timeline::before{content:"";position:absolute;left:66px;top:10px;bottom:22px;border-left:1.5px dashed var(--brass);opacity:.7}
.trow{display:flex;align-items:center;gap:8px;width:100%;padding:7px 0;text-align:left;position:relative}
.ttime{width:46px;flex:none;font:400 11.5px var(--sans);color:var(--ink);text-align:left;white-space:nowrap}
.tdot{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--forest);color:var(--cream);border:2px solid var(--parch-2);box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:1}
.tdot .ico{width:14px;height:14px}
.trow .thumb{width:80px;height:54px}
.tbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tbody .name{font:600 14.5px/1.15 var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbody .sub{font-size:11.5px}
.tmeta{display:flex;align-items:center;gap:5px;font:400 11.5px var(--sans);color:var(--ink-2);white-space:nowrap}
.tmeta .ico{width:14px;height:14px;color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:4px;align-self:flex-end;margin-top:2px;padding:3px 7px;border-radius:5px;background:rgba(31,58,42,.16);color:var(--forest);font:500 10px var(--sans);white-space:nowrap}
.pill .ico{width:13px;height:13px}
.trow .chev{color:var(--ink-2);opacity:.6;width:18px;height:18px}
.tadd{padding:6px 0 4px 66px;color:var(--brass-dk);font-size:14px}
.tadd .ico{width:16px;height:16px}
.mapwrap.tripmap{height:380px;margin-top:4px}
.resrow{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px}
.resrow .name{font:600 16px/1.15 var(--display);color:var(--ink)}
.resrow .chip{flex:none}
.stop .meta .res{color:var(--forest);font-weight:500}
.mapchip{position:absolute;z-index:603;right:16px;top:138px;background:var(--forest);color:var(--cream);border-color:var(--forest);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.trip-row .name{font-size:19px}

/* pin name labels on the route map (Plan screen) */
.pinlabel{background:none;border:0;box-shadow:none;padding:0;font:600 12.5px var(--display);color:var(--ink);text-shadow:0 0 3px rgba(239,227,207,.9),0 0 6px rgba(239,227,207,.9)}
.pinlabel::before{display:none}

/* ── Log a Tasting (Tasting screen) ── */
/* the hero art carries its own Back and title: push it below the status bar
   (the invisible Back button already sits at 4px + --safe-t) */
.thero.tasting{height:calc(184px + var(--safe-t));background-color:#16110a;background-image:url('/assets/scenes/tasting-hero.jpg');background-position:center var(--safe-t);background-size:100% auto;background-repeat:no-repeat}
.wide-only{display:none}
.thero.tasting .top{padding-top:calc(4px + var(--safe-t))}
.thero.tasting::before{background:none}
.tsheet.form{padding-top:14px}
.tsheet.form .card{margin:0 20px 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;padding:0}
.cell{display:flex;align-items:center;gap:10px;padding:14px 12px;border-right:1px solid var(--card-line);border-bottom:1px solid var(--card-line);min-width:0}
.cell:nth-child(2n){border-right:0}
.cell:nth-last-child(-n+2){border-bottom:0}
.cell > .ico{width:26px;height:26px;color:var(--ink);flex:none;stroke-width:1.4}
.cell > span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cell b{font:500 9.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.cell i{font:400 11.5px var(--sans);color:var(--muted);font-style:normal}
.cell .cv{width:16px;height:16px;color:var(--ink);opacity:.7;flex:none}
.bare{width:100%;border:0;background:none;padding:0;font:600 14px var(--display);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;min-width:0}
input.bare[type="date"]{font:500 14px var(--serif)}
.greencard{margin:0 20px 12px;padding:10px;border-radius:12px;display:grid;grid-template-columns:78px 48px 1fr;gap:8px;align-items:start;color:var(--cream);
  background:#1f2b1c url('/assets/scenes/green-card.jpg') center/cover;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.greencard .photo{width:78px;height:96px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(243,233,214,.25);display:flex;align-items:center;justify-content:center;color:var(--cream);overflow:hidden}
.greencard .photo img{width:100%;height:100%;object-fit:cover}
.greencard .photo img[src^="data:image/png"],.greencard .photo img[src$=".png"]{object-fit:contain;padding:6%}
.greencard .photo .ico{width:30px;height:30px;opacity:.8}
.addph{display:flex;flex-direction:column;align-items:center;gap:6px;font:400 11px var(--sans);color:var(--cream);padding-top:10px}
.addph .box{width:44px;height:44px;border-radius:8px;border:1.5px solid rgba(243,233,214,.7);display:flex;align-items:center;justify-content:center}
.bopt .eyebrow.light{font-size:9.5px;letter-spacing:.2em;margin-bottom:8px}
.segrow{display:flex;gap:6px}
.segrow button{flex:1;padding:7px 4px;border-radius:7px;font:500 10px var(--sans);color:var(--cream);border:1.5px solid rgba(243,233,214,.6);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.segrow button.on{background:rgba(243,233,214,.25);border-color:rgba(243,233,214,.9)}
.field.dark{margin-top:8px;height:38px;background:rgba(0,0,0,.35);color:var(--cream);border-color:rgba(243,233,214,.4);font-size:14px}
.raterow{display:flex;align-items:center;gap:12px;padding:12px 14px}
.raterow .stars{margin:0 0 0 auto;color:var(--star)}
.raterow .stars .ico{width:26px;height:26px}
.raterow b{font:600 18px var(--display);color:var(--ink);margin-left:6px}
.stars .ico.half{fill:url(#halfstar)}
.notes3{padding:12px 14px}
.notes3 .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.notes3 .cols > div{border-right:1px solid var(--card-line);padding-right:8px}
.notes3 .cols > div:last-child{border:0;padding-right:0}
.nl{display:flex;align-items:center;gap:5px;font:500 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.nl .ico{width:16px;height:16px}
.field.area.sm{min-height:84px;font-size:12.5px;padding:8px;line-height:1.35}
.chips.flav{padding:10px 14px 14px;flex-wrap:wrap;overflow:visible}
.chips.flav.sm{padding:8px 0 0}
.chip.on{background:var(--brass);color:#fff;border-color:var(--brass)}
.exp{padding:12px 14px}
.exp .row .ico{width:24px;height:24px;flex:none;color:var(--ink);margin-top:10px}
.exp .field.area{min-height:80px;margin-top:6px}
.exp .count{text-align:right;font:400 11px var(--sans);color:var(--muted);margin-top:4px}

/* journal */
.tcard{margin-bottom:12px;overflow:hidden}
.tphoto{width:100%;height:160px;object-fit:cover;display:block}
.tcard-in{padding:12px 14px}
.tcard .name{font:600 18px/1.15 var(--display);color:var(--ink)}
.stars.sm .ico{width:15px;height:15px}
.npf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px;font:400 12px/1.35 var(--sans);color:var(--ink-2)}
.npf b{display:block;font:500 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.exp-text{font:italic 400 14px/1.45 var(--serif);color:var(--ink-2);margin-top:10px}
.tcard .link{margin-top:8px;font-size:13px;color:#8a2d1c}

/* passport */
.photo-slot{width:100%;height:120px;border-radius:10px;border:1.5px dashed var(--card-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font:400 13px var(--sans);overflow:hidden;background:rgba(255,252,246,.5)}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot .ico{width:26px;height:26px}
.thumb.tall{width:58px;height:74px}
.thumb.tall img,.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.tall .init .ico{width:26px;height:26px;color:var(--cream)}
.chip.small.sealed{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.chip.small.open{background:var(--brass);color:#fff;border-color:var(--brass)}
.chip.small.finished{background:none}
.photos .strip{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 4px;scrollbar-width:none}
.photos .strip img{width:120px;height:120px;border-radius:10px;object-fit:cover;flex:none}
.hero-actions .btn.outline .ico.on{color:var(--brass-lt)}
/* The Tasting hero is sliced from the comp with its Back link baked in; the
   real button sits on top as a transparent tap target so it never doubles. */
.thero.tasting .link.back{color:transparent;width:90px;height:40px;margin-top:2px}
.thero.tasting .link.back .ico{opacity:0}

/* ── icons cut from the comps (design/icons/crops.json) ── */
.mi{display:inline-block;width:22px;height:22px;flex:none;background-color:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.mi.flip{transform:scaleX(-1)}
.mi.down{transform:rotate(90deg)}
.mi-barrel{--m:url('/assets/icons/barrel.png')}
.mi-bottle{--m:url('/assets/icons/bottle.png')}
.mi-bottles{--m:url('/assets/icons/bottles.png')}
.mi-cal{--m:url('/assets/icons/cal.png')}
.mi-chevr{--m:url('/assets/icons/chevr.png')}
.mi-clock{--m:url('/assets/icons/clock.png')}
.mi-compass{--m:url('/assets/icons/compass.png')}
.mi-fork{--m:url('/assets/icons/fork.png')}
.mi-gauge{--m:url('/assets/icons/gauge.png')}
.mi-gl-barrel{--m:url('/assets/icons/gl-barrel.png')}
.mi-gl-globe{--m:url('/assets/icons/gl-globe.png')}
.mi-gl-pin{--m:url('/assets/icons/gl-pin.png')}
.mi-globe{--m:url('/assets/icons/globe.png')}
.mi-home{--m:url('/assets/icons/home.png')}
.mi-house{--m:url('/assets/icons/house.png')}
.mi-lips{--m:url('/assets/icons/lips.png')}
.mi-locate{--m:url('/assets/icons/locate.png')}
.mi-map{--m:url('/assets/icons/map.png')}
.mi-more{--m:url('/assets/icons/more.png')}
.mi-nav{--m:url('/assets/icons/nav.png')}
.mi-nose{--m:url('/assets/icons/nose.png')}
.mi-note{--m:url('/assets/icons/note.png')}
.mi-passport{--m:url('/assets/icons/passport.png')}
.mi-pin{--m:url('/assets/icons/pin.png')}
.mi-search{--m:url('/assets/icons/search.png')}
.mi-star{--m:url('/assets/icons/star.png')}
.mi-still{--m:url('/assets/icons/still.png')}
.mi-ticket{--m:url('/assets/icons/ticket.png')}
.mi-tile-bottles{--m:url('/assets/icons/tile-bottles.png')}
.mi-tile-glass{--m:url('/assets/icons/tile-glass.png')}
.mi-tile-map{--m:url('/assets/icons/tile-map.png')}
.mi-tile-passport{--m:url('/assets/icons/tile-passport.png')}
.mi-waves{--m:url('/assets/icons/waves.png')}
.mi-wheat{--m:url('/assets/icons/wheat.png')}
.stars .mi-star.on{color:var(--star)}
.stars .mi-star.off{opacity:.28}
.halfwrap{position:relative;display:inline-block;width:22px;height:22px}
.halfwrap .mi{position:absolute;left:0;top:0;width:100%;height:100%}
.halfwrap .halfclip{clip-path:inset(0 50% 0 0)}
.stars.sm .halfwrap{width:15px;height:15px}
.stars.big .halfwrap{width:26px;height:26px}
.raterow .stars .mi{width:26px;height:26px}
.mapwrap .rose{width:52px;height:52px;background-color:#4d3a25}
.tile .mi{width:38px;height:38px;margin-bottom:5px}
.tdot .mi{width:16px;height:16px}
.cell > .mi{width:28px;height:28px}
.exp .row .mi{width:24px;height:24px;flex:none;color:var(--ink);margin-top:10px}
.glance .gl .mi{width:19px;height:19px}

/* tab glyph states as drawn in the comps: filled when active, outline when not */
.mi-home-outline{--m:url('/assets/icons/home-outline.png')}
.mi-map-filled{--m:url('/assets/icons/map-filled.png')}
.cell > .mi{width:24px;height:24px}
.cell i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bare{font-size:13.5px}
.locate .mi{width:24px;height:24px}
.mapwrap .rose{opacity:.9}

/* ══════════════════════════════════════════════════════════════════════
   iPad and desktop (768px and up, the fleet breakpoint). The phone chrome
   becomes a left navigation rail, every view gets room, and the Trail puts
   the map beside the list instead of above it.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  :root{--rail:96px}
  .view{left:var(--rail);padding-bottom:40px}
  .vhead,.pad{padding-left:32px;padding-right:32px}
  .panel{margin:12px 32px}
  .list-row,.tcard{margin-left:0;margin-right:0}
  /* lists become card grids on a wide screen */
  #v-bottles .pad,#v-trips .pad,#v-journal .pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px;align-items:start}
  #v-bottles .pad .btn,#v-trips .pad .btn{grid-column:1/-1;max-width:420px}
  #v-trips .pad > p,#v-journal .pad > p{grid-column:1/-1}
  #v-trips .panel{grid-column:1/-1;margin:0;max-width:720px}

  /* splash + auth: centered on the art, the sheet becomes a dialog */
  /* The phone splash is a portrait slice with the badge baked in; stretched
     over a desktop it is a wall of barrel. Wide screens get the landscape
     scene, the badge as a true cutout, and a centered column so the buttons
     never overlap it. */
  .splash{left:0;background:#1a1410 url('/assets/scenes/hills.jpg') center 45%/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
  .splash::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,6,.35),rgba(15,10,6,.15) 45%,rgba(21,29,16,.85))}
  .splash-art{position:relative;width:260px;height:242px;background:url('/assets/badge.png') center/contain no-repeat;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
  .splash-actions{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:none;width:400px}
  /* the comp's script line belongs on a phone; on a wide map it lands on pins */
  .mapwrap .script,.mapwrap .ky{display:none}
  /* home: one full-width column, roomier tiles, the scene fills the rest */
  .home-top{padding:40px 32px 8px}
  .trip-card{margin:10px 32px 12px;height:160px}
  .tiles{margin:0 32px 32px;grid-template-columns:repeat(4,1fr);align-content:start}
  .tile{padding:26px 14px 22px}
  .tile .mi{width:52px;height:52px}
  .tile .d{font-size:9.5px}
  .tile .r{width:22px;margin:8px 0 8px}
  .tile{gap:4px}
  .home-top .eyebrow{font-size:10.5px}
  .greet{font-size:11px}
  .avatar-col .eyebrow{font-size:9.5px}
  .tile .t{font-size:20px}
  #v-home.on{padding-bottom:0}
  /* wide: the comp's scene at its own scale, anchored bottom right, fading
     into the parchment on its left (no blown-up or mirrored fill). Its
     width is 1.588x its height, hence the cqh maths. */
  .band{margin-bottom:0;container-type:size;background:none}
  .band::after{content:"";position:absolute;inset:0;
    background:url('/assets/scenes/home-band-v3.jpg') right bottom/auto min(100%, 640px) no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent calc(100% - min(158.8cqh, 1016px)),#000 calc(100% - min(158.8cqh, 1016px) + 80cqh)),linear-gradient(180deg,transparent calc(100% - min(100cqh, 640px)),#000 calc(100% - min(100cqh, 640px) + 30%));-webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg,transparent calc(100% - min(158.8cqh, 1016px)),#000 calc(100% - min(158.8cqh, 1016px) + 80cqh)),linear-gradient(180deg,transparent calc(100% - min(100cqh, 640px)),#000 calc(100% - min(100cqh, 640px) + 30%));mask-composite:intersect}
  .greet-name{font-size:60px}

  /* trail: map left and sticky, sheet right and scrolling */
  .trail-top{padding:24px 28px 8px}
  .trail-top .h1{font-size:40px}
  .mapwrap{height:520px}
  #v-trail .search{padding:16px 20px 0}
  .mapwrap .ky{top:auto;bottom:130px;right:28px;font-size:22px}
  .mapwrap .script{top:auto;bottom:74px;right:20px;font-size:30px}
  .mapwrap .rose{top:110px;right:28px;width:64px;height:64px}
  .statcard{left:28px;bottom:28px;padding:14px 8px}
  .locate{right:28px;bottom:32px;width:46px;height:46px}
  .mapchip{top:auto;bottom:100px;left:28px;right:auto}
  .stops-sheet.flat{margin-top:0}
  .stop .name{white-space:normal}

  /* detail: wide hero, two columns beneath */
  .hero{height:420px}
  .hero .bottom{left:32px;right:32px}
  .hero .h1{font-size:52px}
  .hero-actions .btn{flex:1 1 22%}
  .dtabs{padding-left:32px}
  .about{grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding:0 32px}
  .about p{font-size:16.5px}
  .glance{padding:16px}
  .gl b{font-size:12px}.gl span{font-size:13px}
  .notes-block,.photos{padding-left:32px;padding-right:32px}
  .photos .row{padding:0 !important}
  .photos .strip{padding:8px 0 4px}

  /* trip: hero band, centered itinerary */
  .thero{height:300px}
  .thero .h1{font-size:46px}
  .tsheet{margin:-18px 0 0;border-radius:0;padding:20px 0 24px}
  .ttabs{margin:0 32px 12px}
  .tday{padding:16px 32px 4px}
  #v-trip .pad,.mapwrap.tripmap{margin:0 32px}
  .resrow{margin:0 0 10px}
  #v-trip .tsheet > .pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px;align-items:start}
  #v-trip .tsheet > .pad > p,#v-trip .tsheet > .pad textarea,#v-trip .tsheet > .pad .btn,#v-trip .tsheet > .pad .msg{grid-column:1/-1}
  .mapwrap.tripmap{position:relative;height:560px;grid-row:auto;border:1px solid rgba(43,29,18,.2);border-radius:16px}
  .tday{padding:16px 24px 4px}
  .tbody .name{white-space:normal;font-size:17px}
  .trow .thumb{width:110px;height:72px}
  .resrow{margin-left:auto;margin-right:auto}

  /* tasting form and journal */
  /* the phone hero is a slice with the title baked in; wide screens get a
     clean texture, the glass on the right, and the title as text */
  .thero.tasting{height:250px;background:url('/assets/barrel-head.jpg') right -60px center/auto 150% no-repeat,#1a1410 url('/assets/tex-oak.jpg') center/cover;background-blend-mode:lighten,normal}
  .thero.tasting::before{background:linear-gradient(90deg,rgba(15,10,6,.85) 0%,rgba(15,10,6,.55) 55%,rgba(15,10,6,.15) 100%)}
  .thero.tasting .wide-only{display:block}
  .thero.tasting .ttitle{text-align:left;left:32px;bottom:34px}
  .thero.tasting .h1{font-size:44px}
  .tsheet.form .card,.greencard,.tsheet.form .pad{margin-left:32px;margin-right:32px;max-width:none}
  .tsheet.form .pad{padding:0}
  .tsheet.form .pad .btn{max-width:420px}
  .tsheet.form .card{margin-bottom:14px}
  .greencard{margin-bottom:14px;grid-template-columns:110px 60px 1fr}
  .greencard .photo{width:110px;height:120px}
  #v-journal .pad{padding-left:32px}

  /* passport and bottles */
}
@media (min-width:1000px){
  .mapwrap .leaflet-bottom{bottom:0}
  /* trail: map left and sticky, sheet right and scrolling */
  #v-trail.on{display:grid;grid-template-columns:minmax(0,1fr) 440px;align-content:start;padding-bottom:0}
  .trail-top{width:calc(100% - 440px);padding:24px 28px 8px}
  #v-trail .search,#v-trail .chips{grid-column:2}
  .mapwrap{grid-column:1;grid-row:1/span 4;position:sticky;top:0;height:100vh;border-right:1px solid rgba(43,29,18,.2)}
  .stops-sheet{grid-column:2;margin-top:0;border-radius:0;box-shadow:none;padding:24px 24px 24px;min-height:100vh}
  .stops-sheet::before{display:none}
}
@media (min-width:1100px){
  #v-trail{grid-template-columns:minmax(0,1fr) 500px}
  .trail-top{width:calc(100% - 500px)}
  /* home stays one full-width column like every other page (Jesse,
     2026-09-11); the scene fills whatever height is left, see #v-home.on */
  .home-top{padding-left:48px;padding-right:48px}
  .trip-card{margin-left:48px;margin-right:48px}
  .tiles{margin-left:48px;margin-right:48px}
}

/* itinerary days in two columns on a wide screen */
@media (min-width:1100px){
  .tsheet .days{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
}

/* Google photo attribution, required by Places terms */
.photo-credit{position:absolute;right:12px;top:calc(14px + var(--safe-t));z-index:2;font:400 10.5px var(--sans);color:rgba(243,233,214,.8);background:rgba(0,0,0,.35);padding:3px 8px;border-radius:6px}
.hero .top{position:relative;z-index:3}
.photos .strip figure{flex:none;margin:0;width:150px}
.photos .strip figure img{width:150px;height:120px;border-radius:10px;object-fit:cover}
.photos .strip figcaption{font:400 10px var(--sans);color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photos .strip > img{width:150px;height:120px}
.thumb img{position:relative;z-index:0}
.thumb .badge{z-index:2}

/* flex children must be allowed to shrink or long text pushes the row wide */
.grow,.tbody,.cell > span{min-width:0}
img,iframe{max-width:100%}

/* ── map peek card ── */
.peek{position:absolute;left:12px;right:12px;bottom:36px;z-index:700;padding:12px;border-radius:16px;
  background:var(--card) url('/assets/tex-parchment.jpg') center/cover;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:peekin .2s ease-out}
@keyframes peekin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.peek-x{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-2);background:rgba(255,252,246,.7)}
.peek-x .ico{width:16px;height:16px}
.peek-row{display:flex;gap:12px;align-items:flex-start;padding-right:30px}
.peek-img{position:relative;width:92px;height:78px;border-radius:10px;overflow:hidden;flex:none;background:#4a2f1a url('/assets/tex-oak.jpg') center/cover}
.peek-img img{width:100%;height:100%;object-fit:cover;display:block}
.peek-img .init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 28px var(--display);color:var(--cream)}
.peek-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.peek-body .name{font:700 19px/1.15 var(--display);color:var(--ink)}
.peek-body .stars{margin-top:2px;color:var(--star)}
.peek-body .stars .n{font:400 12.5px var(--sans);color:var(--ink-2);margin-left:6px}
.peek-hours{display:flex;align-items:center;gap:5px;font:400 12px var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peek-hours .mi,.peek-hours .ico{width:14px;height:14px;flex:none}
.peek-actions{display:flex;gap:8px;margin-top:12px}
.peek-actions .peek-dir{flex:0 0 46px;padding:0}
.peek-actions .peek-dir span{display:none}
.peek-actions .btn{flex:1;height:42px;padding:0 8px;border-radius:10px;font:500 11px var(--caps);letter-spacing:.14em;text-transform:uppercase;gap:5px;white-space:nowrap}
.peek-actions .btn .mi,.peek-actions .btn .ico{width:14px;height:14px}
@media (min-width:1000px){ .peek{left:auto;right:28px;bottom:auto;top:120px;width:420px} .peek-actions .peek-dir{flex:1;padding:0 8px} .peek-actions .peek-dir span{display:inline} }

/* ── Installed web app on iOS 26 with a TRANSLUCENT status bar (installs made
   before 2026-09-11): the web view ends 62pt above the screen bottom
   (measured: screen 874, inner 812; the band is native, not paintable). The
   real fix is apple-mobile-web-app-status-bar-style=default in app.php, which
   measured 0pt of gap on a fresh install; this only softens old installs. The home indicator is therefore outside the web
   view, so the tab bar drops its safe-area padding there. Do NOT offset
   bottom layers below 0 to reach the band: that area is clipped and it cut
   the tab labels off on a real phone. */

/* Detail hero over arbitrary Google photos: a strong scrim top and bottom,
   header controls on dark pills, and a column layout so a two-line name
   grows the hero instead of running into the back link. */
.hero{display:flex;flex-direction:column;min-height:360px;height:auto}
.hero::before{background:linear-gradient(180deg,rgba(10,7,4,.78) 0%,rgba(10,7,4,.35) 22%,rgba(10,7,4,.1) 40%,rgba(10,7,4,.55) 62%,rgba(10,7,4,.94) 100%)}
.hero .top{position:relative;z-index:3;padding:calc(10px + var(--safe-t)) 14px 0}
.hero .top .link.back{background:rgba(10,7,4,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:7px 14px 7px 8px;border-radius:999px;color:var(--brass-lt);font-size:15px}
.hero .bottom{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;padding:70px 20px 28px}
.hero .h1,.hero .where,.hero .stars .n{text-shadow:0 2px 10px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.8)}
.photo-credit{top:auto;bottom:6px;right:10px;background:rgba(10,7,4,.55);color:rgba(243,233,214,.75);font-size:9.5px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:768px){ .hero{min-height:420px} .hero .bottom{padding:90px 32px 22px} }


/* ══ NAV BAR: the single source of truth, rebuilt from scratch 2026-09-11.
   Every number here was measured off Plan.png (851px wide = 393pt):
   bar 52pt + home indicator area; icons 26pt box with its top 8.6pt down;
   EB Garamond labels ending 46pt down; 42pt copper orb whose top sits 2pt below
   the bar edge; dome 55x12pt; active tab = a flat olive panel 72pt wide.
   Art is cut from the comp itself under NEW filenames (images cache 30 days,
   so an overwritten file in place kept phones on the old slice):
   nav/plank-v2.jpg is the comp's bar with its icons, orb, panel and home
   indicator painted out; nav/dome-v2.png is the comp's dome with alpha.
   --bar (page background) is the plank's own color, so any band iOS paints
   below the web view reads as more plank, never a second strip.
   No other rule in this file may touch .tabs, .tab or .orb. */
:root{--tab-h:52px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:15;height:calc(var(--tab-h) + var(--safe-b));
  display:flex;align-items:stretch;padding:0 4.5px var(--safe-b);
  background:var(--bar) url('/assets/nav/plank-v2.jpg') center top/100% auto no-repeat}
.tabs::after{content:"";position:absolute;left:50%;top:-11.55px;width:55.4px;height:12px;margin-left:-27.7px;pointer-events:none;
  background:url('/assets/nav/dome-v2.png') center/100% 100% no-repeat}
.tab{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;padding-top:8.6px;
  color:#e6e3dc;font:400 10.2px/1 'EB Garamond',Georgia,serif;letter-spacing:0;-webkit-tap-highlight-color:transparent}
.tab .mi{width:26px;height:26px;color:#e8bf8e}
.tab:not(.center) span{margin-top:4.5px}
.tab.on{color:#dea35e}
.tab.on .mi{color:#dea35e;background:linear-gradient(180deg,#e4aa64 0%,#d39752 38%,#b07742 70%,#8d5c32 100%)}
/* ^ every active glyph gets the Home comp's top-lit copper fade (sampled
   206,154,98 at the top to 132,88,50 at the base), per Jesse 2026-09-11 */
.tab.on::before{content:"";position:absolute;z-index:-1;left:3.5px;right:3.5px;top:0;
  height:calc(var(--tab-h) + max(0px, var(--safe-b) - 20px));
  background:radial-gradient(ellipse 26px 22px at 50% 34px,rgba(232,164,86,.08),rgba(232,164,86,0) 100%),
    linear-gradient(180deg,rgba(13,15,8,.82) 0%,rgba(19,20,11,.8) 55%,rgba(20,19,11,.72) 85%,rgba(20,19,11,0) 100%);
  box-shadow:inset 1px 0 rgba(0,0,0,.28),inset -1px 0 rgba(0,0,0,.28)}
.tab.center{flex:0 0 68px;padding-top:1.8px}
.orb{box-sizing:border-box;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#faf2da;
  background:linear-gradient(180deg,#9d6939 0%,#8f5d30 40%,#74482a 66%,#5f3c1d 100%);
  border:1.3px solid #d39658;
  box-shadow:0 0 0 1px #050403,inset 0 1px 0 rgba(255,214,160,.55),0 3px 7px rgba(0,0,0,.55)}
.orb .ico{width:28.5px;height:28.5px;stroke-width:1.7}
/* glyph states as drawn in the comps: outline when idle, filled when active */
.tab[data-view="home"]:not(.on) .mi-home{--m:url('/assets/icons/home-outline.png')}
.tab[data-view="trail"].on .mi-map{--m:url('/assets/icons/map-filled.png')}
.tab[data-view="bottles"].on .mi-bottles{--m:url('/assets/icons/bottles-filled.png')}
.tab[data-view="passport"].on .mi-passport{--m:url('/assets/icons/passport-filled.png')}
/* An old home-screen install (status-bar-style black-translucent) gets a web
   view 62pt short with the home indicator outside it; no inset there. */
html.old-install,html.short-vp{--safe-b:0px}
/* iPad and desktop: the same plank as a left rail (a seamless vertical tile) */
@media (min-width:768px){
  .tabs{left:0;right:auto;top:0;bottom:0;width:var(--rail);height:auto;flex-direction:column;align-items:stretch;gap:4px;
    padding:calc(18px + var(--safe-t)) 8px 18px;background:var(--bar) url('/assets/nav/rail-v2.jpg') left top/851px auto repeat-y;
    box-shadow:1px 0 0 rgba(255,228,185,.06)}
  .tabs::after{display:none}
  .tab{flex:0 0 auto;padding:12px 4px;border-radius:10px;font-size:12.5px}
  .tab.on::before{inset:0;height:auto;border-radius:10px;background:rgba(13,15,8,.8)}
  .tab.center{flex:0 0 auto;padding:10px 0 12px}
  .orb{width:50px;height:50px}
  .orb .ico{width:32px;height:32px}
}

/* ══ PASSPORT: built to Passport.png. --u is one comp pixel (the comp is
   851px wide), so every number below is read straight off the comp and the
   page scales with the phone. Art is sliced by tools/slice-passport.py. */
#v-passport{background:linear-gradient(rgba(20,12,7,.8),rgba(20,12,7,.8)),#1a1009 url('/assets/tex-oak.jpg') center top/100% auto}
.pp{position:relative;container-type:inline-size}
.pp-col{display:contents}
/* --u lives on the children: cqw resolves against .pp only below it. --x is
   how much taller a real status bar is than the comp's; the hero grows by it
   so Back never sits under the clock and nothing below crowds. */
.pp-col > *{--u:calc(100cqw / 851);--x:max(0px, calc(var(--safe-t) + 2px - 92 * var(--u)))}
.pp-hero{position:relative;height:calc(480 * var(--u) + var(--x));background:url('/assets/passport/hero.jpg') center var(--x)/100% auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent);
  padding:calc(92 * var(--u) + var(--x)) 0 0 calc(40 * var(--u))}
.pp-back{display:flex;align-items:center;gap:calc(14 * var(--u));color:#d9a45f;font:400 calc(25 * var(--u))/1 var(--serif);padding:calc(4 * var(--u)) 0}
.pp-back .mi{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.pp-title{margin:calc(48 * var(--u)) 0 0 calc(22 * var(--u));font:700 calc(53 * var(--u))/1.1 var(--display);color:#f4ecdd;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.pp-eyebrow{margin:calc(10 * var(--u)) 0 0 calc(23 * var(--u));font:500 calc(20 * var(--u))/1.45 var(--caps);letter-spacing:.19em;text-transform:uppercase;color:#efe5d3;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pp-rule{display:block;width:calc(50 * var(--u));height:max(1px,calc(2 * var(--u)));background:#efe5d3;margin:calc(20 * var(--u)) 0 0 calc(23 * var(--u))}
.pp-ticket{position:relative;z-index:1;margin:calc(-69 * var(--u)) 0 0 calc(33 * var(--u));width:calc(786 * var(--u));height:calc(181 * var(--u));
  background:url('/assets/passport/ticket.png') center/100% 100% no-repeat;filter:drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.55));
  display:grid;grid-template-columns:calc(203 * var(--u)) calc(192 * var(--u)) calc(192 * var(--u)) 1fr;color:#2b1d12}
.ppt-cell{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:calc(24 * var(--u))}
.ppt-cell + .ppt-cell::before{content:"";position:absolute;left:0;top:calc(34 * var(--u));bottom:calc(32 * var(--u));width:1px;background:rgba(60,40,22,.4)}
.ppt-cell .mi{width:calc(52 * var(--u));height:calc(52 * var(--u));color:#3b2a1c}
.mi.pp-barrel{--m:url('/assets/icons/pp-barrel.png')}.mi.pp-compass{--m:url('/assets/icons/pp-compass.png')}
.mi.pp-ky{--m:url('/assets/icons/pp-ky.png')}.mi.pp-peaks{--m:url('/assets/icons/pp-peaks.png')}
.ppt-cell b{margin-top:calc(8 * var(--u));font:700 calc(34 * var(--u))/1 var(--display);color:#23180f}
.ppt-cell span{margin-top:calc(9 * var(--u));font:500 calc(15.5 * var(--u))/1.3 var(--caps);letter-spacing:.05em;text-transform:uppercase;text-align:center;color:#2b1d12}
/* the book: a swipeable row of spreads */
.pp-books{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-top:calc(19 * var(--u));overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.pp-books::-webkit-scrollbar{display:none}
.pp-spread{flex:0 0 100%;scroll-snap-align:center;padding:0 calc(5 * var(--u)) 0 calc(13 * var(--u))}
.pp-book{position:relative;height:calc(651 * var(--u));border-radius:calc(22 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u));
  background:linear-gradient(90deg,#5a3a24,#6d4830 12%,#5c3b25 50%,#6d4830 88%,#553621);
  box-shadow:0 calc(14 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.45);display:flex}
.pp-page{position:relative;flex:1;display:flex;flex-direction:column;
  background:linear-gradient(rgba(233,214,184,.66),rgba(226,204,172,.6)),#e0c9a6 url('/assets/tex-parchment.jpg') center/cover}
.pp-page.l{border-radius:calc(14 * var(--u)) 0 0 calc(14 * var(--u));box-shadow:inset calc(-26 * var(--u)) 0 calc(24 * var(--u)) calc(-14 * var(--u)) rgba(90,58,28,.55),inset 0 0 calc(30 * var(--u)) rgba(120,80,40,.25)}
.pp-page.r{border-radius:0 calc(14 * var(--u)) calc(14 * var(--u)) 0;box-shadow:inset calc(26 * var(--u)) 0 calc(24 * var(--u)) calc(-14 * var(--u)) rgba(90,58,28,.5),inset 0 0 calc(30 * var(--u)) rgba(120,80,40,.25)}
.pp-page.r::before{content:"";position:absolute;left:-1px;top:calc(8 * var(--u));bottom:calc(8 * var(--u));width:2px;
  background:repeating-linear-gradient(180deg,#9a7446 0 calc(6 * var(--u)),transparent calc(6 * var(--u)) calc(22 * var(--u)))}
.pp-head{text-align:center;padding:calc(26 * var(--u)) calc(38 * var(--u)) 0;color:#2b1d12;position:relative}
.pp-k{font:500 calc(16 * var(--u))/1 var(--caps);letter-spacing:.24em;text-transform:uppercase;padding-bottom:calc(9 * var(--u));border-bottom:1px solid rgba(43,29,18,.7)}
.pp-pass{font:700 calc(33 * var(--u))/1 var(--caps);letter-spacing:.16em;text-transform:uppercase;padding:calc(12 * var(--u)) 0 calc(10 * var(--u));border-bottom:1px solid rgba(43,29,18,.7)}
.pp-tag{font:500 calc(14.5 * var(--u))/1 var(--caps);letter-spacing:.11em;text-transform:uppercase;padding-top:calc(12 * var(--u))}
.mi.pp-ky-mark{--m:url('/assets/icons/pp-ky.png');position:absolute;left:calc(150 * var(--u));top:calc(112 * var(--u));width:calc(88 * var(--u));height:calc(88 * var(--u));background-color:#9a8468;opacity:.7}
.pp-quote{text-align:center;padding:calc(26 * var(--u)) calc(70 * var(--u)) 0;font:italic 400 calc(19.5 * var(--u))/1.45 var(--serif);color:#2b1d12}
.pp-quote i{display:block;width:calc(36 * var(--u));height:max(1px,calc(2 * var(--u)));background:#2b1d12;margin:calc(16 * var(--u)) auto 0}
.pst-grid{display:grid;grid-template-columns:1fr 1fr;align-content:start;padding:calc(33 * var(--u)) calc(14 * var(--u)) 0;row-gap:calc(4 * var(--u))}
.pp-page.l .pst-grid{padding-left:calc(24 * var(--u));padding-right:calc(4 * var(--u))}
.pp-book.more .pst-grid{padding-top:calc(34 * var(--u));row-gap:calc(8 * var(--u))}
.pst-cell{display:flex;flex-direction:column;align-items:center}
.pst{position:relative;width:calc(160 * var(--u));height:calc(160 * var(--u));transform:rotate(var(--r,0deg));color:var(--ink);
  -webkit-mask-image:url('/assets/passport/grunge.png');-webkit-mask-size:calc(300 * var(--u));mask-image:url('/assets/passport/grunge.png');mask-size:calc(300 * var(--u))}
.pp-book.more .pst{width:calc(144 * var(--u));height:calc(144 * var(--u))}
.pst.empty{opacity:.34}
.pst-ring{position:absolute;inset:0;background-color:currentColor;-webkit-mask:url('/assets/passport/ring.png') center/100% 100% no-repeat;mask:url('/assets/passport/ring.png') center/100% 100% no-repeat}
.pst-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pst-svg text{fill:currentColor;font-family:'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:.06em}
.pst-bot{font-size:9px;letter-spacing:.16em}
.pst-date{min-height:calc(19 * var(--u));margin-top:calc(5 * var(--u));font:500 calc(19 * var(--u))/1 var(--caps);letter-spacing:.04em;color:#2b1d12}
.pp-foot{margin-top:auto;padding:0 calc(34 * var(--u)) calc(28 * var(--u))}
.pp-foot.l{font:500 calc(34 * var(--u))/1 var(--script);color:#4a3727;padding-left:calc(70 * var(--u));transform:rotate(-4deg);transform-origin:left bottom}
.pp-foot.r{text-align:right;font:500 calc(14 * var(--u))/1 var(--caps);letter-spacing:.28em;text-transform:uppercase;color:#2b1d12;padding-bottom:calc(36 * var(--u))}
.pp-dots{display:flex;justify-content:center;gap:calc(12 * var(--u));margin-top:calc(14 * var(--u))}
.pp-dots i{width:calc(12 * var(--u));height:calc(12 * var(--u));border-radius:50%;background:rgba(239,229,211,.3)}
.pp-dots i.on{background:#d9a45f}
/* recent activity */
.pp-recent{margin:calc(20 * var(--u)) calc(21 * var(--u)) 0 calc(22 * var(--u));border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
  padding:calc(18 * var(--u)) calc(33 * var(--u)) calc(30 * var(--u));min-height:calc(560 * var(--u));
  background:linear-gradient(rgba(232,210,176,.6),rgba(232,210,176,.6)),#dcc29d url('/assets/tex-parchment.jpg') center top/100% auto;box-shadow:0 calc(-4 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.45)}
.ppr-head{display:flex;align-items:center;justify-content:space-between;padding:0 calc(8 * var(--u)) calc(14 * var(--u))}
.ppr-title{font:700 calc(28 * var(--u))/1.1 var(--display);color:#1f150d}
.ppr-all{display:flex;align-items:center;gap:calc(6 * var(--u));font:400 calc(20 * var(--u))/1 var(--serif);color:#1f150d}
.ppr-all .mi{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.ppr-row{display:flex;align-items:center;gap:calc(26 * var(--u));width:100%;text-align:left;padding:calc(6 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)) calc(9 * var(--u));margin-bottom:calc(8 * var(--u));
  border-radius:calc(12 * var(--u));border:1px solid rgba(120,86,52,.22);background:rgba(250,238,216,.28)}
.ppr-img{flex:none;width:calc(171 * var(--u));height:calc(88 * var(--u));border-radius:calc(8 * var(--u));overflow:hidden;background:#3a2718;display:flex;align-items:center;justify-content:center}
.ppr-img img{width:100%;height:100%;object-fit:cover}
.ppr-img .init{font:700 calc(34 * var(--u)) var(--display);color:#e8d5b5}
.ppr-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(5 * var(--u))}
.ppr-name{font:700 calc(19.5 * var(--u))/1.15 var(--display);color:#1f150d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppr-town{font:400 calc(15.5 * var(--u))/1.2 var(--serif);color:#3a2a1c}
.ppr-meta{display:flex;align-items:center;gap:calc(12 * var(--u));margin-top:calc(4 * var(--u));font:400 calc(14.5 * var(--u))/1.2 var(--serif);color:#3a2a1c}
.mi.pp-compass-sm{--m:url('/assets/icons/pp-compass.png');width:calc(26 * var(--u));height:calc(26 * var(--u))}
.ppr-date{flex:none;font:400 calc(16 * var(--u))/1 var(--serif);color:#3a2a1c;margin-bottom:calc(8 * var(--u))}
.ppr-row .chev{width:calc(22 * var(--u));height:calc(22 * var(--u));color:#1f150d;flex:none}
.ppr-empty{font:400 calc(18 * var(--u))/1.5 var(--serif);color:#3a2a1c;padding:calc(10 * var(--u)) calc(8 * var(--u))}
@media (min-width:768px){ .pp-hero{padding-top:calc(92 * var(--u))} }
/* wide: two comp-scaled columns, each its own container: hero, ticket and
   recent activity left; the open book right */
@media (min-width:1000px){
  .pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto 1fr;column-gap:24px;padding:0 24px 0 0}
  .pp-col{display:block;container-type:inline-size;min-width:0}
  .pp-col.a{grid-column:1;grid-row:1}
  .pp-col.c{grid-column:1;grid-row:2}
  .pp-col.b{grid-column:2;grid-row:1/3;padding-top:28px}
  .pp-recent{border-radius:calc(20 * var(--u))}
}

/* ══ COLLECTION: built to Collection.png. --u is one comp pixel (851 = the
   page width), capped on wide screens so the grid gains columns instead of
   giant cards. Hero and shelf are sliced by tools/slice-collection.py. The
   add flow (guided camera, on-device cut-out, grounding shadows) is ported
   from Saucr: camera.js, cutout.js, ground.js. */
#v-bottles{background:linear-gradient(rgba(17,11,6,.84),rgba(17,11,6,.84)),#110b06 url('/assets/tex-oak.jpg') center top/100% auto}
.cl{position:relative;container-type:inline-size}
.cl > *{--u:calc(100cqw / 851);--x:max(0px, calc(var(--safe-t) + 4px - 96 * var(--u)))}
.cl-hero{position:relative;height:calc(440 * var(--u) + var(--x));padding:calc(93 * var(--u) + var(--x)) 0 0 calc(52 * var(--u));
  background:#1a110a url('/assets/collection/hero.jpg') center var(--x)/100% auto no-repeat}
.cl-title{font:700 calc(59 * var(--u))/1.1 var(--display);color:#f4ecdd;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.cl-eyebrow{margin-top:calc(24 * var(--u));font:500 calc(18.4 * var(--u))/1.6 var(--caps);letter-spacing:.236em;text-transform:uppercase;color:#efe5d3;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cl-rule{display:block;width:calc(50 * var(--u));height:max(1px,calc(2 * var(--u)));margin-top:calc(22 * var(--u));background:#efe5d3}
.cl-add{position:absolute;right:calc(35 * var(--u));top:calc(101 * var(--u) + var(--x));display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u));color:#f1e8d8;font:400 calc(18.5 * var(--u))/1 var(--serif);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.cl-orb{width:calc(96 * var(--u));height:calc(96 * var(--u));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fbf3e4;
  background:linear-gradient(180deg,#b27a45 0%,#9d6939 40%,#7d4f2b 70%,#62401f 100%);border:max(1px,calc(2 * var(--u))) solid #d9a466;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,170,.5),0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.6)}
.cl-orb .ico{width:calc(50 * var(--u));height:calc(50 * var(--u));stroke-width:1.6}
.cl-in .cl-tabs{position:relative;z-index:1;display:flex;height:calc(58 * var(--u));margin:calc(-74 * var(--u)) calc(25 * var(--u)) 0 calc(28 * var(--u));padding:calc(3 * var(--u));border-radius:calc(10 * var(--u));
  background:linear-gradient(rgba(232,214,182,.7),rgba(232,214,182,.7)),#e1cda9 url('/assets/tex-parchment.jpg') center/cover;box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.5)}
.cl-tabs button{flex:1;position:relative;border-radius:calc(8 * var(--u));font:400 calc(18 * var(--u))/1 var(--serif);color:#2b1d12}
.cl-tabs button + button::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(120,90,55,.45)}
.cl-tabs button.on{background:#1c2d1c;color:#efe5d3;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.cl-tabs button.on::before,.cl-tabs button.on + button::before{display:none}
.cl-find{display:flex;gap:calc(22 * var(--u));margin:calc(24 * var(--u)) calc(25 * var(--u)) 0 calc(28 * var(--u))}
.cl-search,.cl-sel{height:calc(58 * var(--u));border:max(1px,calc(1.5 * var(--u))) solid rgba(214,190,150,.5);border-radius:calc(10 * var(--u));background:rgba(22,14,8,.55);color:#efe5d3}
.cl-search{flex:0 0 calc(440 * var(--u));display:flex;align-items:center;gap:calc(14 * var(--u));padding:0 calc(18 * var(--u))}
.cl-search .ico{width:calc(28 * var(--u));height:calc(28 * var(--u));color:#efe5d3;flex:none}
.cl-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:#efe5d3;font:400 calc(18.7 * var(--u)) var(--serif);-webkit-appearance:none;appearance:none;padding:0}
.cl-search input::placeholder{color:rgba(239,229,211,.78)}
.cl-sel{flex:1;min-width:0;padding:0 calc(34 * var(--u)) 0 calc(20 * var(--u));font:400 calc(17 * var(--u)) var(--serif);-webkit-appearance:none;appearance:none;
  background:rgba(22,14,8,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23efe5d3' stroke-width='1.6'/%3E%3C/svg%3E") right calc(16 * var(--u)) center/calc(14 * var(--u)) auto no-repeat;text-overflow:ellipsis}
.cl-sel option{color:#1f150d}
.cl-bar{display:flex;align-items:center;margin:calc(26 * var(--u)) calc(25 * var(--u)) 0 calc(36 * var(--u));height:calc(44 * var(--u));color:#efe5d3}
.cl-count{flex:1;font:500 calc(18.4 * var(--u))/1 var(--caps);letter-spacing:.22em;text-transform:uppercase}
.cl-sort{position:relative;display:flex;align-items:center;gap:calc(6 * var(--u));margin-right:calc(40 * var(--u));font:400 calc(16.6 * var(--u))/1 var(--serif)}
.cl-sort select{background:none;border:0;color:#efe5d3;font:inherit;-webkit-appearance:none;appearance:none;padding:0;cursor:pointer}
.cl-sort select option{color:#1f150d}
.cl-sort .ico{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.cl-view{width:calc(46 * var(--u));height:calc(44 * var(--u));border-radius:calc(8 * var(--u));display:flex;align-items:center;justify-content:center;margin-left:calc(8 * var(--u))}
.cl-view svg{width:calc(20 * var(--u));height:calc(20 * var(--u));fill:#efe5d3}
.cl-view.on{background:rgba(255,245,225,.08)}
.cl-view.on svg{fill:#d9a45f}
/* the grid: 4 cards a row on shelves (a .cl-shelf after every row, see placeShelves) */
.cl-grid{display:grid;grid-template-columns:repeat(4, calc(183 * var(--u)));column-gap:calc(22 * var(--u));justify-content:center;margin-top:calc(22 * var(--u));padding:0 calc(26 * var(--u)) calc(30 * var(--u))}
.cl-shelf{grid-column:1/-1;height:calc(49 * var(--u));margin:calc(-6 * var(--u)) calc(-26 * var(--u)) 0;position:relative;z-index:0;
  background:url('/assets/collection/shelf.jpg') center top/100% 100%;box-shadow:0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.55)}
.bc{position:relative;z-index:1;height:calc(364 * var(--u));display:flex;flex-direction:column;align-items:center;padding:calc(10 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(6 * var(--u));cursor:pointer;
  background:linear-gradient(rgba(222,202,166,.55),rgba(222,202,166,.55)),#d8c29e url('/assets/tex-parchment.jpg') center/cover;
  box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.5),inset 0 0 calc(18 * var(--u)) rgba(120,80,40,.28);color:#1f150d;text-align:center}
.bc-shot{position:relative;flex:none;width:100%;height:calc(212 * var(--u));display:flex;align-items:flex-end;justify-content:center}
.bc-shot.photo img{width:100%;height:100%;object-fit:cover;border-radius:calc(4 * var(--u))}
.bc-ghost{height:88%;width:auto;fill:rgba(70,48,28,.16)}
.bc-ghost .lbl{fill:rgba(70,48,28,.12)}
.stand{position:relative;height:100%;display:inline-flex;align-items:flex-end;transform:translateY(var(--pad,0px))}
.stand img.cut{height:96%;width:auto;max-width:calc(160 * var(--u));object-fit:contain;position:relative;z-index:2;filter:contrast(1.04) saturate(1.04) drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.stand .ground{position:absolute;left:var(--bx,50%);bottom:calc(var(--pad,0px) - 2px);width:calc(var(--bw,60%) * .95);height:5px;transform:translateX(-50%);
  border-radius:50%;background:rgba(0,0,0,.7);filter:blur(3px);mix-blend-mode:multiply;z-index:1}
.stand .ground::after{content:"";position:absolute;left:50%;bottom:0;width:130%;height:14px;transform:translate(-50%,-30%);border-radius:50%;background:rgba(40,20,5,.2);filter:blur(10px)}
.stand .contact-occlusion{position:absolute;left:var(--bx,50%);bottom:calc(var(--pad,0px) - 1px);width:calc(var(--bw,60%) * .85);height:7px;transform:translateX(-50%);background:rgba(0,0,0,.75);border-radius:50%;filter:blur(3px);z-index:1}
.bc-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(4 * var(--u));min-height:0;width:100%}
.bc-name{font:700 calc(19 * var(--u))/1.15 var(--display);color:#1f150d}
.bc-expr,.bc-proof{font:400 calc(15 * var(--u))/1.3 var(--serif);color:#2b1d12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-pill{flex:none;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));width:calc(139 * var(--u));height:calc(32 * var(--u));border-radius:calc(16 * var(--u));font:400 calc(15.5 * var(--u))/1 var(--serif)}
.bc-pill.owned{background:#1f311f;color:#efe5d3}
.bc-pill.owned .ico{width:calc(17 * var(--u));height:calc(17 * var(--u));stroke-width:2.4}
.bc-pill.wish{border:max(1px,calc(1.5 * var(--u))) solid #2b1d12;color:#2b1d12}
.bc-pill .dot{width:calc(13 * var(--u));height:calc(13 * var(--u));border-radius:50%;border:max(1px,calc(1.8 * var(--u))) solid currentColor}
.bc-mark{position:absolute;z-index:3;top:calc(12 * var(--u));right:calc(12 * var(--u));width:calc(24 * var(--u));height:calc(30 * var(--u));display:flex;align-items:center;justify-content:center}
.bc-mark svg{width:calc(16 * var(--u));height:calc(24 * var(--u));fill:none;stroke:#5a4632;stroke-width:1.6}
.bc-mark.on svg{fill:#5a4632}
.bc-pick{position:absolute;z-index:3;top:0;right:0;width:calc(62 * var(--u));height:calc(89 * var(--u));border-radius:0 calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));background:#1e2f1d;color:#efe5d3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--u));font:500 calc(13.5 * var(--u))/1.15 var(--caps);letter-spacing:.06em;text-transform:uppercase}
.bc-pick .ico{width:calc(24 * var(--u));height:calc(24 * var(--u))}
/* list view */
.cl-list{margin:calc(22 * var(--u)) calc(25 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u));display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.bl-row{display:flex;align-items:center;gap:calc(20 * var(--u));padding:calc(10 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));border-radius:calc(10 * var(--u));cursor:pointer;
  background:linear-gradient(rgba(222,202,166,.55),rgba(222,202,166,.55)),#d8c29e url('/assets/tex-parchment.jpg') center/cover;box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.45)}
.bl-row .bc-shot{width:calc(84 * var(--u));height:calc(120 * var(--u))}
.bl-row .stand img.cut{max-width:calc(80 * var(--u))}
.bl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(4 * var(--u));text-align:left}
.bl-mid .bc-name{font-size:calc(24 * var(--u))}
.bl-mid .bc-expr{font-size:calc(18 * var(--u))}
.bl-mid .dim{opacity:.75}
.bl-row .bc-pill{width:auto;padding:0 calc(16 * var(--u));height:calc(38 * var(--u));font-size:calc(17 * var(--u))}
.bl-row .chev{width:calc(22 * var(--u));height:calc(22 * var(--u));color:#1f150d}
.cl-empty{margin:calc(40 * var(--u)) calc(40 * var(--u));text-align:center;color:#efe5d3;font:italic 400 calc(22 * var(--u))/1.5 var(--serif)}
@media (min-width:768px){
  .cl > *{--u:min(calc(100cqw / 851), .62px)}
  .cl-hero{height:calc(440 * var(--u) + 60px);padding-top:calc(93 * var(--u) + 40px);padding-left:48px;background-size:cover;background-position:center 30%}
  .cl-add{right:48px;top:calc(101 * var(--u) + 40px)}
  .cl-in .cl-tabs{margin-left:48px;margin-right:48px;max-width:720px}
  .cl-find{margin-left:48px;margin-right:48px}
  .cl-sel{flex:0 0 220px}
  .cl-bar{margin-left:52px;margin-right:48px}
  .cl-grid{grid-template-columns:repeat(auto-fill, calc(183 * var(--u)));justify-content:start;padding:0 48px 40px}
  .cl-shelf{margin-left:-48px;margin-right:-100vw}   /* run to the right edge past unfilled columns; .view clips x */
  .cl-list{margin-left:48px;margin-right:48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
}
/* add / edit bottle */
.be-stage{--u:1.25px;display:flex;flex-direction:column;align-items:center;padding:4px 20px 0}
.be-stage .bc.big{width:calc(183 * var(--u));height:calc(250 * var(--u));cursor:default}
.be-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.be-actions .btn{padding:0 18px;height:44px;display:inline-flex;align-items:center;gap:8px}
.be-tip{margin:10px 0 0;font:italic 400 13px/1.45 var(--serif);color:var(--ink-2);text-align:center;max-width:340px}
.frow.check{display:flex;align-items:center;gap:10px;align-self:end;padding-bottom:10px;font:500 14px/1.3 var(--serif);color:var(--ink)}
.frow.check input{width:22px;height:22px;accent-color:#1f311f;flex:none}
.frow.check em{font-size:12px;color:var(--ink-2)}
/* guided camera (from Saucr) */
.cam-root{position:fixed;inset:0;z-index:90;background:#000;display:flex;flex-direction:column}
.cam-root video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-overlay{position:absolute;inset:0;pointer-events:none}
.cam-guide{position:absolute;inset:0;width:100%;height:100%}
.cam-tip{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 12px);text-align:center;font:600 12px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:#efe5d3;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cam-level{position:absolute;left:50%;bottom:calc(var(--safe-b) + 128px);width:110px;height:8px;margin-left:-55px;border-radius:4px;background:rgba(239,229,211,.22);border:1px solid rgba(239,229,211,.35)}
.cam-level i{position:absolute;left:50%;top:-4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#c78a48;transition:transform .08s linear,background .15s}
.cam-level.ok i{background:#6f9a64}
.cam-bar{position:absolute;left:0;right:0;bottom:0;padding:18px 24px calc(var(--safe-b) + 22px);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7))}
.cam-cancel,.cam-lib{background:none;border:0;color:#efe5d3;font:500 15px var(--serif);padding:10px;cursor:pointer}
.cam-shutter{width:74px;height:74px;border-radius:50%;background:#efe5d3;border:5px solid rgba(239,229,211,.35);background-clip:padding-box;cursor:pointer}
.cam-shutter:active{transform:scale(.94)}

/* Notice for an old home-screen install (see app.php): it cannot be fixed
   from the page, only by re-adding the icon, so say exactly how. */
.reinstall{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,6,3,.55);padding:0 12px 12px}
.reinstall .card{width:100%;max-width:420px;border-radius:18px;padding:22px 20px 18px;color:#1f150d;
  background:linear-gradient(rgba(236,218,190,.82),rgba(236,218,190,.82)),#e6cfab url('/assets/tex-parchment.jpg') center/cover;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.reinstall h3{font:700 22px/1.15 var(--display);margin:0 0 8px}
.reinstall p{font:400 14.5px/1.5 var(--serif);margin:0 0 12px;color:#2b1d12}
.reinstall ol{margin:0 0 16px;padding-left:22px;font:500 15px/1.55 var(--serif)}
.reinstall ol svg{width:17px;height:17px;vertical-align:-3px;fill:none;stroke:#1f150d;stroke-width:1.8}
.reinstall .btn{width:100%}
/* In an installed web app iOS paints the dark strip above (see .view): fade
   the parchment screens into it so there is no hard edge. Background layers
   stay put while the view scrolls. Nothing moves. */
html.standalone:not(.old-install) .view{background-image:linear-gradient(180deg,rgba(22,17,10,.62),rgba(22,17,10,.18) 14px,rgba(22,17,10,0) 34px),url('/assets/paper-page.jpg');
  background-size:100% 34px,100% 100%;background-repeat:no-repeat;background-position:center top}