/* Forge Web Studio Demo Visual Improvements
   This file contains targeted CSS enhancements for each demo
   to improve visual impact, hierarchy, and responsive presentation
   while preserving each demo's unique identity.

   Applied via render-authored-document.mjs
*/

/* ============================================================================
   COMPREHENSIVE INNER PAGE ENHANCEMENTS
   Elevate all inner pages to homepage-quality standards
   ========================================================================== */

/* ---- AURELIA AESTHETICS & WELLNESS: Clinical Clarity & Trust Building ---- */

/* Enhance consultation CTA prominence in hero */
body[data-demo="aurelia-med-spa"] .auHeroCopy > a,
.demo-clinical .di-action {
  min-height: 52px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

body[data-demo="aurelia-med-spa"] .auHeroCopy > a:hover {
  transform: translateX(4px);
}

/* Improve treatment section article layout and readability */
body[data-demo="aurelia-med-spa"] .auHomeTreat article,
.demo-clinical .di-concern-reference {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 4%;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

body[data-demo="aurelia-med-spa"] .auHomeTreat article > span,
.demo-clinical .di-eyebrow {
  font-size: 12px;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--accent);
}

body[data-demo="aurelia-med-spa"] .auHomeTreat h2,
.demo-clinical .di-concern-reference h2,
.demo-clinical .di-concern-reference h3 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 500;
  color: var(--text);
}

body[data-demo="aurelia-med-spa"] .auHomeTreat article > a,
.demo-clinical .di-concern-reference a {
  align-self: flex-start;
  margin-top: 1.5rem;
  min-height: 48px;
  font-weight: 600;
  padding: 12px 20px;
}

/* Enhance questions table styling for consultation guide */
.demo-clinical .di-questions-table {
  margin-top: 60px;
}

.demo-clinical .di-questions-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
}

.demo-clinical .di-questions-table th,
.demo-clinical .di-questions-table td {
  padding: 24px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.demo-clinical .di-questions-table thead {
  background: var(--surface-alt);
}

.demo-clinical .di-questions-table tbody th {
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.02);
}

/* Improve consultation section */
body[data-demo="aurelia-med-spa"] .auHomeClose,
.demo-clinical .di-care-conversion,
.demo-clinical .di-care-pause {
  padding: 4rem 4%;
  background: var(--surface);
}

body[data-demo="aurelia-med-spa"] .auHomeClose h2,
.demo-clinical .di-care-pause h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  line-height: 1.25;
  font-weight: 500;
}

body[data-demo="aurelia-med-spa"] .auHomeClose > a,
.demo-clinical .di-care-conversion a {
  display: inline-block;
  min-height: 52px;
  font-weight: 600;
  margin-top: 1rem;
  padding: 14px 24px;
}

/* Enhance details/accordion styling */
.demo-clinical details {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  padding: 0;
  background: var(--surface);
}

.demo-clinical details[open] {
  background: var(--surface-alt);
  border-color: var(--accent);
}

.demo-clinical details summary {
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 500;
  color: var(--accent);
  user-select: none;
}

.demo-clinical details[open] summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.demo-clinical details p {
  padding: 20px 24px;
  margin: 0;
}

