/* /claude101, the prompt library for the Claude 101 session at Stone & Chalk.

   Forty people on phones, hunting for the right prompt and copying it. Three
   earlier versions failed that in the same direction: they kept growing. Big
   cream panels, display type at poster scale, the thread motif repeated until
   it stopped meaning anything. Everything reads as generated at that size,
   because generated pages are always the ones set two steps too large.

   The fix was the scale, not the ground, which the dark version proved by
   changing both at once. So the type stays at reference-document scale and the
   stack stays tight, and the page comes back to cream, 28-08-2026.

   The colour is in the bands. Bone, sand, bone, then gold and berry closing the
   page, each with a strand colour running its rule and its numerals. The rope
   crosses between them and runs down the rail, where it untwists in proportion
   to how far through the session the reader has got. */

/* Anchors clear the header and the press bar, both fixed above the content. */
.cl-sec[id] { scroll-margin-top: calc(var(--header-h) + var(--banner-h) + .4rem); }
@media (max-width: 1149.98px) {
  /* The pill strip is sticky under the press bar, so an anchor has to clear it
     as well or tapping a pill hides the heading behind the strip. */
  .cl-sec[id] { scroll-margin-top: calc(var(--header-h) + var(--banner-h) + 5.2rem); }
}

/* --------------------------------------------------------------- the ground */

/* The whole page is an ink surface, so the site's own on-ink rules apply to it
   rather than being re-declared element by element. */
/* Eight tokens carry the whole page. A band declares what it is once and every
   rule underneath follows, which is what lets the same markup sit on cream, on
   gold and on berry without a stack of per-band overrides. */
.cl-page, .cl-foot {
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --hair: var(--line);
  --hi: var(--berry-deep);
  --accent: var(--berry);
  --card: var(--paper);
  --card-hi: #fff;
  --dot: rgba(26,20,24,.2);
  /* White, so the masthead and the rail read as paper rather than as a yellow
     field. /claude101 uses a gold wash here; this page does not. */
  --wash: #FFFFFF;
}
.cl-page, .cl-foot { background: var(--bone); color: var(--fg); }
.cl-page h1, .cl-page h2, .cl-page h3 { color: var(--fg); }
.cl-page a { color: var(--accent); }
.cl-page a:hover { color: var(--hi); }
.cl-page :focus-visible { outline-color: var(--accent); }

/* The press bar, thinner than the site's own. This page opens on a headline
   rather than a full-screen hero, so the bar is a credential line under the
   header rather than a band in its own right. */
.press { padding-block: .3rem; }
.press-title { letter-spacing: .12em; }
.press-row img { height: 13px; max-width: 92px; margin-inline: clamp(.9rem, 2vw, 1.6rem); }
.press-row .pl-abc { height: 22px; }
.press-row .pl-newscomau { height: 16px; }
.press-row .pl-safm { height: 15px; }
.press-row .pl-salife { height: 13px; }
.press-row .pl-advertiser { height: 11px; }
.press-row .pl-the-age { height: 11px; }
.press-row .pl-bna { height: 9px; }

/* --------------------------------------------------------------- the shell */

.cl-page { --rail: 236px; --banner-h: 32px; }

@media (min-width: 1150px) {
  .cl-page { padding-left: var(--rail); }
  .cl-rail {
    position: fixed;
    left: 0;
    top: calc(var(--header-h) + var(--banner-h));
    bottom: 0;
    width: var(--rail);
    padding: 1.4rem 1rem 1rem clamp(1.25rem, 2.4vw, 2rem);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .9rem;
    align-items: stretch;
    background: var(--wash);
    border-right: 1px solid var(--hair);
    z-index: 30;
  }
}

/* --------------------------------------------------------------- the opening */

/* The masthead and the rail are one field, not two panels that happen to touch.
   They meet at the top left corner and the wash carries down the whole left
   edge behind the rope, so the page reads as a document with a margin rather
   than as a headline sitting on cream. Full gold did the same job and shouted
   while doing it. */
.cl-open {
  background: var(--wash);
  padding-block: clamp(1.9rem, 3.8vw, 3rem) clamp(1.7rem, 3.2vw, 2.5rem);
}
.cl-hero { align-items: center; row-gap: 1rem; }
.cl-hero-main { grid-column: 1 / span 9; }
.cl-hero h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  line-height: 1.02;
  letter-spacing: -.038em;
}
.cl-hero .mask > * { animation: mask-up .9s var(--ease) backwards; }
.cl-hero .mask:nth-of-type(2) > * { animation-delay: .09s; }

