/*
 * Gallery Cabinet — component library
 * Work package W3.
 *
 * Nine component families. The ten defect corrections from the planning package
 * are implemented STRUCTURALLY here, so a page author cannot reintroduce them:
 *
 *   D-1  panels contain their content        → .nc-panel has padding, never a fixed height
 *   D-2  no column overlap                   → base.css max-width/min-width rules
 *   D-3  nothing runs to the viewport edge   → .nc-grid gutters + explicit spans
 *   D-4  action never overlaps body          → DOM order + margin-top:auto, no absolute
 *   D-5  sibling cells align top and bottom  → shared-edge grid + stretch + reserved zones
 *   D-6  arrows sit in the action zone       → .nc-cell__action owns the arrow
 *   D-7  1-line and 2-line labels align      → --nc-lines reserve
 *   D-8  flow blocks equal by construction   → 1fr auto 1fr auto 1fr grid
 *   D-9  nav never wraps                     → nowrap + disclosure breakpoint
 *   D-10 logo carries no strapline           → .nc-wordmark has no tagline slot at all
 *
 * The transitional theme.css was retired in this pass. Its live rules — the
 * wordmark, the site footer, the editorial text link — moved here, and the
 * document-level rules moved to base.css. There is now one design system and
 * no second stylesheet that can contest a selector.
 */

/* ==========================================================================
   1. Cabinet row  —  a case divided into compartments
   ==========================================================================

   Dividers are SHARED EDGES, not per-cell borders. The grid gap is 1px and the
   container's background is the rule colour; cells paint over it. Two adjacent
   cells therefore cannot disagree about where the line is, and the line cannot
   double up. This is the structural fix for the cabinet's core idea.            */

.nc-cabinet {
  display: grid;
  grid-template-columns: repeat(var(--nc-cabinet-columns, 3), minmax(0, 1fr));
  /* D-5: five shared row tracks — meta · slack · title · body · action.
     Cells adopt these tracks via subgrid, so every cell's rule and action begin
     at exactly the same y regardless of how its text wraps. A min-height reserve
     cannot do this: it only holds until one label wraps one line further, which
     is precisely how the specimen drifted by 10px. */
  grid-template-rows: auto 1fr auto auto auto;
  gap: var(--nc-rule-width);
  background: var(--nc-rule);
  border: var(--nc-rule-width) solid var(--nc-rule);
  align-items: stretch;
}

.nc-cabinet--2 { --nc-cabinet-columns: 2; }
.nc-cabinet--4 { --nc-cabinet-columns: 4; }

/* Cabinet cells stretch; their internal zones do the aligning. */
.nc-cabinet > * {
  background: var(--nc-paper);
  min-width: 0;
}

.nc-band--dark .nc-cabinet {
  background: var(--nc-on-dark-rule);
  border-color: var(--nc-on-dark-rule);
}
.nc-band--dark .nc-cabinet > * { background: var(--nc-charcoal); }

/* A cabinet NEVER wraps to a second row of cells.
 *
 * Its cells adopt the five shared row tracks by spanning them, and only five
 * are defined. A second row of cells therefore lands on implicit tracks and the
 * alignment guarantee is gone — silently, because the cells still render. The
 * intermediate two-column state that used to live here did exactly that to any
 * three-cell cabinet between 600 and 899px, and ncGalleryQA could not see it:
 * unequal tops read as "stacked", which the check skips.
 *
 * So there is no intermediate state. A cabinet is either a full row of cells or
 * the index recomposition below — nothing between. See section 12. */

/* ==========================================================================
   2. Object cell  —  the workhorse
   ==========================================================================

   Four reserved zones in DOM order: meta → title → body → action.
   The action is bottom-anchored with margin-top:auto and is NEVER positioned
   absolutely, which is what caused the specimen's link/description collision.  */

/* A cell adopts the cabinet's five row tracks. Its children land one per track,
   in DOM order, which is what keeps meta/title/body/action aligned across the
   whole row. Cells therefore have exactly five children — no more, no fewer. */
.nc-cell {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  padding: var(--nc-cell-padding);
  position: relative;
  /* A cell is frequently an <a>. Without this the title inherits the user
     agent's link blue, which is the one colour this palette must never show. */
  color: inherit;
  text-decoration: none;
}

/* The intro panel is not an object: it opts out of the shared tracks and flows
   normally down the full height of the row. */
.nc-cell--intro {
  display: block;
  grid-row: 1 / -1;
}

.nc-cell__meta { margin-bottom: var(--nc-zone-gap-meta-title); }

/* Documentary project screenshots (2026-09-16 brief §8): a restrained fixed
   frame, not a mockup. Nested inside .nc-cell__meta rather than a sibling of
   it, so it never disturbs the cabinet's five shared subgrid row tracks --
   see the render-side comment in nicheclever_render_home_page(). Deliberately
   no drop-shadow, no device chrome, no colour filter: the frame belongs to
   Niche Clever, the image inside it stays visibly the project itself. */
.nc-cell__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--nc-space-4);
  background: var(--nc-stone);
}

.nc-cell__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nc-focal, 50% 50%);
  display: block;
}

/* The Lettings Compliance Checker card: a case-study link plus a distinct,
   verified external live-site link, so it cannot be a single whole-cell <a>
   like every other project card. */
.nc-cell--dual-action { color: inherit; }

.nc-cell__action-group {
  display: flex;
  flex-direction: column;
  margin-top: var(--nc-space-6);
}

/* First action keeps the standard divider; the second sits close beneath it
   rather than repeating a full border-top block, so two actions read as one
   related pair, not clutter (brief §19). */
.nc-cell__action-group .nc-cell__action {
  /* The group already carries the standard gap above the action; without this
     the first link inherited .nc-cell__action's margin as well and sat a full
     step lower than every single-action card's link. */
  margin-top: 0;
  padding-top: var(--nc-zone-gap-rule-action);
  border-top: var(--nc-rule-width) solid var(--nc-rule);
  position: relative;
}

