/* Memduka — memduka.com landing page.
   Imports docs/brand/tokens.css first (see index.html); this file adds layout only and
   never redefines a palette value.

   One rule governs most of what follows. Three sections here sit on a PERMANENTLY dark
   ground — the hero and the teach-back band — and a permanent ground does not flip with
   the theme. So inside them the raw dark-ground values are used directly (lamp-lift,
   fg-on-deep) rather than the semantic roles, which resolve to the light-ground values
   whenever the visitor is in light mode. See "Colour on a light ground", rule 3, in
   BRAND.md: on a dark ground each colour is one value doing both jobs. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--accent-text); }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 16px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 6px;
  font-weight: 600;
}

/* --- type roles, straight from the BRAND.md table --- */

.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 1.25rem;
}

.section-head {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  max-width: 24ch;
}

.prose {
  max-width: 62ch;
  margin: 0 0 1.25rem;
}

.muted { color: var(--fg-muted); }

/* --- masthead --- */

.masthead {
  background: var(--mk-ink);
  color: var(--fg-on-deep);
  border-bottom: 1px solid rgba(233, 161, 59, 0.16);
}

.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--mk-lamp-lift);
}

.mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: block;
}

.brand-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--fg-on-deep);
}

.nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.nav a {
  color: #C2C7D4;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav a:focus-visible { color: var(--mk-lamp-lift); border-bottom-color: var(--mk-lamp-lift); }

/* The one link that leaves the page. An outline rather than a fill: a filled button up
   here would outrank the headline, and the job of this page is still to explain the
   thing before offering it. */
/* `.nav a.nav-app`, not `.nav-app`: `.nav a` is a class *and* an element, so it wins
   on specificity and the padding here never applied — the pill came out 27px wide,
   which looked like a clipped button rather than a rule that had lost. */
.nav a.nav-app {
  border: 1px solid var(--mk-lamp);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  color: var(--mk-lamp-lift);
}
.nav a.nav-app:hover,
.nav a.nav-app:focus-visible {
  background: var(--mk-lamp);
  border-color: var(--mk-lamp);
  color: var(--mk-ink);
}

/* --- hero: permanently ink --- */

.hero {
  background: var(--mk-ink);
  color: var(--fg-on-deep);
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
}

.hero .eyebrow { color: var(--mk-lamp-lift); }

.wordmark {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3rem, 1.4rem + 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 1.75rem;
  color: var(--fg-on-deep);
}

.lede {
  /* 64, not 54. At 54 the line broke around the middle of a wide window and read as
     a fault rather than as a measure — reported exactly that way. 64 characters is
     still inside a comfortable measure and ends nearer the column it sits in.
     `pretty` keeps the last line from standing alone. */
  max-width: 64ch;
  text-wrap: pretty;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  color: #C8CDDA;
  margin: 0 0 2rem;
}

.pron {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #8B93A8;
  margin: 0;
}
.pron .ipa { color: var(--mk-lamp-lift); }

/* --- bands --- */

.band { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }
.band-alt { background: var(--bg-raised); border-block: 1px solid var(--line); }

.deep {
  background: var(--mk-dusk);
  color: var(--fg-on-deep);
}
.deep .section-head { color: var(--fg-on-deep); }
.deep .prose { color: #C8CDDA; }
.deep .muted { color: #9AA2B6; }

/* --- the ladder --- */

.ladder-fig { margin: 2.5rem 0 0; }

.ladder-scroll { overflow-x: auto; }

.ladder {
  width: 100%;
  min-width: 620px;
  height: auto;
  display: block;
  color: var(--fg-muted);
}

.ladder .axis { stroke: var(--line); stroke-width: 2; }

.ladder .rung line { stroke: var(--accent); stroke-width: 2.5; }
.ladder .rung circle { fill: var(--accent); }
.ladder .rung.first line { stroke: var(--fg); }
.ladder .rung.first circle { fill: var(--fg); }

.ladder .rung-label text {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 15px;
  fill: var(--accent-text);
}
.ladder .rung-label text.now { fill: var(--fg); }

.ladder .day-label text {
  font-family: var(--mono);
  font-size: 12.5px;
  fill: var(--fg-muted);
}

.ladder .axis-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--fg-muted);
}

figcaption {
  max-width: 62ch;
  margin-top: 1.25rem;
  color: var(--fg-muted);
  font-size: 0.95rem;
}

/* --- the forgetting curve --- */

.curve-fig { margin: 2.5rem 0 0; }
.curve-scroll { overflow-x: auto; }

.curve {
  width: 100%;
  min-width: 560px;
  height: auto;
  display: block;
  color: var(--fg-muted);
}

.curve .axes line { stroke: var(--line); stroke-width: 2; }

/* Grey, and it is the only grey line on the page that means something: this is what
   happens without the product, so it must not wear the accent. */
.curve .usual {
  fill: none;
  stroke: var(--fg-muted);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
}

.curve .ours {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}

/* The claim of the whole section, so it is drawn rather than described: the area
   between the two lines is the thing the evening buys. */
.curve .gap { fill: var(--accent); opacity: 0.1; }

.curve .gap-label line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.curve .gap-label text {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--accent-text);
}

