/* Dr Nancy Kwangwa. One stylesheet, no framework.
 *
 * THE IDEA. Her discipline is knowledge and information management, so the whole
 * interface speaks in catalogue records: a labelled field, a hairline, a value.
 * That device is not decoration. A service page in the brief IS a record (name,
 * category, audience, duration, mode, fee), and using the same shape for the
 * review step and for a confirmed booking means a client meets one pattern three
 * times instead of three patterns once.
 *
 * Six pillars are a classification, not a sequence, so nothing here is numbered
 * 01 / 02 / 03. Order would be a claim the content does not make.
 *
 * TWO FAMILIES, deliberately. Spectral was drawn for reading on screens and
 * carries the scholarly register; Inter does everything else including the
 * labels, which are uppercase and tracked rather than set in a third face. On a
 * Zimbabwean mobile connection a third font is a second of blank text.
 */

/* ---------------------------------------------------------------- tokens ---- */
:root {
  /* Deep green-black, like the spine of a bound volume. Not pure black: pure
     black beside warm paper reads as a hole rather than as ink. */
  --ink: #101614;
  --spruce: #17322C;
  --spruce-deep: #0E211D;

  /* The accent. Verdigris, the colour of aged brass on library furniture. */
  --verdigris: #2F6F62;
  --verdigris-lift: #3E8C7B;
  --verdigris-wash: #E8F0ED;

  /* Money, and only money. One warm note against all that green. */
  --ochre: #8F5514;
  --ochre-wash: #FBF2E4;

  --paper: #FAF9F6;
  --card: #FFFFFF;
  --rule: #DEDCD5;
  --rule-soft: #ECEAE4;

  --text: #1A211E;
  --muted: #5B6661;

  --warn: #8A5A00;
  --warn-wash: #FDF3DF;
  --stop: #8E2A1F;
  --stop-wash: #FBEDEA;

  --focus: #B4802A;

  --measure: 66ch;
  --gutter: 20px;
  --radius: 3px;
  --radius-card: 6px;

  --shadow-card: 0 1px 2px rgba(16, 22, 20, 0.05),
                 0 8px 24px -16px rgba(16, 22, 20, 0.18);

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: 1.8125rem;
  --step-4: 2.375rem;
  --step-5: clamp(2.5rem, 7vw, 4.25rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--step-0)/1.6 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* An outline that is visible on paper AND on spruce. A single colour that works
   on both is worth more than two rules one of which gets forgotten. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------- structure ---- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 720px; }
.wrap--record { max-width: 840px; }