/* Medical disclaimer styling */
.demo-clinical .di-boundary {
  background: rgba(var(--accent-rgb), 0.04);
  border-left: 4px solid var(--accent);
  padding: 18px 20px;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Aurelia mobile improvements */
@media (max-width: 768px) {
  body[data-demo="aurelia-med-spa"] .auHomeTreat article {
    padding: 2.5rem 5%;
  }

  body[data-demo="aurelia-med-spa"] .auHomeTreat h2 {
    font-size: 1.8rem;
  }

  body[data-demo="aurelia-med-spa"] .auHeroCopy > a {
    min-height: 48px;
    font-size: 14px;
  }

  .demo-clinical .di-questions-table table {
    font-size: 14px;
  }

  .demo-clinical .di-questions-table th,
  .demo-clinical .di-questions-table td {
    padding: 16px 12px;
  }

  .demo-clinical details summary {
    font-size: 18px;
  }
}

/* ---- VESPER & ROWE: Private Dossier Sophistication ---- */

/* Enhance property portfolio pages */
.demo-property .di-action,
.demo-property .di-estate-cover h2,
.demo-property .di-estate-pair h2 {
  font-family: Georgia, serif;
}

.demo-property .di-estate-cover,
.demo-property .di-estate-pair,
.demo-property .di-river-folio {
  margin-bottom: 80px;
}

.demo-property .di-estate-cover {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5vw;
  align-items: flex-start;
  margin-bottom: 100px;
}

.demo-property .di-estate-cover figure {
  grid-row: 1 / 3;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.demo-property .di-estate-cover header {
  padding: 0;
}

.demo-property .di-estate-cover h2 {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.demo-property .di-estate-cover dl {
  margin-top: 2rem;
}

.demo-property .di-estate-cover dt {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 18px;
}

.demo-property .di-estate-cover dd {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 6px;
}

.demo-property .di-estate-pair {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5vw;
  align-items: flex-start;
}

.demo-property .di-estate-pair > div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.demo-property .di-estate-pair h2 {
  font-size: 2.2rem;
  margin: 0 0 1rem 0;
  font-weight: 400;
}

.demo-property .di-estate-pair figure {
  aspect-ratio: 3/4;
  margin-bottom: 0;
}

.demo-property .di-river-folio {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5vw;
  align-items: center;
}

.demo-property .di-river-folio figure {
  aspect-ratio: 3/4;
  grid-column: 1;
  grid-row: 1;
}

.demo-property .di-river-folio > div {
  padding: 3rem;
  background: var(--surface-alt);
}

.demo-property .di-river-folio h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.demo-property .di-river-folio dl {
  margin: 1.5rem 0;
}

/* Enhanced property details */
.demo-property details {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  padding: 0;
}

.demo-property details summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 500;
  background: var(--surface-alt);
  user-select: none;
}

.demo-property details[open] summary {
  border-bottom: 1px solid var(--border);
}

.demo-property details p {
  padding: 18px 20px 0;
}

/* Advisory letter styling */
.demo-property .di-advisory-essay {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 4vw;
  margin-bottom: 60px;
  align-items: start;
}

.demo-property .di-advisory-essay aside {
  position: sticky;
  top: 100px;
}

.demo-property .di-advisory-essay h2 {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.demo-property .di-consent-spread {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-property .di-consent-spread > div h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* Introduction desk form styling */
.demo-property .di-introduction-desk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: start;
}

.demo-property .di-introduction-desk aside {
  padding: 2rem;
  background: var(--surface-alt);
  position: sticky;
  top: 100px;
}

/* Vesper mobile improvements */
@media (max-width: 768px) {
  .demo-property .di-estate-cover,
  .demo-property .di-estate-pair,
  .demo-property .di-river-folio,
  .demo-property .di-consent-spread,
  .demo-property .di-introduction-desk,
  .demo-property .di-advisory-essay {
    grid-template-columns: 1fr;
  }

  .demo-property .di-estate-cover {
    margin-bottom: 60px;
  }

  .demo-property .di-estate-cover figure {
    grid-row: auto;
    aspect-ratio: auto;
    height: 350px;
  }

  .demo-property .di-estate-pair > div,
  .demo-property .di-river-folio > div {
    padding: 2rem;
  }

  .demo-property .di-advisory-essay aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-property .di-introduction-desk aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-property .di-estate-cover h2,
  .demo-property .di-estate-pair h2,
  .demo-property .di-river-folio h2 {
    font-size: 1.8rem;
  }
}

/* ---- APEX ATELIER MOTORS: Commission Journal Precision ---- */

/* Commission roster styling */
.demo-mechanical .di-roster-car {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: flex-start;
  margin-bottom: 80px;
}

.demo-mechanical .di-roster-car figure {
  aspect-ratio: 3/4;
}

.demo-mechanical .di-roster-car h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.demo-mechanical .di-roster-car dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 1.5rem 0;
}

.demo-mechanical .di-roster-car dt {
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.demo-mechanical .di-roster-car dd {
  font-size: 16px;
  line-height: 1.6;
}

/* Cockpit study enhanced */
.demo-mechanical .di-cockpit-study {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-mechanical .di-cockpit-study figure {
  aspect-ratio: 4/5;
}

.demo-mechanical .di-cockpit-study h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* Commission process chapters */
.demo-mechanical .di-engineering-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin: 60px 0;
}

.demo-mechanical .di-engineering-chapters article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-mechanical .di-engineering-chapters span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-mechanical .di-engineering-chapters h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.demo-mechanical .di-engineering-chapters p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Mechanical note styling */
.demo-mechanical .di-mechanical-note {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-mechanical .di-mechanical-note figure {
  aspect-ratio: 16/10;
}

.demo-mechanical .di-mechanical-note h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* Commission desk form */
.demo-mechanical .di-commission-desk {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-mechanical .di-commission-desk aside {
  padding: 2.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

.demo-mechanical .di-commission-desk h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.demo-mechanical .di-commission-desk dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 1.5rem;
  margin-top: 1.5rem;
}

.demo-mechanical .di-commission-desk dt {
  font-weight: 600;
  color: var(--accent);
}

.demo-mechanical .di-commission-desk dd {
  font-size: 14px;
  line-height: 1.6;
}

/* Apex mobile improvements */
@media (max-width: 768px) {
  .demo-mechanical .di-roster-car,
  .demo-mechanical .di-cockpit-study,
  .demo-mechanical .di-mechanical-note,
  .demo-mechanical .di-commission-desk {
    grid-template-columns: 1fr;
  }

  .demo-mechanical .di-engineering-chapters {
    grid-template-columns: 1fr;
  }

  .demo-mechanical .di-roster-car figure,
  .demo-mechanical .di-cockpit-study figure,
  .demo-mechanical .di-mechanical-note figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-mechanical .di-commission-desk aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-mechanical .di-engineering-chapters article {
    padding: 1.5rem;
  }

  .demo-mechanical .di-roster-car h2,
  .demo-mechanical .di-cockpit-study h2,
  .demo-mechanical .di-mechanical-note h2,
  .demo-mechanical .di-commission-desk h2 {
    font-size: 1.8rem;
  }
}

/* ---- NORTHLINE PRIVATE WEALTH: Financial Intelligence Editorial ---- */

/* Planning matrix table enhancement */
.demo-editorial .di-matrix {
  margin: 60px 0;
}

.demo-editorial .di-matrix table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
}

.demo-editorial .di-matrix th,
.demo-editorial .di-matrix td {
  padding: 24px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
}

.demo-editorial .di-matrix thead {
  background: var(--surface-alt);
}

.demo-editorial .di-matrix th {
  font-weight: 600;
  color: var(--accent);
}

.demo-editorial .di-matrix tbody th {
  background: rgba(var(--accent-rgb), 0.03);
  font-weight: 600;
}

/* Planning paper section */
.demo-editorial .di-planning-paper {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vw;
  align-items: center;
  margin: 80px 0;
}

.demo-editorial .di-planning-paper figure {
  aspect-ratio: 4/5;
}

.demo-editorial .di-planning-paper h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Calendar layout */
.demo-editorial .di-calendar-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
  margin: 60px 0;
}

.demo-editorial .di-calendar-layout aside {
  position: sticky;
  top: 100px;
}

.demo-editorial .di-calendar-layout aside h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.demo-editorial .di-calendar-layout aside figure {
  aspect-ratio: 3/4;
  margin-top: 2rem;
}

/* Review chapters */
.demo-editorial .di-calendar-layout > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.demo-editorial .di-calendar-layout article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-editorial .di-calendar-layout span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-editorial .di-calendar-layout article h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-editorial .di-calendar-layout article p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Introduction form styling */
.demo-editorial .di-planning-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
  margin-bottom: 80px;
}

.demo-editorial .di-planning-intro > div {
  padding: 0;
}

.demo-editorial .di-planning-intro h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Financial boundaries */
.demo-editorial .di-boundary {
  background: rgba(var(--accent-rgb), 0.04);
  border-left: 4px solid var(--accent);
  padding: 18px 20px;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Northline mobile improvements */
@media (max-width: 768px) {
  .demo-editorial .di-matrix th,
  .demo-editorial .di-matrix td {
    padding: 16px 12px;
    font-size: 14px;
  }

  .demo-editorial .di-planning-paper,
  .demo-editorial .di-calendar-layout,
  .demo-editorial .di-planning-intro {
    grid-template-columns: 1fr;
  }

  .demo-editorial .di-calendar-layout aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-editorial .di-planning-paper figure,
  .demo-editorial .di-calendar-layout aside figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-editorial .di-calendar-layout article {
    padding: 1.5rem;
  }

  .demo-editorial .di-planning-paper h2,
  .demo-editorial .di-calendar-layout aside h2,
  .demo-editorial .di-planning-intro h2 {
    font-size: 1.8rem;
  }

  .demo-editorial .di-calendar-layout article h2 {
    font-size: 1.3rem;
  }
}

/* ============================================================================
   UNIVERSAL FORM ENHANCEMENTS
   ========================================================================== */

/* Enhanced form styling for all conceptual forms */
.di-page form {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: clamp(28px, 4vw, 64px);
}

.di-page form fieldset {
  margin-bottom: 2rem;
}

.di-page form legend {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  color: var(--accent);
}

.di-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 2rem;
}

.di-page label {
  display: grid;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.di-page :is(input, textarea, select) {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  font-family: inherit;
}

.di-page :is(input, textarea):focus-visible,
.di-page select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.di-page :is(input, textarea)::placeholder {
  opacity: 1;
  color: var(--text-muted);
}

.di-page form button {
  min-height: 52px;
  padding: 14px 24px;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 15px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: all 0.2s ease;
}

.di-page form button:hover {
  opacity: 0.9;
  transform: translateX(2px);
}

.di-page form button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.di-page .di-form-notice {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 2rem;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb), 0.04);
  border-left: 3px solid var(--accent);
}

/* Mobile form improvements */
@media (max-width: 768px) {
  .di-fields {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .di-page form {
    padding: clamp(20px, 5%, 40px);
  }

  .di-page form legend {
    font-size: 12px;
    margin-bottom: 1rem;
  }

  .di-page :is(input, textarea, select) {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .di-page form button {
    width: 100%;
    min-height: 48px;
  }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Enhanced focus states */
.rebuilt-demo .rd-shell :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* Skip link enhancement */
body[data-authored-demo] a.skipLink {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 12px 16px;
  text-decoration: none;
  z-index: 100;
  font-weight: 600;
  font-size: 13px;
}

body[data-authored-demo] a.skipLink:focus {
  top: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {
  body[data-authored-demo] {
    background: white;
    color: black;
  }

  .di-page form {
    page-break-inside: avoid;
  }
}


/* ============================================================================
   HOTEL NOCTURNE: Cinematic Desert Hospitality Guest Journey
   ========================================================================== */

.demo-hospitality .di-room-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.demo-hospitality .di-room-filters button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-hospitality .di-room-filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.demo-hospitality .di-room-feature,
.demo-hospitality .di-room-duet {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4vw;
  align-items: flex-start;
  margin-bottom: 80px;
}

.demo-hospitality .di-room-feature figure,
.demo-hospitality .di-room-duet figure {
  aspect-ratio: 3/4;
}

.demo-hospitality .di-room-feature h2,
.demo-hospitality .di-room-duet h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-hospitality .di-room-feature dl,
.demo-hospitality .di-room-duet dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 1.5rem 0;
}

.demo-hospitality .di-room-feature dt,
.demo-hospitality .di-room-duet dt {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.demo-hospitality .di-room-feature dd,
.demo-hospitality .di-room-duet dd {
  font-size: 15px;
  line-height: 1.6;
}

.demo-hospitality .di-daybreak,
.demo-hospitality .di-desert-interlude,
.demo-hospitality .di-night-spread {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-hospitality .di-daybreak h2,
.demo-hospitality .di-desert-interlude h2,
.demo-hospitality .di-night-spread h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-hospitality .di-daybreak time,
.demo-hospitality .di-desert-interlude time,
.demo-hospitality .di-night-spread time {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.demo-hospitality .di-stay-preview {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-hospitality .di-stay-preview aside {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

@media (max-width: 768px) {
  .demo-hospitality .di-room-feature,
  .demo-hospitality .di-room-duet,
  .demo-hospitality .di-daybreak,
  .demo-hospitality .di-desert-interlude,
  .demo-hospitality .di-night-spread,
  .demo-hospitality .di-stay-preview {
    grid-template-columns: 1fr;
  }

  .demo-hospitality .di-room-feature figure,
  .demo-hospitality .di-room-duet figure,
  .demo-hospitality .di-daybreak figure,
  .demo-hospitality .di-desert-interlude figure,
  .demo-hospitality .di-night-spread figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-hospitality .di-stay-preview aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-hospitality .di-room-feature h2,
  .demo-hospitality .di-room-duet h2,
  .demo-hospitality .di-daybreak h2,
  .demo-hospitality .di-desert-interlude h2,
  .demo-hospitality .di-night-spread h2 {
    font-size: 1.8rem;
  }
}

/* ============================================================================
   CALDER & VALE: Legal Authority & Case Documentation
   ========================================================================== */

.demo-legal .di-practice-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.demo-legal .di-practice-filters button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-legal .di-practice-filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.demo-legal .di-practice-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin: 60px 0;
}

.demo-legal .di-practice-columns article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-legal .di-practice-columns h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: Georgia, serif;
}

.demo-legal .di-practice-columns p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.demo-legal .di-practice-record {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vw;
  align-items: center;
  margin: 80px 0;
}

.demo-legal .di-practice-record figure {
  aspect-ratio: 3/4;
}

.demo-legal .di-practice-record h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: Georgia, serif;
}

.demo-legal .di-roles-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: flex-start;
  margin: 60px 0;
}

.demo-legal .di-roles-layout > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.demo-legal .di-roles-layout article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-legal .di-roles-layout span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-legal .di-roles-layout h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: Georgia, serif;
}

.demo-legal .di-roles-layout p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.demo-legal .di-roles-layout figure {
  aspect-ratio: 3/4;
  margin-top: 2rem;
}

.demo-legal .di-publication-lead {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vw;
  align-items: center;
  margin: 80px 0;
}

.demo-legal .di-publication-lead figure {
  aspect-ratio: 3/4;
}

.demo-legal .di-publication-lead h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: Georgia, serif;
}

.demo-legal .di-publication-index {
  margin: 60px 0;
}

.demo-legal .di-publication-index details {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  padding: 0;
}

.demo-legal .di-publication-index summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 500;
  background: var(--surface-alt);
  font-size: 15px;
  user-select: none;
}

.demo-legal .di-publication-index details[open] summary {
  border-bottom: 1px solid var(--border);
}

.demo-legal .di-publication-index details p {
  padding: 18px 20px 0;
  font-size: 14px;
  line-height: 1.7;
}

.demo-legal .di-conflict-desk {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-legal .di-conflict-desk aside {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

.demo-legal .di-conflict-desk h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: Georgia, serif;
}

@media (max-width: 768px) {
  .demo-legal .di-practice-columns {
    grid-template-columns: 1fr;
  }

  .demo-legal .di-practice-record,
  .demo-legal .di-roles-layout,
  .demo-legal .di-publication-lead,
  .demo-legal .di-conflict-desk {
    grid-template-columns: 1fr;
  }

  .demo-legal .di-roles-layout > div {
    grid-template-columns: 1fr;
  }

  .demo-legal .di-practice-record figure,
  .demo-legal .di-roles-layout figure,
  .demo-legal .di-publication-lead figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-legal .di-conflict-desk aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-legal .di-practice-columns article {
    padding: 1.5rem;
  }

  .demo-legal .di-practice-columns h2 {
    font-size: 1.3rem;
  }

  .demo-legal .di-practice-record h2,
  .demo-legal .di-publication-lead h2,
  .demo-legal .di-conflict-desk h2 {
    font-size: 1.8rem;
  }

  .demo-legal .di-roles-layout h2 {
    font-size: 1.3rem;
  }
}

/* ============================================================================
   FIELDWORK ARCHITECTURE: Land-Led Residential Design
   ========================================================================== */

.demo-archive .di-project-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.demo-archive .di-project-filters button {
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-archive .di-project-filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.demo-archive .di-project-study,
.demo-archive .di-project-spread {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4vw;
  align-items: center;
  margin-bottom: 80px;
}

.demo-archive .di-project-study:nth-child(even),
.demo-archive .di-project-spread:nth-child(even) {
  grid-template-columns: 1fr 1.5fr;
}

.demo-archive .di-project-study:nth-child(even) figure,
.demo-archive .di-project-spread:nth-child(even) figure {
  order: 2;
}

.demo-archive .di-project-study figure,
.demo-archive .di-project-spread figure {
  aspect-ratio: 3/4;
}

.demo-archive .di-project-study h2,
.demo-archive .di-project-spread h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.demo-archive .di-project-study p,
.demo-archive .di-project-spread p {
  font-size: 15px;
  line-height: 1.7;
  margin: 1rem 0;
}

.demo-archive .di-project-study dl,
.demo-archive .di-project-spread dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 2rem 0;
}

.demo-archive .di-project-study dt,
.demo-archive .di-project-spread dt {
  font-weight: 600;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.demo-archive .di-project-study dd,
.demo-archive .di-project-spread dd {
  font-size: 15px;
  line-height: 1.6;
}

.demo-archive .di-studio-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
  margin-bottom: 80px;
}

.demo-archive .di-studio-intro aside {
  position: sticky;
  top: 100px;
}

.demo-archive .di-studio-intro h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.demo-archive .di-process-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin: 60px 0;
}

.demo-archive .di-process-chapters article {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.demo-archive .di-process-chapters span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.demo-archive .di-process-chapters h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.demo-archive .di-process-chapters p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.demo-archive .di-project-brief {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: start;
}

.demo-archive .di-project-brief aside {
  padding: 2rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  position: sticky;
  top: 100px;
}

.demo-archive .di-project-brief aside h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.demo-archive .di-project-brief aside p {
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .demo-archive .di-project-study,
  .demo-archive .di-project-spread,
  .demo-archive .di-studio-intro,
  .demo-archive .di-project-brief {
    grid-template-columns: 1fr;
  }

  .demo-archive .di-project-study:nth-child(even) figure,
  .demo-archive .di-project-spread:nth-child(even) figure {
    order: auto;
  }

  .demo-archive .di-process-chapters {
    grid-template-columns: 1fr;
  }

  .demo-archive .di-project-study figure,
  .demo-archive .di-project-spread figure {
    aspect-ratio: auto;
    height: 300px;
  }

  .demo-archive .di-studio-intro aside,
  .demo-archive .di-project-brief aside {
    position: static;
    margin-bottom: 2rem;
  }

  .demo-archive .di-process-chapters article {
    padding: 1.5rem;
  }

  .demo-archive .di-process-chapters span {
    font-size: 10px;
  }

  .demo-archive .di-process-chapters h3 {
    font-size: 1.3rem;
  }

  .demo-archive .di-project-study h2,
  .demo-archive .di-project-spread h2,
  .demo-archive .di-studio-intro aside h2,
  .demo-archive .di-project-brief aside h2 {
    font-size: 1.8rem;
  }
}

/* ============================================================================
   UNIVERSAL ENHANCEMENTS: All Demos
   ========================================================================== */

/* Enhanced form button states across all demos */
.di-page form button:active,
.di-page form button:hover {
  opacity: 0.85;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.di-page form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Enhanced input focus and error states */
.di-page input:invalid,
.di-page textarea:invalid,
.di-page select:invalid {
  border-color: #d32f2f;
  background-color: rgba(211, 47, 47, 0.04);
}

.di-page input:invalid:focus-visible {
  outline-color: #d32f2f;
}

/* Skip link accessibility enhancement */
a.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #333;
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  z-index: 100;
  font-weight: 600;
  font-size: 12px;
}

a.skip-link:focus {
  top: 0;
}

/* Enhanced demo disclosure positioning */
demo-disclosure {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(17, 17, 15, 0.98), rgba(17, 17, 15, 0.95));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(239, 118, 34, 0.3);
}

demo-disclosure .demo-disclosure-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

demo-disclosure details {
  flex-shrink: 0;
}

demo-disclosure summary {
  cursor: pointer;
  padding: 6px 12px;
  margin: 0;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-weight: 700;
  color: #ffad70;
}

demo-disclosure summary:hover {
  background-color: rgba(255, 173, 112, 0.1);
}

demo-disclosure summary:focus-visible {
  outline: 2px solid #ffad70;
  outline-offset: 2px;
}

demo-disclosure details[open] summary {
  background-color: rgba(255, 173, 112, 0.15);
}

demo-disclosure details p {
  margin: 0;
  color: #f4eee3;
  font-size: 13px;
  line-height: 1.6;
}

demo-disclosure nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-self: flex-end;
}

demo-disclosure a {
  color: #ffad70;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  font-size: 12px;
  transition: color 0.2s ease;
}

demo-disclosure a:hover {
  color: #ffc999;
}

demo-disclosure a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Enhanced table styling for all demos */
.di-page table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.di-page table thead tr {
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border-strong);
}

