/* ============================================================
   SHEMA BY PENIEL
   Derived from "Peniel, Brand Voice and Imagery", Edition One.

   Rules this file encodes, verbatim from the book:
     One ink, one accent. No second accent exists.
     Source Serif 4, one family, everything. No sans serif anywhere.
     Square corners. One radius across the brand and it is nearly zero.
     Bleed or align. Nothing floats in between.
     Duotone on a flood. Never a full colour photograph on a coloured field.
     Anything made under this name should survive being printed in one
     colour on cheap paper.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

:root {
  /* The only colours that exist */
  --ink:        #171513;   /* 17 15 13 */
  --paper:      #F3F2F2;   /* F3 F2 F2 */
  --amber:      #A4670B;   /* anything a hand can touch */
  --amber-text: #85510A;   /* amber when it has to carry text */
  --flood:      #5C380A;   /* the second flood field */

  /* The grey ramp. The only extra values permitted, and only when a
     chart or a table genuinely needs more than one value. */
  --ramp-1: #2A2621;
  --ramp-2: #46403A;
  --ramp-3: #6B635A;
  --ramp-4: #948B80;
  --ramp-5: #BDB5AB;
  --ramp-6: #DEDAD5;

  /* Ink at reduced strength, for rules and secondary type on paper */
  --ink-70: rgba(23,21,19,0.70);
  --ink-55: rgba(23,21,19,0.55);
  --ink-30: rgba(23,21,19,0.30);
  --ink-16: rgba(23,21,19,0.16);

  /* Paper at reduced strength, for the same jobs on a flood */
  --paper-70: rgba(243,242,242,0.70);
  --paper-55: rgba(243,242,242,0.55);
  --paper-30: rgba(243,242,242,0.30);
  --paper-16: rgba(243,242,242,0.16);

  /* Rules. Two weights only: the heavy band rule and the hairline. */
  --rule-heavy: 3px;
  --rule-hair:  1px;

  /* Measure and grid */
  --page:   1180px;
  --gutter: 40px;

  /* Square corners. Nearly zero, never zero, so a border still reads. */
  --radius: 0px;

  --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

img, svg, video, audio { max-width: 100%; display: block; }

