/*
Theme Name: Unicraft
Description: Bespoke joinery and contract furniture — form, through process.
Version: 1.3.7
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: unicraft
*/

:root {
  /* ---- Primary palette ---------------------------------- */
  --color-acid-yellow:   #FDFE78;   /* logo, headlines, key CTAs */
  --color-deep-brown:    #3B2219;   /* card bgs, footers, anchors */
  --color-off-white:     #E5E5DE;   /* warm paper page bg */

  /* ---- Extended palette --------------------------------- */
  --color-olive:         #9CA938;   /* sparing tertiary accent */
  --color-near-black:    #090B0A;   /* ink, body on light */

  /* ---- Functional tokens -------------------------------- */
  --color-text-primary:  var(--color-near-black);
  --color-text-inverse:  var(--color-off-white);
  --color-text-accent:   var(--color-acid-yellow);
  --color-text-muted:    color-mix(in srgb, var(--color-near-black) 60%, var(--color-off-white));

  --color-bg-primary:    var(--color-off-white);
  --color-bg-dark:       var(--color-deep-brown);
  --color-bg-ink:        var(--color-near-black);

  --color-border:        color-mix(in srgb, var(--color-near-black) 12%, var(--color-off-white));
  --color-border-strong: color-mix(in srgb, var(--color-near-black) 24%, var(--color-off-white));
  --color-rule-dark:     color-mix(in srgb, var(--color-acid-yellow) 20%, transparent);

  /* ---- Typography --------------------------------------- */
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Instrument Sans', sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12 — legal, labels */
  --text-sm:   0.875rem;   /* 14 — nav, captions */
  --text-base: 1rem;       /* 16 — body */
  --text-md:   1.125rem;   /* 18 — large body */
  --text-lg:   1.5rem;     /* 24 — subheads */
  --text-xl:   2.25rem;    /* 36 — section titles */
  --text-2xl:  3.5rem;     /* 56 — hero secondary */
  --text-3xl:  5.5rem;     /* 88 — hero primary */
  --text-4xl:  8rem;       /* 128 — editorial display */

  /* Line height */
  --lh-display: 0.95;
  --lh-tight:   1.1;
  --lh-body:    1.65;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-caption: 0.12em;
  --tr-nav:     0.08em;

  /* ---- Spacing scale (8px base) ------------------------- */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 128px;
  --space-9: 192px;

  /* ---- Layout ------------------------------------------- */
  --layout-max:     1440px;
  --content-max:    1200px;
  --side-margin:    80px;
  --side-margin-md: 40px;
  --side-margin-sm: 24px;

  /* ---- Motion ------------------------------------------- */
  --ease-craft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-slow:   900ms;
  --dur-base:   600ms;
  --dur-quick:  300ms;

  /* ---- Breakpoints (reference; use @media) -------------- */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
}

/* ============================================================
   Base / reset
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-off-white);
  color: var(--color-near-black);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

/* Kill WP's default 24px block gap between root-level template parts/content
   (overrides the zero-specificity :where(.wp-site-blocks) > * global style) */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* ============================================================
   Photography placeholder
   warm-brown gradient + svg grain — convention from the design system
   ============================================================ */
.uc-photo {
  position: relative;
  width: 100%;
  background-color: #3B2219;
  background-image:
    radial-gradient(120% 80% at 25% 18%, rgba(255, 214, 138, 0.22) 0%, rgba(255, 214, 138, 0) 55%),
    radial-gradient(140% 90% at 78% 88%, rgba(20, 12, 8, 0.55) 0%, rgba(20, 12, 8, 0) 60%),
    linear-gradient(135deg, #5a3a26 0%, #3B2219 38%, #1c100b 100%);
  overflow: hidden;
  isolation: isolate;
}
.uc-photo::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwLjIxICAwIDAgMCAwIDAuMTMgIDAgMCAwIDAgMC4wOSAgMCAwIDAgMC41NSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoJTIzbiknIG9wYWNpdHk9JzAuNTUnLz48L3N2Zz4=");
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}
.uc-photo > * { position: relative; z-index: 2; }
.uc-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1 !important; }
/* when a real photo is present, drop the heavy grain to a faint sheen */
.uc-photo:has(.uc-photo__img)::after { opacity: 0.1; }

