/* =========================================================
   GABRIEL EUBANK — vintage / 80s indie-rock print system
   Tokens → base → layout → componentes
   ========================================================= */

:root{
  /* --- tinta --- */
  --ink:        #14110F;   /* preto quente, base */
  --ink-2:      #1D1815;
  --ink-3:      #2B2320;
  --paper:      #EDE4D3;   /* osso / papel envelhecido */
  --paper-2:    #E1D5BE;
  --paper-3:    #D2C3A7;

  /* --- acentos --- */
  --flame:      #DE522A;   /* laranja queimado, cor de assinatura */
  --flame-dk:   #B93D19;
  --amber:      #E9A93C;
  --oxblood:    #7B2A22;
  --teal:       #2F6360;

  /* --- semânticos (tema escuro por padrão) --- */
  --bg:         var(--ink);
  --bg-soft:    var(--ink-2);
  --fg:         var(--paper);
  --fg-soft:    #A79C8B;
  --fg-faint:   #6C6357;
  --accent:     var(--flame);
  --line:       rgba(237,228,211,.16);
  --line-soft:  rgba(237,228,211,.08);

  /* --- tipografia --- */
  --f-display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --f-body:    'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-mono:    'Space Mono', 'Courier New', monospace;

  /* --- métrica --- */
  --wrap: 1200px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --gap: clamp(1.5rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 12vw, 9rem);
  --r: 2px;                       /* cantos quase retos: papel, não app */
  --ease: cubic-bezier(.2,.65,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:clamp(1rem, .96rem + .3vw, 1.125rem);
  line-height:1.65;
  font-optical-sizing:auto;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
b,strong{ font-weight:600; }

::selection{ background:var(--flame); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:var(--r);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--flame); color:#fff; padding:.75rem 1.25rem;
  font-family:var(--f-mono); font-size:.8rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------- grão de filme sobre tudo ---------- */
.grain{
  position:fixed; inset:-50%;
  z-index:99; pointer-events:none;
  opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0) }
  33%{ transform:translate(-2%,1%) }
  66%{ transform:translate(1%,-2%) }
  100%{ transform:translate(0,0) }
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; opacity:.22; } }

/* =========================================================
   TIPOGRAFIA DE CARTAZ
   ========================================================= */
.kicker{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-soft);
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.4rem;
}
.kicker b{ color:var(--accent); font-weight:700; }
.kicker .rule{
  display:block; width:clamp(2rem,6vw,4rem); height:1px;
  background:currentColor; opacity:.4;
}
.kicker--hero .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--flame);
  box-shadow:0 0 0 0 rgba(222,82,42,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(222,82,42,0) }
  100%{ box-shadow:0 0 0 0 rgba(222,82,42,0) }
}
.kicker .sep{ opacity:.4; }

.sec__title{
  font-family:var(--f-display);
  font-size:clamp(2.9rem, 10.5vw, 6.5rem);
  line-height:.87;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
}
.sec__title em{
  font-style:normal;
  color:var(--accent);
  -webkit-text-stroke:0;
}
.sec__sub{
  margin:1.6rem 0 0;
  max-width:46ch;
  color:var(--fg-soft);
  font-size:1.075rem;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  --btn-fg:var(--fg);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--f-mono);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  padding:.95rem 1.5rem;
  border:1px solid currentColor;
  border-radius:var(--r);
  color:var(--btn-fg);
  position:relative;
  transition:transform .18s var(--ease), background-color .18s, color .18s, box-shadow .18s;
}
.btn--solid{
  background:var(--flame);
  border-color:var(--flame);
  color:#FFF6EC;
  box-shadow:4px 4px 0 0 var(--oxblood);
}
.btn--solid:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--oxblood); }
.btn--solid:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--oxblood); }
.btn--ghost:hover{ background:var(--fg); color:var(--bg); }
.btn--lg{ padding:1.15rem 1.9rem; font-size:.85rem; }
@media (prefers-reduced-motion:reduce){ .btn{ transition:none } .btn:hover{ transform:none } }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background-color .3s var(--ease), backdrop-filter .3s;
}
.hdr.is-stuck{
  background:rgba(20,17,15,.86);
  backdrop-filter:blur(10px) saturate(1.2);
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.hdr__rule{
  height:1px; background:var(--line-soft);
  opacity:0; transition:opacity .3s;
}
.hdr.is-stuck .hdr__rule{ opacity:1; }

.hdr__brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none; color:var(--paper);
}
.hdr__mark{
  font-family:var(--f-display);
  font-size:.95rem; letter-spacing:.04em;
  display:grid; place-items:center;
  width:2.1rem; height:2.1rem;
  background:var(--flame); color:#FFF6EC;
  border-radius:var(--r);
  transform:rotate(-3deg);
}
.hdr__name{
  font-family:var(--f-mono);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
}

