@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --deep: #171717;
  --night: #1d1f20;
  --navy: #292b2c;
  --sage: #6b7f6b;
  --sand: #d4c3a1;
  --sunset: #f4a261;
  --offwhite: #f8f6f3;
  --muted: #aab3c1;
  --line: rgba(248,246,243,.16);
  --edge: clamp(1.25rem,4.2vw,4.25rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); }
body { margin: 0; overflow-x: hidden; background: var(--deep); color: var(--offwhite); font-family: "Manrope",sans-serif; font-size: 1rem; line-height: 1.55; }
body::selection { background: var(--sunset); color: var(--deep); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 120; padding: .75rem 1rem; background: var(--offwhite); color: var(--deep); }
.skip-link:focus { top: 1rem; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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)' opacity='.75'/%3E%3C/svg%3E"); background-size: 160px; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 90; height: 4.75rem; display: grid; grid-template-columns: minmax(12rem,1fr) auto minmax(12rem,1fr); align-items: center; gap: 2rem; padding: 0 var(--edge); border-bottom: 1px solid rgba(248,246,243,.09); transition: background .2s ease,box-shadow .2s ease; }
.site-header.is-scrolled { position: fixed; background: rgba(23,23,23,.94); box-shadow: 0 12px 36px rgba(0,0,0,.22); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: .62rem; width: max-content; font-size: 1.12rem; font-weight: 800; letter-spacing: -.04em; }
.brand img { width: 2rem; height: 2rem; object-fit: contain; }
.nav { display: flex; gap: clamp(1.15rem,2.3vw,2.4rem); }
.nav a,.header-action { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.nav a { color: rgba(248,246,243,.72); transition: color .2s ease; }
.nav a:hover { color: var(--sunset); }
.header-action { justify-self: end; display: inline-flex; align-items: center; gap: .9rem; min-height: 2.55rem; padding: 0 1rem; border: 1px solid rgba(248,246,243,.58); transition: background .2s ease,color .2s ease,border-color .2s ease; }
.header-action:hover { background: var(--sunset); border-color: var(--sunset); color: var(--deep); }
.menu-button { display: none; justify-self: end; z-index: 3; width: 2.7rem; height: 2.7rem; padding: .65rem; border: 0; background: transparent; }
.menu-button span { display: block; height: 1px; margin: .43rem 0; background: currentColor; }

.hero { position: relative; height: clamp(22rem,50svh,28rem); min-height: 22rem; display: flex; align-items: flex-end; padding: 6rem var(--edge) 2rem; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--deep); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; filter: saturate(.68) brightness(.58) contrast(1.1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(15,15,15,.94) 0%,rgba(15,15,15,.72) 34%,rgba(15,15,15,.18) 72%),linear-gradient(0deg,rgba(15,15,15,.84),transparent 64%); }
.hero-content { position: relative; z-index: 2; width: min(62%,49rem); }
.eyebrow { margin: 0 0 .75rem; color: var(--sunset); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.hero h1 { margin: 0; font-size: clamp(4.8rem,8.6vw,8.5rem); font-weight: 800; line-height: .78; letter-spacing: -.08em; }
.hero-copy { margin: 1.4rem 0 1.7rem; color: rgba(248,246,243,.8); font-size: 1rem; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .68rem; }
.hero-actions.single-action .platform-button { min-width:11.5rem; }
.platform-button { min-width:9.8rem; justify-content:flex-start; position:relative; overflow:hidden; isolation:isolate; border-width:1px; box-shadow:0 10px 26px rgba(0,0,0,.16); }
.platform-button::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.16; transition:opacity .2s ease; }
.platform-button svg { width:1rem; height:1rem; flex:none; fill:currentColor; }
.platform-button > span:last-child { margin-left:auto; }
.twitch-button { border-color:rgba(169,112,255,.72); }
.twitch-button::before { background:#9146ff; }
.twitch-button svg { color:#bd8cff; }
.kick-button { border-color:rgba(83,252,24,.62); }
.kick-button::before { background:#53fc18; }
.kick-button svg { color:#72ff43; }
.youtube-button { border-color:rgba(255,78,69,.72); }
.youtube-button::before { background:#ff2f26; }
.youtube-button svg { color:#ff655e; }
.platform-button:hover { color:var(--offwhite); transform:translateY(-2px); }
.platform-button:hover::before { opacity:.82; }
.twitch-button:hover { background:#39205d; border-color:#b985ff; }
.kick-button:hover { background:#173d16; border-color:#72ff43; }
.youtube-button:hover { background:#55201e; border-color:#ff655e; }
.platform-button:hover svg { color:var(--offwhite); }
.button { min-height: 2.85rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; min-width: 9rem; padding: 0 .95rem; border: 1px solid rgba(248,246,243,.5); text-transform: uppercase; letter-spacing: .07em; font-size: .7rem; font-weight: 700; transition: background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.button:hover:not(.is-disabled) { transform: translateY(-2px); background: var(--offwhite); border-color: var(--offwhite); color: var(--deep); }
.button-gold { border-color: var(--sunset); color: var(--offwhite); }
.button-gold:hover:not(.is-disabled) { background: var(--sunset); border-color: var(--sunset); color: var(--deep); }
.button-icon { color: var(--sunset); font-size: .62rem; }
.button small { color: var(--sunset); font-size: .56rem; }
.button.is-disabled { color: rgba(248,246,243,.45); border-color: rgba(248,246,243,.2); cursor: not-allowed; }
.hero-aside { position: absolute; z-index: 2; right: var(--edge); bottom: 2rem; display: flex; gap: 1rem; color: rgba(248,246,243,.62); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hero-aside span:first-child { color: var(--sunset); }

.projects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.project-card { min-width: 0; display: flex; flex-direction: column; background: var(--deep); border-right: 1px solid var(--line); }
.project-card:last-child { border-right: 0; }
.project-visual { position: relative; display: block; height: clamp(19rem,28vw,27rem); overflow: hidden; border-bottom: 1px solid var(--line); background: var(--night); }
.project-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(15,15,15,.74),transparent 48%); }
.project-visual img { height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.08); transition: transform .65s cubic-bezier(.2,.7,.2,1),filter .3s ease; }
.project-visual:hover img { transform: scale(1.025); filter: saturate(.9) contrast(1.04); }
.podcast-visual img { object-fit: cover; object-position: center; background: #171717; image-rendering: auto; }
.astronaut-visual { background:#061117; }
.astronaut-visual img { object-fit:contain; object-position:center; background:#061117; }
.valheim-visual img { object-fit:contain; object-position:center; background:#071014; }
.valheim-title { position:absolute; z-index:3; left:clamp(1.3rem,3vw,2.4rem); bottom:1.55rem; width:min(61%,20rem); color:var(--offwhite); }
.valheim-title img { width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.52)); }
.valheim-title small { display:block; margin-top:.35rem; color:var(--sand); font-size:.6rem; font-weight:700; letter-spacing:.24em; text-align:center; }
.project-tag { position: absolute; z-index: 2; left: clamp(1.3rem,3vw,2.4rem); top: 1.7rem; color: var(--offwhite); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.project-body { min-height: 14.5rem; padding: 1.5rem clamp(1.3rem,3vw,2.4rem) 1.8rem; display: flex; flex-direction: column; }
.project-number { margin: 0 0 .75rem; color: var(--sunset); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.project-body h2 { margin: 0; font-size: clamp(1.8rem,2.9vw,3rem); font-weight: 800; line-height: .9; letter-spacing: -.055em; }
.project-body h2 a:hover { color: var(--sunset); }
.project-body > p:not(.project-number) { min-height: 3rem; margin: .9rem 0 1.3rem; color: rgba(248,246,243,.68); font-size: .88rem; line-height: 1.55; }
.project-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; }
.project-links a { min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 .75rem; border: 1px solid rgba(248,246,243,.36); text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; font-weight: 700; transition: border-color .2s ease,color .2s ease,background .2s ease; }
.project-links a:hover { background: var(--sunset); border-color: var(--sunset); color: var(--deep); }
.project-links .project-platform { position:relative; overflow:hidden; isolation:isolate; }
.project-links .project-platform::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.15; transition:opacity .2s ease; }
.project-links .platform-mini-icon { margin-right:.15rem; font-weight:800; }
.project-links .youtube-link { border-color:rgba(255,78,69,.72); }
.project-links .youtube-link::before { background:#ff2f26; }
.project-links .youtube-link .platform-mini-icon { color:#ff655e; }
.project-links .twitch-link { border-color:rgba(169,112,255,.72); }
.project-links .twitch-link::before { background:#9146ff; }
.project-links .twitch-link .platform-mini-icon { color:#bd8cff; }
.project-links .kick-link { border-color:rgba(83,252,24,.62); }
.project-links .kick-link::before { background:#53fc18; }
.project-links .kick-link .platform-mini-icon { color:#72ff43; }
.project-links .equipment-link { border-color:rgba(244,162,97,.68); }
.project-links .equipment-link::before { background:#f4a261; }
.project-links .equipment-link .platform-mini-icon { color:#f4a261; }
.project-links .project-platform:hover { color:var(--offwhite); }
.project-links .project-platform:hover::before { opacity:.74; }
.project-links .project-platform:hover .platform-mini-icon { color:var(--offwhite); }

.now { min-height: 9.5rem; display: grid; grid-template-columns: minmax(13rem,.62fr) 1.55fr minmax(9rem,.38fr); align-items: center; border-bottom: 1px solid var(--line); background: #1b1b1b; }
.now-heading { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 1.7rem var(--edge); border-right: 1px solid var(--line); }
.now-heading .eyebrow { margin-bottom: .4rem; }
.now-heading h2 { margin: 0; font-size: clamp(2rem,3.7vw,3.8rem); font-weight: 800; line-height: .88; letter-spacing: -.06em; }
.now-list { padding: .75rem clamp(1.4rem,3.6vw,3rem); }
.now-item { display: grid; grid-template-columns: 1.8rem minmax(8rem,.7fr) 1.3fr; align-items: center; gap: .8rem; min-height: 2.6rem; }
.now-item .mark { color: var(--sunset); font-size: .6rem; font-weight: 700; }
.now-item strong { font-size: .82rem; }
.now-item .icon { margin-right: .5rem; filter: grayscale(1); }
.now-item span:last-child { color: var(--muted); font-size: .8rem; }
.now-art { align-self: stretch; display: grid; place-items: center; border-left: 1px solid var(--line); background: rgba(51,65,85,.18); }
.now-art img { width: 5rem; opacity: .8; transform: rotate(-4deg); }

.lower-grid { display:grid; grid-template-columns:2fr 1fr; border-bottom:1px solid var(--line); }
.about { min-width:0; display:grid; grid-template-columns:1fr 1fr; min-height:19rem; border-right:1px solid var(--line); background:var(--night); }
.about-image { position: relative; min-height: 19rem; overflow: hidden; border-right: 1px solid var(--line); }
.about-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(10,10,10,.88),transparent 64%),linear-gradient(90deg,rgba(7,17,31,.08),rgba(7,17,31,.48)); transition: background .25s ease; }
.about-image img { height: 100%; object-fit: cover; object-position: 70% center; filter: saturate(.52) brightness(.68) contrast(1.08); transition: transform .45s ease,filter .3s ease; }
.equipment-cta { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; bottom: 1.35rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .2rem 1rem; color: var(--offwhite); }
.equipment-cta small { grid-column: 1 / -1; color: var(--sunset); font-size: .58rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.equipment-cta strong { font-size: clamp(1.25rem,2vw,2rem); line-height: .95; letter-spacing: -.035em; }
.equipment-cta > span { color: var(--sand); font-size: .62rem; font-weight: 750; letter-spacing: .1em; white-space: nowrap; }
.about-image:hover::after { background: linear-gradient(0deg,rgba(10,10,10,.94),transparent 68%),linear-gradient(90deg,rgba(7,17,31,.04),rgba(7,17,31,.38)); }
.about-image:hover img { transform: scale(1.025); filter: saturate(.65) brightness(.76) contrast(1.08); }
.about-copy { display: flex; flex-direction: column; justify-content: center; padding: 2rem clamp(1.5rem,3.2vw,3rem); }
.about-copy .eyebrow { margin-bottom: .55rem; }
.about-copy h2,.contact h2 { margin: 0; font-size: clamp(2rem,3.5vw,3.8rem); font-weight: 800; line-height: .88; letter-spacing: -.06em; }
.about-copy > p:last-child { max-width: 38rem; margin: 1rem 0 0; color: rgba(248,246,243,.65); font-size: .875rem; line-height: 1.55; }
.contact { min-height: 19rem; display: flex; flex-direction: column; justify-content: center; padding: 2.2rem clamp(1.7rem,3.8vw,3.6rem); background: #151515; }
.contact-copy > p { max-width: 34rem; margin: 1rem 0 1.4rem; color: rgba(248,246,243,.68); font-size: .84rem; }
.contact-email { display: inline-block; margin-top: .45rem; color: var(--offwhite); font-weight: 750; letter-spacing: .02em; user-select: all; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.footer { min-height: 12rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.45rem; padding: 2rem var(--edge) 1.2rem; background: var(--deep); }
.footer-links { grid-column: 1 / -1; width: 100%; max-width: 82rem; margin-inline: auto; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: center; gap: .65rem; }
.footer-links a { width: 100%; height: 4.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; border: 1px solid rgba(248,246,243,.18); border-radius: .75rem; color: rgba(248,246,243,.68); transition: color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
.footer-links svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.footer-links a span { font-size: .6rem; font-weight: 750; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.footer-links a:hover { color: var(--offwhite); border-color: rgba(244,162,97,.75); background: rgba(244,162,97,.08); transform: translateY(-2px); }
.footer-brand { justify-self: start; }
.back-top { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.footer .back-top { justify-self: end; }
.copyright { grid-column: 1 / -1; margin: .8rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(248,246,243,.1); color: rgba(248,246,243,.35); font-size: .6rem; }
a[aria-disabled="true"] { pointer-events: none; opacity: .38; }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-action { display: none; }
  .nav { position: fixed; inset: 0; z-index: 2; flex-direction: column; justify-content: center; align-items: center; gap: 1.7rem; background: rgba(23,23,23,.98); opacity: 0; visibility: hidden; transition: opacity .2s ease,visibility .2s ease; }
  .nav a { font-size: 1rem; }
  .site-header.menu-open .nav { opacity: 1; visibility: visible; }
  .menu-button { display: block; }
  .lower-grid { grid-template-columns: 1fr; }
  .about { border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-links { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .site-header { height: 4.4rem; }
  .brand { font-size: 1rem; }
  .brand img { width: 1.85rem; height: 1.85rem; }
  .hero { height: 41rem; min-height: 41rem; padding: 19rem var(--edge) 2.2rem; align-items: flex-end; }
  .hero-image { inset: 0; width: 100%; height: 100%; object-position: 56% center; }
  .hero-shade { background: linear-gradient(0deg,var(--deep) 5%,rgba(23,23,23,.82) 38%,rgba(23,23,23,.18) 76%),linear-gradient(90deg,rgba(23,23,23,.62),transparent); }
  .hero-content { width: 100%; }
  .hero h1 { font-size: clamp(3.4rem,17.5vw,5rem); }
  .hero-copy { margin: 1rem 0 1.3rem; font-size: .9rem; }
  .hero-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
  .hero-actions.single-action { display:flex; }
  .hero-actions.single-action .platform-button { width:min(13rem,100%); }
  .platform-button { min-width:0; padding:0 .55rem; gap:.4rem; font-size:.55rem; }
  .platform-button > span:last-child { display:none; }
  .button { min-width: 0; }
  .hero-aside { display: none; }
  .projects { grid-template-columns: 1fr; }
  .project-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .project-card:last-child { border-bottom: 0; }
  .project-visual { height: 16rem; }
  .project-body { min-height: 12rem; padding: 1.35rem var(--edge) 1.55rem; }
  .project-body h2 { font-size: clamp(2.4rem,11vw,3.5rem); }
  .project-body > p:not(.project-number) { min-height: 0; }
  .now { grid-template-columns: 1fr; }
  .now-heading { min-height: 7.2rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .now-list { padding: .9rem var(--edge) 1.2rem; }
  .now-item { grid-template-columns: 1.7rem 1fr; padding: .45rem 0; }
  .now-item span:last-child { grid-column: 2; }
  .now-art { display: none; }
  .lower-grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about-image { min-height: 11rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .equipment-cta { left: var(--edge); right: var(--edge); bottom: 1.15rem; }
  .equipment-cta strong { font-size: 1.25rem; }
  .about-copy { padding: 2rem var(--edge); }
  .about-copy > p:last-child { font-size: .875rem; }
  .contact { min-height: 15rem; padding: 2.1rem var(--edge); }
  .contact-actions { display: grid; }
  .footer { grid-template-columns: 1fr auto; gap: 1.35rem; }
  .footer-links { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }
  .footer-links a { height: 4.35rem; }
  .copyright { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}