.cl-by {
  font-family: var(--display);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.018em;
  line-height: 1.4;
  color: var(--accent);
  margin-top: .8rem;
  max-width: 44ch;
}

/* --------------------------------------------------------------- the rail */

.cl-rail-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; align-content: start; }
.cl-rail-list a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 0;
  min-height: 44px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.cl-rail-list a i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
  flex: none;
  transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cl-page .cl-rail-list a:hover { color: var(--hi); transform: translateX(2px); }
.cl-rail-list a:hover i { background: var(--fg-muted); }
.cl-page .cl-rail-list a.is-here { color: var(--fg); }
.cl-rail-list a.is-here i {
  background: var(--accent);
  transform: scale(1.7);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* The reading thread. Two copies of the same rope stacked: a dim one showing
   the whole session, and the real one drawn over it to wherever the reader has
   got. It runs the full height of the screen, so the tangle at the top and the
   three settled lanes at the bottom are on screen at once and the untwisting is
   the thing you watch. */
.cl-thread { width: 38px; height: 100%; min-height: 0; position: relative; --p: 0; }
.cl-thread svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cl-thread path { fill: none; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* The rail sits on the wash rather than on bone now, so the untrodden rope
   needs a little more weight to read as a rope at all. */
.cl-thread-ghost path { stroke: rgba(26,20,24,.17); }

/* Registered so the browser interpolates it as a number. Left unregistered it
   is a text substitution, the dash lengths jump between scroll frames, and the
   rope stutters instead of being pulled. */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
/* The easing lives on the element that owns --p, not on the paths. Animating an
   inherited custom property on three children is three transitions chasing one
   value, and a background tab leaves them stranded. */
.cl-thread { transition: --p .4s var(--ease); }
/* pathLength normalises every strand to 1, so one number drives all three.
   Written as a dash of --p then a gap of the whole path rather than as an
   offset: a bare number in stroke-dashoffset is read as pixels here and the
   strand comes out drawn at every value. */
.cl-thread-live path { stroke-dasharray: var(--p) 1; }
.cl-thread-live path:nth-child(2) { stroke-dasharray: calc(var(--p) - .018) 1; }
.cl-thread-live path:nth-child(3) { stroke-dasharray: calc(var(--p) - .036) 1; }
@media (prefers-reduced-motion: reduce) { .cl-thread { transition: none; } }

/* The same progress on a phone, where there is no room for a rope. */
.cl-mobrail { display: none; }
.cl-bar { height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.cl-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold) 46%, var(--coral));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .35s var(--ease);
}

/* --------------------------------------------------------------- the bands */

/* Bone and sand for the first three, then the two colour bands closing the
   page. The tone is the strand colour the band runs on: it draws the rule, the
   section numeral and the numeral on every prompt, and it is the colour the
   panel borrows on hover and on copy. Teal and coral are deepened here: the
   counter and the label word are both set at 12px, and at full strength
   neither colour clears 4.5:1 on sand. The ropes keep the real ones. */
.cl-sec {
  --tone: var(--berry);
  --ground: var(--bone);
  position: relative;
  padding-block: clamp(1.5rem, 2.8vw, 2.4rem) clamp(1.8rem, 3.4vw, 2.8rem);
}
.cl-sec[data-ground='sand'] { --ground: var(--sand); background: var(--sand); }
.cl-sec[data-tone='teal']  { --tone: #1E7674; }
.cl-sec[data-tone='coral'] { --tone: #A8443A; }

/* The gold band. Artefacts is where the session stops explaining and starts
   building, so it gets the loudest ground on the site. Berry is the only text
   colour that holds on gold, which is the pairing the site already uses. */
.cl-sec[data-ground='gold'] {
  --ground: var(--gold);
  --tone: var(--berry);
  --fg: var(--ink);
  --fg-muted: #5C4A2E;
  --hair: rgba(26,20,24,.2);
  --hi: var(--berry-deep);
  --card: rgba(255,255,255,.58);
  --card-hi: rgba(255,255,255,.82);
  --dot: rgba(26,20,24,.3);
  background: var(--gold);
}

/* The take-home closes on berry, where gold goes back to being a text colour
   and the card is darkened rather than lightened, because a film of bone over
   berry lifts the ground and takes gold under 4.5:1. */
.cl-sec.is-ink {
  --ground: var(--berry);
  --tone: var(--gold);
  --fg: #fff;
  --fg-muted: rgba(255,255,255,.84);
  --hair: rgba(255,255,255,.22);
  --hi: #fff;
  --accent: var(--gold);
  --card: rgba(26,20,24,.18);
  --card-hi: rgba(26,20,24,.26);
  --dot: rgba(255,255,255,.34);
  background: var(--berry);
}

/* The band opens on a rule running the content width with the section number
   sitting on it and punching through. The ground has already changed, so this
   is the only marker needed. */
.cl-sec-head { position: relative; margin-bottom: clamp(1rem, 2vw, 1.5rem); padding-top: 1.1rem; }
.cl-sec-head::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--tone) 0 22%, var(--hair) 60%);
}
.cl-num {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  background: var(--ground);
  padding-right: .55rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--tone);
  margin: 0;
  max-width: none;
}
.cl-index {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  background: var(--ground);
  padding-left: .7rem;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--tone);
}
.cl-sec-head h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -.032em;
  line-height: 1.1;
}