/* ============================================================
   TYPE
   Display at minus three and a half percent tracking, set in caps
   when it is monumental. Body at fourteen to sixteen pixels, line
   height 1.6. Labels in caps at eleven pixels tracked to 0.22em.
   ============================================================ */

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.display {
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Monumental but still a sentence, so not set in caps */
.head-1 {
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.head-2 {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.head-3 {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.head-4 {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
}

p { margin: 0; }
p + p { margin-top: 0.9em; }

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.012em;
}
.small { font-size: 14px; line-height: 1.6; }
.muted { color: var(--ink-70); }
.flood .muted, .ink .muted { color: var(--paper-70); }

.measure    { max-width: 62ch; }
.measure-sm { max-width: 44ch; }
.measure-xs { max-width: 32ch; }

/* Labels. Caps, eleven pixels, tracked to 0.22em. */
.label {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-text);
}
.label-quiet { color: var(--ink-55); font-weight: 400; }
.flood .label, .ink .label { color: var(--amber); }
.flood .label-quiet, .ink .label-quiet { color: var(--paper-55); }

/* Numbers set as figures, so columns line up */
.tabular { font-variant-numeric: tabular-nums; }

em, .italic { font-style: italic; }

a { color: var(--amber-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.flood a, .ink a { color: var(--amber); }

/* ============================================================
   FIELDS
   Paper, ink and the amber flood. Nothing else.
   ============================================================ */

.paper { background: var(--paper); color: var(--ink); }
.ink   { background: var(--ink);   color: var(--paper); }
.flood { background: var(--flood); color: var(--paper); }

.ink h1, .ink h2, .ink h3, .ink h4,
.flood h1, .flood h2, .flood h3, .flood h4 { color: var(--paper); }

/* ============================================================
   PAGE FURNITURE
   The running head: heavy rule, three column meta, hairline rule.
   Lifted straight off the book's interior pages.
   ============================================================ */

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (max-width: 720px) { :root { --gutter: 22px; } }

.band { padding-block: clamp(56px, 8vw, 116px); }
.band-tight { padding-block: clamp(36px, 5vw, 64px); }

.runhead {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-block: 12px;
  border-top: var(--rule-heavy) solid var(--ink);
  border-bottom: var(--rule-hair) solid var(--ink-30);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.runhead > :nth-child(2) { margin-inline: auto; }
.ink .runhead, .flood .runhead {
  border-top-color: var(--paper);
  border-bottom-color: var(--paper-30);
}

/* The two rules, as elements */
.rule-heavy { height: var(--rule-heavy); background: var(--ink); border: 0; margin: 0; }
.rule-hair  { height: var(--rule-hair);  background: var(--ink-30); border: 0; margin: 0; }
.ink .rule-heavy, .flood .rule-heavy { background: var(--paper); }
.ink .rule-hair,  .flood .rule-hair  { background: var(--paper-30); }

/* ============================================================
   GRID
   ============================================================ */

.grid { display: grid; gap: var(--gutter); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split-wide  { grid-template-columns: 1.35fr 1fr; }
.split-narrow{ grid-template-columns: 1fr 1.35fr; }
@media (max-width: 980px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .g2, .g3, .split-wide, .split-narrow { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .g4 { grid-template-columns: 1fr; } }

/* Columns divided by hairlines, the way the book sets a three up */
.cols-ruled > * + * {
  border-left: var(--rule-hair) solid var(--ink-30);
  padding-left: var(--gutter);
}
.ink .cols-ruled > * + *, .flood .cols-ruled > * + * { border-left-color: var(--paper-30); }
@media (max-width: 860px) {
  .cols-ruled > * + * {
    border-left: 0; padding-left: 0;
    border-top: var(--rule-hair) solid var(--ink-30); padding-top: var(--gutter);
  }
}

/* Rows divided by hairlines, the way page 06 sets the five rules */
.rows-ruled > * { padding-block: 22px; border-bottom: var(--rule-hair) solid var(--ink-30); }
.rows-ruled > *:first-child { border-top: var(--rule-heavy) solid var(--ink); }
.rows-ruled > *:last-child  { border-bottom: var(--rule-heavy) solid var(--ink); }
.ink .rows-ruled > *, .flood .rows-ruled > * { border-bottom-color: var(--paper-30); }
.ink .rows-ruled > *:first-child, .flood .rows-ruled > *:first-child { border-top-color: var(--paper); }
.ink .rows-ruled > *:last-child,  .flood .rows-ruled > *:last-child  { border-bottom-color: var(--paper); }

/* ============================================================
   BUTTONS
   Square. A verb and an object. Never Get Started or Learn More.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: var(--rule-hair) solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s linear, color .15s linear, border-color .15s linear;
}
.btn-primary { background: var(--amber); color: var(--paper); border-color: var(--amber); }
.btn-primary:hover { background: var(--amber-text); border-color: var(--amber-text); color: var(--paper); text-decoration: none; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-30); }
.btn-ghost:hover { border-color: var(--ink); text-decoration: none; }
.ink .btn-ghost, .flood .btn-ghost { color: var(--paper); border-color: var(--paper-30); }
.ink .btn-ghost:hover, .flood .btn-ghost:hover { border-color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   IMAGERY
   Crop hard. Bleed or align. Duotone on a flood.
   ============================================================ */

.figure { position: relative; overflow: hidden; background: var(--ramp-2); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure.framed { border: var(--rule-hair) solid var(--ink-30); }
.ink .figure.framed, .flood .figure.framed { border-color: var(--paper-30); }

.r-21-9 { aspect-ratio: 21 / 9; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-4-3  { aspect-ratio: 4 / 3; }
.r-3-2  { aspect-ratio: 3 / 2; }
.r-2-3  { aspect-ratio: 2 / 3; }
.r-1-1  { aspect-ratio: 1 / 1; }

/* Stone on paper goes cool grey. */
.duo-grey img { filter: grayscale(1) contrast(1.12) brightness(0.98); }

/* Stone on a flood goes monochrome amber over ink. Never a full
   colour photograph on a coloured field. */
.duo-amber { background: var(--ink); }
.duo-amber img {
  filter: grayscale(1) contrast(1.2);
  mix-blend-mode: screen;
}
.duo-amber::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--amber);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Engravings sit in multiply so the page shows through the plate and
   the paper stays one colour. */
.plate { background: transparent; }
.plate img { mix-blend-mode: multiply; }

.figcap {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ink .figcap, .flood .figcap { color: var(--paper-55); }

/* Full bleed: runs off the edge of the page, never floats. */
.bleed { width: 100%; }

/* ============================================================
   THE MARK
   Two forms of one square, gripping each other. The Peniel mark
   fills both forms. The Shema mark leaves the second one open,
   because listening is the half that stays empty until somebody
   speaks. The notch is always the field colour, never painted.
   ============================================================ */

.mark { display: block; flex: none; }
.mark .form-a { fill: currentColor; }          /* ink on paper, paper on a flood */
.mark .form-b { fill: var(--amber); }
.mark.open .form-b { fill: none; stroke: var(--amber); stroke-width: 0.62; }

.lockup {
  display: inline-flex;
  align-items: center;
  /* Clearspace is the width of the mark's own inner notch: two of the
     eight units the square is built on. */
  gap: calc(var(--mark-size, 26px) / 4);
  color: inherit;
}
.lockup .wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.lockup .by { color: var(--amber); font-weight: 400; }
.lockup:hover { text-decoration: none; }

/* ============================================================
   FORMS
   ============================================================ */

label.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 8px;
}
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: var(--rule-hair) solid var(--ink-30);
  border-radius: var(--radius);
  padding: 12px 14px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}
.hint { font-size: 13px; color: var(--ink-55); margin-top: 8px; }

/* ============================================================
   TABLES
   ============================================================ */

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-55);
  padding: 12px 14px 12px 0;
  border-bottom: var(--rule-heavy) solid var(--ink);
  white-space: nowrap;
}
table.data td {
  padding: 14px 14px 14px 0;
  border-bottom: var(--rule-hair) solid var(--ink-30);
  vertical-align: top;
}
table.data td.num, table.data th.num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }

/* ============================================================
   MOTION
   One deliberate moment per section. Clarity first, then hierarchy,
   then motion. Everything here collapses under reduced motion.
   ============================================================ */

[data-rise] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
[data-rise].seen { opacity: 1; transform: none; }

[data-rise-group] > * { opacity: 0; transform: translateY(16px); }
[data-rise-group].seen > * {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
[data-rise-group].seen > *:nth-child(1) { transition-delay: 0ms; }
[data-rise-group].seen > *:nth-child(2) { transition-delay: 90ms; }
[data-rise-group].seen > *:nth-child(3) { transition-delay: 180ms; }
[data-rise-group].seen > *:nth-child(4) { transition-delay: 270ms; }
[data-rise-group].seen > *:nth-child(5) { transition-delay: 360ms; }

/* A rule that draws itself once, as the section arrives */
.rule-draw { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.6,.2,1); }
.seen .rule-draw, .rule-draw.seen { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  [data-rise], [data-rise-group] > *, .rule-draw {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */

.hidden { display: none !important; }
.stack > * + * { margin-top: 14px; }
.spread { display: flex; align-items: center; gap: 16px; }
.spread > .push { margin-left: auto; }
.mt1{margin-top:8px}  .mt2{margin-top:16px} .mt3{margin-top:24px}
.mt4{margin-top:32px} .mt5{margin-top:44px} .mt6{margin-top:64px}
.list-plain { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   APP SHELL
   The rep, owner and client dashboards. These reuse the class
   names the existing pages already carry, so a dashboard becomes
   Peniel by swapping the stylesheet, not by rewriting the markup.
   Denser than the marketing pages on purpose: an owner mid task
   wants information per screen, not whitespace.
   ============================================================ */

.app { background: var(--paper); min-height: 100vh; }

.app-head {
  background: var(--paper);
  border-bottom: var(--rule-heavy) solid var(--ink);
  position: sticky; top: 0; z-index: 40;
}
.app-head .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }

.app-tabs { background: var(--paper); border-bottom: var(--rule-hair) solid var(--ink-30); }
.app-tabs .wrap { display: flex; gap: 28px; }
.app-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--serif);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-55);
  padding: 15px 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.app-tab:hover { color: var(--ink); }
.app-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amber); }

.app-main { padding-block: 40px 96px; }
.panel { display: none; }
.panel.active { display: block; }

/* Square, hairline, never a shadow */
.card {
  background: transparent;
  border: var(--rule-hair) solid var(--ink-30);
  border-radius: var(--radius);
  padding: 26px;
}
.card-sm { padding: 18px; }
.ink .card, .flood .card { border-color: var(--paper-30); }

.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.section-head h3 { margin-right: auto; }

/* Stat block. The number carries it, the label stays quiet. */
.stat .k {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-55);
}
.stat .v {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.stat .n { font-size: 13px; color: var(--ink-55); margin-top: 6px; }
.ink .stat .k, .flood .stat .k { color: var(--paper-55); }
.ink .stat .n, .flood .stat .n { color: var(--paper-55); }

/* Status marks. Square, no dot, the word does the work. */
.pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius);
  border: var(--rule-hair) solid var(--ink-30);
  color: var(--ink-55);
  background: transparent;
}
.pill-ok      { color: var(--amber-text); border-color: var(--amber); }
.pill-review  { color: var(--ink-70);     border-color: var(--ink-30); }
.pill-miss    { color: var(--ink);        border-color: var(--ink); }
.pill-neutral { color: var(--ink-55);     border-color: var(--ink-16); }
.ink .pill, .flood .pill { color: var(--paper-55); border-color: var(--paper-30); }
.ink .pill-ok, .flood .pill-ok { color: var(--amber); border-color: var(--amber); }

