/* About, on the colour system from home.css (round 22, 5 November 2026). The page is an argument, so the blocks follow it:
   the claim beside the evidence, the person beside the letter, four beliefs as four solid blocks. */

/* Hero: Home's split, yellow beside teal on every width */
.about-hero h1{font-size:clamp(40px,4.5vw,68px);line-height:.98;text-wrap:balance}
.about-hero>.stack{justify-content:center;padding-block:40px 80px}
.about-hero .hero-side{background:var(--teal)}
.about-hero .scene-label{color:var(--yellow)}

/* Strands into and out of a split carry both colours. Gradient fills sit in the SVGs */
.st-problem{background:linear-gradient(90deg,var(--yellow) 50%,var(--teal) 50%)}
.st-who{background:linear-gradient(90deg,var(--ink) 41.667%,var(--white) 41.667%)}
.st-believe{background:linear-gradient(90deg,var(--paper) 58.333%,var(--purple) 58.333%)}
.st-today{background:linear-gradient(90deg,var(--yellow) 33.333%,var(--green) 33.333% 66.667%,var(--ink) 66.667%)}
.split>.strand{display:none}
.split+.strand+.band,.split:has(+.strand) .split-side{padding-bottom:88px}
.strand+.split .split-side{padding-top:72px}

/* The problem: the claim on ink, the evidence on white */
.ab-problem{--a:5fr;--b:7fr}
.ab-claim{background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:center;gap:28px}
.ab-claim .title{color:var(--white)}
.ab-big{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.5vw,38px);line-height:1.12;letter-spacing:-.02em;color:var(--white);text-wrap:pretty}
.ab-evidence{background:var(--white)}
.ab-evidence .problem-prose{grid-template-columns:minmax(0,1fr);max-width:40em;gap:18px}
.ab-evidence .problem-prose p{color:var(--ink-2)}
.ab-evidence .sources{columns:2 240px}

/* Who's behind it: the words on paper, Noodle with the letter on purple */
.ab-who{--a:7fr;--b:5fr}
.ab-who-words{background:var(--paper);justify-content:center}
.ab-who-words .copy{max-width:36em}
.ab-who-words .join-strip{border-width:3px;box-shadow:var(--shadow)}
.ab-letter{background:var(--purple);display:grid;place-items:center;position:relative;overflow:clip;isolation:isolate}
.ab-letter:before{content:"";position:absolute;z-index:-1;right:-20%;top:-14%;width:96%;height:74%;background:var(--purple-shape);border-radius:0 0 0 200px;transform:rotate(8deg)}
.ab-letter .pic{width:min(100%,300px);height:auto;transform:rotate(-4deg)}

