/*
Theme Name: OI
Theme URI: https://oi.space/
Author: OI
Description: Minimal single-page theme for oi.space. The front page is rendered
  from front-page.php and never passes through the block editor, so it cannot be
  invalidated by editing it there. Fonts are self-hosted; the page makes no
  third-party requests.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
License: Proprietary
Text Domain: oi
*/

/* ==========================================================================
   Self-hosted Roboto. Paths are relative to this stylesheet, i.e. the theme
   root. No request for these ever leaves the visitor's browser.
   ========================================================================== */

@font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/roboto-latin-300.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/roboto-latin-400.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/roboto-latin-500.woff2") format("woff2");}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/roboto-mono-latin-400.woff2") format("woff2");}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/roboto-mono-latin-500.woff2") format("woff2");}

/* ==========================================================================
   Reset. The mockup relied on the preview harness for this; a real page
   needs it spelled out.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

  :root {
    /* warm near-black — never #000 */
    --ground:    #0A0807;
    --ground-2:  #100C0A;
    --surface:   #16110E;
    --rule:      #251C17;
    --rule-soft: #1A1411;

    --ink:   #F2EDE9;
    --ink-2: #9E938C;
    --ink-3: #6B605A;

    --ember:     #E0541B;
    --ember-lit: #FF7A33;
    --ember-dim: #8F3811;

    --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

    color-scheme: dark;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-inline: 24px;
  }

  a { color: inherit; }

  a:focus-visible {
    outline: 2px solid var(--ember-lit);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0;
  }

  /* ---------------- header ---------------- */

  .site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    background: rgba(10, 8, 7, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule-soft);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 66px;
    padding-block: 12px;
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
  }

  .wordmark-glyph {
    display: block;
    height: 30px;
    width: auto;
    color: var(--ink);
    overflow: visible;
  }

  .wordmark-rule { width: 1px; height: 18px; background: var(--rule); }

  .wordmark-sub {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

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

  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(540px, 76vh, 760px);
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--rule-soft);
  }

  #limb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: block;
  }

  /* bottom padding reserves the limb zone, so copy never sits on the glow
     no matter how tall the viewport is */
  .hero-inner {
    padding-block: clamp(56px, 8vw, 96px) clamp(190px, 24vw, 290px);
  }

  .hero-text { max-width: 46ch; }

  h1 {
    margin: 24px 0 0;
    max-width: 19ch;
    font-weight: 300;
    font-size: clamp(2.4rem, 5.7vw, 4.3rem);
    line-height: 1.05;
    letter-spacing: -0.036em;
    text-wrap: balance;
  }

  .lede {
    margin: 30px 0 0;
    max-width: 52ch;
    font-size: 1.0625rem;
    font-weight: 300;
    color: var(--ink-2);
  }

  .lede + .lede { margin-top: 20px; }

  /* ---------------- bands ---------------- */

  section.band { border-bottom: 1px solid var(--rule-soft); }
  .band-inner { padding-block: clamp(60px, 9vw, 100px); }

  .section-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 44px;
  }

  .section-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
  }

  h2 {
    margin: 0;
    font-weight: 400;
    font-size: 1.375rem;
    letter-spacing: -0.012em;
  }

  /* ---------------- contact ---------------- */

  .contact-inner { padding-block: clamp(64px, 10vw, 108px); }

  .contact-line {
    margin: 20px 0 0;
    font-weight: 300;
    font-size: clamp(1.4rem, 4.4vw, 2.3rem);
    line-height: 1.3;
    letter-spacing: -0.022em;
    text-wrap: balance;
    max-width: 22ch;
  }

  .mail {
    color: var(--ember-lit);
    text-decoration: none;
    border-bottom: 1px solid var(--ember-dim);
    padding-bottom: 3px;
    transition: border-color 160ms ease;
    white-space: nowrap;
  }

  .mail:hover { border-bottom-color: var(--ember-lit); }

  .contact-note {
    margin: 30px 0 0;
    max-width: 44ch;
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--ink-2);
  }

  /* ---------------- footer ---------------- */

  .site-footer { background: var(--ground-2); border-top: 1px solid var(--rule-soft); }

  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 32px;
    padding-block: 30px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    color: var(--ink-3);
  }

  .footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
  .footer-inner a { text-decoration: none; transition: color 160ms ease; }
  .footer-inner a:hover { color: var(--ink-2); }

  /* ---------------- responsive ---------------- */

  @media (max-width: 560px) {
    .wrap { padding-inline: 18px; }
    .wordmark-glyph { height: 26px; }
    .hero { min-height: 520px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; }
  }

/* ==========================================================================
   Inner pages (careers, team, anything added in the WordPress editor later).
   The front page does not use these; they exist so a new page inherits the
   site's typography instead of falling back to browser defaults.
   ========================================================================== */

.page-main { min-height: 60vh; }

.page-inner { padding-block: clamp(56px, 8vw, 96px); }

.entry-title {
  margin: 14px 0 0;
  max-width: 20ch;
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.entry-content {
  max-width: 62ch;
  margin-top: 36px;
  font-weight: 300;
  color: var(--ink-2);
}

.entry-content > * + * { margin-top: 1.1em; }

.entry-content h2 {
  margin-top: 2em;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.entry-content h3 {
  margin-top: 1.8em;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}

.entry-content a { color: var(--ember-lit); text-decoration: none; border-bottom: 1px solid var(--ember-dim); }
.entry-content a:hover { border-bottom-color: var(--ember-lit); }

.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content li + li { margin-top: 0.4em; }

.entry-content blockquote {
  margin-inline: 0;
  padding-left: 20px;
  border-left: 2px solid var(--rule);
  color: var(--ink-3);
}

.entry-content img { height: auto; border-radius: 2px; }

.entry-content code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface);
  padding: 2px 5px;
}

/* Skip link — keyboard users land on it first. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}

.skip-link:focus { left: 8px; top: 8px; }