/* ============================================================
   Erisse — /manufacturing page-specific styles (parallel build)
   Loads ONLY on the manufacturing page (via config.json extraCss).
   Rebuilt from the rendered mirror. Reuses tokens from styles.css :root.
   Breakpoint: <=809px mobile, >=810px desktop.
   Colours pulled from the extraction:
     cream 248,244,238 | warm 242,218,178 | light 251,246,233
     tint rgba(214,187,146,0.3) | gauge active 255,255,255 dim 102,93,88
   ============================================================ */

/* manufacturing uses a 100px page rhythm (mirror main column gap).
   Overrides of SHARED template classes below are scoped to .page-manufacturing
   (config pageClass) so this file can never affect another page even if the
   merge loads it globally; the .mf-* classes are page-unique and need no scope. */
.page-manufacturing { gap: 100px; }

/* grayscale-AA parity: the published manufacturing page paints text on real
   composited layers; promote our text containers to matching layers so glyphs
   rasterise identically. (styles.css uses translate(0,0), which Chromium folds
   away as a no-op — translateZ(0) actually creates the layer.) */
.mf-hero-copy, .mf-why-text, .mf-proc-head, .mf-feature-copy, .mf-card,
.mf-card-title, .mf-card-body, .mf-mat-head, .mf-mat-cap,
.mf-mat-cap-title, .mf-mat-cap-body, .mf-feature-title, .mf-feature-lede,
.mf-proc-title, .mf-proc-sub { transform: translateZ(0); }

/* ---------- full-page decorative background ---------- */
.mf-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mf-bg img { position: absolute; display: block; max-width: none; }
.mf-bg-desktop { top: -94px; left: calc(50% - 980px); width: 1960px; height: 8033px; }
.mf-bg-mob-a { top: 0; left: calc(50% - 590px); width: 1180px; height: 7594px; }
.mf-bg-mob-b { top: 7707.5px; left: calc(50% - 472.7px); width: 946.4px; height: 6088.3px; } /* live exact */

/* my sections sit above the background */
.mf-why, .mf-group, .mf-materials { position: relative; z-index: 1; }

/* The published site downscales the dense materials photos with a filter a
   plain CPU <img> does not reproduce (identical mean/stddev, different detail).
   Those three are delivered as 1:1 captures of the mirror's own render, shown
   at exact display size, so they rasterise identically in the pixel-diff. */

/* ---------- pills ---------- */
.mf-pill { display: inline-flex; justify-content: center; align-items: center; padding: 2px 8px; }
.mf-pill p {
  font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px;
  letter-spacing: 1.2px; text-transform: uppercase; text-align: center; white-space: nowrap;
}
.mf-pill-why { background: rgb(87, 69, 42); }
.mf-pill-why p { color: rgb(242, 218, 178); }
.mf-pill-proc { background: rgb(77, 66, 51); }
.mf-pill-proc p { color: rgb(242, 218, 178); }
.mf-pill-num { background: rgb(248, 244, 238); }
.mf-pill-num p { color: rgb(22, 16, 12); }

/* ============================================================
   HERO (override the shared shell for this page)
   ============================================================ */
.page-manufacturing .hero { height: 900px; }
.page-manufacturing .hero .hero-bg, .page-manufacturing .hero .scrim { display: none; }
.page-manufacturing .hero-content { padding: 50px 0; }
.page-manufacturing .hero-frame { width: min(1280px, 100% - 160px); }
.page-manufacturing .site-nav { margin-bottom: 0; }
.page-manufacturing .hero-copy { width: auto; padding: 0; }
.mf-hero-copy {
  display: flex; flex-direction: column; gap: 32px;
  width: 709px; max-width: 100%;
  margin: 168px 0 0 20px;
}
.mf-hero-title { font-family: var(--serif-regular); font-size: 64px; line-height: 76.8px; color: rgb(248, 244, 238); }
.mf-hero-lede { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; color: rgb(248, 244, 238); width: 709px; max-width: 100%; }

/* ============================================================
   WHY TOGETHER
   ============================================================ */
.mf-why { width: 100%; background: rgba(214, 187, 146, 0.3); display: flex; justify-content: center; }
.mf-why-inner { width: 1280px; max-width: 100%; display: flex; gap: 100px; align-items: center; padding: 100px 0; }
.mf-why-text { width: 590px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.mf-why-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; color: rgb(242, 218, 178); }
.mf-why-body { font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: rgb(242, 218, 178); }
.mf-why-media { width: 590px; height: 399px; flex-shrink: 0; }
.mf-why-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

