/* shorenet.dev stylesheet.

   The Chart Room tokens, copied from apps/website/static/css/custom.css; the
   values are recorded in docs/design/chart-room-tokens.md, and a change to a
   token there changes this file in the same commit. Fine rules, square
   corners, one chart blue for actions, magenta for position only (the focus
   ring and the current page in the nav). No gradients, glows or pills.

   The site has no JavaScript. Everything here is plain CSS. */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400 500;
  font-display: optional;
  src: url('/fonts/source-code-pro-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', Consolas, 'Cascadia Mono', ui-monospace, Menlo, monospace;
  --fs: 16px;
  --fs-prose: 1.125rem;
  --fs-small: 0.9375rem;
  --lh: 1.6;
  --head-w: 600;

  --bg: #F7F5EF;
  --paper: #FFFFFF;
  --surface-2: #ECE9DF;
  --ink: #14253A;
  --ink-2: #4A5868;
  --rule: #D3D6D2;
  --rule-strong: #5F6D7B;
  --accent: #1F5E8C;
  --accent-hover: #184B70;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEBF3;
  --link: #1F5E8C;
  --focus: #A3175E;
  --warn: #7A4E00;

  --chrome: #14253A;
  --chrome-ink: #F7F5EF;
  --chrome-ink-2: #BCC7D2;
  --chrome-focus: #F59ACB;

  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;
  --s9: 72px;

  --measure: 40rem;
  --wide: 64rem;
  --gutter: 1.5rem;
}

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

html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: var(--lh);
  background: var(--bg);
  color: var(--ink);
  font-variant-numeric: lining-nums;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--surface-2); padding: 0 0.25em; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink); padding: var(--s2) var(--s4);
}
.skip:focus { left: var(--s4); z-index: 10; }

/* Header: the navy bar. */
.site-head { background: var(--chrome); color: var(--chrome-ink); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s6); padding-top: var(--s3); padding-bottom: var(--s3);
}
.brand {
  color: var(--chrome-ink); text-decoration: none; font-weight: 700;
  font-size: 1.125rem; letter-spacing: 0.01em; margin-right: auto;
}
.brand span { color: var(--chrome-ink-2); font-weight: 400; }
.site-head nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.site-head nav a { color: var(--chrome-ink); text-decoration: none; }
.site-head nav a:hover { text-decoration: underline; }
.site-head nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--chrome-focus);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-head :focus-visible { outline-color: var(--chrome-focus); }
.account { display: flex; gap: var(--s3); align-items: center; }
.account a { color: var(--chrome-ink); }
.account a.btn { color: var(--accent-ink); }

/* Buttons: square, chart blue. */
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  text-decoration: none; padding: 0.45em 1em; border: 1px solid var(--accent);
  font-weight: 600; line-height: 1.3;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn.quiet { background: transparent; color: var(--link); border-color: var(--rule-strong); }
.btn.quiet:hover { background: var(--accent-soft); }

