/* Hallmark · shape: Conversational FAQ (answers show screens) · genre: atmospheric · theme: Kiln (deal 1/3, seed github-pages-faderframe-multitrack-68c9·dce458f8·2026-10-24·r0) · job: try · draw: 369b6f · brand: FaderFrame (spec 2026-10-24)
 * hero: Counter (swapped from Corridor: a download beside the product) · sections: builds table, strips close up, workspace switcher, release log, start band (a plugins ledger folded into the strips' notes) · nav: floating pill · footer: mast · imagery: screenshots 8 (the app's own, docs/screenshots) · signature: the console mixer, captured, on the first screen and cropped large below · kiln: ember, accent from the brand's amber
 * axes: dark/high-contrast-serif/warm · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V5 · weakest: P, a download page argues little; it argues by honesty instead, with the real mixer up front and the release log answering whether it is finished */
/* Hallmark · dismissed render · fonts do not load from file:// under CORS; the same page served over http loads Boska and Geist in every shot */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 partial (the console labels stay small at hero size; the close-up below carries them) · finish-review: subagent · 8 findings · 7 resolved 1 partial (one head, the vocal tuning question, still fits other DAWs) · gap: below the hero Kiln's figures live only in the release log */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Page invariants ---------- */

body { font-weight: 400; font-synthesis: none; }
.lead { color: var(--color-ink-2); }
.shot { margin: 0; }
.shot[data-slot] { border-radius: min(2vw, var(--radius-card)); }
.shot[data-slot] > img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; border-radius: inherit; }
/* Captures of the product are shown as the product draws them: no photo treatment. */
[data-slot][data-kind="product"] > img { filter: none; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- Controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  font: 500 var(--text-md)/1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 84%, var(--color-ink)); }
.btn--ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.btn--ghost:hover { background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-muted); }

/* ---------- Nav: a floating pill ---------- */

.pill {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--z-sticky-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 60px;
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-paper-2) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark img { flex-shrink: 0; }
.wordmark:focus-visible { border-radius: var(--radius-well); }
.pill__links { display: none; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.pill__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.pill__links a:hover { color: var(--color-ink); }
.pill__links a:focus-visible, .pill__action:focus-visible { border-radius: var(--radius-pill); }
.pill__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.pill__action:hover { background: var(--color-paper-3); }
@media (min-width: 52rem) {
  .pill { left: 50%; right: auto; transform: translateX(-50%); }
  .pill__links { display: flex; }
}

/* ---------- Hero: the download beside the console ---------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--space-3xl) + var(--space-xs)) var(--space-xl);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; min-width: 0; }
.hero h1 { max-width: 11ch; }
.hero__get { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); width: 100%; padding-block-start: var(--space-xs); }
.hero__get .btn--primary { grid-column: 1 / -1; }
.hero__meta { font-size: var(--text-sm); color: var(--color-muted); margin-block-start: calc(-1 * var(--space-xs)); }
@media (min-width: 30rem) {
  .hero__get { display: flex; flex-wrap: wrap; width: auto; }
}

/* The console, whole strips, set in a smoked mat so no corner cuts into the app. */
.hero__visual { position: relative; min-width: 0; }
.hero__shot.shot[data-slot] {
  aspect-ratio: 1340 / 962;
  border-radius: min(2vw, var(--radius-card));
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.hero__shot.shot[data-slot] > img {
  inset: var(--space-sm);
  width: calc(100% - 2 * var(--space-sm));
  height: calc(100% - 2 * var(--space-sm));
  border-radius: calc(min(2vw, var(--radius-card)) - var(--space-sm));
}

/* A reading over the corner, as Kiln sets one over its photograph. */
.reading {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: calc(-1 * var(--space-xl)) 0 0 var(--space-md);
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-well);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.reading dt, .reading dd { margin: 0; }
.reading dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.reading .figure {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-section);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.reading dd:last-child { font-size: var(--text-sm); color: var(--color-ink-2); }

@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
  .reading { position: absolute; left: calc(-1 * var(--space-xl)); bottom: var(--space-2xl); margin: 0; }
}

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

.section { padding-block-start: var(--section-gap); }
.builds { padding-block-start: var(--section-gap-s); }
.work { padding-block-start: var(--section-gap-l); }
.log { padding-block-start: var(--section-gap-l); }

.head { display: grid; gap: var(--space-md); margin-block-end: var(--space-2xl); }
@media (min-width: 60rem) {
  .head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: last baseline; }
  .head--split h2 { grid-column: 1 / 6; }
  .head--split .lead { grid-column: 7 / 13; }
}

