/* ==========================================================================
   Case studies in the homepage's look (body.cs), laid out like a journal
   page (after catalinvintila.design/journal). Loaded after article.css; it
   only changes how things look, and the words and their order stay as they
   are. case-scroll.js adds Lenis and GSAP reveals on top.
     type      Helvetica throughout, sentence case
     opening   the tag, then the title with the accent dot as its full stop; then a meta strip
               (the facts), a context row between hairlines (the problem and
               my part), the pictures and the outcome
     columns   one content column beside the index, the same width as the
               opening: headings, text, cards and pictures share its edges;
               text stops at a reading width
     acts      a small "01 —" over a medium heading
     pieces    cards, steps and the problem panels are plain rows on
               hairlines, not boxes; pull quotes are centred and larger
     index     sticky at the bottom left, in regular weight
     progress  a thin accent line under the top bar fills as you read
   ========================================================================== */

body.cs {
  --cs-font: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-font: var(--cs-font);
  --body-font: var(--cs-font);
  font-family: var(--cs-font);
}

/* sentence case everywhere (the id keeps this above article.css's labels);
   the small labels lose the wide tracking capitals needed */
#main *:not(svg, svg *), body.cs .a-bar *, body.cs .a-side * {
  text-transform: none;
}
#main :is(.label, .a-facts dt, .a-card__title, .contrib__bg-label, .contrib__facts dt, .acc__label, .step__num), body.cs .a-sections a {
  letter-spacing: 0;
}

/* ---- widths ---------------------------------------------------------------- */
body.cs .article {
  --a-col: 1180px;
  --a-read: 680px;
  /* the one width every picture and group of pictures stops at: the
     content column's own */
  --cs-pic: 1280px;
}
@media (min-width: 1101px) {
  body.cs .a-layout {
    --cs-gap: clamp(40px, 4vw, 72px);
    grid-template-columns: 200px minmax(0, 1280px);
    column-gap: var(--cs-gap);
  }
}

/* ---- text ------------------------------------------------------------------ */
#main :is(p, li, dd) {
  font-size: 1.125rem;
  line-height: 1.6;
}
#main :is(.small, figcaption) {
  font-size: 0.9375rem;
}
#main .label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

/* ---- the opening ----------------------------------------------------------- */
body.cs .a-hero2 {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  grid-template-areas:
    "tag     tag"
    "title   title"
    "facts   facts"
    "lead    lead"
    "image   aside"
    "outcome outcome";
  gap: 0 clamp(24px, 3vw, 40px);
}
body.cs :is(.a-hero2__intro, .a-hero2__meta) {
  display: contents;
}
body.cs .a-tag {
  grid-area: tag;
  justify-self: start;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
}
#main .a-title {
  grid-area: title;
  margin-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(32px, 5vh, 56px);
  font-family: var(--cs-font);
  font-size: clamp(3rem, 1rem + 6.5vw, 8rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
#main .a-title .cs-line {
  display: block;
}
/* the accent dot as the page title's full stop, like the homepage's
   headings (case-scroll.js puts it on the last word) */
.cs-dot {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.05em;
  border-radius: 50%;
  background: var(--accent);
}
/* the facts: a meta strip between hairlines, small grey labels over their
   values */
#main .a-facts {
  grid-area: facts;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
  padding: 20px 0 24px;
  border-block: 1px solid var(--line);
}
#main :is(.a-facts, .a-lead) dt {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}
#main .a-facts dd {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* the problem and my part: a context row between hairlines */
#main .a-lead {
  grid-area: lead;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px clamp(24px, 4vw, 64px);
  margin: clamp(32px, 5vw, 56px) 0;
  padding: 24px 0;
  border-block: 1px solid var(--line);
}
#main .a-lead div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#main .a-lead dd {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
body.cs .a-hero2__image {
  grid-area: image;
}
body.cs .a-hero2__aside {
  grid-area: aside;
}
#main .a-outcome {
  grid-area: outcome;
  margin-top: clamp(40px, 6vw, 72px);
}
@media (max-width: 860px) {
  body.cs .a-hero2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "tag"
      "title"
      "facts"
      "lead"
      "image"
      "aside"
      "outcome";
  }
  body.cs .a-hero2__aside {
    margin-top: 24px;
  }
}

