/* ============================================================================
   THE HOUSE FEED — black & white brutalist theme
   White paper, black ink, hard edges, no gradients, no rounded corners.
   Personality comes from typography (Anton / Space Grotesk / Space Mono)
   and heavy 2px rules.

   Mobile-first. On desktop the whole page renders as a centred phone-width
   column, because effectively all traffic is the TikTok in-app browser.
   ========================================================================== */

:root{
  --paper:  #ffffff;
  --ink:    #000000;
  --muted:  #6f6f6f;
  --rule:   2px;

  --col: 460px;
  --pad: 20px;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --sans:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:#d8d8d8;
}

body{
  margin:0 auto;
  max-width:var(--col);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  border-inline:var(--rule) solid var(--ink);
}
@media (max-width:520px){ body{ border-inline:0; } }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,blockquote{ margin:0; }
::selection{ background:var(--ink); color:var(--paper); }

/* ----------------------------------------------------------------- CHROME */

.scroll-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  z-index:120;
  pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0;
  background:var(--ink);
}

.cursor{ display:none; }
@media (pointer:fine){
  .cursor{
    display:block;
    position:fixed; top:0; left:0;
    width:12px; height:12px;
    border:2px solid var(--ink);
    background:var(--paper);
    z-index:200;
    pointer-events:none;
    opacity:0;
    transition:opacity .2s, width .18s, height .18s;
  }
  .cursor.is-on{ opacity:1; }
  .cursor.is-hover{ width:30px; height:30px; background:var(--ink); }
}

/* -------------------------------------------------------------------- NAV */

.nav{
  position:fixed; top:0; left:50%;
  transform:translateX(-50%);
  width:100%; max-width:var(--col);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px var(--pad);
  background:var(--paper);
  border-bottom:var(--rule) solid transparent;
  transition:border-color .2s;
}
.nav.is-stuck{ border-bottom-color:var(--ink); }

.nav__mark{
  display:flex;
  align-items:center;
}
.nav__wordmark{ height:19px; width:auto; display:block; }

.nav__links{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.nav__cta{
  white-space:nowrap;
  color:var(--paper) !important;
  background:var(--ink);
  padding:7px 11px;
  font-weight:700;
}
@media (hover:hover){
  .nav__cta:hover{ box-shadow:4px 4px 0 0 var(--ink); }
}

/* ------------------------------------------------------------------- HERO */

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:148px var(--pad) 0;
  border-bottom:var(--rule) solid var(--ink);
  overflow:hidden;
}
/* 44px graph paper */
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.16) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.55;
  pointer-events:none;
}
/* Fills the hero so the two auto margins below (title, scroll cue) can split the
   leftover height evenly — that keeps the ticker flush to the hero's bottom edge
   instead of leaving a dead band under it. */
.hero__inner{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
}

.hero__title{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.8rem, 14.5vw, 4.2rem);
  line-height:.92;
  letter-spacing:-0.01em;
  margin:auto 0 0;
}

