/* Section-specific editorial voices; existing local fonts and system faces only. */
body:not(.exploring) .masthead{position:relative;top:auto;height:142px;padding-bottom:40px;background:#080808}
#pages .studio-intro{padding-top:64px}
#pages .studio-intro h1{font-family:Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:-.065em;line-height:1.02;text-transform:none;font-size:clamp(58px,6.4vw,96px)}
#pages .studio-intro h1 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.065em;color:#d89b7d}
#pages .capability-body h2{font-family:'SFMono-Regular',Menlo,Consolas,monospace;font-size:clamp(32px,4.2vw,64px);font-weight:400;letter-spacing:-.055em;line-height:1.1;text-transform:none}
#pages .capability-body h2 em{font-family:inherit;font-style:normal}
#pages .living-collection .section-intro h2,#pages .angel-study h2{font-family:'Deleted Time Graffiti',sans-serif;font-style:normal;font-weight:400;letter-spacing:-.02em;line-height:1.12;text-transform:lowercase}
#pages .living-caption h3{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.045em}
#pages #future-books h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,5.4vw,78px);font-weight:400;letter-spacing:-.055em;line-height:1.1;text-transform:none}
#pages #future-books .future-layout>div>p:not(.concept-status){font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.7}
#pages #hierophant h2{font-family:Helvetica,Arial,sans-serif;font-size:clamp(39px,4.7vw,70px);font-weight:800;line-height:1.02;letter-spacing:-.06em;text-transform:uppercase}
#pages #hierophant h2 em{font-family:inherit;font-weight:800;font-style:normal;color:#e56038}
#pages #film-concept h2{font-family:Oswald,'Arial Narrow',sans-serif;font-size:clamp(60px,8vw,120px);font-weight:600;line-height:.98;letter-spacing:-.035em;text-transform:uppercase}
#pages #film-concept .section-marker{letter-spacing:.18em}
#pages #music h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(48px,6.5vw,94px);font-weight:400;font-style:italic;line-height:1.04;letter-spacing:-.05em;text-transform:lowercase}
#pages #music .music-status{font-family:'SFMono-Regular',Menlo,Consolas,monospace;letter-spacing:.035em}
#pages #project-tracker>h2{font-family:'SFMono-Regular',Menlo,Consolas,monospace;font-size:clamp(34px,4.3vw,62px);font-weight:400;line-height:1.12;letter-spacing:-.065em;text-transform:none}
#pages #project-tracker .project-heading h3{font-family:Oswald,'Arial Narrow',sans-serif;font-size:30px;font-weight:400;letter-spacing:.025em;text-transform:uppercase}
#pages #world-preview h2,#pages #art-title{font-family:ui-rounded,'Arial Rounded MT Bold',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(43px,5.8vw,82px);line-height:1.02;letter-spacing:-.055em;text-transform:none}
#pages #world-preview h2 em,#pages #art-title em{font-family:inherit;font-style:normal;font-weight:700}
#pages #help-title{font-family:Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(44px,5.5vw,76px);letter-spacing:-.06em;line-height:1.07;text-transform:none}
#pages #help-title em{font-family:inherit;font-style:normal;font-weight:700}
#pages #about-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(43px,5.2vw,76px);font-weight:400;letter-spacing:-.05em;text-transform:none;line-height:1.12}
#pages #about-title em{font-family:inherit;font-style:italic}
#pages .section h2{overflow-wrap:normal;word-break:normal}
@media(max-width:700px){body:not(.exploring) .masthead{height:138px;padding-bottom:50px}#pages .studio-intro{padding-top:48px}#pages .studio-intro h1{font-size:clamp(44px,12.5vw,62px);line-height:1.06}#pages #hierophant h2{font-size:clamp(36px,10vw,52px)}#pages #film-concept h2{font-size:clamp(66px,18vw,100px)}#pages #future-books h2{font-size:clamp(42px,11vw,58px)}#pages #music h2{font-size:clamp(46px,12vw,64px)}#pages #project-tracker>h2{font-size:clamp(31px,8vw,44px)}#pages .capability-body h2{font-size:clamp(31px,8vw,44px)}#pages #future-books .future-layout>div>p:not(.concept-status){font-size:17px}}

#pages #film-concept h2 em{color:#e18a65;font-family:inherit;font-weight:600}

/* ============================================================================
   ARCHITECTURAL TYPE LAYOUT SYSTEMS Across Sections (Refs 01 – 05)
   ============================================================================ */

/* --- REF 04: Stacked Monumental Spec List + Vertical Index Column + Cropped Glyph --- */
.dt-type-spec-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 82% 52%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 48%, transparent 70%),
    #050507;
  padding: clamp(28px, 4vw, 52px);
  margin: 28px 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(180px, 0.55fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.dt-type-spec-banner::after {
  content: attr(data-crop-glyph);
  position: absolute;
  right: -0.08em;
  top: 50%;
  transform: translateY(-50%);
  font: 800 clamp(220px, 34vw, 460px)/0.82 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.06em;
}

.dt-type-spec-main,
.dt-type-spec-index {
  position: relative;
  z-index: 1;
}

.dt-type-spec-overline {
  display: block;
  font: 700 clamp(14px, 1.9vw, 24px)/1.15 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 clamp(16px, 2.2vw, 26px);
}

.dt-type-spec-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dt-type-spec-stack li {
  font: 700 clamp(32px, 5.2vw, 76px)/0.98 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.dt-type-spec-stack li em {
  font-style: italic;
  font-weight: 700;
  color: #d8d8d8;
}

.dt-type-spec-index {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-type-spec-index li {
  font: 500 13px/1.35 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #e6e6e6;
  letter-spacing: 0.01em;
}

/* --- REF 03: Exposed 1px Hairline Swiss Specimen Grid with Giant Single Glyphs --- */
.dt-type-specimen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  border-left: 1px solid rgba(255, 255, 255, 0.26);
  margin: 26px 0;
  background: #050507;
}

.dt-type-specimen-cell {
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.26);
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  padding: 24px 22px 44px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: background 180ms ease, color 180ms ease;
}

.dt-type-specimen-cell:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dt-type-specimen-cell--featured {
  background: #ffffff !important;
  color: #050507 !important;
}

.dt-type-specimen-cell--featured h3,
.dt-type-specimen-cell--featured p,
.dt-type-specimen-cell--featured .dt-type-specimen-corner,
.dt-type-specimen-cell--featured .dt-type-specimen-head {
  color: #050507 !important;
}

.dt-type-specimen-head {
  font: 800 14px/1.12 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  max-width: 18ch;
  z-index: 2;
}

.dt-type-specimen-glyph {
  font: 800 clamp(88px, 11vw, 156px)/0.84 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  margin: 14px auto;
  user-select: none;
  z-index: 1;
}

.dt-type-specimen-cell--featured .dt-type-specimen-glyph {
  color: #050507;
}

.dt-type-specimen-corner {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font: 600 10px/1.2 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8a8a8;
  z-index: 2;
}

/* Also enhance existing .dt-os-cards-4 inside #studio-os and #connected-studio into Ref 03 Hairline Specimen Grid */
#studio-os .dt-os-cards-4,
#connected-studio .dt-os-cards-4 {
  gap: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

#studio-os .dt-os-card,
#connected-studio .dt-os-card {
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 0 !important;
  padding: 28px 24px 48px !important;
  position: relative;
  overflow: hidden;
}

#studio-os .dt-os-card::before,
#connected-studio .dt-os-card::before {
  content: attr(data-specimen-glyph);
  display: block;
  font: 800 clamp(74px, 8.5vw, 124px)/0.86 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.92);
  margin: 6px 0 18px;
}