.cl-stack { display: grid; gap: .7rem; }

/* The rope crossing between one part of the session and the next. The strands
   are the halo colour of whatever ground they draw over, so the divider takes
   the ground of the band above it rather than sitting in a gap of its own. */
.cl-divider {
  height: clamp(58px, 6vw, 86px);
  background: var(--bone);
  --wv-ground: var(--bone);
  --wv-card: var(--bone);
}
.cl-sec[data-ground='sand'] + .cl-divider { background: var(--sand); --wv-ground: var(--sand); --wv-card: var(--sand); }
.cl-sec[data-ground='gold'] + .cl-divider { background: var(--gold); --wv-ground: var(--gold); --wv-card: var(--gold); }
/* Beaten on specificity by the ground rules above it if written as one class. */
.cl-sec + .cl-divider.is-to-ink { background: var(--berry); --wv-ground: var(--berry); --wv-card: var(--berry); }

/* --------------------------------------------------------- one prompt */

/* A raised ink surface rather than a card in the poster sense. The hairline is
   what separates it from the band, and the numeral hangs off its left edge so
   the stack reads as a numbered document. */
.cl-prompt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 1.05rem clamp(1rem, 1.8vw, 1.4rem) .85rem clamp(1.9rem, 2.6vw, 2.6rem);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.cl-prompt:hover {
  border-color: var(--tone);
  background: var(--card-hi);
  transform: translateY(-1px);
}
.cl-prompt::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  background: var(--tone);
  border-radius: 10px 10px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.cl-prompt:hover::before, .cl-prompt:focus-within::before { transform: scaleX(1); }

.cl-mark {
  position: absolute;
  top: .95rem;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--tone);
  margin: 0;
  max-width: none;
  transition: transform .3s var(--ease);
}
.cl-prompt:hover .cl-mark { transform: translateX(-56%); }
/* A word cannot hang off the edge the way two digits can, so it stays inside. */
.cl-mark.is-word {
  position: static;
  transform: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .13em;
  line-height: 1.4;
  color: var(--tone);
  margin-bottom: .35rem;
}
.cl-prompt:hover .cl-mark.is-word { transform: none; }

.cl-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.022em;
  line-height: 1.25;
  color: var(--fg);
  max-width: 40ch;
}
.cl-prompt.is-ext .cl-title { font-size: 1rem; }

/* What the prompt is for, above the prompt. Somebody scanning for the right one
   reads this line and stops; nobody should have to read four hundred words of
   prompt to find out it was the wrong prompt. */
.cl-note {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--fg-muted);
  margin-top: .3rem;
  max-width: 68ch;
}

.cl-body {
  position: relative;
  margin-top: .8rem;
  padding-top: .75rem;
  border-top: 1px solid var(--hair);
}
.cl-text {
  font-family: var(--body);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 74ch;
}

/* Clipped long prompts. The default is open, so the text is all there with the
   script blocked or the page printed, and js/claude-101.js closes them. */