/* Progress. A filled bar against a hairline track. */
.bar { height: 6px; background: var(--ink-16); border-radius: var(--radius); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--amber); transition: width .6s cubic-bezier(.2,.6,.2,1); }
.bar.done > span { background: var(--ink); }
.ink .bar, .flood .bar { background: var(--paper-16); }
.ink .bar > span, .flood .bar > span { background: var(--amber); }

/* Copy-a-link row */
.copy-row { display: flex; gap: 8px; align-items: stretch; }
.copy-row input {
  font-size: 14px;
  background: transparent;
  border-color: var(--ink-30);
}
.copy-row .btn { flex: none; }

.banner {
  border: var(--rule-hair) solid var(--amber);
  border-left-width: var(--rule-heavy);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
}
.banner-warn { border-color: var(--ink-30); border-left-color: var(--ink); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 13px 20px;
  border-radius: var(--radius);
  opacity: 0; pointer-events: none;
  transition: opacity .18s linear;
  z-index: 200;
}
.toast.show { opacity: 1; }

/* Forms inside the app keep the same square, hairline language */
.field { display: block; }
.field + .field { margin-top: 18px; }
.field > label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 8px;
}

/* Old marketing helpers the dashboards still reference */
.tick { width: 26px; height: 3px; background: var(--amber); margin-bottom: 18px; }
.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; }
.list-check li + li { margin-top: 12px; }
.list-check li::before {
  content: ''; flex: none;
  width: 7px; height: 7px; margin-top: 9px;
  background: var(--amber);
}
.mono { font-variant-numeric: tabular-nums; font-size: 13px; }
.center { text-align: center; }
.mb0 { margin-bottom: 0; }
.mt7 { margin-top: 80px; }
.grid.g2, .grid.g3, .grid.g4 { display: grid; }
.table-scroll { overflow-x: auto; }

