/* ============================================
   KAFI AM FREITAG – styles.css
   Design system matching index.html
   Fonts: DM Serif Display + Space Grotesk
   Palette: #EDEDED / #000 / #E86020
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#EDEDED;
  --ink:#000;
  --o:#E86020;
  --max-width:900px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.6;font-size:1.05rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color 0.2s}

/* --- TYPOGRAPHY --- */
h1{font-family:'DM Serif Display',serif;font-size:clamp(2.8rem,6vw,5rem);line-height:0.92;margin-bottom:0.5rem}
h2{font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,4vw,3rem);line-height:0.95;margin-bottom:0.5rem}
h2 .n,h1 .n{color:var(--o);font-style:italic}
h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.4rem}
p+p{margin-top:0.8rem}

.label{font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--o);margin-bottom:0.5rem;display:block}
.sub{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.2em;opacity:0.5;margin-bottom:1.5rem}
.muted{opacity:0.7;font-size:0.95rem;line-height:1.6}

/* --- NAV (matches index.html exactly) --- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--ink);color:var(--bg);
  padding:0.4rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
nav .logo-img{height:18px;width:auto;filter:brightness(0) invert(1)}
nav ul{list-style:none;display:flex;gap:1.5rem}
nav a{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:rgba(255,255,255,0.75);transition:color 0.2s}
nav a:hover{color:var(--o)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;z-index:101}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--bg);margin:4px 0;transition:all 0.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-drawer{display:none}
@media(max-width:768px){
  nav ul{display:none}.nav-toggle{display:block}
  .nav-drawer{display:block;position:fixed;top:0;right:0;width:100%;height:100vh;background:var(--ink);z-index:99;transform:translateX(100%);transition:transform 0.35s;padding:5rem 2rem}
  .nav-drawer.open{transform:translateX(0)}
  .nav-drawer ul{list-style:none;display:flex;flex-direction:column;gap:1.25rem}
  .nav-drawer a{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;text-transform:uppercase;color:var(--bg)}
  .nav-drawer a:hover{color:var(--o)}
}

/* --- BUTTONS (matches index.html exactly) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;padding:0 1.8rem;transition:all 0.12s;cursor:pointer;min-height:44px;line-height:1;border:none}
.btn.fill{background:var(--o);color:#fff}.btn.fill:hover{background:#fff;color:var(--ink)}
.btn.out{background:transparent;color:var(--ink);border:2px solid var(--ink)}.btn.out:hover{background:var(--ink);color:var(--bg)}
.btn.out-w{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.25)}.btn.out-w:hover{background:var(--o);color:#fff;border-color:var(--o)}
.btn.fill-w{background:var(--bg);color:var(--ink);border:none}.btn.fill-w:hover{background:var(--o);color:#fff}

/* --- HERO --- */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:80vh;align-items:center}
.hero-img{overflow:hidden;height:100%}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-text{padding:clamp(2rem,4vw,4rem)}
.hero-cta{display:flex;gap:0.5rem;margin-top:1.5rem;flex-wrap:wrap}
@media(max-width:768px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-img{max-height:60vh}
  .hero-text{padding:1.5rem}
}

/* --- TWO COLUMN TEXT --- */
.two-col{columns:2;column-gap:2rem}
@media(max-width:768px){.two-col{columns:1}}

/* --- LAYOUT --- */
.sec{padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem);max-width:var(--max-width);margin:0 auto}
.sec-wide{padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem);max-width:none}
.sec-narrow{max-width:720px}
.inner{max-width:var(--max-width);margin:0 auto}

/* --- PAGE HEADER (subpages) --- */
.page-header{
  padding-top:clamp(4.5rem,8vw,6.5rem);
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  padding-left:clamp(1.5rem,4vw,3rem);
  padding-right:clamp(1.5rem,4vw,3rem);
  max-width:var(--max-width);
  margin:0 auto;
}
.page-header h1{margin-bottom:0.3rem}
.page-header p{opacity:0.65;max-width:500px;font-size:0.95rem;line-height:1.5}

/* --- DIVIDERS --- */
.div-thick{border:none;border-top:2px solid var(--ink);max-width:var(--max-width);margin:0 auto}
.div-thin{border:none;border-top:1px solid rgba(0,0,0,0.08);max-width:var(--max-width);margin:0 auto}