.nav__list{ display:flex; align-items:center; gap:.25rem; }
.nav__list a{
  display:block; text-decoration:none;
  font-family:var(--f-mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-soft);
  padding:.55rem .7rem;
  border-radius:var(--r);
  transition:color .2s;
  position:relative;
}
.nav__list a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.3rem;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__list a:hover{ color:var(--paper); }
.nav__list a:hover::after,
.nav__list a.is-active::after{ transform:scaleX(1); }
.nav__list a.is-active{ color:var(--paper); }
.nav__cta{
  color:var(--paper) !important;
  border:1px solid var(--line);
  margin-left:.5rem;
}
.nav__cta:hover{ background:var(--flame); border-color:var(--flame); color:#FFF6EC !important; }
.nav__cta::after{ display:none; }

.burger{
  display:none;
  width:2.75rem; height:2.75rem;
  background:none; border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:18px; height:1.5px; background:var(--paper);
  transition:transform .28s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---- navegação mobile ---- */
@media (max-width:940px){
  .burger{ display:flex; position:relative; z-index:85; }
  .hdr__brand{ position:relative; z-index:85; }
  .nav{
    position:fixed; inset:0;
    background:var(--ink);
    display:grid; place-items:center;
    opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), visibility .3s;
    z-index:80;
  }
  .nav::before{
    content:""; position:absolute; inset:0;
    background:
      repeating-linear-gradient(0deg, rgba(237,228,211,.035) 0 1px, transparent 1px 4px);
    pointer-events:none;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  .nav__list{
    flex-direction:column; gap:.25rem; text-align:center;
  }
  .nav__list a{
    font-family:var(--f-display);
    font-size:clamp(1.9rem,8vw,2.6rem);
    letter-spacing:.01em;
    color:var(--paper);
    padding:.35rem 1rem;
  }
  .nav__list a::after{ left:1rem; right:1rem; bottom:.5rem; height:2px; }
  .nav__cta{ border:none; margin:1rem 0 0; color:var(--flame) !important; }
  .hdr__name{ display:none; }
  body.is-locked{ overflow:hidden; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:7rem;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 85% at 80% 0%, rgba(222,82,42,.20), transparent 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(47,99,96,.20), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 65%);
}
.hero__bg::after{
  /* meio-tom de impressão */
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(237,228,211,.13) 1px, transparent 1px);
  background-size:5px 5px;
  mask-image:radial-gradient(120% 80% at 75% 10%, #000 0%, transparent 62%);
  -webkit-mask-image:radial-gradient(120% 80% at 75% 10%, #000 0%, transparent 62%);
  opacity:.5;
}
.hero__in{
  position:relative; z-index:1;
  padding-block:0 clamp(2rem,7vw,4.5rem);
}

.hero__title{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.82;
  letter-spacing:-.01em;
  font-size:clamp(4rem, 21vw, 15.5rem);
  margin:0 0 1.4rem;
  display:flex; flex-direction:column;
}
.hero__l1{ color:var(--paper); }
.hero__l2{
  color:transparent;
  -webkit-text-stroke:clamp(1px,.28vw,2.5px) var(--flame);
  margin-left:.055em;
}
@supports not (-webkit-text-stroke: 1px red){
  .hero__l2{ color:var(--flame); }
}

.hero__roles{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .8rem;
  font-family:var(--f-mono);
  font-size:clamp(.68rem,2.2vw,.82rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper);
  margin:0 0 1.6rem;
}
.hero__roles i{ color:var(--flame); font-style:normal; font-size:.7em; }

.hero__lede{
  max-width:44ch;
  color:var(--fg-soft);
  font-size:clamp(1.02rem,2.6vw,1.2rem);
  margin:0 0 2.2rem;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* medidor VU decorativo */
.vu{
  display:flex; align-items:flex-end; gap:4px;
  height:34px; margin-top:2.6rem;
}
.vu span{
  width:4px; background:var(--flame); opacity:.75;
  animation:vu 1.1s ease-in-out infinite alternate;
  transform-origin:bottom;
}
.vu span:nth-child(3n){ background:var(--amber); }
.vu span:nth-child(4n){ background:var(--teal); }
.vu span:nth-child(1){ height:40%; animation-delay:-.1s }
.vu span:nth-child(2){ height:75%; animation-delay:-.5s }
.vu span:nth-child(3){ height:30%; animation-delay:-.9s }
.vu span:nth-child(4){ height:95%; animation-delay:-.3s }
.vu span:nth-child(5){ height:55%; animation-delay:-.7s }
.vu span:nth-child(6){ height:80%; animation-delay:-.2s }
.vu span:nth-child(7){ height:35%; animation-delay:-.6s }
.vu span:nth-child(8){ height:65%; animation-delay:-1s }
.vu span:nth-child(9){ height:90%; animation-delay:-.4s }
.vu span:nth-child(10){ height:45%; animation-delay:-.8s }
.vu span:nth-child(11){ height:70%; animation-delay:-.15s }
.vu span:nth-child(12){ height:25%; animation-delay:-.55s }
.vu span:nth-child(13){ height:85%; animation-delay:-.95s }
.vu span:nth-child(14){ height:50%; animation-delay:-.35s }
.vu span:nth-child(15){ height:60%; animation-delay:-.75s }
@keyframes vu{ from{ transform:scaleY(.35) } to{ transform:scaleY(1) } }
@media (prefers-reduced-motion:reduce){ .vu span{ animation:none } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  position:relative; z-index:1;
  border-block:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
  padding:.85rem 0;
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 55s linear infinite;
}
.marquee__set{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(1.15rem,3.4vw,1.9rem);
  letter-spacing:.02em;
  color:var(--fg-faint);
  white-space:nowrap;
  padding-right:1.5rem;
}
@keyframes slide{ to{ transform:translateX(-50%) } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none } }

/* =========================================================
   SEÇÕES / TEMAS
   ========================================================= */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec__hd{ margin-bottom:clamp(2.5rem,7vw,4.5rem); }

/* página "papel" — inversão tipo zine */
.sec--paper{
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-soft:#5C5346;
  --fg-faint:#8A7F6E;
  --line:rgba(20,17,15,.16);
  --line-soft:rgba(20,17,15,.09);
  background:var(--paper);
  color:var(--ink);
}
.sec--paper::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(20,17,15,.16) .9px, transparent .9px);
  background-size:6px 6px;
  opacity:.22;
}
.sec--paper > *{ position:relative; z-index:1; }

.sec--dark{ background:var(--ink-2); }

/* =========================================================
   STATS
   ========================================================= */
.stats{
  background:var(--ink);
  border-bottom:1px solid var(--line-soft);
  padding-block:clamp(2.5rem,7vw,4rem);
}
.stats__grid{
  display:grid; gap:2rem 1.5rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:820px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } }

.stat{ border-left:2px solid var(--flame); padding-left:1rem; }
.stat__num{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(2.4rem,8vw,3.9rem);
  line-height:1;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.stat__lbl{
  display:block; margin-top:.5rem;
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-soft);
  line-height:1.5;
}

/* =========================================================
   SOBRE
   ========================================================= */
.about{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .about{ grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4.5rem); }
}
.about__body{ max-width:62ch; }
.about__body p{ margin-bottom:1.15em; }
.about__body .lead{
  font-size:clamp(1.2rem,3vw,1.45rem);
  line-height:1.5;
  color:var(--fg);
}
.about__body b{ color:var(--ink); font-weight:600; }
.about__side{ display:flex; flex-direction:column; gap:1.25rem; }

.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.5rem;
  background:rgba(255,255,255,.28);
}
.card--file{ box-shadow:5px 5px 0 0 rgba(20,17,15,.10); }
.card__tag{
  font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--flame);
  margin:0 0 1rem;
}
.spec{ margin:0; }
.spec > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0;
  border-top:1px dotted var(--line);
}
.spec > div:first-child{ border-top:none; padding-top:0; }
.spec dt{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-soft);
  flex:none;
}
.spec dd{ margin:0; text-align:right; font-size:.95rem; }

.card--quote{
  background:var(--ink); color:var(--paper);
  border-color:var(--ink);
  transform:rotate(-.6deg);
}
.quote{
  font-size:1.15rem; line-height:1.45; font-style:italic;
  margin:0 0 .8rem;
}
.quote::before{ content:"“"; color:var(--flame); }
.quote::after{ content:"”"; color:var(--flame); }
.quote__by{
  margin:0;
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint);
}