/* tone variants */
.uc-photo--raking {
  background-image:
    radial-gradient(70% 50% at 15% 10%, rgba(253, 254, 120, 0.18) 0%, rgba(253, 254, 120, 0) 55%),
    radial-gradient(120% 90% at 80% 95%, rgba(15, 9, 6, 0.7) 0%, rgba(15, 9, 6, 0) 60%),
    linear-gradient(118deg, #6b462e 0%, #432619 42%, #1a0e09 100%);
}
.uc-photo--detail {
  background-image:
    radial-gradient(90% 70% at 50% 40%, rgba(176, 124, 79, 0.35) 0%, rgba(176, 124, 79, 0) 65%),
    radial-gradient(140% 100% at 10% 100%, rgba(10, 6, 4, 0.7) 0%, rgba(10, 6, 4, 0) 50%),
    linear-gradient(90deg, #4a2c1d 0%, #3B2219 50%, #2a160d 100%);
}
.uc-photo--grain {
  background-image:
    repeating-linear-gradient(92deg,
      rgba(0,0,0,0.05) 0px,
      rgba(0,0,0,0.05) 1px,
      transparent 1px,
      transparent 5px),
    repeating-linear-gradient(89deg,
      rgba(255, 220, 160, 0.04) 0px,
      rgba(255, 220, 160, 0.04) 2px,
      transparent 2px,
      transparent 11px),
    linear-gradient(180deg, #5e3a24 0%, #3B2219 60%, #261408 100%);
}
.uc-photo--light {
  background-color: #c7b59a;
  background-image:
    radial-gradient(80% 60% at 20% 20%, rgba(255, 245, 220, 0.45) 0%, rgba(255, 245, 220, 0) 60%),
    radial-gradient(120% 100% at 90% 100%, rgba(82, 53, 33, 0.45) 0%, rgba(82, 53, 33, 0) 55%),
    linear-gradient(150deg, #d6c3a3 0%, #b89a73 50%, #8a6943 100%);
}
.uc-photo--light::after { opacity: 0.22; mix-blend-mode: multiply; }
.uc-photo--workshop {
  background-image:
    radial-gradient(60% 45% at 18% 15%, rgba(253, 254, 120, 0.16) 0%, rgba(253, 254, 120, 0) 55%),
    radial-gradient(120% 90% at 88% 95%, rgba(10, 6, 4, 0.75) 0%, rgba(10, 6, 4, 0) 60%),
    linear-gradient(160deg, #4d2f1f 0%, #2f1a10 60%, #120a06 100%);
}
.uc-photo--ash {
  background-color: #2f1b12;
  background-image:
    radial-gradient(100% 70% at 50% 30%, rgba(214, 169, 110, 0.18) 0%, rgba(214, 169, 110, 0) 60%),
    linear-gradient(180deg, #3a2218 0%, #251309 100%);
}

/* small bottom-left caption inside photo */
.uc-photo__cap {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(229, 229, 222, 0.55);
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* Hidden reveal state is scoped to `html.uc-js` (set by reveal.js only when
   IntersectionObserver exists and reduced-motion isn't requested) so content
   is never hidden unless something is guaranteed to un-hide it — no-JS /
   IO-unsupported visitors always see full content, never a blank page. */
@media (prefers-reduced-motion: no-preference) {
  html.uc-js .uc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-craft), transform 700ms var(--ease-craft);
    will-change: opacity, transform;
  }
  html.uc-js .uc-reveal.is-in { opacity: 1; transform: none; }
  html.uc-js .uc-reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-craft), transform 700ms var(--ease-craft);
  }
  html.uc-js .uc-reveal-stagger.is-in > * { opacity: 1; transform: none; }
  html.uc-js .uc-reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
  html.uc-js .uc-reveal-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
  html.uc-js .uc-reveal-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; }
  html.uc-js .uc-reveal-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
  html.uc-js .uc-reveal-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; }
  html.uc-js .uc-reveal-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; }
}

/* ============================================================
   Layout
   ============================================================ */
.uc-shell { max-width: 1440px; margin: 0 auto; padding: 0 80px; }
@media (max-width: 1024px) { .uc-shell { padding: 0 40px; } }
@media (max-width: 640px)  { .uc-shell { padding: 0 24px; } }

/* hard rule */
.uc-rule { height: 1px; background: rgba(9, 11, 10, 0.12); border: 0; }
.uc-rule--dark { background: rgba(253, 254, 120, 0.22); }

/* bracket motif inline word */
.uc-bracket {
  color: var(--color-acid-yellow);
}
.uc-bracket::before { content: "["; }
.uc-bracket::after  { content: "]"; }

/* selection */
::selection { background: var(--color-acid-yellow); color: var(--color-deep-brown); }

/* focus */
:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: 3px; }

