/* Site shell: the one navigation and the one footer lift for every inner page
   (impact, talks, contact). Both are taken from the homepage, not redesigned:

   - the nav is the homepage's architectural frame, square-cornered cells with a
     hairline edge, three links left, the monogram centred, TLH Talks and Get
     Started right, hidden while scrolling down and returned on the way up
     (healf-editorial.css / script.js updateHeader). Inner pages sit on paper
     rather than film, so the cells use ink on a pale glass instead of white on
     dark glass. Geometry, type and behaviour are identical;
   - the footer is footer.css's fixed .site-footer. The page is an opaque sheet
     lifted off it, exactly as .home-page main does.

   Load after styles.css and footer.css. Our Story is being built separately and
   still has its own header; it should adopt this file when it lands. */

/* Brand tokens, measured from the rendered homepage (index.html loads
   healf-editorial.css, which is what actually sets them there):
   Manrope for all visible type, body through display headlines; a white canvas;
   #5f3c91 for purple text, #4c3074 for actions. */
:root {
  --font-ui: "Inter", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Inter", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Inter", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Private names: pages keep their own --tlh-purple / --violet, which
     healf-editorial.css sets to the deeper action violet. */
  --shell-purple: #5f3c91;
  --shell-violet: #4c3074;
  --shell-ink: #17131c;
  --shell-muted: #665f6c;
  --shell-paper: #ffffff;
  --shell-mist: #faf7fc;
  --shell-lilac: #f4eef8;
  --shell-rule: rgba(35, 25, 42, .14);
}
.tlh-inner { font-family: var(--font-ui); color: var(--shell-ink); }

/* The homepage footer's own overrides (healf-editorial.css), so the footer is
   the same object on every page. */
.tlh-inner .site-footer {
  --footer-paper: #ffffff;
  --footer-line: var(--shell-rule);
  background: #ffffff;
}
.tlh-inner .site-footer::before {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(95, 60, 145, .09), transparent 22%),
    radial-gradient(ellipse at 50% 64%, rgba(36, 26, 46, .055), transparent 15%);
}
.tlh-inner .site-footer__button,
.tlh-inner .site-footer__button--secondary { border-radius: 999px; }