.cl-prompt.is-clipped .cl-text {
  max-height: 9.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.cl-more {
  position: relative;
  display: none;
  margin-top: .55rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: -.01em;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.cl-more::before { content: ''; position: absolute; inset: -14px -10px; }
.cl-page .cl-more:hover { color: var(--hi); border-bottom-color: var(--hi); }
.cl-prompt.is-clipped .cl-more,
.cl-prompt.is-open .cl-more { display: inline-block; }

.cl-tip {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--fg-muted);
  margin-top: .7rem;
  padding-left: .75rem;
  border-left: 1px solid var(--hair);
  max-width: 66ch;
}

.cl-do {
  display: flex;
  align-items: baseline;
  gap: .4rem 1rem;
  flex-wrap: wrap;
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--hair);
  max-width: none;
}
.cl-copy {
  position: relative;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: none;
  padding: 0 0 2px;
  font-size: .875rem;
  color: var(--accent);
  cursor: pointer;
}
.cl-copy::after { background: var(--accent); }
.cl-page .cl-copy:hover { color: var(--hi); }
/* The drawn rule is the design, so the hit area grows behind the text rather
   than as padding that would push the rule away from it. */
.cl-copy::before { content: ''; position: absolute; inset: -13px -10px; }

.cl-said {
  font-family: var(--mono);
  font-size: .75rem;
  min-width: 7ch;
  letter-spacing: .05em;
  color: var(--fg-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cl-prompt.is-copied .cl-said { opacity: 1; transform: none; color: var(--tone); }
.cl-prompt.is-copied { border-color: var(--tone); }

/* Copy lands as a strand passing across the panel rather than a border that
   blinks. The sweep is a gradient on an overlay, so nothing moves and the text
   underneath stays selectable the whole time. */
.cl-prompt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 0 38%,
    color-mix(in srgb, var(--tone) 26%, transparent) 46%,
    color-mix(in srgb, var(--tone) 10%, transparent) 54%,
    transparent 62% 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
}
.cl-prompt.is-copied::after { animation: cl-sweep .8s var(--ease); }
@keyframes cl-sweep {
  from { opacity: 1; background-position: 130% 0; }
  to   { opacity: 1; background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) { .cl-prompt.is-copied::after { animation: none; } }

/* The extension is an aside to the prompt above it, so it steps in from the
   margin and loses the raised surface. */
.cl-prompt.is-ext {
  background: none;
  border-style: dashed;
  margin-left: clamp(0px, 4vw, 3rem);
}
.cl-prompt.is-ext:hover { background: var(--card); }

/* --------------------------------------------------------- the squiggle */

/* The one hand-drawn mark left on the page, pointing at the first copy control,
   because nobody should have to be told twice what this page is. */
.cl-arrow {
  width: clamp(104px, 9vw, 132px);
  margin: -.3rem 0 -.2rem 3rem;
  pointer-events: none;
  animation: cl-nudge 3.4s ease-in-out 2.4s infinite;
}
.cl-arrow .rope-draw path { stroke: var(--tone); }
.cl-arrow-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: -.01em;
  color: var(--tone);
  margin: .05rem 0 0 1.1rem;
  max-width: none;
}
@keyframes cl-nudge {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, 4px); }
}
@media (prefers-reduced-motion: reduce) { .cl-arrow { animation: none; } }

/* --------------------------------------------------------- who ran it */

