:root {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #171717;
  --text: #E8E6E1;
  --muted: #8D8A84;
  --accent: #5F86F2;
  --border: #1E1E1E;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Plus Jakarta Sans', sans-serif;
  --max: 1440px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img, video, iframe { display: block; width: 100%; }
img, video { height: 100%; object-fit: cover; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: #333; }
.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px 72px;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-logo { font-weight: 800; font-size: 16px; letter-spacing: -0.5px; }
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.page-head {
  padding: 34px 0 14px;
  border-bottom: 1px solid var(--border);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.project-title {
  font-size: clamp(34px, 5.4vw, 68px);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.94;
  max-width: 900px;
}
.summary {
  margin-top: 14px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.68;
  color: #A19D95;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.meta-row.compact { margin-top: 8px; }
.pill {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
}
.pill-hot { border-color: var(--accent); color: var(--accent); }
.hero-wrap {
  margin-top: 18px;
  max-width: 980px;
}
.hero {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.hero.video { aspect-ratio: 16 / 8.9; max-height: 620px; }
.hero.brand { aspect-ratio: 16 / 8.4; max-height: 620px; }
.hero iframe { height: 100%; border: 0; }
.hero img { height: 100%; }
.section { padding-top: 18px; }
.section-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.copy {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.72;
  color: #A19D95;
}
.copy-spaced { margin-top: 12px; }
.frame-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1040px;
}
.frame {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.frame img { height: 100%; }
.footer {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}
.footer-links a:hover { color: var(--text); }
@media (max-width: 900px) {
  .shell { padding: 0 22px 56px; }
}
@media (max-width: 640px) {
  .shell { padding: 0 16px 40px; }
  .nav-links { display: none; }
  .page-head { padding: 26px 0 12px; }
  .project-title { font-size: 40px; }
  .summary { font-size: 14px; }
  .hero.video, .hero.brand { aspect-ratio: 16 / 10.6; max-height: none; }
  .frame-grid { grid-template-columns: 1fr; gap: 12px; }
}


.page-body{padding-top:18px;max-width:760px}
.frame-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.frame-grid.frame-grid-tight{max-width:1160px}
.copy-stack{display:grid;gap:12px}
.copy-stack .copy{max-width:760px}
@media (max-width:900px){
  .frame-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.nav-toggle{display:none}
body.nav-open{overflow:hidden}
@media (max-width:640px){
  .nav{position:sticky}
  .nav-links{display:flex;position:fixed;top:0;right:-280px;left:auto;bottom:0;width:260px;padding:84px 24px 24px;background:rgba(12,12,12,.98);border-left:1px solid var(--border);border-bottom:none;flex-direction:column;gap:18px;z-index:220;transition:right .22s ease}
  .nav-links.open{right:0}
  .nav-toggle{display:block;position:relative;z-index:230;background:none;border:none;width:24px;height:18px;cursor:pointer}
  .nav-toggle span{display:block;width:100%;height:2px;background:var(--text);position:absolute;left:0;transition:transform .2s ease,opacity .2s ease}
  .nav-toggle span:first-child{top:3px}
  .nav-toggle span:last-child{bottom:3px}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-5px) rotate(-45deg)}
  .nav::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.56);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:210}
  body.nav-open .nav::after{opacity:1;pointer-events:auto}
}


.hero-clean{background:#d7d8c9}.hero-clean img{object-fit:contain;padding:clamp(24px,5vw,56px)}
.hero-plain{display:block;overflow:hidden}
.hero-plain img{display:block;width:100%;height:auto;object-fit:contain}
.hero-wrap-hype{max-width:520px;margin-left:auto;margin-right:auto;margin-top:22px}
.hero-plain-hype{background:transparent;border:none}
.hero-vuse img{object-fit:cover}
.hero-wrap-vuse{max-width:920px}
.frame-grid-2 .frame{aspect-ratio:16 / 10.2}
.section-gallery{padding-top:20px}
.section-embeds{padding-top:20px}
.embed-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px}
@media (max-width:640px){.embed-grid-2{grid-template-columns:1fr}}


.hero-wrap-centered{margin-left:auto;margin-right:auto}
.hero-wrap-narrow{max-width:720px}
.hero.poster-square{aspect-ratio:1 / 1;max-height:none}
.hero.poster-square img{object-fit:contain;padding:clamp(24px,5vw,48px)}

.embed-card{border:1px solid var(--border);background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.embed-frame{position:relative;aspect-ratio:16 / 9;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--border)}
.embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-info{padding:12px 14px 14px;display:grid;gap:4px}
.embed-name{font-size:13px;font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.embed-name:hover{color:var(--accent)}
.embed-role{font-family:var(--mono);font-size:9px;letter-spacing:0.4px;text-transform:uppercase;color:var(--muted)}

.frame-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px}

@media (max-width:640px){
  .hero-wrap-narrow{max-width:100%}
  .embed-info{padding:10px 12px 12px}
  .frame-grid-2{grid-template-columns:1fr}
}

.hero img,.frame img{object-fit:contain;object-position:center center;background:var(--surface)}
.frame{display:flex;align-items:center;justify-content:center}
.frame img{width:100%;height:100%}
.frame-tall{aspect-ratio:4 / 5}
.frame-square{aspect-ratio:1 / 1}
.frame-gif{background:#050505}
.frame-grid-raiku{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px}
@media (max-width:640px){.frame-grid-raiku{grid-template-columns:1fr}}
.hero-vuse img{object-fit:contain}


/* apr10 project media fixes */
.hero-static{display:block;background:var(--surface)}
.hero-static img{width:100%;height:auto !important;object-fit:contain !important;object-position:center center}
.hero-static-arc,.hero-static-vuse{max-height:none}
.hero-wrap-arc{max-width:1120px}
.hero-wrap-vuse-static{max-width:980px}
.frame-fluid{aspect-ratio:auto !important;display:block}
.frame-fluid img{width:100%;height:auto !important;object-fit:contain !important;background:transparent}
.frame-grid-arc{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1240px;align-items:start}
.frame-grid-vuse{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;align-items:start}
.frame-grid-vuse .frame-tall{grid-row:span 2}
@media (max-width:900px){.frame-grid-arc,.frame-grid-vuse{grid-template-columns:1fr}}



/* apr11 consistency + no-crop safeguards */
.hero img,.frame img{
  object-fit:contain !important;
  object-position:center center !important;
  width:100%;
  height:auto !important;
  background:var(--surface);
}
.frame{
  aspect-ratio:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.frame-fluid{
  aspect-ratio:auto !important;
  display:block;
}
.frame-fluid img{
  width:100%;
  height:auto !important;
  object-fit:contain !important;
}
.frame-grid{
  align-items:start;
}
.frame-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1120px;
}
.frame-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:1120px;
}
.frame-grid-raiku-boards{margin-top:14px}
.frame-grid-raiku-gifs{margin-top:14px}
.frame-grid-vuse{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1120px;
  align-items:start;
}
.frame-grid-vuse .frame{grid-row:auto !important}
.hero-wrap-hype{display:none !important}
@media (max-width:900px){
  .frame-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .frame-grid-2,.frame-grid-3,.frame-grid-vuse,.frame-grid-raiku-boards,.frame-grid-raiku-gifs{
    grid-template-columns:1fr !important;
  }
}