/* InertiaBreak Labs studio site. One stylesheet.
   Design source: Project Files/design/project/Studio-Web.dc.html (desktop 1280 and phone 390). */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; licences in /fonts) ---------- */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/figtree-latin.woff2") format("woff2"); }
@font-face { font-family: "Chivo"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/chivo-900-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/young-serif-400-latin.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --paper: #FAF7F1;
  --cream: #F3EDE2;
  --navy: #0E1820;
  --ink: #1C2A35;
  --soft: #4A5560;
  --line: #DDD5C8;
  /* Snoozenix card keeps the app's own colours */
  --sn-text: #F3EDE2;
  --sn-text-2: #D6DCE0;
  --sn-text-3: #A9B4BD;
  --sn-yellow: #F6C700;
  --sn-yellow-hover: #FFE27A;
  --sn-edge: #3A5062;

  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 80px;
  --col: 960px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; }
h1, h2, p { margin: 0; }
svg { display: block; flex-shrink: 0; }
a { color: var(--navy); text-decoration: none; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 16px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--navy); color: var(--paper); font-weight: 700; padding: 10px 16px; border-radius: 10px;
}
.skip-link:focus { top: 12px; }

/* Centred content column: max 960 px, gutters around it */
.col { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.label { font-size: 13px; font-weight: 700; letter-spacing: 1.6px; color: var(--soft); text-transform: uppercase; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .col { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--navy); }
.brand-name .labs { font-weight: 400; color: var(--soft); }
.nav-main { display: flex; gap: 28px; font-size: 15px; font-weight: 600; }
.nav-main a { color: var(--ink); padding-block: 10px; }
.nav-main a:hover, .site-footer nav a:hover { color: var(--soft); }

/* ---------- Hero ---------- */
.hero .col { padding-block: 112px 88px; display: flex; flex-direction: column; gap: 20px; }
.hero h1 { font-size: 72px; font-weight: 700; line-height: 1.04; letter-spacing: -1.6px; color: var(--navy); max-width: 820px; }
.hero p { font-size: 22px; line-height: 1.5; color: var(--soft); max-width: 640px; }

/* ---------- Our apps ---------- */
.apps .col { padding-bottom: 88px; display: flex; flex-direction: column; gap: 18px; }
.app-card {
  background: var(--navy); color: var(--sn-text); border-radius: 24px; padding: 36px 40px;
  display: flex; flex-direction: row; gap: 36px; align-items: center;
}
.app-icon { width: 96px; height: 96px; border-radius: 21px; box-shadow: 0 0 0 1px var(--sn-edge); }
.app-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app-name { font-family: "Chivo", "Arial Black", sans-serif; font-style: italic; font-weight: 900; font-size: 32px; line-height: 1; }
.app-name .nix { background: var(--sn-yellow); color: var(--navy); padding: 0 5px; margin-left: 3px; }
.app-tagline { font-family: "Young Serif", Georgia, serif; font-size: 24px; line-height: 1.3; }
.app-line { font-size: 16px; line-height: 1.5; color: var(--sn-text-2); max-width: 520px; }
.app-status { font-size: 14px; font-weight: 600; color: var(--sn-text-3); }
.app-link {
  align-self: flex-start; min-height: 44px; display: flex; align-items: center;
  font-size: 16px; font-weight: 600; color: var(--sn-yellow); overflow-wrap: anywhere;
}
.app-link:hover { color: var(--sn-yellow-hover); }
.app-card :focus-visible { outline-color: var(--sn-yellow); }
.apps-note { font-size: 15px; color: var(--soft); }

/* ---------- About and Contact ---------- */
.split .col > div { border-top: 1px solid var(--line); display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
.about .col > div { padding-block: 72px; }
.contact .col > div { padding-block: 48px 96px; }
.split p { font-size: 20px; line-height: 1.6; color: var(--ink); }
/* No underlines (brand rule): in-text links are bold navy on a cream tint */
.contact a, .notfound p a { color: var(--navy); font-weight: 700; background: var(--cream); border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
.contact a:hover, .notfound p a:hover { background: var(--line); }

/* ---------- 404 ---------- */
.notfound .col { padding-block: 112px 120px; display: flex; flex-direction: column; gap: 20px; }
.notfound h1 { font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -1.2px; color: var(--navy); }
.notfound p { font-size: 20px; line-height: 1.6; color: var(--soft); }


/* ---------- Footer ---------- */
.site-footer { background: var(--cream); border-top: 1px solid var(--line); }
.site-footer .col { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 32px; }
.copyright { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--soft); }
.site-footer nav { display: flex; gap: 20px; font-size: 14px; font-weight: 600; }
.site-footer nav a { color: var(--ink); min-height: 32px; display: flex; align-items: center; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 48px; }
  .hero h1 { font-size: 60px; }
}

/* ---------- Phone (390 board) ---------- */
@media (max-width: 767px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .site-header .col { padding-block: 20px; }
  .brand { gap: 8px; }
  .brand svg { width: 24px; height: 24px; }
  .brand-name { font-size: 18px; }
  .nav-main { display: none; } /* the phone board shows the logo only */

  .hero .col { padding-block: 48px 40px; }
  .hero h1 { font-size: 40px; letter-spacing: -0.8px; }
  .hero p { font-size: 18px; }

  .apps .col { padding-bottom: 48px; }
  .app-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  .app-icon { width: 64px; height: 64px; border-radius: 14px; }
  .app-name { font-size: 24px; }
  .app-tagline { font-size: 20px; }
  .app-line { font-size: 15px; }

  .split .col > div { grid-template-columns: 1fr; gap: 14px; }
  .about .col > div { padding-block: 40px; }
  .contact .col > div { padding-block: 32px 48px; }
  .split p { font-size: 17px; }

  .notfound .col { padding-block: 48px 64px; }
  .notfound h1 { font-size: 40px; letter-spacing: -0.8px; }
  .notfound p { font-size: 17px; }

  .site-footer .col { flex-direction: column; align-items: flex-start; padding-block: 24px; }
}