/* Recursive Creative Systems — the web surface.
   The family is the ledger system PRVNZ and Machine Sounds use: flat, hairlines
   instead of cards, no shadows, two grounds that alternate by section, a mark
   that is a decision and never a decoration, motion as arrival. The hand is
   ours: warm ink and paper, Syne for the voice, Familjen Grotesk for the
   argument, JetBrains Mono for the record. Two marks with meaning, from the
   plug-ins: brass is what you asked for or decided; jade is what left or was
   checked. Neither is ever a hover tint or a border on something merely present. */

:root {
  --ink: #12100E;
  --ink-fg: #EDE6DA;
  --ink-muted: #9B917F;
  --ink-faint: #7A7266;
  --ink-rule: #262220;
  --ink-rule-lit: #3A3530;
  --ink-control: #6E665B;
  --paper: #F1ECE2;
  --paper-fg: #14120F;
  --paper-muted: #5C5548;
  --paper-faint: #8A8274;
  --paper-rule: #D9D1C3;
  --paper-control: #7C7466;
  --mada: #D9A441;   /* asked for, decided */
  --sada: #7FB3A6;   /* left, checked */
  --mada-on-paper: #9A6E12;
  --sada-on-paper: #2F6E60;
  --voice: "Syne", "Familjen Grotesk", system-ui, sans-serif;
  --argument: "Familjen Grotesk", system-ui, sans-serif;
  --record: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 24px;
  --max: 1440px;
}

* { box-sizing: border-box; }
html { background: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--ink); color: var(--ink-fg); font: 400 1.0625rem/1.6 var(--argument); }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; max-width: 62ch; }
::selection { background: var(--ink-fg); color: var(--ink); }
.on-paper ::selection { background: var(--paper-fg); color: var(--paper); }

/* type roles */
.voice { font-family: var(--voice); font-weight: 800; letter-spacing: -0.02em; }
.display { font: 800 clamp(2.6rem, 6.6vw, 6.4rem)/0.96 var(--voice); letter-spacing: -0.035em; text-transform: uppercase; margin: 0; max-width: 20ch; text-wrap: balance; }
.title { font: 800 clamp(1.9rem, 3.6vw, 3.2rem)/1.04 var(--voice); letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 1rem; max-width: 22ch; text-wrap: balance; }
.heading { font: 700 clamp(1.25rem, 1.8vw, 1.6rem)/1.15 var(--voice); letter-spacing: -0.01em; margin: 0 0 .5rem; }
.lead { font: 400 clamp(1.2rem, 1.9vw, 1.55rem)/1.45 var(--argument); max-width: 34ch; margin: 0 0 1.25rem; }
.label { font: 500 0.6875rem/1 var(--voice); letter-spacing: 0.16em; text-transform: uppercase; }
.record { font: 400 0.8125rem/1.6 var(--record); letter-spacing: 0.02em; }
.muted { color: var(--ink-muted); }
.on-paper .muted { color: var(--paper-muted); }

/* grounds */
.on-ink { background: var(--ink); color: var(--ink-fg); }
.on-paper { background: var(--paper); color: var(--paper-fg); }
.on-paper p { color: var(--paper-fg); }

