/* ============================================================
   ARCHETYPE LAYOUTS — added 2026-05-01
   p4v2 / p5v2 / p6v2 / s1v2 / s2v2 / wf-page
   These archetype shells were referenced in HTML but had no CSS.
   This block provides functional 2-column / grid layouts so content fits A4.
   See DESIGN.md §12 for playbook intent.
   ============================================================ */

/* ---------- Shared opener shell (p4v2 / p5v2 / p6v2) ---------- */
.p4v2, .p5v2, .p6v2 { position: relative; background: var(--paper); }

.p4v2 .content.p4v2-grid,
.p6v2 .content.p6v2-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;  /* RTL: panel visual-right, gallery visual-left */
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.p5v2 .content.p5v2-content {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.p4v2 .p4v2-panel,
.p6v2 .p6v2-panel {
  background: var(--cream);
  padding: 6mm 8mm 4mm 10mm;
  display: flex;
  flex-direction: column;
  gap: 3.5mm;
  border-inline-end: 0.7pt solid var(--gold);
  min-width: 0;
  overflow: hidden;
}

.p4v2 .p4v2-gallery,
.p6v2 .p6v2-gallery {
  background: var(--paper);
  padding: 6mm 6mm;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3mm;
  align-content: start;
  overflow: hidden;
}
.p4v2 .p4v2-gallery > *,
.p6v2 .p6v2-gallery > * {
  border: 0.4pt solid var(--hairline);
  background-size: cover;
  background-position: center;
  min-height: 0;
}

/* Hero block (eyebrow + title + tag + rule) */
.p4v2 .p4v2-hero,
.p5v2 .p5v2-hero,
.p6v2 .p6v2-hero {
  display: flex; flex-direction: column; gap: 1mm;
  text-align: right;
}
.p4v2 .p4v2-eyebrow,
.p5v2 .p5v2-eyebrow,
.p6v2 .p6v2-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10pt;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  text-align: right;
}
.p4v2 .p4v2-title,
.p5v2 .p5v2-title,
.p6v2 .p6v2-title {
  font-family: 'Tajawal', sans-serif;
  font-weight: 800;
  font-size: 22pt;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0.5mm 0 0 0;
  text-align: right;
}
.p4v2 .p4v2-em, .p5v2 .p5v2-em, .p6v2 .p6v2-em { color: var(--gold); }
.p4v2 .p4v2-tag,
.p5v2 .p5v2-tag,
.p6v2 .p6v2-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11pt;
  color: var(--ink-soft);
  margin: 0;
  text-align: right;
}
.p4v2 .p4v2-rule, .p6v2 .p6v2-rule {
  height: 0.5pt; background: var(--gold); opacity: 0.6;
  margin: 1mm 0 0 0;
}

/* p6v2 process steps */
.p6v2 .p6v2-process { display: flex; flex-direction: column; gap: 1.5mm; }
.p6v2 .p6v2-proc-head {
  font-family: 'Inter', sans-serif;
  font-size: 7pt; font-weight: 700; letter-spacing: 0.18em;
  color: var(--muted); text-transform: uppercase;
}
.p6v2 .p6v2-proc-ar { color: var(--ink); }
.p6v2 .p6v2-proc-en { color: var(--muted); margin-inline-start: 4mm; }
.p6v2 .p6v2-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5mm 4mm;
}
.p6v2 .p6v2-step {
  display: grid; grid-template-columns: 7mm 1fr; gap: 2mm;
  padding: 1.5mm 0; border-bottom: 0.3pt dashed var(--hairline);
}
.p6v2 .p6v2-step-num {
  font-family: var(--font-display); font-size: 11pt;
  color: var(--gold); font-weight: 600; text-align: right;
}
.p6v2 .p6v2-step-ar {
  font-family: 'Tajawal', sans-serif; font-size: 8.5pt;
  font-weight: 700; color: var(--ink); display: block;
}
.p6v2 .p6v2-step-en {
  font-family: 'Inter', sans-serif; font-size: 6.5pt;
  color: var(--muted); display: block; letter-spacing: 0.04em;
}
.p6v2 .p6v2-step-text {
  font-family: 'Inter', sans-serif; font-size: 6.5pt;
  color: var(--ink-soft); display: block;
}

/* p6v2 hold points + lab + museum + docs (compact rows) */
.p6v2 .p6v2-holds, .p6v2 .p6v2-museum, .p6v2 .p6v2-labs, .p6v2 .p6v2-docs {
  display: flex; flex-direction: column; gap: 1mm;
}
.p6v2 .p6v2-holds-label,
.p6v2 .p6v2-museum-head,
.p6v2 .p6v2-labs-head,
.p6v2 .p6v2-docs-head {
  font-family: 'Inter', sans-serif;
  font-size: 7pt; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.p6v2 .p6v2-museum-row,
.p6v2 .p6v2-labs-row,
.p6v2 .p6v2-docs-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm;
  font-family: 'Inter', sans-serif; font-size: 6.5pt; color: var(--ink-soft);
}
.p6v2 .p6v2-museum-ar, .p6v2 .p6v2-labs-ar, .p6v2 .p6v2-docs-ar {
  font-family: 'Tajawal', sans-serif; font-weight: 700; color: var(--ink);
  font-size: 7.5pt;
}
.p6v2 .p6v2-museum-en, .p6v2 .p6v2-labs-en, .p6v2 .p6v2-docs-en {
  font-size: 6pt; color: var(--muted); letter-spacing: 0.04em;
}
.p6v2 .p6v2-hold {
  display: inline-block; padding: 0.5mm 2mm;
  background: var(--gold-pale); border: 0.3pt solid var(--gold);
  font-family: 'Inter', sans-serif; font-size: 6pt;
  color: var(--navy); margin-right: 1mm;
}

/* p4v2 specifics (capacity opener — pipeline / steps / numbers) */
.p4v2 .p4v2-pipeline { display: flex; flex-direction: column; gap: 1.5mm; }
.p4v2 .p4v2-pipe-head, .p4v2 .p4v2-tech-head {
  font-family: 'Inter', sans-serif;
  font-size: 7pt; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.p4v2 .p4v2-pipe-ar, .p4v2 .p4v2-tech-ar {
  font-family: 'Tajawal', sans-serif; font-weight: 700;
  color: var(--ink); font-size: 8pt;
}
.p4v2 .p4v2-pipe-en, .p4v2 .p4v2-tech-en {
  font-family: 'Inter', sans-serif; font-size: 6.5pt;
  color: var(--muted); letter-spacing: 0.04em;
}
.p4v2 .p4v2-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 4mm;
}
.p4v2 .p4v2-step {
  display: grid; grid-template-columns: 6mm 1fr; gap: 2mm;
  padding: 1mm 0; border-bottom: 0.3pt dashed var(--hairline);
}
.p4v2 .p4v2-step-num {
  font-family: var(--font-display); font-size: 11pt;
  color: var(--gold); font-weight: 600; text-align: right;
}
.p4v2 .p4v2-step-ar { font-family: 'Tajawal',sans-serif; font-size:8pt; font-weight:700; color:var(--ink); display:block; }
.p4v2 .p4v2-step-en { font-family: 'Inter',sans-serif; font-size:6.5pt; color:var(--muted); display:block; }
.p4v2 .p4v2-step-text { font-family: 'Inter',sans-serif; font-size:6.5pt; color:var(--ink-soft); display:block; }
.p4v2 .p4v2-numblock { display: flex; flex-direction: column; gap: 1mm; }
.p4v2 .p4v2-num-figure { display: flex; align-items: baseline; gap: 1.5mm; }
.p4v2 .p4v2-num-target { font-family: var(--font-display); font-size: 28pt; font-weight: 600; color: var(--navy); line-height: 1; }
.p4v2 .p4v2-num-unit { font-family: 'Inter',sans-serif; font-size: 8pt; color: var(--muted); letter-spacing: 0.1em; }
.p4v2 .p4v2-num-label-ar { font-family: 'Tajawal',sans-serif; font-size: 8.5pt; color: var(--ink); font-weight: 700; }
.p4v2 .p4v2-num-label-en { font-family: 'Inter',sans-serif; font-size: 6.5pt; color: var(--muted); letter-spacing: 0.06em; }
.p4v2 .p4v2-mini-label { font-family: 'Inter',sans-serif; font-size: 6pt; color: var(--muted); letter-spacing: 0.06em; }
.p4v2 .p4v2-mini-num { font-family: var(--font-display); font-size: 12pt; color: var(--navy); font-weight: 600; }
.p4v2 .p4v2-mini-unit { font-family: 'Inter',sans-serif; font-size: 6pt; color: var(--muted); }