/* The Keep in touch form (redesign, 2026-11-05): Chart Room tokens only. */
.signup { max-width: var(--measure); margin-top: var(--s6); }
.signup .field { margin-bottom: var(--s3); }
.signup label { font-weight: 600; }
.signup label.check { font-weight: 400; }
.signup input.email {
  width: 100%; max-width: 28rem; padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-prose);
}
.signup input.email:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.signup button.btn { font-family: var(--font-body); font-size: var(--fs-prose); }
.signup .more { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.signup summary { color: var(--link); font-weight: 600; }

/* The Inspector mark (founder Q28, O2c): sized by its width/height attributes. */
.mark { margin-bottom: var(--s3); }

/* Hero: the one loud element. */
.hero { background: var(--chrome); color: var(--chrome-ink); border-top: 1px solid #2A3B50; }
.hero .wrap { padding-top: var(--s8); padding-bottom: var(--s8); }
.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1;
  color: var(--chrome-ink); max-width: 20ch;
}
.hero p { font-size: var(--fs-prose); color: var(--chrome-ink-2); max-width: var(--measure); margin-top: var(--s4); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero .btn.quiet { color: var(--chrome-ink); border-color: var(--chrome-ink-2); }
.hero .btn.quiet:hover { background: #22364D; }
.hero a { color: var(--chrome-ink); }

/* Content. */
.page { padding-top: var(--s8); padding-bottom: var(--s9); }
.page > .wrap > * + * { margin-top: var(--s4); }
.page h1 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: var(--head-w); line-height: 1.2; }
.lede { font-size: var(--fs-prose); color: var(--ink-2); max-width: var(--measure); }

section.band { border-top: 1px solid var(--rule-strong); padding-top: var(--s6); margin-top: var(--s8); }
section.band:first-of-type { margin-top: var(--s7); }
section.band h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: var(--head-w); line-height: 1.25; }
section.band h3 { font-size: 1.1875rem; font-weight: var(--head-w); margin-top: var(--s5); }
.prose { max-width: var(--measure); font-size: var(--fs-prose); line-height: 1.65; }
.prose > * + * { margin-top: var(--s4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s2); }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s6); margin-top: var(--s5); }
.cols > div { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.cols h3 { margin-top: 0; }
.cols p, .cols li { font-size: var(--fs); }
.cols ul { padding-left: 1.1em; margin-top: var(--s2); }
.cols ul + p, .cols p + p { margin-top: var(--s3); }

.status {
  display: inline-block; border: 1px solid var(--rule-strong); color: var(--ink-2);
  font-size: var(--fs-small); padding: 0 0.5em; margin-left: var(--s2);
  vertical-align: 0.15em; font-weight: 400;
}
.placeholder { background: var(--paper); border: 1px solid var(--rule); padding: var(--s5); max-width: var(--measure); }
.placeholder p + p { margin-top: var(--s2); }

.note { background: var(--accent-soft); padding: var(--s4) var(--s5); max-width: var(--measure); }
.draft { border-left: 3px solid var(--warn); background: var(--paper); padding: var(--s4) var(--s5); max-width: var(--measure); color: var(--ink); }

dl.faq { max-width: var(--measure); margin-top: var(--s5); }
dl.faq dt { font-weight: var(--head-w); font-size: 1.1875rem; margin-top: var(--s6); }
dl.faq dt:first-child { margin-top: 0; }
dl.faq dd { margin-top: var(--s2); font-size: var(--fs-prose); line-height: 1.65; }
dl.faq dd p + p { margin-top: var(--s3); }

table { border-collapse: collapse; width: 100%; max-width: var(--measure); background: var(--paper); font-variant-numeric: tabular-nums lining-nums; }
th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--surface-2); font-weight: var(--head-w); }
.table-scroll { overflow-x: auto; max-width: 100%; }
/* A long hex value in running text wraps anywhere rather than overflowing; no
   soft hyphen, so a copy carries only the hex (QUIC post review). */
.hex code { word-break: break-all; }

/* Footer. */
.site-foot { background: var(--chrome); color: var(--chrome-ink-2); font-size: var(--fs-small); }
.site-foot .wrap { padding-top: var(--s6); padding-bottom: var(--s6); display: grid; gap: var(--s3); }
.site-foot a { color: var(--chrome-ink); }
.site-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

@media (max-width: 640px) {
  :root { --gutter: 1rem; --fs-prose: 1.0625rem; }
  .hero .wrap { padding-top: var(--s7); padding-bottom: var(--s7); }
  .page { padding-top: var(--s7); }
  .brand { width: 100%; margin-right: 0; }
}

/* v1 (docs/plans/shorenet-dev-v1.md): pricing, captures, muted notes */
.muted { color: var(--ink-2); }
.price { font-size: 1.6rem; font-weight: 600; margin: 0.25rem 0 0.75rem; }
.capture h3 { margin-bottom: 0.25rem; }
.files { list-style: none; padding: 0; }
.files li { margin: 0.4rem 0; }
.files code { font-size: 0.8rem; word-break: break-all; }