/* Inner pages finish, design pass 2026-11-01: Work, About, Contact, Notes, 404,
   received. Owned by the inner-pages builder. Loads after finish.css on those pages.
   Type comes from the shared tokens in finish.css :root (--d1 page titles, --d2
   section heads, --d3 subheads, --lead, --body, --label-*, display tracking and
   leading). Nothing here sets its own display size or tracking. */

/* ───────── Shared: titles, leads, labels ───────── */
body:is([data-page="work"], [data-page="about"], [data-page="contact"], [data-page="notes"], [data-page="404"], [data-page="received"]) .page-hero__title {
  max-width: none !important; font-size: var(--d1) !important;
  line-height: var(--lh-display) !important; letter-spacing: var(--track-display-lg) !important;
}
body:is([data-page="work"], [data-page="about"], [data-page="contact"], [data-page="notes"], [data-page="404"], [data-page="received"]) .page-hero__sub {
  font-size: var(--lead); line-height: var(--lh-lead);
}
@media (max-width: 970px) {
  body:is([data-page="work"], [data-page="about"], [data-page="contact"], [data-page="notes"], [data-page="404"], [data-page="received"]) .page-hero__title { letter-spacing: var(--track-display) !important; }
}
/* Page-name kickers repeat the nav and the title (WORK, ABOUT, CONTACT, NOTES):
   declared ornament removal. Article, 404 and received kickers carry content and stay. */
body:is([data-page="work"], [data-page="about"], [data-page="contact"]) .page-hero .kicker,
body[data-page="notes"]:not(:has(.note-article)) .page-hero .kicker { display: none !important; }
/* The close on Work and About: the TACTIC lockup and its tagline repeat the footer
   brand block word for word (declared removal). Email and Start a project stay together. */
body:is([data-page="work"], [data-page="about"]) .cta-close__wordmark,
body:is([data-page="work"], [data-page="about"]) .cta-close__sub { display: none !important; }
body:is([data-page="work"], [data-page="about"]) .cta-close { padding-block: clamp(56px, 6.5vw, 104px) !important; }

/* ───────── Work: the work is the first frame ─────────
   The title band, the key, then the first shelf whole inside the first
   screen, starting near y=300 at 1440. Sound rides in the corner of the
   first open film (work-shelf-b.js); Scale is gone. */
body[data-page="work"] .page-hero { padding: 116px 0 20px !important; }
@media (min-width: 721px) {
  body[data-page="work"] .page-hero .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: end; }
}
body[data-page="work"] .page-hero__title { margin: 0 !important; }
body[data-page="work"] .page-hero__sub { max-width: 44ch; padding-bottom: 6px; }
body[data-page="work"] .case-section { padding-top: 0 !important; padding-bottom: clamp(56px, 6vw, 96px) !important; border-top: 0; }
body[data-page="work"] .case-section .container { position: relative; }
body[data-page="work"] .case-bar { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; align-items: center; }
body[data-page="work"] .case-dial { display: none !important; }
body[data-page="work"] .bookcase { --row-h: clamp(400px, calc(100svh - 326px), 680px); }
@media (min-width: 861px) {
  body[data-page="work"] .case-sound[data-case-sound-float] {
    position: absolute; left: 0; top: 0; z-index: 6; opacity: 0; pointer-events: none;
    background: rgba(10, 10, 10, 0.55); border-color: rgba(236, 233, 225, 0.42); color: var(--c-bone);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform 620ms var(--ease), opacity 240ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
  }
  body[data-page="work"] .case-sound[data-case-sound-float].is-placed { opacity: 1; pointer-events: auto; }
}
@media (hover: none), (max-width: 860px) { body[data-page="work"] .case-sound { display: none !important; } }
@media (prefers-reduced-motion: reduce) { body[data-page="work"] .case-sound[data-case-sound-float] { transition: none; } }
@media (max-width: 720px) {
  body[data-page="work"] .page-hero { padding: 112px 0 20px !important; }
  body[data-page="work"] .page-hero .container { gap: 16px; }
  /* the filters run as one row that scrolls sideways */
  body[data-page="work"] .case-bar { display: block; margin: 0 calc(var(--gutter) * -1) 12px; }
  /* edge fades say the row continues; the end pad lets the last filter
     scroll fully clear of the fade */
  body[data-page="work"] .case-index {
    flex-wrap: nowrap; overflow-x: auto; gap: 0 28px; padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 56px), transparent 100%);
  }
  body[data-page="work"] .case-index li:last-child { padding-right: 64px; }
  body[data-page="work"] .case-index::-webkit-scrollbar { display: none; }
  body[data-page="work"] .case-index li { flex: none; }
  body[data-page="work"] .case-index .case-index__btn { white-space: nowrap; }
  body[data-page="work"] .case-tools { width: auto; padding-inline: var(--gutter); justify-content: flex-start; }
}