.link {
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--color-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
.link:hover { text-decoration-color: var(--color-ink); }

/* ---------- The builds ---------- */

.builds__table, .log__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.builds__table th, .builds__table td, .log__table th, .log__table td {
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-block-start: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: baseline;
}
.builds__table thead th, .log__table thead th {
  padding-block: 0 var(--space-sm);
  border: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}
.builds__table tbody th, .log__table tbody th {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}
.builds__table tbody[data-detected] th::after {
  content: "Your system";
  display: block;
  margin-block-start: var(--space-2xs);
  font: 400 var(--text-sm) / 1.4 var(--font-body);
  letter-spacing: 0;
  color: var(--color-muted);
}
.builds__table .th-note {
  display: block;
  max-width: 16ch;
  margin-block-start: var(--space-2xs);
  font: 400 var(--text-sm) / 1.4 var(--font-body);
  letter-spacing: 0;
  color: var(--color-ink-2);
  white-space: normal;
}
.builds__table .b { font-weight: 500; white-space: nowrap; }
.builds__table .n { color: var(--color-ink-2); }
.builds__table .num { text-align: end; white-space: nowrap; }
.builds__table .g { padding-inline-end: 0; text-align: end; }
.get {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration-color: var(--color-muted);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
.get:hover { text-decoration-color: var(--color-ink); }

/* On a phone each build is a block: name and size, then the note and the link. */
@media (max-width: 47.99rem) {
  .builds__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .builds__table, .builds__table tbody, .builds__table tr, .builds__table th, .builds__table td { display: block; }
  .builds__table tbody { padding-block: var(--space-lg) var(--space-xs); border-block-start: var(--rule-hair) solid var(--color-rule); }
  .builds__table tbody th { padding: 0 0 var(--space-xs); border: 0; }
  .builds__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "b s" "n g"; column-gap: var(--space-md); padding-block: var(--space-sm); }
  .builds__table tbody th { grid-area: head; }
  .builds__table td { padding: 0; border: 0; }
  .builds__table .b { grid-area: b; }
  .builds__table .s { grid-area: s; }
  .builds__table .n { grid-area: n; font-size: var(--text-sm); }
  .builds__table .g { grid-area: g; }
  .builds__table tr:not(:first-child) { grid-template-areas: "b s" "n g"; }
}

/* ---------- The strips, close up ---------- */

.strips { margin: 0; }
.strips__frame { position: relative; max-width: 1152px; }
.strips .shot { aspect-ratio: 1152 / 460; }
.strips .shot > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent);
  outline-offset: -1px;
}
.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  translate: -50% -50%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 500 var(--text-sm) / 1 var(--font-body);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--color-paper);
}
.notes {
  display: grid;
  gap: var(--space-lg) var(--gap-columns);
  max-width: 1152px;
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: note;
}
.notes li { position: relative; padding-inline-start: var(--space-xl); color: var(--color-ink-2); counter-increment: note; }
.notes li::before {
  content: counter(note);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 500 var(--text-sm) / 1 var(--font-body);
}
@media (max-width: 39.99rem) {
  .strips .shot { aspect-ratio: 576 / 460; }
  .pin { left: var(--xs, var(--x)); width: 28px; height: 28px; box-shadow: 0 0 0 2px var(--color-paper); }
  .pin--wide { display: none; }
}
@media (min-width: 40rem) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Workspaces ---------- */

.work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-xl); margin-block-end: var(--space-2xl); }
.seg {
  display: flex;
  gap: var(--space-3xs);
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule);
}
.seg button {
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-2);
  font: 400 var(--text-md) / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.seg button:hover { color: var(--color-ink); }
.seg button:active { background: var(--color-paper-3); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.seg button[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
@media (max-width: 29.99rem) {
  .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: var(--radius-well); }
  .seg button { border-radius: calc(var(--radius-well) - var(--space-2xs)); padding: 0 var(--space-xs); }
}
html:not(.js) .seg { display: none; }
html:not(.js) .work__panel[hidden] { display: block !important; }
html:not(.js) .work__panel + .work__panel { margin-block-start: var(--space-2xl); }
.work__panel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-card); }
.js .work__panel:not([hidden]) { animation: fade-in var(--dur-long) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.work__panel .shot { aspect-ratio: 2400 / 1304; }
.work__panel .shot--devices { aspect-ratio: 2400 / 1446; }
.work__line { margin-block-start: var(--space-md); color: var(--color-ink-2); }

/* ---------- The release log ---------- */

.log__table tbody th { font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; }
.log__table td:nth-child(2) { color: var(--color-muted); white-space: nowrap; }
.log__table td:last-child { padding-inline-end: 0; }
.log__more { margin-block-start: var(--space-lg); }
@media (max-width: 39.99rem) {
  .log__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .log__table, .log__table tbody { display: block; }
  .log__table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); }
  .log__table th, .log__table td { padding: 0; border: 0; }
  .log__table td:nth-child(2) { align-self: baseline; }
  .log__table td:last-child { grid-column: 1 / -1; margin-block-start: var(--space-2xs); }
}

/* ---------- Where to start: the one band ---------- */

.band { margin-block-start: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); color: var(--color-ink); }
.start__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.start__text { display: grid; gap: var(--space-lg); justify-items: start; }
.start__get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding-block-start: var(--space-xs); }
.start__get .btn--ghost:hover { background: var(--color-paper-3); }
.start__shot { margin: 0; }
.start__shot .shot { aspect-ratio: 2400 / 1429; }
.start__shot figcaption { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 60rem) { .start__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- Footer: a mast ---------- */

.foot { padding-block: var(--section-gap-s) var(--space-2xl); }
.foot__mast {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
}
.foot__mast img { width: clamp(40px, 5vw, 72px); height: auto; flex-shrink: 0; }
.foot__line { margin-block-start: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: var(--space-xl) 0 0; padding: var(--space-sm) 0 0; list-style: none; border-block-start: var(--rule-hair) solid var(--color-rule); }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.foot__links a:hover { color: var(--color-ink); }
.foot__legal { margin-block-start: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }