@property --shine-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
:root { color-scheme: dark; --ink: #080b0c; }
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--ink); }
body {
  margin: 0;
  min-height: 100%;
  color: #f6f7f7;
  background-color: #0a0d0e;
  background-image: linear-gradient(rgba(5,7,8,.20),rgba(5,7,8,.20)), url('assets/smoke-texture.webp');
  background-repeat: repeat, repeat;
  background-size: auto, 640px 640px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.masthead {
  position: relative;
  isolation: isolate;
  height: clamp(155px, 25.8vw, 340px);
  width: 100%;
  overflow: hidden;
  background: #050607;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.11);
}
.masthead img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 49%;
}
.masthead::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 36px;
  background: linear-gradient(transparent,rgba(0,0,0,.76));
  pointer-events: none;
}
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(480px, 55.7vw, 910px);
  overflow: hidden;
  background: #070a0b;
}
.hero img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,7,.06) 0%, rgba(4,6,7,0) 66%, rgba(4,6,7,.5) 88%, #090c0d 100%);
}
.menu {
  position: relative;
  padding: clamp(30px,4.7vw,78px) 20px clamp(70px,10vw,155px);
}
.menu::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(0,0,0,.36), transparent 16%, transparent 83%,rgba(0,0,0,.15));
}
.menu-inner {
  position: relative;
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2.8vw, 34px);
}
.menu-set {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(14px, 2.6vw, 30px);
}
.menu-tile {
  --shine-angle: 0deg;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(150px, 19vw, 240px);
  border-radius: clamp(12px, 1.6vw, 20px);
  border: 1px solid rgba(249,251,252,.36);
  background: linear-gradient(145deg,rgba(21,25,26,.68),rgba(1,3,4,.69)), url('assets/smoke-texture.webp') center center / 570px 570px repeat;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 62px rgba(0,0,0,.34);
  animation: orbit 4.2s linear infinite;
}
.menu-tile::before,
.menu-tile::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  padding: 2.8px;
  background: conic-gradient(from var(--shine-angle),
    rgba(255,255,255,.03) 0deg,
    rgba(255,255,255,.12) 210deg,
    rgba(255,255,255,.24) 257deg,
    rgba(255,255,255,.78) 286deg,
    #fff 302deg,
    #fff 317deg,
    rgba(255,255,255,.72) 330deg,
    rgba(255,255,255,.03) 359deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.menu-tile::after {
  inset: -5px;
  padding: 6px;
  opacity: .56;
  filter: blur(7px);
}
.menu-tile:nth-child(2) { animation-delay: -1.1s; }
.menu-tile:nth-child(3) { animation-delay: -2.1s; }
.menu-tile:nth-child(4) { animation-delay: -3.2s; }
.menu-set:nth-child(2) .menu-tile { animation-delay: -1.6s; }
.menu-set:nth-child(2) .menu-tile:nth-child(2) { animation-delay: -2.7s; }
.menu-set:nth-child(2) .menu-tile:nth-child(3) { animation-delay: -3.7s; }
.menu-set:nth-child(2) .menu-tile:nth-child(4) { animation-delay: -.6s; }
@keyframes orbit { to { --shine-angle: 360deg; } }
@media (max-width: 700px) {
  body { background-size: auto, 460px 460px; }
  .masthead { height: clamp(154px, 38vw, 238px); }
  .hero { height: clamp(320px, 88vw, 550px); }
  .hero img { object-position: 32% center; }
  .menu { padding: 26px 12px 72px; }
  .menu-inner { gap: 16px; }
  .menu-set { gap: 12px; }
  .menu-tile { min-height: clamp(134px, 41vw, 210px); border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) { .menu-tile { animation: none; --shine-angle: 312deg; } }

/* Compact artwork masthead with unobtrusive, accessible controls. */
.masthead {
  height: clamp(112px, 11vw, 168px);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.14);
}
.masthead picture,
.masthead picture img { display: block; width: 100%; height: 100%; }
.masthead picture img { object-fit: cover; object-position: center; }
.masthead-actions {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
}
.header-button {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: clamp(44px,4.1vw,56px);
  height: clamp(44px,4.1vw,56px);
  color: #fff;
  background: rgba(5,7,8,.82);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.07);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.header-button:hover { background:rgba(36,39,41,.96); border-color:#fff; transform:translateY(-1px); }
.header-button:focus-visible, .close-button:focus-visible, .panel-nav a:focus-visible {
  outline: 2px solid #fff; outline-offset: 4px;
}
.hamburger { display:flex; flex-direction:column; gap:5px; width:23px; }
.hamburger span { display:block; width:100%; height:2.5px; border-radius:4px; background:#fff; }
.cart-icon { width:25px; height:25px; }

/* Seamless marquee between the masthead and the unchanged hero. */
@property --welcome-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.welcome-wrap {
  position:relative;
  isolation:isolate;
  width:100%;
  padding:3px;
  overflow:hidden;
  background:#f5f5f5; /* Always-visible complete white frame. */
}
.welcome-wrap::before,
.welcome-wrap::after {
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  pointer-events:none;
  background:conic-gradient(from var(--welcome-border-angle),
    rgba(255,255,255,.28) 0deg,
    #fff 65deg,
    #fff 90deg,
    rgba(255,255,255,.28) 112deg,
    rgba(255,255,255,.28) 270deg,
    #fff 293deg,
    #fff 315deg,
    rgba(255,255,255,.28) 340deg,
    rgba(255,255,255,.28) 360deg);
  animation:welcome-border-orbit 3.3s linear infinite;
}
.welcome-wrap::after { filter:blur(10px); opacity:.92; }
@keyframes welcome-border-orbit { to { --welcome-border-angle:360deg; } }
.welcome-bar {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:100%;
  height:clamp(48px,5vw,64px);
  overflow:hidden;
  background:linear-gradient(180deg,#111518,#050709 75%);
  box-shadow:inset 0 0 14px rgba(255,255,255,.05);
}
.welcome-bar::before,
.welcome-bar::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(18px,5vw,90px);
  z-index:2;
  pointer-events:none;
}
.welcome-bar::before {left:0; background:linear-gradient(to right,#090b0d,transparent);}
.welcome-bar::after {right:0; background:linear-gradient(to left,#090b0d,transparent);}
.welcome-marquee {
  display:flex;
  width:max-content;
  flex:0 0 auto;
  white-space:nowrap;
  animation:welcome-scroll 25s linear infinite;
  will-change:transform;
}
.marquee-group {display:flex; flex:0 0 auto; white-space:nowrap; align-items:center;}
.marquee-group span {
  display:block;
  color:#fcfcfc;
  font:700 clamp(15px,2.2vw,23px)/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.045em;
  padding:0 clamp(32px,5vw,92px);
  text-shadow:0 0 10px rgba(255,255,255,.35);
}
@keyframes welcome-scroll { to { transform:translateX(-50%); } }

/* The two header buttons reveal minimal usable panels, not dead controls. */
.panel-layer[hidden], .side-panel[hidden] {display:none!important;}
.panel-layer {position:fixed;z-index:50;inset:0;}
.panel-backdrop {position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:rgba(0,0,0,.72);backdrop-filter:blur(2px);}
.side-panel {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:min(88vw,370px);
  padding:max(20px,env(safe-area-inset-top)) 22px 22px;
  background:linear-gradient(150deg,#151a1c,#07090a 84%);
  border-right:1px solid rgba(255,255,255,.3);
  box-shadow:16px 0 55px rgba(0,0,0,.7);
  overflow:auto;
}
#cart-panel {left:auto;right:0;border-right:0;border-left:1px solid rgba(255,255,255,.3);box-shadow:-16px 0 55px rgba(0,0,0,.7);}
.panel-heading {display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.17);font-weight:750;font-size:22px;}
.close-button {display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.4);border-radius:9px;color:#fff;background:#1d2224;font-size:28px;line-height:1;cursor:pointer;}
.panel-nav {display:grid;gap:10px;padding-top:22px;}
.panel-nav a {padding:15px 12px;border-radius:9px;color:#fff;text-decoration:none;font-weight:650;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
.panel-nav a:hover {background:rgba(255,255,255,.13);}
.cart-empty {padding:30px 6px;color:#c6cbce;font-size:15px;}
.panel-open {overflow:hidden;}
@media (max-width:700px) {
  .masthead {height:clamp(96px,29vw,125px);}
  .header-button {width:43px;height:43px;border-radius:10px;}
  .welcome-bar {height:49px;}
  .marquee-group span {font-size:15px;padding-inline:32px;}
  .welcome-marquee {animation-duration:19s;}
}
@media (prefers-reduced-motion:reduce) {
  .welcome-wrap::before,.welcome-wrap::after,.welcome-marquee {animation:none!important;}
  .welcome-marquee {transform:none;}
  .header-button {transition:none;}
}