/* A button is a button wherever it lands. Without these the
   contextual link colours (.ink a, .site-head nav a) out rank
   .btn-primary and tint the label into its own background. */
a.btn-primary,
.ink a.btn-primary, .flood a.btn-primary,
.site-head a.btn-primary, .site-head nav a.btn-primary,
.site-foot a.btn-primary { color: var(--paper); }
a.btn-primary:hover,
.ink a.btn-primary:hover, .flood a.btn-primary:hover,
.site-head nav a.btn-primary:hover { color: var(--paper); background: var(--amber-text); border-color: var(--amber-text); text-decoration: none; }

a.btn-ghost, .site-head a.btn-ghost { color: var(--ink); }
.ink a.btn-ghost, .flood a.btn-ghost,
.site-head nav a.btn-ghost, .site-foot a.btn-ghost { color: var(--paper); }
a.btn-ghost:hover, .ink a.btn-ghost:hover, .flood a.btn-ghost:hover { text-decoration: none; }

/* ============================================================
   COMPATIBILITY LAYER
   The dashboards were built against the previous design system.
   Rather than rewrite seven working pages, the old token and class
   names are mapped onto Peniel values here. Everything resolves to
   ink, paper, amber and one serif, so the result obeys the book
   even though the markup predates it.
   ============================================================ */