.di-page table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.02);
}

.di-page table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

/* Enhanced definition list styling */
.di-page dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 2rem;
  margin: 2rem 0;
  padding: 0;
}

.di-page dt {
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.di-page dd {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Enhanced list styling */
.di-page ul,
.di-page ol {
  margin: 1.5rem 0;
  padding-left: 20px;
}

.di-page li {
  margin-bottom: 12px;
  line-height: 1.7;
}

.di-page li strong {
  font-weight: 600;
  color: var(--accent);
}

/* Enhanced blockquote styling */
.di-page blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
}

/* Enhanced code block styling */
.di-page code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 14px;
  color: var(--accent);
}

.di-page pre {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 16px;
  overflow-x: auto;
  margin: 2rem 0;
  font-size: 13px;
  line-height: 1.6;
}

.di-page pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
}

/* Enhanced section headers */
.di-page > header {
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}

/* Enhanced footer styling */
.di-page footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

/* Enhanced print styles */
@media print {
  demo-disclosure {
    display: none;
  }

  .di-page {
    padding: 0;
    background: white;
    color: black;
  }

  .di-page :is(h1, h2, h3) {
    break-after: avoid;
    page-break-after: avoid;
  }

  .di-page figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .di-page form {
    display: none;
  }

  .di-page a {
    color: #0066cc;
    text-decoration: underline;
  }

  .di-page a::after {
    content: " (" attr(href) ")";
    color: #666;
    font-size: 11px;
  }
}