.cl-who-band { border-top: 1px solid var(--hair); }
.cl-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: clamp(1.3rem, 2.4vw, 2rem);
}
.cl-share { display: flex; align-items: center; gap: .8rem; }
.cl-share img {
  width: 96px;
  height: 96px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: #FFFEFB;
  flex: none;
}
.cl-when {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .09em;
  color: var(--fg-muted);
  line-height: 1.8;
  max-width: none;
}
.cl-bio {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 999px 10px 10px 999px;
  padding: .5rem 1.1rem .5rem .5rem;
  max-width: 28rem;
}
.cl-bio img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.cl-bio p { margin: 0; max-width: none; }
.cl-bio-name { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: -.02em; line-height: 1.2; color: var(--fg); }
.cl-bio-role { font-size: .8125rem; line-height: 1.4; color: var(--fg-muted); margin-top: .1rem; }
.cl-bio-links { display: flex; flex-wrap: wrap; gap: 1.5rem .8rem; margin-top: .35rem; }
.cl-bio-links a {
  position: relative;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.cl-bio-links a::before { content: ''; position: absolute; inset: -15px -8px; }

.cl-foot { border-top: 1px solid var(--hair); padding: .85rem 0; }
.cl-foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cl-foot p { margin: 0; font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: var(--fg-muted); max-width: none; }
.cl-foot a { position: relative; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
/* A 17px line of text is not a tap target, and the drawn rule under it is the
   design, so the hit area grows behind the text rather than as padding. */
.cl-foot a::before { content: ''; position: absolute; inset: -14px -10px; }

/* --------------------------------------------------------------- narrow */

@media (max-width: 1149.98px) {
  /* No column for the rope, so it stands down and the sections take a scrolling
     strip of pills with the same progress under them. */
  .cl-rail { display: none; }
  .cl-mobrail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--banner-h));
    z-index: 40;
    background: var(--wash);
    border-bottom: 1px solid var(--hair);
    padding-block: .55rem;
  }
  .cl-mobrail .cl-bar { margin-bottom: .45rem; }
  .cl-rail-list { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
  .cl-rail-list::-webkit-scrollbar { display: none; }
  .cl-rail-list li { flex: none; }
  .cl-rail-list a {
    border: 1px solid var(--hair);
    background: var(--paper);
    border-radius: 999px;
    padding: .25em .9em;
    min-height: 44px;
  }
  /* No rail column, so no margin for the numeral to hang into. */
  .cl-prompt { padding-left: clamp(.95rem, 3.6vw, 1.3rem); }
  .cl-mark {
    position: static;
    transform: none;
    font-size: 1.4rem;
    margin-bottom: .3rem;
  }
  .cl-prompt:hover .cl-mark { transform: none; }
  .cl-prompt.is-ext { margin-left: 0; }
}

@media (max-width: 1000px) {
  .cl-arrow { display: none; }
}

