/* smith.wiki, the Smith Wiki product page, in the design system: masthead,
   stamp, headline with the Klein block, running text. Klein fills are kept for
   the calls to action. Colors and fonts come from tokens.css; both themes follow
   prefers-color-scheme. */

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); scroll-behavior: smooth; }
body { margin: 0; font: 400 18px/1.6 var(--font-text); -webkit-text-size-adjust: 100%; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 28px 32px 80px; }

a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: .06em; }
code { font-family: var(--font-mono); font-variant-ligatures: none; }
h2, h3 { letter-spacing: -.02em; }

/* masthead */
.mast { display: flex; align-items: center; gap: 28px; padding-bottom: 14px; border-bottom: 2px solid var(--fg); }
.brand { font: 700 18px/1 var(--font-mono); color: var(--fg); text-decoration: none; white-space: nowrap; }
.mast nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; }
.mast nav a { color: var(--grey); text-decoration: none; }
.mast nav a:hover { color: var(--fg); }

/* buttons: Klein fill for the main action, outline for the second */
.btn { display: inline-block; padding: 14px 22px; background: var(--klein); color: var(--on-klein); border: 2px solid var(--klein);
       font: 600 17px/1.2 var(--font-text); text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.25); }
.btn.small { padding: 9px 14px; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn.ghost:hover { filter: none; background: var(--panel); }
.btn.on-klein { background: var(--on-klein); color: var(--klein); border-color: var(--on-klein); }
.btn.ghost.on-klein { background: transparent; color: var(--on-klein); border-color: var(--on-klein); }
.btn.ghost.on-klein:hover { background: rgba(255, 255, 255, .12); }

/* stamp: short monospace line above a headline, first item blue */
.stamp { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 13px/1.3 var(--font-mono); color: var(--grey); font-variant-ligatures: none; }
.stamp > :first-child { color: var(--blue); }

/* hero: the pitch and the call to action on the left, a real thread on the right */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 72px 0 64px; }
.hx { font-weight: 700; letter-spacing: -.03em; font-size: clamp(38px, 5vw, 60px); line-height: 1.04; margin: 16px 0 24px; }
.hx em { font-style: normal; color: var(--blue); }
.k { display: inline-block; width: .5em; height: .8em; background: var(--klein); vertical-align: -.04em; margin-left: .1em; }
@media (prefers-color-scheme: dark) { .k { background: var(--blue); } }
/* Live surfaces: the Klein block blinks like a cursor (530 ms on, 530 ms off). */
.k.blink { animation: k-blink 1.06s steps(1) infinite; }
@keyframes k-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .k.blink { animation: none; } }
.lead { font-size: 21px; line-height: 1.5; margin: 0 0 32px; max-width: 32em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.note { margin: 18px 0 0; font-size: 15px; color: var(--grey); max-width: 32em; }

.thread { display: block; background: var(--panel); color: var(--fg); text-decoration: none; padding: 0 0 8px; }
.thread .bar { padding: 12px 20px; border-bottom: 1px solid var(--faint); font: 400 13px/1 var(--font-mono); color: var(--grey); }
.thread .bar::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--klein); }
.card { padding: 20px 24px 8px; }
.card .short { margin: 10px 0 0; font-weight: 700; letter-spacing: -.015em; font-size: 22px; line-height: 1.25; }
.card.reply { margin: 8px 24px 0 36px; padding: 4px 0 8px 20px; border-left: 3px solid var(--klein); }
.card.reply .short { font-weight: 400; letter-spacing: 0; font-size: 17px; line-height: 1.5; }
.card .post { margin: 12px 0 0; font: 400 13px var(--font-mono); color: var(--blue); }
.thread:hover .post { text-decoration: underline; }

/* the strips: clients, then destinations; what is not built yet is grey */
.works { display: grid; gap: 14px; padding: 20px 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.works .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.works .label { width: 7.5em; font: 400 13px var(--font-mono); color: var(--grey); }
.works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; font-weight: 600; font-size: 17px; }
.works .any, .works .soon { color: var(--grey); font-weight: 400; }
.works .tag { font: 400 13px var(--font-mono); color: var(--grey); }
.soon { color: var(--grey); }

/* sections */
.block { padding: 88px 0 0; }
.block h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; margin: 0 0 14px; }
.intro { margin: 0 0 8px; font-size: 20px; line-height: 1.5; color: var(--grey); max-width: 38em; }
h3 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }

.uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 24px; }
.use { padding: 28px 0; border-top: 2px solid var(--fg); }
.use p, .step p, .facts p { margin: 0; font-size: 17px; line-height: 1.55; }
.ex { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 500; text-decoration: none; }
.ex::after { content: " →"; }
.ex:hover { text-decoration: underline; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.step { padding-top: 22px; border-top: 4px solid var(--klein); }

.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.tools { list-style: none; margin: 0; padding: 22px 24px; background: var(--panel); font: 400 16px/1.9 var(--font-mono); }
.tools li { display: grid; grid-template-columns: 1.4em 13ch auto; }
.tools li::before { content: "→"; color: var(--blue); }
.tools code { font-size: inherit; }
.tools span { color: var(--grey); }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.facts > div { padding-top: 22px; border-top: 2px solid var(--fg); }

/* the closing call to action: the one large Klein fill */
.get { margin-top: 96px; padding: 56px 56px 60px; background: var(--klein); color: var(--on-klein); }
.get h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 14px; }
.get p { margin: 0 0 28px; font-size: 20px; line-height: 1.5; max-width: 34em; }
.get a:not(.btn) { color: var(--on-klein); }

footer { margin-top: 48px; font: 400 13px/1.5 var(--font-mono); color: var(--grey); }
footer a { color: var(--grey); }

@media (max-width: 900px) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero { padding-top: 48px; }
  .steps, .facts { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap { padding: 20px 20px 64px; }
  .mast { gap: 16px; }
  .mast nav { display: none; }
  .btn.small { margin-left: auto; }
  .uses, .facts { grid-template-columns: minmax(0, 1fr); }
  .card.reply { margin-left: 20px; }
  .get { padding: 36px 24px 40px; margin-left: -20px; margin-right: -20px; }
  .block { padding-top: 64px; }
}

/* Klein blue is 1.8:1 on black: rules and the bar mark use the lighter blue in the dark theme. */
@media (prefers-color-scheme: dark) {
  .card.reply { border-left-color: var(--blue); }
  .step { border-top-color: var(--blue); }
  .thread .bar::before { background: var(--blue); }
}