/* ==========================================================================
   27 CLUB COFFEE - Public Menu

   One page, three looks. <html data-theme="cle|mia|nyc"> picks the look and
   every colour, typeface and shape below reads from the variables that theme
   sets. The three looks are taken from the printed menus of each location:

     cle  Cleveland TV boards   pink / black / green / cream panels,
                                heavy grotesk headings, monospace descriptions
     mia  Miami menu            light grey paper, black only, Times-style serif
                                headings, monospace items, hairline rules
     nyc  Brooklyn menu         textured off-white paper, condensed caps with
                                wide tracking, the Liberty-crown skull

   Layout is mobile first and widens to a tablet grid and a desktop grid.
   ========================================================================== */

:root{
  /* shared */
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.8,.3,1);
  --max:1180px;        /* desktop column */
  --gutter:16px;

  /* theme slots - overridden per [data-theme] */
  --bg:#F7F1EC;
  --bg-img:none;
  --fg:#211D1D;
  --muted:#6d646a;
  --accent:#EE93CF;
  --accent-fg:#211D1D;
  --line:rgba(33,29,29,.14);
  --card:#fff;
  --chip:#EFE1DB;
  --chip-fg:#211D1D;
  --chip-on:#211D1D;
  --chip-on-fg:#EFE1DB;
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 10px 30px rgba(33,29,29,.16);
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --head-weight:900;
  --head-track:-.02em;
  --head-case:uppercase;
  --name-weight:800;
  --name-case:none;
  --name-track:0;
  --desc-font:var(--body);
  --desc-case:none;
  --desc-track:0;
  --price-color:var(--fg);
  --foot-bg:#211D1D;
  --foot-fg:#EFE1DB;
  --foot-muted:#a99ea4;
  --sheet-bg:#F7F1EC;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg) var(--bg-img);color:var(--fg);font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit;font-size:16px}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.05;letter-spacing:var(--head-track)}
p{margin:0}

.wrap{min-height:100vh;position:relative;transition:opacity .2s ease,transform .2s var(--ease)}
.wrap.switching{opacity:0;transform:translateY(8px)}

/* centred inner column used by every band */
.h-inner,.lb-inner,.c-inner,.sec-inner,.lg-inner,.f-inner{
  max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;overflow:hidden}
.h-inner{display:flex;align-items:center;gap:18px;padding-top:26px;padding-bottom:22px;position:relative}
.h-logo{flex:0 0 auto}
.h-text{flex:1 1 auto;min-width:0}
.h-wordmark{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.035em}
.h-tag{font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.65;font-size:11px;margin-top:8px}
.h-art{display:none}

/* ---------------------------------------------------------------- Location bar */
.locbar{position:relative}
.lb-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px;padding-bottom:14px}
.loc{
  padding:9px 13px;border-radius:var(--radius-pill);background:var(--chip);color:var(--chip-fg);
  font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  border:2px solid transparent;
}
.loc.on{background:var(--chip-on);color:var(--chip-on-fg);border-color:var(--chip-on)}
.lb-addr{flex-basis:100%;font-size:12.5px;line-height:1.5;opacity:.8;font-weight:600;margin-top:4px}

/* ---------------------------------------------------------------- Controls */
.controls{
  position:sticky;top:0;z-index:30;background:var(--bg) var(--bg-img);
  border-bottom:1px solid var(--line);
}
.c-inner{padding-top:12px;padding-bottom:8px}
.search-row{display:flex;align-items:center;gap:9px;background:var(--chip);border-radius:var(--radius-sm);padding:11px 13px}
.search-row .s-ic{width:17px;height:17px;opacity:.45;flex:0 0 auto}
.search-row input{flex:1 1 auto;border:0;background:none;outline:none;font-size:15px;font-weight:600;min-width:0;color:var(--fg)}
.search-row input::placeholder{color:var(--muted);font-weight:500;opacity:.8}
.s-clear{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.14);
  font-size:16px;font-weight:900;line-height:1;display:grid;place-items:center;
}

