/** Shopify CDN: Minification failed

Line 257:0 Expected "*/" to terminate multi-line comment

**/
/* CAROL · article page styles.
   Serves the article template (sections/carol-article.liquid) and every article body:
   the same .cs-* / .cf-* stylesheet the bodies embed, recovered as one file so the
   duplicated copy can be stripped out of body_html.
   Fonts come from the theme ('Roobert Regular', 'Pitch Sans Semibold' in
   assets/carolbike-base.css) - do not re-embed them here.
   Type is px, never rem: the theme sets html { font-size: 62.5% }. */

/* ==========================================================================
   CAROL "Get Fitter" — a faithful rebuild of the layout live at
   carolbike.com/science/get-fitter/, measured off that page:
   column 1134px, H1 50/62.5 -1px, lede 28/36, body 18/25, tag pills
   14/23 on the hairline rgba(21,21,21,.145) at radius 50px, media at 16px,
   keep-reading cards on lavender #B4A0FF with the 12px 0 0 0 folder tab.
   Type is px, never rem: the storefront theme sets html { font-size: 62.5% }
and a rem scale would render at 62.5% of these sizes.
   Everything is scoped to .carol-sci and every class is cs- prefixed, so the
   theme cannot restyle this page and this page cannot restyle the theme.
   ========================================================================== */

/* The only rule outside the scope: the hero bleeds with 100vw, which counts a
   classic scrollbar. `clip` drops the overshoot without making a scroll
   container, so a sticky theme header keeps working. */