/* =========================================================
   TIMELINE
   ========================================================= */
.tl{ position:relative; }
.tl::before{
  content:""; position:absolute;
  left:7px; top:.5rem; bottom:2rem;
  width:1px;
  background:linear-gradient(180deg, var(--flame), var(--line) 18%, var(--line) 82%, transparent);
}
.tl__it{
  position:relative;
  padding-left:2.5rem;
  padding-bottom:clamp(2.25rem,6vw,3.25rem);
}
.tl__it::before{
  content:""; position:absolute;
  left:0; top:.45rem;
  width:15px; height:15px;
  border:2px solid var(--flame);
  background:var(--bg);
  border-radius:50%;
}
.tl__it:last-child{ padding-bottom:0; }

.tl__yr{ margin-bottom:.65rem; }
.tl__yr span{
  font-family:var(--f-display);
  font-size:clamp(1.7rem,6vw,2.5rem);
  line-height:1;
  color:var(--fg-faint);
  letter-spacing:.01em;
  transition:color .35s var(--ease);
}
.tl__yr i{ font-style:normal; opacity:.5; }
.tl__it.is-in .tl__yr span{ color:var(--flame); }
.tl__yr--now span{
  color:var(--flame) !important;
  position:relative;
}

.tl__card{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.15rem,3.5vw,1.75rem);
  background:rgba(237,228,211,.035);
  transition:border-color .3s, background-color .3s, transform .3s var(--ease);
}
.tl__card:hover{
  border-color:rgba(222,82,42,.5);
  background:rgba(237,228,211,.06);
}
.tl__card--now{
  border-color:rgba(222,82,42,.45);
  background:rgba(222,82,42,.07);
  box-shadow:6px 6px 0 0 rgba(222,82,42,.14);
}
.tl__h{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(1.15rem,3.6vw,1.5rem);
  line-height:1.06;
  letter-spacing:.005em;
  color:var(--paper);
  margin:0 0 .85rem;
}
.tl__card p{
  color:var(--fg-soft);
  font-size:1rem;
  margin-bottom:.85em;
}
.tl__card p:last-of-type{ margin-bottom:0; }
.tl__card b{ color:var(--paper); font-weight:600; }
.tl__card i{ color:var(--paper); }
.tl__next{
  margin-top:1rem !important;
  padding-top:.9rem;
  border-top:1px dotted var(--line);
  font-family:var(--f-mono);
  font-size:.76rem !important;
  letter-spacing:.04em;
}
.tl__next b{ color:var(--flame) !important; text-transform:uppercase; letter-spacing:.12em; font-size:.9em; }

.lk{
  color:var(--flame); text-decoration:none;
  border-bottom:1px solid rgba(222,82,42,.4);
  transition:border-color .2s;
}
.lk:hover{ border-color:var(--flame); }

.tags{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:1.1rem;
}
.tags li{
  font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.3rem .65rem;
}

/* desktop: trilho com ano à esquerda */
@media (min-width:860px){
  .tl::before{ left:calc(9.5rem + 7px); }
  .tl__it{
    display:grid;
    grid-template-columns:9.5rem 1fr;
    gap:0 3rem;
    padding-left:0;
    align-items:start;
  }
  .tl__it::before{ left:calc(9.5rem); top:.9rem; }
  .tl__yr{ text-align:right; padding-right:1.5rem; margin:0; }
  .tl__yr span{ font-size:2.35rem; }
  .tl__card:hover{ transform:translateX(4px); }
}
@media (prefers-reduced-motion:reduce){ .tl__card:hover{ transform:none } }

/* =========================================================
   CRÉDITOS
   ========================================================= */
.filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2.25rem;
}
.chip{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.6rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:none; color:var(--fg-soft);
  cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}

