/* World Trading · material finish.
   Load after world-cyan.css. Structure and control colours stay with their owners.
   UI: optical SVG at 24px. Editorial marks: transparent objects on a quiet stage. */

:root {
  --wm-steel: #455967;
  --wm-steel-detail: #748995;
  --wm-steel-accent: #1d7188;
  --wm-cut: #c1cdd3;
  --wm-edge: #ffffff;
  --wm-recess: #dce2e5;
  --wm-surface: #edf0f1;
  --wm-contact: #19283225;
  --wm-photo-mat: #13171a;
}

:root[data-theme="dark"] {
  --wm-steel: #c3ced5;
  --wm-steel-detail: #758b99;
  --wm-steel-accent: #a1dcea;
  --wm-cut: #394650;
  --wm-edge: #dce7ed28;
  --wm-recess: #030507;
  --wm-surface: #11161a;
  --wm-contact: #00000080;
}

/* The drawing carries the material. Small icons need no filters or gradients. */
.world-site :is(.world-ui-icon, .world-icon) {
  --wm-icon-body: var(--wm-steel);
  --wm-icon-detail: var(--wm-steel-detail);
  --wm-icon-accent: var(--wm-steel-accent);
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  color: var(--wm-icon-body);
  shape-rendering: geometricPrecision;
  filter: none;
}

.world-site :is(.world-ui-icon, .world-icon) .wi-body {
  color: var(--wm-icon-body);
  stroke: currentColor;
}

.world-site :is(.world-ui-icon, .world-icon) .wi-detail {
  color: var(--wm-icon-detail);
  stroke: currentColor;
}

.world-site :is(.world-ui-icon, .world-icon) .wi-accent {
  color: var(--wm-icon-accent);
  stroke: currentColor;
}

.world-site :is(.world-ui-icon, .world-icon) :is(path, circle, rect, ellipse, polyline, polygon, line) {
  vector-effect: non-scaling-stroke;
}

/* Controls stay optically single-tone, including cyan primary actions. */
.world-site :is(.btn, .wt-button, .world-button, .world-author-button, .icon-btn, .bookmark-button)
  :is(.world-ui-icon, .world-icon) {
  --wm-icon-body: currentColor;
  --wm-icon-detail: currentColor;
  --wm-icon-accent: currentColor;
  color: inherit;
}

.world-site :is(.world-desktop-nav a.active, .world-menu-grid a.active,
  .world-sector-rail a.selected, .world-sector-tabs a.selected,
  .world-editorial-navigation a.selected, .mobile-nav a.active)
  :is(.world-ui-icon, .world-icon) {
  --wm-icon-body: var(--accent);
  --wm-icon-accent: var(--text);
}

/* A cut rim and one reflected edge replace the coloured badge glow. */
.world-site :is(.world-home-sector-icon, .wt-icon-tile, .wt-market-icon,
  .world-directory-icon, .world-tool-mark, .world-wiki-term-icon,
  .world-wiki-domain-grid > a > span, .world-material-badge) {
  color: var(--wm-steel);
  background: var(--wm-surface);
  border-color: var(--wm-cut);
  box-shadow: inset 0 1px 0 var(--wm-edge), inset 0 -1px 0 var(--wm-recess);
}

.world-site .world-material-badge {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 1px solid var(--wm-cut);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--wm-edge) 45%, transparent), transparent 44%), var(--wm-surface);
}

.world-site .world-material-badge > :is(.world-ui-icon, .world-icon) {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

.world-site .world-material-badge > :is(.world-ui-icon, .world-icon)
  :is(path, circle, rect, ellipse, polyline, polygon, line) {
  vector-effect: none;
}

.world-site .world-home-sector-grid > a:hover .world-home-sector-icon {
  transform: none;
}

/* Transparent, square master assets are never filled or clipped into a badge. */
.world-site .world-emblem-stage {
  --wm-emblem-size: 104px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--wm-emblem-size);
  max-width: 100%;
  height: var(--wm-emblem-size);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.world-site .world-emblem-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 25%;
  right: 25%;
  bottom: 8%;
  height: 5%;
  border-radius: 50%;
  background: var(--wm-contact);
  filter: blur(4px);
  opacity: .65;
  pointer-events: none;
}

.world-site img.world-market-emblem {
  position: relative;
  display: block;
  width: var(--wm-emblem-size, 104px);
  max-width: 100%;
  height: var(--wm-emblem-size, 104px);
  max-height: 140px;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  transform: none;
}

.world-site :is(.world-home-sector, .world-home-market, .world-sector-interest)
  > .world-emblem-stage {
  --wm-emblem-size: 88px;
}

.world-site .wt-market-card > .world-emblem-stage {
  --wm-emblem-size: 104px;
  margin-bottom: 16px;
}

.world-site .world-market-directory-art:has(> .world-emblem-stage) {
  display: grid;
  place-items: center;
  background: var(--wm-surface);
}

.world-site .world-market-directory-art > .world-emblem-stage {
  --wm-emblem-size: 124px;
  position: relative;
  inset: auto;
  color: inherit;
}

.world-site .world-sector-image:has(> .world-emblem-stage) {
  display: grid;
  place-items: center;
  background: var(--wm-surface);
}

.world-site .world-sector-image > .world-emblem-stage {
  --wm-emblem-size: 140px;
  position: relative;
  inset: auto;
  z-index: 0;
  font-size: inherit;
  color: inherit;
}

