/* =============================================================================
   TOPS CULINARY SAUCES — this product's sections only.

   Loaded AFTER common.css, so anything here wins on ties and no !important
   is ever needed to override a shared rule.

   Use the cs- prefix on every class. All products share common.css, so an
   unprefixed .hero or .card would collide with the others.
   ========================================================================== */

/* This product's palette. Set these once and reference them below rather
   than repeating hex codes through the file. */
[class^="cs-"],
[class*=" cs-"] {
  --cs-red:      #E8202A;
  --cs-red-deep: #A5121A;
  --cs-accent:   #FFD84D;
  --cs-ink:      #1B1B1F;
}

/* Delete once the first real section is in */
.cs-placeholder {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  min-height: 60svh;
  padding: 2rem var(--gutter);
  text-align: center;
  font-family: var(--font-display);
  color: var(--cs-red);
}

.cs-placeholder h1 { font-size: clamp(1.8rem, 8vw, 3rem); }

/* =============================================================================
   CUSTARD POWDER — sections 01 to 04
   Append to products/custard-powder/product.css.
   ========================================================================== */

[class^="cp-"],
[class*=" cp-"] {
  --cp-red:    #C4141B;
  --cp-deep:   #8E0A10;
  --cp-yellow: #FFE05A;
  --cp-cream:  #FFF6EC;
  --cp-ink:    #1B1B1F;
}
.site-header {
    z-index: 9999;
}
/* The page-wide wave artwork. Declared on the product page's own <main> so
   it sits behind every section without any of them needing to know.

   Colour first, then the image: the page is never transparent even if the
   file is slow or missing. */
.cp-page {
    background-color: #FFFFFF;
    position: relative;
    z-index: 999;
}

.cp-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(images/bg-shape.webp);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
    opacity: 0.2;
    pointer-events: none;
    z-index: -1;
}

/* Sections sit on that artwork, so their own backgrounds must be either
   transparent or deliberate. These two are deliberate. */

/* =============================================================================
   01  HERO
   ========================================================================== */

.cp-hero {
  /* --cp-h-ratio MUST match the scene export. Wrong, and cover() crops the
     image to a different shape and the copy drifts off its mark. */
  --cp-h-scene: url('images/custard-bnr.webp');
  --cp-h-ratio: 4 / 5;

  --cp-h-x: 2%;               /* copy block: left  */
  --cp-h-y: 6%;               /* copy block: top   */
  --cp-h-w: 62%;              /* copy block: width — keep at or below 100% */

  --cp-h-size: 8.5cqw;
  --cp-h-mark: 0.5em;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cp-deep);
}

.cp-hero__stage {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: var(--cp-h-ratio);
    background-image: var(--cp-h-scene);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 454px;
    margin-top: 63px;
}
.cp-hero__copy {
  position: absolute;
  left: var(--cp-h-x);
  top: var(--cp-h-y);
  width: var(--cp-h-w);
  z-index: 2;
}

.cp-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--cp-h-size);
  font-weight: 800;
  line-height: 1.05;
  color: #FFFFFF;
}
 
/* position: relative is the important one. The marks are absolutely
   positioned, and without it they would anchor to .cp-hero__copy — so every
   offset would be measured from the whole copy block rather than from the
   line the mark belongs to, and re-tuning one line would move the others. */
.cp-hero__line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  letter-spacing: 0.03em;
}
 
/* The step down the block. em, so the offsets scale with the type. */
.cp-hero__line--a { font-size: 48px; }
.cp-hero__line--b {
    font-size: 42px;
    margin-left: 1.1em;
    margin-top: -8px;
}
.cp-hero__line--c {
    font-size: 18px;
    margin-left: 1.4em;
    margin-top: 0.50em;
}
.cp-hero__line--d { font-size: 18px; margin-left: 1.6em; }
 
/* ---- Ornaments ------------------------------------------------------------
   Absolute, so they can sit outside the flex row without pushing the words
   off centre. Every offset is in em and measured from the line, thanks to
   the position: relative above.
   ------------------------------------------------------------------------- */
 
.cp-hero__mark {
  position: absolute;
  width: 1.1em;
  height: auto;
  /* No alt text sprawl while the file loads */
  color: transparent;
  font-size: 0;
  pointer-events: none;
    width: 50px;
}
 
/* scale, not transform: scaleX(). They are separate properties, so this
   cannot overwrite a translate or rotate set on the same element later. */