/* logo lockup */
.uc-logo {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  white-space: pre;
  display: inline-block;
  user-select: none;
}

/* nav link */
.uc-link {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  opacity: 0.62;
  transition: opacity 280ms var(--ease-craft);
  cursor: pointer;
}
.uc-link:hover, .uc-link.is-active { opacity: 1; }
.uc-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-acid-yellow);
}

/* ============================================================
   Hero logo intro animation — restrained, brand-aligned
   ============================================================ */
.uc-hero-logo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: var(--color-acid-yellow);
}
.uc-hero-logo__row {
  display: flex;
  align-items: baseline;
}
.uc-hero-logo__ch,
.uc-hero-logo__br {
  display: inline-block;
  white-space: pre;
}

@media (prefers-reduced-motion: no-preference) {
  /* hidden start-state for animated variants */
  .uc-hero-logo[data-anim="settle"] .uc-hero-logo__ch,
  .uc-hero-logo[data-anim="settle"] .uc-hero-logo__br,
  .uc-hero-logo[data-anim="build"]  .uc-hero-logo__ch,
  .uc-hero-logo[data-anim="build"]  .uc-hero-logo__br {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: var(--ease-craft);
  }

  /* SETTLE — brackets slide in from outside, letters fade up */
  .uc-hero-logo[data-anim="settle"] .uc-hero-logo__ch {
    animation-name: ucLogoFadeUp;
    animation-duration: 800ms;
  }
  .uc-hero-logo[data-anim="settle"] .uc-hero-logo__br--l {
    animation-name: ucLogoBrL;
    animation-duration: 1000ms;
  }
  .uc-hero-logo[data-anim="settle"] .uc-hero-logo__br--r {
    animation-name: ucLogoBrR;
    animation-duration: 1000ms;
  }

  /* BUILD — uniform letter cascade */
  .uc-hero-logo[data-anim="build"] .uc-hero-logo__ch,
  .uc-hero-logo[data-anim="build"] .uc-hero-logo__br {
    animation-name: ucLogoFadeUp;
    animation-duration: 700ms;
  }
}