/* --- REF 05: Staggered Horizontal Display Bands with Vertical Micro-Labels + Dual Solid/Outline Stepper --- */
.dt-type-stagger-showcase {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 48%),
    #060608;
  padding: clamp(24px, 3.6vw, 44px);
  margin: 24px 0 30px;
  overflow: hidden;
}

.dt-type-stagger-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.dt-type-stagger-lead {
  font: 600 13px/1.38 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #dcdcdc;
  max-width: 24ch;
  margin: 0;
}

.dt-type-stagger-stamp {
  font: 700 clamp(15px, 1.8vw, 22px)/1.08 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #ffffff;
  text-align: left;
  letter-spacing: -0.02em;
}

.dt-type-stagger-stamp em {
  font-style: italic;
}

.dt-type-stagger-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}

.dt-type-stagger-slab {
  position: absolute;
  left: 22%;
  top: 8%;
  width: 34%;
  height: 84%;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.24);
  pointer-events: none;
  z-index: -1;
}

.dt-type-stagger-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dt-type-stagger-row--right {
  justify-content: flex-end;
}

.dt-type-stagger-row--mid {
  padding-left: 12%;
}

.dt-type-stagger-word {
  font: 800 clamp(30px, 5.2vw, 72px)/0.92 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.045em;
  color: #ffffff;
  text-transform: lowercase;
}

