/* Somad website, drawn like the TUI in a terminal: SomaFM's red, gold
   and teal (the palette in internal/ui/styles.go), rounded lipgloss-style
   panels with their titles set into the border, a tmux status line and
   shell prompts. Dark by default, warm paper when the visitor
   prefers light or picks it with the status line's theme switch. Titles
   are set in Iosevka, a terminal font, and the interface in JetBrains
   Mono; both are self-hosted Latin subsets (fonts/, SIL OFL). */

@font-face {
  font-family: "Iosevka";
  src: url("fonts/iosevka-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Iosevka";
  src: url("fonts/iosevka-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  --bg: #0e0c0a;
  --bg-deep: #090807;
  --raised: #17140f;
  --line: #2e2822;
  --line-strong: #4b4239;
  --text: #f2ece3;
  --muted: #a69c8f;
  --dim: #6f665b;
  --gold: #d8a24d;
  --gold-ink: #1b1305;
  --teal: #3cb8bd;
  --teal-deep: #13666a;
  --red: #ff4b3e;
  --glow: rgba(216, 162, 77, .14);
  --grain-opacity: .05;
  --scanline: rgba(0, 0, 0, .22);
  --shadow: 0 40px 80px -40px rgba(0, 0, 0, .85);
  --display: "Iosevka", "Iosevka Term", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

/* Light: picked with the theme switch (data-theme, set by site.js and
   the inline script in base.html), or preferred by the browser when
   nothing was picked. Keep the two blocks identical. */
:root[data-theme="light"] {
  --bg: #f4efe6;
  --bg-deep: #ebe4d7;
  --raised: #fbf8f2;
  --line: #dcd2c3;
  --line-strong: #b7aa97;
  --text: #1d1915;
  --muted: #5b5248;
  --dim: #8a7f71;
  --gold: #8f6400;
  --gold-ink: #fffaf0;
  --teal: #0e686d;
  --teal-deep: #0e686d;
  --red: #c40608;
  --glow: rgba(216, 162, 77, .22);
  --grain-opacity: .08;
  --scanline: rgba(80, 60, 30, .05);
  --shadow: 0 30px 60px -36px rgba(60, 40, 10, .35);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4efe6;
    --bg-deep: #ebe4d7;
    --raised: #fbf8f2;
    --line: #dcd2c3;
    --line-strong: #b7aa97;
    --text: #1d1915;
    --muted: #5b5248;
    --dim: #8a7f71;
    --gold: #8f6400;
    --gold-ink: #fffaf0;
    --teal: #0e686d;
    --teal-deep: #0e686d;
    --red: #c40608;
    --glow: rgba(216, 162, 77, .22);
    --grain-opacity: .08;
    --scanline: rgba(80, 60, 30, .05);
    --shadow: 0 30px 60px -36px rgba(60, 40, 10, .35);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Film grain over everything, like a dim room with a lamp on. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--gold); color: var(--gold-ink); }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

code, pre, kbd { font-family: var(--mono); }
code { font-size: .88em; color: var(--text); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: .08em .35em; }
pre {
  margin: 0;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  line-height: 1.6;
  font-size: .86rem;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
pre .c { color: var(--dim); font-style: italic; }
pre .p { color: var(--gold); user-select: none; margin-right: .6em; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  font-size: .78em;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
  background: linear-gradient(var(--raised), var(--bg));
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  box-shadow: 0 2px 0 var(--line-strong);
  padding: 0 .4em;
  margin-bottom: 2px;
}

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--gold); color: var(--gold-ink); padding: .5rem 1rem; border-radius: 6px; z-index: 10; }

/* Panels: a rounded border with its title set into the top edge, like the
   TUI's lipgloss cards. Their background is the page's, so the label's
   backing blends in on both sides of the border. */

.panel {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 1.4rem 1.3rem 1.2rem;
  background: var(--bg);
}
.panel-label {
  position: absolute; top: 0; left: .9rem; transform: translateY(-50%);
  padding: 0 .5rem;
  background: var(--bg);
  color: var(--gold);
  font: 700 .75rem/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Top bar ------------------------------------------------------------ */

/* A tmux status line: the session on the left, one window per section
   named by its shortcut key, flagged * while it is on screen. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  font: .82rem var(--mono);
}
.tmux { display: flex; align-items: center; gap: 1.25rem; height: 2.75rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.session {
  background: var(--gold); color: var(--gold-ink);
  font-weight: 700; letter-spacing: -.01em;
  padding: .1rem .55rem; border-radius: 3px;
}
.session .brand-d { color: var(--gold-ink); opacity: .6; }
.brand-d { color: var(--gold); }
.logo { width: 1.35rem; height: 1.35rem; }
.menu { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; flex: 1; }
.menu a { display: inline-flex; align-items: center; color: var(--muted); padding: .15rem .5rem; border-radius: 3px; }
.menu a:hover { color: var(--text); text-decoration: none; }
.menu .idx { color: var(--dim); }
.menu .flag { display: inline-block; width: 1ch; }
.menu a.current { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 85%, transparent); }
.menu a.current .idx { color: inherit; opacity: .65; }
.menu a.current .flag::before { content: "*"; }
.status-right { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--dim); }
.status-right a { color: var(--muted); }
.status-right a:hover { color: var(--gold); text-decoration: none; }
.theme {
  display: inline-flex; align-items: center;
  padding: .15rem .5rem; border: 0; border-radius: 3px;
  background: none; color: var(--muted); font: inherit; cursor: pointer;
}
.theme[hidden] { display: none; }
.theme:hover { color: var(--text); }
.theme .idx { color: var(--dim); }
.theme-key { margin-right: 1ch; }
.theme-value { color: var(--teal); }
/* The theme as a swatch: paper, ink, or half of each for the browser's
   choice. It stands in for the words on narrow screens. */
.swatch {
  width: .8em; height: .8em; margin-right: .45em; border-radius: 50%;
  border: 1px solid var(--dim);
  background: linear-gradient(90deg, #0e0c0a 50%, #f4efe6 50%);
}
:root[data-theme="dark"] .swatch { background: #0e0c0a; }
:root[data-theme="light"] .swatch { background: #f4efe6; }

/* Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 50% 100%, var(--glow), transparent 70%),
    radial-gradient(40% 50% at 15% 10%, color-mix(in srgb, var(--red) 7%, transparent), transparent 70%);
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}
.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  margin: 0 0 1.4rem; color: var(--muted);
  font: .78rem var(--mono); letter-spacing: .04em;
}

.hero h1 {
  margin: 0;
  font: 800 clamp(2.6rem, 5.6vw, 4.6rem)/1 var(--display);
  letter-spacing: -.02em;
}
.hero h1 em { color: var(--gold); font-style: normal; font-weight: 300; }
.lede { color: var(--muted); font-size: 1.12rem; margin: 1.5rem 0 0; max-width: 33rem; }
.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.1rem; }
.btn {
  display: inline-block; padding: .65rem 1.25rem; border-radius: 999px;
  font: 600 .88rem var(--mono); letter-spacing: .01em;
  border: 1px solid var(--line-strong); color: var(--text);
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; border-color: var(--gold); color: var(--gold); }
.btn.primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn.primary:hover { color: var(--gold-ink); box-shadow: 0 0 28px -6px var(--gold); }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.version { margin: 1.6rem 0 0; color: var(--dim); font: .78rem var(--mono); letter-spacing: .04em; }
.version code { margin-left: .35rem; color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); background: none; }

.screen { margin: 0; padding: .55rem; border-color: var(--line-strong); box-shadow: var(--shadow); }
.screen video { display: block; width: 100%; height: auto; border-radius: 7px; }


/* Sections ----------------------------------------------------------- */

section.wrap { padding-block: clamp(3rem, 7vw, 5.5rem); }
section.wrap + section.wrap { border-top: 1px dashed var(--line); }
.prompt { margin: 0 0 .9rem; color: var(--dim); font: .8rem var(--mono); letter-spacing: .02em; }
.prompt .cwd { color: var(--teal); }
.prompt .ps { color: var(--gold); margin-right: .3ch; }
.cursor {
  display: inline-block; width: .55em; height: 1.05em; margin-left: .08em;
  vertical-align: -.15em;
  background: var(--gold);
  animation: blink 1.1s steps(1) infinite;
}
h1 .cursor { width: .3em; height: .72em; margin-left: .12em; vertical-align: -.02em; opacity: .9; }
@keyframes blink { 50% { opacity: 0; } }

section.wrap h2 {
  margin: 0 0 1.75rem;
  font: 800 clamp(2rem, 4vw, 2.9rem)/1 var(--display);
  letter-spacing: -.01em;
}
.note { color: var(--muted); margin: 1.75rem 0 0; max-width: 50rem; }

.quickstart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.quickstart h2 { margin-bottom: 1rem; }
.quickstart p { color: var(--muted); margin: 0; max-width: 30rem; }
.shell-panel { padding: 1.3rem 1.4rem 1.1rem; }
pre.shell { background: none; border: 0; padding: 0; font-size: 1rem; line-height: 1.9; }
.copy {
  position: absolute; top: 0; right: .9rem; transform: translateY(-50%);
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font: .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: .15rem .65rem; cursor: pointer;
}
.copy:hover { color: var(--gold); border-color: var(--gold); }

/* Features, laid out like the TUI's channel list: hovering one selects it
   with a gold bar and starts its equalizer. */
.channels {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem;
  counter-reset: feat;
}
.channels li {
  position: relative;
  counter-increment: feat;
  padding: 1.05rem 2.6rem 1.05rem 3.4rem;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: border-color .15s, background-color .15s;
}
.channels li::before {
  content: counter(feat, decimal-leading-zero);
  position: absolute; left: 1rem; top: 1.25rem;
  color: var(--dim); font: .75rem var(--mono);
}
.channels h3 { margin: 0 0 .25rem; font: 800 1.12rem/1.3 var(--display); letter-spacing: 0; transition: color .15s; }
.channels p { margin: 0; color: var(--muted); font-size: .95rem; }
.channels li:hover { border-left-color: var(--gold); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 60%); }
.channels li:hover h3 { color: var(--gold); }
.channels li:hover::before { color: var(--gold); }

.eq { position: absolute; right: .9rem; top: 1.3rem; display: flex; align-items: flex-end; gap: 2px; height: .8rem; }
.eq i { width: 3px; height: 30%; background: var(--teal); border-radius: 1px; opacity: 0; transition: opacity .15s; }
.channels li:hover .eq i { opacity: 1; animation: eq .9s ease-in-out infinite alternate; }
.channels li:hover .eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.3s; }
.channels li:hover .eq i:nth-child(3) { animation-duration: .75s; animation-delay: -.5s; }
@keyframes eq { 0% { height: 25%; } 50% { height: 100%; } 100% { height: 45%; } }

/* How it works: three panels joined by live wires. */
.flow { list-style: none; margin: 0; padding: 1rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem; }
.flow p { margin: 0; color: var(--muted); font-size: .97rem; }
.wire {
  position: absolute; top: 50%; left: 100%; width: 3.5rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px);
  background-size: 24px 2px;
  animation: signal 1s linear infinite;
}
.wire span {
  position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap; color: var(--teal); font: .65rem var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
@keyframes signal { to { background-position: 24px 0; } }

/* Install and usage --------------------------------------------------- */

.prose > p { max-width: 50rem; }
.prose h3 { font-size: 1.15rem; letter-spacing: -.01em; margin: 2rem 0 .75rem; }
.prose h3 small { color: var(--dim); font: 400 .75rem var(--mono); letter-spacing: .04em; margin-left: .35rem; }
.prose p, .prose ul { margin: 0 0 1rem; }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: .3rem; }
.prose li::marker { color: var(--gold); }
.prose pre { margin: 0 0 1rem; }
.prose strong { font-weight: 650; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 2.1rem 1.4rem; margin-top: 2.4rem; }
.card {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 1.5rem 1.35rem 1.25rem;
  transition: border-color .2s;
}
.card:hover { border-color: var(--gold); }
.card h3 {
  position: absolute; top: 0; left: .9rem; transform: translateY(-50%);
  margin: 0; padding: 0 .5rem;
  background: var(--bg);
  color: var(--gold);
  font: 700 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.card h3 small { text-transform: none; }
.card pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.card p, .card li { color: var(--muted); font-size: .95rem; }
.card p:last-child, .card pre:last-child, .card ul:last-child { margin-bottom: 0; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; }
.two-col > div > h3:first-child { margin-top: 0; }
.prose > h3, .two-col h3 {
  font: 800 1.5rem/1.15 var(--display);
  letter-spacing: 0;
}
.prose > h3 { margin-top: 3.25rem; padding-top: 2rem; border-top: 1px dashed var(--line); }
.prose > h3 + .two-col { margin-top: 1.25rem; }
.prose > p + .two-col { margin-top: 2.75rem; }
.two-col h3 { margin-bottom: 1rem; }
.two-col p { color: var(--muted); }
.two-col p code, .two-col li code { color: var(--text); }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .92rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; border-bottom-color: var(--line-strong); }
td { color: var(--muted); }
td:first-child { white-space: nowrap; color: var(--text); }
td code { white-space: nowrap; }
td:first-child code { background: none; border: 0; padding: 0; color: var(--gold); }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 var(--gold); }
pre.config { font-size: .82rem; }

/* Footer ------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); padding: 2.25rem 0 3rem; color: var(--dim); font-size: .88rem; }
.footer p { margin: 0 0 .75rem; }
.footer .prompt { margin-bottom: 1.1rem; }
.helpbar { font: .82rem var(--mono); }
.helpbar a { color: var(--muted); }
.helpbar a:hover { color: var(--gold); }
.helpbar span { color: var(--line-strong); margin: 0 .6rem; }
.fine { max-width: 46rem; }

/* Responsive --------------------------------------------------------- */

@media (max-width: 56rem) {
  .hero-grid, .quickstart-grid, .flow, .two-col, .cards, .channels { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .flow { gap: 3rem; }
  .wire { top: 100%; left: 50%; width: 2px; height: 3rem; background: repeating-linear-gradient(180deg, var(--teal) 0 6px, transparent 6px 12px); background-size: 2px 24px; animation-name: signal-down; }
  .wire span { bottom: auto; top: 50%; left: 1rem; transform: translateY(-50%); }
  td:first-child { white-space: normal; }
}
@keyframes signal-down { to { background-position: 0 24px; } }
@media (max-width: 40rem) {
  .tmux { gap: .4rem; }
  .menu { gap: 0; }
  .menu a { padding: .15rem .25rem; }
  .menu .idx, .logo, .status-right .repo, .theme .idx { display: none; }
  .theme { padding: .15rem .25rem; }
  .theme-key, .theme-value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .swatch { width: 1rem; height: 1rem; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}