/* Version C, "One line". The page is one sticky screen; the scroll draws it (line.js).
 * Without script it reads top to bottom: the hero, the story as plain sections, the close.
 *
 * Drawn in the soft line (docs/product/design-soft-line.md): the mark's own tube on a lit paper table,
 * one light from the top left, bars and buttons as capsules, cards as sheets of paper, an orange ball
 * at the line's tip. The sky changes with the hour of the story: line.js paints the ground, moves the
 * light and mixes the inks towards the night tones, so everything drawn in them follows.
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  --quick: "Quicksand", var(--sans);
  --shade: 58, 36, 18;                       /* shadows are warm, never grey */
  /* the tube's tones, in the ink of the hour (line.js mixes them towards cream at night) */
  --tb-dark: #14110f; --tb-mid: #2c2825; --tb-hi: #514a43;
  /* words on the flood: the eye is ink by day, so they are cream */
  --on-flood: #fff8ef; --on-flood-2: #c9beb1;
  --sheet: #fffdf9; --sheet-line: #cfc5b8; --sheet-head: #2c2825;
  --band: rgba(58, 36, 18, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tb-dark: #cbbdab; --tb-mid: #f4ebdd; --tb-hi: #fffdf8;
    --on-flood: #1d1a17; --on-flood-2: #5e554c;
    --sheet: #efe7da;
    --band: rgba(255, 248, 239, 0.08);
  }
}
:root[data-theme="dark"] {
  --tb-dark: #cbbdab; --tb-mid: #f4ebdd; --tb-hi: #fffdf8;
  --on-flood: #1d1a17; --on-flood-2: #5e554c;
  --sheet: #efe7da;
  --band: rgba(255, 248, 239, 0.08);
}

/* focus in the ink of the hour: dark on paper, cream at night, so it shows on every ground */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }

.nav { background: transparent; }
.brand [data-brand-small] { color: var(--ink); }
.brand .word { display: block; height: 19px; width: auto; color: var(--ink); }
.foot .brand .word { height: 17px; }
.foot { background: var(--paper-2); font-size: 15px; }
.note { font-size: 15px; }