.nc-cell__action-group .nc-cell__action + .nc-cell__action {
  margin-top: var(--nc-space-3);
  padding-top: 0;
  border-top: 0;
}

/* Two real, independently clickable links -- not the whole-cell invisible
   hitbox every single-action card uses (.nc-cell__action::after), which would
   have the second link's full-cell overlay silently swallow every click
   meant for the first. */
.nc-cell__action-group .nc-cell__action::after { content: none; }
.nc-cell__action-group .nc-cell__action:hover,
.nc-cell__action-group .nc-cell__action:focus-visible { color: var(--nc-clay-text); }
.nc-cell__action-group .nc-cell__action:hover .nc-arrow,
.nc-cell__action-group .nc-cell__action:focus-visible .nc-arrow { transform: translate(2px, -2px); }

/* Occupies the 1fr track. This is the calm, and it is shared across the row. */
.nc-cell__spacer { min-height: var(--nc-space-7); }

.nc-cell__title--featured {
  /* Featured-work cards share one deliberately compact display size. This is
     scoped to the homepage cards: project and case-study titles elsewhere keep
     the wider editorial title scale. */
  font-size: clamp(1.25rem, 1.45vw, 1.5rem);
  text-wrap: nowrap;
}

.nc-cell__body { margin-top: var(--nc-zone-gap-title-body); }

/* D-4: the action follows the body in DOM order and is never positioned
   absolutely, so it cannot overlap the description. */
.nc-cell__action {
  margin-top: var(--nc-space-6);
  padding-top: var(--nc-zone-gap-rule-action);
  border-top: var(--nc-rule-width) solid var(--nc-rule);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nc-space-4);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  color: var(--nc-ink);
  text-decoration: none;
}

/* Fallback for engines without subgrid. Alignment is then best-effort via a
   generous reserve; the subgrid path above is the specified behaviour. */
@supports not (grid-template-rows: subgrid) {
  .nc-cell {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .nc-cell__spacer { flex: 1 1 var(--nc-space-9); }
  .nc-cell__action {
    margin-top: auto;
    min-height: calc(3 * var(--nc-leading-meta) * 1em + var(--nc-zone-gap-rule-action));
  }
}

/* No rule above the action where the cell is an index-style row. */
.nc-cell__action--bare { border-top: 0; }

.nc-cell__action .nc-arrow { margin-top: 0.1em; }

/* Whole-cell target, with a real anchor underneath. The link text carries the
   accessible name; the arrow is decorative. */
.nc-cell__action::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nc-cell:hover { background: var(--nc-paper-raised); }
.nc-cell:hover .nc-cell__action .nc-arrow { transform: translate(2px, -2px); }
.nc-cell:has(:focus-visible) { background: var(--nc-paper-raised); }

.nc-band--dark .nc-cell:hover { background: #2b302d; }
.nc-band--dark .nc-cell__action {
  color: var(--nc-on-dark);
  border-top-color: var(--nc-on-dark-rule);
}

/* Metadata trail: PUBLISHING → CORPUS → KNOWLEDGE INFRASTRUCTURE */
.nc-trail {
  margin: 0;
  font-size: var(--nc-size-meta);
  line-height: var(--nc-leading-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  color: var(--nc-ink-muted);
}

.nc-band--dark .nc-trail { color: var(--nc-on-dark-meta); }

/* ==========================================================================
   3. Index rows  —  engagement routes, and the mobile form of the cabinet
   ========================================================================== */

.nc-index { border-top: var(--nc-rule-width) solid var(--nc-rule); }
.nc-band--dark .nc-index { border-top-color: var(--nc-on-dark-rule); }

.nc-index__row {
  display: flex;
  align-items: center;
  gap: var(--nc-space-5);
  min-height: var(--nc-target-min);
  padding-block: var(--nc-space-4);
  border-bottom: var(--nc-rule-width) solid var(--nc-rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--nc-motion-micro) var(--nc-easing);
}

.nc-band--dark .nc-index__row { border-bottom-color: var(--nc-on-dark-rule); }

.nc-index__number {
  flex: none;
  width: 4ch;
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  color: var(--nc-ink-muted);
}

.nc-band--dark .nc-index__number { color: var(--nc-on-dark-meta); }

.nc-index__label {
  flex: 1 1 auto;
  min-width: 0;
}

.nc-index__row .nc-arrow { flex: none; }
.nc-index__row:hover { background: rgb(0 0 0 / 4%); }
.nc-index__row:hover .nc-arrow { transform: translate(2px, -2px); }
.nc-band--dark .nc-index__row:hover { background: rgb(255 255 255 / 5%); }

/* Detailed row (2026-09-16 brief §10): the dark section's "Ways I can help"
   service families need a supporting line under the label, which a plain
   .nc-index__row cannot hold -- it's a single flex line by design (see the
   Listing row note below). Only rows carrying a `body` opt into this taller,
   wrapped shape; every other .nc-index__row caller is untouched. */
.nc-index__row--detailed {
  align-items: flex-start;
  padding-block: var(--nc-space-5);
}

.nc-index__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-1);
}

.nc-index__row--detailed .nc-arrow { margin-top: 0.2em; }

.nc-index__body {
  font-family: var(--nc-font-operational);
  font-size: var(--nc-size-small);
  color: var(--nc-ink-muted);
}

.nc-band--dark .nc-index__body { color: var(--nc-on-dark-meta); }

/* ==========================================================================
   4. Panel and metadata table
   ==========================================================================

   D-1: the panel is a container. Its height is content + padding. It has no
   fixed height and no absolutely positioned children, so a row cannot escape.  */

.nc-panel {
  background: var(--nc-stone-light);
  padding: var(--nc-cell-padding);
}

.nc-panel--stone { background: var(--nc-stone); }

.nc-status {
  display: inline-block;
  padding: var(--nc-space-2) var(--nc-space-3);
  border: var(--nc-rule-width) solid var(--nc-rule-strong);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  color: var(--nc-ink);
}

.nc-metatable {
  margin: var(--nc-space-6) 0 0;
  display: grid;
  grid-template-columns: minmax(7.75rem, 0.4fr) minmax(0, 1fr);
  column-gap: var(--nc-space-5);
}

.nc-metatable__key,
.nc-metatable__value {
  padding-block: var(--nc-space-3);
  border-top: var(--nc-rule-width) solid var(--nc-rule);
  margin: 0;
  min-width: 0;
}

.nc-metatable__key {
  font-size: var(--nc-size-meta);
  line-height: var(--nc-leading-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  color: var(--nc-ink-muted);
}

.nc-metatable__value {
  font-size: var(--nc-size-small);
  font-weight: 600;
}

/* ==========================================================================
   5. Ask entry  —  input and action as ONE bounding rectangle
   ========================================================================== */

.nc-ask__label {
  display: block;
  margin-bottom: var(--nc-space-3);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  color: var(--nc-ink-muted);
}

.nc-band--dark .nc-ask__label { color: var(--nc-on-dark-meta); }

.nc-ask__control {
  display: flex;
  align-items: stretch;
  border: var(--nc-rule-width) solid var(--nc-rule-strong);
  background: var(--nc-paper-raised);
}

/* The homepage Ask control is a paired input and action, rather than one
   undifferentiated block. The small inset preserves its shared boundary while
   giving the action its own breathing room. Other Ask contexts retain their
   established compact control. */
.nc-hero__ask .nc-ask__control {
  gap: var(--nc-space-2);
  padding: var(--nc-space-2);
}

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

.nc-ask__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: var(--nc-space-4);
  font-family: inherit;
  font-size: var(--nc-size-body);
  line-height: var(--nc-leading-body);
  color: var(--nc-ink);
  resize: none;
}

.nc-ask__input:focus { outline: none; }
.nc-ask__input::placeholder { color: var(--nc-ink-muted); }

.nc-ask__submit {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--nc-space-4);
  min-height: var(--nc-target-min);
  padding: var(--nc-space-4) var(--nc-space-5);
  border: 0;
  border-left: var(--nc-rule-width) solid var(--nc-rule-strong);
  background: var(--nc-ink);
  color: var(--nc-paper);
  font-family: inherit;
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  cursor: pointer;
}