@keyframes ucLogoFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ucLogoBrL {
  from { opacity: 0; transform: translateX(-56px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ucLogoBrR {
  from { opacity: 0; transform: translateX(56px); }
  to   { opacity: 1; transform: none; }
}
.uc-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: none;
  color: rgba(9, 11, 10, 0.55);
}
.uc-eyebrow--dark { color: rgba(229, 229, 222, 0.55); }

/* ============================================================
   Lifecycle domino — scroll-tied flip + hover zoom
   ============================================================ */
.uc-domino {
  /* rotation is driven inline from JS via scroll progress */
  display: block;
}
.uc-domino__inner {
  overflow: hidden;
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
}
.uc-domino__inner .uc-photo {
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.uc-domino__inner:hover {
  z-index: 5;
}
.uc-domino__inner:hover .uc-photo {
  transform: scale(1.18);
  filter: brightness(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .uc-domino { transform: none !important; opacity: 1 !important; }
}

/* Service image cards — subtle hover lift on the photo */
.uc-svc-img .uc-photo {
  transition: transform 600ms var(--ease-craft), filter 600ms var(--ease-craft);
}
.uc-svc-img:hover .uc-photo {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Mobile — global section padding + touch targets
   (block-specific mobile rules live in each block)
   ============================================================ */
@media (max-width: 900px) {
  .uc-section { padding-top: 80px !important; padding-bottom: 80px !important; }
  button, .uc-btn { min-height: 44px; }
}

/* ============================================================
   Shared component classes — used by every block
   ============================================================ */
.uc-section { padding: 120px 0; }
.uc-section--dark { background: var(--color-deep-brown); color: var(--color-off-white); }
.uc-section--light { background: var(--color-off-white); color: var(--color-near-black); }
.uc-eyebrow-row { display: flex; align-items: flex-start; gap: 24px; }
.uc-eyebrow-row__rule { flex: 1; height: 1px; background: rgba(9,11,10,0.18); margin-top: 9px; }
.uc-section--dark .uc-eyebrow-row__rule { background: rgba(253,254,120,0.22); }
.uc-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.4vw, 72px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; }
.uc-btn { display: inline-block; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.04em; padding: 15px 30px; text-decoration: none; font-weight: 600; cursor: pointer; transition: transform 240ms var(--ease-craft), filter 240ms var(--ease-craft), background 240ms var(--ease-craft); }
.uc-btn--yellow { background: var(--color-acid-yellow); color: var(--color-deep-brown); }
.uc-btn--yellow:hover { filter: brightness(1.05); transform: translateY(-2px); }
.uc-btn--ghost { background: transparent; color: var(--color-acid-yellow); border: 1px solid rgba(253,254,120,0.6); font-weight: 500; }
.uc-btn--ghost:hover { background: rgba(253,254,120,0.12); }
.uc-btn--brown { background: var(--color-deep-brown); color: var(--color-off-white); font-weight: 500; font-size: 13px; padding: 14px 28px; }
.uc-btn--brown:hover { filter: brightness(1.15); transform: translateY(-2px); }

/* ============================================================
   Project hub (single-uc_project.html) - CASE STUDY BRIEF.
   Every text element (headings, paragraphs, the specs block, the quote)
   shares one 1200px max-width container with consistent horizontal
   gutters (40px / 24px mobile, see the breakpoint below) - nothing in
   the flow is full-bleed except the hero (its own block) and gallery
   images, whose container is deliberately allowed a wider 1440px frame
   (see work-gallery/style.css) while staying centered on this same page
   axis. Scoped entirely to `.single-uc_project` - `.single-uc_work` /
   `.single-uc_service` keep the original left-pinned column in the
   section below, completely untouched.

   post-content ITSELF is still whatever the client authored (untouched -
   no markup/text changes); only its container geometry changes here.
   ============================================================ */
.single-uc_project .wp-block-post-content > *:not(.alignfull):not(.alignwide) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
/* project-hero now ends flush on its own image (its bottom padding was
   removed - see project-hero/style.css) rather than leaving a residual
   dark band before the cream background starts, so this is the SINGLE
   source of the hero-to-content gap (a scale value, not two stacked
   margins): 64px desktop, 40px mobile (see the breakpoint below).

   Repeats the `:not(.alignfull):not(.alignwide)` pair (5 classes total)
   so this always outranks the paragraph rule below (4 classes + a `p`
   element) regardless of source order - without it, a lead paragraph
   (true for every case-study content file) is BOTH `:first-child` AND
   matched by that paragraph rule's higher specificity, which would zero
   this margin back out. Caught via a real gap measurement during
   verification (measured 0px instead of 64px here before this fix). */
.single-uc_project .wp-block-post-content > *:first-child:not(.alignfull):not(.alignwide) {
  margin-top: 64px;
}
/* Paragraphs additionally cap their own readable measure, still centered
   within the (already-centered) column above: matching the container
   rule's own `:not()` pair plus the `p` tag is what gives this selector
   enough specificity to outrank the container rule above regardless of
   source order (same technique the work/service rule below uses). */
.single-uc_project .wp-block-post-content > p:not(.alignfull):not(.alignwide) {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  /* Top/bottom zeroed deliberately: a bare browser default (~1em) here
     is exactly the kind of ad-hoc, unaudited margin the spacing-scale
     constraint rules out. Every neighboring block (the specs card, an
     h2, a quote, a gallery, `.uc-narrative`) already carries its own
     explicit scale-value margin, so the visible gap around a direct
     paragraph is always that neighbor's own margin - never a sum of two
     unrelated values. */
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .uc-h2 { font-size: clamp(32px, 9vw, 52px); line-height: 1.02; }
}
/* Mobile breakpoint for this page's own container/rhythm rules is 768px
   (paired with the 1200px desktop breakpoint used throughout this
   section and in specs/work-gallery's own project-scoped CSS) rather
   than the sitewide 640px used by `.uc-h2` above or the work/service
   container below. */
@media (max-width: 768px) {
  .single-uc_project .wp-block-post-content > *:not(.alignfull):not(.alignwide) {
    padding-left: 24px;
    padding-right: 24px;
  }
  .single-uc_project .wp-block-post-content > *:first-child:not(.alignfull):not(.alignwide) {
    margin-top: 40px;
  }
}

/* Work/service paragraphs keep the original left-pinned technique - see
   the "Work detail page" section below for their own container rule.
   `.single-uc_project` is intentionally absent here now (it has its own
   centered paragraph rule above instead). */
.single-uc_work .wp-block-post-content > p:not(.alignfull):not(.uc-work-hero),
.single-uc_service .wp-block-post-content > p:not(.alignfull):not(.uc-service-hero) {
  max-width: calc(62ch + 160px);   /* 62ch text + 80px padding each side (border-box) */
  margin-left: max(0px, calc((100% - var(--layout-max)) / 2));
  margin-right: auto;
}

/* ============================================================
   Work detail page (single-uc_work.html) — the CPT template's
   plain post-content flow (specs + gallery + a closing paragraph,
   see the `template` arg on register_post_type( 'uc_work', ... ))
   renders with NO container at all, so — unlike work-hero, which
   supplies its own `.uc-shell` and a full-bleed dark section
   background on purpose — everything after it (including
   work-gallery, which per its own index.js/render.php comments is
   meant to sit "inside post content flow" rather than be its own
   section) runs edge-to-edge. Constrain every top-level
   post-content child except work-hero to the same content column
   as the rest of the site, and give the flow reasonable vertical
   rhythm so specs/gallery/paragraph don't collide with the hero
   above or the footer below. Geometry mirrors `.uc-shell` exactly
   (max-width: var(--layout-max) plus the same 80/40/24px responsive
   side padding, not the narrower --content-max) so this column's
   left edge lines up with the hero's own `.uc-shell` above it;
   paragraph readable measure is capped separately, on the paragraph
   itself (see the shared `.wp-block-post-content p { max-width: 62ch }`
   rule in the project-hub section above) rather than narrowing this
   whole container.

   The Workshop service detail page (single-uc_service.html) is the
   exact same plain post-content flow (service-hero + specs + gallery
   + closing paragraph, see the `template` arg on
   register_post_type( 'uc_service', ... )), so `.single-uc_service`
   is added alongside `.single-uc_work` in every selector below rather
   than duplicating these rule bodies.
   ============================================================ */
.single-uc_work .wp-block-post-content > *:not(.alignfull):not(.uc-work-hero),
.single-uc_service .wp-block-post-content > *:not(.alignfull):not(.uc-service-hero) {
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 80px;
  padding-right: 80px;
  box-sizing: border-box;
}
.single-uc_work .wp-block-post-content > .uc-specs,
.single-uc_work .wp-block-post-content > p,
.single-uc_service .wp-block-post-content > .uc-specs,
.single-uc_service .wp-block-post-content > p {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media (max-width: 1024px) {
  .single-uc_work .wp-block-post-content > *:not(.alignfull):not(.uc-work-hero),
  .single-uc_service .wp-block-post-content > *:not(.alignfull):not(.uc-service-hero) {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 640px) {
  .single-uc_work .wp-block-post-content > *:not(.alignfull):not(.uc-work-hero),
  .single-uc_service .wp-block-post-content > *:not(.alignfull):not(.uc-service-hero) {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================
   Story typography — core headings/lists/quotes/figures inside
   the three detail-page post-content flows (single-uc_work,
   single-uc_service, single-uc_project). Paragraphs and the custom
   blocks (uc-specs, uc-work-gallery, work-hero/service-hero) already
   have their own styling from elsewhere in this file / their block's
   own stylesheet; this section only fills in the core Gutenberg
   blocks an editor drops into the flow to build out a rich story
   (heading, list, quote, standalone image) that otherwise render
   browser-default.

   Selectors key off the class WP core itself stamps on each block
   (`.wp-block-heading`, `.wp-block-list`, `.wp-block-quote`,
   `.wp-block-image`) rather than a bare tag, so a custom block that
   happens to emit its own `<h3>`/`<ul>` (e.g. `.uc-specs__h`) is never
   accidentally re-styled — those don't carry the core class. Figures
   are scoped to a DIRECT child of `.wp-block-post-content`
   specifically (rather than any-depth descendant, like every other
   rule here) so a standalone `core/image` dropped into the flow gets
   this treatment while a `core/image` nested inside a
   `unicraft/work-gallery` → `core/gallery` (several levels deep) is
   left alone for ../unicraft-core/src/work-gallery/style.css to
   style instead — see the "unchanged" note there.
   ============================================================ */
.single-uc_work .wp-block-post-content h2.wp-block-heading,
.single-uc_service .wp-block-post-content h2.wp-block-heading,
.single-uc_project .wp-block-post-content h2.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-deep-brown);
  margin: 72px 0 24px;
}
.single-uc_work .wp-block-post-content h3.wp-block-heading,
.single-uc_service .wp-block-post-content h3.wp-block-heading,
.single-uc_project .wp-block-post-content h3.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-deep-brown);
  margin: 48px 0 16px;
}

/* Lists — `ul` drops its disc marker for the same 4px×1px dash used
   by `.uc-lifecycle__list li::before` (unicraft-core/src/lifecycle/
   style.css), recolored for a light background (deep-brown at 50%
   via color-mix, vs. that block's acid-yellow-on-dark original);
   `ol` keeps its native decimal marker, just restyled via `::marker`
   since a plain numeral in body copy reads as an afterthought here. */
.single-uc_work .wp-block-post-content ul.wp-block-list,
.single-uc_service .wp-block-post-content ul.wp-block-list,
.single-uc_project .wp-block-post-content ul.wp-block-list,
.single-uc_work .wp-block-post-content ol.wp-block-list,
.single-uc_service .wp-block-post-content ol.wp-block-list,
.single-uc_project .wp-block-post-content ol.wp-block-list {
  margin: 24px 0;
}
.single-uc_work .wp-block-post-content ul.wp-block-list,
.single-uc_service .wp-block-post-content ul.wp-block-list,
.single-uc_project .wp-block-post-content ul.wp-block-list {
  list-style: none;
  padding-left: 0;
}
.single-uc_work .wp-block-post-content ul.wp-block-list li,
.single-uc_service .wp-block-post-content ul.wp-block-list li,
.single-uc_project .wp-block-post-content ul.wp-block-list li,
.single-uc_work .wp-block-post-content ol.wp-block-list li,
.single-uc_service .wp-block-post-content ol.wp-block-list li,
.single-uc_project .wp-block-post-content ol.wp-block-list li {
  font-size: 15px;
  line-height: 1.7;
}
.single-uc_work .wp-block-post-content ul.wp-block-list li,
.single-uc_service .wp-block-post-content ul.wp-block-list li,
.single-uc_project .wp-block-post-content ul.wp-block-list li {
  padding-left: 16px;
  position: relative;
}
.single-uc_work .wp-block-post-content ul.wp-block-list li::before,
.single-uc_service .wp-block-post-content ul.wp-block-list li::before,
.single-uc_project .wp-block-post-content ul.wp-block-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 4px;
  height: 1px;
  background: color-mix(in srgb, var(--color-deep-brown) 50%, transparent);
}
.single-uc_work .wp-block-post-content ol.wp-block-list li::marker,
.single-uc_service .wp-block-post-content ol.wp-block-list li::marker,
.single-uc_project .wp-block-post-content ol.wp-block-list li::marker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-deep-brown);
}

/* Quote — no default WP border/italics; a deep-brown rule stands in
   for the acid-yellow bracket motif, which is too weak a contrast on
   this light background (acid-yellow stays reserved for dark
   sections elsewhere in this file).

   The rule is a `::before` pseudo, not a literal `border-left`: the
   blockquote itself is a direct child of `.wp-block-post-content`, so
   it's caught by the container-constraint rule above, whose
   `:not(.alignfull):not(.uc-work-hero)`-boosted selector (4 classes)
   out-specifies a plain `blockquote.wp-block-quote` selector (3
   classes) and wins the cascade for `padding-left`/`padding-right`
   (80/40/24px, responsive) regardless of source order — a literal
   `border-left` draws at the *border* edge (this element's own left
   edge, before that padding starts), landing at the page's outer
   margin instead of the content column (confirmed by screenshot: a
   stray mark at the viewport edge, disconnected from the text). An
   absolutely-positioned `::before` doesn't escape that padding either
   — its containing block is the ancestor's *padding box*, whose own
   origin sits at that same border edge, so `left: 0` lands in the
   exact same wrong spot. What actually works is positioning the rule
   at `left: 80px` (the container rule's own padding value) explicitly,
   with matching values at the same 1024/640 breakpoints the container
   rule itself uses below — i.e. deliberately duplicating that padding
   number rather than fighting to inherit it. The 28px "padding-left"
   from the spec becomes the `p`/`cite`'s own `padding-left` instead of
   the blockquote's — those aren't direct children of
   `.wp-block-post-content` so the container rule never touches them,
   and 28px there reads as the quote text sitting just past the rule. */
.single-uc_work .wp-block-post-content blockquote.wp-block-quote,
.single-uc_service .wp-block-post-content blockquote.wp-block-quote,
.single-uc_project .wp-block-post-content blockquote.wp-block-quote {
  position: relative;
  border: 0;
  margin: 48px 0;
}
.single-uc_work .wp-block-post-content blockquote.wp-block-quote::before,
.single-uc_service .wp-block-post-content blockquote.wp-block-quote::before,
.single-uc_project .wp-block-post-content blockquote.wp-block-quote::before {
  content: '';
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-deep-brown);
}
@media (max-width: 1024px) {
  .single-uc_work .wp-block-post-content blockquote.wp-block-quote::before,
  .single-uc_service .wp-block-post-content blockquote.wp-block-quote::before,
  .single-uc_project .wp-block-post-content blockquote.wp-block-quote::before {
    left: 40px;
  }
}
@media (max-width: 640px) {
  .single-uc_work .wp-block-post-content blockquote.wp-block-quote::before,
  .single-uc_service .wp-block-post-content blockquote.wp-block-quote::before,
  .single-uc_project .wp-block-post-content blockquote.wp-block-quote::before {
    left: 24px;
  }
}
.single-uc_work .wp-block-post-content blockquote.wp-block-quote p,
.single-uc_service .wp-block-post-content blockquote.wp-block-quote p,
.single-uc_project .wp-block-post-content blockquote.wp-block-quote p {
  padding-left: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-deep-brown);
  margin: 0;
}
.single-uc_work .wp-block-post-content blockquote.wp-block-quote cite,
.single-uc_service .wp-block-post-content blockquote.wp-block-quote cite,
.single-uc_project .wp-block-post-content blockquote.wp-block-quote cite {
  display: block;
  padding-left: 28px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: 12px;
}

