/* Editorial layer for the case-study pages: the same visual language as journal.html
   (maximal Geist type, spec labels, meta rows, a blue full-bleed pull page).
   Linked after each page's inline <style>, so equal-specificity rules here win.
   Only the shared template classes are touched (plus Seatly's cs-* equivalents);
   page-specific pieces (logo tiles, gallery cards, carousels, brand swatches) keep
   their own styling. */

body { counter-reset: ed; }

/* ---------- hero: masthead ---------- */
.hero, .cs-header { position: relative; padding: 9.5rem 0 2.4rem; border-bottom: 0; }
.hero::before, .cs-header::before {
  content: "Headline:\A 120/100"; white-space: pre;
  position: absolute; right: 0; top: 9.7rem;
  font-size: .68rem; line-height: 1.35; font-weight: 500; letter-spacing: .02em; text-align: right; opacity: .5;
}
.hero::after, .cs-header::after {
  content: "AaBbCcDdEeFfGgHhIiJjKkLlMmNn 0123456789.?@#&*";
  position: absolute; right: calc(var(--gutter) * -.62); top: 14rem;
  writing-mode: vertical-rl; font-size: .66rem; font-weight: 500; letter-spacing: .02em;
  color: var(--blue); opacity: .45; pointer-events: none;
}
.hero__back { font-size: .85rem; }
.cs-header .hero__back {
  display: inline-block; margin-bottom: 2rem;
  font-weight: 700; letter-spacing: .01em; text-transform: lowercase; color: #555; transition: color .25s;
}
.cs-header .hero__back:hover { color: var(--blue); }
.hero__eyebrow, .cs-num {
  font-size: .95rem; font-weight: 500; letter-spacing: 0;
  color: var(--blue); margin-bottom: 1.4rem;
}
/* editorial.js sizes these so the title runs the full width of the page */
.hero__title, .cs-title {
  display: inline-block; white-space: nowrap;
  font-family: 'Geist', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 11vw, 12rem); line-height: .8; letter-spacing: -.06em;
  margin: 0 0 0 -.03em; color: var(--black);
}
.cs-title-dot { color: var(--blue); }
.hero__tag, .cs-tagline {
  display: block; max-width: 34ch; margin-top: 2rem;
  font-style: normal; font-weight: 300; font-size: clamp(1.35rem, 2.7vw, 2.2rem); line-height: 1.12; letter-spacing: -.025em;
  color: var(--black);
}

/* photos and tiles sit square-cornered, like pages */
.hero-img, .hero-logo, .gallery__grid img, .gallery__card { border-radius: 0; }

/* ---------- meta row (the "Written by" line of the journal) ---------- */
.info, .cs-meta { border-top: 1.5px solid var(--black); border-bottom: 0; padding-block: 1.3rem 3.2rem; margin-top: 3rem; }
.info__label, .cs-meta-label {
  font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #555; margin-bottom: .5rem;
}
.info__val, .cs-meta-val { font-family: 'Geist', sans-serif; font-size: .95rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--black); }

/* ---------- numbered sections ---------- */
/* text-transform is set explicitly to none: each case-study page's own inline <style>
   still has an uppercase rule for these same classes (pre-dating this shared layer), and
   simply omitting the property here would let that earlier, equal-specificity rule win. */
.block__label,
.cs-section-label, .cs-brand-label, .cs-naming-label, .cs-status-label, .cs-type-label, .cd-label, .cn-label {
  font-style: normal; font-size: .95rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--blue); margin-bottom: 2rem; gap: 1rem;
}
.block__label::before,
.cs-section-label::before, .cs-brand-label::before, .cs-naming-label::before, .cs-status-label::before,
.cs-type-label::before, .cd-label::before, .cn-label::before {
  counter-increment: ed; content: counter(ed, decimal-leading-zero);
  color: var(--black); opacity: .4; font-variant-numeric: tabular-nums;
}
.cs-section-label::before, .cs-brand-label::before, .cs-naming-label::before, .cs-status-label::before,
.cs-type-label::before, .cd-label::before, .cn-label::before { margin-right: 1rem; }
.block { border-bottom: 1px solid rgba(11,11,11,.18); }
.block__lead, .cd-big {
  font-family: 'Geist', sans-serif; font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1.03; letter-spacing: -.035em;
  max-width: 22ch; color: var(--black);
}
.block__body, .cs-body { font-size: 1.04rem; font-weight: 400; line-height: 1.6; margin-top: 2.2rem; color: var(--black); }
.cs-body { margin-top: 0; }
.cs-naming-sub, .cd-sub, .cn-body { font-style: normal; font-size: 1rem; font-weight: 400; color: var(--black); opacity: .75; }
@media (min-width: 900px) {
  .block__body { columns: 2; column-gap: 3.2rem; }
  .block__body p { break-inside: avoid-column; }
}

/* ---------- pull quote: the blue page ---------- */
.pull, .cs-naming-quote {
  position: relative; max-width: none;
  margin: 3.4rem calc(var(--gutter) * -1) 2.4rem; padding: clamp(3.2rem, 8vw, 7.5rem) var(--gutter);
  border-left: 0; background: var(--blue); color: var(--white);
  font-family: 'Geist', sans-serif; font-weight: 300; font-size: clamp(2rem, 5.2vw, 4.8rem); line-height: 1.02; letter-spacing: -.04em;
}
.pull { margin-bottom: 0; }
.pull::before, .cs-naming-quote::before {
  content: "Pull quote:\A 48/52"; white-space: pre; display: block; margin-bottom: 2.2rem;
  font-size: .68rem; line-height: 1.35; font-weight: 500; letter-spacing: .02em; opacity: .6;
}
/* on the blue page the site blue would vanish, so the accent goes orange (as on the journal's back cover) */
.cs-naming-quote em { color: var(--orange); }

/* ---------- next project: cover-size type ---------- */
.next { padding-block: 5rem 6rem; text-align: left; }
.next__label { font-size: .68rem; letter-spacing: .14em; }
/* editorial.js shrinks long names so they never break mid-word */
.next__title {
  display: inline-block; white-space: nowrap;
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 12vw, 11rem); line-height: .82; letter-spacing: -.06em;
}
.next a:hover .next__title { color: var(--blue); }

@media (max-width: 760px) {
  .hero, .cs-header { padding-top: 7rem; }
  .hero::before, .cs-header::before { top: 7.2rem; }
  .hero::after, .cs-header::after { display: none; }
  .block__lead, .cd-big { max-width: none; }
}