/* wiseoak.io — the whole stylesheet, hand-written.
 *
 * A Go text template, rendered by the server at start: the typeface is named
 * by its fingerprinted URL and brand/tokens.css is inlined. The result is
 * fingerprinted itself. No external assets and no build tooling: the CSP is
 * default-src 'self', so the font is served from this site, and nothing here
 * is generated from a framework.
 *
 * The order is the sheet's own: reset, tokens, base, then the letterhead, the
 * statement, the argument, the ledger, the door and the colophon. */

/* ---------- Reset ---------- */
/* Small and deliberate: the page's spacing is written out below, so anything
   a browser adds by default is noise to subtract first. */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  scroll-behavior: smooth;
}
h1,
h2 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
ol {
  list-style: none;
}
img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/* ---------- Type ---------- */
/* InterVariable, self-hosted from the brand directory and fingerprinted, so
   it is served immutable. The roman face only: nothing on this sheet is
   italic. */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/brand/fonts/InterVariable.693b77d4f32ee9b8bfc995589b5fad5e99adf2832738661f5402f9978429a8e3.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
/* brand/tokens.css, inlined whole. The tokens are read rather than copied on
   purpose: the same file generates the authentik brand on the identity domain
   (brand/README.md), and a second copy of the palette is how a sign-in page
   and a site drift into looking like two different companies. */
/* Wise Oak — design tokens.
 *
 * The single source for the brand's colour and type, in two tiers.
 *
 *   Tier 1, the ramps. Derived from the logo green #179567 and carried over
 *   unchanged from where they were first generated. Nothing outside this file
 *   should name a ramp step; they exist so tier 2 has somewhere to point.
 *
 *   Tier 2, the roles. What a screen actually asks for — ground, ink, brand,
 *   accent. A page says `text-muted`, not `text-primary-600`, so the identity
 *   can be retuned here and nowhere else.
 *
 * Consumed three ways: the site's stylesheet inlines this file whole
 * (assets/css/site.css), scripts/brand generates the authentik brand's custom
 * CSS from it (brand/authentik.css), and brand/README.md explains when to
 * reach for which role. See that file before adding a token.
 *
 * One settled discrepancy: the delivered "Color logo with background" field is
 * #0ea47a while the mark itself is #179567. #179567 is the baseline; the other
 * is an artefact of the logo generator and appears nowhere here.
 */