/* Standalone figure/figcaption — a `core/image` placed directly in
   the flow (not inside `unicraft/work-gallery`); caption aesthetic
   echoes `.uc-photo__cap` (small, tracked-out, lowercase). */
.single-uc_work .wp-block-post-content > figure.wp-block-image figcaption,
.single-uc_service .wp-block-post-content > figure.wp-block-image figcaption,
.single-uc_project .wp-block-post-content > figure.wp-block-image figcaption {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: color-mix(in srgb, currentColor 55%, transparent);
  margin-top: 10px;
}
@media (max-width: 640px) {
  .single-uc_work .wp-block-post-content h2.wp-block-heading,
  .single-uc_service .wp-block-post-content h2.wp-block-heading,
  .single-uc_project .wp-block-post-content h2.wp-block-heading {
    margin: 56px 0 20px;
  }
}

/* ============================================================
   Project detail page (single-uc_project.html) - CASE STUDY BRIEF,
   distinct type + spacing scale + contrast.
   Scoped entirely to `.single-uc_project` and appended after every
   shared "Story typography" rule above so these overrides win ties
   against the equal-specificity shared selectors via source order alone
   - only text-align, margins, color and the heading/quote decoration are
   touched here; font-size/weight/family and every other shared property
   above is left completely alone. All margins in this section come from
   this page's own spacing scale (8/16/24/40/64/96/128px) only - see the
   audit table in the case-study report for the full before/after list.
   ============================================================ */
