/* --------------------------- announcement bar ---------------------------- */
.sm-bar{ background:var(--sm-yellow); border-bottom:var(--sm-bd) solid var(--sm-ink); }
.sm-bar-in{
  max-width:1180px; margin:0 auto; padding:9px 16px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 16px; text-align:center;
}
.sm-bar-txt{ font:italic 700 14.5px/1.35 var(--sm-ui); }
.sm-bar-cta{
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px;
  background:#fff; border:var(--sm-bd) solid var(--sm-ink); border-radius:999px;
  box-shadow:var(--sm-sh-sm); font:italic 800 13.5px/1 var(--sm-ui); white-space:nowrap;
}
.sm-bar-cta:hover{ transform:translate(1px,1px); box-shadow:1px 2px 0 var(--sm-ink); }
.sm-bar-cta b{ font-weight:900; }

/* -------------------------------- header --------------------------------- */
.sm-head{ width:100%; padding:14px 0; background:var(--sm-green); }
.sm-head-in{
  max-width:1180px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
}
.sm-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:var(--sm-bd) solid var(--sm-ink); border-radius:10px;
  box-shadow:var(--sm-sh); padding:9px 16px; font:italic 800 15px/1 var(--sm-ui);
  /* chrome controls are the most-tapped things on the site, so they clear the
     44px touch target rather than sitting a few pixels under it */
  min-height:44px; cursor:pointer; transition:transform .12s, box-shadow .12s;
}
.sm-btn:hover{ transform:translate(1px,1px); box-shadow:var(--sm-sh-sm); }
.sm-btn:active{ transform:translate(3px,4px); box-shadow:0 0 0 var(--sm-ink); }
.sm-head-left{ display:flex; justify-content:flex-start; }
.sm-head-right{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.sm-cart{ padding:9px 13px; font:italic 800 14px/1 var(--sm-ui); }

/* wordmark — reference treatment, project's brand name */
/* Wordmark — drawn-mark treatment rather than styled type.
   Two corrections over the plain reference CSS:
   1. the drop shadow is painted ONCE for the whole lockup (per-span shadows
      leave a visible seam where the two colour halves meet);
   2. the ink outline is painted behind the fill (paint-order) so the letter
      weight stays full instead of the stroke eating into the glyph. */
.sm-word{
  position:relative; display:inline-flex; align-items:baseline; gap:0; justify-self:center;
  font:italic 900 30px/1 var(--sm-ui); letter-spacing:-.03em; text-transform:uppercase;
  white-space:nowrap;
}
.sm-word::before{
  content:attr(data-word);
  position:absolute; left:3px; top:3px; z-index:0;
  color:var(--sm-ink); -webkit-text-stroke:2px var(--sm-ink);
  pointer-events:none;
}
.sm-word span{
  position:relative; z-index:1;
  -webkit-text-stroke:2px var(--sm-ink); paint-order:stroke fill;
}
.sm-word .a{ color:#fff; }
.sm-word .b{ color:var(--sm-yellow); }
/* optical: the second half starts on a round/vertical stem, so it needs a
   hair less space than the metric kerning gives it */
.sm-word .b{ margin-left:-.012em; }


/* ==========================================================================
   SERVICE MENU — large panel sliding down from the header.
   Geometry and motion taken from the reference implementation.
   ========================================================================== */
.sm-menu-scrim{
  position:fixed; inset:0; z-index:990; background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.sm-menu-scrim.on{ opacity:1; pointer-events:auto; }

.sm-menu{
  position:fixed; top:0; left:0; width:100%;
  max-height:100vh; overflow-y:auto; z-index:1000;
  background:var(--sm-yellow); border-bottom:var(--sm-bd) solid var(--sm-ink);
  transform:translateY(-101%);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  visibility:hidden;
}
.sm-menu.on{ transform:translateY(var(--sm-bar-h, 119px)); visibility:visible; }

.sm-menu-head{
  max-width:1280px; margin:0 auto; padding:0 24px; height:88px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
}
.sm-menu-close{ border-radius:12px; padding:10px 22px; font-size:18px; }
.sm-round{ border-radius:999px; padding:10px 22px; font-size:18px; }
.sm-menu-links{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.sm-word .b-green{ color:var(--sm-green); }

.sm-menu-cols{
  max-width:1280px; margin:0 auto; padding:38px 24px 56px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.sm-menu-col{ display:flex; flex-direction:column; gap:26px; }
.sm-menu-col h3{
  margin:0; font:italic 900 clamp(22px,2.4vw,30px)/1.1 var(--sm-display); letter-spacing:-.02em;
}
.sm-menu-body{ display:flex; align-items:flex-start; gap:22px; }
.sm-menu-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; flex:none;
  border:var(--sm-bd) solid var(--sm-ink); border-radius:18px;
}
.sm-menu-ico svg{ width:36px; height:36px; }
.sm-menu-ico[data-pf="twitch"]{ background:#6441a4; color:#fff; }
.sm-menu-ico[data-pf="youtube"]{ background:#fff; color:#e52d27; }
.sm-menu-ico[data-pf="kick"]{ background:#eeffe8; color:#00b801; }
.sm-menu-list{ display:flex; flex-direction:column; gap:10px; }
.sm-menu-link{
  display:inline-flex; align-items:center; gap:8px;
  font:400 clamp(16px,1.5vw,19px)/1.5 var(--sm-ui); color:var(--sm-ink);
  transition:opacity .15s;
}
.sm-menu-link span{ font-weight:700; }
.sm-menu-link:hover{ opacity:.6; }
.sm-menu-link:focus-visible{ outline:2px solid var(--sm-ink); outline-offset:3px; border-radius:3px; }

@media (max-width:860px){
  .sm-menu-cols{ grid-template-columns:1fr; gap:30px; padding:28px 20px 44px; }
  .sm-menu-head{ height:auto; padding:16px 20px; grid-template-columns:auto 1fr; row-gap:12px; }
  .sm-menu-head .sm-word{ grid-row:1; grid-column:1 / -1; justify-self:center; }
  .sm-menu-head > div:first-child{ grid-row:2; grid-column:1; }
  .sm-menu-links{ grid-row:2; grid-column:2; }
  .sm-menu-close, .sm-round{ font-size:15px; padding:9px 16px; }
}
@media (prefers-reduced-motion: reduce){
  .sm-menu{ transition:none; }
  .sm-menu-scrim{ transition:none; }
}


@media (max-width:720px){
  /* the 3-column header cannot hold a centred wordmark at this width, so the
     wordmark takes its own row and the controls sit under it */
  .sm-head-in{ grid-template-columns:auto 1fr; grid-auto-rows:auto; row-gap:12px; }
  .sm-word{ grid-row:1; grid-column:1 / -1; justify-self:center; font-size:26px; }
  .sm-head-left{ grid-row:2; grid-column:1; }
  .sm-head-right{ grid-row:2; grid-column:2; }
}
@media (max-width:560px){
  .sm-word{ font-size:22px; }
  .sm-btn{ padding:8px 12px; font-size:13.5px; min-height:44px; }
  .sm-cart{ padding:8px 10px; }
  .sm-bar-txt{ font-size:13px; }
}