/* ============================================================
   THE QUITE GOOD COMPANY — a public lab for unfinished ideas
   Brutalist / punk-zine / lab-journal
   ============================================================ */

/* Fonts are self-hosted — see fonts.css (linked before this file) */

:root{
  --black:#0b0a08;
  --black-2:#121110;
  --ink:#1a1916;
  --card:#161513;
  --white:#f5f1e6;
  --white-dim:#b8b2a4;
  --yellow:#ffd400;
  --yellow-deep:#e9b500;
  --red:#ff3322;
  --green:#36e07a;
  --line:#2a2823;

  --mono:'Space Mono', ui-monospace, monospace;
  --display:'Archivo Black', 'Archivo', sans-serif;
  --body:'Archivo', system-ui, sans-serif;

  --maxw:1500px;
  --pad: clamp(18px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;
}
::selection{ background:var(--yellow); color:#000; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------- texture overlays ---------- */
.scanlines, .grain{
  position:fixed; inset:0; pointer-events:none; z-index:900;
}
.scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;
  opacity:.55;
}
.grain{
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll progress ---------- */
.scroll-bar{
  position:fixed; top:0; left:0; height:4px; width:0%;
  background:var(--yellow); z-index:1000;
  box-shadow:0 0 0 1px #000;
}

/* ---------- top bar ---------- */
.top-bar{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px;
  padding:0 var(--pad);
  border-bottom:2px solid var(--white);
  background:rgba(11,10,8,.82);
  backdrop-filter:blur(6px);
}
.brand{
  font-family:var(--display);
  font-size:18px; letter-spacing:-.02em;
  display:flex; align-items:center; gap:8px;
}
.brand .blip{
  width:11px; height:11px; background:var(--yellow);
  display:inline-block; transform:translateY(1px);
  animation:blink 1.1s steps(1) infinite;
}
.nav{ display:flex; align-items:stretch; justify-self:center; }
.nav-link{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(12px,1.1vw,16px); letter-spacing:.01em;
  color:var(--white);
  display:flex; align-items:center;
  padding:16px clamp(14px,1.8vw,28px);
  border-right:2px solid var(--line);
  transition:background .14s, color .14s;
}
.nav-link:first-child{ border-left:2px solid var(--line); }
.nav-link:hover{ background:var(--yellow); color:#000; }
.nav-link::after{ display:none; }
/* disabled nav items: crossed out, not clickable */
.nav-link.disabled{
  color:var(--white-dim); cursor:not-allowed; position:relative; overflow:hidden;
}
.nav-link.disabled:hover{ background:transparent; color:var(--white-dim); }
.nav-link.disabled::before,
.nav-link.disabled::after{
  content:''; display:block; position:absolute; left:8%; right:8%; top:50%; height:2px;
  background:var(--red); transform-origin:center;
}
.nav-link.disabled::before{ transform:rotate(14deg); }
.nav-link.disabled::after{ transform:rotate(-14deg); }
.nav-spacer{ justify-self:end; }
.sys-status{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.05em; color:var(--white);
  border:1.5px solid var(--line); padding:5px 9px;
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.sys-status .dot{
  width:8px; height:8px; border-radius:50%; background:var(--yellow);
  box-shadow:0 0 8px var(--yellow);
  animation:pulse 1.4s ease-in-out infinite;
}
@media (max-width:780px){
  .nav{ display:none; }
}

/* ---------- shared section scaffolding ---------- */
.section-label{
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--yellow);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
}
.section-label::before{ content:'■'; color:var(--yellow); font-size:9px; }

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

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; padding:120px var(--pad) 50px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 78%);
}

.hero-inner{ position:relative; z-index:2; max-width:1400px; margin:0 auto; width:100%; }

.hero-title{
  font-family:var(--display);
  line-height:.82; letter-spacing:-.03em; margin:0;
  text-transform:uppercase;
}
.hero-title .line{ display:block; position:relative; }
.hero-title .l1{ font-size:clamp(48px,11vw,168px); }
.hero-title .l2{ font-size:clamp(74px,20.5vw,330px); color:var(--white); }
.hero-title .l3{ font-size:clamp(74px,20.5vw,330px); }
.hero-title .l4{ font-size:clamp(40px,9.3vw,150px); }

/* QUITE rendered as outline for raw editorial contrast */
.outline{
  color:transparent;
  -webkit-text-stroke:2px var(--white);
}
@media (min-width:900px){ .outline{ -webkit-text-stroke:3px var(--white); } }
.hl-yellow{ color:var(--yellow); }

/* glitch */
.glitch{ position:relative; }
.glitch::before, .glitch::after{
  content:attr(data-text);
  position:absolute; inset:0; pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.glitch.go::before{
  color:var(--red); left:3px;
  animation:glitchTop .4s steps(2) 1;
  text-shadow:-2px 0 var(--red);
}
.glitch.go::after{
  color:var(--yellow); left:-3px;
  animation:glitchBot .4s steps(2) 1;
  text-shadow:2px 0 var(--yellow);
}
/* QUITE (outline): both glitch layers yellow */
.glitch.outline.go::before{
  color:var(--yellow);
  text-shadow:-2px 0 var(--yellow);
}
.glitch.outline.go::after{
  color:var(--yellow);
  text-shadow:2px 0 var(--yellow);
}
/* GOOD (hl-yellow): both glitch layers white */
.glitch.hl-yellow.go::before{
  color:var(--white);
  text-shadow:-2px 0 var(--white);
}
.glitch.hl-yellow.go::after{
  color:var(--white);
  text-shadow:2px 0 var(--white);
}

.hero-bottom{
  margin-top:clamp(26px,4vw,52px);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:28px 48px;
  justify-content:space-between;
}
.hero-sub{
  font-family:var(--body); font-weight:800;
  font-size:clamp(20px,2.6vw,34px); line-height:1.05; margin:0;
  max-width:16ch; letter-spacing:-.01em;
}
.hero-sub .u{ color:var(--yellow); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:5px; }

.hero-right{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }

.btn{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(15px,1.5vw,20px); letter-spacing:.02em;
  background:var(--yellow); color:#000; border:2px solid #000;
  padding:16px 26px; cursor:pointer;
  display:inline-flex; align-items:center; gap:14px;
  box-shadow:7px 7px 0 var(--white);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:11px 11px 0 var(--white); background:#fff; }
.btn:active{ transform:translate(4px,4px); box-shadow:1px 1px 0 var(--white); }
.btn .arr{ font-family:var(--mono); font-weight:700; transition:transform .15s; }
.btn:hover .arr{ transform:translateX(5px); }

.hero-meta{
  font-family:var(--mono); font-size:clamp(11px,1.15vw,14px);
  color:var(--white-dim); letter-spacing:.02em; line-height:1.7;
  border-left:3px solid var(--yellow); padding-left:14px;
}
.hero-meta b{ color:var(--white); }
.hero-meta .q{ color:var(--red); }

/* off-grid deco */
.deco{
  position:absolute; z-index:1; font-family:var(--display);
  pointer-events:none; user-select:none; line-height:1;
}
.deco.star{ color:var(--yellow); }
.deco.brk{ color:var(--white); }
.deco.plus{ color:var(--red); }
.deco.ring{
  border:3px solid var(--white); border-radius:50%;
}
.deco.sq{ background:var(--yellow); }

.spin{ animation:spin 9s linear infinite; }
.spin-rev{ animation:spin 14s linear infinite reverse; }
.bob{ animation:bob 4s ease-in-out infinite; }

/* edge annotations */
.anno{
  position:absolute; z-index:3; font-family:var(--mono);
  font-size:12px; font-weight:700; letter-spacing:.18em;
  color:var(--white-dim); text-transform:uppercase; white-space:nowrap;
}
.anno-left{ left:14px; top:50%; transform:rotate(-90deg) translateX(50%); transform-origin:left center; }
.anno-right{ right:-2px; top:50%; transform:rotate(90deg) translateX(-50%); transform-origin:right center; }
.anno .sl{ color:var(--yellow); }
@media (max-width:780px){ .anno{ display:none; } }

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--yellow); color:#000; overflow:hidden;
  border-block:3px solid #000; padding:14px 0;
  position:relative; z-index:5;
}
.ticker-track{
  display:flex; gap:0; width:max-content;
  animation:marquee 26s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(20px,3.4vw,40px); letter-spacing:-.01em;
  padding:0 22px; display:flex; align-items:center; gap:22px;
  white-space:nowrap;
}
.ticker-item .star{ color:#000; font-size:.7em; }
.ticker-item b{ font-family:var(--display); font-weight:900; color:#000; -webkit-text-stroke:0; }
.ticker-item .alt{
  font-family:var(--body); font-weight:700;
  color:var(--black); -webkit-text-stroke:1.5px #000;
}
.ticker-item .tk-strike{ position:relative; }
.ticker-item .tk-strike::after{
  content:''; position:absolute; left:-3%; right:-3%; top:48%; height:.11em;
  background:var(--red); transform:rotate(-2deg);
}
.ticker.rev .ticker-track{ animation-direction:reverse; animation-duration:32s; }

/* ============================================================
   EXPERIMENTS
   ============================================================ */
.experiments{ padding:clamp(64px,9vw,130px) 0 clamp(60px,8vw,110px); position:relative; }
.exp-head{ display:flex; flex-direction:column; gap:6px; margin-bottom:clamp(34px,5vw,64px); align-items:center; text-align:center; }
.exp-mega{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(34px,10.5vw,176px); line-height:.84; letter-spacing:-.03em;
  margin:0; white-space:nowrap;
}
.exp-mega .gt{ color:var(--yellow); }
.exp-mega .lt{ color:var(--white); position:relative; }
.exp-sub-row{
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:baseline;
  font-family:var(--mono); font-size:13px; color:var(--white-dim);
  letter-spacing:.05em; margin-top:14px;
}
.exp-sub-row b{ color:var(--yellow); }

.exp-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,30px);
}
@media (max-width:720px){ .exp-grid{ grid-template-columns:1fr; } }

.card{
  position:relative; background:var(--card);
  border:2px solid var(--line);
  padding:clamp(22px,2.4vw,34px);
  display:flex; flex-direction:column; gap:14px; min-height:260px;
  transition:transform .14s, box-shadow .14s, border-color .14s, background .14s;
  cursor:pointer; overflow:hidden;
}
.card::after{ /* corner notch deco */
  content:''; position:absolute; top:0; right:0;
  border-width:0 22px 22px 0; border-style:solid;
  border-color:transparent var(--line) transparent transparent;
  transition:border-color .14s;
}
.card:hover{
  transform:translate(-3px,-3px);
  border-color:var(--yellow);
  box-shadow:10px 10px 0 var(--yellow);
  background:var(--ink);
}
.card:hover::after{ border-color:transparent var(--yellow) transparent transparent; }

.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card-num{
  font-family:var(--display); color:var(--yellow);
  font-size:clamp(26px,3vw,40px); letter-spacing:-.02em;
}
.badge{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border:1.5px solid currentColor; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.live{ color:var(--green); }
.badge.live::before{ animation:pulse 1.2s infinite; }
.badge.polishing{ color:var(--white); }
.badge.progress{ color:var(--red); }
.badge.ideation{ color:var(--white-dim); }

.card-title{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(22px,2.4vw,33px); line-height:.95; letter-spacing:-.02em;
  margin:6px 0 0;
}
.card-img{
  display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
  margin:14px 0 4px; border:2px solid var(--line);
  filter:grayscale(.05) contrast(1.04);
  transition:border-color .14s, filter .14s, transform .14s;
}
.card:hover .card-img{ filter:none; }
.card-cat{
  font-family:var(--mono); font-size:12px; color:var(--white-dim);
  letter-spacing:.06em; text-transform:uppercase;
}
.card-desc{
  font-family:var(--body); font-weight:500; font-size:clamp(14px,1.2vw,17px);
  line-height:1.4; color:var(--white); margin-top:auto; max-width:34ch;
}
.card-foot{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; color:var(--white-dim);
  letter-spacing:.05em; opacity:0; transform:translateY(4px);
  transition:opacity .15s, transform .15s;
}
.card:hover .card-foot{ opacity:1; transform:translateY(0); }
.card-foot .arr{ color:var(--yellow); }

/* grayed-out store badge (app not live yet) */
.card-store{ margin-top:18px; display:flex; gap:10px; }
.store-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--white-dim);
  border:1.5px solid var(--line); padding:8px 12px;
  filter:grayscale(1); opacity:.55; cursor:not-allowed;
}
.store-badge svg{ color:var(--white-dim); flex:0 0 auto; }
.store-soon{
  font-size:10px; letter-spacing:.12em;
  border:1px solid currentColor; padding:1px 5px; margin-left:2px;
}