/* p4v2 — additional missing rules (vendor stack + step icons) */
.p4v2 .p4v2-tech { display: flex; flex-direction: column; gap: 1.5mm; }
.p4v2 .p4v2-tech-row {
  display: flex; flex-wrap: wrap; gap: 4mm 6mm;
  align-items: center; padding-top: 1mm;
}
.p4v2 .p4v2-vendor-logo {
  height: 7mm; width: auto; max-width: 22mm;
  object-fit: contain; opacity: 0.85;
}
.p4v2 .p4v2-vendor-mark {
  font-family: var(--font-display); font-style: italic;
  font-size: 11pt; line-height: 1; color: var(--navy);
}
.p4v2 .p4v2-vendor-mark .p4v2-vendor-art { color: var(--gold-deep); }
.p4v2 .p4v2-vendor-mark .p4v2-vendor-cam { color: var(--navy); font-weight: 600; }

/* Step icon column (was unsized — 5 SVGs were rendering at intrinsic 100%) */
.p4v2 .p4v2-step { align-items: start; grid-template-columns: 6mm 6mm 1fr; }
.p4v2 .p4v2-step-ico {
  width: 5mm; height: 5mm;
  color: var(--gold); flex-shrink: 0;
  align-self: start;
}

/* p5v2 specifics (scope opener — hexagonal mandala) */
.p5v2 .p5v2-mandala {
  position: relative; display: grid; place-items: center;
  background: var(--cream); padding: 4mm; min-height: 0;
  overflow: hidden;
}
.p5v2 .p5v2-hex {
  width: 28mm; height: 32mm;
  display: grid; place-items: center;
  background: var(--paper); border: 0.5pt solid var(--gold);
  text-align: center; padding: 2mm;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.p5v2 .p5v2-hex--center { background: var(--navy); color: var(--paper); }
.p5v2 .p5v2-hex--center .p5v2-hex-ar--core { color: var(--gold); }
.p5v2 .p5v2-hex--center .p5v2-hex-en--core { color: var(--paper); }
.p5v2 .p5v2-hex-ar { font-family: 'Tajawal',sans-serif; font-weight: 700; font-size: 8pt; color: var(--ink); display: block; }
.p5v2 .p5v2-hex-en { font-family: 'Inter',sans-serif; font-size: 6pt; color: var(--muted); letter-spacing: 0.06em; display: block; }
.p5v2 .p5v2-hex-sub { font-family: var(--font-display); font-style: italic; font-size: 7pt; color: var(--gold); display: block; margin-top: 0.5mm; }

/* ---------- s1v2 / s2v2 (scope detail spreads) ---------- */
.s1v2, .s2v2 { position: relative; background: var(--paper); }

.s1v2 .content {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 0; padding: 0; overflow: hidden;
}
.s1v2 .s1v2-panel {
  background: var(--cream); padding: 6mm 8mm; display: flex; flex-direction: column; gap: 4mm;
  border-inline-end: 0.7pt solid var(--gold);
}
.s1v2 .s1v2-figure { background: var(--paper); padding: 6mm; display: flex; flex-direction: column; gap: 2mm; }
.s1v2 .s1v2-image { flex: 1; background-size: cover; background-position: center; min-height: 0; border: 0.4pt solid var(--hairline); }
.s1v2 .s1v2-eyebrow { font-family:'Inter',sans-serif; font-size:10pt; letter-spacing:0.32em; color:var(--gold); text-transform:uppercase; font-weight:700; }
.s1v2 .s1v2-title { font-family:'Tajawal',sans-serif; font-weight:800; font-size:22pt; color:var(--ink); line-height:1.15; }
.s1v2 .s1v2-em { color: var(--gold); }
.s1v2 .s1v2-tag { font-family:var(--font-display); font-style:italic; font-size:11pt; color:var(--ink-soft); }
.s1v2 .s1v2-rule { height: 0.5pt; background: var(--gold); opacity: 0.6; }
.s1v2 .s1v2-leads { display: flex; flex-direction: column; gap: 3mm; }
.s1v2 .s1v2-lead { display: flex; flex-direction: column; gap: 0.5mm; padding-bottom: 2mm; border-bottom: 0.3pt dashed var(--hairline); }
.s1v2 .s1v2-lead-ar { font-family:'Tajawal',sans-serif; font-weight:700; font-size:9pt; color:var(--ink); }
.s1v2 .s1v2-lead-en { font-family:'Inter',sans-serif; font-size:7pt; color:var(--muted); letter-spacing:0.04em; }
.s1v2 .s1v2-lead-text { font-family:'Inter',sans-serif; font-size:7pt; color:var(--ink-soft); }
.s1v2 .s1v2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.s1v2 .s1v2-stat-num { font-family:var(--font-display); font-size:20pt; font-weight:600; color:var(--navy); }
.s1v2 .s1v2-stat-unit { font-family:'Inter',sans-serif; font-size:7pt; color:var(--muted); }
.s1v2 .s1v2-stat-label { font-family:'Tajawal',sans-serif; font-size:7.5pt; color:var(--ink); }

/* s1v2 grid + detail variants (subpages) */
.s1v2-grid-page .content,
.s1v2-detail-page .content {
  padding: 6mm; display: grid; gap: 3mm;
}
.s1v2-grid-page .content { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.s1v2-detail-page .content { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }

/* s2v2 doors / hardware spreads */
.s2v2 .content { padding: 5mm 6mm; display: flex; flex-direction: column; gap: 3mm; overflow: hidden; }
.s2v2 .s2v2-doors-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2mm;
  flex: 1; min-height: 0;
}
.s2v2 .s2v2-door { display: flex; flex-direction: column; gap: 1mm; min-height: 0; overflow: hidden; }
.s2v2 .s2v2-door--feature { grid-row: span 2; }
.s2v2 .s2v2-door-img { flex: 1; background-size: cover; background-position: center; border: 0.4pt solid var(--hairline); min-height: 0; }
.s2v2 .s2v2-door-cap { font-family: 'Inter', sans-serif; font-size: 6.5pt; color: var(--ink-soft); padding: 0.5mm 0; }
.s2v2 .s2v2-typecard {
  display: grid; grid-template-columns: 7mm 1fr; gap: 2mm;
  padding: 1.5mm 2mm; background: var(--cream); border-inline-start: 1pt solid var(--gold);
}
.s2v2 .s2v2-tc-num { font-family: var(--font-display); font-size: 14pt; color: var(--gold); font-weight: 600; }
.s2v2 .s2v2-tc-ar { font-family:'Tajawal',sans-serif; font-weight:700; font-size:8pt; color:var(--ink); display:block; }
.s2v2 .s2v2-tc-en { font-family:'Inter',sans-serif; font-size:6.5pt; color:var(--muted); display:block; letter-spacing:0.04em; }
.s2v2 .s2v2-tc-spec { font-family:'Inter',sans-serif; font-size:6pt; color:var(--ink-soft); display:block; margin-top:0.5mm; }
.s2v2 .s2v2-hw-group { display: flex; flex-direction: column; gap: 1.5mm; padding: 2mm; background: var(--cream); }
.s2v2 .s2v2-hw-eyebrow { font-family:'Inter',sans-serif; font-size:6.5pt; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.s2v2 .s2v2-hw-cat { font-family:'Tajawal',sans-serif; font-weight:700; font-size:8pt; color:var(--ink); }
.s2v2 .s2v2-hw-img { background-size: contain; background-position: center; background-repeat: no-repeat; min-height: 18mm; }
.s2v2 .s2v2-hw-brands { display: flex; gap: 2mm; flex-wrap: wrap; }
.s2v2 .s2v2-hw-wordmark { font-family:'Inter',sans-serif; font-size:6.5pt; color:var(--ink-soft); padding: 0.5mm 1.5mm; border: 0.3pt solid var(--hairline); }
.s2v2 .s2v2-hw-cap { font-family:'Inter',sans-serif; font-size:6pt; color:var(--muted); }
.s2v2 .s2v2-doors-side { display: flex; flex-direction: column; gap: 2mm; min-height: 0; }
.s2v2 .s2v2-cell-ar { font-family:'Tajawal',sans-serif; font-weight:700; font-size:7.5pt; color:var(--ink); }
.s2v2 .s2v2-cell-en { font-family:'Inter',sans-serif; font-size:6pt; color:var(--muted); letter-spacing:0.04em; }

/* s2v2-spread variant (galleries / multi-cell) */
.s2v2-spread .content {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
  gap: 2mm; padding: 5mm 6mm; overflow: hidden;
}
.s2v2-spread .content > * { min-height: 0; min-width: 0; }

/* ---------- wf-page (wayfinding spreads) ---------- */
.wf-page { position: relative; background: var(--paper); }
.wf-page .content {
  padding: 5mm 6mm; display: flex; flex-direction: column; gap: 3mm; overflow: hidden;
}
.wf-page .wf-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; align-items: center; }
.wf-page .wf-cover-image { background-size: cover; background-position: center; min-height: 80mm; border: 0.5pt solid var(--hairline); }
.wf-page .wf-cover-text { display: flex; flex-direction: column; gap: 2mm; }
.wf-page .wf-title { font-family:'Tajawal',sans-serif; font-weight:800; font-size:22pt; color:var(--ink); line-height:1.15; }
.wf-page .wf-subtitle { font-family:var(--font-display); font-style:italic; font-size:11pt; color:var(--ink-soft); }
.wf-page .wf-amp { color: var(--gold); }
.wf-page .wf-intro { font-family:'Inter',sans-serif; font-size:8pt; color:var(--ink-soft); line-height:1.5; }
.wf-page .wf-services-header { display: flex; align-items: baseline; gap: 3mm; }
.wf-page .wf-services-rule { flex: 1; height: 0.4pt; background: var(--gold); opacity: 0.5; }
.wf-page .wf-services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm;
  flex: 1; min-height: 0;
}
.wf-page .wf-svc {
  display: flex; flex-direction: column; gap: 1mm;
  padding: 3mm; background: var(--cream); border-inline-start: 1pt solid var(--gold);
  min-height: 0; overflow: hidden;
}
.wf-page .wf-svc-icon { width: 8mm; height: 8mm; color: var(--gold); }
.wf-page .wf-svc-name { font-family:'Tajawal',sans-serif; font-weight:700; font-size:9pt; color:var(--ink); }
.wf-page .wf-svc-desc { font-family:'Inter',sans-serif; font-size:6.5pt; color:var(--ink-soft); line-height:1.4; }

/* End archetype layouts */