/* Hallmark · macrostructure: Narrative Workflow · tone: editorial (method book, score cover) · anchor hue: 27 (felt red)
 * theme: custom · paper oklch(96.5% 0.018 85) ivory · accent oklch(50% 0.165 27) felt red · serif display + grotesk UI
 * nav: N1a (two destinations: home, privacy) · footer: Ft2 inline single line
 * pre-emit critique: P4 H4 E4 S5 R5 V4
 * Shared by index.html, privacy.html and 404.html. One container (--page-max, --gutter) on every page. */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-base)/1.6 var(--font-body);
  font-feature-settings: "cv11", "ss01";
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; font-style: normal; margin: 0; letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); line-height: 1.15; }
h3 { font-size: var(--text-lg); line-height: 1.3; }

.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: var(--space-xs); background: var(--color-paper); padding: var(--space-xs) var(--space-sm); z-index: 2; }

/* header: brand left, the one other destination right */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; font: 600 1.375rem/1 var(--font-display); white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.top nav a { font-size: var(--text-sm); white-space: nowrap; color: var(--color-ink-2); }
.top nav a:hover { color: var(--color-accent); }

/* hero */
.hero { display: grid; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); align-items: center; }
.hero .lead { font-size: var(--text-lg); color: var(--color-ink-2); margin-top: var(--space-lg); max-width: 34em; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }
.badge { display: inline-block; line-height: 0; border-radius: 8px; }
.badge img { width: 188px; height: auto; }
.get .terms { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 22em; }
.score { margin: 0; }
.score figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); padding-block: var(--space-2xl) var(--space-4xl); }
}

/* sections */
.sec { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-line); }
.sec-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.sec-head p { color: var(--color-ink-2); max-width: 40em; }
@media (min-width: 960px) {
  .sec { padding-block: var(--space-4xl); }
  .sec-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: end; }
}

/* five hairlines, the staff, used as the rule above the lesson path */
.staff { height: 25px; background: repeating-linear-gradient(to bottom, var(--color-line-strong) 0 1px, transparent 1px 6px); background-size: 100% 25px; background-repeat: no-repeat; }

/* the path: a method book's contents page */
.units { list-style: none; margin: 0; padding: 0; }
.unit { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-line); }
.unit .n { grid-row: span 2; font: 600 var(--text-xl)/1.1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.unit p { color: var(--color-ink-2); }
.unit .piece { grid-column: 2; margin-top: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }
.unit .piece span { display: block; font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink-2); }
@media (min-width: 760px) {
  .unit { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 20rem); align-items: baseline; }
  .unit .piece { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; text-align: right; }
}

/* split: text one side, list or figure the other */
.split { display: grid; gap: var(--space-2xl); }
.split > p, .split .prose p { color: var(--color-ink-2); }
.prose { display: grid; gap: var(--space-md); align-content: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); }
}

/* definition rows: input modes, daily tools, questions */
.rows { margin: 0; display: grid; }
.rows > div { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-line); display: grid; gap: var(--space-xs); }
.rows dt { font: 600 var(--text-lg)/1.3 var(--font-display); }
.rows dd { margin: 0; color: var(--color-ink-2); }
@media (min-width: 760px) {
  .rows.wide > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-xl); }
}

/* tariff: a programme-style price list with dotted leaders */
.tariff { margin: 0; display: grid; gap: var(--space-sm); font-size: var(--text-lg); }
.tariff div { display: flex; align-items: baseline; gap: var(--space-xs); }
.tariff dt { font-family: var(--font-display); white-space: nowrap; }
.tariff div::after { content: ""; order: 1; flex: 1 1 auto; min-width: var(--space-lg); border-bottom: 2px dotted var(--color-line-strong); transform: translateY(-0.3em); }
.tariff dd { order: 2; margin: 0; font-weight: 600; white-space: nowrap; }

/* practice week: seven keys, today in ebony */
.week { margin: 0 0 var(--space-lg); }
.week ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.week li { display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 148px; padding: var(--space-sm) 0 var(--space-md); background: var(--color-key-white); border: var(--rule-hair) solid var(--color-line-strong); border-top-width: 0; border-radius: var(--radius-key); font-size: var(--text-sm); color: var(--color-on-key-white-2); }
.week li b { font: 600 var(--text-xl)/1 var(--font-display); color: var(--color-on-key-white); font-variant-numeric: lining-nums tabular-nums; }
.week li small { display: block; font-size: 0.75rem; text-align: center; }
.week li.today { background: var(--color-key-black); border-color: var(--color-key-black); color: var(--color-on-key-black); }
.week li.today b { color: var(--color-on-key-black); }
.week .felt { height: 5px; background: var(--color-accent); margin-bottom: 2px; }
.week figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* closing row and footer */
.close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-2xl); border-top: var(--rule-staff) solid var(--color-ink); }
.close p { font: 600 var(--text-xl)/1.3 var(--font-display); }
.foot { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-lg) var(--space-2xl); font-size: var(--text-sm); color: var(--color-ink-2); border-top: var(--rule-hair) solid var(--color-line); }
.foot a { white-space: nowrap; }

/* privacy policy: contents rail beside the text on wide screens */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
.doc h1 { font-size: var(--text-2xl); }
.doc .meta { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.toc { font-size: var(--text-sm); }
.toc h2 { font: 600 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink-2); margin-bottom: var(--space-xs); }
.toc ol { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-2xs); }
.policy { max-width: 46em; }
.policy h2 { font-size: var(--text-xl); margin: var(--space-2xl) 0 var(--space-sm); scroll-margin-top: var(--space-lg); }
.policy h2:first-child { margin-top: 0; }
.policy p, .policy li { color: var(--color-ink-2); }
.policy p + p { margin-top: var(--space-sm); }
.policy ul { margin: var(--space-sm) 0 0; padding-left: 1.25em; display: grid; gap: var(--space-2xs); }
.policy a { overflow-wrap: anywhere; }
.policy strong { color: var(--color-ink); font-weight: 600; }
@media (min-width: 960px) {
  .doc { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-3xl); }
  .doc header { grid-column: 1 / -1; }
  .toc { position: sticky; top: var(--space-lg); align-self: start; }
}

/* 404 */
.lost { padding-block: var(--space-3xl) var(--space-4xl); display: grid; gap: var(--space-lg); }
.lost p { color: var(--color-ink-2); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}