@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Mono:wght@400;500&family=Inter:wght@400;600;700;800&display=swap');

:root{
  --ink:#101014;
  --paper:#f4edda;
  --yellow:#f6d743;
  --red:#ef4b35;
  --cyan:#20c9c7;
  --white:#fffaf0;
  --muted:#635f55;
  --border:4px solid var(--ink);
  --shadow:8px 8px 0 var(--ink);
  --display:"Barlow Condensed", Impact, sans-serif;
  --body:Inter, Arial, sans-serif;
  --mono:"DM Mono", monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
::selection{background:var(--red);color:var(--white)}

.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:20;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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{border-bottom:var(--border);background:var(--yellow);position:sticky;top:0;z-index:15}
.topbar .wrap{height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font:900 25px var(--display);letter-spacing:.04em}
.logo span{display:inline-block;background:var(--ink);color:var(--yellow);padding:2px 7px;transform:rotate(-2deg)}
nav{display:flex;gap:18px;font:500 12px var(--mono);text-transform:uppercase}
nav a{text-decoration:none;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--ink)}

.hero{padding:68px 0 78px;border-bottom:var(--border);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:38px;align-items:end}
.kicker{font:500 13px var(--mono);text-transform:uppercase;margin-bottom:18px}
.kicker::before{content:"●";color:var(--red);margin-right:8px}
h1{font:900 clamp(65px,10vw,142px)/.78 var(--display);text-transform:uppercase;letter-spacing:-.045em;margin:0;max-width:850px}
.hero h1 .stroke{-webkit-text-stroke:3px var(--ink);color:transparent}
.hero-copy{font-size:18px;line-height:1.45;max-width:630px;margin:28px 0 0}
.tagline-options{margin-top:28px;display:grid;gap:8px;max-width:650px}
.tagline{font:500 12px var(--mono);border-left:5px solid var(--red);padding:9px 12px;background:var(--white)}
.tagline b{color:var(--red)}
.hero-side{border:var(--border);background:var(--cyan);padding:22px;box-shadow:var(--shadow);transform:rotate(1.5deg)}
.hero-side .screen{aspect-ratio:1/1;background:var(--ink);border:3px solid var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}
.crosshair{font:900 95px var(--display);color:var(--yellow);line-height:1}
.hero-side p{font:500 11px var(--mono);line-height:1.5;margin:16px 0 0}
.tape{position:absolute;background:var(--yellow);border:3px solid var(--ink);padding:5px 12px;font:700 11px var(--mono);transform:rotate(-5deg)}
.tape.a{top:15px;right:-30px}.tape.b{bottom:20px;left:-25px;transform:rotate(7deg);background:var(--red);color:var(--white)}

section{padding:80px 0;border-bottom:var(--border)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px}
.eyebrow{font:500 11px var(--mono);text-transform:uppercase;margin-bottom:7px}
h2{font:900 clamp(45px,7vw,88px)/.82 var(--display);margin:0;text-transform:uppercase;letter-spacing:-.03em}
.section-note{max-width:380px;font-size:13px;line-height:1.5}