/* not-yet-built experiments: blurred + locked */
.card.soon{ cursor:not-allowed; }
.card.soon .card-inner{
  display:flex; flex-direction:column; gap:14px; flex:1;
  filter:blur(7px) saturate(.7); opacity:.5;
  transition:filter .2s, opacity .2s; pointer-events:none; user-select:none;
}
.card.soon:hover{ transform:none; border-color:var(--line); box-shadow:none; background:var(--card); }
.card.soon:hover::after{ border-color:transparent var(--line) transparent transparent; }
.soon-lock{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding:20px;
}
.soon-lock .tag{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(20px,2.4vw,30px); letter-spacing:.02em; color:var(--white);
}
.soon-lock .sub{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow); border:1.5px solid var(--yellow); padding:6px 12px;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding:clamp(70px,10vw,150px) 0; position:relative; border-top:2px solid var(--line); }
.manifesto-text{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(34px,7vw,118px); line-height:.92; letter-spacing:-.03em;
  margin:0; max-width:18ch;
}
.manifesto-text .strike{
  color:var(--white-dim); position:relative; -webkit-text-stroke:0;
}
.manifesto-text .strike::after{
  content:''; position:absolute; left:-2%; right:-2%; top:52%; height:.08em;
  background:var(--red); transform:rotate(-2deg);
}
.manifesto-text .pop{
  color:#000; background:var(--yellow); padding:0 .08em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.manifesto-text .red{ color:var(--red); }
.manifesto-sign{
  margin-top:34px; font-family:var(--mono); font-size:13px;
  color:var(--white-dim); letter-spacing:.08em;
}
.manifesto-sign b{ color:var(--white); }
.manifesto-mark{
  position:absolute; right:var(--pad); top:clamp(50px,8vw,110px);
  font-family:var(--display); font-size:clamp(120px,22vw,360px);
  color:var(--ink); z-index:0; line-height:1; user-select:none; pointer-events:none;
}

/* ============================================================
   STATS
   ============================================================ */
.stats{ border-block:2px solid var(--white); background:var(--black-2); }
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin:0 auto;
}
@media (max-width:820px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat{
  padding:clamp(34px,5vw,72px) clamp(18px,3vw,40px);
  border-right:2px solid var(--line); position:relative; overflow:hidden;
}
.stat:last-child{ border-right:0; }
@media (max-width:820px){
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:2px solid var(--line); }
}
.stat:hover{ background:var(--ink); }
.stat-num{
  font-family:var(--display); font-size:clamp(54px,8vw,118px);
  line-height:.9; letter-spacing:-.03em; color:var(--yellow);
}
.stat:nth-child(2) .stat-num{ color:var(--white); }
.stat:nth-child(4) .stat-num{ color:var(--red); }
.stat-label{
  font-family:var(--mono); font-size:clamp(11px,1.1vw,14px); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--white-dim);
  margin-top:14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:clamp(54px,7vw,96px) 0 40px; position:relative; overflow:hidden; }