.cp-hero__mark--a {
    right: 6px;
    top: -8px;
    scale: -1 1;
}
.cp-hero__mark--b {
    left: -20px;
    top: -2px;
}
.cp-hero__mark--dot { width: 0.55em; }
 
/* The dots sit either side of the last line */
.cp-hero__line--d .cp-hero__mark--dot:first-child {
    left: 54px;
    top: 0;
     transform: scaleX(-1); 
}
.cp-hero__line--d .cp-hero__mark--dot:last-child  { right: 54px; top: 0;}
 
/* ---- The bend -------------------------------------------------------------
   The script splits a line into one span per character and sets --bend-y on
   each. Nothing here needs to know how many characters there are.
 
   translate, not transform: the two are separate properties now, so a
   transform applied to the same span later — a hover, a GSAP tween — cannot
   cancel the bend, and the bend does not have to be repeated inside that
   transform to survive it.
 
   The value is unitless and multiplied by 1em here, so the curve scales with
   the type rather than staying a fixed pixel drop.
   ------------------------------------------------------------------------- */
 
.cp-hero__words {
  display: inline-flex;
  white-space: nowrap;
}
 
.cp-hero__words > span {
  display: inline-block;
  translate: 0 calc(var(--bend-y, 0) * 1em);
}
.cp-hero__mark--dot {
    width: 14px;
}

.cp-hero__sub {
    margin: 0.2em 0 0 32px;
    font-family: var(--font-display);
    font-size: calc(var(--cp-h-size)* 0.46);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--cp-yellow);
}

@media (min-width: 48em) {
  .cp-hero {
    --cp-h-scene: url('images/cp-hero-wide.webp');
    --cp-h-ratio: 1500 / 1600;   /* MUST match the landscape export */
    --cp-h-x: 8%;
    --cp-h-y: 8%;
    --cp-h-w: 42%;
    --cp-h-size: 6cqw;
  }
}

@supports not (container-type: inline-size) {
  .cp-hero__title { font-size: clamp(1.5rem, 8.5vw, 3.5rem); }
}
/* =============================================================================
   FLAVOUR RANGE
   ========================================================================== */

.cp-flavours {
  padding-block: clamp(1.25rem, 6vw, 2.5rem) 0;
}

.cp-flavours__inner,
.cp-recipe__inner,
.cp-dishes__inner {
  width: 100%;
  max-width: var(--container, 75rem);
  margin-inline: auto;
  padding-inline: clamp(0.9rem, 3vw, 2rem);
}

.cp-flavours__eyebrow,
.cp-recipe__eyebrow,
.cp-dishes__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 3.5vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-ink);
}

.cp-flavours__title,
.cp-recipe__title,
.cp-dishes__title {
  margin: 0.15em 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 6vw, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--cp-red);
}

.cp-flavours__sub,
.cp-dishes__sub {
  margin: 0.2em 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 4vw, 1rem);
  font-weight: 700;
  color: var(--cp-ink);
}


/* =============================================================================
   WAVED BAND
   ========================================================================== */

.cp-flavours__band {
  position: relative;
  margin-top: clamp(0.75rem, 3.5vw, 1.25rem);
  padding-block: clamp(1.5rem, 7vw, 3rem);
  background: #C4141B;
}

.cp-wave {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(0.9rem, 3.5vw, 1.75rem);
  fill: #FFFFFF;
  pointer-events: none;
}

.cp-wave--top {
  top: -10px;
}

.cp-wave--bottom {
  bottom: -11px;
  transform: scaleY(-1);
}


/* =============================================================================
   FLAVOUR GRID
   ========================================================================== */

.cp-flavours__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: var(--container, 75rem);
  margin-inline: auto;
  padding: 0 clamp(0.9rem, 3vw, 2rem);
  list-style: none;
  margin-top: -28%;
  z-index: 999;
  position: relative;
}

.cp-flavours__inner {
  margin-bottom: 25%;
}


/* Last odd card centered */
.cp-flavours__grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: min(
    100%,
    calc(50% - clamp(0.25rem, 1.25vw, 0.5rem))
  );
  margin-inline: auto;
}


/* =============================================================================
   FLAVOUR CARD
   ========================================================================== */

.cp-flavour {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  padding: 0;
  border-radius: clamp(8px, 2.5vw, 12px);
  background: var(--cp-cream);
  border: 1px solid #C4141B;
}


/* IMPORTANT:
   Anchor is now the grid container.
   This makes order work again.
*/
.cp-flavour > a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(0.3rem, 0.5vw, 0.6rem);

  width: 100%;
  min-height: 160px;
  padding: clamp(0.4rem, 2vw, 0.75rem);

  color: inherit;
  text-decoration: none;
}