/* buttons are soft capsules, lit from the top: the one action in orange, the nav's in paper */
.btn {
  min-height: 48px; padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9259 8%, #ff6b2c 42%, #d2440f 100%);
  color: #1d1a17;
  font: 700 16px/1 var(--quick);
  letter-spacing: 0.005em;
  box-shadow: 0 1px 2px rgba(var(--shade), 0.14), 5px 9px 16px -6px rgba(var(--shade), 0.28);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.btn-s { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-q { background: linear-gradient(180deg, #f8f2e8 8%, #efe7da 42%, #ddd2c3 100%); }
.btn:active { transform: scale(0.96); box-shadow: 0 1px 1px rgba(var(--shade), 0.1), 3px 5px 8px -4px rgba(var(--shade), 0.2); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: linear-gradient(180deg, #ffa06c 8%, #ff773a 42%, #d94a13 100%); }
  .btn-q:hover { background: linear-gradient(180deg, #fffaf1 8%, #f5eee2 42%, #e3d9cb 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

.line { position: relative; }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.ground {
  position: absolute; inset: 0;
  background: radial-gradient(circle 120vmax at 28% 18%, #fffbf3, #f8f0e4 50%, #eadfcf);
}
.grain {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: url("../core/grain.png") 0 0 / 256px 256px;
}
.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* the tube: one path seven times (line.js sets the tones, the widths and the offsets) */
.tb { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* a thin tube: a shadow, a body and a lit middle */
.lt path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.lt-s { stroke: rgba(var(--shade), 0.16); }
.lt-b { stroke: var(--tb-dark); }
.lt-m { stroke: var(--tb-mid); }
.lt.acc .lt-b { stroke: #d2440f; }
.lt.acc .lt-m { stroke: #ff6b2c; }
.lt.grey .lt-b { stroke: #4f4841; }
.lt.grey .lt-m { stroke: #766d64; }

.word-ink { fill: var(--ink); }
.word-stop { fill: var(--accent); }
.lk-word { opacity: 0; }

/* icons (Lucide). Flat where they sit in a line of words: drawn in the colour of what holds them */
.icon { color: var(--ink); }
.icon * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.acc { color: var(--accent-ink); }
.icon.on-ink { color: #fff8ef; }
/* and small tubes where they stand alone on the table */
.icon-t * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.it-s * { stroke: rgba(var(--shade), 0.2); stroke-width: 2.4; }
.it-b * { stroke: var(--tb-dark); stroke-width: 2.4; }
.it-m * { stroke: var(--tb-mid); stroke-width: 1.7; }
.icon-t.acc .it-b * { stroke: #d2440f; }
.icon-t.acc .it-m * { stroke: #ff6b2c; }
.icon-t.cream .it-b * { stroke: #cbbdab; }
.icon-t.cream .it-m * { stroke: #f4ebdd; }

/* the sky */
.hz0 { stop-color: var(--accent); stop-opacity: 0; }
.hz1 { stop-color: var(--accent); stop-opacity: 0.22; }
.hz2 { stop-color: var(--accent); stop-opacity: 0.1; }
.sg0 { stop-color: #ffb07c; stop-opacity: 0.42; }
.sg1 { stop-color: #ffb07c; stop-opacity: 0; }
.mg0 { stop-color: #fff8ef; stop-opacity: 0.2; }
.mg1 { stop-color: #fff8ef; stop-opacity: 0; }
.star { fill: #fff8ef; }
.horizon-l { stroke: var(--ink-3); stroke-width: 1; opacity: 0.4; }

/* the flood: everything you bring, threaded on the line */
.bead .icon { color: var(--bead-ink, #1d1a17); }
.t-bead { font-size: 15px; font-weight: 500; fill: var(--on-flood); text-anchor: middle; }

/* words in the picture */
.art text { font-family: var(--sans); font-feature-settings: "tnum" 1; }
.t-title { font-family: var(--serif) !important; font-size: 20px; font-weight: 500; fill: var(--ink); }
.t-key, .t-soft { font-size: 15px; fill: var(--ink-2); }
.t-strong { font-size: 16px; font-weight: 500; fill: var(--ink); }
.t-acc { fill: var(--accent-ink); }
.t-end { text-anchor: end; }
.t-axis { font-size: 15px; fill: var(--ink-3); }
.t-split { font-size: 15px; fill: var(--ink-2); }
.t-chip { font-family: var(--quick) !important; font-size: 15px; font-weight: 600; fill: var(--ink); }
.t-on-ink { fill: #fff8ef; }
.t-big { font-family: var(--quick) !important; font-size: 24px; font-weight: 700; fill: var(--accent-ink); }

.band { fill: var(--band); }

.ev-t { font-size: 15px; fill: var(--ink-3); text-anchor: middle; }
.ev.acc .ev-t { fill: var(--accent-ink); font-weight: 500; }

/* the research: sheets of paper on the table */
.sheet { fill: var(--sheet); }
.sheet-s1 { fill: rgba(var(--shade), 0.12); }
.sheet-s2 { fill: rgba(var(--shade), 0.07); }
.sheet-s3 { fill: rgba(var(--shade), 0.04); }
.sheet-h { stroke: var(--sheet-head); stroke-linecap: round; }
.sheet-l { stroke: var(--sheet-line); stroke-linecap: round; }
.t-check { font-size: 15px; fill: var(--ink); }

/* a capsule's shadow on the table (line.js stacks three in place of a blur) */
.cap-s1 { fill: rgba(var(--shade), 0.13); }
.cap-s2 { fill: rgba(var(--shade), 0.08); }
.cap-s3 { fill: rgba(var(--shade), 0.05); }

/* what you take */
.no-zone { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.tick-l { stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; }

/* one card: a sheet of paper, with the short orange keyline of what the product wrote */
.sup-card {
  position: absolute; z-index: 1; left: 0; top: 0;
  box-sizing: border-box;
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(var(--shade), 0.1), 7px 11px 22px -6px rgba(var(--shade), 0.2);
  padding: 26px 24px 24px;
  font-size: 16px; line-height: 1.3;
  opacity: 0; visibility: hidden;
}
.sup-card::before {
  content: ""; position: absolute; left: 24px; top: 0;
  width: 30px; height: 4px; border-radius: 0 0 4px 4px;
  background: var(--accent);
}
.sup-card dl { margin: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px 10px; }
.sup-card dt { font-size: 15px; color: var(--ink-3); padding-top: 1px; }
.sup-card dd { margin: 0; display: grid; min-width: 0; }
.sup-card dd > *, .sc-chips > * { grid-area: 1 / 1; }
.sup-card .v { color: var(--ink); font-weight: 450; }
.sup-card .v small { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--ink-3); }
.sup-card dd:first-of-type { padding-right: 124px; }
.sup-card dd:first-of-type .v small { font-family: var(--sans); }
.sup-card dd:first-of-type .v { font-family: var(--serif); font-size: 21px; line-height: 1.1; font-weight: 500; }
/* line.js reveals each row of each thing in turn (--a1 to --c4) and each word (--ka to --kc) */
.sup-card .v { opacity: 0; }
.k-a { opacity: var(--ka, 0); scale: calc(0.9 + 0.1 * var(--ka, 0)); }
.k-b { opacity: var(--kb, 0); scale: calc(0.9 + 0.1 * var(--kb, 0)); }
.k-c { opacity: var(--kc, 0); scale: calc(0.9 + 0.1 * var(--kc, 0)); }
.ic { display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -2px; color: var(--ink-2); }
.ic svg { display: block; width: 100%; height: 100%; }
/* how sure: four small capsules */
.meter { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: 1px; }
.meter i { width: 15px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.meter i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 72%, var(--card)) 8%, var(--ink) 60%); }
/* the verdict: a soft capsule. Keep is the answer, in orange; a stop is ink; a maybe is paper */
.sc-chips { position: absolute; top: 20px; right: 20px; display: grid; justify-items: end; }
.sc-chip {
  font: 700 15px/1 var(--quick);
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  color: #1d1a17;
  box-shadow: 0 1px 2px rgba(var(--shade), 0.14), 3px 6px 10px -4px rgba(var(--shade), 0.24);
}
.chip-keep { background: linear-gradient(180deg, #ff9259 8%, #ff6b2c 42%, #d2440f 100%); }
.chip-stop { background: linear-gradient(180deg, #514a43 8%, #2c2825 42%, #14110f 100%); color: #fff8ef; }
.chip-test { background: linear-gradient(180deg, #f8f2e8 8%, #efe7da 42%, #ddd2c3 100%); }
/* on the night card an ink capsule would not show: the stop is cream there, with ink words */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip-stop { background: linear-gradient(180deg, #fffdf8 8%, #f4ebdd 42%, #cbbdab 100%); color: #1d1a17; }
  :root:not([data-theme="light"]) .sup-card { box-shadow: 0 0 0 1px rgba(255, 248, 239, 0.06); }
}
:root[data-theme="dark"] .chip-stop { background: linear-gradient(180deg, #fffdf8 8%, #f4ebdd 42%, #cbbdab 100%); color: #1d1a17; }
:root[data-theme="dark"] .sup-card { box-shadow: 0 0 0 1px rgba(255, 248, 239, 0.06); }

/* the test */
.split { stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0.1 6; }
.vd text { font-family: var(--quick) !important; font-size: 16px; font-weight: 700; fill: #1d1a17; }

/* the words beside the picture; line.js sets their opacity and --y */
.say { position: absolute; z-index: 2; }
.say h1 {
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.04;
  max-width: 11ch;
}
.say h2 {
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.1;
  max-width: 14ch;
}
.say p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
  text-wrap: pretty;
}
.go { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.how {
  display: inline-block; margin-top: 28px;
  font-size: 15px; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px;
  border-radius: 4px;
}
.how-at { position: absolute; left: 0; width: 1px; height: 1px; }

:root[data-layout="wide"] .say {
  left: max(32px, 6vw);
  top: 50%;
  width: min(420px, 30vw);
  transform: translateY(calc(-50% + var(--y, 0px)));
}
:root[data-layout="narrow"] .say {
  left: 20px; right: 20px;
  top: calc(var(--nav-h) + 16px);
  transform: translateY(var(--y, 0px));
}
:root[data-layout] .say-big {
  left: 50%; right: auto; top: 50%;
  width: min(760px, calc(100vw - 80px));
  transform: translate(-50%, calc(-50% + var(--y, 0px)));
  text-align: center;
}
.say-big h2 {
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  max-width: none;
  color: var(--on-flood);
  letter-spacing: -0.02em;
}
.say-big p {
  margin: 24px auto 0;
  max-width: 40ch;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--on-flood-2);
}
:root[data-layout] .say-close {
  left: 50%; right: auto;
  width: min(560px, calc(100vw - 40px));
  transform: translate(-50%, var(--y, 0px));
  text-align: center;
}
.say-close h2 { max-width: none; margin: 0 auto; }
.say-close .go { justify-content: center; }

:root[data-layout="narrow"] .say h1 { font-size: 38px; }
:root[data-layout="narrow"] .say h2 { font-size: 28px; }
:root[data-layout="narrow"] .say p { font-size: 16px; margin-top: 12px; }
:root[data-layout="narrow"] .go { margin-top: 20px; }
:root[data-layout="narrow"] .how { margin-top: 16px; }
:root[data-layout="narrow"] .say-big h2 { font-size: clamp(42px, 12.5vw, 60px); }
:root[data-layout="narrow"] .say-big p { margin-top: 16px; font-size: 16px; }
:root[data-layout="narrow"] .t-title { font-size: 18px; }
:root[data-layout="narrow"] .t-big { font-size: 20px; }
:root[data-layout="narrow"] .vd text { font-size: 15px; }
:root[data-layout="narrow"] .sup-card { padding: 18px 18px 18px; font-size: 15px; border-radius: 22px; }
:root[data-layout="narrow"] .sup-card::before { left: 18px; }
:root[data-layout="narrow"] .sup-card dl { grid-template-columns: 70px minmax(0, 1fr); gap: 11px 8px; }
:root[data-layout="narrow"] .sup-card dd:first-of-type .v { font-size: 19px; }
/* on a phone the verdict has its own row under the rows it sums up: the name beside it would have to wrap */
:root[data-layout="narrow"] .sup-card dd:first-of-type { padding-right: 0; }
:root[data-layout="narrow"] .sup-card { display: flex; flex-direction: column; }
:root[data-layout="narrow"] .sc-chips { position: static; order: 2; margin: 12px 0 0; min-height: 31px; }
:root[data-layout="narrow"] .sc-chip { padding: 8px 12px; }
:root[data-short] .sup-card { display: block; padding: 16px 16px 14px; }
:root[data-short] .sup-card dl { gap: 7px 8px; }
:root[data-short] .sc-chips { position: absolute; top: 12px; right: 12px; margin: 0; }
:root[data-short] .sup-card dd:first-of-type { padding-right: 108px; }
:root[data-short] .sup-card dd:first-of-type .v { text-wrap: balance; }

/* the story as text, for screen readers; on the page, the stage tells it */
.js .track section {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js .stage:not(.ready) .say:not(.say-hero), .js .stage:not(.ready) .art { visibility: hidden; }

/* without script: a plain page, on the paper (brand.js, which sets the tones, has not run) */
html:not(.js) body { background: #f8f0e4; color: #1d1a17; }
html:not(.js) .say p, html:not(.js) .track p, html:not(.js) .note, html:not(.js) .foot { color: #5e554c; }
html:not(.js) .foot { background: #eadfcf; }
html:not(.js) .stage { position: static; height: auto; overflow: visible; padding: 120px 32px 0; }
html:not(.js) .art, html:not(.js) .say[aria-hidden], html:not(.js) .how, html:not(.js) .sup-card,
html:not(.js) .ground, html:not(.js) .grain { display: none; }
html:not(.js) .say { position: static; margin: 0 auto 64px; max-width: 720px; }
html:not(.js) .track { max-width: 720px; margin: 0 auto; padding: 0 32px; }
html:not(.js) .track section { margin-bottom: 48px; }
html:not(.js) .track h2 { font-size: 28px; }
html:not(.js) .track p { margin-top: 8px; color: var(--ink-2); }