:root {
  --font-sans: InterVariable, ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ─── Tier 1: the ramps ─────────────────────────────────────── */

  /* Primary — the oak green. 600 is the logo. */
  --color-primary-50: #eefbf4;
  --color-primary-100: #d5f6e3;
  --color-primary-200: #afebcc;
  --color-primary-300: #7bdaaf;
  --color-primary-400: #45c28d;
  --color-primary-500: #22a774;
  --color-primary-600: #179567;
  --color-primary-700: #116b4d;
  --color-primary-800: #10553e;
  --color-primary-900: #0e4634;
  --color-primary-950: #07271e;

  /* Secondary — coral. The one warm interruption; never a large field. */
  --color-secondary-50: #fff4f1;
  --color-secondary-100: #ffe7e1;
  --color-secondary-200: #ffd1c7;
  --color-secondary-300: #ffb1a0;
  --color-secondary-400: #ff7a5c;
  --color-secondary-500: #f85e3b;
  --color-secondary-600: #e5421d;
  --color-secondary-700: #c13414;
  --color-secondary-800: #a02e14;
  --color-secondary-900: #842c18;
  --color-secondary-950: #481307;

  /* Tertiary — amber. Cautions and things flagged for a human. */
  --color-tertiary-50: #fcf8ea;
  --color-tertiary-100: #f9efc8;
  --color-tertiary-200: #f4dd94;
  --color-tertiary-300: #edc457;
  --color-tertiary-400: #e5a61d;
  --color-tertiary-500: #d7941b;
  --color-tertiary-600: #b97115;
  --color-tertiary-700: #945114;
  --color-tertiary-800: #7b4118;
  --color-tertiary-900: #69361a;
  --color-tertiary-950: #3d1b0b;

  /* ─── Tier 2: the roles ─────────────────────────────────────── */

  /* Surfaces. Paper, not screen: the ground is a hair warm so the green does
   * not read as clinical, and cards sit above it in plain white. */
  --color-ground: #fbfbf9;
  --color-raised: #ffffff;
  --color-sunken: #f1f5f2;
  --color-hairline: #e3e9e5;

  /* Text. Ink is a green-black, not a grey, so body copy belongs to the same
   * family as the mark. */
  --color-ink: #0d1f18;
  --color-ink-soft: #3b4c45;
  --color-muted: #6c7d75;
  --color-on-brand: #ffffff;

  /* Brand.
   *   --color-brand         the logo green. Large text, graphics, fields of
   *                         colour — anything where 3:1 is the bar.
   *   --color-brand-strong  the same green taken down until white on it and it
   *                         on white both clear 4.5:1. Solid buttons, links,
   *                         and any brand-coloured word at body size.
   *   --color-brand-deep    the dark field: the footer, the closing band.
   *   --color-brand-tint    the pale field: quiet callouts on the ground. */
  --color-brand: var(--color-primary-600);
  --color-brand-strong: var(--color-primary-700);
  --color-brand-deep: var(--color-primary-900);
  --color-brand-tint: var(--color-primary-50);

  /* Accent — coral. A marker, never a paragraph: the rule over a section
   * heading, the live step in the brief, the edge of the exclusion block. */
  --color-accent: var(--color-secondary-500);
  --color-accent-strong: var(--color-secondary-700);

  /* Caution — amber. Something a person has to look at: a draft notice, a
   * brief flagged for triage, a form that did not go through. */
  --color-caution: var(--color-tertiary-500);
  --color-caution-strong: var(--color-tertiary-700);
  --color-caution-tint: var(--color-tertiary-50);

  /* The height anything standing on a form row takes, so a button beside a
   * field cannot drift shorter than it. */
  --control-height: 46px;
}


/* ---------- Base ---------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05", "ss03";
}
::selection {
  background: var(--color-primary-200);
}
:focus-visible {
  outline: 2px solid var(--color-brand-strong);
  outline-offset: 2px;
}

/* The sheet: one measure, centred, with the colophon held at the foot of a
   short page by the flex column. */
.sheet {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Shared type ---------- */

/* The small tracked label that heads a section. */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Display sizes. The tracking moves with the size, and the measure lives on
   the text, where `ch` means what it says: 17 characters of *this* size. On a
   wrapper it would mean 17 characters of the wrapper's 16px, which is how a
   headline ends up in a 430px column. */
.display-1 {
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 17ch;
}
.display-2 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 20ch;
}

/* Body copy: one size everywhere, so the rhythm of the sheet is a decision
   rather than an accident. */
.statement-aside p,
.argument p,
.door p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  text-wrap: pretty;
  max-width: 66ch;
}

/* A link inside prose. Underlined, because a colour alone is not a link. */
.link {
  color: var(--color-brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-brand-strong) 40%, transparent);
}
.link:hover {
  text-decoration-color: currentColor;
}

/* The section rule: a short coral tick above a heading. The accent's whole job
   on this sheet, and the reason it never has to be a paragraph. */
.tick::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  margin-bottom: 18px;
}

/* ---------- The letterhead ---------- */
.letterhead {
  padding-top: 40px;
}
.letterhead-link {
  display: inline-block;
}
.lockup {
  height: 52px;
  width: auto;
}

.sheet-main {
  flex: 1 1 0%;
  padding-top: 56px;
  padding-bottom: 64px;
}