/* Enhanced dark mode support */
@media (prefers-color-scheme: dark) {
  .di-page {
    background: var(--surface);
    color: var(--text);
  }

  .di-page a {
    color: var(--accent);
  }

  .di-page button {
    background: var(--accent);
    color: var(--surface);
  }

  .di-page input,
  .di-page textarea,
  .di-page select {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border-strong);
  }
}

/* Enhanced high-contrast mode support */
@media (prefers-contrast: more) {
  body {
    font-weight: 500;
  }

  a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  button, input[type="submit"], input[type="button"] {
    border-width: 2px;
    font-weight: 700;
    border: 2px solid currentColor;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  summary {
    font-weight: 700;
  }

  details {
    border: 2px solid var(--border-strong, currentColor);
    padding: 12px;
  }

  :focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }

  nav a:hover,
  nav a:active {
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }
}

/* Forced colors mode support */
@media (forced-colors: active) {
  button, input[type="button"], input[type="submit"] {
    border: 2px solid;
    forced-color-adjust: none;
  }

  input, textarea, select {
    border: 2px solid;
    forced-color-adjust: none;
  }

  :focus-visible {
    outline: 3px solid;
    outline-offset: 2px;
  }

  a {
    text-decoration: underline;
  }

  .skip-link {
    background-color: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }

  .skip-link:focus {
    background-color: Highlight;
    color: HighlightText;
  }

  nav a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }

  button:disabled {
    opacity: 0.5;
    forced-color-adjust: none;
  }

  input:disabled, textarea:disabled, select:disabled {
    opacity: 0.5;
    forced-color-adjust: none;
  }

  .form-feedback {
    border-left: 4px solid;
    forced-color-adjust: none;
  }
}

/* Form validation improvements */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
  border-color: #c41e3a;
  background-color: rgba(196, 30, 58, 0.05);
}

/* Enhanced skip link visibility on focus */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 12px 16px;
  z-index: 999;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  font-weight: 600;
  font-size: 14px;
}

.skip-link:focus {
  top: 0;
}

/* Navigation active state visual enhancement */
nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

/* Enhanced button/form error styling */
.form-feedback {
  margin-bottom: 1rem;
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(196, 30, 58, 0.1);
  color: #c41e3a;
  border-left: 4px solid #c41e3a;
  font-size: 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.form-feedback:empty {
  display: none;
}