.curve .curve-label text {
  font-family: var(--mono);
  font-size: 13px;
}
.curve .ours-label { fill: var(--accent-text); }
.curve .usual-label { fill: var(--fg-muted); }

.curve .axis-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--fg-muted);
}

/* --- the three steps --- */

.steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* The banded header the app draws on Tonight, in static markup. Same band, same
   circled number, same centred heading with its mark — see `step.tsx`, whose comment
   explains why the number is a bubble on a band rather than a label. */
.step-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--mk-lamp) 30%, transparent);
  border-radius: 0.75rem;
  /* Mixed from the two tokens rather than named as a third. The app has an
     `accent-soft`; the brand file does not, and the note at the top of this file says
     layout only, never a palette value. A mix also follows the ground into dark mode,
     where a literal would be the one thing on the band that did not. */
  background: color-mix(in srgb, var(--mk-lamp) 12%, var(--bg));
  padding: 1rem 1.25rem;
  margin-bottom: 1.1rem;
}

.step-n {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-lamp) 30%, transparent);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--accent-text);
  margin: 0;
}

.steps h3 {
  /* Centred text with the mark flowing inside it, not a flex row. As a row the mark
     is one item and the wrapping title is another, and a title that wraps to two lines
     takes the whole remaining width — which left the mark pinned to the far left of
     the band, level with nothing. Inline, it sits before the first word and wraps with
     it, which is what it does in the app where the titles happen to be short enough
     that the difference never showed. */
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  /* Two lines' worth, so a one-line title and a two-line title give the same band
     height and the three paragraphs below start level. */
  min-height: 2.5em;
  margin: 0;
  color: var(--accent-text);
}

.step-mark {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.4em;
  vertical-align: -0.15em;
}

.steps p:last-child { margin: 0; color: var(--fg-muted); }

/* --- teach-back --- */

.teach-in { max-width: 56rem; }

.learner {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--mk-lamp-lift);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 8px 8px 0;
}

.learner p {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0;
  color: var(--fg-on-deep);
}

.counter-eg { color: #9AA2B6; text-decoration: line-through; }

/* --- guardian cards --- */

.card-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: 2.5rem;
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
}
.band-alt .card { background: var(--bg); }

.report { margin: 0; font-size: 0.97rem; }
.report + .report { margin-top: 1rem; }

.legend { list-style: none; margin: 0 0 1rem; padding: 0; }
.legend li { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; font-size: 0.97rem; }

.swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
  transform: translateY(1px);
}
.swatch.retained { background: var(--retained); }
.swatch.gap { background: var(--gap); }

.t-retained { color: var(--retained-text); font-weight: 600; }
.t-gap { color: var(--gap-text); font-weight: 600; }

/* --- status --- */

.curric { max-width: 56rem; }

.status {
  margin: 2rem 0 0;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: rgba(201, 127, 20, 0.07);
  max-width: 62ch;
  font-size: 0.97rem;
}

/* --- footer --- */

.foot {
  background: var(--mk-ink);
  color: #9AA2B6;
  padding-block: 2.5rem;
}

.foot-in {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.foot-brand {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--fg-on-deep);
  margin: 0;
}

/* Superscript by eye rather than with <sup>, which in this face sits too high and
   drags the line box with it. The symbol is a footnote to the name, not a second
   word in it. */
.tm {
  font-size: 0.55em;
  vertical-align: 0.5em;
  letter-spacing: 0;
  margin-left: 0.08em;
}

.foot-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0;
}

/* --- focus --- */

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero a:focus-visible, .deep a:focus-visible, .masthead a:focus-visible, .foot a:focus-visible {
  outline-color: var(--mk-lamp-lift);
}

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