/* A, Type cut: the cognition style's own scale (64 display, 48 heading, 24 title, 16 body), a strict 12-column grid, a 1px rule and a label at the top of every section, one statement per section. Motion is type only: paragraphs light up word by word as they pass the reading line, and one key word per section is marked */
.sec { padding-block: clamp(56px, 6vw, 96px) clamp(72px, 8vw, 128px); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px var(--gut); }
.stack { display: grid; gap: 28px; align-content: start; min-width: 0; }
.sec__head { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--ink); margin-bottom: clamp(32px, 4vw, 64px); }
.stack--tight { gap: 24px; }
.stack--loose { gap: 40px; }
.measure { max-width: 22ch; }
.toc__label { padding-bottom: 14px; }
.say { font-size: 24px; line-height: 1.3; letter-spacing: -.02em; max-width: 30ch; text-wrap: pretty; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .g-l { grid-column: 1 / span 6; }
  .g-r { grid-column: 7 / span 6; }
  .g-read { grid-column: 4 / span 7; }
  .g-wide { grid-column: 1 / span 10; }
}

/* the hero, split like the original: the statement on the left, the five verbs on the right */
.hero { padding-block: clamp(32px, 5vw, 88px) clamp(64px, 7vw, 120px); align-items: stretch; }
.hero__l { display: grid; gap: 40px; align-content: space-between; min-width: 0; }
.hero__l .stack { gap: 24px; }
.verbs { display: grid; align-content: start; }
.verbs .say { padding-bottom: 24px; }
.verbs li { border-top: 1px solid var(--ink); }
.verbs__go { display: flex; align-items: center; gap: 14px; padding-block: 6px 10px; color: inherit; text-decoration: none; }   /* the whole row opens the manifesto */
.verbs li:last-child { border-bottom: 1px solid var(--ink); }
.verbs .i { width: 28px; height: 28px; stroke-width: 1.25; }

/* markers, shown only while you point at a key word. Two kinds, chosen by the ground under them:
   the stripe: a lavender band under the word, for the five verbs (settled, anywhere on the row) and for key words on white;
   the ink block: the word turns into a block of the section's ink with the letters in its ground, for lavender, pink and Deep Mind, so it stays two colours on any ground */