.nc-hero__ask .nc-ask__submit { border-left: 0; }

.nc-ask__submit:hover { background: #2b302d; }
.nc-ask__submit:hover .nc-arrow { transform: translateX(2px); }

.nc-ask__hint {
  margin-top: var(--nc-space-4);
  padding: var(--nc-space-4);
  background: var(--nc-paper-raised);
  border: var(--nc-rule-width) solid var(--nc-rule);
  font-size: var(--nc-size-small);
  color: var(--nc-ink-muted);
}

/* Ready-made questions below the homepage Ask form — the plugin renders each
   [wpip_question] as a plain, neutral-class <a>; styling belongs here, in the
   theme, per the plugin's own presentation boundary. */
.nc-ask__suggestions {
  margin-top: var(--nc-space-5);
}

.nc-ask__suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-space-3);
  margin-top: var(--nc-space-3);
}

.nc-ask__suggestions-list .wpip-question-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--nc-target-min);
  padding: var(--nc-space-3) var(--nc-space-4);
  border: var(--nc-rule-width) solid var(--nc-rule-strong);
  background: var(--nc-paper-raised);
  color: var(--nc-ink);
  font-size: var(--nc-size-small);
  text-decoration: none;
}

.nc-ask__suggestions-list .wpip-question-link:hover,
.nc-ask__suggestions-list .wpip-question-link:focus-visible {
  border-color: var(--nc-ink);
}

/* Mobile: the action stacks beneath the field at a touch-sized height. */
@media (max-width: 599px) {
  .nc-ask__control { flex-direction: column; }
  .nc-ask__submit {
    border-left: 0;
    border-top: var(--nc-rule-width) solid var(--nc-rule-strong);
    min-height: var(--nc-target-min-touch);
    justify-content: space-between;
  }
  .nc-hero__ask .nc-ask__submit { border-top: 0; }
}

/* ==========================================================================
   6. Ask flow  —  equal by construction (D-8)
   ========================================================================== */

.nc-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: var(--nc-space-4);
}

.nc-flow__step {
  display: flex;
  align-items: center;
  padding: var(--nc-space-4);
  border: var(--nc-rule-width) solid var(--nc-rule);
  background: var(--nc-paper);
  font-size: var(--nc-size-small);
  min-height: calc(3 * var(--nc-leading-body) * 1rem);
}

/* On Method the flow steps are real jump-links to the matching numbered
   sections below; on Home the same component stays a plain <div> describing
   a non-interactive diagram, so this rule only ever matches the anchor form. */
a.nc-flow__step {
  color: inherit;
  text-decoration: none;
}

a.nc-flow__step:hover {
  background: rgb(0 0 0 / 4%);
}

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

.nc-band--dark a.nc-flow__step:hover {
  background: rgb(255 255 255 / 5%);
}

.nc-flow__arrow {
  display: flex;
  align-items: center;      /* optically centred in its own track, not floated */
  justify-content: center;
  color: var(--nc-ink-muted);
}

.nc-band--dark .nc-flow__step {
  background: var(--nc-charcoal);
  border-color: var(--nc-on-dark-rule);
  color: var(--nc-on-dark);
}
.nc-band--dark .nc-flow__arrow { color: var(--nc-on-dark-meta); }

/* Mobile: a vertical list joined by a rule, not three squashed boxes. */
@media (max-width: 599px) {
  .nc-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .nc-flow__step { min-height: 0; }
  .nc-flow__step + .nc-flow__arrow { padding-block: var(--nc-space-2); }
  .nc-flow__arrow { transform: rotate(90deg); }
}

/* Suggested questions — equal-height grid items, never content-sized. */
.nc-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--nc-space-4);
  align-items: stretch;
}

.nc-suggestion {
  display: flex;
  align-items: center;
  padding: var(--nc-space-4);
  border: var(--nc-rule-width) solid var(--nc-rule);
  background: var(--nc-paper);
  color: var(--nc-ink);
  text-decoration: none;
  font-size: var(--nc-size-small);
  min-height: var(--nc-target-min);
}

