/* Ways of the Kingdom — page layouts on top of wotk-tokens.css.
   Tokens own colour, type and spacing. This file only arranges them.
   Every rule lives here; the HTML carries no inline styles. */

/* hidden means hidden, even on elements a class sets display on (.wotk-label) */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- grain -- */
/* A fine paper grain over every page (the noise from wotk-tokens.css). */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- header -- */
/* Slim and sticky; the hero leads, not this. Links come from /data/nav.json
   (wotk-nav.js). The Pre-Order button stays visible at every width. */
html { scroll-padding-top: 4.5rem; }
.wotk-header { position: sticky; top: 0; z-index: 20; background: var(--bone); border-bottom: 1px solid var(--rule); }
.wotk-header .wotk-nav {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand links buy";
  align-items: center; gap: var(--s-5);
  min-height: 60px; padding-block: 0; border-bottom: 0;
}
.wotk-header .wotk-brand { grid-area: brand; }
.wotk-header .wotk-nav-links { grid-area: links; justify-content: flex-end; gap: var(--s-5); margin-left: 0; }
.wotk-header .wotk-nav-link { font-size: .6875rem; padding-bottom: 2px; white-space: nowrap; }
.wotk-nav-buy { grid-area: buy; padding: .55rem 1rem; min-height: 40px; font-size: .6875rem; white-space: nowrap; }

.wotk-brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--ink); }
.wotk-brand-crest { width: 32px; height: 32px; }
/* the wordmark is Donta's original artwork (tools/wordmark.py), never a font */
.wotk-wordmark { display: block; width: auto; height: 30px; }

/* small screens: brand + Pre-Order on top, the links in one row under them.
   On phones the links are tighter (less tracking, smaller gaps) and spread
   edge to edge, so all 4 show from 360px up with no sideways scroll; narrower
   than that the row still scrolls rather than wrap. */
@media (max-width: 60rem) {
  html { scroll-padding-top: 6.5rem; }
  .wotk-header .wotk-nav {
    grid-template-columns: 1fr auto; grid-template-areas: "brand buy" "links links";
    grid-template-rows: 56px auto; row-gap: 0;
  }
  .wotk-header .wotk-nav-links {
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    min-height: 2.25rem; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .6rem;
  }
  .wotk-header .wotk-nav-links::-webkit-scrollbar { display: none; }
}
@media (max-width: 36rem) {
  .wotk-header .wotk-nav-links { justify-content: space-between; gap: var(--s-2); padding-bottom: .5rem; }
  .wotk-header .wotk-nav-link { letter-spacing: .06em; padding-top: .7rem; }
}

/* ---------------------------------------------------------------- hero -- */
.wotk-hero { position: relative; overflow: hidden; }