/* ---- the columns -------------------------------------------------------------
   Acts and parts are grids of one column, the content column beside the
   index, the same width as the opening above them. Headings, text, cards
   and pictures share its edges; text stops at a reading width (--a-read). */
#main :is(.a-act, .a-part) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px 0;
}
#main :is(.a-act, .a-part) > * {
  min-width: 0;
  margin-inline-start: 0;
}
#main .a-part > :is(figure, .figs, .row, .figset, .cards, .steps, .dids, .contrib, .accs, .roles, .figs-roles, .sandbox-wrap) {
  width: 100%;
  max-width: var(--cs-pic);
}
#main .a-part > .a-quote {
  justify-self: center;
}
/* phones: the swipeable rows run out to the screen's edges */
@media (max-width: 760px) {
  #main .a-part > :is(.figs:not(.figs--three), .cards:has(> :nth-child(3))) {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--gx));
  }
}

/* ---- acts: "01 —" over a medium heading ------------------------------------- */
body.cs .article {
  counter-reset: cs-act;
}
body.cs .a-act--intro {
  padding-top: clamp(72px, 9vw, 128px);
}
body.cs .a-act--intro + .a-act--intro {
  padding-top: clamp(40px, 5vw, 72px);
}
body.cs .a-act:not(.a-act--intro) {
  counter-increment: cs-act;
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
body.cs .a-act:not(.a-act--intro)::before {
  content: counter(cs-act, decimal-leading-zero) " \2014";
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
#main .a-act > h2 {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  font-family: var(--cs-font);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
}
/* the ghost: the act's title again, huge, outlined and faint, cut off at
   the column's edge, with the title itself overlapping its lower part (from
   data-ghost, as generated content screen readers skip) */
#main .a-act > h2[data-ghost]::before {
  content: attr(data-ghost) / "";
  overflow: hidden;
  margin-bottom: -0.45em;
  font-size: clamp(4rem, 1.5rem + 7vw, 9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  #main .a-act > h2[data-ghost]::before {
    color: var(--ink);
    opacity: 0.06;
  }
}
/* the accent dot belongs to the page title only */
#main .a-act > h2 .cs-dot {
  display: none;
}
#main .a-act > h2 + .a-part {
  padding-top: clamp(32px, 4vw, 56px);
}

/* ---- parts and their text ----------------------------------------------- */
#main .a-part {
  padding-top: clamp(56px, 7vw, 96px);
}
#main .a-part > h3 {
  font-family: var(--cs-font);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
#main .a-part > h3 + * {
  margin-top: 0;
}
/* sub-headings as a break of their own: a softly tinted band across the
   column with an accent line down its left edge and a small accent square
   before the words */
#main .a-act > .a-part + .a-part {
  padding-top: clamp(64px, 8vw, 112px);
}
#main .a-part > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
#main .a-part > h3::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--accent);
}
#main .a-part > h3 + * {
  margin-top: 8px;
}
#main .a-act--intro > .a-part:not([id]) > h3 {
  padding: 0;
  border: 0;
  background: none;
}
#main .a-act--intro > .a-part:not([id]) > h3::before {
  content: none;
}
#main .a-part > :is(p, ul, ol:not(.steps)), #main .a-part > :is(p, ul, ol:not(.steps)) li {
  color: var(--text-2);
}
#main .a-part > p {
  font-size: 1.1875rem;
  line-height: 1.65;
}
#main .a-part > p strong {
  color: var(--ink);
}
/* wide pieces get room around them */
#main .a-part > :is(figure, .figs, .row, .figset, .cards, .steps, .a-quote) {
  margin-block: clamp(16px, 2.5vw, 40px);
}
#main figure :is(img, svg, video) {
  border-radius: 12px;
}
/* every picture opens full screen (viewer.js); drawings show it too */
#main .zoom svg {
  transition: opacity 0.3s ease;
}
#main .zoom:hover svg {
  opacity: 0.9;
}