.recs{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .recs{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .recs{ grid-template-columns:repeat(3,1fr); } }

.rec{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.4rem;
  background:rgba(255,255,255,.3);
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.rec:hover{
  transform:translate(-3px,-3px);
  box-shadow:6px 6px 0 0 rgba(20,17,15,.16);
  border-color:var(--ink);
}
.rec.is-hidden{ display:none; }
.rec__yr{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.16em;
  color:var(--flame);
  margin:0 0 .7rem;
}
.rec__t{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:1.32rem; line-height:1.05;
  margin:0 0 .35rem;
}
.rec__a{
  font-size:.95rem; font-style:italic;
  color:var(--fg-soft);
  margin:0 0 .9rem;
}
.rec__r{
  font-size:.9rem; line-height:1.5;
  color:var(--fg-soft);
  margin:0; margin-top:auto;
  padding-top:.7rem;
  border-top:1px dotted var(--line);
}
.rec__badge{
  display:inline-block; align-self:flex-start;
  margin:.85rem 0 0;
  font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  background:var(--flame); color:#FFF6EC;
  padding:.32rem .6rem;
  border-radius:var(--r);
}
.rec--star{ background:rgba(233,169,60,.16); border-color:rgba(123,42,34,.35); }
.rec__lk{
  margin-top:.8rem;
  font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--oxblood); text-decoration:none;
  border-bottom:1px solid rgba(123,42,34,.35);
  align-self:flex-start;
}
.rec__lk:hover{ border-color:var(--oxblood); }
.recs__note{
  margin:1.75rem 0 0;
  font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.1em; color:var(--fg-faint);
}

/* =========================================================
   AO VIVO
   ========================================================= */
.live{
  display:grid; gap:clamp(2.25rem,6vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .live{ grid-template-columns:1fr 1fr; } }

.live__h{
  font-family:var(--f-mono);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--flame);
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
  margin:0 0 .3rem;
}
.ls li{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.3rem 1rem;
  padding:.95rem 0;
  border-bottom:1px dotted var(--line);
  transition:padding-left .25s var(--ease), border-color .25s;
}
.ls li:hover{ padding-left:.6rem; border-color:var(--flame); }
.ls b{
  font-family:var(--f-display);
  font-weight:400; text-transform:uppercase;
  font-size:clamp(1.05rem,3.2vw,1.28rem);
  letter-spacing:.01em;
  color:var(--paper);
}
.ls span{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.09em;
  color:var(--fg-faint);
  text-align:right;
}
@media (prefers-reduced-motion:reduce){ .ls li:hover{ padding-left:0 } .rec:hover{ transform:none } }

/* =========================================================
   824 STUDIO
   ========================================================= */
.studio{
  display:grid; gap:clamp(2.5rem,6vw,4.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:920px){ .studio{ grid-template-columns:1.1fr .9fr; } }

.studio__title{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(4rem,16vw,8.5rem);
  line-height:.82;
  color:var(--paper);
  margin:0 0 1.5rem;
}
.studio__title span{
  color:transparent;
  -webkit-text-stroke:2px var(--flame);
}
@supports not (-webkit-text-stroke: 1px red){ .studio__title span{ color:var(--flame); } }

.studio__lede{
  max-width:48ch; color:var(--fg-soft);
  font-size:1.1rem; margin:0 0 2rem;
}
.serv{ margin:0 0 2.25rem; }
.serv li{
  display:grid; gap:.15rem;
  padding:1rem 0;
  border-top:1px solid var(--line);
}
.serv li:last-child{ border-bottom:1px solid var(--line); }
.serv b{
  font-family:var(--f-mono);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); font-weight:700;
}
.serv span{ color:var(--fg-soft); font-size:.98rem; }

/* --- painel analógico --- */
.studio__art{ display:grid; place-items:center; }
.rack{
  width:100%; max-width:420px;
  background:linear-gradient(170deg, #2A2320, #1A1614);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.75rem 1.5rem;
  box-shadow:10px 10px 0 0 rgba(222,82,42,.12), inset 0 1px 0 rgba(237,228,211,.07);
}
.knobs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-bottom:1.75rem;
}
.knob{ display:grid; justify-items:center; gap:.55rem; }
.knob span{
  position:relative;
  width:clamp(38px,11vw,50px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4A403A, #201B18 70%);
  border:1px solid rgba(237,228,211,.14);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.4);
  display:block;
  transform:rotate(-38deg);
  transition:transform .5s var(--ease);
}
.knob span::after{
  content:""; position:absolute;
  left:50%; top:14%;
  width:2px; height:34%;
  background:var(--amber);
  transform:translateX(-50%);
  border-radius:2px;
}
.knob--b span{ transform:rotate(22deg); }
.knob--c span{ transform:rotate(-70deg); }
.knob--d span{ transform:rotate(58deg); }
.rack:hover .knob span{ transform:rotate(110deg); }
.knob b{
  font-family:var(--f-mono);
  font-size:.55rem; letter-spacing:.16em;
  color:var(--fg-faint); font-weight:400;
}

.meter{
  background:#100D0C;
  border:1px solid rgba(237,228,211,.1);
  border-radius:3px;
  padding:.9rem 1rem 1rem;
}
.meter__bars{ display:flex; align-items:flex-end; gap:3px; height:44px; }
.meter__bars i{
  flex:1; background:var(--teal); opacity:.85;
  transform-origin:bottom;
  animation:vu 900ms ease-in-out infinite alternate;
}
.meter__bars i:nth-child(n+9){ background:var(--amber); }
.meter__bars i:nth-child(n+11){ background:var(--flame); }
.meter__bars i:nth-child(1){ height:35%; animation-delay:-.05s }
.meter__bars i:nth-child(2){ height:60%; animation-delay:-.35s }
.meter__bars i:nth-child(3){ height:45%; animation-delay:-.6s }
.meter__bars i:nth-child(4){ height:80%; animation-delay:-.2s }
.meter__bars i:nth-child(5){ height:55%; animation-delay:-.75s }
.meter__bars i:nth-child(6){ height:95%; animation-delay:-.45s }
.meter__bars i:nth-child(7){ height:40%; animation-delay:-.9s }
.meter__bars i:nth-child(8){ height:70%; animation-delay:-.15s }
.meter__bars i:nth-child(9){ height:85%; animation-delay:-.55s }
.meter__bars i:nth-child(10){ height:50%; animation-delay:-.8s }
.meter__bars i:nth-child(11){ height:65%; animation-delay:-.3s }
.meter__bars i:nth-child(12){ height:30%; animation-delay:-.65s }
.meter__lbl{
  margin:.85rem 0 0;
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono);
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint);
}
.rec-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--flame);
  animation:blink 1.6s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:.2 } }
