/* ChessIt website: shared styles for all pages */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bricolage-500.woff) format('woff')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-700.woff) format('woff')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-800.woff) format('woff')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-400.woff) format('woff')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/figtree-500.woff) format('woff')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-600.woff) format('woff')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/figtree-700.woff) format('woff')}

:root{
  --paper:#FBFAF7; --stone:#EFEBE4; --ink:#1E2420; --ink2:#56605A; --line:#DDD7CC;
  --felt:#2E6A4E; --felt-ink:#FFFFFF; --felt-soft:#E2EEE6; --rosewood:#8E3D2F; --boxwood:#E3C78F;
  --card:#FFFFFF; --hero-ink:#FFFFFF;
  --f-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1120px; --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121614; --stone:#181E1A; --ink:#ECEFEA; --ink2:#A7B1AA; --line:#2B332E;
  --felt:#5DAE88; --felt-ink:#0F1A14; --felt-soft:#1D2D24; --rosewood:#D98473; --boxwood:#C9AE78;
  --card:#1B221E; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#121614; --stone:#181E1A; --ink:#ECEFEA; --ink2:#A7B1AA; --line:#2B332E;
  --felt:#5DAE88; --felt-ink:#0F1A14; --felt-soft:#1D2D24; --rosewood:#D98473; --boxwood:#C9AE78;
  --card:#1B221E; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-0.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--boxwood);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--felt)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:var(--f-body);transition:transform .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--felt);color:var(--felt-ink)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line)}

.skip{position:absolute;left:-9999px;top:12px;z-index:20;background:#fff;color:#1E2420;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{left:16px}
/* ---------- Header ---------- */
header.top{position:absolute;inset:0 0 auto;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;color:#fff}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:22px;text-decoration:none;color:#fff}
.logo svg{width:30px;height:30px}
.nav-links{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.nav-links a{text-decoration:none;opacity:.92}
.nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.lang{display:flex;gap:2px;background:rgba(0,0,0,.25);border-radius:999px;padding:3px}
.lang button{border:0;background:transparent;color:#fff;font:600 13px var(--f-body);padding:6px 10px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:#fff;color:#1E2420}
@media (max-width:820px){.nav-links .hide-m{display:none}}

header.top.stuck{position:fixed;background:color-mix(in srgb, var(--paper) 90%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);animation:slideDown .3s ease both}
header.top.stuck .nav{color:var(--ink);padding-block:10px}
header.top.stuck .logo{color:var(--ink);font-size:20px}
header.top.stuck .lang{background:var(--stone)}
header.top.stuck .lang button{color:var(--ink)}
header.top.stuck .lang button[aria-pressed="true"]{background:var(--felt);color:var(--felt-ink)}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){header.top.stuck{animation:none}}
section{scroll-margin-top:64px}
.nav-links a[aria-current="true"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--felt)}
.reveal-on .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal-on .rv.in{opacity:1;transform:none}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(780px, 92svh);display:flex;align-items:flex-end;overflow:hidden;color:var(--hero-ink);background:#5b4631}
.hero video,.hero canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero video{opacity:0;transition:opacity 1.2s ease}
.hero video.ready{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,10,.45) 0%,rgba(18,14,10,0) 26%,rgba(18,14,10,.08) 52%,rgba(18,14,10,.72) 100%);pointer-events:none}
.hero-inner{position:relative;z-index:2;padding-block:140px 64px;width:100%}
.hero h1{font-size:clamp(42px,7.4vw,100px);font-weight:800;max-width:11ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 em{font-style:normal;color:var(--boxwood)}
.hero .lead{margin-top:20px;font-size:clamp(18px,2.2vw,22px);max-width:34ch;opacity:.95}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .note{margin-top:16px;font-size:14px;opacity:.85}
@media (max-width:699px){.hero-inner{padding-top:calc(96px + 58vw)}}
.hero .toggle-motion{position:absolute;right:max(16px, env(safe-area-inset-right,0px));bottom:20px;z-index:3;font:600 12px var(--f-body);color:#fff;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 12px;cursor:pointer}

.hero .pos-cap{position:absolute;right:max(16px, env(safe-area-inset-right,0px));bottom:58px;z-index:3;margin:0;font-size:12px;line-height:1.4;color:rgba(255,255,255,.88);max-width:30ch;text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.45)}
@media (max-width:700px){.hero .pos-cap{display:none}}
@media (min-width:701px){.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(24,16,9,.55) 0%,rgba(24,16,9,.28) 38%,rgba(24,16,9,0) 58%)}}

