/* Apps — the red palette. Repainting --paper and --ink is enough for the
   whole sheet to follow: the footer, the clock, the rules and the form
   all read from these two, so nothing else needs restating. */

:root {
  --paper: #6b0d04;          /* the page */
  --ink: #ff1a0a;            /* everything on it */
  --paper-rgb: 107 13 4;
  --ink-rgb: 255 26 10;
  --red: #ff1a0a;
  --rule: #ff1a0a;
  --face: #4a0903;           /* clock face, one step off the page */
}
/* style.css paints the canvas behind the body with the old --ink */
html { background: var(--paper); }

/* The shared sheet fills an empty tile with ink at 12%, which reads as a
   clear grey on paper but all but disappears on this maroon. Lifted
   until there is real art in them; once a screen is in, it covers it. */
.work-frame { background: rgb(var(--ink-rgb) / 0.22); }

/* The shared cursor is a near-black disc with a white chevron, which is
   a foreign pair of colours on this page. Same disc, repainted: burgundy
   ground, bright red arrow. */
.work-zone--prev { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='14' fill='%236b0d04'/%3E%3Cpath d='M19.5 11L13 17l6.5 6' fill='none' stroke='%23ff1a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 17 17, w-resize; }
.work-zone--next { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='14' fill='%236b0d04'/%3E%3Cpath d='M14.5 11l6.5 6-6.5 6' fill='none' stroke='%23ff1a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 17 17, e-resize; }


/* --- 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; }

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