/* ---------- The statement ---------- */
/* One line, with the paragraph that qualifies it set beside rather than under:
   from the large breakpoint the headline takes seven of twelve columns and the
   paragraph the last four, divided by a hairline. */
.statement-aside {
  margin-top: 32px;
}

/* ---------- The argument ---------- */
.argument {
  margin-top: 64px;
  border-top: 1px solid var(--color-hairline);
  padding-top: 40px;
  display: grid;
  row-gap: 32px;
}
.argument strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- The ledger ---------- */
/* What has been launched. The chips share one box size and each supplies its
   own site's ground, so the entries sit as equals; the dotted leader carries
   the eye from the description to the domain. */
.ledger {
  margin-top: 80px;
}
.ledger > h2 {
  color: var(--color-muted);
}
.ledger-list {
  margin-top: 24px;
  border-top: 1px solid var(--color-hairline);
}
.ledger-item {
  border-bottom: 1px solid var(--color-hairline);
}
.ledger-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 20px;
  padding-block: 28px;
}
.chip {
  display: flex;
  height: 72px;
  width: 256px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ledger-link:hover .chip {
  opacity: 0.85;
}
/* Every logo is a mark beside the name in one proportion — Ruby's as
   delivered, the others drawn to it by scripts/lockups — so all of them stand
   at one height. */
.chip-logo {
  width: auto;
  height: 38px;
}
/* Each site's own ground. Ruby's sand (#F5F3F0) is bordered — sand and this
   sheet's paper are near neighbours. */
.chip--boise-founders-guild {
  background: #f0e9cf;
}
.chip--stacktender {
  background: #0f1512;
}
.chip--rubys-dumplings {
  background: #f5f3f0;
  border: 1px solid var(--color-hairline);
}
.ledger-blurb {
  font-size: 16px;
  color: var(--color-ink-soft);
}
.ledger-leader {
  display: none;
}
.ledger-domain {
  font-size: 14.5px;
  color: var(--color-muted);
}
.ledger-link:hover .ledger-domain {
  color: var(--color-brand-strong);
}
.ledger-date {
  font-size: 14.5px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- The door ---------- */
.door {
  margin-top: 80px;
}
.door > p {
  margin-top: 24px;
}

/* ---------- The 404 ---------- */
.not-found-code {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}

/* ---------- The colophon ---------- */
/* The legal name and the jurisdiction a registrar checks a company's domain
   against, and the address its registrations point at. */
.colophon {
  border-top: 1px solid var(--color-hairline);
  padding-block: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--color-muted);
}
.colophon-mail:hover {
  color: var(--color-brand-strong);
}

/* ---------- Small ---------- */
@media (min-width: 640px) {
  .colophon {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Medium: the ledger becomes a row ---------- */
@media (min-width: 768px) {
  .ledger-link {
    flex-direction: row;
    align-items: center;
  }
  .ledger-blurb {
    margin-left: 24px;
  }
  .ledger-leader {
    display: block;
    flex: 1 1 0%;
    margin-inline: 20px;
    border-bottom: 1px dotted var(--color-muted);
  }
  .ledger-date {
    margin-left: 32px;
    width: 8ch;
    text-align: right;
  }
}

/* ---------- Large: the twelve-column sheet ---------- */
@media (min-width: 1024px) {
  .sheet {
    padding-inline: 40px;
  }
  .letterhead {
    padding-top: 56px;
  }
  .lockup {
    height: 72px;
  }
  .sheet-main {
    padding-top: 80px;
  }
  .statement {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 40px;
  }
  .statement > h1,
  .statement > .statement-lead {
    grid-column: span 7 / span 7;
  }
  .statement-aside {
    grid-column: 9 / span 4;
    margin-top: 4px;
    border-left: 1px solid var(--color-hairline);
    padding-left: 32px;
  }
  .argument {
    margin-top: 96px;
    padding-top: 48px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
  }
  .ledger,
  .door {
    margin-top: 112px;
  }
}