/*
 * Gallery Cabinet — base layer
 * Work package W3.
 *
 * Grid, typography and the containment rules that make defects D-2 and D-3
 * structurally impossible rather than a thing to remember on each page.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------- document ---
 * The only rules in the system that are not scoped under .nc, because they
 * apply to markup WordPress emits above the body class or with its own class
 * names. They arrived here when the transitional theme.css was retired. */

/* A full-bleed band is a child of .wp-site-blocks; without this a band that
   overshoots by a pixel scrolls the whole document sideways. `clip`, not
   `hidden`: per the CSS Overflow spec, pairing overflow-x:hidden with
   overflow-y:visible computes the "visible" axis to `auto` instead (they
   can't actually differ that way), and `auto` still creates a scroll
   container that silently breaks `position: sticky` on the header inside it.
   `clip` is exempt from that forcing rule -- it clips the same as `hidden`
   without turning this element into a scroll container. */
.wp-site-blocks { overflow-x: clip; overflow-y: visible; }

a { transition: color var(--nc-motion-micro) var(--nc-easing); }

/* The header's skip link uses WordPress's own class name. Block themes do load
   core's rules for it, but not its visible-on-focus treatment in this palette,
   and a skip link that cannot be seen once focused helps nobody. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--nc-paper);
  clip-path: none;
  color: var(--nc-ink);
  display: block;
  height: auto;
  left: var(--nc-space-2);
  padding: var(--nc-space-3);
  top: var(--nc-space-2);
  width: auto;
  z-index: 100000;
}

/* D-2 / D-3: nothing may exceed its column. Applied at the root so a component
   cannot opt out by omission. min-width:0 defeats the min-content floor that
   otherwise lets a long word push a grid or flex item past its track. */
.nc {
  min-width: 0;
}

.nc *,
.nc *::before,
.nc *::after {
  min-width: 0;
  max-width: 100%;
}

.nc {
  background: var(--nc-paper);
  color: var(--nc-ink);
  font-family: var(--nc-font-operational);
  font-size: var(--nc-size-body);
  line-height: var(--nc-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ layout */

/* THE containment rule. There is exactly one content box on this site, and
   everything resolves to it: the header, the hero, the curated questions, every
   band's grid, and the footer.
 *
 * This replaced three competing idioms that produced three different left edges
 * at the same viewport width — measured at 1920px: the header and hero started
 * their content at 60px (gutter applied to a full-width box), the footer at
 * 233px (min(92vw, max) centred, no gutter), and every page title, cabinet and
 * paragraph at 293px (gutter applied inside the max-width box). Nothing on the
 * site lined up with anything else, and full-bleed sections ran to the screen
 * edge on wide monitors.
 *
 * Backgrounds may still bleed — that is what .nc-band and the header bar are
 * for. Content may not. */
.nc-container,
.nc-grid,
.nc-shell,
.nc-header__inner,
.nc-hero,
.nc-questions {
  width: 100%;
  max-width: var(--nc-content-max);
  margin-inline: auto;
  padding-inline: var(--nc-gutter);
}

/* The grid every band aligns to. Full-bleed sections use nc-band; their inner
   content still resolves to these columns, so dividing rules land on grid lines. */
.nc-grid {
  display: grid;
  grid-template-columns: repeat(var(--nc-columns), minmax(0, 1fr));
  gap: var(--nc-column-gap);
}

.nc-band {
  width: 100%;
  padding-block: var(--nc-section-padding);
  /* Bands must abut. WordPress's flow layout puts a blockGap margin between
     sibling blocks, which between two bands is a strip of the body ground
     showing as a seam between two colours. The templates also set blockGap to
     zero on their <main>; this is the system's own guarantee. */
  margin-block: 0;
}

/* A band's padding is the inset from its own edge, so where two bands meet both
   insets apply and the space doubles — 256px, which reads as a break in the
   page rather than a change of section. Each side gives up half at a boundary,
   so the separation between any two bands is one section padding, not two.
   Both halves land on the spacing scale. The first and last bands keep their
   full inset against the header and footer. */
.nc-band + .nc-band { padding-top: calc(var(--nc-section-padding) / 2); }
.nc-band:has(+ .nc-band) { padding-bottom: calc(var(--nc-section-padding) / 2); }

.nc-band--paper { background: var(--nc-paper); }
.nc-band--stone { background: var(--nc-stone); }
.nc-band--dark {
  background: var(--nc-charcoal);
  color: var(--nc-on-dark);
}

.nc-band--dark .nc-eyebrow { color: var(--nc-on-dark-meta); }
.nc-band--dark .nc-heading,
.nc-band--dark .nc-title { color: var(--nc-on-dark); }
.nc-band--dark .nc-prose,
.nc-band--dark .nc-note { color: var(--nc-on-dark-meta); }

/* Column spans. Explicit rather than ad hoc, so a heading can never be given a
   width that overlaps its neighbour (the D-2 failure in the Cravenverse specimen). */
.nc-span-3  { grid-column: span 3; }
.nc-span-4  { grid-column: span 4; }
.nc-span-5  { grid-column: span 5; }
.nc-span-6  { grid-column: span 6; }
.nc-span-7  { grid-column: span 7; }
.nc-span-8  { grid-column: span 8; }
.nc-span-12 { grid-column: 1 / -1; }

/* Every column is a query container.
 *
 * A cabinet's composition depends on how much room IT has, not on how wide the
 * window is: the same three-cell cabinet is comfortable across twelve columns
 * at 1440 and impossible inside seven columns at 900. Keying its breakpoints to
 * the viewport made a component that was correct on the homepage and broken on
 * /work/ at the same width. */
.nc-span-3,
.nc-span-4,
.nc-span-5,
.nc-span-6,
.nc-span-7,
.nc-span-8,
.nc-span-12,
.nc-col-5-end,
.nc-col-6-end,
.nc-col-7-end,
.nc-content {
  container-type: inline-size;
  container-name: nc-col;
}

/* Placed spans, for the asymmetric compositions the direction calls for.
   Use these rather than adding an inline grid-column-start next to a span
   utility: `grid-column: span 7` sets the START to `span 7`, so a later
   `grid-column-start: 6` overwrites it and silently yields a ONE-column item.
   That failure is invisible until something inside overflows. */
.nc-col-6-end  { grid-column: 6 / -1; }
.nc-col-7-end  { grid-column: 7 / -1; }
.nc-col-5-end  { grid-column: 5 / -1; }

@media (max-width: 899px) {
  .nc-grid { --nc-columns: 8; }
  .nc-span-3, .nc-span-4, .nc-span-5, .nc-span-6, .nc-span-7, .nc-span-8,
  .nc-col-5-end, .nc-col-6-end, .nc-col-7-end {
    grid-column: 1 / -1;
  }
}

@media (max-width: 599px) {
  .nc-grid { --nc-columns: 4; }
}

/* -------------------------------------------------------------- typography */

.nc-eyebrow {
  margin: 0;
  font-family: var(--nc-font-operational);
  font-size: var(--nc-size-meta);
  line-height: var(--nc-leading-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--nc-clay-text);
}

.nc-eyebrow--quiet { color: var(--nc-ink-muted); }

/* One uniform rule for every label-over-title pair on the site. Padding (not
   margin) so it adds to, and never fights, the margins individual layouts set. */
.nc-eyebrow + :is(h1, h2, h3, h4, .nc-display, .nc-heading, .nc-title, .nc-page-title) {
  padding-top: var(--nc-eyebrow-title-gap);
}

.nc-display {
  margin: 0;
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-display-xl);
  line-height: var(--nc-leading-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 18ch;
}

.nc-page-title {
  margin: 0;
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-title-l);
  line-height: var(--nc-leading-title);
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 14ch;
}

.nc-heading {
  margin: 0;
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-display-l);
  line-height: var(--nc-leading-heading);
  font-weight: 400;
  text-wrap: balance;
  max-width: 22ch;
}