.diet-row,.cat-row{display:flex;gap:7px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.diet-row::-webkit-scrollbar,.cat-row::-webkit-scrollbar{display:none}
.cat-row{gap:8px;padding-bottom:4px}
.diet,.cat-chip{
  flex:0 0 auto;white-space:nowrap;border-radius:var(--radius-pill);background:var(--chip);color:var(--chip-fg);
  font-weight:900;text-transform:uppercase;
}
.diet{padding:7px 11px;font-size:10.5px;letter-spacing:.07em}
.diet.on{background:#4F8E5B;color:#fff}
.cat-chip{padding:9px 14px;font-size:11.5px;font-weight:800;letter-spacing:.05em}
.cat-chip.on{background:var(--chip-on);color:var(--chip-on-fg)}
.ic{display:inline}

/* ---------------------------------------------------------------- Sections */
.sec-head{
  display:flex;align-items:baseline;gap:10px;padding:26px 0 12px;scroll-margin-top:150px;
}
.sec-head h2{
  font-family:var(--display);font-size:23px;font-weight:var(--head-weight);
  text-transform:var(--head-case);letter-spacing:var(--head-track);
}
.sec-head .sh-art{height:34px;width:auto}
.sec-head .sh-count{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.sec-items{display:grid;grid-template-columns:1fr;gap:9px}

.row{
  width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;
  padding:15px;background:var(--card);border-radius:var(--radius-sm);color:inherit;
}
.row:active{transform:scale(.995)}
/* spans inside a <button>, so each needs an explicit block box */
.r-body{display:block;flex:1 1 auto;min-width:0}
.r-name{
  display:block;font-size:15.5px;font-weight:var(--name-weight);line-height:1.25;
  text-transform:var(--name-case);letter-spacing:var(--name-track);
}
.r-desc{
  display:block;margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.45;
  font-family:var(--desc-font);text-transform:var(--desc-case);letter-spacing:var(--desc-track);
}
.r-muse{display:block;margin-top:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text,var(--accent))}
.r-notes{display:block;margin-top:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.r-tags{display:flex;margin-top:9px;gap:5px;flex-wrap:wrap}

.tag{
  font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;background:var(--chip);color:var(--chip-fg);
}
.tag.v{background:#A9DCA8;color:#26502d}
.tag.sig{background:var(--accent);color:var(--accent-fg)}
.tag.age{background:#211D1D;color:#EFE1DB}

.r-price{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:3px}
.pr{font-size:15px;font-weight:900;white-space:nowrap;font-family:var(--mono);color:var(--price-color)}
.pr em{
  display:block;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);font-family:var(--body);margin-bottom:1px;
}
.pr.free{color:#4F8E5B}

.empty{padding:56px 24px;text-align:center;color:var(--muted)}
.empty b{display:block;margin-top:12px;font-size:16px;color:var(--fg);text-transform:uppercase;font-weight:900}
.empty small{display:block;margin-top:7px;font-size:13px;line-height:1.5}
.empty .e-ic{display:grid;place-items:center}
.e-cup{width:64px;height:64px;color:var(--fg);opacity:.85}
.e-cup .wisp{stroke-dasharray:20 20;stroke-dashoffset:20;animation:wisp 2.6s ease-in-out infinite}
.e-cup .w2{animation-delay:.6s}
.e-cup .w3{animation-delay:1.2s}
@keyframes wisp{0%{stroke-dashoffset:20;opacity:0}20%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:-20;opacity:0}}

/* ---------------------------------------------------------------- Legend */
.legend{margin-top:30px}
.lg-inner{padding-top:0;padding-bottom:0}
.lg-box{padding:20px;background:var(--chip);border-radius:var(--radius)}
.legend h4{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.lg-grid{margin-top:13px;display:flex;gap:6px;flex-wrap:wrap}
.lg-note{margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.6}

/* ---------------------------------------------------------------- Footer */
.foot{margin-top:30px;background:var(--foot-bg);color:var(--foot-fg)}
.f-inner{padding-top:34px;padding-bottom:calc(36px + var(--safe-b));text-align:center;position:relative}
/* Brooklyn cup: body + three steam layers stacked on the original 600x674 canvas
   (steam occupies the top 270 rows, the cup the bottom 404) */
.f-cup{display:none;position:relative;aspect-ratio:600/674}
.f-cup img{position:absolute;left:0;width:100%;height:auto}
.fc-body{bottom:0}
.fc-steam{top:0;animation:steam-rise 3.6s ease-in-out infinite both;will-change:transform,opacity}
.fc-steam.s1{transform-origin:58% 98%;--sway:3px}
.fc-steam.s2{transform-origin:50% 98%;animation-duration:4.3s;animation-delay:1.3s;--sway:-3px}
.fc-steam.s3{transform-origin:63% 98%;animation-duration:3.1s;animation-delay:2.2s;--sway:2px}
@keyframes steam-rise{
  0%{opacity:0;transform:translate3d(0,9px,0) scale(.9,.82)}
  22%{opacity:.95}
  60%{opacity:.85}
  100%{opacity:0;transform:translate3d(var(--sway,3px),-13px,0) scale(1.05,1.1)}
}
.f-logo{width:52px;margin:0 auto 16px}
.f-logo-dark{display:none}
.foot h3{font-family:var(--display);font-size:19px;font-weight:var(--head-weight);text-transform:var(--head-case)}
.f-addr{margin-top:10px;font-size:12.5px;color:var(--foot-muted);line-height:1.55}
.f-links{margin-top:18px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.f-links a{
  padding:10px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);color:var(--foot-fg);
  text-decoration:none;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
}
.f-links a:first-child{background:var(--accent);color:var(--accent-fg)}
.f-legal{margin-top:22px;font-size:10.5px;color:var(--foot-muted);line-height:1.7;opacity:.85}

/* ---------------------------------------------------------------- Embed mode
   27menuembed.asimanaged.com (or ?embed=1) is iframed into the shop site, so the
   outbound links in the footer go: the host page already has them. */
html.embed .f-links{display:none}
html.embed .f-legal{margin-top:18px}
html.embed .totop{display:none}
/* once the host page has told us which slice of the frame is on screen, the pour and
   the item sheet cover that slice (top/height set inline) instead of the whole frame */
html.embed.vp .pour,html.embed.vp .sheet-wrap{position:absolute;left:0;right:0;bottom:auto}

/* ---------------------------------------------------------------- To top */
.totop{
  position:fixed;right:16px;bottom:calc(16px + var(--safe-b));z-index:40;
  width:46px;height:46px;border-radius:50%;background:var(--chip-on);color:var(--chip-on-fg);
  display:grid;place-items:center;box-shadow:var(--shadow);
  opacity:0;transform:translateY(12px) scale(.86);pointer-events:none;
  transition:opacity .25s ease,transform .3s var(--ease);
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:19px;height:19px}

/* ---------------------------------------------------------------- Sheet */
.sheet-wrap{position:fixed;inset:0;z-index:100;display:none}
.sheet-wrap.open{display:block}
.scrim{position:absolute;inset:0;background:rgba(21,15,17,.55);backdrop-filter:blur(2px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:720px;
  max-height:90%;background:var(--sheet-bg);border-radius:26px 26px 0 0;overflow-y:auto;
  animation:up .3s var(--ease);color:var(--fg);
}
@keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-grip{position:sticky;top:0;background:var(--sheet-bg);padding:10px 0 4px;display:grid;place-items:center;z-index:2}
.sheet-grip i{width:40px;height:4px;border-radius:4px;background:rgba(0,0,0,.2);display:block}

.d-banner{padding:24px 20px 22px;position:relative;overflow:hidden}
.d-banner.t-pink{background:var(--accent);color:var(--accent-fg)}
.d-banner.t-black{background:#211D1D;color:#EFE1DB}
.d-banner.t-green{background:#4F8E5B;color:#fff}
.d-banner.t-cream{background:#EFE1DB;color:#211D1D}
.d-banner .db-ic{font-size:30px;line-height:1}
.d-banner h2{margin-top:11px;font-family:var(--display);font-size:26px;font-weight:var(--head-weight);text-transform:var(--head-case);line-height:.98}
.d-banner .db-muse{margin-top:9px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;opacity:.72}
.d-banner .db-notes{margin-top:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

.d-body{padding:18px 20px 30px}
.d-desc{font-size:14px;line-height:1.6;color:var(--fg);opacity:.85}
.d-tags{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}

.d-sizes{margin-top:20px;background:var(--card);border-radius:var(--radius-sm);overflow:hidden}
.d-sizes .ds-row{display:flex;justify-content:space-between;padding:13px 15px;font-size:13.5px;font-weight:700}
.d-sizes .ds-row + .ds-row{border-top:1px solid var(--line)}
.d-sizes .ds-row b{font-family:var(--mono);font-weight:700}

.d-group{margin-top:20px}
.d-group h4{font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.d-group p{margin-top:7px;font-size:13px;line-height:1.6;color:var(--fg);opacity:.85}
.d-group .up{font-weight:800}

.d-warn{
  margin-top:20px;padding:14px;border-radius:var(--radius-sm);background:#211D1D;color:#EFE1DB;
  font-size:12px;line-height:1.55;
}
.d-close{margin-top:24px;width:100%;padding:16px;border-radius:14px;background:var(--chip-on);color:var(--chip-on-fg);
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}

/* ==========================================================================
   THEME: CLEVELAND - the TV boards
   ========================================================================== */
[data-theme="cle"]{
  --bg:#EFE1DB;
  --fg:#211D1D;
  --muted:#5f5559;
  --accent:#EE93CF;
  --accent-fg:#211D1D;
  --accent-text:#D8529F;
  --line:rgba(33,29,29,.14);
  --card:#fff;
  --chip:rgba(33,29,29,.08);
  --chip-fg:#211D1D;
  --chip-on:#211D1D;
  --chip-on-fg:#EFE1DB;
  --desc-font:"Source Code Pro",ui-monospace,Menlo,monospace;
  --desc-case:uppercase;
  --desc-track:.02em;
  --foot-bg:#211D1D;
  --foot-fg:#EFE1DB;
  --foot-muted:#a99ea4;
  --sheet-bg:#F7F1EC;
}
[data-theme="cle"] .hero{background:#EE93CF}
[data-theme="cle"] .hero::after{
  content:"";position:absolute;right:-56px;bottom:-70px;width:210px;height:210px;
  border-radius:50%;background:rgba(33,29,29,.06);
}
[data-theme="cle"] .h-logo{width:64px}
[data-theme="cle"] .h-wordmark{font-size:34px}
[data-theme="cle"] .h-script{height:30px;width:auto;margin-top:6px}
[data-theme="cle"] .h-tag{display:none}
[data-theme="cle"] .locbar{background:#EE93CF}
[data-theme="cle"] .lb-inner{padding-top:0;padding-bottom:18px}
[data-theme="cle"] .loc{background:rgba(255,255,255,.5)}
[data-theme="cle"] .loc.on{background:#211D1D;color:#EFE1DB}
[data-theme="cle"] .controls{background:#EFE1DB}
[data-theme="cle"] .search-row{background:#fff}
[data-theme="cle"] .r-desc{font-size:11.5px;font-weight:500}
[data-theme="cle"] .pr{color:#D8529F}
[data-theme="cle"] .pr.free{color:#4F8E5B}

/* full-bleed coloured panels per category, like the four boards */
[data-theme="cle"] .sec{padding-bottom:22px}
[data-theme="cle"] .sec-head h2{color:#D8529F;font-size:26px}
[data-theme="cle"] .sec[data-tone="black"]{background:#211D1D;color:#EFE1DB}
[data-theme="cle"] .sec[data-tone="black"] .sec-head h2{color:#EE93CF}
[data-theme="cle"] .sec[data-tone="black"] .sh-count,
[data-theme="cle"] .sec[data-tone="black"] .r-desc,
[data-theme="cle"] .sec[data-tone="black"] .r-notes,
[data-theme="cle"] .sec[data-tone="black"] .pr em{color:#c9bfc3}
[data-theme="cle"] .sec[data-tone="black"] .row{background:rgba(255,255,255,.06)}
[data-theme="cle"] .sec[data-tone="black"] .pr{color:#EE93CF}
[data-theme="cle"] .sec[data-tone="black"] .tag{background:rgba(255,255,255,.14);color:#EFE1DB}
[data-theme="cle"] .sec[data-tone="black"] .tag.v{background:#A9DCA8;color:#26502d}
[data-theme="cle"] .sec[data-tone="black"] .tag.sig{background:#EE93CF;color:#211D1D}
[data-theme="cle"] .sec[data-tone="black"] .r-muse{color:#EE93CF}

[data-theme="cle"] .sec[data-tone="green"]{background:#5FA868;color:#fff}
[data-theme="cle"] .sec[data-tone="green"] .sec-head h2{color:#fff}
[data-theme="cle"] .sec[data-tone="green"] .sh-count,
[data-theme="cle"] .sec[data-tone="green"] .r-desc,
[data-theme="cle"] .sec[data-tone="green"] .r-notes,
[data-theme="cle"] .sec[data-tone="green"] .pr em{color:rgba(255,255,255,.82)}
[data-theme="cle"] .sec[data-tone="green"] .row{background:rgba(0,0,0,.14)}
[data-theme="cle"] .sec[data-tone="green"] .pr{color:#fff}
[data-theme="cle"] .sec[data-tone="green"] .tag{background:rgba(255,255,255,.2);color:#fff}
[data-theme="cle"] .sec[data-tone="green"] .tag.v{background:#fff;color:#26502d}
[data-theme="cle"] .sec[data-tone="green"] .r-muse{color:#fff}

[data-theme="cle"] .sec[data-tone="pink"]{background:#EE93CF;color:#211D1D}
[data-theme="cle"] .sec[data-tone="pink"] .sec-head h2{color:#211D1D}
[data-theme="cle"] .sec[data-tone="pink"] .sh-count{color:#211D1D;opacity:.6}
[data-theme="cle"] .sec[data-tone="pink"] .row{background:#211D1D;color:#EFE1DB}
[data-theme="cle"] .sec[data-tone="pink"] .r-desc,
[data-theme="cle"] .sec[data-tone="pink"] .r-notes,
[data-theme="cle"] .sec[data-tone="pink"] .pr em{color:#c9bfc3}
[data-theme="cle"] .sec[data-tone="pink"] .pr{color:#EE93CF}
[data-theme="cle"] .sec[data-tone="pink"] .r-muse{color:#EE93CF}
[data-theme="cle"] .sec[data-tone="pink"] .tag{background:rgba(255,255,255,.14);color:#EFE1DB}
[data-theme="cle"] .sec[data-tone="pink"] .tag.v{background:#A9DCA8;color:#26502d}
[data-theme="cle"] .sec[data-tone="pink"] .tag.sig{background:#EE93CF;color:#211D1D}
[data-theme="cle"] .sec[data-tone="pink"] .tag.age{background:#EFE1DB;color:#211D1D}

[data-theme="cle"] .sec[data-tone="cream"] .row{background:#fff}
[data-theme="cle"] .legend{margin-top:0;padding-top:30px;background:#EFE1DB}
[data-theme="cle"] .lg-box{background:#fff}

/* ==========================================================================
   THEME: MIAMI - the printed menu
   ========================================================================== */
[data-theme="mia"]{
  --bg:#ECECEC;
  --fg:#111;
  --muted:#555;
  --accent:#111;
  --accent-fg:#fff;
  --accent-text:#111;
  --line:rgba(0,0,0,.22);
  --card:transparent;
  --chip:transparent;
  --chip-fg:#111;
  --chip-on:#111;
  --chip-on-fg:#fff;
  --radius:0;
  --radius-sm:0;
  --radius-pill:0;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --display:"Tinos","Times New Roman",Times,serif;
  --body:"Source Code Pro",ui-monospace,Menlo,monospace;
  --mono:"Source Code Pro",ui-monospace,Menlo,monospace;
  --head-weight:700;
  --head-track:.02em;
  --head-case:uppercase;
  --name-weight:700;
  --name-case:uppercase;
  --name-track:.03em;
  --desc-font:"Source Code Pro",ui-monospace,Menlo,monospace;
  --desc-case:uppercase;
  --desc-track:.02em;
  --foot-bg:#ECECEC;
  --foot-fg:#111;
  --foot-muted:#555;
  --sheet-bg:#F4F4F4;
}
[data-theme="mia"] .hero{background:#ECECEC}
[data-theme="mia"] .h-inner{flex-direction:column;text-align:center;gap:6px;padding-top:34px;padding-bottom:6px}
[data-theme="mia"] .h-logo{width:84px}
[data-theme="mia"] .h-wordmark{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.42em;margin-left:.42em;line-height:1.1;margin-top:4px}
[data-theme="mia"] .h-tag{font-weight:500;letter-spacing:.3em;font-size:10px;opacity:.6;margin-top:2px}
[data-theme="mia"] .lb-inner{justify-content:center;text-align:center;padding-top:16px;padding-bottom:16px}
[data-theme="mia"] .loc{border:1.5px solid #111;background:transparent;font-weight:600;letter-spacing:.14em;padding:9px 16px}
[data-theme="mia"] .loc.on{background:#111;color:#fff}
[data-theme="mia"] .lb-addr{font-weight:400;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
[data-theme="mia"] .controls{border-bottom:1.5px solid #111}
[data-theme="mia"] .search-row{border:1.5px solid #111;background:#F4F4F4}
[data-theme="mia"] .search-row input{font-weight:500;font-size:14px}
[data-theme="mia"] .diet,[data-theme="mia"] .cat-chip{border:1.5px solid #111;font-weight:600;letter-spacing:.1em}
[data-theme="mia"] .diet.on{background:#111;color:#fff}
[data-theme="mia"] .ic{display:none}
[data-theme="mia"] .sec-head{border-bottom:1.5px solid #111;padding:34px 0 8px;gap:14px}
[data-theme="mia"] .sec-head h2{font-size:30px;letter-spacing:.01em}
[data-theme="mia"] .sec-items{gap:0;padding-top:6px}
[data-theme="mia"] .row{padding:13px 0;border-bottom:1px solid rgba(0,0,0,.1)}
[data-theme="mia"] .r-name{font-size:13px}
[data-theme="mia"] .r-desc{font-size:10.5px;line-height:1.5;color:#444}
[data-theme="mia"] .r-muse{font-weight:600;letter-spacing:.08em;color:#111}
[data-theme="mia"] .r-notes{font-weight:500;color:#444}
[data-theme="mia"] .pr{font-weight:700;font-size:14px}
[data-theme="mia"] .pr em{font-weight:600;letter-spacing:.14em;color:#555}
[data-theme="mia"] .tag{border:1px solid #111;background:transparent;color:#111;border-radius:0;font-weight:600;padding:3px 6px}
[data-theme="mia"] .tag.v{background:transparent;color:#111}
[data-theme="mia"] .tag.sig{background:#F4A9CC;color:#111;border-color:#F4A9CC}
[data-theme="mia"] .tag.age{background:#111;color:#fff}
[data-theme="mia"] .lg-box{border:1.5px solid #111;background:transparent}
[data-theme="mia"] .legend h4{font-family:var(--display);font-size:18px;letter-spacing:.02em}
[data-theme="mia"] .lg-note{font-size:10.5px;text-transform:uppercase;letter-spacing:.02em}
[data-theme="mia"] .foot{border-top:1.5px solid #111}
[data-theme="mia"] .f-logo-light{display:none}
[data-theme="mia"] .f-logo-dark{display:block}
[data-theme="mia"] .foot h3{font-weight:400;letter-spacing:.3em;margin-left:.3em;font-size:18px}
[data-theme="mia"] .f-addr{text-transform:uppercase;letter-spacing:.04em;font-size:11px}
[data-theme="mia"] .f-links a{border:1.5px solid #111;background:transparent;color:#111;font-weight:600;letter-spacing:.12em}
[data-theme="mia"] .f-links a:first-child{background:#111;color:#fff}
[data-theme="mia"] .f-legal{text-transform:uppercase;letter-spacing:.02em;font-size:9.5px}
[data-theme="mia"] .totop{border-radius:0}
[data-theme="mia"] .sheet{border-radius:0;max-width:640px}
[data-theme="mia"] .d-banner{background:#F4F4F4;color:#111;border-bottom:1.5px solid #111}
[data-theme="mia"] .d-banner.t-pink,[data-theme="mia"] .d-banner.t-black,
[data-theme="mia"] .d-banner.t-green,[data-theme="mia"] .d-banner.t-cream{background:#F4F4F4;color:#111}
[data-theme="mia"] .d-banner .db-ic{display:none}
[data-theme="mia"] .d-banner h2{margin-top:0;font-size:30px}
[data-theme="mia"] .d-desc{text-transform:uppercase;font-size:12px;letter-spacing:.02em}
[data-theme="mia"] .d-sizes{border:1.5px solid #111}
[data-theme="mia"] .d-warn{border-radius:0}
[data-theme="mia"] .d-close{border-radius:0;letter-spacing:.14em;font-weight:600}

/* ==========================================================================
   THEME: BROOKLYN - the paper menu
   ========================================================================== */
[data-theme="nyc"]{
  --bg:#F9F9F1;
  --bg-img:url("../assets/paper-nyc.jpg");
  --fg:#1c1c1c;
  --muted:#3f3f3f;
  --accent:#F4A9CC;
  --accent-fg:#1c1c1c;
  --accent-text:#D8529F;
  --line:rgba(0,0,0,.16);
  --card:transparent;
  --chip:transparent;
  --chip-fg:#1c1c1c;
  --chip-on:#1c1c1c;
  --chip-on-fg:#F9F9F1;
  --radius:4px;
  --radius-sm:3px;
  --radius-pill:3px;
  --shadow:0 8px 24px rgba(0,0,0,.14);
  --display:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --head-weight:700;
  --head-track:.14em;
  --head-case:uppercase;
  --name-weight:700;
  --name-case:uppercase;
  --name-track:.1em;
  --desc-font:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --desc-case:uppercase;
  --desc-track:.08em;
  --foot-bg:transparent;
  --foot-fg:#1c1c1c;
  --foot-muted:#3f3f3f;
  --sheet-bg:#F9F9F1;
}
[data-theme="nyc"] body,[data-theme="nyc"] .controls{background-size:600px 600px}
[data-theme="nyc"] .hero{background:transparent}
[data-theme="nyc"] .h-inner{flex-direction:column;text-align:center;gap:4px;padding-top:26px;padding-bottom:4px}
[data-theme="nyc"] .h-logo{width:120px}
[data-theme="nyc"] .h-wordmark{font-size:14px;font-weight:700;letter-spacing:.34em;margin-left:.34em;margin-top:8px}
[data-theme="nyc"] .h-tag{font-weight:400;letter-spacing:.26em;font-size:10.5px;opacity:.7;margin-top:4px}
[data-theme="nyc"] .lb-inner{justify-content:center;text-align:center;padding-top:14px;padding-bottom:12px;gap:6px}
[data-theme="nyc"] .loc{border-bottom:2px solid transparent;background:transparent;font-weight:700;letter-spacing:.2em;padding:9px 12px;font-size:12px;border-radius:0}
[data-theme="nyc"] .loc.on{background:transparent;color:#1c1c1c;border-color:#1c1c1c}
[data-theme="nyc"] .lb-addr{font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
[data-theme="nyc"] .controls{border-bottom:1.5px solid #1c1c1c;background-image:var(--bg-img)}
[data-theme="nyc"] .search-row{border:1.5px solid #1c1c1c;background:rgba(255,255,255,.5)}
[data-theme="nyc"] .search-row input{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
[data-theme="nyc"] .diet,[data-theme="nyc"] .cat-chip{border:1.5px solid #1c1c1c;font-weight:700;letter-spacing:.14em}
[data-theme="nyc"] .diet.on{background:#1c1c1c;color:#F9F9F1}
[data-theme="nyc"] .cat-chip.on{background:#F4A9CC;color:#1c1c1c;border-color:#F4A9CC}
[data-theme="nyc"] .ic{display:none}
[data-theme="nyc"] .sec-head{padding:34px 0 10px}
[data-theme="nyc"] .sec-head h2{font-size:22px}
[data-theme="nyc"] .sec-items{gap:0}
[data-theme="nyc"] .row{padding:11px 0;border-bottom:1px solid rgba(0,0,0,.08)}
[data-theme="nyc"] .r-name{font-size:14px}
[data-theme="nyc"] .r-desc{font-size:12px;line-height:1.5;font-weight:400}
[data-theme="nyc"] .r-muse{font-weight:700;letter-spacing:.14em;color:#D8529F}
[data-theme="nyc"] .r-notes{font-weight:500;letter-spacing:.1em}
[data-theme="nyc"] .pr{font-weight:700;font-size:14px;letter-spacing:.06em}
[data-theme="nyc"] .pr em{font-weight:500;letter-spacing:.16em}
[data-theme="nyc"] .tag{border:1px solid #1c1c1c;background:transparent;color:#1c1c1c;font-weight:700;letter-spacing:.14em;padding:3px 6px}
[data-theme="nyc"] .tag.v{background:transparent;color:#1c1c1c}
[data-theme="nyc"] .tag.sig{background:#F4A9CC;color:#1c1c1c;border-color:#F4A9CC}
[data-theme="nyc"] .tag.age{background:#1c1c1c;color:#F9F9F1}
[data-theme="nyc"] .lg-box{border:1.5px solid #1c1c1c;background:rgba(255,255,255,.35)}
[data-theme="nyc"] .legend h4{letter-spacing:.3em;font-size:13px}
[data-theme="nyc"] .lg-note{text-transform:uppercase;letter-spacing:.06em;font-size:11px;line-height:1.65}
[data-theme="nyc"] .foot{border-top:1.5px solid #1c1c1c}
[data-theme="nyc"] .f-logo-light{display:none}
[data-theme="nyc"] .f-logo-dark{display:block}
[data-theme="nyc"] .f-cup{display:block;width:120px;margin:0 auto 14px}
[data-theme="nyc"] .foot h3{letter-spacing:.3em;margin-left:.3em;font-size:17px}
[data-theme="nyc"] .f-addr{text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;line-height:1.7}
[data-theme="nyc"] .f-links a{border:1.5px solid #1c1c1c;background:transparent;color:#1c1c1c;font-weight:700;letter-spacing:.16em}
[data-theme="nyc"] .f-links a:first-child{background:#F4A9CC;border-color:#F4A9CC;color:#1c1c1c}
[data-theme="nyc"] .f-legal{text-transform:uppercase;letter-spacing:.06em;font-size:9.5px}
[data-theme="nyc"] .sheet{background:var(--bg) var(--bg-img);background-size:600px 600px}
[data-theme="nyc"] .sheet-grip{background:transparent}
[data-theme="nyc"] .d-banner{background:transparent;color:#1c1c1c;border-bottom:1.5px solid #1c1c1c}
[data-theme="nyc"] .d-banner.t-pink,[data-theme="nyc"] .d-banner.t-black,
[data-theme="nyc"] .d-banner.t-green,[data-theme="nyc"] .d-banner.t-cream{background:transparent;color:#1c1c1c}
[data-theme="nyc"] .d-banner .db-ic{display:none}
[data-theme="nyc"] .d-banner h2{margin-top:0;font-size:24px}
[data-theme="nyc"] .d-desc{text-transform:uppercase;letter-spacing:.06em;font-size:13px}
[data-theme="nyc"] .d-sizes{border:1.5px solid #1c1c1c;background:rgba(255,255,255,.4)}
[data-theme="nyc"] .d-close{letter-spacing:.2em}

/* ==========================================================================
   RESPONSIVE - tablet (>=640) and desktop (>=1024)
   ========================================================================== */
@media (min-width:640px){
  :root{--gutter:28px}
  .sec-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
  /* the paper looks have no card padding, so the columns need real air between them */
  [data-theme="mia"] .sec-items,[data-theme="nyc"] .sec-items{column-gap:40px}
  .sec-head h2{font-size:26px}
  [data-theme="cle"] .h-wordmark{font-size:44px}
  [data-theme="cle"] .h-logo{width:84px}
  [data-theme="cle"] .h-script{height:40px}
  [data-theme="mia"] .h-logo{width:100px}
  [data-theme="mia"] .h-wordmark{font-size:36px}
  [data-theme="nyc"] .h-logo{width:150px}
  [data-theme="nyc"] .f-inner{display:flex;align-items:center;gap:36px;text-align:left}
  [data-theme="nyc"] .f-cup{flex:0 0 auto;width:170px;margin:0}
  [data-theme="nyc"] .f-main{flex:1 1 auto}
  [data-theme="nyc"] .f-logo{margin-left:0}
  [data-theme="nyc"] .f-links{justify-content:flex-start}
}

@media (min-width:1024px){
  :root{--gutter:40px}
  .sec-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px}
  .sec-head{padding-top:36px}
  .sec-head h2{font-size:30px}
  .r-name{font-size:16px}
  .lb-addr{flex-basis:auto;margin-left:auto;margin-top:0;text-align:right}
  .c-inner{display:grid;grid-template-columns:minmax(220px,320px) auto 1fr;gap:14px;align-items:center;padding-top:12px;padding-bottom:12px}
  .diet-row,.cat-row{margin-top:0;padding-bottom:0}
  .search-row{padding:10px 13px}
  .totop{right:28px}
  .sheet{max-width:760px;bottom:auto;top:50%;border-radius:22px;max-height:84vh;transform:translate(-50%,-50%);animation:pop .25s var(--ease)}
  [data-theme="mia"] .sheet,[data-theme="nyc"] .sheet{border-radius:0}

  /* Cleveland: header reads like the board - skull, wordmark, "Menu" script, and the stacked tagline */
  [data-theme="cle"] .h-inner{padding-top:34px;padding-bottom:28px;gap:26px}
  [data-theme="cle"] .h-logo{width:104px}
  [data-theme="cle"] .h-wordmark{font-size:58px}
  [data-theme="cle"] .h-script{height:52px}
  [data-theme="cle"] .h-art{display:block;margin-left:auto;width:min(330px,30vw);height:auto;align-self:center}
  [data-theme="cle"] .sec-head h2{font-size:34px}
  [data-theme="cle"] .sec-head .sh-art{height:46px}

  /* Miami: wide white sheet floating on the grey, like the printed page */
  [data-theme="mia"] .h-inner{padding-top:44px}
  [data-theme="mia"] .h-logo{width:110px}
  [data-theme="mia"] .h-wordmark{font-size:40px}
  [data-theme="mia"] .sec-head h2{font-size:34px}
  [data-theme="mia"] .sec-items{column-gap:48px}

  /* Brooklyn: two generous columns, like the sheet */
  [data-theme="nyc"] .h-inner{padding-top:34px}
  [data-theme="nyc"] .h-logo{width:170px}
  [data-theme="nyc"] .sec-items{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
  [data-theme="nyc"] .sec-head h2{font-size:26px}
}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}

@media (min-width:1400px){
  :root{--max:1280px}
}

/* ==========================================================================
   MOTION - small, transform/opacity only. Entrance effects need
   <html class="motion">, which menu.js sets unless reduced motion is on.
   ========================================================================== */
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes rock{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-22px,-16px)}}
@keyframes chip-pop{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes track-mia{from{opacity:0;letter-spacing:.16em}to{opacity:1;letter-spacing:.42em}}
@keyframes track-nyc{from{opacity:0;letter-spacing:.12em}to{opacity:1;letter-spacing:.34em}}
@keyframes pop-in{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}

/* rows and section heads rise in when they scroll into view, staggered by --i */
html.motion .row:not(.in),html.motion .sec-head:not(.in){opacity:0}
html.motion .row.in,html.motion .sec-head.in{animation:rise-in .5s var(--ease) backwards;animation-delay:calc(var(--i,0) * 55ms)}
html.motion .in.still{animation:none}

/* header art breathes a little on every look */
.h-logo{animation:float 6s ease-in-out infinite}
[data-theme="cle"] .h-art{animation:rock 5s ease-in-out infinite;transform-origin:50% 60%}
[data-theme="cle"] .hero::after{animation:drift 12s ease-in-out infinite alternate}

/* the printed looks: the wordmark tracks out as it appears, the tagline follows */
html.motion[data-theme="mia"] .h-wordmark{animation:track-mia 1.1s var(--ease) both}
html.motion[data-theme="nyc"] .h-wordmark{animation:track-nyc 1.1s var(--ease) both}
html.motion[data-theme="mia"] .h-tag,html.motion[data-theme="nyc"] .h-tag{animation:rise-in .7s var(--ease) .35s both}

/* Miami: the hairline under each section heading draws in from the left */
[data-theme="mia"] .sec-head{position:relative;border-bottom:0}
[data-theme="mia"] .sec-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#111;
  transform-origin:left;transition:transform .8s var(--ease);transition-delay:.15s;
}
html.motion[data-theme="mia"] .sec-head:not(.in)::after{transform:scaleX(0)}

/* the chip just chosen pops; the active location underline/tab does too */
.diet.on.pop,.cat-chip.on.pop{animation:chip-pop .3s var(--ease)}
.loc.on{animation:chip-pop .3s var(--ease)}

/* detail sheet: icon pops, then the body rises in a few lines at a time */
.d-banner .db-ic{animation:pop-in .5s var(--ease) backwards;animation-delay:.08s}
.d-body>*{animation:rise-in .45s var(--ease) backwards}
.d-body>*:nth-child(1){animation-delay:.05s}
.d-body>*:nth-child(2){animation-delay:.1s}
.d-body>*:nth-child(3){animation-delay:.15s}
.d-body>*:nth-child(4){animation-delay:.2s}
.d-body>*:nth-child(5){animation-delay:.25s}
.d-body>*:nth-child(n+6){animation-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pour{display:none!important}
  .hc-spark{display:none}
  .sheet,.scrim,.h-logo,.h-art,.hero::after,.fc-steam,.e-cup .wisp,.loc.on,.d-banner .db-ic,.d-body>*{animation:none}
  .fc-steam,.e-cup .wisp{opacity:1}
  .e-cup .wisp{stroke-dasharray:none}
  .wrap,.totop{transition:none}
}

/* ==========================================================================
   POUR-IN - the coffee pot. #pour sits over the page; data-pour picks the
   destination look's colours. menu.js adds .run (pot in, tilt, stream, liquid
   rises), .full (screen covered: page swaps underneath, pot sinks), then
   .drain (liquid falls away). .skip fades it out early. Never shown when
   <html class="motion"> is absent.
   ========================================================================== */
.pour{
  position:fixed;inset:0;z-index:200;display:none;overflow:hidden;
  --pour-bg:#211D1D;--pour-pot:#211D1D;--pour-ink:#EFE1DB;--pour-liq:#EE93CF;--pour-font:var(--display);
  --pour-track:.3em;--pour-weight:900;
}
.pour[data-pour="cle"]{--pour-bg:#211D1D;--pour-pot:#211D1D;--pour-ink:#EFE1DB;--pour-liq:#EE93CF;--pour-font:"Archivo","Helvetica Neue",Arial,sans-serif}
.pour[data-pour="mia"]{--pour-bg:#ECECEC;--pour-pot:#ECECEC;--pour-ink:#111;--pour-liq:#111;--pour-font:"Tinos","Times New Roman",serif;--pour-track:.42em;--pour-weight:400}
.pour[data-pour="nyc"]{--pour-bg:#F9F9F1 url("../assets/paper-nyc.jpg");--pour-pot:#F9F9F1;--pour-ink:#1c1c1c;--pour-liq:#F6B1CE;--pour-font:"Roboto Condensed","Arial Narrow",Arial,sans-serif;--pour-track:.34em;--pour-weight:700}
.pour.run{display:block}
.pour.skip{opacity:0;transition:opacity .3s ease}
.pour-bg{position:absolute;inset:0;background:var(--pour-bg);background-size:600px 600px}
.pour.full .pour-bg{opacity:0}

/* the pot: hangs in from above, tips over, pours, and finally sinks under the rising liquid */
/* the box's top-left corner is the spout tip; the pot itself is drawn up and to the right of it */
.pour-pot{position:absolute;top:150px;left:calc(50% - 84px);width:250px;height:300px;transform:translateY(-170%)}
.pot-svg{overflow:visible;display:block}
.pot-g{fill:var(--pour-pot);stroke:var(--pour-ink);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;transform:rotate(-4deg);transform-origin:0 0}
.pot-g .pt-handle{fill:none;stroke-width:7}
.pot-g .pt-band{fill:none;stroke-width:3}
.pot-g .pt-logo{fill:var(--pour-ink);stroke:none}
.pour-stream{fill:var(--pour-liq);transform:scaleY(0);transform-origin:0 0}
.pour.run .pour-pot{animation:pot-in .5s var(--ease) both}
.pour.run .pot-g{animation:pot-tilt .6s cubic-bezier(.4,0,.2,1) .3s both}
.pour.run .pour-stream{animation:stream-on .3s cubic-bezier(.3,.7,.4,1) .72s both}
.pour.full .pour-pot{animation:pot-sink .45s ease-in both}
.pour.full .pour-stream{animation:none;opacity:0}
@keyframes pot-in{from{transform:translateY(-170%)}to{transform:translateY(0)}}
@keyframes pot-tilt{from{transform:rotate(-4deg)}to{transform:rotate(-58deg)}}
@keyframes stream-on{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pot-sink{from{transform:translateY(0);opacity:1}to{transform:translateY(60px) rotate(6deg);opacity:0}}

/* "Now pouring · Cleveland", drowned as the level passes it */
.pour-cap{
  position:absolute;top:304px;left:0;right:0;text-align:center;color:var(--pour-ink);
  font-family:var(--pour-font);text-transform:uppercase;opacity:0;
}
.pour-cap small{display:block;font-size:10px;letter-spacing:.3em;opacity:.6;font-weight:600;font-family:var(--body)}
.pour-cap b{display:block;margin-top:6px;font-size:22px;font-weight:var(--pour-weight);letter-spacing:var(--pour-track);margin-left:var(--pour-track)}
.pour.run .pour-cap{animation:rise-in .6s var(--ease) .45s both}
.pour.full .pour-cap{animation:none;opacity:0}

/* the liquid: a sheet the height of the screen with two wave crests riding its surface */
.pour-liq{
  position:absolute;left:0;right:0;top:0;height:calc(100% + 46px);background:var(--pour-liq);
  transform:translateY(100%);will-change:transform;
}
.pour-liq .wave{position:absolute;left:0;width:200%;height:40px;fill:var(--pour-liq);display:block}
.pour-liq .w1{top:-39px;animation:wave-x 2.6s linear infinite}
.pour-liq .w2{top:-30px;opacity:.55;animation:wave-x 4.2s linear infinite reverse}
@keyframes wave-x{to{transform:translateX(-50%)}}
.pour.run .pour-liq{animation:liq-fill 1.25s cubic-bezier(.35,.1,.25,1) .8s both}
.pour.drain .pour-liq{animation:liq-drain .72s cubic-bezier(.55,0,.85,.5) both}
@keyframes liq-fill{from{transform:translateY(100%)}to{transform:translateY(-46px)}}
@keyframes liq-drain{from{transform:translateY(-46px)}to{transform:translateY(102%)}}

/* while the screen is covered, nothing underneath moves or scrolls; the page eases up as the drain reveals it */
html.pouring{overflow:hidden}
html.pouring .wrap{transform:scale(.985);transition:none}
html.motion .wrap{transition:opacity .2s ease,transform .7s var(--ease)}
html.pouring .row.in,html.pouring .sec-head.in,html.pouring .sec.in::before,
html.pouring .h-wordmark,html.pouring .h-tag,
html.pouring .hc-crown,html.pouring .hc-skull,html.pouring .hc-shine,html.pouring .hc-spark{animation-play-state:paused}

/* ==========================================================================
   BROOKLYN - the Liberty crown drops onto the skull
   ========================================================================== */
.h-crowned{position:relative}
.h-crowned .hc-skull{position:relative;width:100%;transform-origin:50% 85%}
.h-crowned .hc-crown,.h-crowned .hc-shine{position:absolute;inset:0;width:100%;height:100%}
.h-crowned .hc-crown{transform-origin:50% 60%}
.hc-shine{
  -webkit-mask:url("../assets/crown-nyc.png") center/100% 100% no-repeat;mask:url("../assets/crown-nyc.png") center/100% 100% no-repeat;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 62%);
  background-size:300% 100%;background-position:130% 0;opacity:0;
}
.hc-spark{
  position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-7px 0 0 -7px;
  color:#D8529F;opacity:0;pointer-events:none;
}
.hc-spark::before{content:"✦";position:absolute;inset:0;font-size:14px;line-height:14px;text-align:center;font-style:normal}
html.motion .hc-crown{animation:crown-drop 1.15s cubic-bezier(.34,1.3,.5,1) .35s both}
html.motion .hc-skull{animation:crown-land .5s ease-out 1.02s both}
html.motion .hc-shine{animation:crown-shine 1.1s ease-in-out 1.55s both}
html.motion .hc-spark{animation:spark .75s ease-out var(--d,1.2s) both}
@keyframes crown-drop{
  0%{opacity:0;transform:translateY(-46%) rotate(-10deg) scale(1.08)}
  40%{opacity:1}
  62%{transform:translateY(3%) rotate(1.6deg) scale(1)}
  80%{transform:translateY(-1.6%) rotate(-.6deg)}
  100%{transform:none}
}
@keyframes crown-land{0%{transform:none}35%{transform:scale(1.035,.955) translateY(1.5%)}100%{transform:none}}
@keyframes crown-shine{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
@keyframes spark{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg) translateY(-8px)}}

/* ==========================================================================
   CLEVELAND - each coloured board pours in from the bottom as it scrolls into
   view, with a wave along its leading edge (a mask on a sliding pseudo-element)
   ========================================================================== */
html.motion[data-theme="cle"] .sec[data-tone="black"],
html.motion[data-theme="cle"] .sec[data-tone="green"],
html.motion[data-theme="cle"] .sec[data-tone="pink"]{position:relative;isolation:isolate;overflow:hidden;background:transparent}
html.motion[data-theme="cle"] .sec[data-tone="black"]{--tone:#211D1D}
html.motion[data-theme="cle"] .sec[data-tone="green"]{--tone:#5FA868}
html.motion[data-theme="cle"] .sec[data-tone="pink"]{--tone:#EE93CF}
html.motion[data-theme="cle"] .sec[data-tone="black"]::before,
html.motion[data-theme="cle"] .sec[data-tone="green"]::before,
html.motion[data-theme="cle"] .sec[data-tone="pink"]::before{
  content:"";position:absolute;left:0;right:0;top:-28px;bottom:0;z-index:-1;background:var(--tone);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'><path d='M0 14Q40 0 80 14T160 14V28H0Z' fill='%23000'/></svg>") 0 0/160px 28px repeat-x,
               linear-gradient(#000,#000) 0 28px/100% calc(100% - 28px) no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'><path d='M0 14Q40 0 80 14T160 14V28H0Z' fill='%23000'/></svg>") 0 0/160px 28px repeat-x,
       linear-gradient(#000,#000) 0 28px/100% calc(100% - 28px) no-repeat;
  transform:translateY(101%);
}
html.motion[data-theme="cle"] .sec.in::before{animation:sec-fill 1s var(--ease) both}
html.motion[data-theme="cle"] .sec.in.still::before{animation:none;transform:none}
@keyframes sec-fill{
  from{transform:translateY(101%);-webkit-mask-position:0 0,0 28px;mask-position:0 0,0 28px}
  to{transform:translateY(0);-webkit-mask-position:-320px 0,0 28px;mask-position:-320px 0,0 28px}
}
/* the light type on the dark boards waits for the colour to arrive */
html.motion[data-theme="cle"] .sec[data-tone="black"] .row.in,html.motion[data-theme="cle"] .sec[data-tone="green"] .row.in,html.motion[data-theme="cle"] .sec[data-tone="pink"] .row.in,
html.motion[data-theme="cle"] .sec[data-tone="black"] .sec-head.in,html.motion[data-theme="cle"] .sec[data-tone="green"] .sec-head.in,html.motion[data-theme="cle"] .sec[data-tone="pink"] .sec-head.in{
  animation-delay:calc(var(--i,0) * 55ms + 320ms);
}