.wotk-hero .wotk-container {
  display: grid; gap: var(--s-7);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
@media (min-width: 56rem) {
  .wotk-hero .wotk-container { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: var(--s-8); }
}
/* the wordmark artwork as the page title; its box is reserved by width/height */
.wotk-hero-title { margin: 0; line-height: 0; }
.wotk-hero-title img { display: block; width: clamp(16rem, 40vw, 34rem); max-width: 100%; height: auto; }
.wotk-hero .wotk-verse { margin-top: var(--s-6); }
.wotk-hero .wotk-lead { margin-top: var(--s-5); }
.wotk-hero-media img { width: 100%; max-width: 40rem; margin-inline: auto; }
.wotk-hero-copy { max-width: 44rem; }

/* The hero's device mockup: a still. */
.wotk-device { width: 100%; max-width: 40rem; margin-inline: auto; }
/* The mockup's canvas has 150px of shadow added on the left (Donta, 2026-10-16:
   the shadow used to stop at a hard edge). The image is 1270 wide for the
   1120 the box was made for, so it runs 150/1120 past the box's left edge:
   the devices sit exactly where and as large as before. */
.wotk-device img { display: block; width: calc(100% * 1270 / 1120); max-width: none; height: auto; margin-left: calc(-100% * 150 / 1120); }

/* A laptop in the mockup's style, drawn here, with a muted loop on its screen:
   a dark bezel with a camera dot, the video clipped to the screen, and a
   silver base with its notch. */
.wotk-laptop { width: 100%; max-width: 30rem; padding-inline: 6%; }
.wotk-laptop-screen {
  position: relative; padding: 3.2% 3.2% 4%;
  background: #3A3937; border-radius: 4.5% 4.5% 0 0 / 7% 7% 0 0;
  box-shadow: inset 0 0 0 2px #52514F;
}
.wotk-laptop-screen::before {
  content: ""; position: absolute; top: 1.4%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #1E1D1B;
}
.wotk-laptop-screen video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #14120F; }
.wotk-laptop::after {
  content: ""; display: block; height: clamp(.5rem, 1.6vw, .8rem); margin-inline: -7%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background:
    linear-gradient(#A9A6A0, #C9C6BF) center top / 15% 40% no-repeat,
    linear-gradient(#E4E2DD, #B4B1AA);
  box-shadow: 0 1.2rem 1.4rem -1rem rgba(20, 18, 15, .45);
}

/* ---------------------------------------------------- background videos -- */
/* A muted loop behind a section, under an ink veil so its text reads (the
   quiz band). The poster stands in until it
   plays, and for anyone it doesn't play for (js/wotk-video.js). */
.wotk-has-video { position: relative; isolation: isolate; overflow: hidden; }
.wotk-bgvideo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.wotk-has-video::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.wotk-veil-ink::before  { background: rgba(20, 18, 15, .8); }

.wotk-buy-note { margin-top: var(--s-4); font-size: var(--t-sm); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
.wotk-section--dark .wotk-buy-note { color: var(--on-ink-muted); }

.wotk-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.wotk-actions .wotk-btn { flex: 1 1 14rem; }
@media (min-width: 36rem) { .wotk-actions .wotk-btn { white-space: nowrap; } }

/* the author's own line, set alone between sections */
.wotk-pull { text-align: center; }
.wotk-pull .wotk-verse { margin-inline: auto; max-width: 30ch; }
.wotk-pull .wotk-bar { margin: var(--s-6) auto 0; }

/* ---------------------------------------------------------------- lists -- */
.wotk-weeks { display: grid; border-top: 1px solid var(--rule); }
.wotk-week {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4); align-items: baseline;
  padding-block: var(--s-4); border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.wotk-week .wotk-label { color: var(--oxblood); }
.wotk-week h3 { font-size: var(--t-xl); font-weight: 400; }


/* The 8 Weeks as a grid of cells: 4 by 2, then 2 by 4, then 1 column.
   Hairlines between cells, no gaps, no shadows, no corners. */
/* The head: eyebrow, heading and description on the left, the laptop with
   the weeks loop on the right (under them on phones). */
.wotk-weekgrid-head { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
.wotk-weekgrid-head p { margin: var(--s-4) 0 0; max-width: 26rem; font-size: var(--t-sm); color: var(--ink-soft); }
@media (min-width: 48rem) {
  .wotk-weekgrid-head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; gap: var(--s-7); }
  .wotk-weekgrid-head .wotk-laptop { justify-self: end; }
}
.wotk-weekgrid {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--rule-cell); border-left: 1px solid var(--rule-cell);
}
@media (min-width: 36rem) { .wotk-weekgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .wotk-weekgrid { grid-template-columns: repeat(4, 1fr); } }
.wotk-cell {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  min-height: 7.5rem; padding: var(--s-5);
  border-right: 1px solid var(--rule-cell); border-bottom: 1px solid var(--rule-cell);
  text-decoration: none; color: var(--ink);
  transition: background-color .2s var(--ease);
}
@media (min-width: 36rem) { .wotk-cell { min-height: 9.5rem; } }
.wotk-cell:hover { background: rgba(244, 240, 230, .7); color: var(--ink); }
.wotk-cell .wotk-label { color: var(--oxblood); font-size: .6875rem; }
.wotk-cell h3 { font-size: var(--t-lg); font-weight: 500; line-height: 1.15; }
/* The one list of the 8 weeks (Donta, 2026-10-16), on the home page since
   /weeks merged into it (2026-10-27). Each box holds its number, title and
   full description, top to bottom; each box is the #week-N anchor. Not a link
   (Week 2's text has its own). */
.wotk-weekgrid--full .wotk-cell { justify-content: flex-start; gap: var(--s-3); min-height: 0; }
.wotk-weekgrid--full .wotk-cell:hover { background: none; }
.wotk-weekgrid--full .wotk-cell .wotk-label { margin-bottom: var(--s-2); }
.wotk-weekgrid--full .wotk-cell p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
.wotk-actions--inline .wotk-btn { flex: 0 0 auto; }

/* A photo as one full-width break between two sections: a clean rectangle,
   2:1 (3:2 on phones), black and white. The phone crop keeps each photo's
   subject in frame (object-position). */
.wotk-photo-break { padding-block: var(--section-y) 0; }
.wotk-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; background: var(--bone-deep); }
@media (max-width: 36rem) { .wotk-photo { aspect-ratio: 3 / 2; } }
.wotk-photo--tables   { object-position: 55% 50%; }
.wotk-photo--laughing { object-position: 55% 50%; }

/* The same fine grain on every photo, as a layer over it (baked into the
   files, it doubled their size). */
.wotk-photo-grain { display: block; position: relative; }
.wotk-photo-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: soft-light;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The dark "Run it with your people" band: the words on the left, a ruled
   box of three rows on the right (below on phones). */
.wotk-band h1, .wotk-band h2 { font-size: var(--t-5xl); line-height: .95; }
.wotk-rows { border: 1px solid var(--rule-on-ink); }
.wotk-row { padding: var(--s-5); border-top: 1px solid var(--rule-on-ink); }
.wotk-row:first-child { border-top: 0; }
.wotk-row h3 { font-size: var(--t-lg); font-weight: 400; letter-spacing: .04em; }
.wotk-section--dark .wotk-row p { margin: var(--s-1) 0 0; font-size: var(--t-sm); color: var(--on-ink-muted); }

/* On /churches the band carries a photo behind the rows. Every edge fades
   into the band's black (a radial mask), the words on the left stay on solid
   black, and the rows get a near-solid fill so they always read. On phones
   the photo sits between the buttons and the rows, shorter, with the same
   fade. */
.wotk-band--photo { position: relative; overflow: hidden; }
.wotk-band--photo .wotk-container { position: relative; }
.wotk-band-photo { margin-inline: calc(var(--gutter) * -1); }
.wotk-band-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 25%; opacity: .55;
}
.wotk-band-photo, .wotk-band-photo::after {
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}
.wotk-band--photo .wotk-rows { position: relative; background: rgba(20, 18, 15, .88); }
@media (min-width: 56rem) {
  .wotk-band--photo .wotk-container { position: static; }
  .wotk-band-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 56%; margin: 0; }
  .wotk-band-photo img { height: 100%; aspect-ratio: auto; object-position: 50% 20%; }
}

