:root {
  --ink: #0a0a0a;
  --charcoal: #1f1f1f;
  --paper: #f7f7f5;
  --paper-2: #e8e3da;
  --spark: #ff5a00;
  --acid: #f0ff45;
  --line: rgba(10,10,10,.18);
  --shadow: 0 18px 55px rgba(10,10,10,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10,10,10,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.014) 1px, transparent 1px);
  background-size: 26px 26px;
  z-index: 30;
  mix-blend-mode: multiply;
}
.noise {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: .045;
  pointer-events: none;
  z-index: 40;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  animation: noiseMove .35s steps(2) infinite;
}
@keyframes noiseMove { 0%{transform:translate(0,0)} 25%{transform:translate(2%,-1%)} 50%{transform:translate(-1%,2%)} 75%{transform:translate(1%,1%)} 100%{transform:translate(0,0)} }

::selection { background: var(--spark); color: white; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }
button { color: inherit; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.skip-link { position: fixed; left: 12px; top: -60px; background: var(--ink); color: white; padding: 10px 14px; z-index: 99; }
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(247,247,245,.9);
  backdrop-filter: blur(14px);
}
.brand-lockup { display: flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: -.03em; }
.brand-mini { font-family: "Bebas Neue", Impact, sans-serif; font-size: 1.6rem; letter-spacing: .04em; }
.spark { color: var(--spark); font-size: 1.2em; }
.nav { display: flex; align-items: center; gap: 26px; font-size: .88rem; font-weight: 700; }
.nav a { position: relative; }
.nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-5px; width:100%; height:2px; background:var(--spark); transform:scaleX(0); transform-origin:left; transition:.2s ease; }
.nav a:hover::after { transform:scaleX(1); }
.nav-cta { border: 1px solid var(--ink); padding: 10px 14px; box-shadow: 4px 4px 0 var(--ink); transition: .18s ease; }
.nav-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

