@font-face{font-family:"Cormorant";font-weight:700;font-display:swap;src:url("../fonts/cormorant-700.woff2") format("woff2")}
@font-face{font-family:"Great Vibes";font-weight:400;font-display:swap;src:url("../fonts/greatvibes-400.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url("../fonts/jost-400.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url("../fonts/jost-500.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:600;font-display:swap;src:url("../fonts/jost-600.woff2") format("woff2")}

/* ================= Pase · brand tokens ================= */
:root{
  --bg:#EDE3DB;          /* page */
  --card:#FFFFFF;        /* pass + light cards */
  --wine:#5A1022;        /* pass header, primary */
  --wine-2:#7A1A31;
  --berry:#8E2338;       /* accents */
  --night:#2A0E16;       /* book card */
  --gold:#E6C58A;
  --gold-deep:#B8924A;
  --ink:#2A0E16;
  --muted:#6F5F58;
  --line:#E6D6CA;
  --stroke:#5A1022;      /* dark wine outline that lifts buttons off the cream */
  --stroke-w:1.5px;
  --serif:"Cormorant", Georgia, "Times New Roman", serif;
  --script:"Great Vibes", "Snell Roundhand", cursive;
  --sans:"Jost", -apple-system, "Segoe UI", Helvetica, sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
/* App shell: the page itself never scrolls, so iPhone Safari keeps its toolbar still
   and the bottom bar stays locked in place. Content scrolls inside .scroller. */
body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;
  font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--berry);outline-offset:3px}
[hidden]{display:none!important}

.page{max-width:460px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:16px;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(122px + env(safe-area-inset-bottom))}

/* Top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.eyebrow-top{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lang{height:44px;padding:4px;border-radius:999px;border:var(--stroke-w) solid var(--stroke);background:#FFFFFF;display:flex;gap:2px;
  box-shadow:0 6px 14px -10px rgba(74,20,32,.55)}
.lang button{height:34px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--wine);font-size:13px;letter-spacing:.1em}
.lang button[aria-pressed="true"]{font-weight:600}

/* The pass */
.pass{position:relative;border-radius:24px;background:var(--card);overflow:hidden;border:var(--stroke-w) solid var(--stroke);
  box-shadow:0 22px 44px -24px rgba(74,20,32,.6), 0 2px 6px -2px rgba(74,20,32,.15)}
.pass-head{height:60px;background:linear-gradient(180deg,#651328,var(--wine));padding:0 20px;display:flex;align-items:center;justify-content:space-between;color:#F6E7D2}
.brand{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.3em}
.brand img{height:36px;width:auto;display:block}
.pass-badge{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(230,197,138,.45);border-radius:999px;padding:6px 12px}
.pass-id{padding:20px 18px 20px 20px;display:flex;gap:14px;align-items:flex-end}
.pass-photo{width:114px;height:144px;flex-shrink:0;border-radius:16px;object-fit:cover;object-position:50% 14%;
  box-shadow:0 10px 22px -12px rgba(74,20,32,.55)}
.pass-who{display:flex;flex-direction:column;gap:8px;padding-bottom:4px;min-width:0}
.name{margin:0;font-family:var(--script);font-weight:400;font-size:clamp(46px,13.5vw,54px);line-height:.92;color:var(--ink);
  letter-spacing:0;padding-top:4px}
.roles{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:center;column-gap:5px;row-gap:2px;
  font-size:clamp(12px,3.35vw,13.5px);font-weight:500;letter-spacing:0;color:var(--berry)}
.roles span{white-space:nowrap}
.roles .grp{display:inline-flex;align-items:center;gap:5px}
.roles .sep{color:var(--gold-deep);font-weight:400}

.perf{position:relative;height:0;margin:0 20px;border-top:2px dashed var(--line)}
.perf::before,.perf::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--bg)}
.perf::before{left:-32px}.perf::after{right:-32px}

.pass-foot{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.btn-save{height:54px;border:var(--stroke-w) solid #3B0C18;border-radius:14px;color:#FBF4EE;display:flex;align-items:center;justify-content:center;gap:9px;font-size:16px;font-weight:600}
.btn-save svg{width:20px;height:20px;flex-shrink:0}
.btn-share{height:50px;border:var(--stroke-w) solid var(--stroke);border-radius:14px;background:#FFFFFF;color:var(--wine);display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;
  box-shadow:0 6px 14px -10px rgba(74,20,32,.5)}
.btn-share svg{width:20px;height:20px}

/* Pinned quick-contact bar */
.dockbar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(237,227,219,0) 0%, rgba(237,227,219,.92) 28%, #EDE3DB 100%)}
.tiles{width:100%;max-width:424px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
/* Wine-to-white vertical gradient: cream icon sits on the wine, wine label on the white */
.tile{height:72px;border:var(--stroke-w) solid var(--stroke);border-radius:18px;
  background:linear-gradient(180deg, #5A1022 0%, #5A1022 18%, #8E3A4E 46%, #E9D2D6 70%, #FFFFFF 86%);
  color:var(--wine);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;
  box-shadow:0 10px 22px -14px rgba(74,20,32,.65), 0 2px 0 rgba(90,16,34,.9)}
.tile svg{width:22px;height:22px;color:#FBF4EE;margin-top:-4px}
.tile span{color:var(--wine);position:relative;top:3px}

/* Book */
.book{border-radius:22px;background:var(--night);border:var(--stroke-w) solid #1A070D;padding:18px;display:flex;align-items:center;gap:16px;color:#F6E7D2}
.book img{width:92px;height:122px;flex-shrink:0;object-fit:cover;border-radius:3px 8px 8px 3px;box-shadow:0 14px 26px -10px rgba(0,0,0,.7)}
.book-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.book-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.book-title{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.1;color:#FBF1E4}
.pill{align-self:flex-start;margin-top:4px;height:40px;padding:0 14px 0 18px;border-radius:999px;background:var(--gold);color:var(--night);border:var(--stroke-w) solid #F3DDB0;box-shadow:0 6px 16px -8px rgba(230,197,138,.55);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.pill-arrow svg{width:16px;height:16px}

/* Links */
.links{border-radius:22px;background:var(--card);border:var(--stroke-w) solid var(--stroke);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 10px 22px -16px rgba(74,20,32,.55)}
.row{min-height:66px;padding:10px 16px;display:flex;align-items:center;gap:14px}
.row + .row{border-top:1px solid #EBDDD2}
.badge{width:40px;height:40px;border-radius:12px;background:#F4E6DD;color:var(--berry);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.badge svg{width:21px;height:21px}
.row-text{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.row-text strong{font-size:15px;font-weight:500}
.row small{font-size:13px;color:#8A7A74}
.arrow{color:var(--gold-deep)}.arrow svg{width:17px;height:17px}
.foot{margin-top:6px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9A8A84}

/* Sheets */
.modal{position:fixed;inset:0;z-index:40;background:rgba(42,14,22,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal.show{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:480px;background:#F6EFE8;border-radius:24px 24px 0 0;padding:24px 22px calc(22px + env(safe-area-inset-bottom))}
.sheet h2{margin:0 0 16px;font-family:var(--serif);font-size:28px;color:var(--wine);text-align:center}
.sheet input{width:100%;height:48px;border-radius:12px;border:1px solid #D9BFB0;background:#FFFFFF;padding:0 14px;font:inherit;font-size:14px;color:var(--ink)}
.sheet-grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sheet-grid a,.sheet-grid button{min-height:70px;border-radius:14px;border:var(--stroke-w) solid var(--stroke);background:#FFFFFF;color:var(--wine);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px}
.sheet-grid svg{width:22px;height:22px}
.sheet-grid .ok{color:#2F6B45}
.sheet-close{margin-top:16px;width:100%;height:50px;border:var(--stroke-w) solid #3B0C18;border-radius:14px;color:#FBF4EE;font-weight:600}
.qrbox{width:min(290px,76vw);aspect-ratio:1;margin:0 auto;background:#FFFFFF;border-radius:20px;padding:14px;
  border:var(--stroke-w) solid var(--stroke);box-shadow:0 14px 30px -18px rgba(74,20,32,.6)}
.qr-hint{margin:10px 0 16px;text-align:center;font-size:13px;color:var(--muted)}
.btn-more{margin-top:12px;width:100%;height:48px;border:var(--stroke-w) solid var(--stroke);border-radius:14px;background:#FFFFFF;color:var(--wine);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600}
.btn-more svg{width:19px;height:19px}
.qrbox svg{width:100%;height:100%}

.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%,-12px);z-index:60;
  background:var(--ink);color:#FBF4EE;padding:12px 18px;border-radius:999px;font-size:14px;display:flex;align-items:center;gap:8px;
  opacity:0;pointer-events:none;max-width:calc(100vw - 40px);width:max-content;white-space:nowrap;
  box-shadow:0 14px 30px -12px rgba(42,14,22,.6);border:1px solid rgba(233,207,149,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:#E9CF95}