.nc-suggestion:hover {
  background: var(--nc-paper-raised);
  border-color: var(--nc-rule-strong);
}

/* ==========================================================================
   7. Contextual Ask band
   ==========================================================================
   D-3: the question is confined to its span and wraps. It never runs to the
   viewport edge, which is how the specimen clipped it.                        */

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

.nc-askcontext__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--nc-space-4);
}

/* Administrator-approved predefined questions (WP Interactive Portfolio's
   own registry) in place of one static suggested question — the plugin
   renders each as a plain, neutral-class <a>; styling belongs here, per
   the plugin's own presentation boundary. Sits in the light right-hand
   aside alongside "On this page"/"Related routes", not a dark band. */
.nc-askcontext__questions {
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-3);
  margin-top: var(--nc-space-3);
}

.nc-askcontext__questions .wpip-question-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nc-space-3);
  min-height: var(--nc-target-min);
  padding: var(--nc-space-3) var(--nc-space-4);
  background: var(--nc-stone-light);
  border: var(--nc-rule-width) solid var(--nc-rule);
  color: var(--nc-ink);
  font-size: var(--nc-size-small);
  text-decoration: none;
}

.nc-askcontext__questions .wpip-question-link:hover,
.nc-askcontext__questions .wpip-question-link:focus-visible {
  background: var(--nc-stone);
  border-color: var(--nc-ink);
}

.nc-button {
  display: inline-flex;
  align-items: center;
  /* Never shrink below content: a squeezed button pushes its arrow outside,
     which is how the arrow overflowed in the first build of this library. */
  flex: none;
  gap: var(--nc-space-4);
  min-height: var(--nc-target-min);
  padding: var(--nc-space-4) var(--nc-space-5);
  border: var(--nc-rule-width) solid var(--nc-ink);
  background: var(--nc-ink);
  color: var(--nc-paper);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.nc-button--outline {
  background: transparent;
  color: var(--nc-ink);
}

.nc-button:hover .nc-arrow { transform: translateX(2px); }

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

.nc-band--dark .nc-button--outline {
  background: transparent;
  color: var(--nc-on-dark);
}

/* ==========================================================================
   8. Editorial card  —  the metadata label drives the treatment
   ========================================================================== */

.nc-editorial {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--nc-cell-padding);
  border: var(--nc-rule-width) solid var(--nc-rule);
  background: var(--nc-paper);
  text-decoration: none;
  color: inherit;
}

/* System rule, not a per-card decision: current work gets the stone ground. */
.nc-editorial[data-state="current"] {
  background: var(--nc-stone);
  border-color: var(--nc-stone);
}

.nc-editorial__title {
  margin-top: var(--nc-zone-gap-meta-title);
  min-height: calc(2 * var(--nc-leading-heading) * 1em);
}

.nc-editorial__action {
  margin-top: auto;
  padding-top: var(--nc-space-6);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
}

.nc-editorial:hover { border-color: var(--nc-rule-strong); }
.nc-editorial:hover .nc-arrow { transform: translate(2px, -2px); }

/* ==========================================================================
   9. Stage sequence  —  D-7
   ==========================================================================
   Labels reserve two lines and are TOP-aligned, so a one-line label sits on the
   same baseline as a two-line one instead of floating mid-cell.                */

.nc-stages {
  display: grid;
  grid-template-columns: repeat(var(--nc-stage-count, 4), minmax(0, 1fr));
  gap: var(--nc-rule-width);
  background: var(--nc-rule);
  border: var(--nc-rule-width) solid var(--nc-rule);
  align-items: stretch;
}

.nc-stage {
  display: flex;
  flex-direction: column;
  background: var(--nc-paper);
  padding: var(--nc-space-5);
  min-width: 0;
}

.nc-stage__number {
  flex: none;
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  color: var(--nc-clay-text);
  margin-bottom: var(--nc-space-5);
}

.nc-stage__label {
  flex: none;
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-h3);
  line-height: var(--nc-leading-heading);
  min-height: calc(2 * var(--nc-leading-heading) * 1em);
}

@media (max-width: 899px) {
  .nc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .nc-stages { grid-template-columns: 1fr; }
  .nc-stage__label { min-height: 0; }
}

/* ==========================================================================
   10. Header  —  D-9 and D-10
   ========================================================================== */

/* The bar bleeds; its contents do not. The paper ground and the rule beneath it
   span the viewport, because a header that stops short of the edges reads as a
   floating strip — but the wordmark and the nav sit in the shared content box,
   so they line up with the page title below them at every width. */
.nc-header {
  padding-block: var(--nc-space-5);
  border-bottom: var(--nc-rule-width) solid var(--nc-rule);
  background: var(--nc-paper);
  /* Containing block for the mobile disclosure panel, which is deliberately
     full-bleed and therefore must resolve against the bar, not the inner box. */
  position: relative;
}

/* The sticky positioning lives on WordPress's own header template-part
   wrapper, not on .nc-header itself: position:sticky holds only within room
   its OWN parent provides, and that wrapper's immediate parent is a thin
   <header class="wp-block-template-part"> exactly as tall as .nc-header --
   zero slack, so a sticky .nc-header scrolled away instantly. The wrapper's
   parent is .wp-site-blocks (the whole page), which gives it somewhere to
   actually stay stuck. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* WordPress's own admin toolbar is fixed at the very top (32px desktop,
   46px at its own 782px breakpoint) only for logged-in users -- offset the
   sticky point so the header docks just beneath it instead of under it. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

.nc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nc-space-8);
}

/* The canonical wordmark is drawn in CSS by theme.css; it must not shrink. */
.nc-header .nc-wordmark { flex: none; }

/* The canonical wordmark: the accepted current logo image (14 September 2026
 * logo promotion decision), not CSS-drawn type.
 *
 * D-10: there is no strapline element. The mark carries none, so the component
 * provides nowhere to put one. ncGalleryQA()'s isBrandMark() exemption still
 * applies via .closest('.nc-wordmark') -- the mark is a brand asset held to
 * the logo system, not to the spacing scale. */
