/* Margera Labs studio page. Its own stylesheet: nothing here comes from Solnox's site.css or tokens.
   Light only for now (no dark scheme until it is designed and its contrast checked).
   Colour pairs (WCAG contrast, see the build report):
     ink #173238 on canvas #F7F8F7 12.7:1 | secondary #53676B on canvas 5.6:1 | action #176474 on canvas 6.3:1
     ink on surface #E8EFEE 11.6:1 | secondary on surface 5.1:1 | action on surface 5.8:1 | white on action 6.75:1 */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #F7F8F7;
  --surface: #E8EFEE;
  --ink: #173238;
  --ink-2: #53676B;
  --action: #176474;
  --action-strong: #0F4B58;
  --line: #CBD7D6;
  --gutter: 24px;
  --measure: 34em;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  background: var(--canvas);
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }

.wrap {
  width: 100%;
  max-width: calc(1120px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Links: always underlined in running text, focus never relies on colour alone. */
a { color: var(--action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 150ms ease, text-decoration-thickness 150ms ease, background-color 150ms ease; }
a:hover { color: var(--action-strong); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 10; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 4px; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; outline-color: var(--canvas); }

/* Header */
.site-header { padding-block: 20px; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.1875rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 4px; margin-inline: -12px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 600; background-image: linear-gradient(var(--action), var(--action)); background-repeat: no-repeat; background-position: 12px calc(50% + 12px); background-size: 0 2px; transition: background-size 150ms ease, color 150ms ease; }
.nav a:hover { color: var(--action); background-size: calc(100% - 24px) 2px; }
.nav a:focus-visible { background-size: calc(100% - 24px) 2px; }

/* Hero */
.hero { padding-block: clamp(56px, 12vw, 152px) clamp(72px, 13vw, 176px); }
.hero-grid { display: grid; gap: 40px; align-items: end; }
h1 { font-size: clamp(2.25rem, calc(1.3rem + 4.6vw), 4rem); line-height: 1.04; letter-spacing: -0.028em; font-weight: 500; max-width: 12ch; text-wrap: balance; }
.identity { margin-top: clamp(28px, 4vw, 48px); max-width: 30em; font-size: 1.1875rem; color: var(--ink); }
.identity strong { font-weight: 500; }
.hero-mark { display: none; }

/* Sections */
.section-label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
h2 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; }

.apps { background: var(--surface); padding-block: clamp(64px, 9vw, 120px); }
.apps-grid { display: grid; gap: 56px; }
.app-name { margin-top: 20px; font-size: clamp(2rem, calc(1.2rem + 2.6vw), 3rem); }
.status { display: inline-block; margin-top: 16px; padding: 3px 14px; border: 1px solid var(--ink-2); border-radius: 999px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; line-height: 1.6; }
.app-line { margin-top: 28px; max-width: var(--measure); }
.facts { margin-top: 32px; max-width: 28em; border-top: 1px solid var(--line); }
.facts li { padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 40px; }
.button { display: inline-flex; align-items: center; min-height: 52px; padding-inline: 28px; border-radius: 4px; background: var(--action); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; }
.button:hover { background: var(--action-strong); color: #fff; }
.button:focus-visible { outline-offset: 4px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1rem; }

.shot { justify-self: start; }
.shot img { display: block; width: 100%; max-width: 288px; height: auto; border: 1px solid var(--ink); border-radius: 28px; background: #121218; }
.shot figcaption { margin-top: 14px; max-width: 288px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }

.about, .contact { padding-block: clamp(64px, 9vw, 120px); }
.about-grid, .contact-grid { display: grid; gap: 20px; }
.about-body p + p { margin-top: 1.1em; }
.about-body { max-width: var(--measure); }
.about h2, .contact h2 { margin-top: 0; font-size: clamp(1.75rem, calc(1.2rem + 1.8vw), 2.25rem); }
.contact { padding-top: 0; }
.contact-grid { border-top: 1px solid var(--line); padding-top: clamp(40px, 6vw, 72px); }
.contact-mail { font-size: clamp(1.25rem, calc(1rem + 1.2vw), 1.75rem); font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contact-note { margin-top: 12px; color: var(--ink-2); font-size: 1rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 32px 48px; color: var(--ink-2); font-size: 0.9375rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; align-items: center; }
.footer-inner a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.footer-inner a:hover { color: var(--ink); }

/* Not found */
.nf { padding-block: clamp(56px, 10vw, 128px) clamp(72px, 12vw, 160px); }
.nf h1 { max-width: 14ch; }
.nf .actions { margin-top: 36px; }

@media (min-width: 700px) {
  :root { --gutter: 40px; }
  .about-grid, .contact-grid { grid-template-columns: 4fr 8fr; gap: 32px; }
  .apps-grid { grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
  .shot { justify-self: end; }
}

@media (min-width: 960px) {
  :root { --gutter: 48px; }
  .hero-grid { grid-template-columns: 8fr 4fr; gap: 64px; }
  .hero-mark { display: block; justify-self: end; width: clamp(120px, 14vw, 176px); height: auto; margin-bottom: 0.4em; }
}

@media (max-width: 520px) {
  :root { --gutter: 24px; }
  .site-header { padding-block: 12px 4px; }
  .header-inner { flex-direction: column; align-items: flex-start; }
  .nav { margin-inline: -12px; }
}

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

@media (forced-colors: active) {
  .shot img, .status { border-color: CanvasText; }
}