/* What we believe: a title block and four belief blocks, cut hard, no gaps */
.ab-believe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.ab-believe-head{background:var(--yellow);padding:88px 48px 88px var(--gut);display:flex;flex-direction:column;gap:16px}
.ab-believe-head .lede{margin:0;color:var(--ink-yellow)}
.ab-beliefs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-belief{position:relative;overflow:clip;isolation:isolate;display:flex;flex-direction:column;gap:14px;padding:64px 52px 72px;color:var(--white)}
.ab-belief:nth-child(2n){padding-right:var(--gut)}
.ab-belief:before{content:"";position:absolute;z-index:-1;pointer-events:none;right:-18%;bottom:-34%;width:70%;height:80%;border-radius:200px 0 0 0;transform:rotate(-9deg)}
.ab-b1{background:var(--blue)}.ab-b1:before{background:var(--blue-shape)}
.ab-b2{background:var(--teal)}.ab-b2:before{background:var(--teal-deep)}
.ab-b3{background:var(--green)}.ab-b3:before{background:var(--green-shape)}
.ab-b4{background:var(--ink)}.ab-b4:before{background:#2a3044}
.ab-n{font-family:var(--wordmark);font-size:96px;line-height:.8;color:var(--yellow);margin-bottom:10px}
.ab-belief h3{margin:0;font-size:clamp(26px,2.2vw,34px);line-height:1.06;letter-spacing:-.02em;color:var(--white);text-wrap:balance;max-width:14em}
.ab-belief p{margin:0;font-size:18px;line-height:1.55;color:var(--white);max-width:30em}
.ab-b2 p{color:var(--on-teal)}
.ab-b4 p{color:#d7dbe3}

/* Where we've got to: on white, the road inked */
#today .road-dot{border:3px solid var(--ink);width:32px;height:32px}
#today .is-next .road-dot{border-style:dashed;border-color:var(--tomato-deep)}
#today .road:before{border-top-color:var(--ink);opacity:.35}

/* The world: the sequel to The problem, on ink; the table is an inked card */
#world .lede{color:#d7dbe3}
#world .world-table{border:var(--inked);border-color:var(--white);box-shadow:8px 8px 0 var(--yellow)}
#world .world-table .fn a{color:var(--tomato-deep)}
#world .world-close p{color:#d7dbe3}
#world .world-close b{color:var(--white)}

@media(max-width:960px){
  .about-hero>.stack{padding-block:12px 48px}
  .st-problem{background:var(--teal)}
  .st-problem path:first-child{fill:var(--ink)}
  .split>.strand{display:block}
  .ab-problem>.strand{background:var(--ink)}
  .ab-who>.strand{background:var(--paper)}
  .ab-claim,.ab-evidence,.ab-who-words,.ab-letter{padding-block:56px}
  .ab-claim{padding-bottom:40px}
  .ab-evidence,.ab-letter{padding-top:32px}
  .st-who{background:var(--white)}
  .st-who path:first-child{fill:var(--paper)}
  .st-believe{background:var(--purple)}
  .st-believe path:first-child{fill:var(--yellow)}
  .st-today{background:var(--ink)}
  .ab-letter .pic{width:200px}
  .ab-believe,.ab-beliefs{grid-template-columns:minmax(0,1fr)}
  .ab-believe-head{padding:40px var(--gut) 48px}
  .ab-belief,.ab-belief:nth-child(2n){padding:48px var(--gut) 56px}
  .ab-n{font-size:72px}
  #world .world-table{border:0;box-shadow:none}
  #world .world-table tbody tr{border:var(--inked);border-color:var(--white);box-shadow:6px 6px 0 var(--yellow)}
}

/* Pass 2 */
.ab-claim .acc{color:var(--yellow)}
.ab-who-words .copy{display:flex;flex-direction:column;gap:18px}
.ab-who-words .copy .title{margin:0 0 6px}
.ab-who-words .copy p{margin:0;font-size:18px;line-height:1.6;color:var(--ink-2)}
.ab-who-words .copy p a{color:var(--teal);font-weight:800}
.ab-believe-art{margin-top:auto;align-self:flex-start;width:min(70%,190px);height:auto;transform:rotate(-5deg)}
@media(max-width:960px){
  .ab-believe-art{display:none}
  .ab-claim{padding-bottom:24px}
  .ab-letter{padding-block:16px 40px}
  .ab-letter .pic{width:170px}
}

/* The problem's evidence, in four beats instead of two paragraphs */
.ab-evidence{display:flex;flex-direction:column;gap:32px}
.ab-lead{margin:0;font-size:clamp(19px,1.5vw,22px);line-height:1.5;font-weight:700;color:var(--ink);max-width:34em}
.ab-beat{display:flex;flex-direction:column;gap:12px}
.ab-beat-h{margin:0;font-family:var(--hand);font-weight:400;font-size:24px;line-height:1;color:var(--ink-2)}
.ab-wrongs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ab-wrongs li{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;border:var(--inked);border-radius:16px;background:var(--paper)}
.ab-wrongs b,.ab-fork b{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.ab-wrongs span{font-size:16px;line-height:1.45;color:var(--ink-2)}
.ab-fork{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.ab-fork p{margin:0;display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;border:3px dashed var(--ink);border-radius:16px}
.ab-fork span{font-size:16px;line-height:1.45;color:var(--ink-2)}
.ab-fork .ab-or{border:0;padding:0;font-family:var(--hand);font-size:22px;color:var(--ink-2)}
.ab-law{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;padding:20px 22px;border:var(--inked);border-radius:18px;box-shadow:var(--shadow);background:var(--yellow)}
.ab-law p{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.ab-law-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;padding:8px 0 10px;border-radius:12px;background:var(--ink);color:var(--white)!important;font-family:var(--display);font-weight:800;font-size:24px!important;line-height:1!important;letter-spacing:-.02em}
.ab-law-date span{font-family:var(--hand);font-weight:400;font-size:20px;color:var(--yellow);margin-bottom:4px}
.ab-law-end{font-weight:800}
.ab-law .fn a{color:var(--ink)}
@media(max-width:560px){
  .ab-wrongs{grid-template-columns:minmax(0,1fr)}
  .ab-fork{grid-template-columns:minmax(0,1fr)}
  .ab-fork .ab-or{justify-self:center}
  .ab-law{grid-template-columns:minmax(0,1fr)}
}

/* Pass 3: the four failings on ink as a plain numbered list; the white side keeps the fact, the choice and the law */
.ab-claim{justify-content:flex-start;gap:28px}
.ab-beat-dark{margin-top:12px;gap:4px}
.ab-beat-dark .ab-beat-h{color:var(--yellow);font-size:26px;margin-bottom:6px}
.ab-claim .ab-wrongs{display:flex;flex-direction:column;gap:0;counter-reset:wrong}
.ab-claim .ab-wrongs li{counter-increment:wrong;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 0;padding:16px 0 18px;border:0;border-top:2px solid #ffffff26;border-radius:0;background:none}
.ab-claim .ab-wrongs li:before{content:counter(wrong);grid-row:1 / span 2;font-family:var(--wordmark);font-size:30px;line-height:1;color:var(--yellow)}
.ab-claim .ab-wrongs b{color:var(--white);font-size:23px}
.ab-claim .ab-wrongs span{color:#c9cede;font-size:17px;line-height:1.5}
.ab-evidence{justify-content:flex-start;gap:36px}
.ab-lead{font-size:clamp(20px,1.7vw,24px);line-height:1.45}
.ab-fork{gap:14px}
.ab-fork p{padding:18px 20px 20px;border-width:3px}
.ab-fork b{font-size:28px}
.ab-fork span{font-size:17px}
.ab-law{background:var(--paper);box-shadow:none;border-width:3px}
.ab-law p{font-size:17.5px}
@media(max-width:960px){
  .ab-claim .ab-wrongs b{font-size:21px}
}

/* Pass 4: icons, Pricing's style (24px line icons in a yellow disc with an ink edge) */
.ab-i{flex:none;width:44px;height:44px;padding:9px;border-radius:50%;background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),2px 2px 0 var(--ink)}
.ab-claim .ab-wrongs li{grid-template-columns:62px minmax(0,1fr);align-items:start}
.ab-claim .ab-wrongs li:before{content:none}
.ab-claim .ab-wrongs .ab-i{grid-row:1 / span 2;margin-top:2px;box-shadow:none}
.ab-fork p{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
.ab-fork .ab-i{grid-row:1 / span 2;width:52px;height:52px;padding:11px;background:var(--paper)}
.ab-fork{align-items:stretch}.ab-fork .ab-or{align-self:center}
/* Round 26 crit: on a phone the purple letter panel was ~440px of colour around one picture */
@media(max-width:960px){.ab-letter{padding-block:24px 40px}.ab-letter .pic{width:min(60%,190px)}}
/* Tomato means bad: the road's next stop is a dashed ink circle, not a red one */
#today .is-next .road-dot{border-color:var(--ink)}
/* Round 26: About opens on the people. The kitchen table, where it was built, on a paper disc in the teal half */
.about-hero .hero-side{display:grid;place-items:center;padding:48px 32px;background:radial-gradient(circle closest-side,var(--paper) 0 96%,#0000 97%) center/min(92%,620px) auto no-repeat,var(--teal);background-size:min(92%,620px) min(92%,620px)}
.about-hero-art{width:min(560px,100%);height:auto;filter:drop-shadow(6px 6px 0 var(--ink))}
@media (max-width:900px){.about-hero .hero-side{padding:28px 20px 40px}}

/* Round 27, direction A (see home.css). The signature band is ink "It isn't just a UK problem" */
@media(min-width:961px){
  .about-hero .hero-side{background:radial-gradient(circle closest-side,var(--teal) 0 95%,#0000 96%) center/min(92%,620px) min(92%,620px) no-repeat,var(--yellow)}
  .st-problem,.st-who,.st-believe,.st-today{display:none}
  .ab-problem{background:var(--white)}
  .ab-claim :is(h2,h2 a,.ab-big,.acc,.ab-beat-h,.ab-wrongs b,.ab-wrongs span){color:var(--ink)!important}
  .ab-who{background:var(--paper)}
  .ab-letter:before{display:none}
  .ab-letter.split-card,.split>.ab-letter.split-card:last-child{border:0;background:none;padding:0}
  .ab-believe{background:var(--paper);gap:48px;padding:80px var(--gut)}
  .ab-believe-head{background:none;padding:0}
  .ab-beliefs{gap:24px}
  .ab-belief,.ab-belief:nth-child(2n){padding:40px 40px 44px;border:var(--inked);border-radius:24px;background:var(--white);color:var(--ink)}
  .ab-belief:before{display:none}
  .ab-belief h3,.ab-belief p,.ab-b2 p,.ab-b4 p{color:var(--ink)!important}
  .ab-n{font-size:64px;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
}

/* Round 28: the beliefs' numbers follow the site's one step style (ink disc, yellow numeral) */
.ab-n{font-family:var(--display);font-size:24px;line-height:1;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--yellow);margin-bottom:10px;-webkit-text-stroke:0;paint-order:normal}
@media(min-width:961px){.ab-n{font-size:24px;-webkit-text-stroke:0}}
@media(max-width:960px){.ab-b4 .ab-n{box-sizing:border-box;border:2px solid var(--yellow)}}

/* Round 30 crit (7 November 2026): on a phone What we believe had become six full-bleed colour blocks, opening with
   ~440px of purple around one Noodle. The phone now shows desktop's four white cards on paper, stacked under the heading,
   with a small Noodle beside the heading in place of the purple block. */
@media(max-width:960px){
  .ab-letter,.ab-who>.strand,.st-believe{display:none}
  .ab-believe{background:var(--paper);gap:28px;padding:0 var(--gut) 64px}
  .ab-believe-head{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px 16px;align-items:center;background:none;padding:0}
  .ab-believe-art{display:block;grid-column:2;grid-row:1 / span 2;width:92px;margin:0;transform:rotate(-5deg)}
  .ab-beliefs{gap:16px}
  .ab-belief,.ab-belief:nth-child(2n){padding:28px 24px 32px;border:var(--inked);border-radius:24px;background:var(--white);color:var(--ink)}
  .ab-belief:before{display:none}
  .ab-belief h3,.ab-belief p,.ab-b2 p,.ab-b4 p{color:var(--ink)!important}
  .ab-b4 .ab-n{border:0}
  .st-today{background:var(--paper)}
}