.nc-wordmark {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.nc-wordmark__image {
  display: block;
  height: 60px;
  width: auto;
}

@media (max-width: 720px) {
  .nc-wordmark__image { height: 44px; }
}

.nc-nav {
  display: flex;
  align-items: center;
  gap: var(--nc-space-6);
}

/* D-9: items never wrap. Below the fit breakpoint the nav becomes a disclosure. */
.nc-nav__link {
  white-space: nowrap;
  /* Bumped from --nc-size-meta with a matching weight increase (2026-09-16
     brief: nav read as "too quiet" against the rest of the content). Modest
     on purpose -- still uppercase/tracked, not a heavier header treatment. */
  font-size: var(--nc-size-small);
  font-weight: 600;
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  color: var(--nc-ink);
  text-decoration: none;
  padding-block: var(--nc-space-2);
}

.nc-nav__link:hover { color: var(--nc-clay-text); }
.nc-nav__link[aria-current="page"] { border-bottom: 2px solid var(--nc-clay); }

/* The utility item, set apart by a rule rather than emphasised. */
.nc-nav__utility {
  display: flex;
  align-items: center;
  gap: var(--nc-space-6);
  margin-left: var(--nc-space-2);
  padding-left: var(--nc-space-6);
  border-left: var(--nc-rule-width) solid var(--nc-rule);
}

/* Padding declared on the base rule, not only inside the breakpoint, so the
   computed value never falls back to the user-agent default (6px, off-scale). */
.nc-nav__toggle {
  display: none;
  padding: var(--nc-space-2) var(--nc-space-4);
  color: var(--nc-ink);
}

/* Raised from 899px after the 15 September logo crop widened the wordmark
   by roughly 160px (it now fills its display height instead of sitting in a
   mostly-transparent box) -- the old breakpoint no longer left the seven
   nav items room to fit on one line without crowding. Matches the JS
   min-width:1100px check in nav-disclosure.js; the two must stay paired. */
@media (max-width: 1099px) {
  .nc-nav { display: none; }
  .nc-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--nc-space-3);
    min-height: var(--nc-target-min);
    padding: var(--nc-space-2) var(--nc-space-4);
    border: var(--nc-rule-width) solid var(--nc-rule-strong);
    background: transparent;
    font-family: inherit;
    font-size: var(--nc-size-meta);
    letter-spacing: var(--nc-tracking-meta);
    text-transform: uppercase;
    cursor: pointer;
  }
  .nc-nav[data-open="true"] {
    display: flex;
    position: absolute;
    inset: auto 0 auto 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--nc-space-4) var(--nc-gutter) var(--nc-space-6);
    background: var(--nc-paper);
    border-bottom: var(--nc-rule-width) solid var(--nc-rule);
  }
  .nc-nav[data-open="true"] .nc-nav__link {
    min-height: var(--nc-target-min-touch);
    display: flex;
    align-items: center;
    border-bottom: var(--nc-rule-width) solid var(--nc-rule);
  }
  .nc-nav[data-open="true"] .nc-nav__utility {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border-left: 0;
  }
}

/* ==========================================================================
   10a. Floating WhatsApp button — sitewide (wp_footer, nicheclever-site-core)
   ========================================================================== */

/* Dark/monochrome rather than WhatsApp's brand green, so it reads as part of
   this design system's own chrome (matches the footer's --nc-charcoal
   treatment) instead of a bolted-on third-party widget. */
.nc-whatsapp-float {
  position: fixed;
  right: var(--nc-space-6);
  bottom: var(--nc-space-6);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nc-charcoal);
  color: var(--nc-on-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  text-decoration: none;
}

.nc-whatsapp-float:hover,
.nc-whatsapp-float:focus-visible {
  background: var(--nc-ink);
}

@media (max-width: 599px) {
  .nc-whatsapp-float {
    right: var(--nc-space-4);
    bottom: var(--nc-space-4);
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   11. Hero  —  the 56/44 split
   ========================================================================== */

/* The 56/44 split is now a split of the CONTENT BOX, not of the viewport. It
   used to run edge to edge, which on a wide monitor left the proposition on a
   very long measure 60px from the screen edge while every other heading on the
   site started 293px in. */
.nc-hero {
  display: grid;
  grid-template-columns: var(--nc-hero-proposition) var(--nc-hero-ask);
  align-items: start;
}

/* Vertical rhythm belongs to the SECTION, not to these halves — the hero
   carries .nc-band in the template so it takes part in the band-adjacency rule
   that halves padding at a boundary. While it owned its own vertical padding it
   sat outside that rule, and the gap between the hero and the section below it
   was 224px: the hero's own 96 plus the next band's full 128.
 *
 * Both halves take the same inset, so the eyebrow in the proposition and the
 * eyebrow in the Ask panel sit on the same line. The proposition's left inset
 * is zero because its ground is the page's own, which puts the h1 exactly on
 * the shared content edge; the Ask panel is inset all round because it has to
 * clear its own colour boundary. */
/* Insets exist to clear a colour boundary. The proposition has no ground of its
   own — it is the page — so it takes none at the left or the bottom, and its h1
   lands exactly on the shared content edge. The Ask panel has a ground, so it
   is inset all round. Both share a top inset, which is what keeps the two
   eyebrows on one line. */
.nc-hero__proposition {
  padding: var(--nc-space-8) var(--nc-space-8) 0 0;
  background: var(--nc-paper);
}

.nc-hero__ask {
  padding: calc(var(--nc-space-8) + var(--nc-space-4)) var(--nc-space-8) var(--nc-space-8);
  background: var(--nc-stone);
}

/* The header's rule already separates the hero from the chrome above it, so the
   hero does not also need a full section inset at the top of the page. */
.nc-hero { padding-top: var(--nc-space-7); }

.nc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-space-4);
  margin-top: var(--nc-space-7);
}