/* Background shape */
.cp-flavour::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(images/bg-shape.webp) top center / 100% auto repeat-y;
  opacity: 0.18;
  pointer-events: none;
  z-index: 9;
}


/* =============================================================================
   FLAVOUR IMAGE
   ========================================================================== */

.cp-flavour__shot {
  order: 2;
  position: absolute;
  width: 140px;
  right: -21px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.cp-flavour__shot img {
  width: 100%;
  height: auto;
  display: block;
}


/* =============================================================================
   FLAVOUR NAME
   ========================================================================== */

.cp-flavour__name {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 3.8vw, 1.05rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--cp-red);
  position: relative;
  z-index: 999;
}

.cp-flavour__note {
  display: block;
  margin-top: 0.2em;
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-ink);
}
/* =============================================================================
   03  EASY TO MAKE
   ========================================================================== */
.cp-recipe {
    padding: 24px 0px;
}
.cp-recipe__grid {
  display: grid;
  /* minmax(0,...) matters: without it a column refuses to shrink below its
     content, and the longest step would push the third card off screen */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 1rem);
  margin: clamp(0.75rem, 3.5vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
}
 
.cp-step {
  --cp-s-red:  #C4141B;
  --cp-s-wave: clamp(0.5rem, 2.2vw, 0.9rem);   /* how tall each wave sits */
 
  display: grid;
  /* Two rows fixed by content, so every disc sits on one line and every
     strip starts on another however uneven the wording is */
  grid-template-rows: auto 1fr;
  align-content: start;
  justify-items: center;
 
  /* No padding. The strip has to reach both edges, and any padding here
     would leave a white margin either side of it. */
  padding: 0;
  overflow: hidden;           /* keeps the strip inside the rounded corners */
 
  border: 1.5px solid var(--cp-s-red);
  border-radius: clamp(8px, 2.5vw, 12px);
  background: #FFFFFF;
  text-align: center;
}
 
/* ---- Icon block -------------------------------------------------------------
   Carries the space the card gave up, so the disc keeps its breathing room
   while the strip below runs full width.
   ------------------------------------------------------------------------- */
 
.cp-step__disc {
    display: grid;
    place-items: center;
    width: clamp(4.5rem, 22vw, 5.5rem);
    aspect-ratio: 1;
    margin: clamp(0.8rem, 3.5vw, 1.35rem) 0 clamp(0.6rem, 2.8vw, 1rem);
    border-radius: 50%;
    background: var(--cp-s-red);
}
.cp-step__icon {
  width: 82%;
  height: auto;
  /* No alt text sprawl while the file loads */
  color: transparent;
  font-size: 0;
}
 
/* ---- The strip ---------------------------------------------------------------
   Solid red, with a wave sitting on each edge. The waves are red on
   transparent and the strip's own red fills everything between them, so all
   three read as one shape.
 
   align-self: stretch, so a two-line caption and a one-line caption in the
   same row give strips of equal height.
   ------------------------------------------------------------------------- */
 
.cp-step__strip {
    position: relative;
    align-self: stretch;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 6px 6px;
    background: var(--cp-s-red);
}
.cp-step__wave {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: var(--cp-s-wave);
  pointer-events: none;
}
 
/* -1px on each, so no hairline of card colour shows where the wave meets the
   strip — some engines round the two edges to different subpixels. */
.cp-step__wave--top { top: -4px; }
 

 
.cp-step__text {
  /* Above the waves, which are absolutely positioned over the strip */
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 4vw, 0.9rem);
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  text-wrap: pretty;          /* avoids a single word on the last line */
}
 
/* ---- Narrow phones ------------------------------------------------------------ */
 
@media (max-width: 26em) {
  .cp-step { --cp-s-wave: 0.45rem; }
}
 

/* =============================================================================
   04  WAYS TO USE IT
   ========================================================================== */

.cp-dishes { padding-block: clamp(1.25rem, 6vw, 2.5rem); }

.cp-dishes__grid {
  display: grid;
  /* minmax(0,...) matters: without it a column refuses to shrink below its
     content, and the longest caption would push the layout wider than the
     screen */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 2.5vw, 1rem);
  margin: clamp(0.75rem, 3.5vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
}
 