@media (max-width: 700px) {
  .cl-hero-main { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .cl-bio { border-radius: 10px; }
  .cl-share img { width: 84px; height: 84px; }
}

/* Cream prints as white, so most of the page carries over. The two colour
   bands do not: gold and berry both drop out and take their text colours with
   them, which is what these rules put back. */
@media print {
  .cl-rail, .cl-mobrail, .cl-arrow, .cl-do, .cl-more, .cl-divider, .site-header, .press { display: none; }
  .cl-page { padding-left: 0; background: none; color: var(--text); }
  .cl-page *, .cl-foot, .cl-foot p, .cl-foot a { color: var(--text); }
  .cl-num, .cl-index, .cl-mark, .cl-mark.is-word, .cl-by { color: var(--berry); }
  .cl-note, .cl-tip, .cl-when, .cl-bio-role { color: var(--text-mid); }
  .cl-sec, .cl-sec.is-ink, .cl-sec[data-ground='sand'], .cl-sec[data-ground='gold'], .cl-open, .cl-mobrail, .cl-foot { background: none; }
  .cl-sec-head::before { background: var(--line); }
  .cl-prompt, .cl-sec.is-ink .cl-prompt, .cl-bio { background: none; border-color: var(--line); break-inside: avoid; }
  .cl-body, .cl-tip { border-color: var(--line); }
  .cl-prompt.is-clipped .cl-text { max-height: none; -webkit-mask-image: none; mask-image: none; }
}

/* ------------------------------------------------- /annabelle only, masthead */

/* Belle's page opens on a co-brand lockup rather than a title alone, so the
   two marks and the bio card share the top of the gold wash. */
.ab-mast { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; margin-bottom: clamp(1.2rem, 2.4vw, 2rem); }
.ab-lockup { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.1rem); flex-wrap: wrap; }
.ab-brand { display: flex; align-items: center; gap: .6rem; }
.ab-brand-name { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.ab-brand-name em { font-style: normal; color: var(--berry); }
.ab-mark { width: clamp(46px, 4.6vw, 58px); height: auto; }
.ab-cross { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1; color: var(--fg-muted); }

/* Her own two marks. They are supplied for a light ground, so they sit on a
   paper chip rather than straight on the wash. */
.ab-client { display: flex; align-items: center; gap: .85rem; }
.ab-client img { height: auto; }
.ab-client i { width: 1px; height: 20px; background: var(--hair); flex: none; }
.ab-lm { width: clamp(46px, 4.2vw, 56px); }
.ab-ab { width: clamp(32px, 3vw, 40px); }

.ab-bio { display: flex; align-items: center; gap: .7rem; background: #FFFEFB; border: 1px solid var(--hair); border-radius: 999px 12px 12px 999px; padding: .4rem .95rem .4rem .4rem; max-width: 25rem; }
.ab-bio img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.ab-bio p { margin: 0; max-width: none; }
.ab-bio-name { font-family: var(--display); font-weight: 700; font-size: .92rem; letter-spacing: -.02em; line-height: 1.2; }
.ab-bio-role { font-size: .75rem; line-height: 1.4; color: var(--fg-muted); margin-top: .1rem; }
.ab-bio-links { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin-top: .2rem; }
.ab-bio-links a { font-size: .72rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

/* ------------------------------------------------- /annabelle only, the two ways in */

.ab-kicker { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--accent); margin-bottom: .4rem; }

/* The band rule paints every link the accent colour, which on a solid berry
   button is berry text on berry. Buttons opt back out. */
.cl-page a.btn { color: #fff; }
.cl-page a.btn:hover { color: #fff; }
.cl-page a.btn-ghost, .cl-page a.btn-ghost:hover { color: var(--ink); }
.cl-sec.is-ink a.btn { background: var(--gold); color: var(--ink); }
.cl-sec.is-ink a.btn:hover { background: #FFD07A; color: var(--ink); }
.ab-cta { display: flex; flex-wrap: wrap; gap: .6rem .7rem; margin-top: clamp(1rem, 1.8vw, 1.4rem); max-width: none; }
.ab-cta .btn { padding: .72em 1.25em; font-size: .9375rem; }
.ab-cta .btn-ghost { background: #FFFEFB; border-color: var(--hair); color: var(--ink); }
.ab-cta .btn-ghost:hover { background: #fff; color: var(--berry-deep); }

/* ------------------------------------------------- /annabelle only, the review */

/* The one ask on the page, so it takes the whole width of the band: the words
   on the left, the squiggle pointing across, the code on the right. */
/* The ask keeps the gold card from /yo, but on a cream band rather than a gold
   one, so the masthead wash and the ask do not merge into a single slab. */
.ab-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 clamp(1rem, 2.6vw, 2.2rem);
  background: linear-gradient(168deg, #FFE9B8 0%, #FFD98A 100%);
  border-color: #F0BE5B;
}
.ab-review:hover { background: linear-gradient(168deg, #FFE9B8 0%, #FFD98A 100%); border-color: #E0A93C; }
.ab-review .cl-body { border-top: 0; padding-top: 0; margin-top: .5rem; }
.ab-review .btn { margin-top: .9rem; }
.ab-review-qr { display: flex; align-items: flex-end; gap: .7rem; }
.ab-review .cl-arrow { margin: 0; width: clamp(96px, 8vw, 124px); }
.ab-review-qr img { width: 92px; height: 92px; border: 1px solid var(--hair); border-radius: 6px; background: #FFFEFB; flex: none; }
.ab-review-qr span { font-size: .8rem; font-weight: 500; color: var(--fg-muted); line-height: 1.4; }

/* ------------------------------------------------- /annabelle only, the rise */

/* The site's own reveal is armed and disarmed before this page's body exists,
   so the injected blocks carry their own. The class is added by script, which
   means the page reads in full if the script never arrives. */
.ab-rise { opacity: 0; transform: translateY(18px); }
.ab-rise.is-up { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .ab-rise, .ab-rise.is-up { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------- /annabelle only, the recap */

/* The session actions grouped the way the meeting notes had them, so twenty
   items read as five things rather than one wall. Each category takes a
   strand colour and a drawn mark. */
.ab-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; align-items: start; }
.ab-cat {
  --tone: var(--berry);
  --tone-soft: rgba(140,44,84,.12);
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--tone);
  border-radius: 10px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.ab-cat:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -26px rgba(26,20,24,.55); }
.ab-cat[open] { box-shadow: 0 14px 38px -28px rgba(26,20,24,.6); }
.ab-cat[data-cat="teal"] { --tone: #1E7674; }
.ab-cat[data-cat="coral"] { --tone: #A8443A; }
.ab-cat[data-cat="gold"] { --tone: #8A6206; }
.ab-cat[data-cat="quiet"] { --tone: var(--fg-muted); }
/* The summary row is the whole click target: mark, name, how many sit inside,
   and the plus that turns into a minus. */
.ab-cat summary { display: flex; align-items: center; gap: .6rem; padding: clamp(.8rem, 1.5vw, 1.05rem) clamp(.9rem, 1.6vw, 1.2rem); cursor: pointer; list-style: none; }
.ab-cat summary::-webkit-details-marker { display: none; }
.ab-cat summary svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--tone); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ab-cat summary h3 { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.022em; color: var(--tone); margin: 0; }
.ab-cat summary:focus-visible { outline: 2px solid var(--tone); outline-offset: -3px; border-radius: 9px; }
.ab-cat-count { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--fg-muted); margin-left: auto; }

.ab-toggle { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--hair); background: var(--ground); position: relative; flex: none; transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.ab-toggle i { position: absolute; inset: 50% 30%; height: 2px; margin-top: -1px; background: var(--tone); transition: transform .4s var(--ease), background-color .3s var(--ease); }
.ab-toggle i:last-child { transform: rotate(90deg); }
.ab-cat summary:hover .ab-toggle { border-color: var(--tone); box-shadow: 0 0 0 5px var(--tone-soft); }
.ab-cat[open] .ab-toggle { background: var(--tone); border-color: var(--tone); }
.ab-cat[open] .ab-toggle i { background: #fff; }
.ab-cat[open] .ab-toggle i:last-child { transform: rotate(180deg); }

/* A shut card gives no sign that it opens, so its plus knocks a few times when
   the card first arrives on screen, then leaves the reader alone. */
.ab-cat.in:not([open]) .ab-toggle { animation: ab-knock 2.2s var(--ease) .6s 3; }
.ab-cat:hover .ab-toggle, .ab-cat[open] .ab-toggle { animation: none; }
@keyframes ab-knock {
  0%, 62%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--tone-soft); border-color: var(--hair); }
  70% { transform: scale(1.12); box-shadow: 0 0 0 7px var(--tone-soft); border-color: var(--tone); }
  78% { transform: scale(1); box-shadow: 0 0 0 12px rgba(0,0,0,0); border-color: var(--tone); }
  86% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--tone-soft); border-color: var(--tone); }
}
@media (prefers-reduced-motion: reduce) { .ab-cat.in:not([open]) .ab-toggle { animation: none; } }

.ab-cat-body { padding: 0 clamp(.9rem, 1.6vw, 1.2rem) clamp(.95rem, 1.7vw, 1.25rem) clamp(2.3rem, 3.4vw, 2.8rem); animation: ab-open .45s var(--ease); }
@keyframes ab-open { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .ab-cat-body { animation: none; } }
.ab-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ab-cat li { position: relative; padding-left: 1rem; font-size: .9rem; line-height: 1.5; }
.ab-cat li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1.5px; background: var(--tone); border-radius: 1px; }
/* An open card with six items reads better in two columns than one long run. */
@media (min-width: 900px) {
  .ab-cat[data-cat="berry"] ul, .ab-cat[data-cat="coral"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
}

.ab-lede { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -.026em; line-height: 1.35; color: var(--fg); max-width: 46ch; margin-bottom: 1rem; }
/* The two lists are wildly different lengths, so the cards stretch to match
   rather than leaving a short stub next to a tall one. */
.ab-cols { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: .7rem; align-items: stretch; }
.ab-col { background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: clamp(1rem, 1.8vw, 1.35rem); }
.ab-col h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.022em; color: var(--tone); margin: 0 0 .7rem; }
.ab-col ol { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.ab-col li { font-size: .9rem; line-height: 1.5; }
.ab-col li::marker { color: var(--tone); font-family: var(--mono); font-size: .75rem; }
/* Two items on the left against twenty on the right left a column of dead
   cream, so the long list runs in two columns once there is room for it. */
/* display:grid on the list would swallow the column count, so it goes back to
   block flow here and the spacing moves onto the items. */
@media (min-width: 1150px) {
  .ab-col:last-child ol { display: block; columns: 2; column-gap: 1.6rem; }
  .ab-col:last-child li { break-inside: avoid; margin-bottom: .5rem; }
}

/* ------------------------------------------------- /annabelle only, narrow */

@media (max-width: 900px) {
  .ab-cats { grid-template-columns: minmax(0, 1fr); }
  .ab-cols { grid-template-columns: minmax(0, 1fr); }
  .ab-review { grid-template-columns: minmax(0, 1fr); }
  .ab-review .cl-arrow { display: none; }
  .ab-review-qr { margin-top: 1rem; }
}
@media (max-width: 700px) {
  .ab-mast { flex-direction: column; align-items: flex-start; }
  .ab-bio { max-width: none; width: 100%; }
  .ab-cta { grid-template-columns: minmax(0, 1fr); }
  .ab-cta .btn { width: 100%; }
}