/* "The story in short": its title as a small label, the story in larger
   type under it */
#main .a-act--intro > .a-part:not([id]) > h3 {
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--muted);
}
#main .a-act--intro > .a-part:not([id]) > p {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6875rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* the problem panels: plain, like every other part */
#main :is(.a-part[id^="the-problem"], .a-part[id="annotation-became-a-mode"]) {
  margin-top: 0;
  padding: clamp(56px, 7vw, 96px) 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#main :is(.a-part[id^="the-problem"], .a-part[id="annotation-became-a-mode"]) > h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---- pull quotes: centred, larger, with their label above ----------------- */
#main .a-quote {
  max-width: 720px;
  padding: 0;
  border: 0;
  text-align: center;
}
#main .a-quote p {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}
#main .a-quote .label {
  margin-bottom: 12px;
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--accent-text);
}

/* ---- cards and the contribution list: rows on hairlines ------------------- */
#main :is(.card-pt, .did, .contrib__team, .acc) {
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#main .cards {
  gap: 28px clamp(20px, 3vw, 40px);
}
#main .dids {
  gap: 0 clamp(20px, 3vw, 40px);
}
#main .did {
  padding-bottom: 14px;
}
#main :is(.card-pt h4, .step :is(h3, h4)), #main .points-head {
  font-family: var(--cs-font);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
#main :is(.card-pt, .step) p, #main .card-pt li {
  color: var(--text-2);
}

/* ---- steps: numbered rows on hairlines ------------------------------------ */
#main .steps {
  gap: 0;
  max-width: var(--cs-pic);
}
#main .steps--cols {
  gap: 0 clamp(20px, 3vw, 40px);
}
#main .step {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
#main .step__num {
  margin: 0;
  font-family: var(--cs-font);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.9;
  color: var(--accent-text);
}

/* ---- the remaining display pieces, in Helvetica -------------------------- */
#main .stats b {
  font-family: var(--cs-font);
  letter-spacing: -0.04em;
}
#main .acc__name {
  font-family: var(--cs-font);
}
#main .a-more b {
  font-family: var(--cs-font);
  letter-spacing: -0.02em;
}

/* ---- the sticky index, at the bottom left, in regular weight ---------------
   The side column runs the page's full height with the index at its foot;
   sticking to the bottom pulls it up into the screen's lower-left corner,
   where it stays as you read (a longer list grows upward). */
body.cs .a-outline {
  font-family: var(--cs-font);
}
body.cs .a-side .a-outline :is(a, .a-outline__num, .a-outline__all) {
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (min-width: 1101px) {
  body.cs .a-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  body.cs .a-outline {
    top: auto;
    bottom: 32px;
    margin-top: 0;
    margin-bottom: 32px;
  }
}
/* the section strip on narrow screens */
body.cs .a-sections a {
  font-family: var(--cs-font);
  font-size: 0.9375rem;
}

/* ---- reading progress: a thin line under the top bar ----------------------- */
@supports (animation-timeline: scroll()) {
  body.cs .a-bar::after {
    content: "";
    grid-column: 1 / -1;
    height: 2px;
    margin-inline: calc(-1 * var(--gx));
    background: var(--accent);
    transform-origin: 0 50%;
    animation: cs-progress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes cs-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---- for case-scroll.js: each title word in a mask it slides up out of;
   pictures that settle keep their corners while they scale ---------------- */
.cs-m {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: top;
}
.cs-w {
  display: inline-block;
}
.cs-zoom {
  overflow: hidden;
  border-radius: 12px;
}

/* larger screens: everything under a part's title sits in from it, so the
   title stands out at the edge and the hierarchy reads at a glance */
@media (min-width: 1101px) {
  #main .a-part > :not(h3) {
    margin-inline-start: clamp(24px, 3vw, 48px);
  }
  #main .a-part > :is(figure, .figs, .row, .figset, .cards, .steps, .dids, .contrib, .accs, .roles, .figs-roles, .sandbox-wrap) {
    width: auto;
  }
}