/* Erid Game Studios landing page. Ported from the Claude Design file "Erid Game Studios". */

/* ----------------------------------------------------------------- fonts */
/* Self-hosted Google Fonts subsets (licence: fonts/OFL.txt). Each file is a variable font
   covering the whole weight range; unicode-range means browsers only download the subsets
   a page actually uses (normally just latin). */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/familjen-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/familjen-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/familjen-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/unbounded-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/unbounded-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
/* The design specifies these in oklch (noted alongside). Hex renders the same, since
   every colour is inside sRGB, and works in older browsers too. */

:root {
  --bg: #0b0f14;           /* oklch(0.168 0.012 255) */
  --surface: #13181d;      /* oklch(0.205 0.013 255) */
  --line: #2e333a;         /* oklch(0.32 0.014 255) */
  --ink: #eceff1;          /* oklch(0.95 0.004 240) */
  --ink-2: #babec3;        /* oklch(0.8 0.008 245) */
  --ink-3: #999fa4;        /* oklch(0.7 0.01 245) */
  --accent: #36c1dd;       /* oklch(0.75 0.12 215) */
  --accent-ink: #4cd1ee;   /* oklch(0.8 0.12 215) */
  --btn-bg: #e4e8eb;       /* oklch(0.93 0.006 240) */
  --btn-ink: #0e1217;      /* oklch(0.18 0.012 255) */
  --btn-bg-hover: #43cae7; /* oklch(0.78 0.12 215) */
  --error: #f98f87;        /* oklch(0.76 0.13 25), not in the design: form error messages */
  --sans: 'Familjen Grotesk', system-ui, sans-serif;
  --display: Unbounded, system-ui, sans-serif;
  --mono: 'Martian Mono', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

h1, h2 { font-family: var(--display); font-weight: 500; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-ink); }

input, textarea, button { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

::selection { background: var(--accent); color: var(--bg); }

[hidden] { display: none !important; }

/* Small uppercase mono labels: header, section labels, form labels, footer. */
.caps {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- layout */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px 28px;
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 28px 96px;
}

.site-footer { border-top: 1px solid var(--line); }

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  max-width: 940px;
  margin: 0 auto;
  padding: 26px 28px 40px;
}

.site-footer p { margin: 0; letter-spacing: 0.07em; }

/* ------------------------------------------------------------------ hero */

.hero {
  padding: 72px 0 80px;
  border-bottom: 1px solid var(--line);
}

.hero h1 {
  margin: 0 0 26px;
  font-size: clamp(30px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero-tagline {
  margin: 0;
  max-width: 40ch;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- sections */
/* Numbered label on the left, content spanning two columns on the right. On narrower
   screens the grid wraps and the content drops below the label. */

.section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 48px;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}

.section-last {
  padding-bottom: 0;
  border-bottom: 0;
}

.section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
}

.section-label { padding-top: 8px; }

.section-body { grid-column: span 2; }

/* Phones: one column. With the two-column span, content narrower than ~290px (screens under
   ~344px) would run into the right-hand margin. Identical to the design at every other width. */
@media (max-width: 600px) {
  .section { grid-template-columns: minmax(0, 1fr); }
  .section-body { grid-column: auto; }
}

.section h2 {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.prose {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose + .prose { margin-top: 18px; }

/* ------------------------------------------------------------------ form */

.contact-form {
  display: grid;
  gap: 20px;
  max-width: 560px;
}

.contact-intro {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.field { display: grid; gap: 8px; }

.field-label { letter-spacing: 0.085em; }

.input {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  font-size: 15px;
}

.textarea { line-height: 1.6; resize: vertical; }

.input[aria-invalid="true"] { border-color: var(--error); }

.field-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--error);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.button {
  padding: 15px 26px;
  border: none;
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  cursor: pointer;
}

.button:hover { background: var(--btn-bg-hover); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.button[aria-disabled="true"]:hover { background: var(--btn-bg); }

.form-status {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

.form-status:empty { position: absolute; } /* stays in the accessibility tree without taking a grid row */
.form-status.is-success { color: var(--accent-ink); }
.form-status.is-error { color: var(--error); }