.hero__rule{
  height:var(--rule);
  background:var(--ink);
  margin:20px 0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.hero__rule.is-in{ transform:scaleX(1); }

.hero__lede{
  font-size:.97rem;
  line-height:1.55;
  color:var(--muted);
  max-width:34ch;
}
.hero__lede em{
  font-style:normal;
  color:var(--ink);
  font-weight:700;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 17px;
  border:var(--rule) solid var(--ink);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  transition:box-shadow .15s, transform .15s;
}
.btn span{ transition:transform .2s; }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--ghost{ background:var(--paper); color:var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:none !important; }
@media (hover:hover){
  .btn:hover{ box-shadow:5px 5px 0 0 var(--ink); }
  .btn:hover span{ transform:translateX(3px); }
}

.scroll-cue{
  align-self:center;
  /* auto absorbs any leftover height on tall screens; the padding is the floor. */
  margin:auto 0 20px;
  padding-top:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  z-index:1;
  transition:opacity .35s ease, transform .35s ease;
}
.scroll-cue.is-gone{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}
.scroll-cue__line{
  width:var(--rule); height:32px;
  background:rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.scroll-cue__line::after{
  content:'';
  position:absolute; inset:0;
  background:var(--ink);
}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue__line::after{ animation:cue 1.9s ease-in-out infinite; }
}
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* ----------------------------------------------------------------- TICKER */

.ticker{
  background:var(--ink);
  color:var(--paper);
  border-bottom:var(--rule) solid var(--ink);
  overflow:hidden;
  padding:11px 0;
}
/* In the hero the bar breaks out of the section's side padding so it still
   reads edge-to-edge; .hero's overflow:hidden contains the negative margin. */
.hero__inner .ticker{
  position:relative;
  z-index:1;
  margin:0 calc(var(--pad) * -1);
  border-bottom:0;
}
.ticker__track{ display:flex; width:max-content; }
@media (prefers-reduced-motion:no-preference){
  .ticker__track{ animation:marquee 26s linear infinite; }
}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.ticker__set{
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.ticker__set b{ font-weight:400; padding:0 14px; }
.ticker__set i{ font-style:normal; opacity:.5; }

/* ------------------------------------------------------------------ STATS */

.stats{ border-bottom:var(--rule) solid var(--ink); }
.stats__grid{ display:grid; grid-template-columns:1fr 1fr; }
.stat{
  padding:22px var(--pad);
  border-bottom:var(--rule) solid var(--ink);
}
.stat:nth-child(odd){ border-right:var(--rule) solid var(--ink); }
.stat:nth-last-child(-n+2){ border-bottom:0; }

.stat__num{
  display:block;
  font-family:var(--display);
  font-size:2.05rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block;
  margin-top:9px;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
/* --------------------------------------------------------------- PLAYLIST */

.playlist{
  background:var(--ink);
  color:var(--paper);
  border-bottom:var(--rule) solid var(--ink);
}
.playlist__link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px var(--pad);
  color:var(--paper);
}
.playlist__art{
  display:block;
  width:60px;
  height:60px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.28);
}
.playlist__kicker{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.55;
}
.playlist__name{
  display:block;
  margin-top:5px;
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:1.15rem;
  line-height:1;
  letter-spacing:-0.01em;
}
.playlist__go{
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.playlist__go i{ font-style:normal; display:inline-block; transition:transform .2s; }

.eq{ display:flex; align-items:flex-end; gap:2px; height:9px; }
.eq span{
  width:2px;
  height:100%;
  background:var(--paper);
  transform-origin:bottom;
  animation:eq .7s ease-in-out infinite alternate;
}
.eq span:nth-child(2){ animation-duration:.5s; }
.eq span:nth-child(3){ animation-duration:.9s; }
.eq span:nth-child(4){ animation-duration:.6s; }
@keyframes eq{
  from{ transform:scaleY(.2); }
  to  { transform:scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .eq span{ animation:none; transform:scaleY(.55); }
}
@media (hover:hover){
  .playlist__link:hover .playlist__go i{ transform:translate(2px,-2px); }
}

/* --------------------------------------------------------------- SECTIONS */

.section{
  padding:44px var(--pad) 48px;
  border-bottom:var(--rule) solid var(--ink);
}
.section__head{
  padding-bottom:18px;
  border-bottom:var(--rule) solid var(--ink);
  margin-bottom:26px;
}
.section__title{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:2.15rem;
  line-height:.95;
  letter-spacing:-0.01em;
}
.section__note{
  margin-top:10px;
  font-size:.87rem;
  line-height:1.5;
  color:var(--muted);
  max-width:38ch;
}

/* --------------------------------------------------------------- SERVICES */

/* The head's bottom rule already separates it from the list, and .svc__row
   supplies its own 22px of top padding. A margin here would stack on top of
   that, putting 48px above the first row where every other row gets 22px. */
.services .section__head{ margin-bottom:0; }

.svc__row{
  padding:22px 0;
  border-bottom:var(--rule) solid var(--ink);
}
.svc__row:last-child{ border-bottom:0; padding-bottom:0; }
.svc__name{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:1.3rem;
  line-height:1.05;
  letter-spacing:-0.01em;
}
.svc__desc{
  margin-top:9px;
  font-size:.86rem;
  line-height:1.55;
  color:var(--muted);
}

/* ------------------------------------------------------------- PULL QUOTE */

.quote{
  padding:52px var(--pad);
  background:var(--ink);
  color:var(--paper);
  border-bottom:var(--rule) solid var(--ink);
}
.quote__text{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:1.65rem;
  line-height:1.28;
  letter-spacing:-0.01em;
}
/* Anton's font box is 1.52em tall but its caps occupy only 0.87em, so a plain
   background paints ~0.3em of dead white above and below the letters and bleeds
   into the neighbouring lines. Paint a band sized to the caps instead: the
   gradient starts 0.25em down from the padding box and runs 1.03em, which
   clears the cap tops and stops just under the baseline. */
.quote__text em{
  font-style:normal;
  color:var(--ink);
  padding:0 0.18em;
  line-height:1;
  background-image:linear-gradient(var(--paper), var(--paper));
  background-repeat:no-repeat;
  background-size:100% 1.03em;
  background-position:0 0.25em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ---------------------------------------------------------------- CONTACT */

.contact{
  padding:44px var(--pad) 48px;
  border-bottom:var(--rule) solid var(--ink);
}
.contact__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:16px;
  border-bottom:var(--rule) solid var(--ink);
}
.contact__tag{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:5px 8px;
  line-height:1;
}
.contact__live{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
/* .eq draws its bars in --paper for the black playlist strip. */
.contact__live .eq span{ background:var(--ink); }

/* Baseline flex so the arrow sits on the Anton baseline rather than needing a
   magic offset. Uneven padding is deliberate: Anton's caps overshoot the line
   box top while its baseline sits ~5px up from the bottom, so equal padding
   reads top-heavy. These values put ~20px of optical space inside both rules. */
.contact__mail{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:22px 0 15px;
  border-bottom:var(--rule) solid var(--ink);
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:1.6rem;
  line-height:1;
  letter-spacing:-0.01em;
}
.contact__mail-go{
  flex:none;
  font-style:normal;
  font-family:var(--sans);
  font-weight:700;
  font-size:1rem;
  white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
/* Sized to sit inside the arrow's own box so swapping the two doesn't change
   the row height and shunt the section below it. */
.contact__mail.is-copied .contact__mail-go{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.6rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:4px 8px;
  margin-bottom:-3px;
  transform:none;
}
.contact__for{
  margin-top:16px;
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
@media (hover:hover){
  .contact__mail:hover .contact__mail-go{ transform:translateX(7px); }
}

/* ----------------------------------------------------------------- FOOTER */

.footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 14px;
  padding:20px var(--pad) 34px;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer__time b{ color:var(--ink); font-weight:400; }
.footer__top{ color:var(--ink); }
.footer__top i{ font-style:normal; }

/* --------------------------------------------------------- REVEAL / SPLIT */

@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.is-in{ opacity:1; transform:none; }
}

.split__line{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.split__word{ display:inline-block; }

/* Hollow, echoing the outlined "HOUSE" in the logo lockup. Guarded because a
   browser without text-stroke would render transparent text as nothing. */
@supports (-webkit-text-stroke: 1px black){
  .split__word--emph{
    color:transparent;
    -webkit-text-stroke:.045em var(--ink);
  }
}
@media (prefers-reduced-motion:no-preference){
  .split__word{
    transform:translateY(105%);
    transition:transform .8s cubic-bezier(.16,1,.3,1);
  }
  [data-split].is-in .split__word{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .split__word{ transform:none !important; }
  .hero__rule{ transform:none !important; }
  .cursor{ display:none !important; }
}