/* ——— Minimal inner-page navigation ——— */
.tlh-nav {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  min-height: 3.5rem;
  padding: .45rem;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.tlh-nav.is-hidden { transform: translate3d(0, -115%, 0); }
.tlh-nav > * { pointer-events: auto; }

.tlh-nav__group { display: none; }
.tlh-nav__actions { display: flex; grid-column: 1; grid-row: 1; justify-self: start; }
.tlh-nav__actions > a:not(.tlh-nav__cta) { display: none; }

.tlh-nav__group a,
.tlh-nav__actions a,
.tlh-nav__menu {
  display: inline-grid;
  min-width: 5.25rem;
  min-height: 44px;
  padding: .7rem 1rem;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5eee9;
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: var(--w-medium);
  letter-spacing: -.015em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity .25s ease;
}
.tlh-nav__group a:hover,
.tlh-nav__actions a:hover,
.tlh-nav__menu:hover {
  border-color: transparent;
  background: transparent;
  color: #f5eee9;
  opacity: .68;
}
.tlh-nav__group a[aria-current="page"],
.tlh-nav__actions a[aria-current="page"] {
  border-color: rgba(95, 60, 145, .5);
  background: rgba(236, 231, 243, .9);
  color: var(--shell-violet);
}
/* Enquire is the one nav item that is also a page, so on contact.html it was
   picking up the filled current-page chip above and reading as a button. It
   stays plain text; the colour alone marks it. */
.tlh-nav__actions .tlh-nav__cta[aria-current="page"] {
  border-color: transparent;
  background: transparent;
}

/* The inner-page header follows the quiet three-point reference composition. */
.tlh-nav__cta { gap: 0; grid-auto-flow: column; }
.tlh-nav__cta i { display: none; }
.tlh-nav__actions .tlh-nav__cta:hover { border-color: transparent; background: transparent; color: #f5eee9; }
.tlh-nav__cta i { font-style: normal; font-size: .95em; }

.tlh-nav__mark {
  display: grid;
  justify-self: center;
  width: 3.25rem;
  place-items: center;
  color: #f5eee9;
}
.tlh-nav__mark span {
  display: block;
  width: clamp(1.5rem, 1.65vw, 2rem);
  height: clamp(2.7rem, 3vw, 3.45rem);
  background: currentColor;
  -webkit-mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat;
  mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.tlh-nav__mark:hover span { transform: translateY(-2px); }

.tlh-nav.is-on-light .tlh-nav__actions a,
.tlh-nav.is-on-light .tlh-nav__menu,
.tlh-nav.is-on-light .tlh-nav__mark { color: var(--shell-ink); }
.tlh-nav.is-menu-open .tlh-nav__actions a,
.tlh-nav.is-menu-open .tlh-nav__menu,
.tlh-nav.is-menu-open .tlh-nav__mark { color: #f5eee9; }

.tlh-nav__menu { display: inline-grid; grid-column: 3; grid-row: 1; justify-self: end; gap: 0; min-width: 4.1rem; cursor: pointer; }
.tlh-nav__menu::before { content: "Menu"; }
.tlh-nav__menu[aria-expanded="true"]::before { content: "Close"; }
/* Closed it is the word alone; open it becomes CLOSE ✕, the two bars crossing. */
.tlh-nav__menu { gap: .55rem; grid-auto-flow: column; align-items: center; }
.tlh-nav__menu i { display: block; width: 1rem; height: 1px; background: currentColor; transition: transform .3s ease; }
.tlh-nav__menu[aria-expanded="true"] i:first-of-type { transform: translateY(1px) rotate(45deg); }
.tlh-nav__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-0px) rotate(-45deg); }
.tlh-nav__menu-bars { display: none; width: 1rem; height: 1px; }
.tlh-nav__menu[aria-expanded="true"] .tlh-nav__menu-bars { display: grid; }

.tlh-nav a:focus-visible,
.tlh-nav button:focus-visible { outline: 2px solid var(--shell-purple); outline-offset: 2px; }

/* Phone keeps the same three-item composition. */
@media (max-width: 767px) {
  .tlh-nav { grid-template-columns: 1fr auto 1fr; gap: 0; }
  .tlh-nav__mark { grid-column: 2; grid-row: 1; min-height: 44px; border: 0; background: transparent; }
  /* The phone mark is larger and its very fine silhouette is fractionally
     dilated so Safari cannot drop the right-hand upright during rasterisation. */
  .tlh-nav__mark span {
    width: 1.75rem;
    height: 3.162rem;
    filter:
      drop-shadow(.75px 0 0 currentColor)
      drop-shadow(-.75px 0 0 currentColor)
      drop-shadow(0 .55px 0 currentColor)
      drop-shadow(0 -.55px 0 currentColor);
  }
  .tlh-nav__actions { grid-column: 1; }
  .tlh-nav__actions .tlh-nav__cta { min-width: 4.75rem; padding-inline: .35rem; }
  .tlh-nav__menu { grid-column: 3; min-width: 3.75rem; padding-inline: .35rem; }
}

/* Desktop keeps the original page-sheet reveal over the full-screen footer.
   The compact normal-flow footer is scoped to mobile in footer.css. */
@media (min-width: 900px) {
  .tlh-inner main {
    position: relative;
    z-index: 3;
    margin-bottom: 100svh;
    background: inherit;
    box-shadow: 0 1.5rem 3rem rgba(23, 20, 29, .08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlh-nav, .tlh-nav__mark span, .tlh-nav__menu i { transition: none; }
}

/* Pages with their own global type rules must not restyle the shared nav or
   footer. */
.tlh-nav { --w-medium: 470; }
.tlh-inner .site-footer__intro h2 { font-family: var(--font-ui); text-wrap: initial; color: var(--footer-ink); }

/* ——— The site rules ———
   Homepage only (site-shell.js removes them elsewhere): four faint vertical
   rules, evenly spaced. Blending on the difference of a near-black shifts
   whatever is underneath by 10/255, so they read on plain light and dark
   ground alike and all but vanish over photographs. */
.site-grid-lines {
  position: fixed;
  z-index: 18;
  inset: 0;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}

.site-grid-line {
  position: absolute;
  inset-block: 0;
  left: calc(var(--line-index) * 100% / 5);
  width: 1px;
  background: rgb(10, 10, 10);
  /* Each rule has a separate vertical mask. A photograph can therefore cut
     the rules it crosses while the rules beside it continue through the page. */
  -webkit-mask-image: var(--lines-mask, linear-gradient(#000, #000));
  mask-image: var(--lines-mask, linear-gradient(#000, #000));
}
/* The homepage rules start at chapter two rather than over the opening, so the
   inner pages hold them back until the reader is clear of the opening too. */
.site-grid-lines.is-visible { opacity: 1; }

@media (max-width: 767px) {
  /* Five columns leave four interior rules on the narrower canvas. */
  .site-grid-line { left: calc(var(--line-index) * 100% / 5); }
  .site-grid-line:nth-child(n + 5) { display: none; }
  .site-grid-lines.is-visible { opacity: 1; }
}

/* The skip link, for the inner pages that do not load styles.css. Left
   unstyled it is an inline element in normal flow at the top of the body, so
   it pushed main down by its own line height and left a thin strip across the
   top of the page with the fixed footer showing through it. Parked off screen
   until it takes focus, as it is on the pages that do carry styles.css. */
.tlh-inner .skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: .65rem 1rem;
  background: #17131c;
  color: #fff;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: .8rem;
  text-decoration: none;
  transform: translateY(-200%);
}
.tlh-inner .skip-link:focus { transform: none; }

/* Monogram colour: brand purple over light ground, white over dark and with the
   menu open. The inline mark needs no mask dilation. */
.tlh-nav.is-mark-on-light .tlh-nav__mark { color: #5f3c91; }
.tlh-nav.is-on-light:not(.is-mark-on-light) .tlh-nav__mark { color: #fff; }
.tlh-nav.is-menu-open .tlh-nav__mark { color: #f5eee9; }
.tlh-nav__mark span.is-inline { filter: none !important; }
.tlh-nav__mark span.is-inline { background: none; -webkit-mask: none; mask: none; }
.tlh-nav__mark span.is-inline svg { display: block; width: 100%; height: 100%; overflow: visible; }