/* The whole look of the website, in one sheet.
 *
 * THE LOOK, at the founder's word of 2026-09-28: the calm, wide front page a
 * person expects of a serious tool, in Oba's own palette and nobody else's.
 * A wide frame with air around everything, one bar that stays at the top of
 * the screen with the one thing the page asks you to do in it, one big line
 * to open on, one quiet line under that, the real window in a panel, three
 * short panels, and a short foot. Nothing moves, nothing fades, nothing is
 * loaded from anywhere.
 *
 * The founder's eight colours and no ninth (docs/look-pass-2026-09-05/
 * design-system.md), declared once below in his own order and with the same
 * comments the Oba window uses, so the two files read as one palette.
 *
 * ONE OCHRE, AND IT IS THE DOWNLOAD. Ochre is semantic: it means "the agent
 * did this / needs you", and the design system forbids it on generic buttons,
 * links, hovers and focus rings while allowing it on the primary action of
 * the one thing a surface asks a person to do. This site asks for exactly one
 * thing, so exactly one element on every page of it is ochre: the download
 * control in the bar, which is the same control on all five pages and which
 * stays on the screen while a person scrolls. Every other link, hover, button
 * and focus ring is chalk or steel. The count is proved rather than promised:
 * the rules that name an ochre are counted, and so are the elements that wear
 * them.
 *
 * Two radii, one spacing scale of seven steps, five type sizes, two font
 * stacks, and nothing else. The largest size is the one line the front page
 * opens with, and it is the only size on this site that answers the width of
 * the screen. No gradient, no shadow, no blur, no animation, no @font-face
 * and no url() to anywhere: this sheet is the only thing any page of this
 * site loads, and it loads nothing itself. One focus ring, drawn in chalk, on
 * every link, the one input and the one button.
 *
 * The wordmark is the lowercase word oba set in the sans stack, which is what
 * the window does today and what the design system asks for while the faces
 * are not locked. There is no image in this stylesheet, on any page of this
 * site, and no favicon: the brand files are parked at the founder's word and
 * land the day he says so. The one mark a reader sees on a page is the
 * founder's own beside the wordmark, inlined in every bar, and the window's
 * own inside the frame on the front page.
 */

:root {
  --oba-slate:      #1E1E1E;   /* the page's ground */
  --oba-chalk:      #EBEBEB;   /* primary text, hairline rings, hovers */
  --oba-ochre:      #E8A400;   /* THE accent, semantic: the download control */
  --oba-ochre-deep: #A67200;   /* light grounds; the same control, hovered */
  --oba-steel:      #9A9A9A;   /* secondary text, captions, disabled */
  --oba-surface-1:  #252526;   /* raised: the panels, the stage, the button */
  --oba-surface-2:  #2D2D2D;   /* higher: the one input, an inline command */
  --oba-border:     #3C3C3C;   /* hairlines */
  --oba-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --oba-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Two radii and no third. The small one is what a person types into or
     presses; the big one is what a panel is. */
  --oba-r: 8px;
  --oba-r-big: 14px;

  /* One spacing scale. Every margin, padding and gap on this site is one of
     these seven, so a stranger adding a rule has seven numbers to choose from
     and not an inch of taste. The last two are the air a wide page needs
     between one section and the next. */
  --oba-s1: 4px;
  --oba-s2: 8px;
  --oba-s3: 16px;
  --oba-s4: 24px;
  --oba-s5: 40px;
  --oba-s6: 64px;
  --oba-s7: 96px;

  /* Five type sizes. The front page's one line is the largest and is used on
     that line and nowhere else; a heading is next; then the line under a
     headline, a section title and the words in the three panels; then the
     body; then the bar, the captions, the labels and the small print.
     Nothing else on this site has a size of its own. */
  --oba-t0: 52px;
  --oba-t1: 30px;
  --oba-t2: 20px;
  --oba-t3: 16px;
  --oba-t4: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--oba-slate);
  color: var(--oba-chalk);
  font-family: var(--oba-sans);
  font-size: var(--oba-t3);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* -- the frame every page wears ------------------------------------------ */

/* The page is one wide frame with the bar, the words and the foot inside it.
   The words themselves keep a reading measure of their own below, so the
   frame can be wide without a sentence ever being wide. */
.page {
  max-width: 66rem;
  margin: 0 auto;
  padding: 0 var(--oba-s4) var(--oba-s7);
}

/* -- the bar, and the wordmark ------------------------------------------- */

/* IT STAYS. The one thing this site asks a person to do lives in this bar, so
   the bar is on the screen wherever a person has scrolled to. Its ground is
   the page's own, opaque, because words passing behind it would be the one
   piece of noise on a quiet page. */
