@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root{
  --cyan:#00BDBB;
  --cyan-d:#04918F;
  --cyan-l:#5FDEDC;
  --yellow:#F7DD02;
  --yellow-d:#C9B300;
  --ink:#0E1618;
  --white:#FFFFFF;
  --foam:#E6FAF9;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Barlow Condensed',sans-serif;-webkit-font-smoothing:antialiased}

.asset{position:relative;overflow:hidden;isolation:isolate;margin:0 0 24px 0}

/* ---------- type ---------- */
.disp{font-family:'Bungee',sans-serif;text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
.lab{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.26em}
.body{font-family:'Barlow Condensed',sans-serif;font-weight:500}

/* outlined + extruded display text, matching the logo lettering */
.d3{position:relative;display:inline-block;font-family:'Bungee',sans-serif;
  text-transform:uppercase;line-height:1.02}
.d3 .l{display:block;white-space:nowrap}
.d3 .sh,.d3 .ol{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.d3 .sh{color:var(--ink);-webkit-text-stroke:var(--ow,13px) var(--ink);
  transform:translate(var(--dx,10px),var(--dy,10px))}
.d3 .ol{color:var(--ink);-webkit-text-stroke:var(--ow,13px) var(--ink)}
.d3 .fl{position:relative;color:var(--f,var(--yellow))}

/* ---------- surfaces ---------- */
.keyline{border:7px solid var(--ink)}
.hardshadow{box-shadow:14px 14px 0 var(--ink)}

.btn{display:inline-flex;align-items:center;gap:.6em;font-family:'Bungee',sans-serif;
  text-transform:uppercase;font-size:1em;padding:.56em 1.25em;border:6px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);background:var(--yellow);color:var(--ink);letter-spacing:.02em}
.btn.cy{background:var(--cyan)}
.btn.wh{background:var(--white)}

.tag{display:inline-flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;padding:.42em 1.05em;border:5px solid var(--ink);
  background:var(--white);color:var(--ink);box-shadow:6px 6px 0 var(--ink)}

/* ---------- textures ---------- */
.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle at center, currentColor 30%, transparent 31%);
  background-size:26px 26px;opacity:.16}
.bubbles.sm{background-size:16px 16px}
.bubbles.lg{background-size:40px 40px}
.bubbles.fade-r{-webkit-mask-image:linear-gradient(to right,#000 0%,transparent 65%)}
.bubbles.fade-l{-webkit-mask-image:linear-gradient(to left,#000 0%,transparent 65%)}
.bubbles.fade-t{-webkit-mask-image:linear-gradient(to top,transparent 20%,#000 100%)}
.bubbles.fade-b{-webkit-mask-image:linear-gradient(to bottom,transparent 20%,#000 100%)}

.stripes{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:repeating-linear-gradient(-58deg, currentColor 0 26px, transparent 26px 62px)}

.burst{position:absolute;z-index:0;pointer-events:none}
.burst svg{display:block;width:100%;height:100%}

.bud{filter:drop-shadow(0 24px 22px rgba(6,30,30,.40)) saturate(1.12) contrast(1.07)}

.wavebar{position:absolute;left:0;right:0;z-index:6}
.wavebar svg{display:block;width:100%}