:root {
  /* Old spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s7: 72px; --s8: 96px; --s9: 120px;

  /* Old colour names, remapped. There is still only one accent. */
  --hairline:      rgba(23,21,19,0.30);
  --slate:         rgba(23,21,19,0.55);
  --white:         #F3F2F2;
  --teal:          #A4670B;
  --teal-deep:     #85510A;
  --teal-live:     #A4670B;
  --teal-mist:     rgba(164,103,11,0.35);
  --teal-wash:     rgba(164,103,11,0.10);
  --ok:            #A4670B;
  --review:        rgba(23,21,19,0.70);
  --miss:          #171513;
  --archived:      rgba(23,21,19,0.55);
  --on-dark:       #F3F2F2;
  --on-dark-soft:  rgba(243,242,242,0.70);
  --on-dark-faint: rgba(243,242,242,0.55);
  --on-dark-rule:  rgba(243,242,242,0.30);

  /* One family, everything. Both old font vars point at the serif. */
  --font: var(--serif);
  --mono: var(--serif);
}

/* Old field names */
.band-ink   { background: var(--ink);   color: var(--paper); }
.band-paper,
.band-white { background: var(--paper); color: var(--ink); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--paper); }
.band-ink .muted, .band-ink .hint { color: var(--paper-70); }
.site-head.on-ink { background: var(--ink); }

/* Old type helpers */
.lead { font-size: clamp(18px,1.5vw,21px); line-height: 1.5; letter-spacing: -0.012em; }
.band-ink .lead { color: var(--paper-70); }
.hint { font-size: 13px; color: var(--ink-55); margin-top: 8px; }
.label-slate { color: var(--ink-55); }
.mono { font-family: var(--serif); font-variant-numeric: tabular-nums; }

/* Old rules */
hr.rule, .rule { height: 1px; background: var(--ink-30); border: 0; margin: 0; }
.band-ink .rule { background: var(--paper-30); }

/* Old nav + logo slots. The mark is injected by ui.js. */
.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--ink); font-size: 15px; }
.site-head.on-ink .site-nav a, .band-ink .site-nav a { color: var(--paper-70); }
.site-head.on-ink .site-nav a:hover { color: var(--paper); }
@media (max-width: 680px) { .site-nav .hide-sm { display: none; } }

.logo { display: inline-flex; align-items: center; gap: 9px; color: inherit; }
.logo:hover { text-decoration: none; }
.logo .wordmark { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.logo .by { color: var(--amber); font-weight: 400; }
.site-head.on-ink .logo, .band-ink .logo, .site-foot .logo, .app-head .logo { color: inherit; }

/* Old button variants map onto the two that exist */
.btn-secondary {
  background: transparent; color: var(--ink);
  border: var(--rule-hair) solid var(--ink-30); border-radius: var(--radius);
}
.btn-secondary:hover { border-color: var(--ink); text-decoration: none; }
.band-ink .btn-secondary, .site-head.on-ink .btn-secondary {
  color: var(--paper); border-color: var(--paper-30);
}
.band-ink .btn-secondary:hover { border-color: var(--paper); }
.btn-sm { font-size: 14px; padding: 10px 16px; }
.btn-lg { font-size: 17px; padding: 17px 30px; }
.btn-block { width: 100%; }
.btn-quiet {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber-text);
}
.btn-quiet:hover { color: var(--ink); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: transparent; color: var(--ink-30);
  border-color: var(--ink-16); cursor: not-allowed;
}

/* Old footer */
.site-foot { background: var(--ink); color: var(--paper-55); padding-block: 56px; }
.site-foot a { color: var(--paper-70); font-size: 15px; }
.site-foot a:hover { color: var(--paper); }
.site-foot .endorse {
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper-55);
}

/* The old audio slot */
.recording { border: var(--rule-hair) solid var(--ink-30); padding: 24px; }
.band-ink .recording { border-color: var(--paper-30); }
.recording-empty { display: flex; align-items: center; gap: 14px; }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.wave i { display: block; width: 3px; background: var(--amber); opacity: .5; }

/* The lockup takes the colour of the field it sits on, never the
   link colour. Form A of the mark follows it via currentColor. */
a.logo, .app-head a.logo { color: var(--ink); }
.ink a.logo, .flood a.logo, .band-ink a.logo,
.site-head.on-ink a.logo, .site-foot a.logo { color: var(--paper); }
a.logo:hover { color: inherit; text-decoration: none; }