/* The direct home page, hybrid upgrade (25 October 2026): the hero's type, an index of the rest of the work and the
   leadership statements. The catalogue (hero and case files) is in catalogue.css; the ink, prints and text entrances
   shared with the case files are in effects.css. Loaded after effects.css, on direct.html only. */

/* ── the hero's type (its layout is the catalogue's) ── */
.hx-kicker { font: 500 11px/1.4 var(--ff-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 28px; }
.hx-lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--ink-mid); max-width: 32em; margin: 28px 0 32px; }
.hx-ctas { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.hx-ctas .btn-book { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 16px; border-radius: 2px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.hx-ctas .btn-book:hover { background: var(--ink); color: var(--gold); }
.hx-ctas .see { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); }
.hx-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--ink-mid); }
.hx-foot b { font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }
.motion-toggle { appearance: none; background: none; border: 0; padding: 0 2px; min-height: 44px; font: 500 13px var(--ff-body); color: var(--ink-mid); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }

/* ── 3. more of the work ── */
.more { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--divider); }
.more h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.025em; line-height: 1.05; margin: 12px 0 28px; }
.mw { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.mw a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .9fr) 24px; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--divider); color: var(--ink); text-decoration: none; transition: background .2s ease; }
.mw a:hover { background: var(--gold-pale); }
.mw .c { font-family: var(--ff-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; }
.mw .i { font-size: 15px; color: var(--ink-mid); line-height: 1.45; }
.mw .r { font-family: var(--ff-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.mw .r small { display: block; font-family: var(--ff-body); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--ink-mid); margin-top: 2px; }
.mw .a { color: var(--ink-mid); }
.more-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.clients { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-mid); max-width: 62em; }
.clients b { font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-right: 10px; }
.more-foot .see { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); align-self: flex-start; }

/* ── 4. how I lead, as statements ── */
.lead2 { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--divider); }
.lead2 h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.025em; line-height: 1.05; margin: 12px 0 14px; }
.lead2 .intro { max-width: 40em; color: var(--ink-mid); margin: 0 0 32px; }
.lead2 ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.lead2 li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 22px 0; border-top: 1px solid var(--divider); }
.lead2 .n { font-family: var(--ff-display); font-weight: 700; font-size: 15px; color: var(--ink-mid); padding-top: 4px; }
.lead2 h3 { font-family: var(--ff-display); font-weight: 700; font-size: 22px; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.lead2 p { grid-column: 2; margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-mid); }
/* the catalogue's label (assets/catalogue-pages.css) over .theme-bold .section-label, which is ink; and the crossing to Gallery 5 */
body.theme-bold .lead2 .cat-sec { font: 400 14px / 1.45 var(--ff-serif); letter-spacing: .16em; color: var(--bronze-ink); }
.lead2 .lead2-cross { max-width: 520px; margin-top: 28px; }
.lead2 .lead2-cross p, .lead2 .lead2-cross span { grid-column: auto; }

/* ── phones and tablets ── */
@media (max-width: 900px) {
  .hx-lede { margin: 18px 0 22px; }
  .hx-ctas .btn-book { flex: 1 1 100%; }
  .hx-foot { margin-top: 24px; }
  .mw a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .mw .i { grid-column: 1 / -1; grid-row: 2; }
  .mw .a { display: none; }
  .lead2 ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hx-kicker { margin-bottom: 10px; }
  .hx-ctas .btn-book { flex: 0 0 auto; min-height: 44px; }
}
@media (max-width: 900px) and (orientation: portrait) and (max-height: 700px) {
  .hx-kicker { margin-bottom: 12px; }
  .hx-lede { font-size: 15px; margin: 12px 0 16px; }
}

/* ── the home's own entrance details (the rest is in effects.css): the index's heavy top rule, and its arrows,
   which fade with their row and lean on hover, so they take one transition list for both ── */
@media (prefers-reduced-motion: no-preference) {
  .rv-on :where(.mw.rv-r)::before { top: -2px; height: 2px; background: var(--ink); }
  .rv-on .mw .a.rv-f { transition: opacity .9s cubic-bezier(.22, 1, .36, 1) var(--rd, 0ms), filter .9s cubic-bezier(.22, 1, .36, 1) var(--rd, 0ms), translate .2s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.22, 1, .36, 1) var(--rd, 0ms); }
}

/* ── press and hover: the button gives under the finger; a link's arrow leans the way it goes ── */
.hx-ctas .btn-book { transition: background .2s ease, color .2s ease, transform .16s cubic-bezier(.2, .8, .2, 1); }
.hx-ctas .btn-book:active { transform: scale(.97); }
.cf-link span[aria-hidden], .see span[aria-hidden] { display: inline-block; }
.cf-link span[aria-hidden], .see span[aria-hidden] { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.mw .a { transition: translate .2s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .cf-link:hover span[aria-hidden], .more-foot .see:hover span[aria-hidden] { transform: translateX(3px); }
  .mw a:hover .a { translate: 3px 0; }
}

/* ═══ The lower half keeps the hero's system (25 October 2026, Iain: "go with B and D, then A") ═══
   B: every list below the book is the one ledger, the index of "Eight more briefs": a heavy rule on top, hairlines between,
   a numbered row. D: the museum's label grammar, set in its Marcellus and bronze ink: an accession mark on a case file
   (year, then the file's number). A: the page ends on the book's back board. */
body.theme-bold { --ff-serif: 'Marcellus', 'Times New Roman', serif; --bronze-ink: #6E4B21; }

/* D: accession marks, on the book's pages and above each case file */
.pg-acc { display: block; margin-top: .8cqw; font: 400 max(12px, 3.3cqw) / 1.3 var(--ff-serif); letter-spacing: .08em; text-transform: none; color: var(--bronze-ink); }
.cf-no .acc { font: 400 14px / 1 var(--ff-serif); letter-spacing: .06em; text-transform: none; color: var(--bronze-ink); }

/* B: the more-briefs index gets its running numbers, 06 to 13, so the page's ledger counts on from the five case files */
.mw .k { font: 600 12px / 1 var(--ff-body); letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--ink-mid); }
.mw--n a { grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .9fr) 24px; }