/* ---------- Sections ---------- */
section{padding-block:96px}
.sec-head{display:grid;gap:14px;max-width:680px;margin-bottom:44px}
.sec-head h2{font-size:clamp(32px,4.6vw,52px);font-weight:700}
.sec-head p{color:var(--ink2);font-size:18px;max-width:58ch}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:12px;align-content:start}
.step .n{font-family:var(--f-display);font-weight:800;font-size:44px;color:var(--felt);line-height:1}
.step h3{font-size:22px;font-weight:700}
.step p{color:var(--ink2)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

.band{background:var(--stone)}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
.feat{display:grid;gap:8px;align-content:start}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--felt-soft);color:var(--felt);display:grid;place-items:center}
.feat .ic svg{width:24px;height:24px}
.feat h3{font-size:19px;font-weight:700;margin-top:6px}
.feat p{color:var(--ink2);font-size:16px}
@media (max-width:900px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.features{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.checks li svg{width:22px;height:22px;color:var(--felt);margin-top:3px}
.checks b{display:block}
.checks span{color:var(--ink2);font-size:16px}

.standings{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(30,36,32,.35)}
.standings .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.standings .bar b{font-family:var(--f-display);font-size:18px}
.pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--felt-soft);color:var(--felt);display:inline-flex;align-items:center;gap:6px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--felt);display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
th,td{padding:11px 9px;text-align:left;white-space:nowrap}
@media (min-width:821px){td:nth-child(2){white-space:normal;min-width:9ch}}
th:first-child,td:first-child{padding-left:18px}th:last-child,td:last-child{padding-right:18px}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:600}
tbody tr{border-top:1px solid var(--line)}
td.r,th.r{text-align:right}
.res{display:inline-flex;gap:4px}
.res span{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700}
.w{background:var(--felt-soft);color:var(--felt)}
.d{background:var(--stone);color:var(--ink2)}
.l{background:transparent;color:var(--rosewood);border:1px solid var(--line)}
.standings .foot{padding:12px 20px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line)}

.org-stack{display:grid;gap:18px}
.pairings{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pairings .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pairings .bar b{font-family:var(--f-display);font-size:17px}
.pr-meta{font-size:12px;color:var(--ink2);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pairings ul{list-style:none;margin:0;padding:0}
.pairings li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);font-size:15px}
.pairings li:first-child{border-top:0}
.pairings .bd{font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.pairings .pp i{font-style:normal;color:var(--ink2);padding:0 4px}
@media (max-width:520px){.pairings li{grid-template-columns:24px minmax(0,1fr);row-gap:6px}.pairings li .st{grid-column:2;justify-self:start}}
.st{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.st.ok{background:var(--felt-soft);color:var(--felt)}
.st.wait{background:var(--stone);color:var(--ink2)}
.st.check{background:color-mix(in srgb, var(--rosewood) 14%, transparent);color:var(--rosewood)}

.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.trust div{border-top:2px solid var(--felt);padding-top:16px;display:grid;gap:6px;align-content:start}
.trust b{font-family:var(--f-display);font-size:19px}
.trust span{color:var(--ink2);font-size:15px}
@media (max-width:900px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.trust{grid-template-columns:1fr}}

.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.city{padding:10px 16px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center;background:var(--card)}
.city.now{background:var(--felt);color:var(--felt-ink);border-color:var(--felt)}
.city small{font-weight:500;opacity:.8}

.citymap{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;background-image:radial-gradient(var(--line) 1px, transparent 1px);background-size:18px 18px}
.citymap svg{width:100%;height:auto;display:block;overflow:visible}
.citymap .links line{stroke:var(--felt);stroke-width:1.4;stroke-dasharray:4 5;opacity:.55}
.citymap .dot{fill:var(--card);stroke:var(--ink2);stroke-width:1.6}
.citymap .bern{fill:var(--felt)}
.citymap .ring{fill:var(--felt);opacity:.18;transform-box:fill-box;transform-origin:center;animation:ring 2.6s ease-out infinite}
.citymap .lbl{font:600 13px var(--f-body);fill:var(--ink2)}
.citymap .lbl.b{font-size:15px;fill:var(--ink)}
@keyframes ring{0%{transform:scale(.6);opacity:.35}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.citymap .ring{animation:none}}

.faq{display:grid;gap:10px;max-width:820px}
@media (min-width:960px){.faq-grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.5fr);gap:64px;align-items:start}.faq-grid .sec-head{margin-bottom:0;position:sticky;top:32px}}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 20px}
summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-display);font-size:22px;line-height:1;color:var(--felt)}
details[open] summary::after{content:"–"}
details p{color:var(--ink2);padding-bottom:18px;max-width:65ch}
details[open] p{animation:faqIn .35s ease both}
details[open]{border-color:color-mix(in srgb, var(--felt) 45%, var(--line))}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){details[open] p{animation:none}}