body { overflow-x: clip; }
.carol-sci {
  --cs-black: #000000; --cs-paper: #FEFEFA; --cs-lavender: #B4A0FF;
  --cs-hairline: rgba(21, 21, 21, 0.145);
  --cs-col: 1134px; --cs-gutter: clamp(20px, 4vw, 48px);

  margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw;
  font-family: 'Roobert Regular', "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; line-height: 25px; letter-spacing: 0.36px;
  color: var(--cs-black); background: var(--cs-paper);
  -webkit-font-smoothing: antialiased; padding-bottom: 80px;
}
.carol-sci *, .carol-sci *::before, .carol-sci *::after { box-sizing: border-box; }
.carol-sci img { display: block; max-width: 100%; height: auto; }
.carol-sci ::selection { background: #E1FF37; color: #141414; }
.carol-sci :focus-visible { outline: 2px solid #2A4EEF; outline-offset: 2px; }
.carol-sci .cs-col { max-width: calc(var(--cs-col) + 2 * var(--cs-gutter)); margin-inline: auto; padding-inline: var(--cs-gutter); }
/* Article header */
.carol-sci .cs-head { padding-top: 60px; }
.carol-sci .cs-kicker { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 21px; letter-spacing: 0.42px; }
.carol-sci .cs-kicker a[href] { color: var(--cs-black); text-decoration: none; }
.carol-sci .cs-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.carol-sci .cs-kicker .cs-bar { width: 1px; height: 14px; background: var(--cs-hairline); }
.carol-sci .cs-read { font-family: 'Pitch Sans Semibold', "SF Mono", monospace; font-weight: 600; text-transform: uppercase; }
.carol-sci h1 {
  margin: 20px 0 0; font-weight: 400; font-size: 50px; line-height: 62.5px;
  letter-spacing: -1px; color: var(--cs-black);
}
.carol-sci .cs-lede { margin: 15px 0 0; max-width: 689px; font-size: 28px; line-height: 36px; letter-spacing: normal; }
.carol-sci p { margin: 0; }
.carol-sci sub { font-size: 0.7em; }
.carol-sci .cs-share { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 14px; line-height: 21px; letter-spacing: 0.42px; }
.carol-sci .cs-share a[href] { display: inline-flex; color: var(--cs-black); transition: opacity 100ms cubic-bezier(.25,.1,.25,1); }
@media (hover: hover) and (pointer: fine) { .carol-sci .cs-share a:hover { opacity: 0.55; } }
.carol-sci .cs-share svg { width: 18px; height: 18px; fill: currentColor; }
.carol-sci .cs-updated { margin-top: 12px; font-size: 18px; line-height: 25px; }
/* Hero — near full-bleed, 16px inset each side on the live page, 16:9, r16 */
.carol-sci .cs-hero { margin-top: 50px; padding-inline: 17px; }
.carol-sci .cs-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
/* Prose */
.carol-sci .cs-prose { padding-top: 60px; }
.carol-sci .cs-prose p + p { margin-top: 25px; }
.carol-sci .cs-prose a { color: var(--cs-black); text-decoration: underline; text-underline-offset: 3px; }
/* Video — column width, 16:9, r16, caption 14/21 under */
.carol-sci .cs-video { margin-top: 50px; }
.carol-sci .cs-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.carol-sci .cs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.carol-sci .cs-caption { margin-top: 15px; font-size: 14px; line-height: 21px; }
/* Tag pills */
.carol-sci .cs-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 45px; }
.carol-sci a.cs-tag {
  font-size: 14px; line-height: 23px; letter-spacing: 0.28px; color: var(--cs-black);
  border: 1px solid var(--cs-hairline); border-radius: 50px; padding: 13px 20px 12px;
  text-decoration: none; background: transparent;
  transition: border-color 100ms cubic-bezier(.25,.1,.25,1), transform 160ms cubic-bezier(.23,1,.32,1);
}
.carol-sci a.cs-tag:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .carol-sci a.cs-tag:hover { border-color: rgba(21,21,21,0.45); } }
/* Keep Reading */
.carol-sci .cs-keep { padding-top: 90px; }
.carol-sci .cs-keep-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.carol-sci .cs-keep h2 { margin: 0; font-weight: 400; font-size: 70px; line-height: 77px; letter-spacing: -1px; }
.carol-sci a.cs-more { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; letter-spacing: 0.28px; color: var(--cs-black); text-decoration: none; }
.carol-sci .cs-circle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--cs-hairline); color: var(--cs-black);
  transition: border-color 100ms cubic-bezier(.25,.1,.25,1), transform 160ms cubic-bezier(.23,1,.32,1);
}
.carol-sci .cs-circle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .carol-sci .cs-more:hover .cs-circle { border-color: rgba(21,21,21,0.45); } }
.carol-sci .cs-circle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.carol-sci .cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 45px; }
.carol-sci a.cs-card {
  position: relative; text-decoration: none; color: var(--cs-black); display: block; transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.carol-sci a.cs-card:active { transform: scale(0.99); }
.carol-sci .cs-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
/* Angled corner, built the way the live site builds it. Measured off
   carolbike.com/science: the panel is 83% of the card with only its top-left
   corner rounded (12px), and the corner itself is a separate square piece -
   17% of the card wide, aspect-ratio 1 - holding an SVG whose path sweeps in a
   long cubic Bezier from the panel's right edge out to the full card width.
   It is a curve, not a 45-degree chamfer, and because the piece is square with
   its aspect preserved the curve never distorts. Below the piece the area right
   of the panel stays transparent, so the photograph reads through. */
.carol-sci .cs-panelrow {
  /* The live holder is `absolute bottom-0 left-0` with a 12px radius, so the panel
     sits INSIDE the photo's lower edge rather than hanging below it. That is what
     makes the strip beside the corner read as photograph instead of a cut. */
  position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1;
  display: flex; align-items: stretch;
  border-radius: 12px; overflow: hidden;
}
.carol-sci .cs-panel {
  flex: 0 0 83%; background: var(--cs-lavender); color: #141414;
  padding: 30px; border-radius: 12px 0 0 0;
}
/* The corner column runs the full height of the panel: the square SVG carries the
   curve at the top, and everything below it is solid, so the panel reads as full
   width with only the corner cut away. Live builds it the same way - a flex column
   holding the fixed-square SVG plus a filler. */
.carol-sci .cs-corner { flex: 0 0 17%; display: flex; flex-direction: column; overflow: hidden; }
.carol-sci .cs-corner svg { display: block; width: 100%; aspect-ratio: 1; flex: 0 0 auto; }
.carol-sci .cs-corner i { display: block; flex: 1 1 auto; background: var(--cs-lavender);
  margin-top: -1px; /* close the antialiasing seam under the SVG */ }
.carol-sci .cs-panel .cs-read { display: none; font-size: 14px; line-height: 21px; letter-spacing: 0.42px; }
.carol-sci .cs-title { display: block; font-size: 18px; line-height: 25px; letter-spacing: 0.36px; }
.carol-sci .cs-blurb { margin-top: 20px; font-size: 14px; line-height: 21px; }
@media (max-width: 900px) {
  .carol-sci h1 { font-size: 34px; line-height: 42px; }
  .carol-sci .cs-lede { font-size: 22px; line-height: 30px; }
  .carol-sci .cs-keep h2 { font-size: 40px; line-height: 46px; }
  .carol-sci .cs-cards { grid-template-columns: 1fr; }
  .carol-sci .cs-panel { padding: 24px; }
  .carol-sci .cs-panel .cs-read { display: block; }
  .carol-sci .cs-hero { padding-inline: 16px; }
}
.carol-sci .cs-rise { animation: cs-rise 600ms cubic-bezier(0.16,1,0.3,1) both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
@keyframes cs-rise { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
/* Pull quote. Two of the articles carry a researcher quote with an attribution;
   the quote sits at body-lg and the attribution takes the Pitch Sans annotation
   role the guidelines reserve for markings. */
.carol-sci .cs-quote { margin-top: 40px; max-width: 65ch; }
.carol-sci .cs-quote p { font-size: 22px; line-height: 30px; letter-spacing: normal; }
.carol-sci .cs-quote footer {
  margin-top: 15px; font-family: 'Pitch Sans Semibold', "SF Mono", monospace; font-weight: 600;
  font-size: 14px; line-height: 21px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--cs-text-2, #6D6E71);
}
.carol-sci .cs-quote footer b { display: block; font-weight: 600; color: var(--cs-black); }
/* Long-form article structure: section headings, lists and inline figures. The
   guidelines set the scale relationships (H2 60/60, subheading 40/40); an article
   column sits lower on that scale while keeping the steps. */
.carol-sci .cs-prose h2 { margin-top: 50px; font-size: clamp(28px, 24px + 1vw, 34px); line-height: 1.2; max-width: 34ch; }
.carol-sci .cs-prose h3 { margin-top: 40px; font-size: 24px; line-height: 32px; max-width: 40ch; }
.carol-sci .cs-prose h2 + p, .carol-sci .cs-prose h3 + p { margin-top: 20px; }
.carol-sci .cs-prose ul, .carol-sci .cs-prose ol { margin: 25px 0 0; padding-left: 24px; max-width: 65ch; }
.carol-sci .cs-prose li { margin-top: 10px; }
.carol-sci .cs-prose li::marker { color: var(--cs-text-2, #6D6E71); }
.carol-sci .cs-figure { margin: 50px 0 0; }
.carol-sci .cs-figure img { width: 100%; border-radius: 16px; display: block; }
.carol-sci .cs-figure figcaption { margin-top: 15px; font-size: 14px; line-height: 21px; color: var(--cs-text-2, #6D6E71); }
/* ---- Figure kit ---------------------------------------------------------- */
.carol-sci .cf {
  background: #FFFFFF; color: #000; border: 1px solid rgba(21,21,21,0.145);
  border-radius: 12px; padding: 30px; margin: 50px 0 0;
  font-family: 'Roobert Regular', "Helvetica Neue", Arial, sans-serif;
}
.carol-sci .cf * { box-sizing: border-box; }
.carol-sci .cf-kick {
  font-family: 'Pitch Sans Semibold', "SF Mono", monospace; font-weight: 600; font-size: 12px;
  letter-spacing: 0.03em; text-transform: uppercase; color: #6D6E71; margin: 0 0 6px;
}
.carol-sci .cf-h { font-size: 24px; line-height: 32px; margin: 0 0 22px; max-width: 34ch; }
.carol-sci .cf-cap {
  margin: 22px 0 0; padding-top: 14px; border-top: 1px solid rgba(21,21,21,0.145);
  font-size: 14px; line-height: 21px; color: #6D6E71;
}
.carol-sci .cf svg { width: 100%; height: auto; display: block; overflow: visible; }
/* bars */
.carol-sci .cf-row { display: grid; grid-template-columns: 148px 1fr auto; align-items: center; gap: 14px; margin: 12px 0; }
.carol-sci .cf-lab { font-size: 14px; line-height: 20px; }
.carol-sci .cf-lab small { display: block; color: #6D6E71; font-size: 12px; }
.carol-sci .cf-track { background: #DCDCDC; border-radius: 8px; height: 22px; overflow: hidden; }
.carol-sci .cf-bar { height: 100%; border-radius: 8px; width: var(--w); background: #FF4600; }
.carol-sci .cf-bar--mute { background: #9A9A9E; }
.carol-sci .cf-val { font-variant-numeric: tabular-nums; text-align: right; min-width: 58px; }
/* legend */
.carol-sci .cf-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 14px; }
.carol-sci .cf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.carol-sci .cf-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
/* stat row */
.carol-sci .cf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.carol-sci .cf-stat b { display: block; font-size: clamp(34px, 25.6px + 2.1vw, 50px); line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.carol-sci .cf-stat span { display: block; margin-top: 6px; font-size: 14px; line-height: 21px; color: #6D6E71; }
/* accordion - interaction without script */
.carol-sci .cf-acc { border-top: 1px solid rgba(21,21,21,0.145); }
.carol-sci .cf-acc details { border-bottom: 1px solid rgba(21,21,21,0.145); }
.carol-sci .cf-acc summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-size: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.carol-sci .cf-acc summary::-webkit-details-marker { display: none; }
.carol-sci .cf-acc summary::after { content: "+"; font-size: 22px; color: #FF4600; transition: transform 250ms cubic-bezier(.77,0,.175,1); }
.carol-sci .cf-acc details[open] summary::after { transform: rotate(45deg); }
.carol-sci .cf-acc-body { padding: 0 0 18px; font-size: 16px; line-height: 24px; color: #26262a; max-width: 62ch; }
@media (hover: hover) and (pointer: fine) { .carol-sci .cf-acc summary:hover { color: #6D6E71; } }
/* radio picker - the tab pattern, CSS only */
.carol-sci .cf-pick input { position: absolute; opacity: 0; pointer-events: none; }
.carol-sci .cf-pick .cf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.carol-sci .cf-pick label {
  cursor: pointer; border: 1px solid rgba(21,21,21,0.145); border-radius: 999px;
  padding: 9px 18px; font-size: 14px; line-height: 21px;
  transition: background-color 100ms cubic-bezier(.25,.1,.25,1), color 100ms cubic-bezier(.25,.1,.25,1),
              border-color 100ms cubic-bezier(.25,.1,.25,1), transform 160ms cubic-bezier(.23,1,.32,1);
}
.carol-sci .cf-pick label:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .carol-sci .cf-pick label:hover { background: #F4F4F4; } }
.carol-sci .cf-pick .cf-out > div { display: none; }
.carol-sci .cf-pick .cf-out > div b {
  display: block; font-size: clamp(34px, 25.6px + 2.1vw, 50px); line-height: 1.1;
  font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.carol-sci .cf-pick .cf-out > div span { display: block; margin-top: 8px; font-size: 16px; line-height: 24px; color: #6D6E71; max-width: 46ch; }
@media (max-width: 560px) {
  .carol-sci .cf { padding: 22px 18px; }
  .carol-sci .cf-row { grid-template-columns: 104px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .carol-sci .cf-acc summary::after { transition: none; }
  .carol-sci .cf-pick label { transition: none; }
}
/* Article-only stylesheet: rules for unused components are omitted. */
/* ==========================================================================
   CAROL "Get Fitter" — a faithful rebuild of the layout live at
   carolbike.com/science/get-fitter/, measured off that page:
   column 1134px, H1 50/62.5 -1px, lede 28/36, body 18/25, tag pills
   14/23 on the hairline rgba(21,21,21,.145) at radius 50px, media at 16px,
   keep-reading cards on lavender #B4A0FF with the 12px 0 0 0 folder tab.
   Type is px, never rem: the storefront theme sets html { font-size: 62.5% }
/* Article-only stylesheet: rules for unused components are omitted. */
/* Article-only stylesheet: rules for unused components are omitted. */
/* ==========================================================================
   CAROL "Get Fitter" — a faithful rebuild of the layout live at
   carolbike.com/science/get-fitter/, measured off that page:
   column 1134px, H1 50/62.5 -1px, lede 28/36, body 18/25, tag pills
   14/23 on the hairline rgba(21,21,21,.145) at radius 50px, media at 16px,
   keep-reading cards on lavender #B4A0FF with the 12px 0 0 0 folder tab.
   Type is px, never rem: the storefront theme sets html { font-size: 62.5% }