.top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--oba-slate);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oba-s4);
  padding: var(--oba-s3) 0;
  border-bottom: 1px solid var(--oba-border);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--oba-s2);
  font-family: var(--oba-sans);
  font-size: var(--oba-t2);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-right: auto;
}

/* THE MARK BESIDE THE WORDMARK: the founder's own, inlined in every page's
   bar by scripts/mark_table.py from adapters/window/brand/still/
   oba-mark-small.svg, in its own ink on the bar's slate with its one ochre
   ring. It is the one ochre on the site that is not the download control, and
   scripts/site_proof.py pins it to that one element and no other. Sized to
   the wordmark's own type, so the two read as one thing. */
.mark-glyph {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oba-s4);
  font-size: var(--oba-t4);
}

/* The bar's own words are secondary and they say so: steel, no rule under
   them, chalk when the pointer is on one. */
.nav a {
  color: var(--oba-steel);
  text-decoration: none;
}

.nav a:hover {
  color: var(--oba-chalk);
}

/* THE ONE THING THE PAGE ASKS YOU TO DO, and the only ochre on this site.
   Slate on ochre, because the accent is the ground here and chalk on ochre
   is two light things on top of each other. It is a link and not a button
   element, so it takes the one chalk focus ring with every other link and
   needs no ring of its own. */
.cta {
  background: var(--oba-ochre);
  color: var(--oba-slate);
  border-radius: var(--oba-r);
  font-size: var(--oba-t4);
  font-weight: 500;
  padding: var(--oba-s2) var(--oba-s3);
  text-decoration: none;
  white-space: nowrap;
}

.cta:hover {
  background: var(--oba-ochre-deep);
}

/* -- headings and prose -------------------------------------------------- */

/* A SENTENCE KEEPS ITS MEASURE. The frame is wide; a line of prose is not,
   because a line a reader's eye cannot come back from is a line nobody
   finishes. The front page takes this off below, where what fills the width
   is a panel and never a paragraph. */
main {
  max-width: 40rem;
}

h1 {
  font-size: var(--oba-t1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: var(--oba-s6) 0 var(--oba-s4);
}

/* A section title on a page of prose. The front page's own are further apart
   and set below, because there each one opens a piece of the page rather than
   the next paragraph of one. */
h2 {
  font-size: var(--oba-t2);
  font-weight: 500;
  line-height: 1.4;
  margin: var(--oba-s5) 0 var(--oba-s2);
}

p, ul {
  margin: 0 0 var(--oba-s3);
}

ul {
  padding-left: var(--oba-s4);
}

li {
  margin-bottom: var(--oba-s2);
}

/* The bullet is a mark of place and not a word, so it is steel. */
li::marker {
  color: var(--oba-steel);
}

/* The one line under a page's heading. Steel, because it is the second thing
   a person reads and not the first. */
.lead {
  font-size: var(--oba-t2);
  line-height: 1.5;
  color: var(--oba-steel);
  margin-bottom: var(--oba-s5);
}

.quiet {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
}

/* -- links --------------------------------------------------------------- */

/* Chalk, underlined, and the hover is the underline going away. No accent
   colour, because a link on a website is not the agent doing something. */
a {
  color: var(--oba-chalk);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: none;
}

/* ONE FOCUS IDIOM, everywhere. A chalk ring, off the border, on every link,
   the one input and the one button. It is never removed and never coloured. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--oba-chalk);
  outline-offset: 2px;
}

/* -- the front page: one line, the window, three panels, five names ------ */

/* What fills a wide frame here is a panel, so the measure comes off and each
   piece below sets its own. */
.front main {
  max-width: none;
}

.front h2 {
  margin: var(--oba-s6) 0 var(--oba-s3);
}

/* The opening, centred, with air above and below it. It is the whole of what
   a person meets before they have scrolled at all: one line, one line under
   it, and the one sentence that says Oba is invitation only. */
.opening {
  text-align: center;
  padding: var(--oba-s7) 0 var(--oba-s6);
}

.hero {
  font-size: clamp(32px, 6vw, var(--oba-t0));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto var(--oba-s4);
  max-width: 42rem;
}

.sub {
  font-size: var(--oba-t2);
  line-height: 1.5;
  color: var(--oba-steel);
  margin: 0 auto var(--oba-s4);
  max-width: 34rem;
}

.opening .quiet {
  margin: 0;
}

/* THE WINDOW ITSELF, in a panel the width a docked palette really opens at.
   The panel is raised one step off the page so the window's own slate reads
   as a screen standing in something, and it hugs the window rather than
   spreading over the whole frame: a narrow palette in a wide box would be a
   box drawn for the sake of drawing a box. The frame is fixed at the
   palette's width and shrinks with the page below that, which is the one
   thing that has to give on a narrow screen. */
.stage {
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  max-width: 32rem;
  margin: 0 auto var(--oba-s6);
  padding: var(--oba-s5) var(--oba-s4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.window {
  width: 320px;
  max-width: 100%;
  height: 560px;
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r);
  background: var(--oba-slate);
  display: block;
}

.caption {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
  margin: var(--oba-s4) 0 0;
  max-width: 30rem;
  text-align: center;
}

/* Three panels, one line each. They fall into one column on a narrow screen
   because three columns of one line each stop being three panels and start
   being three broken sentences. */
.blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--oba-s3);
  margin: 0 0 var(--oba-s3);
}

