/* Domain-specific art direction.

   Every production tenant selects one of 105 unique home/header/footer
   combinations in data/site_designs.json, then supplies its own type, colour,
   rhythm and motif tokens in css/sites/<slug>.css. These are structural
   compositions, not a skin over one immutable page. */

.publication-design {
  --pd-space: clamp(1rem, 2.4vw, 2rem);
  --pd-rule: var(--accent, #155e75);
  --pd-display: var(--serif, Georgia, serif);
  --pd-panel: var(--paper-alt, #f5f5f2);
  --pd-shadow: 0 18px 50px color-mix(in srgb, var(--ink, #17202a) 12%, transparent);
  position: relative;
}
.publication-design h1, .publication-design h2 { font-family: var(--pd-display); }
.publication-design-frame { position: relative; isolation: isolate; }
.publication-design-frame::before {
  content: attr(data-edition); position: absolute; z-index: -1; color: var(--pd-rule);
  opacity: .055; font: 900 clamp(5rem, 17vw, 15rem)/.8 var(--pd-display);
  letter-spacing: -.08em; pointer-events: none; white-space: nowrap;
}

/* Seven recognisably different page compositions. */
.publication-layout-0 .publication-design-frame { border-top: .55rem solid var(--pd-rule); }
.publication-layout-0 .publication-design-frame::before { right: 3vw; top: 3rem; }
.publication-layout-0 :is(.home-head,.authority-hero-grid,.cc-hero-grid,.doc-head) { text-align: left; max-width: 58rem; }

.publication-layout-1 .publication-design-frame { background: linear-gradient(90deg,var(--pd-panel) 0 31%,transparent 31%); }
.publication-layout-1 .publication-design-frame::before { left: 2vw; top: 8rem; writing-mode: vertical-rl; }
.publication-layout-1 :is(.home-head,.authority-hero-grid,.cc-hero-grid,.doc-layout) { border-left: clamp(.7rem,2vw,2rem) solid var(--pd-rule); padding-left: clamp(1.2rem,4vw,4rem); }

.publication-layout-2 .publication-design-frame::before { right: 4vw; top: 1rem; }
.publication-layout-2 :is(.authority-hero,.cc-hero,.home-head,.doc-head) { clip-path: polygon(0 0,100% 0,96% 100%,0 100%); }
.publication-layout-2 :is(.authority-topic,.cc-topic,.card) { border-radius: 0; border-left: 4px solid var(--pd-rule); }

.publication-layout-3 .publication-design-frame { border-inline: 1px solid var(--line); max-width: 1320px; margin-inline: auto; }
.publication-layout-3 .publication-design-frame::before { left: 50%; transform: translateX(-50%); top: 2rem; }
.publication-layout-3 :is(.home-head,.doc-head) { text-align: center; margin-inline: auto; }
.publication-layout-3 :is(.authority-section-head,.cc-section-head) { border-bottom: 3px double var(--pd-rule); }

.publication-layout-4 .publication-design-frame { background-image: radial-gradient(color-mix(in srgb,var(--pd-rule) 16%,transparent) .8px,transparent .8px); background-size: 18px 18px; }
.publication-layout-4 .publication-design-frame::before { right: 0; top: 10rem; transform: rotate(-90deg); }
.publication-layout-4 :is(.authority-hero-grid,.cc-hero-grid,.lead-block,.doc-layout) { box-shadow: var(--pd-shadow); background: var(--paper); padding: clamp(1rem,3vw,3rem); }

.publication-layout-5 .publication-design-frame { border-top: 1px solid var(--pd-rule); }
.publication-layout-5 .publication-design-frame::before { left: 1vw; bottom: 8rem; }
.publication-layout-5 :is(.authority-hero-grid,.cc-hero-grid,.home-head,.doc-head) h1 { font-size: clamp(3rem,8vw,7rem); line-height: .9; letter-spacing: -.055em; }
.publication-layout-5 :is(.authority-topic-grid,.cc-topic-grid,.card-grid) > :nth-child(even) { transform: translateY(1rem); }

.publication-layout-6 .publication-design-frame { background: linear-gradient(135deg,transparent 0 74%,color-mix(in srgb,var(--pd-rule) 10%,transparent) 74%); }
.publication-layout-6 .publication-design-frame::before { right: 2vw; top: 5rem; }
.publication-layout-6 :is(.authority-hero,.cc-hero,.home-head,.doc-head) { border: 1px solid var(--pd-rule); margin: var(--pd-space); }
.publication-layout-6 :is(.authority-topic-grid,.cc-topic-grid,.card-grid) { gap: clamp(.45rem,1vw,1rem); }

/* Five masthead architectures. The inner theme remains accessible and keeps
   its language-aware navigation; the outer composition changes its geometry. */
.publication-header-0 { border-top: .45rem solid var(--pd-rule); }
.publication-header-1 { padding: .75rem; background: var(--pd-panel); }
.publication-header-1 > header { max-width: 1180px; margin: auto; border: 1px solid var(--line); border-radius: 1.2rem; overflow: hidden; box-shadow: var(--pd-shadow); }
.publication-header-2 { border-left: clamp(.6rem,1.3vw,1.2rem) solid var(--pd-rule); }
.publication-header-2 :is(.header-inner,.authority-header-main,.cc-header-main) { min-height: 7.5rem; align-items: flex-end; }
.publication-header-3 { border-bottom: 4px double var(--pd-rule); }
.publication-header-3 :is(.header-inner,.authority-header-main,.cc-header-main) { justify-content: center; text-align: center; }
.publication-header-4 { background: var(--ink); padding-top: .35rem; }
.publication-header-4 > header { transform: translateY(.35rem); }
.publication-header-4 :is(.bar-main,.authority-header-main,.cc-header-main) { border-radius: 0 0 1.5rem 1.5rem; }

/* Three footer silhouettes. */
.publication-footer-0 { border-top: .55rem solid var(--pd-rule); }
.publication-footer-1 { padding: 1rem; background: var(--pd-panel); }
.publication-footer-1 > footer { max-width: 1240px; margin: auto; border-radius: 1.5rem; overflow: hidden; }
.publication-footer-2 { border-top: 1px solid var(--pd-rule); position: relative; }
.publication-footer-2::before { content: ""; display: block; width: min(28rem,70vw); height: .55rem; background: var(--pd-rule); }

@media (max-width: 720px) {
  .publication-design-frame::before { font-size: 5rem; opacity: .035; }
  .publication-layout-1 .publication-design-frame { background: transparent; }
  .publication-layout-1 :is(.home-head,.authority-hero-grid,.cc-hero-grid,.doc-layout) { border-left-width: .45rem; padding-left: 1rem; }
  .publication-layout-5 :is(.authority-topic-grid,.cc-topic-grid,.card-grid) > :nth-child(even) { transform: none; }
  .publication-header-1 { padding: .35rem; }
  .publication-header-2 :is(.header-inner,.authority-header-main,.cc-header-main) { min-height: auto; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .publication-design * { scroll-behavior: auto !important; transition: none !important; }
}