/* Long-form case study. Loaded after case-study.css, which it does not
   modify: the eight short case studies keep using .cs. Literal fallbacks on
   every token because case-study.css defines none of them. */

.cs2 { background: var(--cream, #F7F5F2); color: var(--dark, #202022); }
.cs2-wrap { max-width: 1080px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
.cs2-col { max-width: 66ch; }

.cs2 p { margin: 0 0 1em; font-size: 16.5px; line-height: 1.72; color: var(--body-text, #3A3A3C); }
.cs2 p:last-child { margin-bottom: 0; }

.cs2-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep, #8F6318); margin: 0 0 14px;
}

/* Masthead line, so the page announces what it is before the headline.
   Both items sit left: the nav pill is fixed at top:20px right:24px and would
   otherwise cover anything justified to the right edge. */
.cs2-mast { border-bottom: 1px solid var(--light-border, #E5E5E7); padding-block: 18px; }
.cs2-mast .cs2-wrap { display: flex; flex-wrap: wrap; gap: 6px 14px;
                      align-items: baseline; padding-right: 230px; }
.cs2-mast-kind {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #6A6A70;
}
.cs2-mast-sep { color: #6A6A70; font-size: 11px; }
.cs2-mast-back { font-size: 11px; font-weight: 600; letter-spacing: .12em;
                 text-transform: uppercase;
                 color: var(--gold-deep, #8F6318); text-decoration: none; }
.cs2-mast-back:hover { color: var(--dark, #202022); }

/* the same link again at the foot of a very long page */
.cs2-back { display: inline-block; margin-top: 30px; font-size: 12px; font-weight: 600;
            letter-spacing: .1em; text-transform: uppercase;
            color: var(--gold-deep, #8F6318); text-decoration: none;
            border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.cs2-back:hover { color: var(--dark, #202022); }

/* hero */
.cs2-hero { padding-block: clamp(44px, 7vw, 72px) clamp(32px, 5vw, 48px); }
.cs2-hero h1 {
  font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(34px, 6.4vw, 66px); line-height: 1.0;
  letter-spacing: -.032em; margin: 0 0 24px; max-width: 16ch; text-wrap: balance;
  color: var(--dark, #202022);
}
.cs2-hero h1 em { font-style: normal; color: var(--gold-deep, #8F6318); }
.cs2-stand { font-size: 20px; line-height: 1.5; color: #4A4A4E; max-width: 58ch; margin: 0; }

.cs2-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 2px solid var(--dark, #202022); margin: 44px 0 0;
}
.cs2-fact { padding: 18px 20px 20px 0; border-bottom: 1px solid var(--light-border, #E5E5E7); }
.cs2-fact dt { font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
               text-transform: uppercase; color: #6A6A70; margin-bottom: 5px; }
.cs2-fact dd { margin: 0; font-size: 15.5px; line-height: 1.38; color: var(--dark, #202022); }

/* the numbers */
.cs2-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 4px 36px; padding-block: 10px 52px; }
.cs2-num { border-top: 1px solid #C9C5BF; padding-top: 14px; }
.cs2-num b {
  display: block; font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(38px, 6vw, 56px); line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--gold-deep, #8F6318);
}
.cs2-num .cs2-num-l { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
                      text-transform: uppercase; color: var(--dark, #202022); margin: 11px 0 6px; }
.cs2-num .cs2-num-n { display: block; font-size: 14.5px; line-height: 1.45; color: #5A5A5E; }

/* sections */
.cs2-sec { padding-block: clamp(40px, 5vw, 56px); border-top: 1px solid var(--light-border, #E5E5E7); }
.cs2-sec:first-of-type { border-top: 0; }
.cs2 h2 {
  font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(25px, 3.7vw, 36px); line-height: 1.1; letter-spacing: -.024em;
  margin: 0 0 20px; max-width: 22ch; text-wrap: balance; color: var(--dark, #202022);
}
.cs2 h3 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
          color: var(--dark, #202022); margin: 34px 0 12px; }

.cs2-pull {
  font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(19px, 2.9vw, 26px); line-height: 1.26; letter-spacing: -.018em;
  color: var(--dark, #202022); border-left: 3px solid var(--gold-deep, #8F6318);
  padding-left: 22px; margin: 34px 0 0; max-width: 40ch;
}

/* the dark band that carries the sequence */
.cs2-band { background: var(--dark, #202022); padding-block: clamp(48px, 6vw, 64px); }
.cs2-band h2, .cs2-band .cs2-step h3 { color: var(--cream, #F7F5F2); }
.cs2-band .cs2-eyebrow { color: #E8A849; }
.cs2-band p { color: #C7C3BD; }

/* A table sitting on the dark band inverts: the light-ground rules above
   would put ink text on ink. Scoped to .cs2-band so the cream-ground tables
   elsewhere are untouched. */
.cs2-band .cs2-table caption { color: #A9A49C; }
.cs2-band .cs2-table th { color: #A9A49C; border-bottom-color: rgba(247,245,242,.34); }
.cs2-band .cs2-table td { color: #C7C3BD; border-bottom-color: rgba(247,245,242,.16); }
.cs2-band .cs2-table td:first-child { color: var(--cream, #F7F5F2); }
.cs2-band .cs2-table tfoot td { color: var(--cream, #F7F5F2);
                                border-top-color: rgba(247,245,242,.34); }

/* A gallery on the dark band: the caption grey and the photo border are both
   set for the cream ground and disappear against ink. */
.cs2-band .cs2-gallery figcaption { color: #A9A49C; }
.cs2-band .cs2-shot { border-color: rgba(247,245,242,.20); background: #2A2A2C; }

/* was/now. The 'now' column is the argument being made, so it carries the
   weight and 'was' is deliberately quieter. */
.cs2-compare th.cs2-now { color: #E8A849; }
.cs2-compare td.cs2-was { color: #A9A49C; }
.cs2-compare td.cs2-now { color: var(--cream, #F7F5F2); font-weight: 600; }
.cs2-compare td:first-child { width: 24%; }

.cs2-tl { margin-top: 40px; border-top: 1px solid rgba(247,245,242,.16); }
.cs2-step { display: grid; grid-template-columns: 124px 1fr; gap: 0 28px;
            padding: 22px 0; border-bottom: 1px solid rgba(247,245,242,.16); align-items: start; }
.cs2-step .cs2-when { font-size: 11px; font-weight: 700; letter-spacing: .12em;
                      text-transform: uppercase; color: #E8A849; padding-top: 6px; }
.cs2-step h3 { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 20px;
               line-height: 1.18; letter-spacing: -.018em; margin: 0 0 8px; }
.cs2-step p { margin: 0; font-size: 15.5px; line-height: 1.5; }

/* tables */
.cs2-tablewrap { overflow-x: auto; margin-top: 26px; }
.cs2-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.cs2-table caption { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .12em;
                     text-transform: uppercase; color: #6A6A70; padding-bottom: 10px; }
.cs2-table th { text-align: left; font-weight: 700; font-size: 10.5px; letter-spacing: .12em;
                text-transform: uppercase; color: #6A6A70; padding: 0 16px 9px 0;
                border-bottom: 2px solid var(--dark, #202022); }
.cs2-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--light-border, #E5E5E7);
                vertical-align: top; line-height: 1.42; color: var(--body-text, #3A3A3C); }
.cs2-table td:first-child { font-weight: 600; color: var(--dark, #202022); }
.cs2-fig { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0 !important; white-space: nowrap; }
.cs2-table tfoot td { border-bottom: 0; border-top: 2px solid var(--dark, #202022);
                      font-weight: 700; color: var(--dark, #202022); padding-top: 12px; }
.cs2-basis { color: #5A5A5E; font-weight: 500 !important; }
/* rows still waiting on a media kit are marked, not folded in silently */
.cs2-est { color: var(--gold-deep, #8F6318); font-weight: 600 !important; }
.cs2-note { font-size: 14.5px; line-height: 1.6; color: #5A5A5E; margin-top: 18px; max-width: 64ch; }

/* tiers, used for coverage and for the lessons */
.cs2-tiers { margin: 30px 0 0; }
.cs2-tier { display: grid; grid-template-columns: 200px 1fr; gap: 0 32px;
            padding: 20px 0; border-bottom: 1px solid var(--light-border, #E5E5E7); }
.cs2-tier:first-child { border-top: 2px solid var(--dark, #202022); }
.cs2-tier dt { font-weight: 700; font-size: 12.5px; letter-spacing: .06em;
               text-transform: uppercase; color: var(--gold-deep, #8F6318); line-height: 1.4; }
.cs2-tier dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body-text, #3A3A3C); }

/* chart positions */
.cs2-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
              gap: 0 32px; margin-top: 28px; border-top: 2px solid var(--dark, #202022); }
.cs2-charts div { padding: 16px 16px 18px 0; border-bottom: 1px solid var(--light-border, #E5E5E7); }
.cs2-charts b { display: block; font-family: 'Archivo Black', sans-serif; font-weight: 400;
                font-size: 30px; line-height: 1; letter-spacing: -.03em;
                font-variant-numeric: tabular-nums; color: var(--gold-deep, #8F6318); margin-bottom: 8px; }
.cs2-charts span { font-size: 14.5px; line-height: 1.45; color: #5A5A5E; }

/* lists inside a section, used for scope */
.cs2-list { margin: 14px 0 0; padding: 0; list-style: none; }
.cs2-list li { position: relative; padding-left: 18px; margin-bottom: 9px;
               font-size: 15.5px; line-height: 1.55; color: var(--body-text, #3A3A3C); }
.cs2-list li::before { content: ""; position: absolute; left: 0; top: .62em;
                       width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep, #8F6318); }
.cs2-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 40px; }

.cs2-media { width: 100%; height: auto; display: block; margin: 30px 0 0;
             background: #E8E6E2; border-radius: 10px; }

/* Photo gallery. Mirrors the coverage grid on the music market page so the two
   read as the same component: auto-fill so the row count follows the number of
   photos, 3:2 crop from the top so faces survive the crop, caption under each. */
.cs2-gallery { display: grid; gap: 26px 22px; margin-top: 30px;
               grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cs2-gallery figure { margin: 0; }
.cs2-shot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
            object-fit: cover; object-position: top center; border-radius: 8px;
            border: 1px solid var(--light-border, #E5E5E7);
            background: var(--cream, #F7F5F2); margin-bottom: 11px; }
.cs2-gallery figcaption { font-size: 13px; line-height: 1.5; color: #5A5A5E; }
/* a single photo should not stretch to the full grid width */
.cs2-gallery:has(> :only-child) { grid-template-columns: minmax(0, 460px); }
.cs2-cap { margin-top: 12px; font-size: 13px; line-height: 1.55; color: #5A5A5E; }

.cs2-close { padding-block: clamp(44px, 5vw, 56px) clamp(52px, 6vw, 72px);
             border-top: 2px solid var(--dark, #202022); }
.cs2-close .cs2-kicker { font-family: 'Archivo Black', sans-serif; font-weight: 400;
                         font-size: clamp(23px, 3.4vw, 32px); line-height: 1.16;
                         letter-spacing: -.024em; margin: 0 0 18px; max-width: 26ch;
                         color: var(--dark, #202022); }
/* a source note, not a label, so it does not shout */
.cs2-sig { font-size: 12.5px; font-weight: 500; letter-spacing: .01em; line-height: 1.6;
           color: #6A6A70; margin-top: 30px; padding-top: 18px; max-width: 58ch;
           border-top: 1px solid var(--light-border, #E5E5E7); }

@media (max-width: 720px) {
  /* the pill sits at top:20px and is ~35px tall, so the line starts below it
     rather than squeezing into the space beside it */
  .cs2-mast { padding-block: 66px 14px; }
  .cs2-mast .cs2-wrap { padding-right: 0; }
  .cs2-tier { grid-template-columns: 1fr; gap: 7px; }
  .cs2-step { grid-template-columns: 1fr; gap: 8px; }
  .cs2-step .cs2-when { padding-top: 0; }
  .cs2 p { font-size: 15.5px; }
  .cs2-stand { font-size: 17.5px; }
}


/* Tiers on the dark band. Bands had no tier rendering until the builder was
   fixed, so tiers had only ever been styled for a light ground: dark body text
   on the ink band measured 1.43:1 and the rules above them vanished. Same
   inversion the tables already get. */
.cs2-band .cs2-tier { border-bottom-color: rgba(247,245,242,.16); }
.cs2-band .cs2-tier:first-child { border-top-color: rgba(247,245,242,.34); }
.cs2-band .cs2-tier dt { color: #E8A849; }
.cs2-band .cs2-tier dd { color: #C7C3BD; }

/* A two-column table is prose, not figures: let it wrap on a phone instead of
   scrolling sideways. Wider tables keep the 520px minimum and their scroll. */
.cs2-table:has(thead th:nth-child(2):last-child) { min-width: 0; }

/* A figure column's header aligns with its figures. The generic th rule is
   more specific than .cs2-fig and was holding every header left. Figure
   columns that are not last keep a gutter before the next column. */
.cs2-table th.cs2-fig { text-align: right; }
.cs2-table th.cs2-fig:not(:last-child), .cs2-table td.cs2-fig:not(:last-child) { padding-right: 28px !important; }
/* On the dark band an estimate stays gold, as it is on cream. The band td
   colour was overriding it and leaving only the weight. */
.cs2-band .cs2-table td.cs2-est { color: #E8A849; }
/* A section heading placed straight into a dark band (a second table's
   title) was ink on ink. Timeline headings are nested and already cream. */
.cs2-band .cs2-wrap > h3 { color: var(--cream, #F7F5F2); }