/* MHz Games — shared stylesheet.

   The design system is lifted from the portfolio at hazki.vercel.app
   (`app/globals.css` in the hazki-portfolio repo): the same oklch neutral
   tokens, the same Geist / Geist Mono / Geist Pixel typography, the same
   1300px column with hairline rules down both edges.

   That site is Next.js + Tailwind v4; this one is three static files on
   GitHub Pages. So the tokens are copied by hand and the Tailwind utilities
   are written out as plain classes. If the portfolio's palette moves, this
   file has to be updated to match — there is no build step to do it.

   Monochrome throughout. The old Drift Versus yellow (#ECAE2C) is gone;
   emphasis comes from opacity and the hover glow, as it does on the
   portfolio. */

/* ─── Pixel heading face, self-hosted ─────────────────────────────────────
   Geist Pixel is not on Google Fonts, so the woff2 travels with the repo.
   Geist and Geist Mono come from the CDN via the <link> in each page. */
@font-face {
    font-family: "Geist Pixel";
    src: url("/fonts/GeistPixel.woff2") format("woff2");
    font-weight: 400 600;
    font-display: swap;
}

:root {
    /* Copied from the portfolio's `:root`, which is dark-by-default. */
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.90 0 0);
    --card: oklch(0.21 0.006 285.885);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --border: oklch(1 0 0 / 8%);
    --radius: 0.625rem;

    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-pixel: "Geist Pixel", var(--font-sans);

    /* The portfolio's page gutters: 20 / 40 / 64px, with the content column
       inset a further 20 / 32 / 48px inside the ruled edges. */
    --gutter: 1.25rem;
    --inset: 1.25rem;
    --column: 1300px;
}

@media (min-width: 768px) {
    :root { --gutter: 2.5rem; --inset: 2rem; }
}
@media (min-width: 1024px) {
    :root { --gutter: 4rem; --inset: 3rem; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--background);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

img { display: block; max-width: 100%; height: auto; }

/* ─── Typography ──────────────────────────────────────────────────────────
   Headings are pixel, never italic, never letterspaced — the portfolio sets
   `filter: none` and `text-shadow: none` on them deliberately, because the
   pixel face turns to mush under either. The old site's uppercase italic
   treatment is dropped with the yellow. */
h1, h2, h3, h4, h5 {
    font-family: var(--font-pixel);
    font-weight: 500;
    line-height: 1.1;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); margin: 0; }
h2 { font-size: 2.2rem; margin: 0; }
h3 { font-size: 1.75rem; margin: 0; }
h4 { font-size: 1.5rem; margin: 0; }
h5 { font-size: 1.2rem; margin: 0; }

@media (min-width: 768px) {
    h2 { font-size: 2.9rem; }
    h3 { font-size: 2rem; }
    h4 { font-size: 1.6rem; }
    h5 { font-size: 1.2rem; }
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong, b { font-weight: 600; }

/* ─── Layout ──────────────────────────────────────────────────────────────
   The portfolio's signature: a fixed-width column whose left and right edges
   are drawn as hairlines running the height of the page, with full-bleed
   rules separating sections. */
.shell {
    width: 100%;
    padding-inline: var(--gutter);
}

.column {
    width: 100%;
    max-width: var(--column);
    margin-inline: auto;
    border-inline: 1px solid var(--border);
}

.section {
    padding-block: 3rem;
    border-top: 1px solid var(--border);
}
.section:first-child { border-top: 0; }

@media (min-width: 768px) {
    .section { padding-block: 5rem; }
}

.inset { padding-inline: var(--inset); }

/* Section eyebrow — mono, dimmed, bracketed index. Straight from the
   portfolio's section headers (`[02] Selected Works`). */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: color-mix(in oklch, var(--foreground) 40%, transparent);
    margin: 0 0 0.5rem;
}

.lede {
    font-size: 1.125rem;
    color: color-mix(in oklch, var(--foreground) 50%, transparent);
    max-width: 44rem;
    margin: 1rem 0 0;
}

.prose { max-width: 42rem; }
.prose p { color: color-mix(in oklch, var(--foreground) 50%, transparent); }
.prose ul { margin: 0.5rem 0 1rem; padding-left: 1.2rem; color: color-mix(in oklch, var(--foreground) 50%, transparent); }
.prose li { margin: 0.35rem 0; }
.prose h3 { margin: 2.5rem 0 0.5rem; }
.prose h4 { margin: 2rem 0 0.5rem; font-size: 1.15rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; }
.prose a { color: var(--foreground); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklch, var(--foreground) 30%, transparent); transition: text-decoration-color 200ms ease; }
.prose a:hover { text-decoration-color: var(--foreground); }