/* grid */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c7 { grid-column: span 7; } .c4 { grid-column: span 4; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.c3 { grid-column: span 3; }

/* chrome */
.top { position: sticky; top: 0; z-index: 10; background: var(--ink); border-bottom: 1px solid var(--ink-rule); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark { font: 800 0.9375rem/1 var(--voice); letter-spacing: 0.18em; text-transform: uppercase; }
.top nav { margin-left: auto; display: flex; gap: 26px; }
.top nav a { font: 500 0.6875rem/1 var(--voice); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink-fg); }
.top nav a.sign { color: var(--ink-fg); }
@media (max-width: 900px) { .top nav a:not(.sign):not(.keep) { display: none; } }

/* sections: a rule, then a label in the record face */
section { padding: clamp(5rem, 11vw, 12rem) 0; }
section.tight { padding-top: clamp(3rem, 6vw, 6rem); }
.rule { border-top: 1px solid var(--ink-rule); padding-top: 1.25rem; }
.on-paper .rule { border-color: var(--paper-rule); }
.sect-label { display: flex; gap: 14px; align-items: baseline; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sect-label .n { font: 400 0.8125rem/1 var(--record); color: var(--ink-faint); }
.on-paper .sect-label .n { color: var(--paper-faint); }
.sect-label .t { font: 400 0.8125rem/1 var(--record); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted); }
.on-paper .sect-label .t { color: var(--paper-muted); }

/* the hero */
.hero { padding: clamp(6rem, 14vw, 13rem) 0 clamp(4rem, 8vw, 8rem); }
.hero .lead { margin-top: 1.5rem; }
.hero .avail { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.state { display: inline-flex; align-items: center; gap: 8px; font: 400 0.75rem/1 var(--record); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-control); }
.state.now::before { background: var(--sada); }
.state.now { color: var(--ink-fg); }
.on-paper .state { color: var(--paper-muted); }
.on-paper .state.now { color: var(--paper-fg); }
.on-paper .state.now::before { background: var(--sada-on-paper); }

/* buttons: controls clear 3:1 at the edge */
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1px solid var(--ink-control); border-radius: 2px; font: 500 0.75rem/1 var(--voice); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fg); transition: border-color .4s var(--ease), background .4s var(--ease); }
.btn:hover { border-color: var(--ink-fg); }
.btn.primary { background: var(--ink-fg); color: var(--ink); border-color: var(--ink-fg); }
.btn.primary:hover { background: #fff; }
.on-paper .btn { border-color: var(--paper-control); color: var(--paper-fg); }
.on-paper .btn:hover { border-color: var(--paper-fg); }
.on-paper .btn.primary { background: var(--paper-fg); color: var(--paper); border-color: var(--paper-fg); }
.link { border-bottom: 1px solid var(--ink-control); padding-bottom: 1px; }
.link:hover { border-color: currentColor; }
.on-paper .link { border-color: var(--paper-control); }

/* the record of a session */
.session { border-top: 1px solid var(--ink-rule); border-bottom: 1px solid var(--ink-rule); padding: 1.25rem 0; }
.session .line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: .45rem 0; font: 400 0.8125rem/1.6 var(--record); color: var(--ink-fg); }
.session .who { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.session .line.you .who { color: var(--mada); }
.session .line.step { color: var(--ink-muted); }
.session .line.check .who { color: var(--sada); }
.session .line.check { color: var(--ink-fg); }
.session .num { color: var(--ink-fg); }
.session .line.say { padding-top: .9rem; font-family: var(--argument); font-size: 1rem; line-height: 1.5; }
.session .line.say .who { font-family: var(--record); font-size: 0.8125rem; padding-top: .2rem; }
.arrive { opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.arrive.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .arrive { opacity: 1; transform: none; transition: none; } }

/* ledger lists: rows, hairlines, no boxes */
.ledger { border-top: 1px solid var(--ink-rule); }
.on-paper .ledger { border-color: var(--paper-rule); }
.row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 160px; gap: var(--gutter); padding: 1.35rem 0; border-bottom: 1px solid var(--ink-rule); align-items: baseline; }
.on-paper .row { border-color: var(--paper-rule); }
.row .name { font: 700 1.05rem/1.2 var(--voice); letter-spacing: -0.01em; }
.row .what { margin: 0; max-width: 60ch; }
.row .st { justify-self: end; }
@media (max-width: 800px) { .row { grid-template-columns: 1fr; gap: .4rem; } .row .st { justify-self: start; } }

/* pairs: two columns of equal weight */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.pair > div { border-top: 1px solid var(--ink-rule); padding-top: 1.25rem; }
.on-paper .pair > div { border-color: var(--paper-rule); }
.pair .q { font: 400 0.8125rem/1.6 var(--record); color: var(--ink-muted); margin-bottom: .6rem; }
.on-paper .pair .q { color: var(--paper-muted); }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; } .cols > * { grid-column: span 12; } }

/* the identity document: the machine's own words, quoted */
.doc { font: 400 0.8125rem/1.65 var(--record); border-top: 1px solid var(--ink-rule); border-bottom: 1px solid var(--ink-rule); padding: 1rem 0; margin: 0; white-space: pre; overflow-x: auto; color: var(--ink-fg); }
.doc .k { color: var(--ink-faint); } .doc .m { color: var(--mada); } .doc .s { color: var(--sada); }
.on-paper .doc { color: var(--paper-fg); border-color: var(--paper-rule); }
.on-paper .doc .k { color: var(--paper-faint); } .on-paper .doc .m { color: var(--mada-on-paper); } .on-paper .doc .s { color: var(--sada-on-paper); }

/* comparison as a ledger, not a scorecard */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .9rem 0 .9rem; border-bottom: 1px solid var(--paper-rule); vertical-align: top; }
th { font: 500 0.6875rem/1 var(--voice); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-muted); }
td { padding-right: var(--gutter); }
td.yes { color: var(--sada-on-paper); }
td.not { color: var(--paper-faint); }
.tablewrap { overflow-x: auto; }

/* closing */
.close { text-align: center; }
.close .display { margin: 0 auto; }
.close .avail { justify-content: center; }

footer { border-top: 1px solid var(--ink-rule); padding: 2rem 0 3rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; }
footer a, footer span { font: 400 0.75rem/1.6 var(--record); color: var(--ink-muted); letter-spacing: 0.02em; }
footer a:hover { color: var(--ink-fg); }
footer .right { margin-left: auto; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--sada); outline-offset: 3px; }