@media (max-width: 1199px) {
  .nc-hero { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .nc-hero { grid-template-columns: 1fr; }
  .nc-hero__ask { padding-top: var(--nc-space-8); }
}

/* ==========================================================================
   13. Questions worth asking  —  the curated Ask section
   ==========================================================================
   Replaces the second open input the concept drawings showed. The hero already
   takes a question; the harder problem is knowing what an unfamiliar corpus can
   usefully answer, so these are authored rather than typed.                    */

.nc-questions {
  display: grid;
  grid-template-columns: var(--nc-hero-ask) 1fr;
  align-items: stretch;
}

/* Both halves carry their own ground and meet at a seam, so both are inset:
   neither can sit flush on its own colour boundary the way the hero's
   proposition can. Vertical rhythm is the section's, via .nc-band. */
.nc-questions__intro,
.nc-questions__body {
  padding: var(--nc-space-8);
}

/* Pale clay, not stone/paper (2026-09-16 brief §9/§14): this is the
   homepage's one deliberate additional colour interruption -- cream hero,
   light problem section, neutral project evidence, THIS muted clay portfolio
   layer, dark services, pale writing. Before this change both halves used
   grounds already used elsewhere on the page, which is why the section read
   as the same layer as its neighbours rather than a distinct deeper one. */
.nc-questions__intro { background: var(--nc-clay-pale); }
.nc-questions__body { background: var(--nc-clay-pale-raised); }

@media (max-width: 899px) {
  .nc-questions { grid-template-columns: 1fr; }
}

/* Interactive Professional Portfolio diagram: a supplied image, enlargeable
   into a native <dialog> that loads the full-resolution file on first open
   (assets/js/figure-zoom.js). */
.nc-figure-zoom { margin: 0; }

.nc-figure-zoom__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: var(--nc-rule-width) solid var(--nc-rule);
  background: transparent;
  cursor: zoom-in;
}

.nc-figure-zoom__trigger img { display: block; width: 100%; height: auto; }

.nc-figure-zoom__hint {
  position: absolute;
  right: var(--nc-space-3);
  bottom: var(--nc-space-3);
  padding: var(--nc-space-1) var(--nc-space-3);
  background: var(--nc-paper);
  color: var(--nc-ink);
  border: var(--nc-rule-width) solid var(--nc-rule-strong);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
}

.nc-figure-zoom__trigger:hover .nc-figure-zoom__hint,
.nc-figure-zoom__trigger:focus-visible .nc-figure-zoom__hint { color: var(--nc-clay-text); }

.nc-figure-zoom__dialog {
  width: min(96vw, 1774px);
  max-width: none;
  max-height: 96vh;
  padding: var(--nc-space-4);
  border: 0;
  background: var(--nc-paper);
  color: var(--nc-ink);
  overflow: auto;
}

.nc-figure-zoom__dialog::backdrop { background: rgb(20 22 20 / 80%); }
.nc-figure-zoom__dialog img { display: block; width: 100%; height: auto; }

.nc-figure-zoom__dialog form { display: flex; justify-content: flex-end; margin-bottom: var(--nc-space-3); }

.nc-figure-zoom__close {
  min-height: var(--nc-target-min);
  padding: var(--nc-space-2) var(--nc-space-4);
  border: var(--nc-rule-width) solid var(--nc-rule-strong);
  background: transparent;
  color: var(--nc-ink);
  font: inherit;
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  cursor: pointer;
}

.nc-figure-zoom__close:hover { color: var(--nc-clay-text); }

/* ==========================================================================
   14. Editorial row
   ==========================================================================
   Equal-height cards, so the bottom-anchored actions share a baseline. That is
   what the reserved title zone in .nc-editorial__title exists to guarantee.    */

.nc-editorial-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nc-space-4);
  align-items: stretch;
}