.cta-final{background:var(--felt);color:var(--felt-ink);border-radius:24px;padding:56px clamp(24px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center}
.cta-final h2{font-size:clamp(30px,4vw,46px)}
.cta-final p{opacity:.9;margin-top:12px}
.mailbox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:rgba(255,255,255,.14);border-radius:14px;padding:10px 10px 10px 18px}
.mailbox code{font:600 18px var(--f-body);user-select:all;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mailbox button{border:0;border-radius:10px;padding:10px 14px;font:600 14px var(--f-body);cursor:pointer;background:var(--paper);color:var(--ink)}
@media (max-width:820px){.cta-final{grid-template-columns:1fr}}

footer{padding-block:48px 56px;color:var(--ink2);font-size:14px;border-top:1px solid var(--line);margin-top:96px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:28px}
.foot-grid b{color:var(--ink);display:block;margin-bottom:8px}
.foot-grid a{display:block;text-decoration:none;padding:3px 0}
.foot-grid a:hover{text-decoration:underline}
.foot-grid .soon{display:block;padding:3px 0}
.foot-grid .soon small{opacity:.7}
@media (max-width:700px){section{padding-block:64px}.sec-head{margin-bottom:32px}footer{margin-top:64px}}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pill i{animation:none}.btn{transition:none}}

/* ======================================================================
   Tabs (Spieler · Klubs · Cafés & Lokale), shared by every page
   ====================================================================== */
.nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 20px}
.tabs{display:flex;justify-content:center;gap:4px;justify-self:center;background:rgba(0,0,0,.24);border-radius:999px;padding:4px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;text-decoration:none;color:#fff;font-weight:600;font-size:15px;white-space:nowrap;transition:background .2s ease,color .2s ease}
.tabs a:hover{background:rgba(255,255,255,.14)}
.tabs a[aria-current="page"]{background:#fff;color:#1E2420}
.tabs a svg{width:16px;height:16px;flex:none}
header.top.stuck .tabs{background:var(--stone);backdrop-filter:none}
header.top.stuck .tabs a{color:var(--ink)}
header.top.stuck .tabs a:hover{background:color-mix(in srgb,var(--felt) 12%,transparent)}
header.top.stuck .tabs a[aria-current="page"]{background:var(--felt);color:var(--felt-ink)}
@media (max-width:860px){
  .nav{grid-template-columns:auto auto;justify-content:space-between;gap:12px}
  .tabs{grid-column:1 / -1;grid-row:2;justify-self:stretch;justify-content:space-between}
  .tabs a{flex:1 1 0;justify-content:center;padding:8px 6px;font-size:14px;min-width:0}
  .tabs a svg{display:none}
  .hero-inner{padding-top:180px}
}
@media (max-width:699px){ .hero.home .hero-inner{padding-top:calc(150px + 58vw)} }
@media (max-width:360px){ .tabs a{font-size:13px;padding:8px 4px} }

/* ======================================================================
   Sub-page heroes (Klubs, Cafés)
   ====================================================================== */
.hero.sub{min-height:min(720px,92svh);align-items:center}
.hero.sub .hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:150px 80px}
.hero.sub h1{font-size:clamp(40px,6vw,76px);max-width:13ch}
.hero.sub .eyebrow{color:var(--boxwood)}
.hero-art{position:relative}
.hero-art svg{display:block;width:100%;height:auto}
@media (max-width:900px){.hero.sub .hero-inner{grid-template-columns:1fr;gap:32px;padding-block:170px 64px}.hero-art{max-width:460px}}
.hero.clubs{background:#1F4A36}
.hero.clubs::after{background:radial-gradient(120% 90% at 85% 10%,rgba(227,199,143,.18),transparent 55%),linear-gradient(180deg,rgba(10,20,14,.35),rgba(10,20,14,0) 30%)}
.hero.clubs .board-bg{position:absolute;inset:0;opacity:.09;background-image:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0);background-size:88px 88px;-webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 80%);mask-image:linear-gradient(110deg,transparent 30%,#000 80%)}
.hero.cafe{background:#3A2418}
.hero.cafe::after{background:radial-gradient(90% 80% at 80% 20%,rgba(255,206,140,.30),transparent 60%),linear-gradient(180deg,rgba(20,10,5,.35),rgba(20,10,5,0) 30%,rgba(20,10,5,.3))}
.hero.sub::before{display:none}

/* ======================================================================
   Home: "Für wen" cards
   ====================================================================== */
.aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:820px){.aud{grid-template-columns:1fr}}
.aud a{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:22px;overflow:hidden;text-decoration:none;border:1px solid var(--line);background:var(--card);transition:transform .25s ease,box-shadow .25s ease}
.aud a:hover{transform:translateY(-3px);box-shadow:0 30px 60px -34px rgba(30,36,32,.45)}
.aud .pic{height:210px;position:relative;overflow:hidden}
.aud .pic svg{position:absolute;inset:0;width:100%;height:100%}
.aud .pic.clubs{background:#1F4A36}
.aud .pic.cafe{background:#5A3A26}
.aud .txt{padding:26px 28px 28px;display:grid;gap:10px;align-content:start}
.aud .txt h3{font-size:28px;font-weight:700}
.aud .txt p{color:var(--ink2)}
.aud .go{margin-top:6px;font-weight:700;color:var(--felt);display:inline-flex;align-items:center;gap:8px}
.aud .go::after{content:"→";transition:transform .2s ease}
.aud a:hover .go::after{transform:translateX(4px)}

/* ======================================================================
   Timeline (a tournament day / how an evening runs)
   ====================================================================== */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.timeline{grid-template-columns:1fr}}
.timeline li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start;position:relative}
.timeline .when{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--felt);display:flex;align-items:center;gap:10px}
.timeline .when b{font-family:var(--f-display);font-size:15px;letter-spacing:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--felt);color:var(--felt-ink)}
.timeline h3{font-size:20px;font-weight:700}
.timeline p{color:var(--ink2);font-size:16px}

