/*
Theme Name: FABLETAPE Onepager
Theme URI: https://fabletape.com
Author: FABLETAPE
Description: Warm lo-fi one-page WordPress theme for FABLETAPE.
Version: 2.6.0
Text Domain: fabletape-onepager
*/

:root{
  --bg:#f3ebdf;
  --bg-2:#edd7bd;
  --panel:rgba(255,248,238,.68);
  --panel-strong:rgba(255,250,243,.82);
  --text:#3c3027;
  --muted:#7d6550;
  --accent:#d4814b;
  --accent-2:#ba6d3b;
  --line:rgba(97,70,46,.14);
  --max:1440px;
  --pad:clamp(18px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:Inter, "Helvetica Neue", Arial, sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;display:block}
.screen-reader-text{position:absolute;left:-9999px}

.site-shell{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 10% 82%, rgba(226,163,111,.16), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(219,170,121,.18), transparent 22%),
    linear-gradient(180deg, #f7f0e5 0%, #f2e7d7 58%, #eedfcb 100%);
}
.site-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:.13;
  mix-blend-mode:multiply;
  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='.65'/%3E%3C/svg%3E");
}
.site-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 14% 76%, rgba(232,177,118,.24), transparent 14%),
    radial-gradient(circle at 84% 25%, rgba(219,157,100,.15), transparent 19%),
    linear-gradient(120deg, rgba(255,255,255,.6), transparent 42%);
}
.page-wrap{
  position:relative;
  width:min(100%, var(--max));
  margin:0 auto;
  min-height:100svh;
  padding:max(20px, env(safe-area-inset-top)) var(--pad) max(24px, env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:2;
}
.site-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:10px 0 22px;
  position:relative;
  z-index:4;
}
.brand{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  font-size:clamp(18px,1.4vw,28px);
  letter-spacing:.34em;
  text-transform:uppercase;
  white-space:nowrap;
}
.brand img{
  display:block;
  width:var(--header-logo-width, 220px);
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
}
.header-nav{
  display:none;
  align-items:center;
  gap:clamp(18px,2vw,42px);
  font-size:13px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}
.header-nav a{transition:color .2s ease}
.header-nav a:hover{color:var(--accent-2)}
.hero{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  min-height:0;
  position:relative;
}