@media (max-width: 899px) {
  .nc-editorial-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .nc-editorial-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. Cabinet → index recomposition on mobile
   ==========================================================================

   The reserved zones that create calm at 1440px create dead space in a narrow
   column. Below the width where a full row of cells still fits, an object cell
   drops its spacers and reads as an index row: same content, different
   composition, no new component invented.

   Keyed to the COLUMN's width, not the viewport's, because that is what
   actually decides whether the cells fit. 46rem is the point below which three
   cells stop being cells and start being slivers.                              */

@container nc-col (max-width: 46rem) {
  .nc-cabinet {
    grid-template-columns: 1fr;
    grid-template-rows: none;   /* the shared tracks are a desktop device */
    border-left: 0;
    border-right: 0;
  }

  /* Back to normal flow: at this width the reserved zones would be dead space,
     so the cell reads as an index row instead. Same content, new composition. */
  .nc-cell {
    display: block;
    grid-row: auto;
  }

  .nc-cell__spacer { display: none; }
  .nc-cell__meta { margin-bottom: var(--nc-space-3); }

  .nc-cell__action {
    min-height: var(--nc-target-min);
    align-items: center;
    margin-top: var(--nc-space-5);
  }
}

/* ==========================================================================
   15. Long-form content  —  the body of a page, post or case study
   ==========================================================================

   The design system was authored against hand-written gallery markup, so it had
   no rules for the arbitrary HTML `wp:post-content` emits. Without them a page
   body falls back to browser defaults: Times, blue underlined links, and a
   measure as wide as its column. This is the one place the system must style
   elements rather than classes, because an author's markup carries no classes.

   It supersedes the .nc-interior__main rules in theme.css, which pinned the
   same job to a three-column skeleton the templates no longer use.            */

/* The measure is applied to the text elements, NOT to the container. Clamping
   .nc-content itself would squash any structural component dropped into a page
   body — a cabinet, a stage sequence, an index — to reading width, because a
   child cannot be wider than its parent however its own max-width is set. */
.nc-content > * { margin-block: 0 var(--nc-space-5); }
.nc-content > *:last-child { margin-bottom: 0; }

/* A heading's large margin-top (below) is for separating it from whatever
   came before it in the flow. The content block's own first element has
   nothing before it to separate from, and needs to start flush with the
   top of its column so it lines up with the aside beside it. */
.nc-content > *:first-child { margin-top: 0; }

.nc-content > p,
.nc-content > ul,
.nc-content > ol,
.nc-content > dl,
.nc-content > blockquote { max-width: var(--nc-measure-body); }

/* A standfirst by position, not by asking the author to remember a class. */
.nc-content > p:first-child {
  font-size: var(--nc-size-body-l);
  max-width: var(--nc-measure-standfirst);
}

.nc-content h2,
.nc-content h3,
.nc-content h4 {
  font-family: var(--nc-font-editorial);
  font-weight: 400;
  line-height: var(--nc-leading-heading);
  margin-top: var(--nc-space-8);
  text-wrap: balance;
}

.nc-content h2 { font-size: var(--nc-size-title-m); }
.nc-content h3 { font-size: var(--nc-size-h3); }
.nc-content h4 {
  font-size: var(--nc-size-body-l);
  font-family: var(--nc-font-operational);
  font-weight: 600;
}

.nc-content ul,
.nc-content ol { padding-left: var(--nc-space-6); }
.nc-content li { margin-bottom: var(--nc-space-2); }

.nc-content a {
  color: var(--nc-clay-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.nc-content blockquote {
  border-left: 2px solid var(--nc-rule-strong);
  padding-left: var(--nc-space-5);
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-body-l);
  margin-left: 0;
}

.nc-content hr {
  border: 0;
  border-top: var(--nc-rule-width) solid var(--nc-rule);
}

.nc-content code,
.nc-content pre {
  font-family: var(--nc-font-machine);
  font-size: var(--nc-size-small);
}

.nc-content pre {
  background: var(--nc-stone-light);
  padding: var(--nc-space-5);
  overflow-x: auto;      /* a long line scrolls the block, not the page */
}

.nc-content figcaption,
.nc-content table caption {
  font-size: var(--nc-size-meta);
  color: var(--nc-ink-muted);
}

/* ==========================================================================
   16. Listing row  —  the query loop's form of an index row
   ==========================================================================

   .nc-index__row is a single flex line and cannot hold a title plus an excerpt,
   which is what an archive needs. This is the same rule-separated language with
   a stacked body, and it is built to sit inside `wp:post-template`'s own <ul>
   so no extra wrapper is required.

   The date column is a fixed track rather than content-sized, so every row's
   title starts on the same vertical line however long the date renders.        */

.nc-listing {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nc-rule-width) solid var(--nc-rule);
}

.nc-listing > li { margin: 0; }

.nc-listrow {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--nc-space-5);
  align-items: start;
  padding-block: var(--nc-space-6);
  border-bottom: var(--nc-rule-width) solid var(--nc-rule);
}

.nc-listrow__meta {
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-2);
  font-size: var(--nc-size-meta);
  line-height: var(--nc-leading-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
  color: var(--nc-ink-muted);
}

.nc-listrow__body { min-width: 0; }

.nc-listrow .wp-block-post-title {
  margin: 0;
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-h3);
  line-height: var(--nc-leading-heading);
  font-weight: 400;
}

.nc-listrow .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
  /* The title is the row's link, so it must be a real target. As an
     inline-block a single-line title measures 23px at the smallest size —
     one pixel under the 24px minimum, which ncGalleryQA catches. A block box
     also makes the whole title line clickable, not just the glyphs. */
  display: block;
  min-height: var(--nc-target-min);
}

.nc-listrow .wp-block-post-title a:hover { text-decoration: underline; }

.nc-listrow .wp-block-post-excerpt {
  margin: var(--nc-space-3) 0 0;
  color: var(--nc-ink-muted);
  max-width: var(--nc-measure-body);
}

.nc-listrow .wp-block-post-excerpt__more-text { display: none; }

.nc-writing-group { margin-top: var(--nc-space-9); }
.nc-writing-group .nc-heading { margin-bottom: var(--nc-space-5); }

/* Dynamic editorial renderers retain the Gallery Cabinet's deliberate rhythm
   without relying on inline spacing values in every page record. */
.nc-editorial-spaced { margin-top: var(--nc-space-7); }
.nc-editorial-late { margin-top: var(--nc-space-9); }
.nc-editorial-top { margin-top: var(--nc-space-5); }

@media (max-width: 599px) {
  .nc-listrow { grid-template-columns: 1fr; gap: var(--nc-space-3); }
  .nc-listrow__meta { flex-direction: row; gap: var(--nc-space-4); }
}

/* Pagination reads as operational chrome, not as body copy. */
.nc-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-space-5);
  margin-top: var(--nc-space-7);
  font-size: var(--nc-size-meta);
  letter-spacing: var(--nc-tracking-meta);
  text-transform: uppercase;
}

/* ==========================================================================
   17. Text link  —  the underlined editorial link with a trailing arrow
   ========================================================================== */

/* The !important flags are aimed at core's button styles, which are generated
   per-block with higher specificity than any class here can reach. They are
   scoped to the editorial-link block style, so they cannot leak. */
.nc-text-link,
.wp-block-button.is-style-editorial-link .wp-block-button__link {
  background: transparent !important;
  border: 0 !important;
  border-bottom: var(--nc-rule-width) solid currentColor !important;
  border-radius: 0 !important;
  color: var(--nc-ink) !important;
  padding: 0 0 var(--nc-space-1) !important;
  text-decoration: none !important;
}

.nc-text-link::after,
.wp-block-button.is-style-editorial-link .wp-block-button__link::after {
  content: " \2192";
  margin-left: var(--nc-space-2);
}

.nc-text-link:hover { color: var(--nc-clay-text) !important; }

/* ==========================================================================
   18. Site footer
   ==========================================================================

   Identity plus three grouped route columns: Explore, Go deeper, Start
   something. The Go deeper group is where the portfolio and the Ask layer get
   the explicit gateway the old architecture never gave them.

   The footer is emitted by nicheclever-site-core, not by a template, so these
   class names are a contract with that plugin.                                */