.hero {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding: clamp(52px, 8vw, 120px) clamp(20px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.hero::after { content:""; position:absolute; width:320px; height:22px; background:var(--spark); right:-80px; top:20%; transform:rotate(-9deg); opacity:.92; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 22px; }
.eyebrow-dot { width: 9px; height: 9px; background: var(--spark); display: inline-block; transform: rotate(45deg); }
.hero h1, .section-heading h2, .manifesto h2, .brand-copy h2, .newsletter-block h2 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .88;
}
.hero h1 { font-size: clamp(4.5rem, 9.5vw, 10.2rem); max-width: 900px; }
.scribble-wrap { position: relative; display: inline-block; }
.scribble { position:absolute; left:-2%; right:-2%; bottom:-8%; height:12%; background:var(--spark); clip-path: polygon(0 42%, 100% 0, 98% 100%, 1% 70%); z-index:-1; transform:rotate(-1deg); }
.hero-deck { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; max-width: 680px; margin: 28px 0 0; color: #292929; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:14px 18px; font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--ink); transition:.18s ease; }
.button-primary { background:var(--ink); color:white; box-shadow:6px 6px 0 var(--spark); }
.button-primary:hover { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--spark); }
.button-ghost { background:transparent; }
.button-ghost:hover { background:var(--paper-2); }
.hero-art { position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; transform:rotate(1deg); }
.hero-art::before { content:""; position:absolute; inset:10% 6% 12% 4%; background:white; border:1px solid rgba(10,10,10,.13); box-shadow:var(--shadow); transform:rotate(-2.5deg); }
.hero-art img { position:relative; z-index:2; width:min(100%,760px); filter:contrast(1.05); }
.tape { position:absolute; z-index:3; width:115px; height:34px; background:rgba(222,209,179,.72); border:1px solid rgba(125,108,77,.15); backdrop-filter:blur(2px); }
.tape-one { top:11%; left:16%; transform:rotate(-9deg); }
.tape-two { bottom:13%; right:11%; transform:rotate(7deg); }
.hero-note { position:absolute; z-index:4; bottom:7%; left:6%; background:var(--acid); padding:12px 14px; font-size:.68rem; line-height:1.45; transform:rotate(-3deg); box-shadow:4px 4px 0 var(--ink); }

.ticker { overflow:hidden; background:var(--ink); color:white; border-block:1px solid var(--ink); transform:rotate(-.4deg) scale(1.01); }
.ticker-track { display:flex; width:max-content; gap:22px; align-items:center; padding:13px 0; font-family:"Bebas Neue", Impact, sans-serif; font-size:1.35rem; letter-spacing:.08em; animation:ticker 30s linear infinite; }
.ticker-track b { color:var(--spark); font-weight:400; }
@keyframes ticker { to { transform:translateX(-50%); } }

.section-shell { padding: clamp(80px, 10vw, 150px) clamp(20px, 5vw, 80px); }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; border-bottom:1px solid var(--ink); padding-bottom:24px; }
.kicker { margin:0 0 10px; font-size:.74rem; font-weight:700; letter-spacing:.08em; }
.section-heading h2, .brand-copy h2 { font-size:clamp(4rem,8vw,8rem); }
.section-heading > p { max-width:560px; justify-self:end; font-size:1.05rem; line-height:1.6; margin:0 0 6px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 30px; }
.filter { background:transparent; border:1px solid var(--ink); padding:9px 13px; font-family:"IBM Plex Mono", monospace; font-size:.75rem; text-transform:uppercase; cursor:pointer; }
.filter:hover, .filter.is-active { background:var(--ink); color:white; }
.project-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.project-card { grid-column:span 4; min-width:0; border:1px solid var(--ink); background:white; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease, opacity .2s ease; }
.project-card.featured { grid-column:span 8; }
.project-card:hover { transform:translateY(-6px) rotate(-.15deg); box-shadow:8px 8px 0 var(--ink); }
.project-card[hidden] { display:none; }
.project-visual { min-height:280px; padding:18px; position:relative; overflow:hidden; border-bottom:1px solid var(--ink); display:flex; align-items:flex-end; justify-content:flex-start; }
.featured .project-visual { min-height:390px; }
.project-wordmark { position:relative; z-index:2; font-family:"Bebas Neue", Impact, sans-serif; font-size:clamp(3.6rem,6vw,6.8rem); line-height:.78; letter-spacing:-.02em; }
.case-tag { position:absolute; z-index:4; top:14px; left:14px; font-size:.62rem; background:var(--paper); border:1px solid var(--ink); padding:6px 8px; }
.project-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.project-meta { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.status { border:1px solid var(--ink); padding:5px 7px; white-space:nowrap; }
.status-live { background:var(--acid); }
.status-orange { background:var(--spark); color:white; border-color:var(--spark); }
.status-new { background:#e8c7ff; }
.project-body h3 { font-family:"Bebas Neue", Impact, sans-serif; font-size:2.7rem; margin:20px 0 8px; font-weight:400; letter-spacing:.02em; }
.project-body p { margin:0; line-height:1.55; color:#333; }
.card-footer { margin-top:auto; padding-top:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:.68rem; font-weight:600; }
.link-footer:hover { color:var(--spark); }
.arrow { font-size:1.5rem; }

.plot-visual { background:#111; color:white; }
.plot-visual::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(255,255,255,.035) 45px 46px); }
.vhs-stack { position:absolute; right:5%; top:18%; width:43%; height:50%; transform:rotate(5deg); }
.vhs-stack i { position:absolute; width:90%; height:27%; border:2px solid white; background:#222; box-shadow:8px 8px 0 var(--spark); }
.vhs-stack i:nth-child(2){ top:34%; left:7%; }
.vhs-stack i:nth-child(3){ top:68%; left:14%; }
.visual-sticker { position:absolute; right:6%; bottom:10%; z-index:5; background:var(--spark); color:white; padding:8px 10px; font:700 .7rem "IBM Plex Mono",monospace; transform:rotate(-5deg); }
.moved-visual { background:var(--acid); }
.rings { position:absolute; inset:0; display:grid; place-items:center; opacity:.8; }
.rings i { position:absolute; border:14px solid var(--ink); border-radius:50%; width:240px; height:240px; }
.rings i:nth-child(2){ width:165px;height:165px; }
.rings i:nth-child(3){ width:90px;height:90px; }
.steady-visual { background:#e8e3da; }
.steady-lines { position:absolute; inset:0; padding:60px 25px; display:flex; flex-direction:column; gap:18px; transform:rotate(-4deg); }
.steady-lines i { display:block; height:12px; background:var(--ink); }
.steady-lines i:nth-child(2){ width:70%; background:var(--spark); }
.steady-lines i:nth-child(3){ width:88%; }
.steady-lines i:nth-child(4){ width:54%; }
.postiq-visual { background:#1f1f1f; color:white; }
.terminal-lines { position:absolute; right:18px; top:58px; display:flex; flex-direction:column; gap:8px; font-size:.85rem; color:#b9ff85; opacity:.8; }
.stamp-visual { background:#f2d8d8; }
.stamp-box { position:absolute; right:8%; top:25%; border:6px solid #a00; color:#a00; padding:14px; font:900 1.5rem "IBM Plex Mono",monospace; transform:rotate(-7deg); text-align:center; }
.stamp-box small { font-size:.42rem; }
.whiteout-visual { background:#cfeaff; }
.mountain { position:absolute; width:85%; height:85%; left:25%; top:20%; background:white; clip-path:polygon(50% 0,100% 100%,0 100%); filter:drop-shadow(10px 14px 0 rgba(10,10,10,.9)); }
.breath-visual { background:#c9f4ee; }
.breath-orb { position:absolute; right:8%; top:15%; width:140px; height:140px; border-radius:50%; background:white; display:grid; place-items:center; font-size:4rem; box-shadow:0 0 0 18px rgba(255,255,255,.45),0 0 0 35px rgba(255,255,255,.22); animation:breathe 5s ease-in-out infinite; }
@keyframes breathe { 50%{ transform:scale(1.12); } }
.arcade-visual { background:#121212; color:white; }
.cabinet { position:absolute; right:7%; top:18%; width:145px; height:205px; border:4px solid white; transform:skew(-2deg); box-shadow:8px 8px 0 var(--spark); padding:13px; }
.screen { border:3px solid white; height:110px; display:grid; place-items:center; text-align:center; font:700 .72rem "IBM Plex Mono",monospace; }
.controls { text-align:center; margin-top:12px; font-size:1.3rem; }

.manifesto { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,7vw,110px); background:var(--ink); color:white; padding:clamp(90px,10vw,150px) clamp(20px,5vw,80px); position:relative; }
.manifesto::before { content:"✦"; color:var(--spark); position:absolute; top:28px; right:4vw; font-size:4rem; }
.manifesto h2 { font-size:clamp(4rem,7vw,8rem); }
.manifesto h2 span { color:var(--spark); }
.manifesto-list { display:flex; flex-direction:column; }
.manifesto-list > div { display:grid; grid-template-columns:55px 1fr; column-gap:18px; border-top:1px solid rgba(255,255,255,.25); padding:28px 0; }
.manifesto-list span { color:var(--spark); font-size:.72rem; }
.manifesto-list h3 { font-family:"Bebas Neue", Impact, sans-serif; font-weight:400; font-size:2.2rem; margin:0 0 8px; letter-spacing:.03em; }
.manifesto-list p { grid-column:2; margin:0; color:#cfcfcf; line-height:1.55; max-width:630px; }

.brand-section { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(40px,6vw,90px); align-items:center; }
.brand-copy > p:not(.kicker) { max-width:650px; line-height:1.65; font-size:1.05rem; }
.brand-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.brand-chips span { border:1px solid var(--ink); padding:8px 9px; font:600 .66rem "IBM Plex Mono", monospace; }
.brand-board-wrap { border:1px solid var(--ink); padding:0; background:white; position:relative; cursor:zoom-in; box-shadow:10px 10px 0 var(--ink); transform:rotate(1.2deg); transition:.2s ease; }
.brand-board-wrap:hover { transform:rotate(0deg) translate(-2px,-2px); box-shadow:14px 14px 0 var(--spark); }
.brand-board-wrap img { width:100%; }
.board-zoom { position:absolute; right:12px; bottom:12px; background:var(--ink); color:white; padding:8px 10px; font-size:.62rem; }
.brand-dialog { width:min(92vw,900px); max-height:92vh; border:0; padding:0; background:transparent; overflow:auto; }
.brand-dialog::backdrop { background:rgba(10,10,10,.86); backdrop-filter:blur(5px); }
.brand-dialog img { width:100%; }
.dialog-close { position:fixed; right:24px; top:20px; border:1px solid white; background:var(--ink); color:white; width:44px; height:44px; font-size:1.7rem; cursor:pointer; z-index:3; }

.newsletter-block { margin:0 clamp(20px,5vw,80px) clamp(80px,10vw,140px); padding:clamp(42px,6vw,80px); background:var(--paper-2); border:1px solid var(--ink); position:relative; box-shadow:12px 12px 0 var(--ink); overflow:hidden; }
.newsletter-block::after { content:""; position:absolute; width:38%; height:26px; background:var(--spark); right:-4%; bottom:10%; transform:rotate(-4deg); }
.newsletter-block h2 { font-size:clamp(4rem,8vw,8.5rem); max-width:1050px; }
.newsletter-block p { font-size:1.1rem; }
.newsletter-stamp { display:inline-block; border:3px solid var(--spark); color:var(--spark); padding:7px 10px; font-weight:800; font-size:.66rem; transform:rotate(-3deg); margin-bottom:24px; }
.button.giant { margin-top:20px; font-size:1rem; padding:18px 22px; }
.newsletter-block small { display:block; margin-top:24px; font:500 .67rem "IBM Plex Mono",monospace; }

footer { border-top:1px solid var(--ink); padding:26px clamp(20px,5vw,80px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.footer-brand { font-family:"Bebas Neue", Impact,sans-serif; font-size:1.5rem; letter-spacing:.04em; }
footer p { font-size:.64rem; text-align:center; }
.footer-links { display:flex; justify-content:flex-end; gap:20px; font-size:.78rem; font-weight:700; }

@media (max-width: 1050px) {
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-art { min-height:500px; }
  .project-card, .project-card.featured { grid-column:span 6; }
  .manifesto, .brand-section { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .site-header { align-items:flex-start; }
  .nav a:not(.nav-cta) { display:none; }
  .hero { padding-top:60px; }
  .hero h1 { font-size:clamp(4.2rem,22vw,7.3rem); }
  .hero-art { min-height:360px; }
  .hero-note { left:2%; bottom:0; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading > p { justify-self:start; }
  .project-card, .project-card.featured { grid-column:1 / -1; }
  .project-visual, .featured .project-visual { min-height:300px; }
  .manifesto-list > div { grid-template-columns:42px 1fr; }
  footer { grid-template-columns:1fr; text-align:left; }
  footer p { text-align:left; }
  .footer-links { justify-content:flex-start; }
  .newsletter-block { box-shadow:7px 7px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* --- v1.1: founder story, Trust Nobody, and maintainable project system --- */

/* Give the moving maker strip the same visual inset as the rest of the site. */
.ticker {
  padding-inline: clamp(20px, 5vw, 80px);
}
.ticker-track {
  padding-block: 13px;
}

.builder-story {
  position: relative;
  border-top: 1px solid var(--ink);
  overflow: hidden;
}
.builder-story::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 20px;
  right: -45px;
  top: 15%;
  background: var(--spark);
  transform: rotate(-8deg);
  z-index: -1;
}
.builder-story-label {
  display: inline-block;
  margin-bottom: 42px;
  border: 1px solid var(--ink);
  padding: 8px 10px;
  font-size: .68rem;
  font-weight: 700;
  background: white;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1deg);
}
.builder-story-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(50px, 8vw, 130px);
  align-items: start;
}
.builder-story-headline h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(4.6rem, 8vw, 8.8rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.builder-story-headline h2 span {
  color: var(--spark);
}
.builder-scribble {
  display: inline-block;
  margin-top: 34px;
  padding: 10px 14px 8px;
  background: var(--acid);
  border: 1px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font: 700 .68rem "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  transform: rotate(-2deg);
}
.builder-story-copy {
  max-width: 650px;
  justify-self: end;
  padding-top: 24px;
}
.builder-story-copy p {
  margin: 0 0 20px;
  line-height: 1.72;
  color: #2d2d2d;
}
.builder-story-copy .story-lead {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -.015em;
}
.builder-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 32px;
}
.text-link {
  font-size: .72rem;
  font-weight: 700;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.text-link:hover { color: var(--spark); border-color: var(--spark); }

.trust-band {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  margin: 0;
  padding: clamp(34px, 5vw, 68px) clamp(20px, 5vw, 80px);
  background: var(--spark);
  color: var(--ink);
  border-block: 1px solid var(--ink);
  overflow: hidden;
  transform: rotate(.25deg) scale(1.005);
}
.trust-band::after {
  content: "NOBODY / NOBODY / NOBODY";
  position: absolute;
  right: -2%;
  bottom: -22px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(4rem, 10vw, 10rem);
  letter-spacing: .04em;
  opacity: .075;
  white-space: nowrap;
  pointer-events: none;
}
.trust-band > * { position: relative; z-index: 1; }
.trust-star {
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1;
  transform: rotate(12deg);
}
.trust-band p {
  margin: 0;
}
.trust-band > div > p {
  margin-bottom: 5px;
  font-size: .68rem;
  font-weight: 700;
}
.trust-band h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(4.8rem, 10vw, 10rem);
  line-height: .75;
  letter-spacing: -.025em;
}
.trust-band > p:last-child {
  max-width: 410px;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 700;
  justify-self: end;
}

@media (max-width: 1180px) {
  .nav { gap: 16px; font-size: .8rem; }
}

@media (max-width: 1050px) {
  .builder-story-grid { grid-template-columns: 1fr; }
  .builder-story-copy { justify-self: start; padding-top: 0; }
  .trust-band { grid-template-columns: auto 1fr; }
  .trust-band > p:last-child { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .ticker { padding-inline: 20px; }
  .builder-story-label { margin-bottom: 30px; }
  .builder-story-headline h2 { font-size: clamp(4.1rem, 19vw, 6.4rem); }
  .builder-actions { align-items: flex-start; flex-direction: column; }
  .trust-band { grid-template-columns: 1fr; gap: 12px; transform: none; }
  .trust-star { position: absolute; right: 20px; top: 18px; font-size: 3rem; }
  .trust-band > p:last-child { grid-column: 1; max-width: 320px; }
  .trust-band h2 { font-size: clamp(5rem, 24vw, 8rem); }
}