/* One message, no list: Donta's 3 lines (round 4). Left-aligned, it left
   the right half empty, so it is centred, as his brief allows. */
.wotk-message { text-align: center; }
.wotk-message > * { max-width: 44rem; margin-inline: auto; }
.wotk-message h2 span { display: block; }
.wotk-message .wotk-lead { margin-top: var(--s-5); }

.wotk-stats { display: grid; }
.wotk-stat { padding-block: var(--s-5); border-top: 1px solid var(--rule); }
.wotk-stat:first-child { border-top: 0; padding-top: 0; }
.wotk-section--dark .wotk-stat { border-top-color: var(--rule-on-ink); }
.wotk-stat h3 { font-size: var(--t-3xl); font-weight: 400; text-transform: none; }
.wotk-stat p { margin: var(--s-2) 0 0; color: var(--ink-soft); }
.wotk-section--dark .wotk-stat p { color: var(--on-ink-soft); }
/* a link inside a lead on ink (the home Teaching section's "see the course");
   the default oxblood, and its hover to ink, vanish on black */
.wotk-section--dark .wotk-lead a { color: var(--on-ink); }
.wotk-section--dark .wotk-lead a:hover { color: var(--accent-on-ink); }
.wotk-stats .wotk-laptop { margin-top: var(--s-6); }

/* ---------------------------------------------------------------- split -- */
.wotk-split { display: grid; gap: var(--s-7); }
@media (min-width: 56rem) {
  .wotk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .wotk-split--wide-right { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .wotk-split--center { align-items: center; }
}
.wotk-split .wotk-actions { margin-top: var(--s-6); }
.wotk-section-head { margin-bottom: var(--s-6); }
.wotk-section-head .wotk-label { margin-bottom: var(--s-3); }
.wotk-section-head .wotk-lead { margin-top: var(--s-4); }

/* ---------------------------------------------------------- testimonies -- */
.wotk-testimonies { text-align: center; }
.wotk-testimonies .wotk-crest { width: 72px; margin: 0 auto var(--s-6); }
.wotk-testimonies h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none;
  font-size: var(--t-3xl); line-height: 1.2;
}
.wotk-testimonies .wotk-label { margin-top: var(--s-4); }
.wotk-quotes { display: grid; gap: var(--s-6); margin-top: var(--s-8); text-align: left; }
@media (min-width: 48rem) { .wotk-quotes { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.wotk-quotes blockquote { margin: 0; }
.wotk-quotes .wotk-quote { max-width: none; }

/* --------------------------------------------------------------- author -- */
.wotk-portrait { width: 100%; max-width: 22rem; }
@media (min-width: 56rem) { .wotk-split--author { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } }

/* --------------------------------------------------------------- book -- */
.wotk-cover { width: 100%; max-width: 26rem; margin-inline: auto; box-shadow: var(--lift); }
.wotk-included { display: grid; gap: var(--s-3); padding: 0; margin: var(--s-5) 0 0; list-style: none; }
.wotk-included li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-3); align-items: baseline; }
.wotk-included li::before { content: ""; width: 1.25rem; height: 3px; background: var(--oxblood); position: relative; top: -.3em; }
.wotk-price { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-6); }
.wotk-price strong { font-family: var(--display); font-size: var(--t-3xl); font-weight: 500; line-height: 1; }
.wotk-price span { color: var(--ink-muted); font-size: var(--t-sm); }