.nc-site-footer {
  background: var(--nc-charcoal);
  color: var(--nc-on-dark);
  padding-block: var(--nc-space-8);
}

.nc-footer {
  display: grid;
  gap: var(--nc-space-7);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}

.nc-footer .nc-eyebrow { color: var(--nc-on-dark-meta); }

.nc-footer__mark {
  font-family: var(--nc-font-editorial);
  font-size: var(--nc-size-title-m);
  margin: 0 0 var(--nc-space-2);
}

.nc-footer__identity p { color: var(--nc-on-dark-meta); }

.nc-footer__identity .nc-footer__legal-link { margin-top: var(--nc-space-3); }

.nc-footer__social {
  list-style: none;
  margin: var(--nc-space-4) 0 0;
  padding: 0;
}

.nc-footer__social li + li { margin-top: var(--nc-space-2); }

.nc-footer__placeholder {
  color: var(--nc-on-dark-meta);
  display: inline-block;
  font-size: var(--nc-size-small);
  padding-block: var(--nc-space-2);
}

.nc-footer__list {
  list-style: none;
  margin: var(--nc-space-4) 0 0;
  padding: 0;
}

.nc-footer__link {
  color: var(--nc-on-dark);
  display: inline-block;
  font-size: var(--nc-size-small);
  /* Below this the links are 22px tall, under the 24px minimum target size. */
  padding-block: var(--nc-space-2);
  text-decoration: none;
}

.nc-footer__link:hover { text-decoration: underline; }
.nc-footer__link[aria-current="page"] { color: var(--nc-on-dark-meta); }

.nc-site-footer a { color: var(--nc-on-dark); }
.nc-site-footer p { font-size: var(--nc-size-small); margin: 0; }

@media (max-width: 899px) {
  .nc-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
  .nc-footer { grid-template-columns: 1fr; gap: var(--nc-space-6); }
}

/* ==========================================================================
   19. Ask panel  —  skinning wp-interactive-portfolio
   ==========================================================================

   The Ask panel is rendered by a plugin that must stay portable, so it ships
   its own neutral stylesheet: #111 ink, #fff ground, Arial. Presentation is the
   theme's job, and this is where the theme does it. The transitional
   ask-conversation.css did the same against the superseded palette; this is
   that work redone against the tokens, and it is much smaller because the
   plugin exposes --wpip-ink and --wpip-rule rather than hardcoding everywhere.

   Scoped under .nc so these win on specificity rather than on enqueue order,
   which depends on registration sequence and is not something to rely on.      */

.nc .wpip-portfolio {
  --wpip-ink: var(--nc-ink);
  --wpip-rule: var(--nc-rule);
  background: var(--nc-paper);
  font-family: var(--nc-font-operational);
  /* The panel already sits in a measured column; its own width cap and centring
     would leave it floating inside that column. */
  max-width: none;
  margin: 0;
}

.nc .wpip-suggestion { background: var(--nc-paper); }

.nc .wpip-suggestion:hover,
.nc .wpip-suggestion:focus-visible,
.nc .wpip-message--user { background: var(--nc-stone-light); }

.nc .wpip-message blockquote { color: var(--nc-ink-muted); }

.nc .wpip-ask {
  background: var(--nc-ink);
  color: var(--nc-paper);
}

.nc .wpip-ask:hover,
.nc .wpip-ask:focus-visible { background: var(--nc-charcoal); }

/* The plugin draws its own focus rings in its own ink. Match the system's, so
   a keyboard user sees one focus treatment across the whole page. */
.nc .wpip-input:focus,
.nc .wpip-ask:focus-visible,
.nc .wpip-suggestion:focus-visible { outline-color: var(--nc-ink); }

.nc .wpip-message code,
.nc .wpip-message pre { background: var(--nc-stone-light); }

.nc .wpip-message code,
.nc .wpip-message pre { font-family: var(--nc-font-machine); }

/* Ask panel's short introduction. Scoped additions (1 October 2026). */
.nc-ask__intro { margin-top: var(--nc-space-4); }
.nc-hero__proposition .nc-prose + .nc-prose { margin-top: var(--nc-space-4); }
.nc-ask__intro + .nc-ask { margin-top: var(--nc-space-6); }

/* Homepage "Notes, objects and current thinking" on the dark band: the writing
   list was designed for paper, so its rules, dates, titles and excerpts take
   the on-dark tokens here. */
.nc-band--dark .nc-listing,
.nc-band--dark .nc-listrow { border-color: var(--nc-on-dark-rule); }
.nc-band--dark .nc-listrow__meta,
.nc-band--dark .nc-listrow .wp-block-post-excerpt { color: var(--nc-on-dark-meta); }
.nc-band--dark .nc-listrow .wp-block-post-title a { color: var(--nc-on-dark); }
.nc-band--dark .nc-listrow .wp-block-post-title a:hover { color: var(--nc-on-dark); }
.nc-band--dark .nc-text-link { color: var(--nc-on-dark) !important; }
.nc-band--dark .nc-text-link:hover { color: var(--nc-on-dark-meta) !important; }

/* Sticky-header offset for in-page anchors, site-wide. The header is sticky
   (see section 16), so a #fragment jump or scrollIntoView would otherwise land
   the target beneath it. Measured header heights: 109px (60px logo) and 93px
   at <=720px (44px logo); the WordPress admin bar adds 32px, or 46px at
   <=782px. One source: html scroll-padding covers every [id] target. */
:root {
  --nc-header-height: 109px;
  --nc-adminbar-height: 0px;
}
@media (max-width: 720px) {
  :root { --nc-header-height: 93px; }
}
/* WordPress puts .wp-toolbar on <html> (and .admin-bar on <body>) when the
   toolbar shows; scroll-padding lives on <html>, so key off the former. */
html.wp-toolbar { --nc-adminbar-height: 32px; }
@media (max-width: 782px) {
  html.wp-toolbar { --nc-adminbar-height: 46px; }
}
html { scroll-padding-top: calc(var(--nc-header-height) + var(--nc-adminbar-height) + var(--nc-space-4)); }