.block {
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  padding: var(--oba-s4);
  font-size: var(--oba-t2);
  line-height: 1.45;
}

.block p {
  margin: 0;
}

/* The five applications, in the order the installer names them. Each one is a
   name with a hairline round it and nothing else: they are where Oba opens,
   not something to press. */
.apps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oba-s2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--oba-s3);
}

.apps li {
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r);
  color: var(--oba-steel);
  font-size: var(--oba-t4);
  margin: 0;
  padding: var(--oba-s2) var(--oba-s3);
}

/* -- the raised panels --------------------------------------------------- */

.note {
  background: var(--oba-surface-1);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r-big);
  padding: var(--oba-s4);
  margin: 0 0 var(--oba-s4);
}

.note p:last-child {
  margin-bottom: 0;
}

/* A command to type, or the code one copy of Oba is waiting under, is the
   thing its panel is about, so inside a panel it is set at the body size and
   not at the small one. */
.note code {
  font-size: var(--oba-t3);
}

/* -- aligned numerics, and a command as a person types it ---------------- */

/* Monospace on every aligned numeric and nowhere else: the version, the byte
   count and the sha256 on the download page, the code a copy of Oba is
   waiting under, and the commands a person types in a terminal. */
.numeric,
code {
  font-family: var(--oba-mono);
  font-size: var(--oba-t4);
  overflow-wrap: anywhere;
}

code {
  background: var(--oba-surface-2);
  border-radius: var(--oba-r);
  padding: var(--oba-s1) var(--oba-s2);
}

dl.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--oba-s2) var(--oba-s4);
}

dl.facts dt {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
}

dl.facts dd {
  margin: 0;
  font-family: var(--oba-mono);
  font-size: var(--oba-t4);
  overflow-wrap: anywhere;
}

/* -- the one form -------------------------------------------------------- */

form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oba-s3);
  align-items: flex-end;
  margin: 0 0 var(--oba-s4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--oba-s2);
  flex: 1 1 18rem;
}

label {
  color: var(--oba-steel);
  font-size: var(--oba-t4);
}

input {
  background: var(--oba-surface-2);
  color: var(--oba-chalk);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r);
  font-family: var(--oba-sans);
  font-size: var(--oba-t3);
  padding: var(--oba-s3);
  min-width: 0;
}

button {
  background: var(--oba-surface-1);
  color: var(--oba-chalk);
  border: 1px solid var(--oba-border);
  border-radius: var(--oba-r);
  font-family: var(--oba-sans);
  font-size: var(--oba-t3);
  font-weight: 500;
  padding: var(--oba-s3) var(--oba-s5);
  cursor: pointer;
}

button:hover {
  border-color: var(--oba-chalk);
}

/* -- the foot ------------------------------------------------------------ */

.foot {
  margin-top: var(--oba-s7);
  padding-top: var(--oba-s4);
  border-top: 1px solid var(--oba-border);
  color: var(--oba-steel);
  font-size: var(--oba-t4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--oba-s4);
}

.foot a {
  color: var(--oba-steel);
  text-decoration: none;
}

.foot a:hover {
  color: var(--oba-chalk);
}

/* -- a narrow screen ----------------------------------------------------- */

/* The bar becomes two rows rather than three: the wordmark and the one
   control on the first, the bar's other words on their own line under them.
   Everything else that was a row becomes a column. */
@media (max-width: 46rem) {
  .page {
    padding: 0 var(--oba-s3) var(--oba-s6);
  }

  .top {
    gap: var(--oba-s3);
  }

  .mark {
    order: 1;
  }

  .cta {
    order: 2;
  }

  .nav {
    order: 3;
    flex-basis: 100%;
    gap: var(--oba-s3);
  }

  .opening {
    padding: var(--oba-s6) 0 var(--oba-s5);
  }

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

  h1 {
    margin-top: var(--oba-s5);
  }

  .front h2 {
    margin-top: var(--oba-s5);
  }
}