.world-site .world-sector-image:has(> .world-emblem-stage)::after {
  display: none;
}

/* Scenes keep the photographer's colour and a deliberate focal point. */
.world-site :is(.wt-hero-visual, .world-sector-image, .world-market-directory-art,
  .world-guide-art, .world-global-scene) {
  --wm-photo-position: 50% 50%;
}

.world-site :is(.wt-room, .world-sector-image > img:not(.world-market-emblem),
  .world-market-directory-art > img:not(.world-market-emblem), .world-guide-art > img,
  .world-global-scene > img) {
  filter: none;
  mix-blend-mode: normal;
  object-position: var(--wm-photo-position);
  animation: none;
}

.world-site :is(.world-sector-image, .wt-room) {
  animation: none;
  transform: none;
}

/* Opt in on the existing photo container to place all copy below the photograph.
   Use --wm-photo-ratio / --wm-photo-position for a particular crop, never a tint. */
.world-site :is(.wt-hero-visual, .world-sector-image).world-photo-scene {
  min-height: 0;
  aspect-ratio: auto;
  align-self: center;
  border-color: var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: none;
}

.world-site .world-photo-scene > :is(.wt-room, img:not(.world-market-emblem)) {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--wm-photo-ratio, 3 / 2);
  object-fit: cover;
  object-position: var(--wm-photo-position, 50% 50%);
  background: var(--wm-photo-mat);
  transform: none;
  animation: none;
}

.world-site .world-photo-scene::after,
.world-site .world-photo-scene > :is(.wt-visual-shade, .world-hero-orbit) {
  display: none;
}

.world-site .world-photo-scene > .wt-visual-top {
  position: static;
  padding: 16px 18px 0;
  color: var(--muted);
}

.world-site .world-photo-scene > .wt-visual-top > span:last-child {
  color: var(--muted);
}

.world-site .world-photo-scene > .wt-room-note {
  position: static;
  padding: 10px 18px 0;
  color: var(--muted);
}

.world-site .world-photo-scene > .wt-visual-caption {
  position: static;
  padding: 16px 18px 18px;
  border: 0;
  color: var(--text);
}

.world-site .world-photo-scene .wt-visual-caption > div > span {
  color: var(--muted);
}

.world-site .world-photo-scene .wt-mini-seal {
  color: var(--wm-steel);
}

.world-site .world-sector-image.world-photo-scene > span:not(.world-emblem-stage) {
  position: static;
  display: block;
  padding: 13px 18px 15px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.world-site .world-scene-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 94px;
  padding: 12px 20px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.world-site .world-scene-caption > .world-emblem-stage { --wm-emblem-size: 72px; }
.world-site .world-market-directory-art { min-height: 190px; }
.world-site .world-market-directory-art > .world-emblem-stage { --wm-emblem-size: 136px; }
.world-site .world-cover-grid, .world-site .world-cover::after { display: none; }
.world-site .world-cover, .world-site .story-card .world-cover,
.world-site .article-layout > article > .world-cover {
  aspect-ratio: auto;
  background: var(--panel);
}
.world-site .world-cover-image {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: none;
}
.world-site .world-cover figcaption {
  position: static;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 7px;
  line-height: 1.6;
}
.world-site .world-cover figcaption > span:last-child { color: var(--muted); }
.world-site .world-cover-code { display: none; }
.world-site .world-cover--hero > .world-cover-image { aspect-ratio: 2 / 1; }
.world-site .world-cover--banner > .world-cover-image { aspect-ratio: 3 / 1; }
.world-site .world-cover-tag { background: #101820dc; border-color: #b1c8d04d; }
.world-site .world-guide-card .world-guide-art > span,
.world-site .world-cover .world-cover-tag {
  color: #e6f3f6;
  background: #101820ed;
  border-color: #bdd2da5c;
}
.world-site .world-guide-art > span .world-ui-icon {
  --wm-icon-body: #e6f3f6;
  --wm-icon-detail: #c3d8de;
  --wm-icon-accent: #e6f3f6;
  color: #e6f3f6;
}

/* Hover only: an object lifts slightly, while its contact shadow remains grounded. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .world-site img.world-market-emblem {
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
  }

  .world-site :is(.world-home-sector, .world-home-market, .world-sector-interest,
    .wt-market-card, .world-market-directory > a):hover img.world-market-emblem {
    transform: translateY(-2px);
  }

  .world-site .world-home-sector-grid > a:hover .world-home-sector-icon {
    transform: translateY(-1px);
  }
}

@media (max-width: 700px) {
  .world-site :is(.world-home-sector, .world-home-market, .world-sector-interest)
    > .world-emblem-stage {
    --wm-emblem-size: 76px;
  }

  .world-site .wt-market-card > .world-emblem-stage {
    --wm-emblem-size: 88px;
  }

  .world-site .world-market-directory-art > .world-emblem-stage {
    --wm-emblem-size: 112px;
  }

  .world-site .world-sector-image > .world-emblem-stage {
    --wm-emblem-size: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-site :is(.world-market-emblem, .world-emblem-stage, .world-material-badge,
    .world-home-sector-icon, .world-photo-scene, .world-photo-scene > img) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  .world-site .world-emblem-stage::after {
    display: none;
  }

  .world-site :is(.world-material-badge, .world-emblem-stage) {
    box-shadow: none;
  }
}