.band { padding-block: clamp(2.75rem, 7vw, 5rem); }
.band--tight { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.band--paper { background: var(--paper); }
.band--card { background: var(--card); border-block: 1px solid var(--rule-soft); }
.band--ink {
  background: var(--spruce);
  color: #EAF1EE;
}
.band--ink a { color: #BFE0D6; }

.stack > * + * { margin-top: 1rem; }
.stack--loose > * + * { margin-top: 1.75rem; }
.stack--tight > * + * { margin-top: 0.5rem; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--text);
  padding: 0.75rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

/* ----------------------------------------------------------- typography ---- */
h1, h2, h3, h4, .display, .h2, .h3 {
  font-family: Spectral, Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

.display { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.022em; }
h1 { font-size: var(--step-4); }
h2, .h2 { font-size: var(--step-3); }
h3, .h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

/* The label. Uppercase, tracked, small, and the one typographic move that runs
   through every screen in the product. */
.eyebrow {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.band--ink .eyebrow { color: #8FB9AD; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 54ch;
  color: var(--text);
}
.band--ink .lede { color: #D6E5E0; }

p { margin: 0 0 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.band--ink .muted { color: #9DC0B6; }

/* A sentence in her own voice, set in the display italic. Used once or twice a
   page at most: it stops being a voice if everything is in it. */
.aside-quote {
  font-family: Spectral, Georgia, serif;
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--spruce);
  border-left: 2px solid var(--verdigris);
  padding-left: 1.25rem;
  margin: 0;
  max-width: 46ch;
}

a { color: var(--verdigris); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--spruce); }

/* -------------------------------------------------------------- record ----- */
/* The signature. A definition list, because that is what it is. */
.record {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.record > div {
  display: grid;
  grid-template-columns: minmax(8.5rem, 12rem) 1fr;
  gap: 0 1.5rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.record dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.2em;
}
.record dd { margin: 0; }
.record dd > p:last-child { margin-bottom: 0; }

@media (max-width: 34rem) {
  .record > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --------------------------------------------------------------- cards ----- */
.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Four steps, four columns. The auto-fit grid above fits three at this width and
   leaves the fourth stranded on its own row, which reads as a mistake in a
   sequence of exactly four. A sequence gets a fixed track count. */
.howto { grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
@media (max-width: 62rem) { .howto { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .howto { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.card--link:hover,
.card--link:focus-visible {
  border-color: var(--verdigris);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
  color: inherit;
}
.card__name {
  font-family: Spectral, Georgia, serif;
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--spruce);
}
.card__body { color: var(--muted); font-size: var(--step--1); line-height: 1.55; flex: 1; }

/* The field line under a card name: DURATION, MODE, FROM. Reads as one line of a
   catalogue entry rather than as three badges. */
.fieldline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fieldline .fee { color: var(--ochre); }

.fee-big {
  font-family: Spectral, Georgia, serif;
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ochre);
}
.fee-from::before {
  content: "from ";
  font-family: Inter, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 44px tall at the default font size. A person books this on a phone. */
  min-height: 44px;
  padding: 0.6875rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 var(--step-0)/1.2 Inter, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn--primary { background: var(--verdigris); color: #fff; }
.btn--primary:hover { background: var(--verdigris-lift); color: #fff; }
.btn--quiet { background: transparent; border-color: var(--rule); color: var(--text); }
.btn--quiet:hover { border-color: var(--verdigris); color: var(--spruce); }
.btn--stop { background: var(--card); border-color: var(--stop); color: var(--stop); }
.btn--stop:hover { background: var(--stop-wash); color: var(--stop); }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.band--ink .btn--primary { background: var(--verdigris-lift); }
.band--ink .btn--quiet { border-color: #4A6E64; color: #EAF1EE; }

/* --------------------------------------------------------------- forms ----- */
.field { display: block; margin-bottom: 1.25rem; max-width: 34rem; }
.field > label,
.field > .field__label {
  display: block;
  font-weight: 600;
  font-size: var(--step--1);
  margin-bottom: 0.3125rem;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field input[type="password"],
.field input[type="datetime-local"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  /* 16px minimum. Anything smaller and iOS Safari zooms the page on focus, which
     on this estate has already been mistaken for a layout bug. */
  font: 400 1rem/1.5 Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6875rem 0.75rem;
  min-height: 44px;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--verdigris); }
.field .hint { display: block; font-size: var(--step--1); color: var(--muted); margin-top: 0.3125rem; }
.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--stop); }
.field--wide { max-width: none; }

/* One payment method: the choice and its instructions inside one border, so it
   is obvious which belongs to which. Without the box they were siblings and the
   page alternated radio, disclosure, radio, disclosure, which read as a jumble. */
.paymethod {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  background: var(--card);
  max-width: 40rem;
}
.paymethod + .paymethod { margin-top: 0.5rem; }
.paymethod .check { margin-bottom: 0; }
.paymethod:has(input:checked) {
  border-color: var(--verdigris);
  background: var(--verdigris-wash);
}
.paymethod__how { margin: 0.4rem 0 0 1.8rem; }
.paymethod__how summary {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--verdigris);
  cursor: pointer;
}
.paymethod__how summary:hover { color: var(--spruce); }
.paymethod__how[open] summary { margin-bottom: 0.35rem; }
.paymethod__how p { margin: 0; }

.check {
  display: flex;
  gap: 0.6875rem;
  align-items: flex-start;
  max-width: 40rem;
  margin-bottom: 1rem;
}
.check input { margin: 0.2rem 0 0; width: 1.125rem; height: 1.125rem; flex: none; }
.check label { font-size: var(--step--1); line-height: 1.5; }

fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
legend { padding: 0; font-weight: 600; margin-bottom: 0.5rem; }

/* -------------------------------------------------------------- notices ---- */
.notice {
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font-size: var(--step--1);
  line-height: 1.55;
  background: var(--card);
  max-width: 44rem;
}
.notice--bad { border-left-color: var(--stop); background: var(--stop-wash); color: #5E1C14; }
.notice--warn { border-left-color: var(--warn); background: var(--warn-wash); color: #5B3C00; }
.notice--ok { border-left-color: var(--verdigris); background: var(--verdigris-wash); color: #17423A; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.pill--wait { color: var(--warn); border-color: #E2C685; background: var(--warn-wash); }
.pill--ok { color: #17423A; border-color: #9CC4B9; background: var(--verdigris-wash); }
.pill--no { color: var(--stop); border-color: #D9A79F; background: var(--stop-wash); }
.pill--none { color: var(--muted); border-color: var(--rule); background: transparent; }

/* ---------------------------------------------------------------- steps ---- */
/* The wizard. This one IS a sequence, so it is allowed to look like one. */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.125rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.steps li { display: flex; align-items: center; gap: 0.5rem; }
.steps li::after { content: ""; width: 0.75rem; height: 1px; background: var(--rule); }
.steps li:last-child::after { display: none; }
.steps .now { color: var(--spruce); }
.steps .now span { border-bottom: 2px solid var(--verdigris); padding-bottom: 2px; }
.steps .done { color: var(--verdigris); }

/* ---------------------------------------------------------------- table ---- */
.queue { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.queue th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.queue td { padding: 0.8125rem 0.75rem 0.8125rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.queue tr:last-child td { border-bottom: 0; }
.queue .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------ help (?) ----- */
/* House rule across every product: anything needing more than about a dozen
   words lives behind a (?) rather than sitting on the screen. On a phone the tip
   is a bar pinned to the bottom, because a centred bubble ran off the side of a
   360px screen on the last product that tried it. */
.hlp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--card);
  cursor: help;
  position: relative;
  vertical-align: middle;
  user-select: none;
}
.hlp:hover, .hlp:focus-visible { color: var(--spruce); border-color: var(--verdigris); }
.hlp::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: 17rem;
  background: var(--ink);
  color: #F2F5F4;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  text-align: left;
  padding: 0.5rem 0.6875rem;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 40;
}
.hlp:hover::after, .hlp:focus-visible::after { opacity: 1; }

@media (max-width: 600px) {
  .hlp::after {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 0;
    padding: 1rem var(--gutter);
    font-size: 0.9375rem;
  }
}

/* ------------------------------------------------------- header, footer ---- */
.masthead {
  background: var(--spruce-deep);
  color: #EAF1EE;
  border-bottom: 1px solid #234840;
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.875rem;
}
.wordmark {
  font-family: Spectral, Georgia, serif;
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: #F4F8F6;
  text-decoration: none;
  line-height: 1.1;
}
.wordmark span {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8FB9AD;
  margin-top: 0.15rem;
}
/* NOTE ON COLOUR. `.nav` is used twice: in the masthead, which is dark, and in the
   dashboard strip, which is a white band. The light-on-dark values therefore live
   under `.masthead` and NOT on `.nav` itself.

   They used to be on `.nav`, and the result was that the dashboard's current page,
   styled #fff for the dark bar, was white text on a white band. The link was there,
   it was focusable, it worked, and it could not be read. */
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; }
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--spruce); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--verdigris); }

.masthead .nav a { color: #D6E5E0; }
.masthead .nav a:hover, .masthead .nav a[aria-current="page"] { color: #fff; }
.masthead .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--verdigris-lift); }

.colophon {
  background: var(--ink);
  color: #9DC0B6;
  font-size: var(--step--1);
  padding-block: 2.25rem;
}
.colophon a { color: #C9E2DA; }
.colophon .cols {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.colophon ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.colophon li + li { margin-top: 0.4rem; }

/* ----------------------------------------------------------- utilities ---- */
.hidden { display: none !important; }
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.divider { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

/* One orchestrated arrival on the hero, and nothing else on the page moves. */
.rise { animation: rise 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise--2 { animation-delay: 90ms; }
.rise--3 { animation-delay: 180ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card--link:hover { transform: none; }
}

@media print {
  .masthead, .colophon, .btn, .steps { display: none; }
  body { background: #fff; }
}