.flagship{background:var(--red)}
.flagship .section-head{color:var(--white)}
.flagship .eyebrow{color:var(--yellow)}
.flagship-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.media{border:var(--border);background:var(--ink);box-shadow:var(--shadow);position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* .media::before{content:"GAMEPLAY MEDIA SLOT";font:700 13px var(--mono);letter-spacing:.12em;color:var(--yellow);border:2px dashed var(--yellow);padding:16px;transform:rotate(-4deg)} */
.media .hud{position:absolute;inset:15px;pointer-events:none;font:700 10px var(--mono);color:var(--white)}
.hud span{position:absolute}.hud .tl{top:0;left:0}.hud .tr{top:0;right:0}.hud .bl{bottom:0;left:0}.hud .br{bottom:0;right:0}
.flagship-info{border:var(--border);background:var(--paper);padding:28px;box-shadow:var(--shadow)}
.flagship-info h3{font:900 47px/.85 var(--display);text-transform:uppercase;margin:0 0 20px}
.flagship-info p{font-size:14px;line-height:1.55}
.specs{display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--ink);margin-top:20px}
.spec{padding:14px 8px 14px 0;border-bottom:2px solid var(--ink)}
.spec:nth-child(odd){border-right:2px solid var(--ink);padding-right:12px}
.spec:nth-child(even){padding-left:12px}
.spec b{display:block;font:900 13px var(--display);text-transform:uppercase}.spec small{font:400 10px var(--mono)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tag{font:500 10px var(--mono);background:var(--ink);color:var(--white);padding:6px 8px}
.button{display:inline-block;margin-top:20px;background:var(--yellow);border:var(--border);padding:12px 17px;text-decoration:none;font:900 14px var(--display);text-transform:uppercase;box-shadow:5px 5px 0 var(--ink)}
.button:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

.games{background:var(--paper)}
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.game-card{border:var(--border);background:var(--white);box-shadow:var(--shadow);position:relative;transition:transform .15s}
.game-card:hover{transform:rotate(-.7deg)}
.game-art{aspect-ratio:16/9;height:auto;background:var(--ink);display:grid;place-items:center;border-bottom:var(--border);position:relative;overflow:hidden}
.game-art .slot{color:var(--yellow);font:500 11px var(--mono);border:2px dashed var(--yellow);padding:12px}
.game-art .icon{position:absolute;font:900 80px var(--display);opacity:.9}
.game-card:nth-child(1) .game-art{background:var(--cyan)}.game-card:nth-child(2) .game-art{background:var(--yellow)}
.game-card:nth-child(3) .game-art{background:var(--red)}.game-card:nth-child(4) .game-art{background:#b9d7d5}
.game-card:nth-child(5) .game-art{background:#e1bb4e}
.card-body{padding:22px}
.card-num{font:500 10px var(--mono);color:var(--muted)}
.card-body h3{font:900 36px/.9 var(--display);text-transform:uppercase;margin:8px 0 10px}
.hook{font-weight:800;font-size:14px;margin-bottom:16px}
.card-body ul{padding-left:18px;margin:0;font-size:12px;line-height:1.6}
.card-body .tags{margin-top:17px}
.card-link{font:700 11px var(--mono);display:inline-block;margin-top:18px;text-transform:uppercase;text-decoration-thickness:2px}

.cooking{background:var(--cyan)}
.cook-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cook{border:var(--border);background:var(--white);padding:20px;box-shadow:5px 5px 0 var(--ink);position:relative}
.cook:after{content:"WIP";position:absolute;top:12px;right:-7px;background:var(--red);color:var(--white);border:3px solid var(--ink);padding:4px 8px;font:900 11px var(--mono);transform:rotate(4deg)}
.cook h3{font:900 33px/.9 var(--display);text-transform:uppercase;margin:0 0 12px;padding-right:30px}
.cook p{font-size:12px;line-height:1.55}
.cook .status{font:500 10px var(--mono);border-top:2px solid var(--ink);padding-top:12px;margin-top:18px}

.about{background:var(--ink);color:var(--white)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px}
.about h2{color:var(--yellow)}
.devlog{border:var(--border);padding:20px;background:var(--yellow);color:var(--ink);box-shadow:var(--shadow);transform:rotate(-1deg)}
.devlog p{font:500 13px/1.6 var(--mono)}
.skills{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.skill{border:2px solid var(--white);padding:9px 11px;font:500 11px var(--mono)}
.about-copy{font-size:16px;line-height:1.65;max-width:700px}.about-copy strong{color:var(--yellow)}
.skill-label{font:700 12px var(--mono);margin-top:25px;text-transform:uppercase}

.content{background:var(--yellow)}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.content-card{border:var(--border);background:var(--white);padding:25px;box-shadow:var(--shadow)}
.content-card h3{font:900 43px/.85 var(--display);text-transform:uppercase;margin:0 0 12px}
.content-card p{font-size:13px;line-height:1.55}
.content-card a{font:700 11px var(--mono);text-transform:uppercase}

footer{background:var(--red);color:var(--white);padding:75px 0 35px}
.footer-main{display:flex;justify-content:space-between;align-items:end;gap:30px}
footer h2{color:var(--yellow);max-width:700px}
.footer-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.footer-links a{border:3px solid var(--white);padding:10px 13px;text-decoration:none;font:700 11px var(--mono)}
.footer-links a:hover{background:var(--white);color:var(--red)}
.footnote{margin-top:60px;border-top:2px solid var(--white);padding-top:15px;font:400 10px var(--mono);display:flex;justify-content:space-between}

@media(max-width:800px){

  .topbar .wrap{
    height:auto;
    min-height:58px;
    padding:10px 0;
    gap:10px;
  }

  .topbar nav{
    display:flex;
    gap:8px;
    font-size:9px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .hero{padding:50px 0}.hero-grid,.flagship-grid,.about-grid,.content-grid{grid-template-columns:1fr}
  .hero-side{max-width:330px;margin:10px auto 0}.game-grid{grid-template-columns:1fr}.cook-grid{grid-template-columns:1fr}
  .media{min-height:300px}.section-head{display:block}.section-note{margin-top:15px}
  .footer-main{display:block}
}
@media(max-width:500px){
  .wrap{width:min(100% - 22px,1180px)}section{padding:55px 0}
  h1{font-size:65px}.flagship-info h3{font-size:39px}.game-art{aspect-ratio:16/9;height:auto}
  .specs{grid-template-columns:1fr}.spec:nth-child(odd){border-right:0;padding-right:0}.spec:nth-child(even){padding-left:0}
  .footnote{display:block}.footnote span{display:block;margin-top:8px}
}
/* Scalable media */
.game-media,.game-media img,.game-media video{width:100%;height:100%}
.game-media{position:absolute;inset:0;overflow:hidden}
.game-media img,.game-media video{object-fit:cover;display:block}
.game-media-placeholder{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.game-art .game-media-placeholder{color:var(--yellow);font:500 11px var(--mono);z-index:2}
.game-art.has-media .game-media-placeholder{display:none}


/* MP4 / WebM gameplay media */
.game-media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.game-media .video-fallback{
  display:none;
}


/* =========================================================
   MULTI-PAGE PROJECTS
   Same visual language; deeper project pages.
   ========================================================= */
.project-hero{padding:64px 0 72px;border-bottom:var(--border);background:var(--red)}
.project-hero.yellow{background:var(--yellow)}
.project-hero.cyan{background:var(--cyan)}
.project-top{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:end}
.project-label{font:500 12px var(--mono);text-transform:uppercase;margin-bottom:14px}
.project-title{font:900 clamp(58px,8vw,110px)/.8 var(--display);text-transform:uppercase;letter-spacing:-.045em;margin:0;max-width:850px}
.project-hook{font:800 clamp(19px,2.2vw,28px)/1.08 var(--display);text-transform:uppercase;margin:24px 0 0;max-width:700px}
.project-intro{font-size:17px;line-height:1.5;max-width:560px;border:var(--border);background:var(--white);padding:24px;box-shadow:var(--shadow);transform:rotate(1deg)}
.project-media{border:var(--border);background:var(--ink);box-shadow:var(--shadow);margin-top:40px;aspect-ratio:16/9;position:relative;overflow:hidden}
.project-media video,.project-media img{width:100%;height:100%;display:block;object-fit:cover}
.project-media .media-empty{height:100%;display:grid;place-items:center;color:var(--yellow);font:500 12px var(--mono);text-align:center;padding:20px}
.project-body{padding:72px 0}
.project-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:54px}
.project-body h2{font-size:58px;margin-bottom:20px}
.project-copy{font-size:18px;line-height:1.6;max-width:720px}
.project-copy p{margin:0 0 22px}
.system-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:var(--border)}
.system-item{font:700 13px var(--mono);padding:15px 10px;border-bottom:3px solid var(--ink);text-transform:uppercase}
.project-aside{border:var(--border);background:var(--yellow);padding:22px;box-shadow:var(--shadow);align-self:start}
.project-aside h3{font:900 37px/.9 var(--display);text-transform:uppercase;margin:0 0 20px}
.project-bullets{margin:0;padding-left:19px;line-height:1.65}
.project-bullets li{margin-bottom:10px}
.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}
.project-tag{background:var(--ink);color:var(--white);font:700 10px var(--mono);padding:6px 8px}
.project-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.project-button{display:inline-block;background:var(--yellow);border:var(--border);box-shadow:6px 6px 0 var(--ink);padding:13px 17px;font:800 12px var(--mono);text-decoration:none;text-transform:uppercase}
.project-button.dark{background:var(--ink);color:var(--white);box-shadow:6px 6px 0 var(--red)}
.project-button:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.project-note{border-left:7px solid var(--red);background:var(--paper);padding:16px 18px;font:500 12px/1.6 var(--mono);margin-top:28px}
.back-row{padding:18px 0;border-bottom:var(--border);background:var(--paper)}
.back-row a{font:700 11px var(--mono);text-decoration:none;text-transform:uppercase}
.back-row a:hover{text-decoration:underline}
.site-footer{padding:54px 0;background:var(--ink);color:var(--white)}
.site-footer .logo span{background:var(--yellow);color:var(--ink)}
.footer-grid{display:flex;justify-content:space-between;gap:30px;align-items:end}
.footer-small{font:500 11px/1.5 var(--mono);max-width:420px}
@media(max-width:800px){
  .project-top,.project-grid{grid-template-columns:1fr}
  .project-media{aspect-ratio:16/9}
  .system-list{grid-template-columns:1fr}
  .footer-grid{display:grid}
}
.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.card-actions .card-link{margin-top:0}
.card-actions .secondary{background:transparent;color:var(--ink)}

.button.secondary{background:transparent;color:var(--ink);margin-left:4px}
#flagship-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Cooking project media variants */
.game-art.paper{background:var(--paper)}
.game-art.yellow{background:var(--yellow)}
.game-art.red{background:var(--red)}
.game-art.white{color:var(--white)}
.game-art > video,.game-art > img{width:100%;height:100%;object-fit:cover;display:block}
/* .hero-side .screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} */