.dt-type-stagger-word--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.88);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.dt-type-vert-tag {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 600 9px/1 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a8a8;
  padding: 2px 0;
}

/* --- REF 02: High-Density Vertical Barcode Rhythm + 10-Step Diagonal Staircase Cascade --- */
.dt-type-barcode-strip {
  margin: 18px 0 24px;
  padding: 16px 18px;
  background: #f4f2ec;
  color: #050507;
  border: 1px solid #ffffff;
}

.dt-type-barcode-bars {
  height: 36px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    #050507 0px,
    #050507 1px,
    transparent 1px,
    transparent 3px,
    #050507 3px,
    #050507 5px,
    transparent 5px,
    transparent 7px
  );
  margin-bottom: 10px;
}

.dt-type-staircase {
  background: #030304;
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 22px 24px 26px;
  margin: 22px 0 30px;
}

.dt-type-staircase-meta {
  display: flex;
  justify-content: space-between;
  font: 500 11px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #a8a8a8;
  margin-bottom: 16px;
}

.dt-type-staircase-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dt-type-stair-left,
.dt-type-stair-right {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  font: 900 13px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.dt-type-stair-left {
  background: #ffffff;
  color: #050507;
  letter-spacing: 0.08em;
}

.dt-type-stair-right {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  text-align: right;
  letter-spacing: 0.06em;
}

/* --- REF 01: TDC / KUDOS Architectural Contact, Membership & Newsletter Grid + Floating Disc --- */
.dt-type-tdc-shell {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  padding: clamp(36px, 5vw, 68px) 0 28px;
  margin-top: 32px;
}

.dt-type-tdc-disc {
  position: absolute;
  top: 24px;
  right: 0;
  width: clamp(54px, 6.5vw, 86px);
  height: clamp(54px, 6.5vw, 86px);
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #050507;
  font: 800 11px/1 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.08em;
}

.dt-type-tdc-upper,
.dt-type-tdc-lower,
.dt-type-tdc-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.dt-type-tdc-lower {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1.15fr);
}

.dt-type-tdc-heading {
  font: 800 13px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 18px;
}

.dt-type-tdc-socials {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.dt-type-tdc-social-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font: 700 11px/1 'SFMono-Regular', Menlo, monospace;
  transition: background 150ms ease, color 150ms ease;
}

.dt-type-tdc-social-pill:hover {
  background: #ffffff;
  color: #050507;
}

.dt-type-tdc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}

.dt-type-tdc-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.48);
  padding: 10px 0;
  color: #ffffff;
  font: 400 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  outline: none;
}

.dt-type-tdc-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.dt-type-tdc-input:focus {
  border-bottom-color: #ffffff;
}

.dt-type-tdc-submit {
  margin-top: 14px;
  background: none;
  border: none;
  padding: 6px 0;
  color: #ffffff;
  font: 800 13px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.dt-type-tdc-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #050507 !important;
  font: 800 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.dt-type-tdc-contact-list {
  font: 400 14px/1.65 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #dcdcdc;
  margin: 0;
}

.dt-type-tdc-contact-list a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dt-type-tdc-colophon {
  font: 400 13px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #cccccc;
}

.dt-type-tdc-colophon a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dt-type-tdc-brandmark {
  display: flex;
  align-items: flex-end;
  gap: 28px;
}

.dt-type-tdc-brandmark strong {
  font: 800 clamp(34px, 4.5vw, 54px)/0.9 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.05em;
  color: #ffffff;
}

.dt-type-tdc-brandmark span {
  font: 800 12px/1.05 Oswald, 'Helvetica Neue', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dcdcdc;
}

@media (max-width: 900px) {
  .dt-type-spec-banner,
  .dt-type-tdc-upper,
  .dt-type-tdc-lower,
  .dt-type-tdc-bottom {
    grid-template-columns: 1fr;
  }
  .dt-type-specimen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dt-type-specimen-grid {
    grid-template-columns: 1fr;
  }
  .dt-type-tdc-form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   OPERATION REAL WORLD × THE LIVING NEWS WORLD UI STYLES
   ========================================================================== */
.lnw-command-shell {
  margin-top: 24px;
  border: 1px solid rgba(216, 177, 90, 0.28);
  background: linear-gradient(180deg, rgba(10, 11, 15, 0.94), rgba(6, 7, 10, 0.98));
  padding: clamp(20px, 3vw, 32px);
}

.lnw-top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lnw-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lnw-mode-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f3efe6;
  padding: 9px 16px;
  font: 700 11px/1 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}

.lnw-mode-tab.is-active,
.lnw-mode-tab[aria-pressed="true"] {
  background: #d8b15a;
  border-color: #d8b15a;
  color: #06070a;
}

.lnw-stage-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.lnw-stage-pipeline-label {
  font: 700 10px/1.2 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.16em;
  color: #d8b15a;
  margin-right: 6px;
}

.lnw-stage-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #dcd8ce;
  padding: 6px 11px;
  font: 600 10px/1 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.lnw-stage-btn.is-active,
.lnw-stage-btn[aria-pressed="true"] {
  border-color: #d8b15a;
  background: rgba(216, 177, 90, 0.18);
  color: #fff;
}

.lnw-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 20px;
  margin-top: 18px;
}