.hero-copy{
  position:relative;
  z-index:3;
  width:min(62%, 720px);
  padding:28px 0 34px;
}
.title{
  margin:0;
  font-size:clamp(84px,10vw,170px);
  line-height:.92;
  letter-spacing:-.04em;
  font-weight:900;
  text-transform:uppercase;
  color:#3d2f26;
}
.tagline{
  margin:14px 0 26px;
  font-size:clamp(24px,2.2vw,44px);
  line-height:1.08;
  color:var(--accent);
  font-weight:500;
}
.divider{
  width:160px;
  height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  margin:0 0 26px;
}
.track-card{
  width:min(100%, 640px);
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  align-items:center;
  gap:22px;
  padding:22px;
  border:1px solid rgba(121,88,58,.13);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,251,245,.9), rgba(252,247,240,.75));
  box-shadow:0 20px 55px rgba(123,84,49,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.track-art-cell{
  display:flex;
  align-items:center;
  justify-content:center;
}
.track-art-frame,
.track-art-placeholder{
  width:190px;
  height:190px;
  flex:0 0 190px;
  border-radius:18px;
  overflow:hidden;
  background:#eadcc8;
  box-shadow:inset 0 0 0 1px rgba(79,58,39,.06);
}
.track-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.track-art-placeholder{
  position:relative;
  background:
    radial-gradient(circle at 50% 58%, rgba(206,114,61,.55) 0 18%, transparent 19%),
    linear-gradient(180deg, #e6d4bf 0%, #d9c2a6 100%);
}
.track-art-placeholder::before{
  content:"";
  position:absolute;
  inset:48% 0 0;
  background:linear-gradient(180deg, #7f6a56 0%, #5f4f43 100%);
  clip-path:polygon(0 100%, 20% 64%, 38% 76%, 54% 54%, 72% 72%, 100% 42%, 100% 100%);
}
.track-art-placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 25%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 29% 19%, rgba(255,255,255,.3) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.25) 0 1.5px, transparent 2.5px);
}
.track-right{display:flex;flex-direction:column;justify-content:center;min-width:0}
.eyebrow{
  margin:0 0 10px;
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.22em;
}
.track-title{
  margin:0;
  font-size:clamp(34px,3vw,52px);
  line-height:1;
  font-weight:800;
}
.track-artist{
  margin-top:8px;
  color:var(--accent);
  font-size:clamp(20px,1.8vw,30px);
}
.wave{
  margin:18px 0 12px;
  height:26px;
  border-radius:999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(188,131,84,.9) 10px 12px, transparent 12px 16px),
    linear-gradient(180deg, transparent 40%, rgba(202,140,88,.18) 40% 60%, transparent 60%);
  opacity:.88;
}
.player-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.track-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(188,115,63,.16);
  background:rgba(255,248,241,.74);
  color:#8a6d57;
  font-weight:600;
}
.listen-btn{
  margin-top:18px;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:170px;
  height:54px;
  padding:0 22px;
  border-radius:14px;
  border:1px solid rgba(188,115,63,.16);
  background:linear-gradient(180deg, #d88b54, #cb7945);
  color:#fff9f2;
  font-size:14px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:0 15px 25px rgba(196,120,71,.22);
}

.hero-background-layer{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-background-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:67% 50%;
  opacity:1;
  mix-blend-mode:multiply;
  filter:contrast(1.02) brightness(.98) saturate(.88);
}

.social-footer{
  position:relative;
  z-index:4;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(121,88,58,.14);
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:14px;
}
.social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  min-height:46px;
  color:var(--muted);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.18em;
  text-align:center;
}
.social-link:hover{color:var(--accent-2)}
.social-link.disabled{opacity:.4;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}
.site-credit{
  padding:14px 0 6px;
  text-align:center;
  color:#9c816b;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

@media (max-width: 1100px){
  .hero-copy{width:min(68%,680px);padding-top:18px}
  .track-card{width:min(100%,680px)}
}

@media (max-width: 860px){
  .site-header{flex-direction:column;align-items:flex-start;padding-bottom:16px}
  .hero-copy{width:100%}
  .title{font-size:clamp(64px,15vw,112px)}
  .tagline{font-size:clamp(20px,5vw,34px)}
  .track-card{grid-template-columns:170px minmax(0,1fr);gap:18px;padding:18px;border-radius:22px}
  .social-footer{grid-template-columns:repeat(3,minmax(0,1fr))}
}


@media (max-width: 620px){
  /* Mobile gets its own composition. Desktop remains untouched. */
  .site-shell{
    min-height:100dvh;
    overflow:hidden;
  }

  /* On mobile the hero is a true full-page background.
     It follows the complete page height instead of a dedicated hero box,
     so there is no exposed cream strip above/below it when content is taller
     than the visual viewport. */
  .hero-background-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
  }

  .hero-background-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:64% 50%;
    transform:none;
    opacity:.96;
  }

  .page-wrap{
    width:100%;
    min-height:100svh;
    padding:max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  }

  .site-header{
    padding:6px 0 20px;
  }

  .brand{
    font-size:16px;
    letter-spacing:.26em;
  }

  .brand img{
    width:min(var(--header-logo-width,220px), 72vw);
    height:auto;
    max-width:none;
    max-height:none;
  }

  .hero{
    align-items:flex-start;
    flex:0 0 auto;
  }

  .hero-copy{
    width:100%;
    padding:22px 0 18px;
  }

  .title{
    font-size:clamp(54px, 18.4vw, 76px);
    line-height:.9;
    letter-spacing:-.055em;
    max-width:100%;
    overflow-wrap:normal;
    white-space:nowrap;
  }

  .tagline{
    margin:16px 0 22px;
    font-size:clamp(20px, 6.2vw, 28px);
    line-height:1.05;
    max-width:92%;
  }

  .divider{
    width:96px;
    margin-bottom:22px;
  }

  .track-card{
    width:100%;
    grid-template-columns:108px minmax(0,1fr);
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:22px;
    background:rgba(255,250,243,.90);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .track-art-cell{
    align-self:start;
  }

  .track-art-frame,
  .track-art-placeholder{
    width:108px;
    height:108px;
    flex:0 0 108px;
    aspect-ratio:1/1;
    border-radius:14px;
  }

  .track-right{
    padding:0;
    min-width:0;
  }

  .eyebrow{
    margin-bottom:6px;
    font-size:10px;
    letter-spacing:.18em;
  }

  .track-title{
    font-size:clamp(28px, 8.8vw, 36px);
    line-height:.95;
  }

  .track-artist{
    margin-top:5px;
    font-size:clamp(16px, 5vw, 20px);
  }

  .wave{
    height:16px;
    margin:11px 0 9px;
    background:
      repeating-linear-gradient(90deg, transparent 0 7px, rgba(188,131,84,.9) 7px 9px, transparent 9px 12px),
      linear-gradient(180deg, transparent 42%, rgba(202,140,88,.18) 42% 58%, transparent 58%);
  }

  .player-row{
    gap:6px;
    font-size:8px;
    letter-spacing:.10em;
  }

  .track-chip{
    min-height:22px;
    padding:0 7px;
    font-size:8px;
  }

  .listen-btn{
    width:min(100%, 170px);
    min-width:0;
    height:42px;
    margin-top:11px;
    padding:0 16px;
    border-radius:11px;
    font-size:11px;
    align-self:center;
  }

  .social-footer{
    margin-top:22px;
    padding-top:16px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px 8px;
  }

  .social-link{
    justify-content:flex-start;
    min-height:34px;
    font-size:9px;
    letter-spacing:.09em;
    gap:4px;
  }

  .social-icon{
    width:20px;
    height:20px;
  }

  .social-icon svg{
    width:18px;
    height:18px;
  }

  .site-credit{
    padding-top:8px;
    font-size:8px;
    letter-spacing:.10em;
  }
}

@media (max-width: 390px){
  .hero-background-image{
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:64% 50%;
    transform:none;
  }

  .title{
    font-size:clamp(50px, 18vw, 68px);
  }

  .tagline{
    font-size:clamp(19px, 5.8vw, 24px);
  }

  .track-card{
    grid-template-columns:96px minmax(0,1fr);
    gap:12px;
    padding:12px;
  }

  .track-art-frame,
  .track-art-placeholder{
    width:96px;
    height:96px;
    flex-basis:96px;
  }

  .track-title{
    font-size:27px;
  }

  .track-chip{
    padding:0 6px;
  }
}