@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  --paper: #f3f0ea;
  --ink: #24211d;
  --muted: #77726a;
  --line: rgba(36, 33, 29, .16);
  --acid: #d9f45b;
  --lilac: #b9a7ff;
  --coral: #f39476;
  --blue: #a9d9e9;
  --night: #24233a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.grain {
  position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .08;
  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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.page-shell { max-width: 1440px; margin: auto; padding: 0 5vw; overflow: hidden; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 13px; letter-spacing: -.02em; }
.wordmark-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--ink); border-radius: 50%; font-family: 'DM Mono', monospace; font-size: 10px; }
.topbar-note, .eyebrow, .card-topline, .hero-fact, .footer { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.topbar-note { color: var(--muted); margin: 0; }
.text-button { border: 0; padding: 8px 0; background: transparent; color: var(--ink); font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.text-button span, .primary-button span { display: inline-block; margin-left: 8px; transition: transform .2s ease; }
.text-button:hover span, .primary-button:hover span { transform: translate(3px, -3px); }
.hero { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: 4vw; padding: 75px 0 105px; }
.eyebrow { color: var(--muted); margin: 0 0 23px; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #77bd59; box-shadow: 0 0 0 4px rgba(119,189,89,.15); margin-right: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 31px; max-width: 710px; font-size: clamp(62px, 8.6vw, 132px); line-height: .85; letter-spacing: -.08em; font-weight: 600; }
h1 em, h2 em { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.08em; }
.hero-description { max-width: 430px; color: #5f5a52; font-size: 17px; line-height: 1.55; }
.hero-description strong { color: var(--ink); font-weight: 600; }
.hero-cta-row { display: flex; align-items: center; gap: 29px; margin-top: 38px; }
.primary-button { display: inline-flex; align-items: center; background: var(--ink); color: var(--paper); padding: 16px 19px; font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; transition: background .2s ease, transform .2s ease; }
.primary-button:hover { background: #48423b; transform: translateY(-2px); }
.hero-fact { display: flex; flex-direction: column; gap: 7px; color: var(--muted); line-height: 1.2; }
.hero-fact strong { font-size: 11px; color: var(--ink); font-weight: 500; letter-spacing: 0; text-transform: none; }
.hero-art { position: relative; width: min(100%, 545px); aspect-ratio: 1 / 1; margin: 0 auto; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle at 48% 47%, rgba(255,255,255,.85), rgba(229,223,213,.3) 42%, transparent 43%), conic-gradient(from 20deg, rgba(185,167,255,.33), transparent 20%, rgba(243,148,118,.3) 47%, transparent 66%, rgba(169,217,233,.38)); }
.hero-art:before, .hero-art:after { content: ''; position: absolute; inset: 8%; border: 1px dashed rgba(36,33,29,.16); border-radius: 50%; }
.hero-art:after { inset: 26%; border-style: solid; border-color: rgba(36,33,29,.09); }
.orbit { position: absolute; border: 1px solid rgba(36,33,29,.23); border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { inset: 12% 2%; transform: rotate(18deg); }
.orbit-two { inset: 3% 22%; transform: rotate(59deg); }
.orbit-three { inset: 28% 13%; transform: rotate(-42deg); border-color: rgba(36,33,29,.34); }
.orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 7px rgba(36,33,29,.08); }
.orbit-one i { right: 10%; top: 14%; background: var(--coral); }
.orbit-two i { left: 8%; bottom: 15%; background: var(--lilac); }
.orbit-three i { right: 20%; bottom: 5%; background: var(--blue); }
.art-core { position: absolute; inset: 38%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--ink); color: var(--paper); border-radius: 50%; z-index: 1; }
.art-core span { font-family: 'Fraunces', serif; font-size: 58px; line-height: .8; }
.art-core small { margin-top: 9px; font-family: 'DM Mono', monospace; text-transform: uppercase; font-size: 9px; letter-spacing: .11em; color: var(--acid); }
.art-label { position: absolute; z-index: 2; font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.art-label-top { top: 13%; left: 5%; transform: rotate(-12deg); }
.art-label-bottom { right: 2%; bottom: 16%; transform: rotate(25deg); }
.shelf { padding: 75px 0 120px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 46px; }
.section-heading h2 { margin: 0; font-size: clamp(43px, 5.3vw, 75px); line-height: .88; letter-spacing: -.08em; font-weight: 600; }
.section-rule { display: inline-block; width: 54px; height: 1px; background: var(--muted); vertical-align: middle; margin-left: 10px; }
.section-aside { color: var(--muted); font-size: 13px; line-height: 1.45; text-align: right; margin: 0 1px 4px; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.project-card { min-height: 410px; grid-column: span 4; display: flex; flex-direction: column; padding: 17px; border: 1px solid rgba(36,33,29,.09); transition: transform .3s ease, box-shadow .3s ease; overflow: hidden; }
.project-card:nth-child(4), .project-card:nth-child(5) { grid-column: span 6; min-height: 430px; }
.project-card:hover { transform: translateY(-6px) rotate(-.3deg); box-shadow: 0 20px 45px rgba(36,33,29,.12); }
.card-orbit { background: var(--lilac); }
.card-weather { background: #ffc4a7; }
.card-game { background: #223b52; color: #e8f4ec; }
.card-type { background: #d8ed64; }
.card-radio { background: #e1d8fb; }
.card-topline { display: flex; justify-content: space-between; opacity: .66; }
.card-visual { flex: 1; position: relative; min-height: 210px; overflow: hidden; }
.card-copy { border-top: 1px solid rgba(36,33,29,.2); padding-top: 16px; }
.card-copy h3 { font-size: 31px; margin-bottom: 6px; letter-spacing: -.06em; line-height: 1; font-weight: 600; }
.card-copy p { margin-bottom: 18px; font-size: 13px; opacity: .7; }
.card-link { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; }
.visual-orbit:before, .visual-orbit:after { content: ''; position: absolute; border: 1px solid rgba(36,33,29,.46); border-radius: 50%; transform: rotate(-20deg); }
.visual-orbit:before { width: 280px; height: 130px; left: 6%; top: 23%; }
.visual-orbit:after { width: 190px; height: 250px; left: 25%; top: -13%; transform: rotate(34deg); }
.visual-orbit span { position: absolute; width: 83px; height: 83px; top: 31%; left: 42%; border-radius: 50%; background: var(--ink); }
.visual-orbit i, .visual-orbit b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); top: 23%; left: 25%; }
.visual-orbit b { background: var(--blue); left: 72%; top: 57%; }
.visual-weather .weather-sun { position: absolute; width: 92px; height: 92px; background: #ffe077; border-radius: 50%; top: 23%; left: 18%; }
.visual-weather .weather-cloud { position: absolute; width: 160px; height: 51px; background: #f3f0ea; border-radius: 40px; left: 35%; top: 48%; box-shadow: 30px -27px 0 -8px #f3f0ea, -30px -10px 0 -13px #f3f0ea; }
.weather-drop { position: absolute; width: 6px; height: 19px; background: #7cbcc9; border-radius: 8px; transform: rotate(24deg); top: 75%; left: 48%; }
.drop-two { left: 62%; top: 83%; }
.visual-game { background: repeating-linear-gradient(156deg, transparent 0 25px, rgba(146,224,199,.08) 26px 27px); margin: -17px -17px 0; padding: 17px; min-height: 240px; }
.game-moon { position: absolute; width: 72px; height: 72px; background: #fdeca2; border-radius: 50%; top: 15%; right: 18%; box-shadow: 0 0 34px rgba(253,236,162,.3); }
.game-boat { position: absolute; left: 18%; bottom: 27%; width: 98px; height: 28px; background: #e88867; border-radius: 0 0 45px 45px; transform: rotate(-7deg); }
.game-boat:before { content: ''; position: absolute; width: 4px; height: 66px; background: #e8f4ec; bottom: 12px; left: 48px; transform: rotate(17deg); }
.visual-game i, .visual-game b, .visual-game em { position: absolute; width: 7px; height: 7px; background: #eff99f; border-radius: 50%; box-shadow: 0 0 15px 5px rgba(239,249,159,.55); }
.visual-game i { left: 57%; top: 32%; }.visual-game b { left: 75%; top: 66%; }.visual-game em { left: 34%; top: 72%; }
.visual-type { display: flex; align-items: center; justify-content: center; }
.visual-type span { font-size: clamp(46px, 8vw, 96px); font-weight: 700; letter-spacing: -.12em; transform: rotate(-13deg); position: relative; z-index: 1; }
.visual-type i, .visual-type b { position: absolute; border-radius: 45% 55% 50% 50%; width: 86px; height: 135px; border: 2px solid var(--ink); transform: rotate(36deg); right: 11%; top: 11%; }
.visual-type b { left: 12%; top: 57%; width: 65px; height: 96px; transform: rotate(-40deg); }
.visual-radio { background: linear-gradient(135deg, transparent 49%, rgba(36,33,29,.08) 50%, transparent 51%); }
.radio-sun { position: absolute; width: 115px; height: 115px; background: #ff866b; border-radius: 50%; top: 15%; left: 12%; box-shadow: 30px 30px 0 -8px #f5b9dd; }
.radio-dial { position: absolute; width: 180px; height: 180px; border: 1px solid var(--ink); border-radius: 50%; right: 8%; top: 12%; background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, rgba(36,33,29,.35) 9deg 10deg); }
.visual-radio i, .visual-radio b, .visual-radio em { position: absolute; width: 30px; height: 2px; background: var(--ink); right: 27%; top: 47%; transform: rotate(-25deg); }.visual-radio b { right: 20%; top: 61%; width: 45px; transform: rotate(20deg); }.visual-radio em { right: 43%; top: 69%; width: 18px; transform: rotate(-45deg); }
.maker-label {
  margin: 0 0 16px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color: var(--muted);
}
.shelf-break { margin-top: 88px; padding-top: 54px; border-top: 1px solid var(--line); }
.card-beacon { background: #041018; color: #d7f6ff; }
.card-fault { background: #111000; color: #e8ff3a; }
.card-bazaar { background: #1a0714; color: #ffe6f4; }
.card-sat { background: #160814; color: #ffe9c8; }
.card-echo { background: #07101c; color: #e7f3ff; }
.card-moth { background: #211f20; color: #eee9df; }
.card-museum { background: #ead9b8; }
.card-cloud { background: #c9dce8; }
.card-apology { background: #f1d4c8; }
.card-kitchen { background: #1c2430; color: #e8f0ea; }
.card-drift { background: #0a1f33; color: #e6eef3; }
.card-lumen { background: #041018; color: #ffd470; }
.visual-beacon { background: #02080e; }
.visual-beacon i { position:absolute; left:50%; top:50%; border:1px solid #3ee0ff; border-radius:50%; transform:translate(-50%,-50%); }
.visual-beacon i:nth-child(1){ width:40px; height:40px; }
.visual-beacon i:nth-child(2){ width:96px; height:96px; opacity:.5; }
.visual-beacon i:nth-child(3){ width:160px; height:160px; opacity:.2; }
.visual-fault { display:grid; place-items:center; background:#090900; }
.visual-fault span { font-family:'Syne',sans-serif; font-size:110px; font-weight:800; color:#e8ff3a; letter-spacing:-.08em; }
.visual-bazaar { background:#12040e; }
.visual-bazaar span { position:absolute; bottom:30%; width:44px; height:44px; border-radius:50%; background:#ff5aa8; }
.visual-bazaar span:nth-child(1){ left:22%; }
.visual-bazaar span:nth-child(2){ left:42%; bottom:40%; }
.visual-bazaar span:nth-child(3){ left:62%; }
.visual-sat { background:#0c050e; }
.visual-sat span { position:absolute; bottom:22%; width:48px; height:86px; background:#241018; border:1px solid #ff6bd6; }
.visual-sat span:nth-child(1){ left:18%; }
.visual-sat span:nth-child(2){ left:42%; height:102px; }
.visual-sat span:nth-child(3){ left:66%; }
.visual-sat span:before { content:''; position:absolute; left:8px; top:10px; right:8px; height:28px; background:#ff6bd6; opacity:.75; }
.visual-echo { background: radial-gradient(circle at 50% 60%, #123048, #07101c); }
.visual-echo i { position:absolute; inset:18%; border:2px solid rgba(92,225,255,.5); border-radius:50%; }
.visual-echo b { position:absolute; width:18px; height:18px; left:46%; top:40%; border-radius:50%; background:#ffd36a; box-shadow:0 0 16px #ffd36a; }
.visual-moth i, .visual-moth b { position: absolute; border-radius: 50%; }
.visual-moth i { width: 70px; height: 28px; background: #e8a85d; left: 28%; top: 38%; transform: rotate(-18deg); }
.visual-moth b { width: 12px; height: 12px; background: #eee9df; left: 58%; top: 42%; box-shadow: 0 0 18px #eee9df; }
.visual-museum span {
  position: absolute; width: 54px; height: 72px; border: 2px solid #24211d; background: #f3f0ea; top: 28%;
}
.visual-museum span:nth-child(1) { left: 18%; transform: rotate(-8deg); }
.visual-museum span:nth-child(2) { left: 40%; top: 22%; height: 86px; }
.visual-museum span:nth-child(3) { left: 64%; transform: rotate(7deg); }
.visual-cloud span {
  position: absolute; width: 170px; height: 54px; background: #f3f0ea; border-radius: 40px;
  left: 18%; top: 38%; box-shadow: 36px -24px 0 -8px #f3f0ea, -28px -8px 0 -12px #f3f0ea;
}
.visual-apology { display: grid; place-items: center; }
.visual-apology span { font-size: 64px; font-weight: 700; letter-spacing: -.08em; transform: rotate(-8deg); }
.visual-kitchen i {
  position: absolute; inset: 22%; border: 1px dashed rgba(232,240,234,.4); border-radius: 50%;
}
.visual-kitchen b {
  position: absolute; width: 36px; height: 10px; background: #e8a85d; left: 42%; top: 46%;
  border-radius: 4px; box-shadow: 0 14px 0 #f3f0ea;
}
.visual-drift { background: radial-gradient(circle at 38% 50%, #2bb0c222, transparent 60%), radial-gradient(circle at 50% 105%, #1c4a6b, #0a1f33 70%); }
.visual-drift i { position: absolute; width: 92px; height: 16px; background: #eaf2ea; left: 26%; top: 58%; border-radius: 8px; transform: rotate(-14deg); box-shadow: 0 0 12px #eaf2ea; }
.visual-drift b { position: absolute; width: 14px; height: 20px; background: #f78b75; left: 60%; top: 50%; border-radius: 3px 3px 0 0; }
.visual-drift em { position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%; top: 26%; left: 78%; box-shadow: 8px -6px 0 #fff, -14px 4px 0 #fff, 6px 12px 0 #fff, -22px -2px 0 #fff; }
.card-beacon .card-copy, .card-fault .card-copy, .card-bazaar .card-copy, .card-sat .card-copy, .card-echo .card-copy, .card-moth .card-copy, .card-kitchen .card-copy, .card-drift .card-copy, .card-lumen .card-copy {
  border-top-color: rgba(243,240,234,.2);
}
.manifesto { padding: 78px 0 94px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifesto blockquote { max-width: 870px; margin: 0 0 44px; font-family: 'Fraunces', Georgia, serif; font-size: clamp(38px, 5.7vw, 78px); line-height: .98; letter-spacing: -.065em; }
.manifesto-foot { display: flex; justify-content: space-between; color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.footer { display: flex; justify-content: space-between; padding: 28px 0; color: var(--muted); }
.footer a { color: var(--ink); }

@media (max-width: 800px) {
  .page-shell { padding: 0 22px; }
  .topbar-note { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding: 64px 0 80px; gap: 58px; }
  .hero-art { width: min(82vw, 450px); align-self: center; }
  h1 { font-size: clamp(61px, 17vw, 100px); }
  .section-heading { align-items: start; flex-direction: column; gap: 22px; }
  .section-aside { text-align: left; }
  .project-grid { display: grid; grid-template-columns: 1fr; }
  .project-card, .project-card:nth-child(4), .project-card:nth-child(5) { grid-column: auto; min-height: 380px; }
  .manifesto-foot { flex-direction: column; gap: 11px; }
  .footer { gap: 14px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}