.lnw-preview-box {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #050608;
  padding: 12px;
}

#lnw-preview-canvas {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(216, 177, 90, 0.22);
}

.lnw-agents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lnw-agent-card {
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
}

.lnw-agent-card small {
  display: block;
  font: 700 9px/1.2 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.14em;
  color: #d8b15a;
}

.lnw-agent-card strong {
  display: block;
  font: 700 13px/1.25 Oswald, sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 4px 0;
}

.lnw-agent-card p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(243, 239, 230, 0.74);
}

.lnw-scenes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.lnw-scene-card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.025);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lnw-scene-card.is-active {
  border-color: rgba(216, 177, 90, 0.72);
  box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.25);
}

.lnw-scene-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lnw-scene-rank {
  font: 700 10px/1.2 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.14em;
  color: #d8b15a;
}

.lnw-scene-headline {
  margin: 0;
  font: 700 18px/1.25 Oswald, 'Helvetica Neue', sans-serif;
  color: #fff;
}

.lnw-scene-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(243, 239, 230, 0.8);
}

.lnw-scene-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
}

.lnw-scene-meta-grid small {
  display: block;
  font: 700 9px/1.2 'SFMono-Regular', Menlo, monospace;
  color: rgba(243, 239, 230, 0.52);
  letter-spacing: 0.12em;
}

.lnw-scene-meta-grid a {
  color: #d8b15a;
  text-decoration: underline;
}

.lnw-scene-integrity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 500 10.5px/1.4 'SFMono-Regular', Menlo, monospace;
  color: rgba(243, 239, 230, 0.72);
  padding-top: 4px;
}

.lnw-integrity-pill {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(216, 177, 90, 0.12);
  border: 1px solid rgba(216, 177, 90, 0.36);
  color: #f3d78b;
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

.lnw-scene-actions {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lnw-journey-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.lnw-journey-stop {
  background: rgba(216, 177, 90, 0.1);
  border: 1px solid rgba(216, 177, 90, 0.38);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}

.lnw-journey-stop small {
  display: block;
  font: 700 9px/1 'SFMono-Regular', Menlo, monospace;
  color: #d8b15a;
}

.lnw-journey-stop strong {
  font: 700 12px/1.2 Oswald, sans-serif;
}

.lnw-explore-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.lnw-search-label {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 700 10px/1.2 'SFMono-Regular', Menlo, monospace;
  color: #d8b15a;
  letter-spacing: 0.12em;
}

.lnw-search-label input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 10px 12px;
  font: 500 13px/1.3 'SFMono-Regular', Menlo, monospace;
}

/* 3D Explorer HUD bar for Operation Real World */
.dt-rw-hud-bar {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(6, 7, 10, 0.86);
  border: 1px solid rgba(216, 177, 90, 0.36);
  backdrop-filter: blur(10px);
  max-width: 94vw;
}

.dt-rw-hud-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.dt-rw-hud-label {
  font: 700 9px/1 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.14em;
  color: #d8b15a;
  margin-right: 4px;
}

.dt-rw-hud-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f3efe6;
  padding: 5px 8px;
  font: 600 9.5px/1 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.dt-rw-hud-btn.is-gold,
.dt-rw-hud-btn[aria-pressed="true"] {
  background: #d8b15a;
  border-color: #d8b15a;
  color: #050608;
}

@media (max-width: 900px) {
  .lnw-stage-grid {
    grid-template-columns: 1fr;
  }
  .dt-rw-hud-bar {
    bottom: 112px;
  }
}