.single-uc_project .wp-block-post-content h2.wp-block-heading {
  text-align: center;
  /* was 72px/24px (shared rule, not on this page's scale) */
  margin: 64px 0 24px;
}
.single-uc_project .wp-block-post-content h2.wp-block-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-deep-brown);
  margin: 20px auto 0;
}
/* Quote: centered, with no left rule - the shared `::before` rule mark
   (deep-brown border-substitute, see the "Story typography" section
   above) reads as a left-alignment cue that fights a centered quote, so
   it's removed here via `content: none` (which prevents the pseudo-element
   from generating a box at all) rather than merely hiding it. The p/cite
   `padding-left: 28px` those shared rules add to clear that rule mark is
   no longer needed once the mark itself is gone; `text-align: center` on
   the blockquote itself is inherited by both the quote text and the
   citation below it, so neither needs its own text-align rule. */
.single-uc_project .wp-block-post-content blockquote.wp-block-quote {
  text-align: center;
  /* was 48px 0 (shared rule, not on this page's scale) */
  margin: 40px 0;
}
.single-uc_project .wp-block-post-content blockquote.wp-block-quote::before {
  content: none;
}
.single-uc_project .wp-block-post-content blockquote.wp-block-quote p,
.single-uc_project .wp-block-post-content blockquote.wp-block-quote cite {
  padding-left: 0;
}
/* Muted-text contrast (WCAG AA, >=4.5:1 on the bone --color-off-white
   background): the shared cite/figcaption rules above use a translucent
   currentColor mix tuned for both light AND dark sections, which lands
   under 4.5:1 here. #4A4238 (a solid, slightly warmer deep-brown-family
   value) measures ~7.8:1 on this background. */