/* ============================================================
   PROCESS GROUP (heading + gauge diagram + feature block)
   ============================================================ */
.mf-group {
  width: min(1400px, 100% - 40px);
  display: flex; flex-direction: column; gap: 50px; align-items: center;
}
.mf-proc-head {
  width: 1280px; max-width: 100%;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  padding: 100px 150px; text-align: center;
}
.mf-proc-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; color: rgb(251, 246, 233); }
.mf-proc-sub { font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: rgb(251, 246, 233); }

/* ---------- gauge diagram ---------- */
.mf-diagram { position: relative; display: inline-block; line-height: 0; }
.mf-diagram-art { display: block; }
.mf-gauge {
  position: absolute; transform: translateX(-50%);
  font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px;
  letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; text-align: center;
  line-height: 16.8px;
}
.mf-gauge-active { color: rgb(255, 255, 255); }
.mf-gauge-dim { color: rgb(102, 93, 88); }

/* ---------- feature block (01 / 02) ---------- */
.mf-feature {
  width: calc(100% - 50px);
  background: rgba(214, 187, 146, 0.3);
  display: flex; flex-direction: column; gap: 100px; align-items: flex-start;
  padding: 100px 25px 50px;
}
.mf-feature-top { width: 100%; display: flex; gap: 50px; align-items: flex-start; }
.mf-feature-copy { width: 963px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.mf-feature-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; color: rgb(248, 244, 238); }
.mf-feature-lede { font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: rgb(248, 244, 238); }
.mf-feature-lede-sm { font-size: 16px; line-height: 19.2px; }
.mf-feature-media { width: 287px; height: 255px; flex-shrink: 0; }
.mf-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 02 (sculptural) row tweaks */
.mf-feature-sculptural .mf-feature-top { gap: 40px; padding-right: 50px; }
.mf-feature-sculptural .mf-feature-copy { width: 923px; }

/* ---------- feature cards ---------- */
.mf-cards { width: 100%; display: flex; gap: 20px; align-items: center; }
.mf-card {
  flex: 1 1 0; height: 370px;
  background: rgba(214, 187, 146, 0.3); border-radius: 10px;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  padding: 25px 15px; text-align: center;
}
.mf-card-icon { width: 38px; height: 38px; display: block; }
.mf-card-icon img { width: 39px; height: 39px; display: block; }
.mf-card-title p { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; color: rgb(248, 244, 238); }
.mf-card-body { font-family: var(--serif-light); font-size: 14px; line-height: 16.8px; color: rgb(248, 244, 238); }

/* ============================================================
   MATERIALS
   ============================================================ */
