/* Times Bridge, drama version: case.css (Builder P2). The six case pages and the credits page (SPEC H): solid night
   ground, night-ink, the home's tokens, 12-column grid and chrome (top bar, menu, footer) from style.css; no canvas, no sky,
   no still. Nothing boxed, nothing centred, no hairlines; the only enclosures are the pictures. */
html { background: var(--night); }

/* top bar: on the night ground the fixed bar is night too, so body text passes under it instead of through the
   wordmark and the link; the mark with the wordmark text beside it (allowed here: there is no 150 px name) */
.top { background: var(--night); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; font-size: var(--fs-body); font-weight: 500; letter-spacing: -0.01em; line-height: 1; }
.brand .mark { flex: none; }

/* reveals (F.2 on these pages): a plain 500 ms fade, none under reduced motion; the class is added by case.js (html.js) */
html.js:not(.reduced) [data-fade] { opacity: 0; }
html.js:not(.reduced) [data-fade].is-in { opacity: 1; transition: opacity 500ms var(--ease-reveal); }

/* the title block (H.1.2): 60svh with the content at the bottom */
.case-title { min-height: 60svh; align-content: end; padding-top: calc(var(--margin) + 44px + 48px); padding-bottom: 56px; }
.case-title > * { grid-column: 1 / 9; }
.case-title h1 { margin-top: 20px; font-size: var(--fs-head); font-weight: 400; letter-spacing: -0.03em; line-height: 0.98; }
.case-title__result { margin-top: 28px; font-size: var(--fs-statement); letter-spacing: -0.015em; line-height: 1.2; max-width: 30ch; }
.case-title__meta { margin-top: 28px; }

/* intro and role, story and milestones (H.1.3 to H.1.5) */
.case-body { padding-block: 40px 96px; row-gap: 72px; }
.case-intro { grid-column: 1 / 8; font-size: var(--fs-lead); letter-spacing: -0.01em; line-height: 1.3; max-width: 44ch; }
.case-role { grid-column: 8 / 13; color: var(--night-muted); max-width: 34ch; }
.case-story { grid-column: 1 / 8; max-width: 58ch; }
.case-story p + p { margin-top: 1em; }
.case-marks { grid-column: 8 / 13; margin: 0; padding: 0; list-style: none; }
.case-marks li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; font-size: var(--fs-lead); letter-spacing: -0.01em; line-height: 1.3; }
.case-marks li + li { margin-top: 24px; }

/* pictures (H.1.6): two or three per row, contain-fit on the night */
.case-pics { padding-block: 0 96px; }
.pics { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gutter); }
.pic { min-width: 0; }
.pic--4 { grid-column: span 4; }
.pic--6 { grid-column: span 6; }
.pic--12 { grid-column: span 12; }
.pic img { width: 100%; aspect-ratio: 460 / 259; object-fit: contain; background: var(--night); }
.pic figcaption { margin-top: 12px; max-width: 56ch; }

/* the quotation and the logo (H.1.7) */
.case-quote { padding-block: 0 96px; }
.quote { grid-column: 1 / 10; }
.quote blockquote p { font-size: var(--fs-statement); letter-spacing: -0.015em; line-height: 1.2; max-width: 28ch; }
.quote .mono { margin-top: 20px; }
.quote__logo { grid-column: 10 / 13; align-self: start; padding-top: 0.5em; color: var(--night-ink); }
.quote__logo svg { display: block; height: 28px; width: auto; opacity: 0.7; }   /* on the svg: the reveal rule owns the block's opacity */
.quote__logo--alone { grid-column: 1 / 4; padding-top: 0; }

/* other stories (H.1.8) */
.case-others { padding-block: 0 120px; row-gap: 32px; }
.case-others h2 { grid-column: 1 / 13; font-size: var(--fs-statement); letter-spacing: -0.015em; line-height: 1.2; }
.others { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px var(--gutter); }
.others li { min-width: 0; }
.others a { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.others .small { display: block; margin-top: 6px; color: var(--night-muted); }

/* credits (H.2) */
.credits-title { min-height: 40svh; align-content: end; padding-top: calc(var(--margin) + 44px + 48px); padding-bottom: 56px; }
.credits-title h1 { grid-column: 1 / 9; font-size: var(--fs-head); font-weight: 400; letter-spacing: -0.03em; line-height: 0.98; }
.credits { padding-block: 40px 96px; }
.credits__list { grid-column: 1 / 11; }
.credits__list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gutter); }
.credits__list > div + div { margin-top: 48px; }
.credits__list dt { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; max-width: 26ch; }
.credits__list dd { max-width: 60ch; }
.credits__list dd p + p { margin-top: 8px; }
.credits__list .small { color: var(--night-muted); }
.credits__file { color: var(--night-muted); }
.credits-also { padding-block: 0 120px; row-gap: 32px; }
.credits-also h2 { grid-column: 1 / 13; font-size: var(--fs-statement); letter-spacing: -0.015em; line-height: 1.2; }
.also { grid-column: 1 / 11; font-size: var(--fs-lead); letter-spacing: -0.01em; line-height: 1.3; }
.also li + li { margin-top: 16px; }
.also .small { display: block; margin-top: 4px; color: var(--night-muted); }

/* tablets, 768 to 1023 */
@media (min-width: 768px) and (max-width: 1023px) {
  .case-title > * { grid-column: 1 / 11; }
  .case-intro { grid-column: 1 / 11; }
  .case-role { grid-column: 1 / 9; }
  .case-story, .case-marks { grid-column: 1 / 10; }
  .pic--4 { grid-column: span 6; }
  .quote { grid-column: 1 / 11; }
  .quote__logo, .quote__logo--alone { grid-column: 1 / 5; padding-top: 0; margin-top: 40px; }
  .others { grid-template-columns: 1fr; gap: 24px; }
  .credits-title h1 { grid-column: 1 / 11; }
  .credits__list, .also { grid-column: 1 / 13; }
}

/* phones, to 767: one column in source order; pictures one per row */
@media (max-width: 767px) {
  .case-title { padding-top: calc(var(--margin) + 44px + 32px); padding-bottom: 40px; }
  .case-title > *, .case-intro, .case-role, .case-story, .case-marks, .pics, .quote, .quote__logo, .quote__logo--alone, .case-others h2, .others, .credits-title h1, .credits__list, .credits-also h2, .also { grid-column: 1 / -1; }
  .case-body { padding-block: 24px 72px; row-gap: 48px; }
  .case-pics, .case-quote { padding-bottom: 72px; }
  .pics { gap: 40px var(--gutter); }
  .pic--4, .pic--6, .pic--12 { grid-column: span 12; }
  .quote__logo, .quote__logo--alone { padding-top: 0; margin-top: 32px; }
  .case-others { padding-bottom: 96px; }
  .others { grid-template-columns: 1fr; gap: 24px; }
  .credits__list > div { grid-template-columns: 1fr; row-gap: 12px; }
  .credits__list > div + div { margin-top: 40px; }
}