/* ───────── About: one reading axis on a 12-column grid ─────────
   Labels hold columns 1 to 3; statements, lists and steps start at column 4
   (x=398 at 1440); second columns start at column 7 (x=732). Labels stay
   with their section while it scrolls. Sections separate by space. */
body[data-page="about"] { --ab-gap: 24px; }
body[data-page="about"] .page-hero { padding: 128px 0 clamp(56px, 6vw, 88px) !important; }
@media (min-width: 861px) {
  body[data-page="about"] .page-hero .container,
  body[data-page="about"] .about-split,
  body[data-page="about"] .about-starts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ab-gap); }
  body[data-page="about"] .page-hero .container { row-gap: 32px; align-items: start; }
  body[data-page="about"] .page-hero__title { grid-column: 1 / -1; margin: 0 !important; max-width: 20ch !important; }
  body[data-page="about"] .page-hero__sub { grid-column: 4 / 10; margin: 0; padding: 0; }
  body[data-page="about"] .about-split > .kicker { grid-column: 1 / 4; position: sticky; top: 112px; align-self: start; margin-top: 10px !important; }
  body[data-page="about"] .about-split > :not(.kicker) { grid-column: 4 / -1; }
  body[data-page="about"] .about-pair { grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--ab-gap); }
  body[data-page="about"] .about-pair > :nth-child(1) { grid-column: 1 / 4; }
  body[data-page="about"] .about-pair > :nth-child(2) { grid-column: 4 / 7; }
  body[data-page="about"] .about-starts { margin: 48px 0 0 !important; row-gap: 0; }
  body[data-page="about"] .about-starts li:nth-child(1) { grid-column: 4 / 7; }
  body[data-page="about"] .about-starts li:nth-child(2) { grid-column: 7 / 10; }
  body[data-page="about"] .about-starts li:nth-child(3) { grid-column: 10 / 13; }
}
body[data-page="about"] .about-block { border-top: 0; padding-block: clamp(44px, 5vw, 72px) !important; }
body[data-page="about"] .page-hero + .about-block { padding-top: clamp(32px, 4vw, 56px) !important; }
body[data-page="about"] .about-block:has(+ .cta-close) { padding-bottom: clamp(24px, 2.5vw, 40px) !important; }
body[data-page="about"] .about-h {
  max-width: 22ch; margin: 0 0 20px; font-size: var(--d2); font-weight: 500;
  line-height: var(--lh-display); letter-spacing: var(--track-display);
}
body[data-page="about"] .about-h3 { margin: 0 0 12px; font-size: var(--d3); line-height: 1.2; letter-spacing: -0.01em; }
body[data-page="about"] .about-p { max-width: 58ch; font-size: var(--body); line-height: var(--lh-body); }
body[data-page="about"] .about-pair { gap: 32px var(--ab-gap); }
body[data-page="about"] .about-starts { gap: 0 var(--ab-gap); border: 0; }
body[data-page="about"] .about-starts li { padding: 24px 0 0; border-top: 1px solid var(--c-line); }
/* the three starts are alternatives, not steps: their 01 02 03 go (declared removal) */
body[data-page="about"] .about-starts .about-num { display: none; }
body[data-page="about"] .about-num { font-size: var(--label-size); letter-spacing: var(--label-track); color: var(--label-color); }
body[data-page="about"] .about-split--steps { margin-top: clamp(64px, 6vw, 96px); }
body[data-page="about"] .about-steps li { padding-block: 20px; font-size: var(--body); line-height: var(--lh-body); grid-template-columns: 56px 1fr; }
body[data-page="about"] .about-steps li:first-child { border-top: 1px solid var(--c-line); }
@media (min-width: 1455px) { body[data-page="about"] .about-h { letter-spacing: var(--track-display-lg); } }
@media (max-width: 860px) {
  body[data-page="about"] .page-hero .container { display: grid; grid-template-columns: 1fr; gap: 24px; }
  body[data-page="about"] .page-hero__title { margin: 0 !important; }
  body[data-page="about"] .about-split { display: grid; grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  body[data-page="about"] .page-hero { padding: 112px 0 48px !important; }
  body[data-page="about"] .about-block { padding-block: 40px !important; }
  body[data-page="about"] .page-hero + .about-block { padding-top: 24px !important; }
  body[data-page="about"] .about-block:has(+ .cta-close) { padding-bottom: 16px !important; }
  body[data-page="about"] .about-starts { gap: 0; margin-top: 28px; }
  body[data-page="about"] .about-starts li { padding: 20px 0 22px; }
  body[data-page="about"] .about-split--steps { margin-top: 48px; }
  body[data-page="about"] .about-steps li { padding-block: 16px; grid-template-columns: 44px 1fr; }
}

/* ───────── Contact: the invitation and the form as one encounter ─────────
   The line runs whole on one line at desktop; the form answers it directly
   beneath, details beside it, inside the first screen. */
body[data-page="contact"] .page-hero { padding: 128px 0 clamp(36px, 3.6vw, 56px) !important; }
body[data-page="contact"] .page-hero__title { margin: 0 !important; }
body[data-page="contact"] .page-hero__title em { white-space: nowrap; color: #C9B894 !important; -webkit-text-fill-color: #C9B894 !important; }
body[data-page="contact"] .capabilities { border-top: 0; padding-block: 0 clamp(72px, 8vw, 120px) !important; }
body[data-page="contact"] .contact-grid { margin-top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 40px 64px; align-items: start; }
body[data-page="contact"] .contact-info { display: grid; gap: 32px; padding-top: 2px; }
body[data-page="contact"] .contact-info__block { margin: 0; }
body[data-page="contact"] .contact-info .kicker,
body[data-page="contact"] .contact-form .field label {
  display: block; margin: 0 !important; font-family: var(--f-mono); font-size: var(--label-size); font-weight: 400;
  line-height: 16px; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-color);
}
body[data-page="contact"] .contact-info .kicker { margin-bottom: 10px !important; }
body[data-page="contact"] .contact-info .kicker::before { content: none; display: none; }
body[data-page="contact"] .contact-info a,
body[data-page="contact"] .contact-info p:not(.kicker) { font-family: var(--f-display); font-size: var(--lead); line-height: 1.3; letter-spacing: -0.01em; color: var(--c-bone); margin: 0; }
body[data-page="contact"] .contact-form { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
body[data-page="contact"] .contact-form .field { display: grid; gap: 8px; }
body[data-page="contact"] .contact-form input { height: 48px; min-height: 48px; padding: 0; font-size: var(--body); line-height: 48px; }
body[data-page="contact"] .contact-form textarea { min-height: 120px; padding: 12px 0; font-size: var(--body); line-height: var(--lh-body); }
body[data-page="contact"] .contact-form .field:nth-of-type(3),
body[data-page="contact"] .contact-form .btn,
body[data-page="contact"] .contact-form .footer-brief__status { grid-column: 1 / -1; }
body[data-page="contact"] .contact-form .btn { justify-self: start; width: auto; margin-top: 4px; padding-inline: 28px; }
/* The footer brief is the same contact form as the page's own, one screen
   later: hidden on this page only (declared). */
body[data-page="contact"] .footer .footer-brief { display: none; }
@media (max-width: 720px) {
  body[data-page="contact"] .page-hero { padding: 112px 0 32px !important; }
  body[data-page="contact"] .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  body[data-page="contact"] .contact-info { gap: 22px; }
  body[data-page="contact"] .contact-form { grid-template-columns: 1fr; gap: 24px; }
  body[data-page="contact"] .capabilities { padding-bottom: 56px !important; }
}

/* ───────── Notes: the list is the page ─────────
   Each essay is one line at section-head size, weight 500, with its date
   and kind on the title's baseline. */
body[data-page="notes"] .page-hero { padding: 128px 0 clamp(48px, 5vw, 72px) !important; }
body[data-page="notes"] .capabilities { border-top: 0; }
body[data-page="notes"] .notes-list { border-top: 1px solid var(--c-line); }
body[data-page="notes"] .note-row {
  /* the date leads straight into the title on its baseline; the kind closes the line */
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline;
  min-height: 0; padding-block: clamp(32px, 3.4vw, 48px); gap: 0 40px;
}
body[data-page="notes"] .note-row__title {
  font-size: var(--d2); font-weight: 500; line-height: var(--lh-display); letter-spacing: var(--track-display);
  transition: color 240ms var(--ease);
}
body[data-page="notes"] .note-row:hover .note-row__title, body[data-page="notes"] .note-row:focus-visible .note-row__title { color: var(--c-bone-2); }
body[data-page="notes"] .note-row__date,
body[data-page="notes"] .note-row__cat { align-self: baseline; font-family: var(--f-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-color); }
body[data-page="notes"] .note-row__cat { text-align: right; }
/* The in-page subscribe repeats the footer's Field notes form one screen
   later: hidden (declared). */
body[data-page="notes"]:not(:has(.note-article)) .capabilities > .container > .kicker,
body[data-page="notes"]:not(:has(.note-article)) .capabilities .contact-form[data-newsletter] { display: none !important; }
body[data-page="notes"]:not(:has(.note-article)) .capabilities { padding-bottom: clamp(72px, 8vw, 120px) !important; }
@media (min-width: 1455px) { body[data-page="notes"] .note-row__title { letter-spacing: var(--track-display-lg); } }
@media (max-width: 720px) {
  body[data-page="notes"] .page-hero { padding: 112px 0 40px !important; }
  body[data-page="notes"]:not(:has(.note-article)) .capabilities { padding-bottom: 56px !important; }
  /* phone: the date sits on the title's first baseline, the kind beneath it */
  body[data-page="notes"] .note-row { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: none; align-items: baseline; gap: 6px 16px; padding-block: 28px; }
  body[data-page="notes"] .note-row__date { grid-column: 1; grid-row: 1; }
  body[data-page="notes"] .note-row__title { grid-column: 2; grid-row: 1 / span 2; }
  body[data-page="notes"] .note-row__cat { grid-column: 1; grid-row: 2; align-self: start; margin-top: 6px; text-align: left; }
}

/* ───────── Notes articles: an editorial page ─────────
   One centered column, capped at 34em, carries the kicker, title,
   standfirst, byline and body on the same edge. */
body[data-page="notes"]:has(.note-article) .page-hero { padding: 128px 0 0 !important; }
body[data-page="notes"]:has(.note-article) .page-hero .container,
body[data-page="notes"]:has(.note-article) .capabilities .container { max-width: calc(34em + 2 * var(--gutter)); }
body[data-page="notes"]:has(.note-article) .page-hero__title { margin: 0 0 24px !important; }
body[data-page="notes"]:has(.note-article) .page-hero__title em { color: inherit !important; -webkit-text-fill-color: currentColor !important; font-style: normal; font-weight: inherit; }
body[data-page="notes"]:has(.note-article) .page-hero__sub { max-width: none; margin: 0; color: var(--c-bone-2); }
body[data-page="notes"]:has(.note-article) .capabilities { border-top: 0; padding: 24px 0 clamp(80px, 8vw, 120px) !important; }
body[data-page="notes"] .note-article { max-width: 34em; margin: 0; padding: 0; font-family: var(--f-body); font-size: var(--body); line-height: var(--lh-body); color: var(--c-bone); }
body[data-page="notes"] .note-article p { margin: 0 0 1.2em; }
/* One mono line at the head (the kicker above the title). The byline
   under the standfirst reads as quiet sans, so the head has one label voice. */
body[data-page="notes"] .note-article .byline {
  margin: 0 0 36px; padding: 0; border: 0;
  font-family: var(--f-body); font-size: 15px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--c-bone-2); opacity: 1;
}
body[data-page="notes"] .note-article h2 {
  margin: 2em 0 0.6em; font-family: var(--f-display); font-weight: 500;
  font-size: var(--d3); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-bone);
}
body[data-page="notes"] .note-article .close-line {
  margin: 2em 0 0; font-family: var(--f-display); font-weight: 500;
  font-size: var(--d3); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-bone);
}
/* "TACTIC · A story-led creative consultancy" repeats the footer descriptor
   directly below it: hidden (declared). */