.cp-dish {
    --cp-d-red: #C4141B;
    --cp-d-wave: clamp(0.6rem, 2.6vw, 1.1rem);
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
    border-radius: clamp(8px, 2.5vw, 12px);
    background: #FFFFFF;
    box-shadow: 0 8px 20px -14px rgba(27, 27, 31, 0.35);
    border: 1px solid #C4141B;
}
.buy {
    
    background: transparent;
}
 
/* A fixed ratio, so four cards align whatever their photographs measure */
.cp-dish__shot { aspect-ratio: 4 / 3; }
 
.cp-dish__shot img {
  width: 100%;
  height: 100%;
  /* cover, so a portrait photograph fills the tile rather than letterboxing.
     The tile decides the shape, not the file. */
  object-fit: cover;
  display: block;
}
 
/* ---- The strip ---------------------------------------------------------------
   Solid red with the wave sitting on its top edge. The wave is red on
   transparent and the strip's own red fills below it, so the two read as one
   shape — and the photograph shows through the troughs.
 
   The wave overlaps the photo rather than being clipped by it, because both
   are children of the card and the strip is the later sibling.
   ------------------------------------------------------------------------- */
 
.cp-dish__strip {
  position: relative;         /* the wave anchors to this */
  display: grid;
  place-items: center;
  /* Top padding clears the wave, or a cap-height letter lands in a trough */
  padding:12px 6px;
  background: var(--cp-d-red);
}
 
.cp-dish__wave {
  position: absolute;
  left: 0;
  right: 0;
  /* -1px so no hairline of the photograph shows where the wave meets the
     strip — some engines round the two edges to different subpixels */
  top: -8px;
  display: block;
  width: 100%;
  height: var(--cp-d-wave);
  pointer-events: none;
}
 
.cp-dish__name {
  /* Above the wave, which is absolutely positioned over the strip */
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 4vw, 0.95rem);
  font-weight: 800;
  line-height: 1.3;
  color: #FFFFFF;
  text-align: center;
  text-wrap: pretty;          /* avoids a single word on the last line */
}
 
/* ---- Wider screens ------------------------------------------------------------
   Four across. The wave gets a little taller with the cards.
   ------------------------------------------------------------------------- */
 
@media (min-width: 48em) {
  .cp-dishes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =============================================================================
   WIDER SCREENS
   ========================================================================== */

@media (min-width: 48em) {
  .cp-flavours__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* In three columns nothing is left alone on a row, so the centring rule
     is switched off rather than fighting the layout */
  .cp-flavours__grid > :last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }

  .cp-dishes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}




/* --- CP FACTS -------------------------------------------------------------
   Custard Powder accordion. Built on <details>. No JavaScript.

   Same structure as tk-facts, prefixed cp- so the two never collide even if
   they end up in one stylesheet.

   ON THE OPENING ANIMATION

   A <details> element cannot be transitioned by ordinary means: the browser
   flips its content between rendered and not-rendered, and there is no
   height to interpolate between. The two rules at the bottom of this file
   use `interpolate-size` and `::details-content`, which exist precisely to
   solve that. Where they are unsupported the panel simply appears — the
   accordion works identically, only without the slide.

   ON THE COLOUR

   The accent is brand red, matching every other product. If custard is ever
   given its own warmer identity, changing --cp-accent, --cp-accent-deep,
   --cp-line and --cp-tint at the top is the whole job — nothing below
   hardcodes a colour. A custard-yellow set would be roughly:
     --cp-accent: #E5A200;  --cp-accent-deep: #8A5E00;
     --cp-line: #F2E3BE;    --cp-tint: #FFFBF0;
   ------------------------------------------------------------------------- */

.cp-facts {
  --cp-accent:      #E8202A;
  --cp-accent-deep: #A5121A;
  --cp-ink:         #231208;
  --cp-body:        #5A4436;
  --cp-line:        #EFD9DA;
  --cp-tint:        #FFF6F6;

  padding-block: clamp(1.75rem, 8vw, 3.5rem);
}

.cp-facts__inner {
  width: 100%;
  /* Narrower than the page. This is the one section people read line by
     line, and past about 70 characters the eye starts losing its place on
     the carriage return. */
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: clamp(0.9rem, 4vw, 2rem);
}

.cp-facts__title {
  margin: 0 0 clamp(1rem, 4.5vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--cp-accent);
}

.cp-facts__list {
  display: grid;
  gap: clamp(0.4rem, 2vw, 0.6rem);
}

/* ---- One fact --------------------------------------------------------------- */

.cp-fact {
  overflow: hidden;
  border: 1.5px solid var(--cp-line);
  border-radius: clamp(10px, 3vw, 14px);
  background: #FFFFFF;
  transition: border-color var(--dur-fast, 180ms) var(--ease, ease),
              box-shadow var(--dur-fast, 180ms) var(--ease, ease);
}