/* ─── Navigation ──────────────────────────────────────────────────────────
   The portfolio's nav fades the page background out beneath itself rather
   than using a solid bar. Static here: no scroll-spy, no mobile drawer,
   because three pages do not need one. */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(to bottom, var(--background) 60%, transparent);
    padding-block: 1.25rem;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--column);
    margin-inline: auto;
    padding-inline: var(--inset);
}

/* The studio logo, white on transparent (`mhz-logo.svg`, the same file the
   games' splash screens are cut from). Sized by height; the width follows
   the logo's 1538:673 aspect. */
.nav-mark {
    display: block;
    flex: none;
    transition: opacity 200ms ease;
}
.nav-mark img {
    height: 1.75rem;
    width: auto;
}
.nav-mark:hover { opacity: 0.7; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Mono link at 40%, lifting to full on hover — the portfolio's one
   consistent interaction, used for every secondary link on the site. */
.nav-link {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    text-decoration: none;
    color: color-mix(in oklch, var(--foreground) 45%, transparent);
    transition: color 200ms ease;
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--foreground); }

.nav-link sup {
    font-size: 0.6875rem;
    margin-left: 0.1em;
    opacity: 0.5;
}

@media (max-width: 30rem) {
    .nav-links { gap: 1.1rem; }
    .nav-link { font-size: 0.875rem; }
    .nav-link sup { display: none; }
}

/* ─── Text button ─────────────────────────────────────────────────────────
   `.btn-text` from the portfolio, verbatim in behaviour: mono, dim, and it
   glows white on hover instead of changing colour. This is what replaces
   the yellow bordered button. */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    text-decoration: none;
    color: var(--foreground);
    opacity: 0.45;
    background: none;
    border: 0;
    padding: 0;
    transition: opacity 200ms ease, filter 200ms ease;
}
.btn-text:hover {
    opacity: 1;
    filter:
        drop-shadow(0 0 8px rgba(249, 249, 249, 0.5))
        drop-shadow(0 0 20px rgba(249, 249, 249, 0.2));
}

/* A bordered variant for the one real call to action per page. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.3rem;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    text-decoration: none;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.8);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 200ms ease, background 200ms ease;
}
.btn:hover {
    border-color: color-mix(in oklch, var(--foreground) 35%, transparent);
    background: rgba(255, 255, 255, 0.07);
}
.btn[aria-disabled="true"] {
    color: color-mix(in oklch, var(--foreground) 40%, transparent);
    cursor: default;
}
.btn[aria-disabled="true"]:hover {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.03);
}

/* ─── Tag pill ────────────────────────────────────────────────────────────
   The portfolio's project tags. */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: color-mix(in oklch, var(--foreground) 40%, transparent);
}

/* ─── Cards ───────────────────────────────────────────────────────────────
   Hairline borders on the page background, not filled panels. Hover lifts
   the border rather than tinting the surface. */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
}

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* ─── Footer ──────────────────────────────────────────────────────────────
   The portfolio's oversized pixel wordmark with the link columns set
   against it. */
.footer {
    margin-top: auto;
}

.footer-inner {
    max-width: var(--column);
    margin-inline: auto;
    border-inline: 1px solid var(--border);
    border-top: 1px solid var(--border);
    padding: 4rem var(--inset) 1.5rem;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: space-between;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .footer-top { flex-direction: row; gap: 3rem; }
    .footer-inner { padding-top: 7rem; }
}

.footer-wordmark {
    font-family: var(--font-pixel);
    font-size: 14vw;
    line-height: 0.8;
    letter-spacing: -0.02em;
    margin: 0;
    user-select: none;
}

@media (min-width: 768px) {
    .footer-wordmark { font-size: 6vw; }
}

.footer-tagline {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: color-mix(in oklch, var(--foreground) 40%, transparent);
    margin: 1rem 0 0;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 3rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .footer-nav { gap: 5rem; }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .footer-col { text-align: right; }
}

.footer-link {
    font-family: var(--font-mono);
    font-size: 1rem;
    text-decoration: none;
    color: color-mix(in oklch, var(--foreground) 40%, transparent);
    transition: color 300ms ease;
}
.footer-link:hover { color: var(--foreground); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-top: 4rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: color-mix(in oklch, var(--foreground) 40%, transparent);
}
.footer-bottom p { margin: 0; }

/* ─── Reduced motion ──────────────────────────────────────────────────────
   Nothing here animates on a timer, but the hover transitions and smooth
   scrolling still deserve the opt-out. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}