/* Certified Random — styles.css
   Redesign 2026-10-10 (founder brief: professional, restrained).
   Cool grey paper, near-black ink, one marigold pip. The only loud thing on
   the page is the hero wordmark, whose letters are drawn at random weights
   and widths from the Anybody variable font. Everything else stays quiet. */

:root {
  --paper: #f3f4f6;
  --paper-raised: #ffffff;
  --ink: #131418;
  --ink-soft: #3a3d45;
  --muted: #5e626d;
  --rule: #d9dbe1;
  --rule-strong: #b9bcc5;
  --pip: #f2b705;
  --live: #17834a;
  --beta: #8a5a00;
  --error: #b42318;

  --font-display: "Anybody", "Arial Narrow", Arial, sans-serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Type scale: a 1.25 ratio for text, the wordmark sits outside it. */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --step-4: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --space-section: clamp(5rem, 10vw, 9rem);
  --head-h: 4rem;
  --max: 84rem;
  --radius: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* Header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 244, 246, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
}

.site-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--head-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* A die face on its diagonal: two ink pips and one marigold. */
.brand-pips {
  display: grid;
  grid-template-columns: repeat(3, 6px);
  grid-template-rows: repeat(3, 6px);
  gap: 2px;
}

.brand-pips span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

.brand-pips span:nth-child(1) {
  grid-area: 1 / 1;
}

.brand-pips span:nth-child(2) {
  grid-area: 2 / 2;
  background: var(--pip);
}

.brand-pips span:nth-child(3) {
  grid-area: 3 / 3;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
}

.site-nav a {
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav .nav-cta {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}

.site-nav .nav-cta:hover {
  color: var(--paper);
  background: var(--ink-soft);
}

/* Hero: the wordmark is the page's one loud element. */

.hero {
  padding: clamp(3rem, 9vh, 7rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.hero-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 15.5vw, 15rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-word {
  display: block;
  white-space: nowrap;
}

.hero-word + .hero-word {
  text-align: right;
}

/* With JS the wordmark is the shuffle control. touch-action removes the
   double-tap zoom delay; user-select stops repeat taps selecting text. */
.hero-mark--live {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hero-mark--live:focus-visible {
  outline: 2px solid var(--pip);
  outline-offset: 0.12em;
}

/* Letters get their axes from JS custom properties; without JS the
   wordmark renders as plain heavy type. */
.roll-letter {
  display: inline-block;
  font-variation-settings:
    "wght" var(--w, 800),
    "wdth" var(--d, 100);
  transition: font-variation-settings 900ms var(--ease);
}

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.hero-lede {
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Sections */

.section {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--head-h);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  line-height: 1;
  letter-spacing: -0.025em;
}

.section-intro {
  max-width: 32rem;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.45;
}

/* Product register */

.register-block + .register-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.register-group {
  padding-bottom: 0.75rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
}

.register-list {
  border-top: 1px solid var(--ink);
}

.register-list li {
  border-bottom: 1px solid var(--rule);
}

.register-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 1.35rem 0;
  text-decoration: none;
  color: var(--ink);
}

.reg-name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: font-variation-settings 260ms var(--ease);
}

.reg-desc {
  color: var(--muted);
  max-width: 34rem;
}

.reg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin-top: 0.35rem;
  font-size: var(--step--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.reg-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-soft);
}

.reg-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
}

.reg-status--live {
  color: var(--live);
}

.reg-status--live::before {
  border-color: var(--live);
  background: var(--live);
}

.reg-status--beta {
  color: var(--beta);
}

.reg-status--beta::before {
  border-color: var(--pip);
  background: var(--pip);
}

a.register-row:hover .reg-name,
a.register-row:focus-visible .reg-name {
  font-variation-settings: "wdth" 120;
}

a.register-row:hover .reg-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.register-row--build .reg-name {
  color: var(--muted);
}

.register-note {
  margin-top: 2rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Founder */

.founder-grid {
  display: grid;
  gap: 2rem;
}

.founder-body {
  max-width: 36rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}

.founder-body p + p {
  margin-top: 1.1rem;
}

.founder-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step-0);
}

.founder-facts dt {
  color: var(--muted);
  font-size: var(--step--1);
}

.founder-facts dd {
  color: var(--ink);
  overflow-wrap: break-word;
}

/* The address is the longest fact; give it the full row so it never
   breaks mid-word. */
.founder-facts .fact-wide {
  grid-column: 1 / -1;
}

.founder-facts a,
.request-alt a,
.foot-links a {
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.2em;
}

.founder-facts a:hover,
.request-alt a:hover,
.foot-links a:hover {
  text-decoration-color: var(--ink);
}

/* Request a build */

.section--request {
  background: var(--paper-raised);
}

.request-grid {
  display: grid;
  gap: 2.5rem;
}

.request-intro p {
  margin-top: 1.25rem;
  max-width: 28rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.45;
}

.request-intro .request-alt {
  font-size: var(--step-0);
  color: var(--muted);
}

.request-alt a {
  color: var(--ink);
  overflow-wrap: break-word;
}

.build-form {
  display: grid;
  gap: 1.5rem;
}

.field-row {
  display: grid;
  gap: 1.5rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label,
.models legend {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
}

.hint {
  font-size: var(--step--1);
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition:
    border-color 150ms,
    background-color 150ms;
}

.field textarea {
  resize: vertical;
  min-height: 3rem;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--muted);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper-raised);
  box-shadow: 0 0 0 3px rgba(19, 20, 24, 0.12);
}

.models {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.models legend {
  padding: 0;
  margin-bottom: 0.45rem;
}

.model-card {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1rem 1rem 2.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color 150ms,
    background-color 150ms;
}

.model-card input {
  position: absolute;
  left: 1rem;
  top: 1.15rem;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--ink);
}

.model-card:hover {
  border-color: var(--muted);
}

.model-card:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper);
}

.model-card:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.model-name {
  font-weight: 600;
}

.model-desc {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
}

.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}

.btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.form-status {
  font-size: var(--step--1);
  color: var(--muted);
}

.form-status--ok {
  color: var(--live);
}

.form-status--err {
  color: var(--error);
}

/* Footer */

.site-foot {
  padding: 3rem 0 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--muted);
}

.foot-inner {
  display: grid;
  gap: 1.25rem;
}

.foot-mark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  color: var(--ink);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.foot-links a {
  color: var(--ink-soft);
}

/* Wider screens */

@media (min-width: 48rem) {
  .section-head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .register-row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2rem;
    padding: 1.75rem 0;
  }

  .reg-meta {
    margin-top: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .reg-status {
    min-width: 7.5rem;
  }

  .founder-grid,
  .request-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .request-intro {
    position: sticky;
    top: calc(var(--head-h) + 2rem);
    align-self: start;
  }

  .field-row {
    grid-template-columns: 1fr 1fr;
  }

  .models {
    grid-template-columns: 1fr 1fr;
  }

  .models legend {
    grid-column: 1 / -1;
  }

  .foot-inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2.5rem;
  }

  .foot-links {
    justify-content: center;
  }
}

@media (max-width: 40rem) {
  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav li:not(:last-child) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .roll-letter,
  .reg-name {
    transition: none;
  }
}