/**
 * The palette and the measurements everything else is drawn from.
 *
 * Nothing here paints anything. A component reaches for a token rather than a
 * number, so that changing what a hairline is, or how much air a section takes,
 * is one edit and not a search.
 *
 * Loaded first. scripts/build.mjs joins the files in css/ in the order their
 * names sort, and writes one dist/css/styles.css — one request, as before.
 */

@font-face{font-family:Blinker;src:url('../fonts/Blinker-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:Blinker;src:url('../fonts/Blinker-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

@font-face{font-family:Blinker;src:url('../fonts/Blinker-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{--ink:#111111;--river:#274b52;--shamrock:#29866f;--pumpkin:#eaaa74;--amber:#f19154;--rose:#e85859;--rose-deep:#c7484a;--cream:#fef3ec;--muted:#5a6f73;--muted-on-dark:#cdd6d6;--white:#ffffff;--font:'Blinker',system-ui,sans-serif;--shadow:0 20px 20px rgba(0, 0, 0, 0.1)}

/* The palette, named after the swatches it came from. River Blue is the dark
   the site is built on, Amber the warm it acts in — those two were already here
   under other names. Shamrock, Soft Pumpkin and Rose Quartz are what was added,
   and they are what makes it a light palette rather than a serious one.

   Rose Quartz has a second, deeper value. The bright one is right on a picture
   and right filling a button, but as small text on white it reads at about
   3.5:1, which is under what is legible; the deep one is the same colour taken
   to where it can be read. */

/* The face the logo is drawn in. Every heading is set in it now, and so is the
   count the series is named by — one:, one:one. Running text stays in Blinker:
   only the Black weight of this one is on the site, and a page of Black is a
   page nobody reads. Subset to Latin-1 and the punctuation the copy uses, which
   is what keeps it at 11 kB. */

@font-face{font-family:'MADE Tommy';src:url('../fonts/MADETommy-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{--font-mark:'MADE Tommy',var(--font)}

/* The yellow an emoji is drawn in — Twemoji's, which is the one most people
   picture. It is the only colour on the site that is not from the swatches, and
   it is here because a page of cream and river needs somewhere to be plainly
   pleased with itself. River on it reads at 6.3.

   The hairline round a card is darkened a little: the one used on cream all but
   vanishes against a colour this bright. */

:root{--emoji:#ffcc4d}

/**
 * What the numbers mean.
 *
 * Below the palette sits a second layer that names the values the components
 * kept writing out by hand. A rule between two rows was spelled four different
 * ways before this; the card padding stood in three places; the wide column in
 * three more. Reaching for the name instead of the number is what stops the next
 * component from inventing a fifth spelling.
 */
:root{
  /* Hairlines. One rule, one strong rule for an outline, and the heavier one the
     lifecycle grid needs to read as a drawing. The .12 and .14 that used to sit
     beside --rule were the same idea spelled differently and now share it. */
  --rule:rgba(39,75,82,.16);
  --rule-strong:rgba(39,75,82,.22);
  --rule-grid:rgba(39,75,82,.3);

  /* The amber a flow is drawn in — the circuit under the lifecycle columns. The
     belief bars keep their own three tints: those are a scale, not a colour. */
  --flow-line:rgba(241,145,84,.5);

  /* Text on amber. Neither the ink nor the river — a touch lighter than black so
     the button does not look punched out of the page. */
  --on-amber:#1a1a1a;

  /* Measures. The wide column is the start page's; the text measure is what
     prose is held to wherever it appears. */
  --measure-column:1200px;
  --measure-wide:calc(var(--measure-column) + 3rem);
  --measure-text:38rem;

  /* Rhythm. A section's own air, and the padding inside a card or a plate. */
  --rhythm-section:clamp(3.5rem,7vw,7rem);
  --pad-card:clamp(1.75rem,3vw,2.75rem);

  /* The lead line over a figure and the note under it are set at one size on
     purpose: they are two halves of the same sentence. */
  --size-lead:clamp(1.125rem,1.5vw,1.375rem);

  /* The ring a keyboard leaves round whatever it has reached. */
  --focus-ring:2px solid var(--amber);

  /* The header is sticky, so anything linked to has to clear it. */
  --sticky-offset:5rem;
}

/* Breakpoints cannot be tokens — var() does not work in a media query — so they
   are written out, and there are only two of them:
     900px  the point where a row of columns stops being a row
     768px  the point where the menu folds and the page is one column
   If a third is ever needed, it belongs in this comment first. */

/**
 * The reset, the elements, and the few classes every page uses.
 *
 * Whatever is true of a paragraph or a heading before any component has an
 * opinion about it belongs here.
 */

.skip-link{position:absolute;top:-100%;left:1rem;padding:.5rem 1rem;background:var(--rose-deep);color:var(--white);font-weight:700;z-index:1000}

.skip-link:focus{top:1rem}

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

[hidden]{display:none!important}

html{scroll-behavior:smooth}

body{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--river);background:var(--white)}

img{max-width:100%;height:auto;display:block}

ul{padding-left:1.5rem}

li{margin-bottom:.5rem}

hr{border:none;height:2rem}

a{color:inherit;text-decoration:none;transition:color .2s ease}

.btn:focus-visible,.menu-button:focus-visible,a:focus-visible{outline:var(--focus-ring);outline-offset:2px}

::selection{background:var(--amber);color:var(--white)}

h1,h2,h3,h4,h5{font-family:var(--font-mark);font-weight:900;line-height:1.1;letter-spacing:-.01em}

h1{font-size:clamp(2.5rem, 5vw, 5rem)}

h2{font-size:clamp(1.75rem, 3vw, 2.5rem)}

h3{font-size:1.5rem}

.highlight{color:var(--pumpkin)}

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

.lead{font-weight:700;font-size:1.25rem}

.btn{display:inline-block;padding:1rem 1.5rem;background:var(--amber);color:var(--on-amber);font-family:var(--font);font-size:1rem;font-weight:700;border:2px solid transparent;cursor:pointer;transition:background .2s ease}

.btn:hover{background:var(--rose)}

.btn:disabled{opacity:.45;cursor:default}

.btn:disabled:hover{background:var(--amber);transform:none}

@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;transition-duration:0s!important}html{scroll-behavior:auto}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A page shorter than the window used to end where its content did, leaving the
   footer floating with white under it — and the wordmark is cut off at the foot
   of the page on purpose, so stopping short read as a mistake rather than as a
   crop. The page is a column at least as tall as the window now, and the footer
   takes whatever is left over. */

body{min-height:100vh;display:flex;flex-direction:column}

/* A flex item with `margin: 0 auto` stops filling the row and shrinks to its
   own content instead — which is how the essay's name ended up a small block
   in the middle of the page rather than the width of the column. Giving every
   band of the page a width says the auto margins are only there to centre it. */

body>*{width:100%}

/* The second of the two, which is an offer rather than an ask. It is the same
   button with its fill taken away, so the pair reads as one control and not as
   a button beside a link. */

.btn-quiet{background:0 0;border-color:var(--amber);color:var(--cream)}

.btn-quiet:hover{background:var(--amber);color:var(--on-amber)}

/* MADE Tommy is drawn in one weight, Black, and it is the only weight there is
   to load. At the size of a page's title that is the point of it; at the size of
   a card's it is a small heading set in the heaviest face on the site, which
   reads as thick rather than as strong — and asking for a lighter weight does
   nothing, because there is no lighter face to give.

   So the mark font keeps the two headings large enough to carry it, and
   everything below them is set in Blinker, which has three weights. A small
   heading is then the size of the line under it with more weight, and the
   difference is one you can read instead of one you have to squint at.

   The essay names in the article rails stay in the mark font. They are not
   headings — they are the wordmark written small, the way cu:sode is. */

h3,
h4,
h5{font-family:var(--font);font-weight:700;line-height:1.3;letter-spacing:normal}

/**
 * The page's frame: the bands the sections sit in, the column they are measured
 * against, the header and the footer.
 *
 * A band is the full-bleed strip that carries a background; a section is the
 * measured column inside it. Every block on the start page is one of each.
 */

.header{position:sticky;top:0;z-index:100;background:var(--river);padding:1.25rem 1.5rem}

.nav{max-width:940px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}

.logo img{height:20px}

.nav-links{display:flex;align-items:center;gap:.5rem;list-style:none;padding:0;margin:0}

.nav-links a{padding:.5rem .75rem;color:var(--cream);font-size:1rem}

.nav-links a:hover{font-weight:600}

.nav-cta{font-weight:700!important}

.menu-toggle{display:none}

.menu-button{display:none;width:2rem;height:2rem;cursor:pointer;position:relative}

.menu-button span,.menu-button span::after,.menu-button span::before{display:block;width:100%;height:2px;background:var(--cream);position:absolute;transition:all .3s ease}

.menu-button span{top:50%;transform:translateY(-50%)}

.menu-button span::before{content:'';top:-8px}

.menu-button span::after{content:'';top:8px}

.menu-toggle:checked+.menu-button span{background:0 0}

.menu-toggle:checked+.menu-button span::before{top:0;transform:rotate(45deg)}

.menu-toggle:checked+.menu-button span::after{top:0;transform:rotate(-45deg)}

.band{padding:0 1.5rem}

.band-cream{background:var(--cream)}

.section{max-width:var(--measure-column);margin:0 auto;padding:var(--rhythm-section) 0}

.two-col{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}

.contact h2{text-align:left}

.contact-links{list-style:none;padding:0}

.contact-links a{font-size:1.25rem;text-decoration:underline;text-underline-offset:3px}

.contact-links a:hover{font-weight:700;color:var(--rose-deep)}

.footer{max-width:var(--measure-wide);margin:0 auto;padding:0 1.5rem}

@media (max-width:768px){
  .menu-button{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--river);padding:1.5rem;gap:0;box-shadow:var(--shadow);display:none}
  .menu-toggle:checked~.nav-links{display:flex}
  .nav-links a{padding:1rem;font-size:1.25rem;width:100%;min-height:44px;display:flex;align-items:center;justify-content:center}
  .nav-cta{margin-top:1rem;background:var(--rule-strong);text-align:center}
  .two-col{grid-template-columns:1fr}
}

/* The wordmark at the foot of every page. The file gives the shape, the mask
   lets one flat colour through it — amber, which is the colour the artwork
   itself is drawn in. */

.footer-logo{width:100%;aspect-ratio:1328/164;background:var(--amber);
  -webkit-mask:url('../images/logo--large-half.svg') no-repeat center/100% 100%;
  mask:url('../images/logo--large-half.svg') no-repeat center/100% 100%}

/* The pages that list things — /articles/ and /faq/ — run on the wide column
   the start page uses rather than the measure an essay is set in. An essay
   itself keeps the narrow one: it is read top to bottom, and a 1200px line is
   no line at all. What is prose on a wide page keeps a measure too. */

/* The wide column is 1200px of content. A text page holds its 1.5rem gutter
   inside its max-width, where the start page's sections have it outside, so the
   gutter is added here — the two then start on the same pixel, and so does the
   menu above them. */

.page-wide{max-width:var(--measure-wide)}

.page-wide .article-intro,
.page-wide .article-intro-by,
.page-wide .article-part-intro{max-width:var(--measure-text)}

.page-wide .article-part:first-of-type{margin-top:2.5rem}

.footer{margin-top:auto}

/* Contact is the footer of every page. It keeps the two columns the start
   page's sections are set in, and a hairline for the boundary the band it used
   to sit in used to give it. */

.footer .contact{border-top:1px solid var(--rule)}

/* The menu spans pages now, so it says which one you are on. */

.nav-links a[aria-current=page]{font-weight:700;color:var(--pumpkin)}

/* And it is the same width on every page: the wide column the start page, the
   article list and the questions are all set in. An essay is the one page that
   runs narrower than that — a 1200px line of prose cannot be read — and letting
   the menu follow it down made the header look pinched on those pages alone.
   The nudge on the list takes back the padding inside the last link, so it is
   the word that meets the edge rather than the box around it. */

.nav{max-width:var(--measure-column)}

.nav-links{margin-right:-.75rem}

@media (max-width:768px){.nav-links{margin-right:0}}

/** The hero. It carries its own dark band and takes no band wrapper. */

.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;min-height:60vh;padding:clamp(5rem,12vw,9rem) 2rem;background:var(--river);text-align:center}

.hero h1{max-width:900px;color:var(--cream)}

.hero p{max-width:600px;color:var(--cream);font-size:1.125rem}

.hero .muted{font-weight:600;color:var(--muted-on-dark)}

@media (max-width:768px){
  .hero{padding:4rem 1.5rem;gap:2rem}
}

/* Two ways out of the hero: the conversation, and the reading. They sit on one
   line and wrap to two on a narrow screen, so neither is the small print. */

.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}

/**
 * The essays: an article page, the list of them, and the parts they are grouped
 * into. The Q&A page shares the plate treatment, which is why .qa-group appears
 * beside .article-part.
 */

.article{max-width:720px;margin:0 auto;padding:3rem 1.5rem 4rem}

.article h1{font-size:clamp(2rem,4vw,3rem)}

.article-by{margin-top:.75rem;color:var(--muted);font-size:.875rem}

.article-body{margin-top:2.5rem;font-size:1.125rem}

.article-body>*+*{margin-top:1.25rem}

.article-body ul{padding-left:1.25rem}

.article-body li+li{margin-top:.5rem}

.article-body a{text-decoration:underline;text-underline-offset:3px}

.article-body a:hover{color:var(--rose-deep)}

.crumbs{margin-bottom:2rem}

.crumbs ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;list-style:none;padding:0;margin:0;font-size:.875rem;color:var(--muted)}

.crumbs li+li::before{content:'\203a';margin-right:.5rem}

.crumbs a{text-decoration:underline;text-underline-offset:3px}

.crumbs a:hover{color:var(--rose-deep)}

.article-intro{margin-top:1rem;font-size:1.125rem;color:var(--muted)}

.article-list-all{display:inline-block;margin-top:2rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.article-list-all:hover{color:var(--rose-deep)}

.article-empty{margin-top:2rem;color:var(--muted)}

/* Essay typography: the printed series leans on section headings, pull quotes
   and numbered points, none of which the start page had any use for. */

.article-head{margin-bottom:3rem}

.article-eyebrow{margin-bottom:.75rem;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.article-head .article-subtitle{margin-top:.75rem;font-size:1.25rem;font-style:italic;color:var(--muted)}

.article-head .article-by{margin-top:1rem}

.article-body h2{margin-top:3rem;font-size:clamp(1.35rem,2.4vw,1.75rem)}

.article-body>h2:first-child{margin-top:0}

.article-body blockquote{margin-top:2.5rem;margin-bottom:2.5rem;padding:1.5rem 1.75rem;border-left:3px solid var(--river);background:rgba(39,75,82,.06);font-size:1.25rem;font-style:italic;line-height:1.4}

.article-body blockquote p+p{margin-top:.75rem}

.article-body .numbered{margin-top:2rem;margin-bottom:2rem;padding:0;list-style:none;display:grid;gap:1rem}

.article-body .numbered-item{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;margin:0;padding:1.5rem;border:1px solid var(--rule)}

.article-body .numbered-count{font-size:1.5rem;font-weight:700;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}

.article-body .numbered-label{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.article-body .numbered-heading{margin-top:.25rem;font-size:1.125rem;font-weight:700}

.article-body .numbered-label+p,.article-body .numbered-heading+p{margin-top:.5rem;color:var(--muted)}

.article-next{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}

.article-next-label{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.article-next a{display:inline-block;margin-top:.5rem;font-size:1.25rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.article-next a:hover{color:var(--rose-deep)}

.article-next p+p{margin-top:.5rem;color:var(--muted)}

/* The list at /articles/, grouped into the six parts the series was published
   in. Each one is a plate laid on the river, and the edge of the plate is what
   tells one part from the next — a band of colour across the top of it said the
   same thing twice.

   The scroll margin is for the part's own anchor: the header is sticky, and a
   heading linked to lands under it otherwise. */

.article-part{scroll-margin-top:var(--sticky-offset)}

/* The count stands in the left rail beside the part's name, the way every
   essay's name stands beside its title further down. It keeps its lower case
   where every other eyebrow on this site is set in caps, because that is how
   the logo is written: cu:sode, one:. */

/* The count and the part's name, in the left rail and the right — the same two
   columns an essay's row uses below. What keeps the two from being read as the
   same thing is size: a part's name is set half again as large as an essay's
   title, and it is the only heading on the page that is not a link. Set at the
   same size, readers reached for it. */

.article-part-count{font-family:var(--font-mark);font-weight:900;font-size:1.25rem;
  line-height:1.3;color:var(--rose-deep)}

.article-part h2{font-size:clamp(1.875rem,3.2vw,2.625rem)}

.article-part-intro{margin-top:1rem;color:var(--muted)}

/* Who wrote the essays, under the line saying why. */

.article-intro-by{margin-top:.75rem;font-weight:700}

/* One essay to a row, in the two columns every section of this site is set in:
   the name in the left rail, the title and what it is about on the right.

   Cards side by side were tried and did not hold. Titles run to one line or to
   three, so nothing across a row ever lined up; and with no picture left on
   them the cards were ragged boxes of type and little else. A row is what a
   list of essays is.

   The row is the link: the title carries it and the pseudo element spreads it
   over the whole row, so there is one link per essay for a screen reader to
   read out and the whole row answers a pointer. */

.article-rows{list-style:none;padding:0;margin:3rem 0 0}

.article-row{position:relative;margin:0;padding:1.5rem 0;border-top:1px solid var(--rule)}

.article-row:last-child{border-bottom:1px solid var(--rule)}

/* A row says it can be pressed by answering the pointer across its whole width,
   not only under the words.

   The wash reaches a little past the column on both sides, and it does that
   with two solid shadows rather than with padding: padding would move the grid
   columns, and the name in the rail has to stay in line with the count above
   it. A pseudo element behind the row was the first try and it disappeared —
   sent behind the row it goes behind the page's own background with it. */

.article-row{transition:background .15s ease,box-shadow .15s ease}

.article-row-name{font-family:var(--font-mark);font-weight:900;font-size:.9375rem;
  line-height:1.4;letter-spacing:.02em;color:var(--rose-deep)}

.article-row-title{font-size:clamp(1.1875rem,1.4vw,1.375rem);line-height:1.25}

.article-row-title a{text-decoration:none}

.article-row-title a::after{content:'';position:absolute;inset:0}

.article-row-title a:focus-visible{outline:none}

.article-row:focus-within{outline:var(--focus-ring);outline-offset:2px}

.article-row:hover .article-row-title{color:var(--rose-deep);text-decoration:underline;
  text-underline-offset:4px}

.article-row .article-subtitle{margin-top:.5rem;color:var(--muted)}

/* The two pages that list things stay white, and each part or category stands
   on a plate of the cream the start page's own sections are laid on. The plate
   is what groups the questions or the essays under it — on a white page with
   nothing but rules across it they read as one long stretch.

   A row lifts to white when the pointer is on it, which is the wash the other
   way round: on the cream it is the paler colour that stands out. */

.article-part,
.qa-group{background:var(--cream);
  padding:var(--pad-card) clamp(1.25rem,2.5vw,2.5rem)}

.article-part+.article-part{margin-top:1.5rem}

.article-row:hover{background:var(--white);
  box-shadow:-1rem 0 0 var(--white),1rem 0 0 var(--white)}

/* The name an essay opens with — one:one — set the way the wordmark at the foot
   of the page is: the width of the column, cut through the middle, and painted
   in one flat amber. The footer keeps the top of its letters; this keeps the
   bottom, and sits flush under the header so the header takes the rest. The
   height comes from the drawing's own proportions, whatever the name is. */

.article-label{max-width:var(--measure-wide);margin:0 auto;padding:0 1.5rem}

.article-label svg{display:block;width:100%;height:auto}

/**
 * The questions, in two families that do not touch.
 *
 * The .faq-* family is the ask bar — the AI question box. It is not on any page
 * at the moment; the block was lifted off the start page, not deleted, and the
 * whole of it is meant to come back. Do not read "no page uses this" as "this
 * is dead".
 *
 * The .pills / .qa-* family is /faq/, which is live and needs no JavaScript.
 */

.faq{background:var(--river);padding:clamp(4rem,8vw,7.5rem) 1.5rem}

.faq-inner{max-width:var(--measure-column);margin:0 auto}

.faq-head h2{color:var(--cream)}

.faq-head p{max-width:var(--measure-text);margin-top:1rem;color:var(--muted-on-dark);font-size:1.125rem}

.faq-ask{max-width:44rem;margin-top:2.5rem;padding:.5rem;background:var(--cream);scroll-margin-top:var(--sticky-offset)}

.faq-ask-row{display:flex;align-items:stretch;gap:.5rem}

.faq-ask:focus-within{outline:2px solid var(--pumpkin);outline-offset:3px}

.faq-input{flex:1;min-width:0;padding:.875rem 1rem;font-family:var(--font);font-size:1.125rem;color:var(--river);background:0 0;border:0}

.faq-input::placeholder{color:var(--muted)}

.faq-input:focus{outline:0}

.faq-ask-row .btn{flex-shrink:0}

.faq-exchange{margin-top:.5rem;padding:1.25rem 1rem 1rem;border-top:1px solid var(--rule);text-align:left}

.faq-a{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}

.faq-badge{display:grid;place-items:center;width:2.25rem;height:2.25rem;background:var(--river);color:var(--cream);font-size:.75rem;font-weight:700;letter-spacing:.05em}

.faq-a p+p{margin-top:.75rem}

.faq-note{margin-top:2rem;font-size:.875rem;color:var(--muted-on-dark)}

@media (max-width:768px){.faq{padding:3rem 1.5rem}.faq-ask{padding:.75rem}.faq-ask-row{flex-direction:column;gap:.75rem}.faq-ask-row .btn{width:100%;text-align:center}.faq-exchange{padding:1.25rem .25rem .25rem}.faq-a{grid-template-columns:1fr;gap:.75rem}}

.faq-warning{max-width:44rem;margin-top:1.25rem;padding:.875rem 1.125rem;border:1px solid rgba(254,243,236,.35);color:var(--cream);font-weight:600;text-align:left}

.faq-locked{max-width:44rem;margin-top:2.5rem;padding:2rem;background:var(--white);text-align:left}

.faq-locked h3{margin-bottom:.75rem}

.faq-locked p+p{margin-top:.75rem}

@media (max-width:768px){.faq-locked{padding:1.5rem}}

.faq-steps{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;padding:0;margin:0 0 1rem}

.faq-step{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:var(--muted)}

.faq-step::before{content:'';width:.5rem;height:.5rem;background:var(--muted);opacity:.6}

.faq-step[data-state=pending]{opacity:.45}

.faq-step[data-state=active]{color:var(--river)}

.faq-step[data-state=active]::before{background:var(--cream);opacity:1;animation:faq-pulse 1.1s ease-in-out infinite}

@keyframes faq-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.4}}

.faq-typing::after{content:'';display:inline-block;width:.4rem;height:1.05em;margin-left:.15rem;vertical-align:-.2em;background:var(--river);animation:faq-caret 1.05s steps(1) infinite}

@keyframes faq-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){.faq-step[data-state=active]::before,.faq-typing::after{animation:none}}

.faq-item-ask{display:block;width:100%;padding:.625rem 2.25rem .625rem .25rem;position:relative;font-family:var(--font);font-size:1rem;font-weight:600;line-height:1.4;text-align:left;color:var(--river);background:0 0;border:0;cursor:pointer;transition:color .2s ease}

.faq-item-ask::after{content:'\2192';position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1.25rem;font-weight:400;line-height:1;color:var(--muted);transition:transform .2s ease}

.faq-item-ask:hover{color:var(--rose-deep)}

.faq-item-ask:hover::after{transform:translate(.25rem,-50%)}

.faq-item-ask:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* Suggestions under the ask bar. They live inside the cream box, so they are
   set for a light ground rather than the dark section around it. */

.faq-suggest{margin-top:.5rem;padding:.75rem .75rem .25rem;border-top:1px solid var(--rule);text-align:left}

.faq-suggest-heading{margin-bottom:.25rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.faq-suggest ul{list-style:none;padding:0;margin:0}

.faq-suggest li+li{border-top:1px solid var(--rule)}

.faq-more{margin-top:1.5rem}

.faq-more a{color:var(--cream);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.faq-more a:hover{color:var(--pumpkin)}

/* The categories on /faq/, as links to the plates below.
 *
 * Each carries a colour of its own, and the same colour turns up on the hash in
 * front of its heading further down — which is what ties a link to the thing it
 * points at without either of them having to say so. Four colours for six
 * categories: they cycle, and no two that share one stand next to each other.
 */

.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}

.pill{display:inline-block;padding:.5rem 1rem;font-family:var(--font);font-size:.875rem;
  font-weight:700;color:var(--river);background:0 0;border:1px solid var(--rule-strong);
  cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}

.pill:hover{border-color:var(--accent)}

.pill:focus-visible{outline:var(--focus-ring);outline-offset:2px}

[data-accent="0"]{--accent:var(--amber)}

[data-accent="1"]{--accent:var(--rose)}

[data-accent="2"]{--accent:var(--pumpkin)}

[data-accent="3"]{--accent:var(--shamrock)}

.hash{color:var(--accent)}

/* Question and answer on /faq/: a light page, so none of the dark section's
   colours apply. Open and shut is the browser's own, which is why it still
   works with the script switched off. */

.qa-group h2{font-size:clamp(1.5rem,2.2vw,1.875rem)}

.qa-group-intro{margin-top:.5rem;color:var(--muted)}

.qa-list{list-style:none;padding:0;margin:1.5rem 0 0}

.qa-list li{margin:0;border-top:1px solid var(--rule)}

.qa-list li:last-child{border-bottom:1px solid var(--rule)}

.qa summary{padding:1rem 2.5rem 1rem 0;position:relative;font-weight:700;line-height:1.5;list-style:none;cursor:pointer}

.qa summary::-webkit-details-marker{display:none}

.qa summary::after{content:'+';position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;line-height:1;color:var(--muted)}

.qa[open] summary::after{content:'\2212'}

.qa summary:hover{color:var(--rose-deep)}

.qa summary:focus-visible{outline:var(--focus-ring);outline-offset:2px}

.qa-answer{padding:0 2.5rem 1.25rem 0;color:var(--muted)}

.qa-answer p+p{margin-top:.75rem}

.qa-answer a{text-decoration:underline;text-underline-offset:3px}

.qa-group{margin-top:1.5rem;scroll-margin-top:var(--sticky-offset)}

#faq-page-groups>.qa-group:first-child{margin-top:2.5rem}

/**
 * The card row — the component the start page wears three ways: a statement with
 * a portrait and no plate, beliefs drawn as bars, and an offer on a plate beside
 * the ask that follows from it. README.md carries the matrix of which
 * combinations of fields are meant.
 */

/* A row of cards. Three across is what it is drawn for; the columns are equal
   so the row reads as one thing, and they start at the top rather than
   stretching, because a short card padded out to match a long one is a box of
   air. Under the width three columns need, they fall under each other.

   The faces are white on the cream band and cream on a white one — the card has
   to stand off the ground it sits on, whichever way round that is. */

.cards{display:grid;grid-template-columns:repeat(var(--cards-cols,3),1fr);
  gap:clamp(1.5rem,2.6vw,2.5rem);
  align-items:stretch;list-style:none;padding:0;margin:0}

.card-panel{display:flex;flex-direction:column}

.card-panel-text{display:flex;flex-direction:column;flex:1}

/* Drawn rather than filled. A solid face carries weight the content does not
   need, and two of them side by side read as heavier than what is written on
   them; a line does the same work of saying where the card ends. The type comes
   up a step to take the room that gives back, and the heading drops from black
   to bold — at this size black was doing the shouting the fill used to do. */

.card-panel{margin:0;padding:var(--pad-card);background:0 0;
  border:1px solid var(--rule-strong);font-size:clamp(1rem,1.15vw,1.125rem)}

/* A card's title is an h2 when its row has no heading of its own and an h3 when
   it has, so that the page's headings descend without skipping. It is the same
   title either way, so it says so here rather than leaving it to the tag — an h2
   would otherwise arrive in the mark font, which is drawn in one weight and that
   weight is Black. */
.card-panel-title{font-family:var(--font);font-size:clamp(1.25rem,1.8vw,1.5rem);
  font-weight:700;line-height:1.3;letter-spacing:normal}

.card-panel-lead{margin-top:1rem;font-weight:700}

.card-panel ul{margin-top:1.5rem;padding-left:1.25rem}

.card-panel li{margin-bottom:.875rem}

.card-panel li:last-child{margin-bottom:0}

/* Written as `.card-panel ul.card-panel-points` and not as the class on its own:
   `.card-panel ul` above is a class plus an element and outranks a lone class,
   so the plain form lost and these points kept the bullet list's indent while
   the heading above them started at the padding. */

.card-panel ul.card-panel-points{list-style:none;padding-left:0}

.card-panel-points strong{display:block;font-weight:600}

.card-panel p+p,.card-panel ul+p{margin-top:1.25rem}

/* A heading over the row sits on its own line, not in the left rail: the cards
   below it already use the full width. */

.cards-head{margin-bottom:2rem}

@media (max-width:900px){
  .cards{grid-template-columns:1fr;gap:1rem}
}

/* One card can take the whole row, and when it does the rest share the line
   under it — the row is divided by the cards that are not full width, which the
   build counts and hands over as --cards-cols.

   A full-width card is two columns of its own: the portrait in a rail down the
   left, the prose beside it. That is what the extra width is for. Set at the
   same measure as the cards beside it, the prose would run to a line no one
   wants to read. */

.card-panel-wide{grid-column:1/-1;display:grid;
  grid-template-columns:minmax(8rem,1fr) 2.4fr;gap:clamp(2rem,4vw,4rem);
  align-items:start;
  /* No face under this one. It opens the section and is read as the page
     speaking; the cards below it are the things being listed, and a plate is
     what makes something a thing in a list. The extra room underneath is so the
     two of them start clear of it rather than looking dropped from it. */
  background:0 0;border:0;padding:0}

/* Room on whichever side the cards are. Opening a row it needs air under it;
   closing one — which is what a full-width card with a button is — it needs air
   above instead, and none trailing off the end of the section. */

.card-panel-wide:first-child{margin-bottom:clamp(2rem,4vw,3.5rem)}

.card-panel-wide:last-child{margin-top:clamp(2rem,4vw,3.5rem)}

/* The button that makes a card the row's call to action. Left where the words
   are, not centred: it is the end of a sentence, not a banner. */

.card-panel-cta{align-self:start;margin-top:clamp(1.25rem,2.5vw,1.75rem)}

/* A full-width card that asks rather than states: the words on the left, the way
   in beside them on the right. Nothing is stacked, so the ask and the answer to
   it are read in one movement of the eye rather than two.

   The button keeps its own width and the text takes the rest; both sit on the
   middle line, which is what stops a two-line ask from leaving the button
   hanging at the top of it. */

.card-panel-split{grid-template-columns:minmax(0,1fr) auto;align-items:center}

.card-panel-split .card-panel-cta{align-self:center;margin-top:0}

/* The other way of laying a row out: the cards in a column down one half, the
   full-width card in the other. Two halves, so the offer is read against the ask
   rather than under it.

   The full-width card spans as many rows as the column beside it makes — the
   build counts them, because a grid cannot see how many rows auto-placement is
   about to create. It centres on that column rather than sitting at the head of
   it: three boxes and one paragraph are never the same height, and the shorter
   of the two hanging from the top reads as unfinished.

   Its own halves fold here. There is no room in a half column for a paragraph
   and a button side by side, so the button goes back under the words. */

/* Beside the ask, the cards stop being cards. Three framed boxes stacked in a
   half column is three edges inside an edge, and the plate is already the edge
   that matters — so they are set as a list instead, the way the essays and the
   questions are: a rule between one and the next, and nothing around any of
   them. Rows sit tight against each other, which is what the row gap gives up;
   the columns keep theirs. */

/* Three fifths to the list, two to the ask. The list carries three rows of two
   lines each and the ask carries one paragraph, so an even split left the ask
   with room it had no use for. */

.cards-aside{grid-template-columns:3fr 2fr;row-gap:0}

.cards-aside .card-panel{grid-column:1}

.cards-aside .card-panel:not(.card-panel-wide){background:0 0;border:0;
  padding:clamp(1.125rem,2.2vw,1.5rem) 0;
  border-bottom:1px solid var(--rule)}

.cards-aside .card-panel:not(.card-panel-wide):first-child{
  border-top:1px solid var(--rule)}

/* Stretched to the rows it stands beside, and holding its two ends apart: the
   words start on the list's first rule and the button finishes on its last. What
   was centred sat inside the list's height without ever meeting it — the rules
   are the measure here, so the ask is set to them.

   Flex rather than grid for this one, because `margin-top:auto` on the button is
   what pushes the two ends apart, and it needs a column to do it in. */

.cards-aside .card-panel-wide{grid-column:2;grid-row:1 / span var(--cards-stack,1);
  align-self:stretch;margin:0;max-width:none;
  display:flex;flex-direction:column}

.cards-aside .card-panel-split{grid-template-columns:none}

/* The button takes the column and the foot of it. Filled that wide it stops
   being a word with a box around it and becomes the end of the ask, so the label
   centres — left in the corner of a bar that wide reads as a label that failed
   to fit. The auto margin above is what holds it down there. */

.cards-aside .card-panel-split .card-panel-cta{align-self:stretch;
  text-align:center;margin-top:auto}

/* One column, and the two halves become one after the other. The button gives up
   the foot of a height it no longer has — qualified inside .cards-aside because
   the rule that put it there is, and the shorter selector would lose to it and
   leave the button pinned to the words. */

@media (max-width:900px){
  .cards-aside{grid-template-columns:1fr}
  .cards-aside .card-panel,
  .cards-aside .card-panel-wide{grid-column:1;grid-row:auto}
  .cards-aside .card-panel-wide{margin-top:clamp(1.5rem,4vw,2.5rem)}
  .cards-aside .card-panel-split .card-panel-cta{margin-top:clamp(1.25rem,2.5vw,1.75rem)}

  .card-panel-split{grid-template-columns:1fr;align-items:start}
  .card-panel-split .card-panel-cta{align-self:start;margin-top:clamp(1.25rem,2.5vw,1.75rem)}
}

/* A whole block on one plate. The offer and the ask that follows from it are one
   thing, so they stand on one ground: the section keeps the cream and the page
   around it stays white. Its own padding replaces the section's, and the space
   that padding used to make between neighbours is given back as margin — the
   plate has edges now, and space inside an edge is not the same as space beside
   one. */

.cards-plate{margin-block:var(--rhythm-section);
  padding:clamp(2rem,4.5vw,4rem) clamp(1.75rem,4vw,3.5rem);
  background:var(--cream)}

/* On a plate the colour is the plate's, and the cards on it stay drawn — with a
   darker hairline, because the one used on cream all but vanishes against
   something this bright.

   Loose, there is no plate to carry it, so each card takes the colour itself and
   gives up its outline: a card that is filled has an edge already, and a line
   around a filled card is a second edge saying the same thing. */

.cards-plate.cards-tone-yellow{background:var(--emoji)}

.cards-plate.cards-tone-yellow .card-panel{border-color:rgba(39,75,82,.35)}

.cards-tone-yellow:not(.cards-plate) .card-panel{background:var(--emoji);border:0}

/* A card that carries its own colour. Taller than it needs to be for the words
   in it, with the icon at the head and the words at the foot, so the space
   between them is the card rather than a gap in it.

   Ink and not river for the type. River holds against the yellow but falls to
   4.0 on the orange and 2.7 on the rose; ink reads at 12.6, 8.0 and 5.4 across
   the three, which is one colour of text for all of them instead of one that
   works on some.

   Corners come off, but barely — the palette sets the radius to nothing
   everywhere else, and this is a card asking to be picked up, not a change of
   mind about the shape of the site. */

.card-panel-toned{color:var(--ink);border:0;border-radius:.75rem;
  min-height:clamp(17rem,26vw,22rem);
  padding:clamp(1.75rem,3vw,2.25rem)}

/* The two ends of the card, held apart: the name at the head and what it means
   at the foot. The height between them is the card, not a gap in it. */

.card-panel-toned .card-panel-text{flex:1;justify-content:space-between;
  gap:clamp(1.5rem,3vw,2.5rem)}

.card-panel-tone-yellow{background:var(--emoji)}

.card-panel-tone-amber{background:var(--amber)}

.card-panel-tone-rose{background:var(--rose)}

/* The same cream the call to action stands on. On a white page it is the
   quietest of the three, which is what makes the row read as a scale rather than
   as three shouts. */

.card-panel-tone-cream{background:var(--cream)}

/* Painted through rather than drawn in. The file is two colours — a dark blue
   and a pale grey — and the pale half disappears against a fill this bright, so
   the shape is taken as a mask and one flat ink is put behind it. Same device
   the wordmark at the foot of the page uses. */

.card-panel-icon{display:block;
  width:clamp(2.25rem,3.6vw,3rem);height:clamp(2.25rem,3.6vw,3rem);
  background:var(--ink);
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain}



/* The call to action, boxed — for a block that is not itself on a plate. The page
   runs white from here to the footer, so the ask cannot be told from the page by
   the ground it stands on: it carries the cream itself instead, and the white
   around it is what makes it a thing on the page rather than more of it. */

.card-panel-boxed{background:var(--cream);
  padding:clamp(1.75rem,3.5vw,3rem) clamp(1.75rem,3.5vw,3.25rem)}

/* A card with no title is a statement, and it is set at the size of one: large
   enough to be the thing the reader starts on, with the portrait beside it
   saying who is speaking. Headings and leads are what the rest of the page is
   made of, and this is the one place that stops. */

.card-panel-wide .card-panel-text{font-size:clamp(1.25rem,1.9vw,1.625rem);
  line-height:1.5}

.card-panel-wide .card-panel-text p+p{margin-top:1.25rem}

/* Square, like the portrait in the promise card and like everything else here:
   the palette sets the corner radius to nothing on purpose. */

.card-portrait-pic{width:112px;height:112px;object-fit:cover}

.card-portrait-name{margin-top:1.25rem;font-weight:700}

.card-portrait-role{margin-top:.25rem;color:var(--muted);font-size:.875rem}

@media (max-width:900px){
  .card-panel-wide{grid-template-columns:1fr}
}

/* The beliefs, drawn rather than listed: a bar to a line, each one a step
   warmer and a step longer than the one above it. The length is the figure —
   there is no number to print, and printing one would invite the question of
   what it measured.

   Amber over the cream at a quarter, a little under a half, and two thirds. The
   warm colours at full strength put river blue below the contrast it needs — the
   rose reads at 2.7 against it, and no amount of good intention makes that
   legible. Tinted, the three run 7.2, 6.2 and 5.3.

   No frame, because the bars are the shape. It keeps the top padding so its
   heading sits on the same line as the heading of the card beside it, and gives
   up the other three so the bars run the width of the column and the last one
   ends level with that card's lower edge. */

.card-panel-bars{border:0;padding:var(--pad-card) 0 0}

/* `margin-top:auto` in a flex column pushes what follows to the foot of it, so
   the bars sit on the card's lower edge and whatever height is left over falls
   between them and the heading. That gap is the card breathing, not a mistake.

   Each bar is its own height and they stand 1em apart. Written as
   `.card-panel li.card-bar` because `.card-panel li` above is a class plus an
   element and would otherwise keep adding its own margin under each one — the
   same near-miss that held these points indented earlier.

   The right end is round and the left is square: the bar starts at the card's
   edge, where a corner belongs, and ends where it has reached, where one does
   not. Extra room on that side so the last word clears the curve. */

.card-panel ul.card-bars{margin-top:auto;display:flex;flex-direction:column;gap:1em}

.card-panel li.card-bar{margin:0;padding:1rem 2rem 1rem 1.25rem;width:100%;
  background:rgba(241,145,84,.65);border-radius:0 999px 999px 0}

/* Qualified the same way as the rule above them. A class plus a pseudo-class is
   still only two classes, and the rule that sets the shared look is two classes
   plus an element — so written plainly these lost, and all three bars came out
   the length and the tone of the last one. */

.card-panel li.card-bar:nth-child(1){width:60%;background:rgba(241,145,84,.25)}

.card-panel li.card-bar:nth-child(2){width:80%;background:rgba(241,145,84,.45)}

/* Under the width the row needs, the cards stop sharing an edge — a bar stepped
   to fill a height nothing is beside it any more is just a stretched box. */

/* On one column the steps close up. The bars are read against each other, not
   against a column of empty page, and at 60 per cent of a phone the first one's
   label wraps to three lines — the step stops reading as a step and starts
   reading as a shorter card. */

@media (max-width:900px){
  .card-panel ul.card-bars{margin-top:1.5rem;gap:.75rem}
  .card-panel li.card-bar{padding-right:1.5rem}
  .card-panel li.card-bar:nth-child(1){width:84%}
  .card-panel li.card-bar:nth-child(2){width:92%}
}

/**
 * The lifecycle figure: five columns, and a circuit behind them that is both the
 * line you see and the path the arrows drive.
 */

/* --- the lifecycle figure -------------------------------------------------

   Laid down and held still while it turns. A tall track with a sticky pane in
   it: scrolling through the track does not move the pane, it moves the figure
   inside the pane, so the page appears to hold until the lap has run. No wheel
   is listened for and no key is swallowed — this is what scroll-jacking looks
   like and is not what it is.

   --lap is the one number to tune. Two windows of scrolling is a lap that turns
   without dawdling; longer makes it statelier, shorter makes it a flicker.

   The lap is spent in two halves. --forward is the first, and the balls light
   and the chevrons travel on it. --back is the second, and the token rides the
   return on that. They overlap slightly on purpose: the return leaves before the
   last ball is quite done, so the figure is never briefly still. */

/* The figure moves on the scroll, and the section is what reports how far it has
   come — as --p, nought to one, written by the block's own script.

   It used to be pinned: a track two windows tall with a sticky pane in it, so the
   page appeared to hold until the lap had run. That reads as a lock even when it
   is not one, so it came out, and the two wrappers it needed went with it. */

.lifecycle{--p:0;padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(4rem,8vw,7rem);width:100%}

.lifecycle-lead{max-width:44rem;margin-top:1.25rem;
  font-size:var(--size-lead);line-height:1.5}

/* Five columns on white, told apart by a line rather than by a fill, with a rule
   over them and a rule under. Between the two rules is the run; outside them are
   the two flows the lead line names, one going each way.

   --n is the count, handed over from the template. The stylesheet has no way to
   count children, and the arrows are placed a segment at a time. */

.lifecycle-figure{--n:5;
  position:relative;margin-top:clamp(2rem,4vw,3.5rem);
  /* Room above and below for the runs, which is what the circuit is inset by. */
  padding-block:clamp(2rem,3.5vw,3rem)}

/* Over the circuit and opaque, which is what hides its two turns. */

.lifecycle-stages{position:relative;z-index:1;background:var(--white);
  list-style:none;padding:0;margin:0;
  display:flex;align-items:stretch;
  border-top:1px solid var(--rule-grid);
  border-bottom:1px solid var(--rule-grid)}

.lifecycle-stage{margin:0;flex:1 1 0;min-width:0}

.lifecycle-stage+.lifecycle-stage{border-left:1px solid var(--rule-grid)}

.lifecycle-column{height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:.25rem;
  min-height:clamp(9rem,17vw,13rem);
  padding:clamp(1rem,2vw,1.5rem);text-align:center}

.lifecycle-column-name{font-family:var(--font);font-weight:700;
  font-size:clamp(.875rem,1.2vw,1.0625rem);letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2}

.lifecycle-column-note{font-size:.8125rem;color:var(--muted)}

/* The circuit: the line you see and the path the arrows drive, the same shape
   doing both jobs.

   It is a rounded rectangle whose two sides stand at the middle of the first
   column and the middle of the last — 50%/n in from each end, the count coming
   from the template because a stylesheet cannot count children. The columns are
   opaque and sit over it, so those sides are hidden and a lap turns down into
   the customer, runs back beneath the row and comes up out of the intent. There
   is no start to the run and no end: only where each arrow happens to be.

   offset-path takes the containing block's border box, so the ring the arrows
   follow is this element's own border — change the radius or the inset and the
   driving line changes with it, with nothing to keep in step by hand. */

.lifecycle-circuit{position:absolute;top:0;bottom:0;
  left:calc(50% / var(--n));right:calc(50% / var(--n));
  border:2px solid var(--flow-line);
  border-radius:clamp(1rem,2vw,1.75rem)}

.lifecycle-arrow{position:absolute;
  width:.5rem;height:.5rem;
  border-right:2px solid var(--amber);border-top:2px solid var(--amber);
  offset-path:border-box;offset-rotate:auto;offset-anchor:50% 50%;
  /* The chevron is drawn pointing along its own x, and offset-rotate turns that
     to face the way the path is going — so it leans into the bends without
     being told about them. */
  transform:rotate(45deg)}

/* Where the ring cannot be followed, there is nothing to show: a line of
   arrowheads stacked on one spot reads as a fault rather than as a flow. The
   circuit itself stays, and the figure is still the figure. */

@supports not (offset-path: border-box){
  .lifecycle-arrow{display:none}
}

/* The figure takes the width it is given. It was held in when it was a column of
   balls with a loop swung round them; a row of five reads better the wider it
   is, and the section's own measure is the only limit it needs. */

/* What the lower run of the circuit carries, said in words. It stands in the
   right half of the section, under the figure, where the lead over the figure
   holds the left — the two of them are the page's own two directions.

   Set from the left inside that half, not against the right edge: ragged-left
   prose is read a line at a time by hunting for where each one starts, and the
   position on the page is what says which half this belongs to.

   Smaller than the lead above it, because it is a caption on a drawing and not
   the sentence the section opens with. */

.lifecycle-note{width:min(100%,38rem);margin-left:auto;
  margin-top:clamp(3rem,6vw,5.5rem)}

.lifecycle-note h3{font-size:.875rem;letter-spacing:.12em;text-transform:uppercase}

/* Set at the same size as the lead over the figure. The two are the section's
   two halves of one sentence — one before the drawing and one after it — and
   read as a pair rather than as a line and its footnote. The measure widens with
   the type so the line length stays where it was. */

.lifecycle-note p{margin-top:.875rem;line-height:1.5;
  font-size:var(--size-lead);color:var(--muted)}

/* One column, and the figure turns with it. The boxes stack and the circuit
   stands on end: its two ends now pass behind the first box and the last, and
   the runs that were over and under the row are down the right of it and up the
   left. The lap is the same lap and the arrows drive it the same way — what
   changes is which way round the ring is.

   The room for those runs comes from the figure's own padding: it gives up the
   space it had above and below and takes it at the sides instead, and the boxes
   are inset by it while the circuit is not. */

@media (max-width:900px){
  .lifecycle{--p:0;padding-top:clamp(3.5rem,8vw,5rem);padding-bottom:clamp(3.5rem,8vw,5rem)}
  .lifecycle-figure{padding-block:0;padding-inline:clamp(2rem,9vw,3.5rem)}
  .lifecycle-circuit{top:calc(50% / var(--n));bottom:calc(50% / var(--n));
    left:0;right:0}
  /* A side to each of them as well as a rule between: laid down, the row's own
     ends closed it off, and standing up it needs the same two edges to read as a
     flight of steps rather than as a stack of loose lines. */
  .lifecycle-stages{flex-direction:column;
    border-left:1px solid var(--rule-grid);
    border-right:1px solid var(--rule-grid)}
  .lifecycle-stage+.lifecycle-stage{border-left:0;
    border-top:1px solid var(--rule-grid)}
  .lifecycle-column{min-height:0;text-align:left;align-items:flex-start}
  /* The full width with everything else once there is one column of it. */
  .lifecycle-note{width:100%;margin-left:0}
}