/* CurtainCall, assets/credits.css
   The footer as end credits (2026-10-11, Eric's pick over the four-column footer). Written to travel: the homepage links
   it after home.css, and the seven other pages (the case-study index, the three case studies, privacy, terms, cookies)
   link it after pages.css and carry the same <footer class="credits">, copied from index.html. Cloaked, Sulver's Journey
   and the three legal pages add one last .credits-fine line of their own (a rights holder's copyright, or the legal
   pages' "not legal advice" line); otherwise the eight copies are identical, so a change to the markup is made on all
   eight. Everything the credits need is here or in a file every page already loads:
     - assets/tokens.css (every colour, size and space below is a token; nothing raw),
     - assets/comic.css and assets/comic.js (the "Book a demo" button), and the hidden #booking-note span its
       aria-describedby points at, which each page must carry once,
     - the page's own global :focus-visible ring (home.css and pages.css both have one).
   Every class is .credits-*, so nothing in home.css or pages.css (.logo, .nav-*) can reach in, and every link in the
   markup is absolute (/#work): home.js treats it as an in-page link on the homepage, and on the other pages, where no
   script intercepts it, it simply navigates to that section of the homepage. pages.css adds only the gap above the
   credits (.credits margin-top), because there the page ends on its call to action rather than on the end card.
   The roll is set the way a film's end credits are: roles in small tracked caps, right-aligned, and names in the display
   serif, left-aligned, meeting at a centre gutter. It is the slate's printed type again (labels in Inter, values in
   Instrument Serif). The team line opens it, at reading size, because it is the line most worth reading. On a phone each
   role stacks over its names, centred. The production mark closes it, then the copyright and the rights note. */

/* Instrument Serif, the display face. home.css and pages.css declare it too; the credits keep their own
   copy so the footer works on any page that links this file (the same font file, so it still downloads once). font-weight
   is literal on purpose: @font-face descriptors cannot take var(). */
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

.credits { position: relative; padding: var(--space-7) var(--gutter); border-top: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); text-align: center; }
.credits-inner { max-width: 880px; margin: 0 auto; }
.credits-team { max-width: 54ch; margin: 0 auto; font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--text-body); text-wrap: balance; }

.credits-nav { margin-top: var(--space-7); }
/* The homepage drops the team line (2026-10-14, Eric: the band under the hero shows the same names), so there the
   nav opens the credits and the footer's own padding is the only space above it. */
.credits-nav:first-child { margin-top: 0; }
.credits-roll { display: grid; gap: var(--space-1); }
.credits-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); align-items: baseline; }
.credits-row dt { text-align: right; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); }
.credits-row dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-4); margin: 0; text-align: left; }
.credits-row dd a:not(.btn-comic) { display: inline-flex; align-items: center; min-height: 36px; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); color: var(--text-primary); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out); }
.credits-row dd .btn-comic { align-self: center; margin: var(--space-1) 0; }
/* Wider hit areas for the short names ("FAQ" was 26.7px wide on a phone): 8px of padding each side, given back by a
   negative margin, so nothing moves and neighbours' areas meet in the 16px gap between them (review B6.5). */
.credits-row dd a:not(.btn-comic) { padding-inline: var(--space-2); margin-inline: calc(-1 * var(--space-2)); }

.credits-logo { display: inline-flex; align-items: center; gap: .5556em; min-height: var(--tap-min); margin-top: var(--space-7); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-none); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out); }
.credits-logo svg { width: 1.5556em; height: 1.5556em; flex: none; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base) var(--ease-out); }
.credits-logo span { background: var(--accent-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.credits-fine { max-width: 62ch; margin: var(--space-2) auto 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-secondary); text-wrap: balance; }
.credits-logo + .credits-fine { margin-top: var(--space-3); }

/* States: hover warms (pointer only), pressed scales, focus is the page's global ring, with the small corner a text
   link's ring takes (the global rule sets no radius since 2026-10-12, so the comic button's ring stays square). */
:is(.credits-row dd a:not(.btn-comic), .credits-logo):focus-visible { border-radius: var(--radius-s); }
@media (hover: hover) and (pointer: fine) {
  .credits-row dd a:not(.btn-comic):hover { color: var(--accent-bright); text-decoration-color: currentColor; } /* the one link hover colour (B8.6) */
  .credits-logo:hover svg { transform: rotate(-8deg); }
}
.credits-row dd a:not(.btn-comic):active, .credits-logo:active { transform: scale(var(--state-pressed-scale)); }

/* A phone or a narrow window: each role over its names, centred, and every link a full tap target. */
@media (max-width: 640px) {
  .credits-team { font-size: var(--text-md); }
  .credits-nav { margin-top: var(--space-6); }
  .credits-roll { gap: var(--space-4); }
  .credits-row { grid-template-columns: 1fr; row-gap: var(--space-1); }
  .credits-row dt { text-align: center; }
  .credits-row dd { justify-content: center; }
}
/* Full tap targets on a narrow window and on any touch screen, whatever its width: an iPad held sideways (1112px) got the
   mouse's 36px links with 4px between the rows (review B6.2). */
@media (max-width: 900px), (pointer: coarse) {
  .credits-row dd a:not(.btn-comic), .credits-row dd .btn-comic { min-height: var(--tap-min); }
}
@media (min-width: 641px) and (pointer: coarse) {
  .credits-roll { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .credits-row dd a, .credits-logo, .credits-logo svg { transition-duration: .001ms; }
}