/* Open Hands — the brand on the site.
   Built 2026-10-12 from the design system "Open Hands" (claude.ai Design System artifact):
   tokens.json, README §4 colour, §5 type, §6 the hinge, §11 layout, §13 UIControls / WaitlistForm / Plate.
   Rules carried here: five colours, at most three in one view; no greys, no tints, no opacity tricks;
   square corners on screen; no UI shadows; no gradients; the name is the logo, never typed. */

:root{
  /* his five (ruled 2026-09-27), and white for the logo only (ruled 2026-10-11) */
  --deep-ink:#111719;
  --bone:#E7E0D2;
  --inner-forest:#102C27;
  --oxblood:#542C2D;
  --brass:#A58D5F;
  --white:#FFFFFF;

  /* type — Source Serif 4 talks, the shout face shouts, Plex Mono measures */
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --display:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* screen spacing scale (tokens: space-1..4) */
  --space-1:8px; --space-2:16px; --space-3:40px; --space-4:96px;

  /* default theme: the uncut plate. Words on dark grounds are white, not Bone (Stefan, 2026-10-12:
     "bone for text on the webpage gives it an old look not premium or high end"). */
  --ground:var(--deep-ink); --text:var(--white); --rule:var(--white); --focus:var(--brass);
}

/* the three grounds the site uses (README §4, per-surface rule: Site = Deep Ink, Bone; the claims band in Oxblood) */
.theme-dark{--ground:var(--deep-ink);--text:var(--white);--rule:var(--white);--focus:var(--brass);background:var(--ground);color:var(--text)}
.theme-bone{--ground:var(--bone);--text:var(--deep-ink);--rule:var(--deep-ink);--focus:var(--oxblood);background:var(--ground);color:var(--text)}
/* Brass on Oxblood is 3.70:1 — forbidden; the focus ring on the red band is white */
.theme-oxblood{--ground:var(--oxblood);--text:var(--white);--rule:var(--white);--focus:var(--white);background:var(--ground);color:var(--text)}

html{-webkit-text-size-adjust:100%}
body{font-family:var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--text);color:var(--ground)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- the header: the horizontal logo, one colour (white on Deep Ink — ruling 42, 2026-10-11) ---- */
.oh-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.oh-logo{display:inline-flex;align-items:center;min-height:44px;line-height:0}
.oh-logo img{display:block;height:26px;width:auto} /* 26px tall ≈ 142px wide: above the 120px minimum */
.oh-nav{display:flex;flex-wrap:wrap;gap:0 var(--space-3)}
.oh-nav a{min-height:44px;display:inline-flex;align-items:center}

/* ---- the label: the shout face, small capitals. It identifies; it never interprets ---- */
.label,.oh-nav a{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;color:inherit;text-decoration:none}
.oh-nav a:hover,a.label:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---- the shout: headlines. Heavy, tight, big; never a paragraph ---- */
.shout{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}

/* ---- the caption: a quiet line under something — Source Serif italic ---- */
.cap{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.45}

/* ---- the hinge: one hairline, full ink ---- */
.hinge{height:0;border:0;border-top:1px solid var(--rule)}

/* ---- links (UIControls): underlined 1px, offset 4px; leaving the site ends with → ---- */
.link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule)}

/* ---- buttons (UIControls) ---- */
.btn{font-family:var(--display);font-weight:700;font-size:16px;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:14px 22px;border-radius:0;cursor:pointer;text-decoration:none;
  color:var(--ground);background:var(--text);border:1px solid var(--text)}
.btn:hover{background:var(--ground);color:var(--text)}
.btn2{font-family:var(--display);font-weight:700;font-size:14px;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:14px 22px;border-radius:0;cursor:pointer;text-decoration:none;
  color:var(--text);background:transparent;border:1px solid var(--rule)}
.btn2:hover{background:var(--text);color:var(--ground)}

/* ---- the colophon: true production facts and legal lines, Plex Mono ---- */
.colophon{font-family:var(--mono);font-size:12px;line-height:1.8;letter-spacing:.02em}

/* ---- the footer, shared by every page ---- */
.oh-footer{text-align:center;padding:var(--space-3) 24px var(--space-4)}
.oh-footer .colophon{max-width:60ch;margin:0 auto}
.oh-footer .oh-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-3);margin:var(--space-2) 0}
.oh-footer .oh-links a{min-height:44px;display:inline-flex;align-items:center}
.oh-footer .colophon a{color:inherit;text-decoration:underline;text-underline-offset:3px}