/* ======================================================================
   Chips, kit cards, showcase (Cafés page)
   ====================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:15px}
.chip i{font-style:normal;color:var(--felt);margin-right:6px;font-family:var(--f-display)}

.kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1000px){.kit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kit{grid-template-columns:1fr}}
.kit > div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:10px;align-content:start;position:relative;overflow:hidden}
.kit .big{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--felt-soft);color:var(--felt)}
.kit .big svg{width:30px;height:30px}
.kit h3{font-size:20px;font-weight:700;margin-top:4px}
.kit p{color:var(--ink2);font-size:16px}
.kit .tag{position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rosewood);background:color-mix(in srgb,var(--rosewood) 12%,transparent);padding:4px 9px;border-radius:999px}

.showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:960px){.showcase{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.showcase{grid-template-columns:1fr}}
.show{display:grid;gap:14px}
.show figcaption{display:grid;gap:4px}
.show figcaption b{font-family:var(--f-display);font-size:19px}
.show figcaption span{color:var(--ink2);font-size:15px}
figure{margin:0}

/* the window poster */
.poster{aspect-ratio:1/1.414;border-radius:6px;background:#1F4A36;color:#F6EEDC;padding:9% 9% 8%;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden;box-shadow:0 30px 50px -28px rgba(30,20,10,.6),0 0 0 1px rgba(0,0,0,.06);transform:rotate(-1.4deg)}
.poster::before{content:"";position:absolute;inset:0;opacity:.10;background-image:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0);background-size:22% 15.6%;-webkit-mask-image:linear-gradient(170deg,#000,transparent 55%);mask-image:linear-gradient(170deg,#000,transparent 55%)}
.poster .p-top{position:relative;display:flex;justify-content:space-between;align-items:center;font:700 clamp(10px,1.1vw,13px) var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#E3C78F}
.poster .p-mid{position:relative;align-self:center;display:grid;gap:6%}
.poster .p-knight{width:38%;color:#E3C78F}
.poster h4{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:.95;letter-spacing:-.02em}
.poster .p-when{font-family:var(--f-display);font-weight:700;font-size:clamp(15px,1.6vw,20px);color:#E3C78F}
.poster .p-bot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:clamp(10px,1vw,12.5px);line-height:1.4;opacity:.92}
.poster .p-qr{width:24%;aspect-ratio:1;background:#F6EEDC;border-radius:4px;padding:4%;flex:none}
.poster .p-qr svg{width:100%;height:100%;display:block}

/* the in-app event card */
.phone{border-radius:34px;background:#14110E;padding:10px;box-shadow:0 30px 50px -28px rgba(30,20,10,.55);max-width:300px;justify-self:center;width:100%}
.phone .scr{border-radius:26px;background:#FBFAF7;color:#1E2420;padding:16px 14px 18px;display:grid;gap:12px;font-size:14px;line-height:1.45}
.phone .notch{width:34%;height:6px;border-radius:9px;background:#E5E0D6;justify-self:center}
.phone .ttl{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.phone .ev{border-radius:16px;border:1px solid #DDD7CC;background:#fff;overflow:hidden}
.phone .ev .band2{height:64px;background:linear-gradient(135deg,#2E6A4E,#1F4A36);position:relative}
.phone .ev .band2::after{content:"♞";position:absolute;right:14px;bottom:2px;font-size:44px;color:rgba(227,199,143,.9);line-height:1}
.phone .ev .body{padding:12px 14px;display:grid;gap:4px}
.phone .ev b{font-family:var(--f-display);font-size:17px}
.phone .ev small{color:#56605A;font-size:13px}
.phone .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.phone .row span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:#E2EEE6;color:#2E6A4E}
.phone .btn2{margin-top:10px;background:#2E6A4E;color:#fff;border-radius:999px;text-align:center;padding:9px;font-weight:700;font-size:14px}
.phone .ev2{display:flex;gap:10px;align-items:center;border-radius:14px;border:1px solid #DDD7CC;background:#fff;padding:10px 12px}
.phone .ev2 i{font-style:normal;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#EFEBE4;font-family:var(--f-display);font-weight:800;font-size:12px;line-height:1.05;text-align:center}
.phone .ev2 small{display:block;color:#56605A;font-size:12px}

/* the map */
.minimap{border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1.08;position:relative;background:#E9E4D8}
.minimap svg{position:absolute;inset:0;width:100%;height:100%}
.minimap .pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);display:grid;justify-items:center;gap:6px}
.minimap .pin .card{background:#fff;color:#1E2420;border-radius:14px;padding:10px 12px;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);display:grid;gap:2px;min-width:170px;font-size:13px}
.minimap .pin .card b{font-family:var(--f-display);font-size:16px}
.minimap .pin .card small{color:#56605A}
.minimap .pin .dot{width:40px;height:40px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:#8E3D2F;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(142,61,47,.18)}
.minimap .pin .dot span{transform:rotate(45deg);color:#fff;font-size:20px;line-height:1}
.minimap .you{position:absolute;width:16px;height:16px;border-radius:50%;background:#2E6A4E;box-shadow:0 0 0 5px rgba(46,106,78,.25)}

/* formats */
.formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.formats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.formats{grid-template-columns:1fr}}
.formats > div{border-radius:18px;padding:22px;display:grid;gap:8px;align-content:start;color:#fff;min-height:190px;position:relative;overflow:hidden}
.formats > div::after{content:attr(data-p);position:absolute;right:10px;bottom:-14px;font-size:96px;line-height:1;opacity:.16}
.formats h3{font-size:21px;font-weight:700}
.formats p{opacity:.9;font-size:15.5px}
.formats .when2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.f-a{background:#2E6A4E}.f-b{background:#8E3D2F}.f-c{background:#6B4A2C}.f-d{background:#3D5566}

/* benefits */
.bene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
@media (max-width:700px){.bene{grid-template-columns:1fr}}
.bene > div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.bene .ic{width:44px;height:44px;border-radius:12px;background:var(--felt-soft);color:var(--felt);display:grid;place-items:center}
.bene .ic svg{width:22px;height:22px}
.bene b{display:block;font-size:18px}
.bene span{color:var(--ink2);font-size:16px}

.note-box{border-left:3px solid var(--boxwood);padding:4px 0 4px 16px;color:var(--ink2);font-size:15px;max-width:70ch;margin-top:26px}
.cta-final .btn-light{background:var(--paper);color:var(--ink)}
.cta-final .ctas2{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.foot-grid{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.timeline.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.timeline.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.timeline.four{grid-template-columns:1fr}}
.kit.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.kit.three{grid-template-columns:1fr}}
.cafe-scene text{font-family:var(--f-display)}