/* --- HERO --- */
.hero{padding:clamp(5rem,10vw,8rem) 1.5rem clamp(2rem,4vw,3rem)}
.hero-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:center}
.hero-text h1{font-size:clamp(2.5rem,5vw,4rem)}
.hero-img img{width:100%;height:auto;display:block}
@media(max-width:768px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-img{order:-1;max-width:320px;margin:0 auto}
  .hero-text div{justify-content:center}
}

/* --- TICKER --- */
.ticker{background:var(--o);color:#fff;padding:0.45rem 0;overflow:hidden;white-space:nowrap;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.ticker.blk{background:var(--ink)}
.ticker-inner{display:inline-block;animation:m 22s linear infinite;font-family:'Space Grotesk',sans-serif;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em}
@keyframes m{to{transform:translateX(-50%)}}

/* --- SHOWS TABLE --- */
.shows{width:100%}
.show{display:grid;grid-template-columns:80px 1fr auto;gap:2rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid rgba(0,0,0,0.08)}
.show:first-child{border-top:2px solid var(--ink)}
.show:last-child{border-bottom:2px solid var(--ink)}
.show .d{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.1rem,1.8vw,1.5rem)}
.show .v{font-weight:700;font-size:0.9rem}
.show .c{opacity:0.4;font-size:0.8rem;margin-top:0.2rem}
.show .t{align-self:center}
.show .t a{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--o);padding:0 0.6rem;border:1.5px solid var(--o);transition:all 0.12s;display:inline-flex;align-items:center;justify-content:center;min-height:36px;line-height:1}
.show .t a:hover{background:var(--o);color:#fff}
.show .t .sold{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;opacity:0.6;text-decoration:line-through;color:var(--o)}

/* --- ABOUT --- */
.about-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem)}
.about-person h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;text-transform:uppercase;margin-bottom:0.1rem}
.about-person .role{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.2em;opacity:0.5;margin-bottom:0.6rem}
.about-person p{font-size:0.95rem;opacity:0.7;line-height:1.55;margin-bottom:0.6rem}
.about-person .link{font-size:0.55rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--o)}.about-person .link:hover{opacity:0.5}
.about-person:first-child{padding-left:clamp(0.75rem,1.5vw,1.25rem);border-left:3px solid var(--o)}
@media(max-width:600px){.about-row{grid-template-columns:1fr}}

/* --- CONTENT GRID (image + text side by side) --- */
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:start}
.content-grid.rev{direction:rtl}.content-grid.rev>*{direction:ltr}
.content-img{overflow:hidden;aspect-ratio:4/5}
.content-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){
  .content-grid,.content-grid.rev{grid-template-columns:1fr;direction:ltr}
  .content-img{aspect-ratio:16/10;max-height:320px}
}

/* --- QUOTE (black bg) --- */
.quote{background:var(--ink);padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem)}
.quote p{font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.45;opacity:0.55;font-style:italic;max-width:700px;margin:0 auto;color:var(--bg)}
.quote strong{opacity:1;color:var(--o);font-style:normal;font-weight:700}

/* --- NEWSLETTER (matches index.html) --- */
.nl{background:var(--ink);color:var(--bg);padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem)}
.nl-inner{max-width:460px;margin:0 auto}
.nl-inner h2{font-family:'DM Serif Display',serif;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--o);margin-bottom:0.3rem}
.nl-inner p{opacity:0.55;font-size:0.95rem;margin-bottom:1.2rem}
.nl-form{display:flex;gap:0.4rem;flex-wrap:wrap}
.nl-form input{font-family:'Space Grotesk',sans-serif;font-size:0.8rem;background:rgba(255,255,255,0.04);border:2px solid rgba(255,255,255,0.06);padding:0.65rem 0.8rem;color:var(--bg);flex:1;min-width:120px;min-height:44px}
.nl-form input::placeholder{color:rgba(255,255,255,0.12);text-transform:uppercase;font-size:0.7rem;letter-spacing:0.1em}
.nl-form input:focus{outline:none;border-color:var(--o)}
@media(max-width:500px){.nl-form{flex-direction:column}.nl-form input,.nl-form .btn{width:100%;text-align:center}}

/* --- INSTAGRAM BAR --- */
.insta{border-top:2px solid var(--ink);padding:0.6rem 1.5rem;text-align:center;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em}
.insta a{color:var(--o)}.insta a:hover{opacity:0.5}

/* --- FOOTER (matches index.html) --- */
footer{background:var(--ink);color:var(--bg);padding:1.5rem;text-align:center;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em}
footer a{color:var(--o)}
.fl{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:0.5rem}
.fl a{color:rgba(255,255,255,0.15)}.fl a:hover{color:var(--bg)}

