/* ============================================================
   GOATDRIP · v2 "RAW" cut · demo for @goatdrip.wear
   Underground pass: black, loud type, real logos, fewer things.
   ============================================================ */

:root{
  --black:#060607;
  --coal:#0E0E10;
  --bone:#EFEBE2;
  --dim:rgba(239,235,226,.6);
  --line:rgba(239,235,226,.15);
  --yellow:#F5D91C;
  --red:#C03828;
  --fd:'Space Grotesk',system-ui,sans-serif;
  --fm:'Permanent Marker',cursive;
  --gut:clamp(18px,4vw,60px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--black)}
body{
  font:400 16.5px/1.6 var(--fd);
  color:var(--bone);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:var(--black)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

h1,h2,h3{font-weight:700;line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
h1{font-size:clamp(38px,7.4vw,104px)}
h2{font-size:clamp(26px,4.2vw,54px)}
h3{font-size:clamp(18px,2vw,26px)}
.dim{color:var(--dim)}
.mk{font-family:var(--fm);color:var(--yellow);font-size:clamp(14px,1.5vw,18px);transform:rotate(-1.6deg);display:inline-block}

/* grain */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url(../assets/img/grain.png);background-size:96px 96px;
}

/* ---------- header: tag + plain nav ---------- */
.hd{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:20px;
  padding:12px var(--gut);
  background:rgba(6,6,7,.84);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hd__tag{display:flex;align-items:center;gap:12px;margin-right:auto}
.hd__tag img{height:31px;width:auto}
.hd__tag span{font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--dim)}
.hd nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,30px)}
.hd nav a{font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);padding:6px 0}
.hd nav a:hover{color:var(--yellow)}
.hd nav a.is-on{color:var(--yellow)}
.hd nav a.ext{color:var(--dim)}
.hd nav a.ext:hover{color:var(--yellow)}

/* ---------- page drip veil (black panel, yellow drips) ---------- */
.veil{display:none}
.js .veil{
  display:block;position:fixed;inset:-2px 0 auto 0;height:calc(100% + 120px);z-index:200;pointer-events:none;
  background:var(--black);
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.js .veil svg{position:absolute;left:0;right:0;bottom:-88px;width:100%;height:92px}
.js .veil svg path{fill:var(--yellow)}
.js .veil.is-out{transform:translateY(calc(-100% - 130px))}
.js .veil.is-in{transform:translateY(0);transition-duration:.42s}
@media(prefers-reduced-motion:reduce){.js .veil{display:none!important}}

/* ---------- buttons: flat, raw ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:700 14px/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;
  padding:17px 24px;background:var(--yellow);color:var(--black);
  transition:transform .16s ease,background .16s ease;
}
.btn:hover{transform:translate(-2px,-2px);background:#ffe83c}
.btn--line{background:transparent;color:var(--bone);border:1.5px solid var(--bone)}
.btn--line:hover{border-color:var(--yellow);color:var(--yellow);background:transparent}
.btn .ar{transition:transform .16s ease}
.btn:hover .ar{transform:translateX(4px)}
.tlink{font-weight:600;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--yellow);padding-bottom:3px;color:var(--bone)}
.tlink:hover{color:var(--yellow)}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(52px,7vw,104px) var(--gut)}
.sec__head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3.6vw,48px)}
.sec__head .note{margin-left:auto;text-align:right;color:var(--dim);font-size:13.5px;max-width:30ch}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);padding:clamp(34px,4.4vw,64px) var(--gut) 26px}
.ft__logo{height:52px;width:auto;margin-bottom:22px}
.ft__row{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;border-top:1px solid var(--line);padding-top:20px}
.ft__row a{font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.ft__row a:hover{color:var(--yellow)}
.ft__row .fine{margin-left:auto;font-size:12.5px;color:rgba(239,235,226,.42)}

.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--black);padding:10px 16px;font-weight:700;z-index:300}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}