/* Consulting — the studio's paper palette, unchanged from the main site.
   Only the footer differs: it stays on paper rather than turning red. */


/* --- the faces, served from this folder -----------------------------
   style.css declares these with paths relative to itself, so loaded
   from the main domain they resolve there too — and a cross-origin
   font needs a CORS header or the browser refuses it outright. Rather
   than make these pages depend on a server change, the faces sit here
   and these declarations override the shared ones. Only the type is
   duplicated; the stylesheet and the scripts are still shared. */

@font-face {
  font-family: 'Inter';
  src: url('../type/inter-variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'MonumentGrotesk-Mono';
  src: url('../type/ABCMonumentGroteskSemi-Mono-Regular.woff2') format('woff2'),
       url('../type/ABCMonumentGroteskSemi-Mono-Regular.woff') format('woff');
  font-display: block;
}
@font-face {
  font-family: 'AppleGaramond-Light';
  src: url('../type/AppleGaramond-Light.woff') format('woff');
  font-display: block;
}
@font-face {
  font-family: 'AppleGaramond-LightItalic';
  src: url('../type/AppleGaramond-LightItalic.woff') format('woff');
  font-display: block;
}

/* --- the shared subdomain layout ------------------------------------
   Everything structural comes from the main stylesheet; this file only
   adds what these one-page sites need and repaints the palette. Loaded
   after style.css, so :root here wins. */

.sub-head { padding: var(--pad) var(--pad) 0; border-bottom: 1px var(--ink) solid; }
.sub-wordmark {
  display: block;
  color: var(--ink);
  /* the lockup is the link, so no underline wipe from .link-hover */
  text-decoration: none;
}
.sub-wordmark svg { display: block; width: 100%; height: auto; }

/* Only the content column is capped, the same way the main site does
   it: the lockup and the footer run the full width of the window on
   their --pad gutters, and <main> is held to --maxw and centred by the
   shared rule. .sub-main deliberately sets nothing — overriding that
   rule was what let the tiles run edge to edge. */

/* The tagline sits under the lockup on the same spec as the main site's
   settled masthead — .hero-copy supplies the size, measure and centring;
   only the top margin is added, since .hero-copy's `margin: auto` only
   does anything inside the hero's flex column. */
.sub-tagline {
  /* 59px top and bottom at 1440 — measured off the home page once the
     hero has snapped down, where the copy sits 59px under the lockup
     and 59px off the bottom of the pane. */
  margin-top: clamp(1.75rem, 4.1vw, 3.7rem);
  margin-bottom: clamp(1.75rem, 4.1vw, 3.7rem);
  margin-inline: auto;
  /* Smaller than the home page's 40px: these are secondary pages and it
     was reading as loud as the masthead. 28px at 1440. */
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
}
@media (max-width: 760px) {
  .sub-tagline br { display: none; }
}

.sub-section .intro-copy { max-width: 72rem; }
.sub-note { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* the two reference columns on the consulting page */
.sub-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4.5vw, 3.5rem);
}
.sub-list {
  list-style: none;
  margin-top: 0.9rem;
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* The footer is the main site's, so it arrives red. These pages carry
   their own colour straight through instead of breaking into a band. */
.footer { background: var(--paper); color: var(--ink); border-top: 1px var(--ink) solid; }

/* The shared sheet paints the second hand white, which works on the
   main site's red footer band and disappears on paper. The studio red
   is the only other colour the clock uses, so it takes that here. */
aod-clock [data-el='second'] { fill: var(--red); }

@media (max-width: 760px) {
  .sub-cols { grid-template-columns: 1fr; }
}