/* B: the essays as rows of the same ledger: the cover the museum's reading room shelves, the tag over the title, the opening lines */
.persp-grid--strip { display: block; margin-top: clamp(28px, 4vw, 48px); }
.mw--essays a { grid-template-columns: 132px minmax(0, 1.2fr) minmax(0, 1.8fr) 24px; gap: 24px 28px; align-items: center; padding: 18px 0; }
.mw--essays .t { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gold-pale); }
.mw--essays .t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw--essays .tg { display: block; margin-bottom: 6px; font: 500 11px / 1.4 var(--ff-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.mw--essays .ti { display: block; }
.mw--essays .i { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* B: the four leadership statements as the same ledger: a yellow index tab for each number, the statement, then its reason */
.lead2 ol { display: block; border-top: 2px solid var(--ink); }
.lead2 li { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.5fr); gap: 4px 28px; align-items: baseline; }
.lead2 li:first-child { border-top: 0; }
.lead2 .n { justify-self: start; padding: 4px 8px; background: var(--gold); color: var(--ink); font-size: 13px; line-height: 1; letter-spacing: .04em; }
.lead2 p { grid-column: 3; margin: 0; }
.lead2 h3 { font-size: 24px; }
@media (prefers-reduced-motion: no-preference) { .rv-on :where(.lead2 ol.rv-r)::before { top: -2px; height: 2px; background: var(--ink); } }

/* the recommendation's link read as gold on cream (2.6:1): ink, with the rule the index rows use */
.rec-more { color: var(--ink); border-bottom-color: var(--ink); }
.rec-more:hover { border-bottom-color: var(--gold); }

/* A: the back board. The page opened on a clothbound book; it closes on that book's back cover: the cloth, the yellow band with
   the one thing to do pressed into it, and the colophon line a printed book has */
.contact { padding: clamp(64px, 10svh, 120px) 0 0; color: #F4F1EA; background: radial-gradient(120% 90% at 30% 30%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35)), #151515 url(img/home/cloth-tile.webp) 0 0 / 512px; }
.cb-inner { max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; text-align: left; }
body.theme-bold .cb-label { font: 400 16px / 1.45 var(--ff-serif); letter-spacing: .16em; text-transform: uppercase; color: #E0B982; }   /* over .theme-bold .section-label, which is ink */
.contact-heading { margin: 0 0 1.25rem; color: #F4F1EA; letter-spacing: -.035em; }
.contact .contact-sub { max-width: 34em; margin: 0 0 1rem; color: #B9B5AC; }
.contact .cb-sub2 { font-size: .95rem; margin-bottom: 0; }
.cb-band { display: block; margin-top: clamp(40px, 8svh, 80px); height: clamp(88px, 13svh, 132px); background: #F2B01E url(img/home/band-tile.webp) 0 50% / auto 100% repeat-x; color: #4A2F00; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 -1px 0 rgba(0, 0, 0, .5); transition: filter .2s ease; }
.cb-band-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box;
  font: 800 clamp(20px, 2.4vw, 32px) / 1.2 var(--ff-display); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 232, 160, .6), 0 -1px 0 rgba(70, 36, 0, .3); }
.cb-band b { font-weight: 800; }
.cb-band i { font-style: normal; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.cb-band:active { filter: brightness(.94); }
.cb-band:focus-visible { outline: 3px solid #0E0E0C; outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) { .cb-band:hover { filter: brightness(1.05); } .cb-band:hover i { transform: translateX(6px); } }
.cb-colophon { margin: 0; padding: 22px var(--gutter) 30px; max-width: var(--max-w); box-sizing: border-box; margin-inline: auto; font-size: 12px; letter-spacing: .08em; color: #ABA79E; }   /* 4.6:1 on the cloth; #9B978E was 4.2:1 */
@media (prefers-reduced-motion: no-preference) {
  .rv-on .cb-band { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.16, 1, .3, 1), filter .2s ease; }
  .rv-on .cb-band.rv-go { clip-path: inset(0 0 0 0); }
}

@media (max-width: 900px) {
  .mw--n a { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .mw--n .i { grid-column: 2 / -1; }
  .mw--essays a { grid-template-columns: 88px minmax(0, 1fr); gap: 10px 16px; align-items: start; }
  .mw--essays .t { grid-row: 1; }
  .mw--essays .c { grid-column: 2; grid-row: 1; }
  .mw--essays .i { grid-column: 1 / -1; grid-row: 2; }
  .lead2 li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .lead2 p { grid-column: 2; }
  .lead2 h3 { font-size: 22px; }
  .cb-band-in { letter-spacing: .1em; }
}