/* --- FORMS --- */
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.35rem;opacity:0.5}
.form-group input,.form-group textarea,.form-group select{
  width:100%;font-family:'Space Grotesk',sans-serif;font-size:0.85rem;
  padding:0.7rem 0.8rem;border:2px solid rgba(0,0,0,0.08);background:#fff;color:var(--ink);
  transition:border-color 0.2s;min-height:44px;
}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--o)}
.form-group textarea{resize:vertical;min-height:140px}
.form-container{max-width:560px}

/* --- QUESTION PAGE LAYOUT --- */
.question-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:start}
.question-info{padding-top:0.5rem}
.char-count{display:block;text-align:right;font-size:0.7rem;opacity:0.4;margin-top:0.3rem;font-variant-numeric:tabular-nums}
@media(max-width:768px){.question-layout{grid-template-columns:1fr}}

/* --- SPONSORING --- */
.spon-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);margin-top:1.5rem}
.spon-card{border-left:3px solid var(--o);padding-left:clamp(1rem,2vw,1.5rem)}
.spon-card h3{margin-bottom:0.3rem}
.spon-card p{font-size:0.95rem;opacity:0.7;line-height:1.6;margin-bottom:0.6rem}
.spon-card p strong{opacity:1}
@media(max-width:768px){.spon-grid{grid-template-columns:1fr}}

/* --- STATS --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0;padding:1.5rem 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.stat{text-align:center}
.stat-num{font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1;color:var(--o);display:block}
.stat-lbl{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.15em;opacity:0.4;margin-top:0.2rem}
@media(max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}

/* --- PARTNER LOGO GRID --- */
.partner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1.5rem;
  margin-top:2rem;
  align-items:center;
}
.partner-item{
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  opacity:0.65;transition:opacity 0.2s;
}
.partner-item:hover{opacity:1}
.partner-item img{height:clamp(28px,4vw,40px);width:auto;max-width:100%;object-fit:contain;filter:grayscale(100%);transition:filter 0.2s}
.partner-item:hover img{filter:grayscale(0%)}
.partner-item span{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;opacity:0.7}

/* --- REEL LINKS --- */
.reel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;
}
.reel-link{
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem 1rem;
  border:2px solid rgba(0,0,0,0.08);
  font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--o);transition:all 0.15s;text-align:center;
}
.reel-link:hover{background:var(--o);color:#fff;border-color:var(--o)}
@media(max-width:600px){.reel-grid{grid-template-columns:1fr}}

/* --- GALLERY --- */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:1rem}
.gallery-item{overflow:hidden;margin:0}
.gallery-item img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform 0.4s}
.gallery-item:hover img{transform:scale(1.03)}
.gallery-wide{grid-column:span 2}
.gallery-wide img{aspect-ratio:2.5/1;object-fit:cover}
.gallery-item:not(.gallery-wide) img{aspect-ratio:3/4;object-fit:cover;object-position:center 20%}
@media(max-width:600px){.gallery{grid-template-columns:1fr 1fr;gap:0.3rem}.gallery-wide{grid-column:span 2}.gallery-wide img{aspect-ratio:16/9}.gallery-item:not(.gallery-wide) img{aspect-ratio:1/1}}

/* --- STICKY CTA (matches index.html) --- */
.sticky-cta{display:none}
@media(max-width:768px){
  .sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;border-top:2px solid var(--ink);gap:0}
  .sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;padding:0.55rem 0.5rem;min-height:44px}
  .sticky-cta .s1{background:var(--o);color:#fff}
  .sticky-cta .s2{background:var(--ink);color:var(--bg)}
  body{padding-bottom:2.8rem}
}

/* --- VOTE TAG --- */
.vote-tag{
  position:fixed;top:clamp(3rem,5vw,4rem);left:clamp(0.5rem,1.5vw,1rem);z-index:95;
  display:block;width:fit-content;filter:drop-shadow(2px 4px 8px rgba(0,0,0,0.35));transition:transform 0.2s;
}
.vote-tag:hover{transform:scale(1.05)}
.vote-tag-img{width:clamp(208px,22vw,312px);height:auto}
@media(max-width:768px){.vote-tag{position:absolute;top:3.5rem;left:0.4rem;z-index:10}.vote-tag-img{width:140px}}

/* --- FADE IN --- */
@media(prefers-reduced-motion:no-preference){.fi{opacity:0;transform:translateY(10px);transition:opacity 0.4s,transform 0.4s}.fi.visible{opacity:1;transform:none}}