body[data-page="notes"] .note-article .category-line { display: none; }
body[data-page="notes"] .note-article .sources { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--c-line); }
body[data-page="notes"] .note-article .sources .byline {
  margin: 0 0 14px !important;
  font-family: var(--f-mono); font-size: var(--label-size); line-height: 16px; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--label-color);
}
body[data-page="notes"] .note-article .sources p:not(.byline) { font-size: 13px; line-height: 1.6; color: var(--c-muted); }
@media (max-width: 720px) {
  body[data-page="notes"]:has(.note-article) .page-hero { padding-top: 112px !important; }
  body[data-page="notes"] .note-article .byline { margin-bottom: 28px; }
}

/* ───────── 404 and received: one message, one screen ─────────
   The line holds the screen, anchored low like Home's opening line, with
   the footer at the foot of the viewport. */
body[data-page="404"], body[data-page="received"] { display: flex; flex-direction: column; min-height: 100svh; }
body[data-page="404"] .page-hero, body[data-page="received"] .page-hero {
  flex: 1 0 auto; display: flex; align-items: flex-end;
  padding: 140px 0 clamp(64px, 8vw, 120px) !important;
}
body[data-page="404"] .page-hero .container, body[data-page="received"] .page-hero .container { width: 100%; }
body[data-page="404"] .page-hero__title, body[data-page="received"] .page-hero__title { max-width: 15ch !important; margin: 0 0 28px !important; }
body[data-page="404"] .page-hero__title em, body[data-page="received"] .page-hero__title em {
  color: inherit !important; -webkit-text-fill-color: currentColor !important; font-style: normal; font-weight: inherit;
}
body[data-page="404"] .page-hero__sub, body[data-page="received"] .page-hero__sub { max-width: 52ch; margin: 0 0 36px; }
body[data-page="404"] .page-hero p:last-child, body[data-page="received"] .page-hero p:last-child,
body[data-page="404"] .page-hero .btn, body[data-page="received"] .page-hero .btn { margin: 0; }
body[data-page="404"] .footer, body[data-page="received"] .footer { flex: none; }
@media (max-width: 720px) {
  body[data-page="404"] .page-hero, body[data-page="received"] .page-hero { padding: 112px 0 56px !important; }
}

/* Contact: the invitation and form own the first screen; the footer starts below the fold
   instead of showing a clipped wordmark at its edge. Desktop only, where the form fits. */
@media (min-width: 900px) and (min-height: 700px) {
  body[data-page="contact"] .capabilities { min-height: calc(100svh - var(--contact-hero-h, 260px)); }
}