/* ----------------------------------------------------------- opt-in page -- */
.wotk-optin { text-align: center; }
.wotk-optin .wotk-crest { width: 84px; margin: 0 auto var(--s-6); }
.wotk-optin h1 { font-size: var(--t-5xl); font-weight: 600; }
.wotk-optin .wotk-label { margin-bottom: var(--s-5); }
.wotk-optin .wotk-lead { margin: var(--s-6) auto 0; max-width: 42ch; }
.wotk-inline-form { display: grid; gap: var(--s-3); max-width: 34rem; margin: var(--s-7) auto 0; }
@media (min-width: 36rem) {
  .wotk-inline-form { grid-template-columns: 1fr auto; gap: 0; }
  .wotk-inline-form .wotk-field { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
  .wotk-inline-form .wotk-btn { border-radius: 0 var(--radius) var(--radius) 0; }
}
.wotk-inline-form .wotk-form-note, .wotk-inline-form [role="alert"] { grid-column: 1 / -1; text-align: center; }

.wotk-placeholder { border: 1.5px dashed var(--rule); padding: var(--s-5); color: var(--ink-muted); }

/* -------------------------------------------------------------- footer -- */
.wotk-footer { padding-block: var(--s-7); }
.wotk-footer .wotk-container { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; }
.wotk-footer p { margin: 0; font-size: var(--t-sm); color: var(--on-ink-muted); }
.wotk-footer a { color: var(--on-ink-soft); }
.wotk-footer a:hover { color: var(--on-ink); }
.wotk-footer-links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.wotk-footer-links a { font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; }
.wotk-footer .wotk-btn--on-ink { color: var(--ink); }
.wotk-footer .wotk-btn--on-ink:hover { color: var(--bone); }

/* ---------------------------------------------------------- questionnaire -- */
/* The main event of the homepage: an ink band, and the quiz in a large
   parchment card with big tap targets. */
.wotk-quiz-band .wotk-section-head { max-width: 64rem; text-align: center; margin-bottom: var(--s-6); }
.wotk-quiz-band .wotk-section-head h2 { font-size: var(--t-5xl); }
.wotk-quiz-band .wotk-section-head .wotk-lead { margin-inline: auto; max-width: 40rem; }
.wotk-quiz-card {
  max-width: 44rem; margin-inline: auto;
  background: var(--bone); color: var(--ink); border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 3.5rem);
}
.wotk-section--dark .wotk-quiz-card h2 { color: var(--ink); }
.wotk-section--dark .wotk-quiz-card p { color: var(--ink-soft); }
.wotk-section--dark .wotk-quiz-card .wotk-form-note { color: var(--ink-muted); }
.wotk-quiz-card .wotk-progress { margin-bottom: var(--s-4); }
.wotk-quiz-card .wotk-choice { min-height: 4.5rem; padding: 1.25rem 1.5rem; font-size: var(--t-xl); }
#q-stage h2 { font-size: var(--t-3xl); margin-bottom: var(--s-6); }
#q-stage .wotk-lead { margin-bottom: var(--s-5); }
#q-stage [role="alert"] { color: var(--oxblood); }
.wotk-back { background: none; border: 0; padding: 0; margin-top: var(--s-5); cursor: pointer; }

/* ----------------------------------------------------------- brevo embeds -- */
/* A Brevo form iframe: centred, as wide as the page allows, never restyled inside. */
.wotk-embed { display: block; width: 100%; max-width: 540px; min-height: 300px; margin: var(--s-5) auto 0; border: 0; }