/* A smaller, wider measure for a heading that needs to run further across
   its column rather than stack into several short display-size lines. */
.nc-heading.nc-heading--wide {
  font-size: var(--nc-size-title-m);
  max-width: 38ch;
}

.nc-title {
  margin: 0;
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-title-m);
  line-height: var(--nc-leading-heading);
  font-weight: 400;
  text-wrap: balance;
}

.nc-prose {
  margin: 0;
  color: var(--nc-ink-muted);
  max-width: var(--nc-measure-body);
}

.nc-prose--large {
  font-size: var(--nc-size-body-l);
  max-width: var(--nc-measure-body-l);
}

.nc-prose--standfirst {
  font-size: var(--nc-size-body-l);
  color: var(--nc-ink);
  max-width: var(--nc-measure-standfirst);
}

.nc-note {
  margin: 0;
  font-size: var(--nc-size-small);
  line-height: 1.5;
  color: var(--nc-ink-muted);
}

/*
 * overflow-wrap alone stops a long single token (a URL, an identifier) from
 * overflowing its compartment -- it breaks at an arbitrary character only
 * when there's no better option. `hyphens: auto` was here too, but that
 * hyphenates ordinary heading words whenever the line is tight, producing
 * mid-word breaks like "opera-tions" or "ev-idence" on entirely normal
 * headings (14 September and 15 September reviews, on Work/Contact and on
 * case-study titles respectively). Removed rather than re-scoped per page:
 * it never reliably helped the URL/identifier case it was meant for either,
 * since the browser's hyphenation dictionary only knows real dictionary
 * words, not arbitrary identifiers.
 */
.nc-display,
.nc-page-title,
.nc-heading,
.nc-title {
  overflow-wrap: break-word;
}

/* ----------------------------------------------------------------- states */

.nc :focus-visible {
  outline: var(--nc-focus-width) solid var(--nc-ink);
  outline-offset: var(--nc-focus-offset);
}

.nc-band--dark :focus-visible {
  outline-color: var(--nc-on-dark);
}

/* Decorative marks are announced by nothing; the link text carries the name.
   A fixed square box rather than a glyph advance: the arrow is then optically
   centred by construction, and cannot overhang its container by a stray pixel
   or two when the typeface's side bearings differ. */
.nc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  line-height: 1;
  transition: transform var(--nc-motion-micro) var(--nc-easing);
}

/* --------------------------------------------------------------- utilities */

/* The footer's column. It shares the containment rule above and adds nothing:
   its four-track composition is its own, but its left edge is everyone's.
   Previously min(92vw, max) with no gutter, which put the footer's content 60px
   to the left of every other element on the page. */

.nc-rule-line {
  border: 0;
  border-top: var(--nc-rule-width) solid var(--nc-rule);
  margin: 0;
  width: 100%;
}

.nc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}