.single-uc_project .wp-block-post-content blockquote.wp-block-quote cite,
.single-uc_project .wp-block-post-content > figure.wp-block-image figcaption {
  color: #4A4238;
}

/* ============================================================
   Project detail page (single-uc_project.html) - NARRATIVE COLUMNS.
   The two "narrative" sections (an H2 + body copy) are each wrapped by
   the content author in a `wp:group {"className":"uc-narrative"}` -
   see the case-study content files. Desktop-only (>=1200px, this page's
   own breakpoint) 2-column text, matching the design brief's explicit
   "column-count 2, gap 48" spec for this one element (the page's own
   8/16/24/40/64/96/128 spacing scale otherwise governs every other
   margin/padding in this file - 48px is a deliberate, brief-mandated
   exception for this single property, not an oversight). Below 1200px
   the group is single-column, same as the rest of the mobile-first page.

   The group itself carries explicit margin (rather than relying on its
   child heading's own margin collapsing through the group's box, which
   depends on whether `.wp-block-group` establishes its own formatting
   context) so the gap before/after it is deterministic regardless of
   that; the heading's own top margin is zeroed as its first child so it
   doesn't ALSO add space inside the box on top of the group's. */
.single-uc_project .wp-block-post-content > .uc-narrative:not(.alignfull):not(.alignwide) {
  margin-top: 64px;
  margin-bottom: 40px;
}
.single-uc_project .uc-narrative > h2.wp-block-heading:first-child {
  margin-top: 0;
}
.single-uc_project .uc-narrative p {
  max-width: 68ch;
}
@media (min-width: 1200px) {
  .single-uc_project .uc-narrative {
    column-count: 2;
    column-gap: 40px;
  }
  .single-uc_project .uc-narrative > h2.wp-block-heading {
    column-span: all;
  }
}