.footer-big{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(60px,18vw,290px); line-height:.82; letter-spacing:-.03em;
  margin:0 0 40px;
}
.footer-big .a{ color:var(--red); }
.footer-big .b{ color:var(--yellow); }
.footer-plain{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(16px,2vw,24px); letter-spacing:.04em;
  color:var(--white); text-align:center;
  margin:0 0 16px; padding-top:30px; border-top:2px solid var(--white);
}
.footer-nav{
  display:flex; flex-wrap:wrap; gap:8px 0; border-top:2px solid var(--white);
  border-bottom:2px solid var(--white);
}
.footer-nav a{
  flex:1 1 180px; padding:20px 4px; text-align:center;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(15px,1.8vw,22px); letter-spacing:.01em;
  border-right:2px solid var(--line); transition:background .14s,color .14s;
}
.footer-nav a:last-child{ border-right:0; }
.footer-nav a:hover{ background:var(--yellow); color:#000; }
/* disabled footer items: crossed out, not clickable */
.footer-nav a.disabled{
  color:var(--white-dim); cursor:not-allowed; position:relative; overflow:hidden;
}
.footer-nav a.disabled:hover{ background:transparent; color:var(--white-dim); }
.footer-nav a.disabled::before,
.footer-nav a.disabled::after{
  content:''; position:absolute; left:18%; right:18%; top:50%; height:2px;
  background:var(--red);
}
.footer-nav a.disabled::before{ transform:rotate(9deg); }
.footer-nav a.disabled::after{ transform:rotate(-9deg); }
.footer-meta{
  display:flex; justify-content:center; text-align:center;
  margin-top:0; padding-top:0;
  font-family:var(--mono); font-size:12px; color:var(--white-dim);
  letter-spacing:.04em;
}
.footer-meta a{ color:var(--white-dim); text-decoration:underline; text-underline-offset:3px; transition:color .14s; }
.footer-meta a:hover{ color:var(--yellow); }
.footer-meta a + a{ margin-left:14px; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- keyframes ---------- */
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.82)} }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes glitchTop{
  0%{ clip-path:inset(0 0 70% 0); transform:translate(0,-3px) }
  50%{ clip-path:inset(0 0 40% 0); transform:translate(-4px,2px) }
  100%{ clip-path:inset(0 0 60% 0); transform:translate(2px,-1px) }
}
@keyframes glitchBot{
  0%{ clip-path:inset(65% 0 0 0); transform:translate(0,3px) }
  50%{ clip-path:inset(45% 0 0 0); transform:translate(4px,-2px) }
  100%{ clip-path:inset(55% 0 0 0); transform:translate(-2px,1px) }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}