.mk { --hl: #D8D0E8; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 88% / 0% 44%; transition: background-size .45s var(--ease-io); padding-inline: .05em; margin-inline: -.05em; white-space: nowrap; }
.mk:hover, .verbs li:hover .mk, .verbs__go:focus-visible .mk { background-size: 100% 44%; }
.t-lav .mk { --hl: #BBB2D1; }
.t-pink .mk { --hl: #FFFFFF; }   /* White band on Pink (Daniel, 21 Oct: option E, stronger than Soft Lavender) */
.t-deep .mk, .t-night .mk { --hl: #3D3669; }
/* the ink block is one span per phrase, with no copy of the text: the block grows from the left, and the letters are painted by a two-colour fill whose edge moves with it, so they turn to the ground exactly where the block reaches them. If the phrase wraps, each line gets its own block, wiping in together */
.mk--ink { padding-inline: .08em; margin-inline: -.08em; white-space: normal; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: none; transition: none; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mk--ink { color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, var(--ground) 50%, var(--ink) 50%), linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 200% 100%, 0% 84%; background-position: 100% 0, 0 70%; -webkit-background-clip: text, border-box; background-clip: text, border-box; transition: background-size .45s var(--ease-io), background-position .45s var(--ease-io); }
  .mk--ink:hover { background-size: 200% 100%, 100% 84%; background-position: 0 0, 0 70%; }
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .mk--ink:hover { background: var(--ink); color: var(--ground); }
}
@media (forced-colors: active) { .mk--ink { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; } }

/* light up: with script on, words wait in the muted ink and turn full ink as they pass the reading line; without script everything is full ink */
.lightup [data-light] .w { color: var(--muted); color: color-mix(in srgb, var(--ink) 38%, var(--ground)); transition: color .3s var(--ease-out); }
.lightup [data-light] .w.lit { color: var(--ink); }

/* the waitlist page */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* the honeypot field: people never see it */
/* the questions before joining (Daniel, 21 Oct 2026): chips in the ink, a chosen one filled with it (the guide's Tag);
   each "Other" opens a few words' field where :has() works, and shows it always where it does not */
#join-form { gap: 20px; }
.q { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.q > legend { padding: 0; margin: 0 0 8px; }
.opt { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tag { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font-size: 15px; letter-spacing: -.01em; cursor: pointer; user-select: none; }
.tag:hover { background: var(--faint); }
.tag-in:checked + .tag { background: var(--ink); color: var(--ground); }
.tag-in:focus-visible + .tag { outline: 2px solid var(--ink); outline-offset: 2px; }
@supports selector(:has(*)) { .q:not(:has(.tag-in[value="Other"]:checked)) .other { display: none; } }
/* an Other's box, empty, reads as a text box to fill: a light tint of the ink and a faded question (Daniel, 21 Oct 2026:
   "more shaded so it feels like a text box", "by faded it just mean the empty state"); once typed, it is a field like the rest */
.field.other:placeholder-shown { background: var(--faint); border-color: transparent; }
.field.other::placeholder { color: var(--ink); opacity: .5; }
.field.other:focus { background: var(--field); border-color: var(--ink); }
/* the sliders (Daniel, 21 Oct 2026): a thin line and a round thumb in the ink; untouched, the thumb is hollow and the
   value says so, since a range always has a value and optional must mean untouched */
.slide__value { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.slide:has([data-unset]) .slide__value { color: var(--muted); }
.slide__range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.slide__range::-webkit-slider-runnable-track { height: 2px; background: var(--ink); border-radius: 1px; }
.slide__range::-moz-range-track { height: 2px; background: var(--ink); border-radius: 1px; }
.slide__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); }
.slide__range::-moz-range-thumb { width: 20px; height: 20px; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); }
.slide__range[data-unset]::-webkit-slider-thumb { background: var(--ground); }
.slide__range[data-unset]::-moz-range-thumb { background: var(--ground); }
.slide__range:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.slide__ends { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.slide p { margin: 0; }
.join__end { justify-items: start; gap: 12px; }
.wl { padding-block: clamp(32px, 6vw, 96px) clamp(72px, 9vw, 144px); }
/* the join box: one card, Pink on Core Black, centred */
.wl__box { position: relative; display: grid; gap: 32px; max-width: 600px; margin-inline: auto; padding: clamp(24px, 4vw, 48px); border-radius: 4px; }
/* the box's X, as the account portals have it: top right, 44px, the smallest hit area for a finger */
.box__close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; color: var(--ink); text-decoration: none; }
.box__close:hover { background: var(--faint); }
.box__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wl__box .stack { gap: 16px; }

/* an opening that fills the screen on arrival (Daniel, 20 Oct 2026): at least the window's height (on phones the
   smaller one, so the browser's bars never hide its end), the menu on top and the content centred below it;
   on a screen too short for the content it simply grows */
.band--full { min-height: 100vh; min-height: 100svh; display: flex; }
.band--full > .wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.band--full > .wrap > .hero { flex: 1; align-content: center; }

/* the manifesto page: one reading column at title size */
.mh { padding-block: clamp(32px, 5vw, 88px) clamp(48px, 6vw, 96px); }
.read { padding-bottom: clamp(72px, 8vw, 128px); }
.read__body { display: grid; gap: 1.1em; font-size: 24px; line-height: 1.38; letter-spacing: -.015em; }
.read__body p { max-width: 34em; text-wrap: pretty; }
@media (max-width: 600px) { .read__body { font-size: 20px; } .say { font-size: 20px; } }

/* the footer logo: smaller, and still */
.ft__big { font-size: clamp(40px, 5vw, 80px); }
.ft__big .mark { --mw: 2.1; }

/* the five movements, listed: on the home as rows that open the manifesto, at the top of the manifesto as its contents */
.rows { display: grid; margin-top: clamp(40px, 5vw, 72px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 0 22px; border-top: 1px solid var(--ink); text-decoration: none; color: var(--ink); }
.row:last-child { border-bottom: 1px solid var(--ink); }
.row__n { grid-column: 1; }
.row__v { grid-column: 2; grid-row: 1; justify-self: end; }
.row__name { grid-column: 1 / -1; }
.row__line { grid-column: 1 / -1; color: var(--muted); }
.row:hover .row__name, .row:focus-visible .row__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 900px) {
  .row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: baseline; }
  .row__n { grid-column: 1 / span 1; }
  .row__name { grid-column: 2 / span 4; }
  .row__line { grid-column: 6 / span 6; }
  .row__v { grid-column: 12 / span 1; grid-row: auto; }
}
.toc { display: grid; align-content: start; }
.toc a { display: flex; align-items: center; gap: 12px; padding-block: 6px 10px; border-top: 1px solid var(--ink); text-decoration: none; }
.toc li:last-child a { border-bottom: 1px solid var(--ink); }
.toc a:hover span, .toc a:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.toc .i { width: 24px; height: 24px; stroke-width: 1.3; }

/* one movement: the rule and its label, the heading on the left, the text on the right */
.mv { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); scroll-margin-top: 8px; }
.mv .sec__head { margin-bottom: clamp(24px, 3vw, 48px); }
.mv__body { display: grid; gap: 1em; max-width: none; }
.mv__body strong { font-weight: 400; }