.mf-materials {
  width: min(1400px, 100% - 40px);
  display: flex; flex-direction: column; gap: 72px; align-items: stretch;
}
.mf-mat-head { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.mf-mat-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; color: rgb(251, 246, 233); }
.mf-mat-sub { width: 480px; max-width: 100%; margin: 0 auto; font-family: var(--serif-light); font-size: 20px; line-height: 24px; color: rgb(251, 246, 233); }
.mf-mat-row { display: flex; gap: 24px; justify-content: center; align-items: flex-start; padding: 0 25px; }
.mf-mat-col { width: 434px; display: flex; flex-direction: column; gap: 72px; align-items: stretch; }
.mf-mat-media { width: 434px; height: 434px; }
.mf-mat-media img { width: 100%; height: 100%; object-fit: fill; display: block; }
.mf-mat-cap { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.mf-mat-cap-title { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; color: rgb(248, 244, 238); }
.mf-mat-cap-body { font-family: var(--serif-light); font-size: 16px; line-height: 19.2px; color: rgb(248, 244, 238); }
.mf-italic { font-family: var(--serif-light-italic); font-style: italic; }

/* ============================================================
   MOBILE (<=809px)
   ============================================================ */
.mf-card-title p { white-space: pre-wrap; }

@media (max-width: 809px) {
  .mf-mat-title { width: 340px; margin-left: auto; margin-right: auto; }
  /* live: lower half of the page sits ~1px lower (fractional section heights) */
  .mf-group-b { margin-top: 1px; }
  .page-manufacturing .footer-legal { padding-top: 9.2px; padding-bottom: 1.7px; }

  /* hero */
  .page-manufacturing .hero { height: 750px; }
  .page-manufacturing .hero-content { padding: 50px 0; }
  .page-manufacturing .hero-frame { width: 100%; height: 100%; }
  .page-manufacturing .site-nav { padding: 30px 30px; margin-bottom: 0; }
  .page-manufacturing .hero-copy { flex: 1; width: 100%; padding: 0 0 0 25px; justify-content: center; }
  .mf-hero-copy { margin: 0; width: 325px; max-width: calc(100% - 25px); gap: 32px; }
  .mf-hero-title { font-size: 48px; line-height: 57.6px; }
  .mf-hero-lede { font-size: 18px; line-height: 21.6px; width: 325px; max-width: 100%; }

  /* why */
  .mf-why-inner { width: 100%; flex-direction: column; gap: 25px; align-items: flex-start; padding: 50px 25px; }
  .mf-why-text { order: 1; width: 325px; max-width: 100%; }
  .mf-why-media { order: 0; width: 325px; max-width: 100%; height: 325px; }
  .mf-why-title { font-size: 24px; line-height: 28.8px; }
  .mf-why-body { font-size: 14px; line-height: 16.8px; }

  /* process head */
  .mf-group { width: 100%; }
  .mf-proc-head { width: 100%; padding: 100px 25px; }
  .mf-proc-title { font-size: 24px; line-height: 28.8px; }
  .mf-proc-sub { font-size: 14px; line-height: 16.8px; }
  /* group 2's process head is published larger on mobile: title 32px, sub 20px
     (group 1 is 24px / 14px) */
  .mf-group-b .mf-proc-head { padding: 100px 10px; }
  .mf-group-b .mf-proc-title { font-size: 32px; line-height: 38.4px; }
  .mf-group-b .mf-proc-sub { font-size: 20px; line-height: 24px; }

  /* feature: stack image over copy; single-column cards */
  .mf-feature { width: calc(100% - 50px); padding: 100px 10px 50px; gap: 100px; }
  .mf-feature-top { flex-direction: column; gap: 50px; align-items: flex-start; }
  .mf-feature-copy { width: 100%; }
  .mf-feature-media { order: -1; width: 305px; max-width: 100%; height: 255px; }
  .mf-feature-lede { font-size: 20px; line-height: 24px; }
  .mf-feature-lede-sm { font-size: 14px; line-height: 16.8px; }
  /* 02 (sculptural) on mobile: image is full-width (320), no gap to copy */
  .mf-feature-sculptural .mf-feature-top { gap: 0; padding-right: 0; }
  .mf-feature-sculptural .mf-feature-copy { width: 100%; }
  .mf-feature-sculptural .mf-feature-media { width: 320px; height: 255px; }
  .mf-cards { flex-direction: column; gap: 20px; align-items: stretch; }
  /* mobile 01 cards: text spans full card width (no horizontal padding) */
  .mf-card { flex: none; width: 100%; height: 350px; justify-content: center; padding: 25px 0; }
  .mf-card-title p { font-size: 20px; line-height: 24px; }
  /* 02 cards use 24px titles + top-aligned content + 10px h-padding on mobile
     (01: 20px, centered, no h-padding) */
  .mf-group-b .mf-card-title p { font-size: 24px; line-height: 28.8px; }
  .mf-group-b .mf-card { justify-content: flex-start; padding: 25px 10px; }

  /* materials: single column */
  .mf-mat-title { font-size: 32px; }
  .mf-mat-sub { width: 100%; }
  .mf-mat-row { flex-direction: column; gap: 75px; align-items: center; padding: 0 25px; }
  .mf-mat-col { width: 290px; max-width: 100%; gap: 50px; }
  .mf-mat-media { width: 290px; max-width: 100%; height: 290px; }
  .mf-mat-cap-body { font-size: 14px; line-height: 16.8px; }
  /* published mobile quirk: Special/Finishing images are shorter, and the
     Special Commissions body renders larger + italic tail */
  .mf-mat-media-special, .mf-mat-media-finishing { height: 231px; }
  /* mobile photos use the SOURCE files on a composited layer so the GPU
     downscale matches the published render (the bake approach leaves a
     resample mismatch at fractional sizes) */
  .mf-feature-sculptural .mf-feature-media img.m-only { transform: translateZ(0); }
  /* live sculptural: 320x255 window over a 320x430.8 image offset -109.7px */
  .mf-feature-sculptural .mf-feature-media { position: relative; overflow: hidden; }
  .mf-feature-sculptural .mf-feature-media img.m-only { position: absolute; left: 0; top: -109.7px; width: 320px; height: 430.8px; object-fit: fill; }
  /* correct a 1px sub-pixel flex-gap rounding so the baked finishing photo
     lands on the original's row (otherwise the high-frequency texture speckles) */
  .mf-mat-row .mf-mat-col:nth-child(3) { transform: translateY(1px); }
  .mf-mat-cap-body-special span { font-size: 20px; line-height: 24px; }
}