.cp-fact[open] {
  border-color: var(--cp-accent);
  box-shadow: 0 10px 26px -18px rgba(165, 18, 26, 0.6);
}

/* ---- The question ------------------------------------------------------------ */

.cp-fact__q {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 3vw, 1rem);
  padding: clamp(0.75rem, 3.4vw, 1.1rem) clamp(0.9rem, 4vw, 1.35rem);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.7vw, 1.15rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--cp-ink);
  cursor: pointer;
  /* Stops a double-tap selecting the heading instead of opening the panel */
  user-select: none;
  transition: background-color var(--dur-fast, 180ms) var(--ease, ease),
              color var(--dur-fast, 180ms) var(--ease, ease);
}

/* The default disclosure triangle, removed in both syntaxes: WebKit needs
   the pseudo-element, everything else honours list-style. */
.cp-fact__q::-webkit-details-marker { display: none; }
.cp-fact__q { list-style: none; }
.cp-fact__q::marker { content: ''; }

.cp-fact[open] .cp-fact__q { color: var(--cp-accent); }

@media (hover: hover) {
  .cp-fact__q:hover { background: var(--cp-tint); }
}

/* Keyboard focus lands on the summary, so the ring belongs there */
.cp-fact__q:focus-visible {
  outline: 3px solid var(--cp-accent);
  outline-offset: -3px;
}

/* ---- The chevron mark ---------------------------------------------------------
   Two bars drawn with pseudo-elements, tipped toward each other to form a V.
   Opening rotates the whole thing 180 degrees so it points up. Cheaper and
   sharper at every size than swapping two icon files, and it inherits the
   summary's colour for free.
   ------------------------------------------------------------------------- */

.cp-fact__mark {
  position: relative;
  flex: none;                 /* or a long question squashes it */
  margin-left: auto;          /* pins it to the right edge */
  width: clamp(0.85rem, 3.6vw, 1.1rem);
  aspect-ratio: 1;
  color: var(--cp-accent);
  transition: rotate var(--dur-base, 320ms) var(--ease, ease);
}

.cp-fact__mark::before,
.cp-fact__mark::after {
  content: '';
  position: absolute;
  top: 42%;
  width: 62%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Left half tips down, right half tips up — together they form the V */
.cp-fact__mark::before { left: 1px;  rotate: 45deg;  transform-origin: left center; }
.cp-fact__mark::after  { right: 2px; rotate: -45deg; transform-origin: right center; }

/* Open: the whole chevron flips to point up */
.cp-fact[open] .cp-fact__mark { rotate: 180deg; }

/* ---- The answer ---------------------------------------------------------------- */

.cp-fact__a {
  padding: 0 clamp(0.9rem, 4vw, 1.35rem) clamp(0.85rem, 3.6vw, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 3.4vw, 1rem);
  font-weight: 600;
  /* Generous, because these run several lines and are read in one pass */
  line-height: 1.65;
  color: var(--cp-body);
}

.cp-fact__a p { margin: 0 0 0.8em; text-wrap: pretty; }
.cp-fact__a p:last-child { margin-bottom: 0; }

.cp-fact__a em { font-style: italic; }

/* ---- The dessert list ----------------------------------------------------------- */

.cp-fact__dl { margin: 0; }

.cp-fact__dl dt {
  margin-top: 0.7em;
  font-weight: 800;
  color: var(--cp-accent);
}

.cp-fact__dl dt:first-child { margin-top: 0; }

/* Indented, so the definition reads as belonging to the term above it */
.cp-fact__dl dd {
  margin: 0.15em 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--cp-line);
}

/* ---- Smooth open ----------------------------------------------------------------
   `interpolate-size: allow-keywords` lets height animate to and from `auto`,
   which is otherwise impossible. `::details-content` is the box holding
   everything after the summary — the thing that actually needs to grow.

   Both are recent. Everywhere else the panel appears instantly, which is
   what a <details> has always done, so nothing is lost.
   ------------------------------------------------------------------------- */

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .cp-fact::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height var(--dur-base, 320ms) var(--ease, ease),
                opacity var(--dur-base, 320ms) var(--ease, ease),
                content-visibility var(--dur-base, 320ms) allow-discrete;
  }

  .cp-fact[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-fact::details-content,
  .cp-fact[open]::details-content { transition: none; }
  .cp-fact__mark { transition: none; }
}