@media (prefers-reduced-motion:reduce){
  .meter__bars i, .rec-dot{ animation:none }
  .rack:hover .knob span{ transform:none }
}

/* =========================================================
   GIFFGAFF
   ========================================================= */
.works{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .works{ grid-template-columns:repeat(3,1fr); } }

.work{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.6rem;
  background:rgba(255,255,255,.3);
  display:flex; flex-direction:column;
  min-height:210px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.work:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 0 var(--flame); }
.work__tag{
  font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--flame); margin:0 0 1rem;
}
.work__t{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:1.5rem; line-height:1.05; margin:0 0 .6rem;
}
.work__d{ color:var(--fg-soft); font-size:.97rem; margin:0 0 1.2rem; }
.work__lk{
  margin-top:auto; align-self:flex-start;
  font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--flame);
  padding-bottom:2px;
}
.work--soon{ background:none; border-style:dashed; }
.work--soon .work__t{ color:var(--fg-faint); }
@media (prefers-reduced-motion:reduce){ .work:hover{ transform:none } }

/* =========================================================
   CTA
   ========================================================= */
.sec--cta{
  background:var(--flame);
  color:#FFF6EC;
  overflow:hidden;
}
.sec--cta::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(20,17,15,.22) 1.1px, transparent 1.1px);
  background-size:7px 7px;
  mask-image:linear-gradient(180deg, #000, transparent 75%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 75%);
  opacity:.55; pointer-events:none;
}
.cta{ position:relative; z-index:1; text-align:left; }
.kicker--light{ color:rgba(255,246,236,.75); }
.kicker--light b{ color:#FFF6EC; }
.cta__title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(3rem,12vw,7.5rem);
  line-height:.86; margin:0 0 1.5rem;
}
.cta__title em{
  font-style:normal; color:transparent;
  -webkit-text-stroke:clamp(1px,.22vw,2px) #FFF6EC;
}
@supports not (-webkit-text-stroke: 1px red){ .cta__title em{ color:var(--ink); } }
.cta__sub{
  max-width:42ch; font-size:1.1rem;
  color:rgba(255,246,236,.85);
  margin:0 0 2.25rem;
}
.cta__acts{ display:flex; flex-wrap:wrap; gap:.85rem; }
.sec--cta .btn--solid{
  background:var(--ink); border-color:var(--ink);
  color:var(--paper); box-shadow:4px 4px 0 0 rgba(20,17,15,.35);
}
.sec--cta .btn--solid:hover{ box-shadow:6px 6px 0 0 rgba(20,17,15,.35); }
.sec--cta .btn--ghost{ color:#FFF6EC; }
.sec--cta .btn--ghost:hover{ background:#FFF6EC; color:var(--flame); }

/* =========================================================
   FOOTER
   ========================================================= */
.ft{
  background:var(--ink);
  padding-block:clamp(3rem,8vw,4.5rem);
  border-top:1px solid var(--line-soft);
}
.ft__name{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(2.5rem,11vw,6rem);
  line-height:.9; color:var(--ink-3);
  margin:0 0 1.5rem;
  -webkit-text-stroke:1px rgba(237,228,211,.14);
}
.ft__meta,.ft__legal{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-faint); margin:0 0 .5rem;
}

/* =========================================================
   VOLTAR AO TOPO
   ========================================================= */
.totop{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:88;
  width:2.9rem; height:2.9rem;
  display:grid; place-items:center;
  background:var(--flame); color:#FFF6EC;
  border:none; border-radius:var(--r);
  font-size:1.05rem; cursor:pointer;
  box-shadow:3px 3px 0 0 var(--oxblood);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, visibility .3s, transform .3s var(--ease);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--flame-dk); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   IMPRESSÃO
   ========================================================= */
@media print{
  .grain,.hdr,.totop,.marquee,.vu,.studio__art{ display:none !important; }
  body{ background:#fff; color:#000; }
  .sec{ padding-block:1.5rem; page-break-inside:avoid; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   AJUSTES DE RESPONSIVIDADE / TELAS ESTREITAS
   ========================================================= */

/* link do rodapé */
.ft__lk{
  color:var(--fg-soft); text-decoration:none;
  border-bottom:1px solid rgba(222,82,42,.45);
  padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.ft__lk:hover{ color:var(--flame); border-color:var(--flame); }

/* menu mobile: rola se não couber na altura da tela */
@media (max-width:940px){
  .nav{
    place-items:start center;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:5.5rem var(--pad) 3rem;
  }
  .nav__list{ width:100%; }
}

/* listas "ao vivo": ao quebrar linha, o detalhe alinha à esquerda */
@media (max-width:560px){
  .ls li{ flex-direction:column; align-items:flex-start; gap:.2rem; }
  .ls span{ text-align:left; }
}

/* nada pode estourar a largura da tela */
@media (max-width:420px){
  .btn{ padding:.9rem 1.1rem; font-size:.72rem; letter-spacing:.12em; }
  .btn--lg{ padding:1rem 1.25rem; font-size:.76rem; }
  .cta__acts .btn, .hero__acts .btn{ width:100%; }
  .stats__grid{ gap:1.5rem 1rem; }
  .spec > div{ flex-direction:column; gap:.15rem; }
  .spec dd{ text-align:left; }
  .knobs{ gap:.6rem; }
  .rack{ padding:1.25rem 1rem; }
}

/* quebra palavras longas em vez de estourar o container */
.sec__title, .hero__title, .cta__title, .studio__title,
.tl__h, .rec__t, .work__t, .ft__name, .ls b{
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
.rec__a, .rec__r, .about__body p, .tl__card p{ overflow-wrap:break-word; }

/* trava definitiva de rolagem horizontal */
html, body{ max-width:100%; }

/* =========================================================
   ALVOS DE TOQUE (WCAG 2.5.8) E QUEBRAS FINAS
   ========================================================= */

/* etiquetas em flex quebram por unidade, não no meio da palavra */
.kicker{ flex-wrap:wrap; row-gap:.3rem; }

/* links isolados precisam de área clicável de dedo */
.ft__lk,
.rec__lk,
.work__lk{
  display:inline-flex; align-items:center;
  min-height:44px;
}
.ft__meta:has(.ft__lk){ margin-bottom:0; }

/* chips do filtro */
.chip{ min-height:44px; display:inline-flex; align-items:center; }

/* botão voltar-ao-topo: 44px cheios */
.totop{ width:3rem; height:3rem; }

/* logo do cabecalho tambem precisa de area de toque cheia */
.hdr__brand{ min-height:44px; }