/*
Theme Name: OATHCUT Onepager
Theme URI: https://oathcut.com
Author: OATHCUT
Description: Minimal one-page WordPress theme for OATHCUT.
Version: 2.3.0
Text Domain: oathcut-onepager
*/

:root {
  --bg: #050505;
  --panel: rgba(7,7,7,.72);
  --panel-strong: rgba(8,8,8,.86);
  --text: #e8e8e5;
  --muted: #a4a4a0;
  --line: rgba(255,255,255,.16);
  --line-strong: rgba(255,255,255,.22);
  --max: 1480px;
  --pad: clamp(18px, 4vw, 72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#050505;
  color:var(--text);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.screen-reader-text{position:absolute;left:-9999px}

.site-shell{
  position:relative;
  min-height:100svh;
  isolation:isolate;
  overflow:hidden;
  background:#050505;
}
.site-shell::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:.09;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.page-background{
  position:absolute;
  inset:0;
  z-index:-4;
  overflow:hidden;
  background:#050505;
}
.page-background img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  filter:brightness(.52) contrast(1.07) saturate(.62);
  transform:scale(1.015);
}
.page-background::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(5,5,5,.90) 0%, rgba(5,5,5,.76) 18%, rgba(5,5,5,.34) 45%, rgba(5,5,5,.18) 67%, rgba(5,5,5,.48) 100%),
    linear-gradient(180deg, rgba(5,5,5,.40) 0%, rgba(5,5,5,.05) 22%, rgba(5,5,5,.08) 72%, rgba(5,5,5,.62) 100%);
}
.page-background::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.045), transparent 25%),
    radial-gradient(circle at 15% 70%, rgba(255,255,255,.028), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 110px, rgba(255,255,255,.014) 110px 111px),
    repeating-linear-gradient(0deg, transparent 0 110px, rgba(255,255,255,.01) 110px 111px);
}
.page-wrap{
  position:relative;
  width:min(100%, var(--max));
  margin:0 auto;
  min-height:100svh;
  padding:24px var(--pad) 22px;
  display:flex;
  flex-direction:column;
}
.hero{
  position:relative;
  min-height:clamp(420px, 56svh, 580px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-copy{
  position:relative;
  z-index:4;
  width:min(82vw, 760px);
  padding-top:18px;
  display:flex;
  justify-content:center;
}

.hero-logo{
  display:block;
  width:min(100%, 720px);
  height:auto;
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.52));
}

.release-section{
  position:relative;
  z-index:5;
  margin:-38px auto 0;
  width:min(780px, 82vw);
}

.eyebrow{
  margin:0 0 14px;
  color:#b3b3af;
  font-family:"Arial Narrow","Helvetica Neue",sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
.track-card{
  display:grid;
  grid-template-columns:152px minmax(0,1fr);
  min-height:186px;
  border:1px solid var(--line-strong);
  background:linear-gradient(100deg, rgba(11,11,11,.88), rgba(11,11,11,.68));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.track-art,
.track-art-placeholder{
  width:100%;
  height:100%;
  min-height:184px;
  object-fit:cover;
}
.track-art-placeholder{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 39%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(180deg, #242424 0%, #0c0c0c 56%, #050505 100%);
}
.track-art-placeholder::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:22%;
  width:31px;
  height:88px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#111,#2b2b2b 45%,#090909);
  clip-path:polygon(50% 0, 100% 18%, 90% 100%, 10% 100%, 0 18%);
  box-shadow:0 0 25px rgba(255,255,255,.1);
}
.track-art-placeholder::after{
  content:"FORSWORN";
  position:absolute;
  left:15px;
  right:15px;
  bottom:13px;
  text-align:center;
  color:#aaa;
  font-family:"Arial Narrow",sans-serif;
  font-size:9px;
  letter-spacing:.22em;
}
.track-main{
  padding:28px 26px 22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr;
  gap:18px 24px;
  align-items:center;
}
.track-meta{align-self:start}
.track-title{
  margin:0 0 6px;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size:clamp(28px, 2.4vw, 42px);
  letter-spacing:.035em;
  font-weight:900;
  text-transform:uppercase;
}
.track-artist{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:12px;
  font-weight:700;
}
.player-row{
  grid-column:1/2;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:14px;
  align-items:center;
  min-width:0;
  color:#a7a7a4;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
}
.play-button{width:18px;height:18px;display:grid;place-items:center;border:0;padding:0;color:#d6d6d2;background:transparent;cursor:not-allowed;opacity:.9}
.play-button svg{width:15px;height:15px;fill:currentColor}
.progress{height:2px;background:rgba(255,255,255,.16);overflow:hidden}
.progress>span{display:block;width:0%;height:100%;background:#d8d8d5}
.listen-btn{
  grid-row:1/3;
  grid-column:2/3;
  min-width:190px;
  height:54px;
  border:1px solid var(--line-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  font-weight:800;
  transition:.2s ease;
}
a.listen-btn:hover{background:#e5e5e2;color:#070707}
.listen-btn.disabled{color:#777;border-color:rgba(255,255,255,.12);cursor:default}
.social-footer{
  position:relative;
  z-index:5;
  width:min(960px, 88vw);
  margin:28px auto 0;
  border-top:1px solid rgba(255,255,255,.24);
  padding-top:22px;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:14px;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:42px;
  color:#c5c5c2;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:700;
  opacity:.83;
  transition:opacity .2s ease, transform .2s ease;
}
.social-link:hover{opacity:1;transform:translateY(-1px)}
.social-link.disabled{opacity:.32;pointer-events:none}
.social-icon{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto}
.social-icon svg{width:22px;height:22px;fill:currentColor;stroke:currentColor}

@media (max-width: 1180px){
  .hero{min-height:clamp(550px,66svh,620px)}
  .hero-copy{width:min(50vw,550px);padding-top:86px}
@media (max-width: 980px){
  .page-wrap{padding-top:20px}
  .hero{min-height:600px}
  .hero-copy{width:67vw;padding-top:72px}
@media (max-width: 700px){
  .site-shell{min-height:100svh}
  .page-background img{object-position:70% center;transform:scale(1.03)}
  .page-background::before{
    background:
      linear-gradient(180deg, rgba(5,5,5,.34) 0%, rgba(5,5,5,.04) 24%, rgba(5,5,5,.12) 68%, rgba(5,5,5,.70) 100%),
      linear-gradient(90deg, rgba(5,5,5,.58) 0%, rgba(5,5,5,.20) 46%, rgba(5,5,5,.24) 100%);
  }
  .page-wrap{padding:16px 16px 18px}
  .hero{min-height:520px}
  .hero-copy{position:absolute;top:22px;left:0;width:min(74vw,360px);padding-top:0;z-index:4}
  .hero-logo{width:min(70vw,320px)}
@media (max-width: 430px){
  .hero{min-height:490px}