/* ============================================================
   Project detail page (single-uc_project.html) - PROJECT FACTS spacing.
   `.uc-specs`'s own bordered-card look lives in unicraft-core/src/specs/
   style.css; this page's own margin (matching the "medium" 40px step
   used for the quote above) lives here since it's a page-level rhythm
   concern, not a block-styling one.
   ============================================================ */
.single-uc_project .wp-block-post-content > .uc-specs:not(.alignfull):not(.alignwide) {
  /* top/bottom only - left/right must stay `auto`/`auto` (the general
     container rule's own centering), so `margin: 40px 0` (which would
     zero both horizontal sides via the shorthand) is deliberately NOT
     used here - caught via a real 1920px regression during verification,
     where the card rendered flush against the left edge instead of
     centered. */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* ============================================================
   Project detail page (single-uc_project.html) - SELECTED WORKS section
   spacing. `.uc-works` (unicraft/works-grid) inherits the sitewide
   `.uc-section { padding: 120px 0; }`, which isn't on this page's scale;
   96px (the closest scale step) keeps the section generously spaced
   without introducing a large empty gap on top of the post-content flow
   above it. Scoped to this page only - every other `.uc-section` on the
   site (services, about, contact, etc.) keeps the sitewide 120px value. */
.single-uc_project .uc-works {
  padding: 96px 0;
}

/* ============================================================
   Project detail page (single-uc_project.html) - SMALLER IMAGES,
   standalone case. A lone `core/image` dropped directly into the
   post-content flow (not inside `unicraft/work-gallery`, whose own
   editorial-gallery treatment lives in unicraft-core/src/work-gallery/
   style.css instead) needs capping here rather than there: that block
   stylesheet only loads on pages that actually use the work-gallery
   block, but a standalone image can appear on a project page with no
   gallery block at all - this theme stylesheet always loads.

   The container rule at the top of this file already matches this same
   figure (a direct, non-aligned child of `.wp-block-post-content`) and
   sets max-width: 1200px there with 4 class-level selectors of
   specificity (`:not()` counts as a class each). Repeating its same
   `:not(.alignfull):not(.alignwide)` pair here (plus the
   `figure.wp-block-image` type+class) is what gives this rule enough
   specificity to actually win regardless of source order - the same
   technique this file's own paragraph override above already uses
   against that same container rule. */
.single-uc_project .wp-block-post-content > figure.wp-block-image:not(.alignfull):not(.alignwide) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}