/* ---------------------------------------------------------------- pop-up -- */
.wotk-popup {
  padding: 0; border: 0; border-radius: var(--radius);
  width: min(34rem, calc(100vw - 2rem)); max-width: none;
  background: var(--bone); color: var(--ink);
}
.wotk-popup:focus { outline: none; }
.wotk-popup::backdrop { background: rgba(20, 18, 15, .72); }
.wotk-popup-inner { position: relative; padding: clamp(2rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2.5rem); text-align: center; }
.wotk-popup h2 { font-size: var(--t-3xl); }
.wotk-popup .wotk-lead { margin: var(--s-4) auto 0; max-width: 30ch; }
.wotk-popup .wotk-inline-form { margin-top: var(--s-5); }
.wotk-popup-close {
  position: absolute; top: .25rem; right: .25rem; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; color: var(--ink); font-size: 1.75rem; line-height: 1;
}

/* ---------------------------------------------------------- member page -- */
.wotk-gate { display: grid; gap: var(--s-3); max-width: 26rem; margin: var(--s-7) auto 0; text-align: left; }
.wotk-gate .wotk-label { margin: var(--s-3) 0 0; }
.wotk-gate .wotk-btn { margin-top: var(--s-4); }
.wotk-gate [role="alert"] { color: var(--oxblood); text-align: center; }
.wotk-member-title { font-size: var(--t-4xl); margin-top: var(--s-3); }
.wotk-videos { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.wotk-video { margin: 0; }
.wotk-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.wotk-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wotk-video-frame .wotk-placeholder { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; color: var(--on-ink-muted); border-color: var(--rule-on-ink); }
.wotk-video figcaption { margin-top: var(--s-3); }
.wotk-actions .wotk-placeholder { flex: 1 1 14rem; margin: 0; }
.wotk-devotional { padding-block: var(--s-7); border-top: 1px solid var(--rule); }
.wotk-devotional:first-of-type { margin-top: var(--s-5); }
.wotk-devotional > .wotk-label { color: var(--oxblood); }
.wotk-dev-title { font-size: var(--t-3xl); margin-top: var(--s-3); }
.wotk-dev-author { margin-top: var(--s-2); color: var(--ink-muted); font-size: var(--t-sm); }
.wotk-dev-part { margin-top: var(--s-6); }
.wotk-dev-part .wotk-label { display: block; margin-bottom: var(--s-2); }
.wotk-dev-part p + p { margin-top: var(--s-4); }
.wotk-dev-part--scripture p, .wotk-dev-part--quote p, .wotk-dev-part--declaration p {
  font-family: var(--serif); font-style: italic; font-size: var(--t-xl); line-height: 1.45;
}
.wotk-dev-part--declaration p { color: var(--oxblood); }

/* --------------------------------------------------------------- utility -- */
.wotk-mt-6 { margin-top: var(--s-6); }
.wotk-mt-7 { margin-top: var(--s-7); }
.wotk-narrow { max-width: 40rem; }
.wotk-section--tight { padding-block: var(--s-8); }
.wotk-note-line { text-align: center; }
.wotk-note-line p { margin: 0 auto; color: var(--ink-muted); font-size: var(--t-sm); }

/* ghost button on a dark ground — the tokens only define it for bone */
.wotk-section--dark .wotk-btn--ghost { border-color: var(--on-ink); color: var(--on-ink); }
.wotk-section--dark .wotk-btn--ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* labels on a dark ground — the tokens' muted ink vanishes on ink */
.wotk-section--dark .wotk-label { color: var(--on-ink-muted); }
.wotk-section--dark .wotk-quiz-card .wotk-label { color: var(--ink-muted); }

/* small print and its links on a dark ground */
.wotk-section--dark .wotk-form-note { color: var(--on-ink-muted); }
.wotk-section--dark .wotk-form-note a { color: var(--on-ink-soft); }
.wotk-section--dark .wotk-form-note a:hover { color: var(--on-ink); }
.wotk-optin .wotk-verse { margin-inline: auto; }
.wotk-optin .wotk-actions { justify-content: center; }

/* An eyebrow: a label led by a short rule. Oxblood on light, the accent on
   ink. Last in the file so it wins over the dark-ground label colour. */
.wotk-eyebrow { display: flex; align-items: center; gap: var(--s-3); color: var(--oxblood); }
.wotk-eyebrow::before { content: ""; flex: 0 0 2rem; height: 1px; background: currentColor; }
.wotk-section--dark .wotk-eyebrow { color: var(--accent-on-ink); }
.wotk-eyebrow + h1, .wotk-eyebrow + h2 { margin-top: var(--s-4); }