:root {
  --ink: #070707;
  --paper: #f4f0e8;
  --gold: #c9a45d;
  --line: rgba(244, 240, 232, .22);
  --pad: clamp(1.25rem, 5vw, 4.5rem);
}
.screen-editor { margin: 5rem 1rem 1rem; padding: 1rem; border: 1px solid #c9a45d80; background: #171717; color: #fff; font: 16px/1.5 Arial,sans-serif; }
.screen-editor summary { cursor:pointer; min-height:44px; }
.screen-editor section { margin-top:14px; padding-top:12px; border-top:1px solid #c9a45d55; }
.screen-editor h3 { margin:0 0 8px; font:20px Georgia,serif; }
.screen-editor label { display:grid; gap:5px; margin:8px 0; }
.screen-editor select,.screen-editor textarea { width:100%; max-width:100%; color:#111; background:#fff; border:1px solid #d8d8d8; font:16px/1.4 Arial,sans-serif; padding:10px; }
.screen-editor textarea { min-height:90px; resize:vertical; }
.screen-editor button,.screen-editor select,.screen-editor a { font:inherit; margin:6px; padding:10px; min-height:44px; }
.screen-editor button,.screen-editor select,.screen-editor a { max-width:calc(100% - 12px); }
.screen-editor button { color:#fff; background:#222; border:1px solid #c9a45d80; }
.screen-editor button:disabled { color:#d7d7d7; background:#3a3a3a; opacity:.6; }
.screen-editor select { color:#111; background:#fff; border:1px solid #d8d8d8; }
.screen-editor a { color:#e9c976; display:inline-block; }
.screen-editor-preview { display:block; width:180px; max-width:100%; height:180px; object-fit:contain; margin:12px 0; }
.editorial-gallery { padding: 2rem 1rem; }
.editorial-gallery h3 { font: normal 1.65rem/1.15 Georgia,serif; margin: 0 0 .6rem; }
.editorial-gallery > p { font-size: .875rem; line-height: 1.5; opacity: .75; margin-bottom: 1.5rem; }
.mosaic { display: flex; flex-direction: column; gap: 3px; }
.mosaic-row { display: flex; gap: 3px; align-items: flex-start; }
.mosaic-item { min-width: 0; overflow: hidden; background: #0b0b0b; }
.mosaic-toolbar { margin: 1rem 0; }
.mosaic-toolbar button { min-height: 44px; padding: .6rem .8rem; border: 1px solid #c9a45d80; background: #171717; color: #f4f0e8; font-size: 14px; cursor: pointer; }
.edit-tools { position: relative; padding: .75rem 0; }
.edit-tools p { font-size: 14px; line-height: 1.5; }
.edit-tools button { margin: .2rem; }
.is-editing .mosaic-item { cursor: grab; }
.is-editing .photo-trigger { cursor: grab; }
.is-editing .mosaic-item.is-picked { outline: 3px solid #e9c976; outline-offset: -3px; }
.is-editing .mosaic-item.is-move-target { cursor: copy; }
.is-editing .mosaic-item.is-move-target:hover { outline: 2px solid rgba(233,201,118,.65); outline-offset: -2px; }
.mosaic-item.drop-before::before,.mosaic-item.drop-after::after { content:""; position:absolute; z-index:8; left:0; right:0; height:5px; background:#e9c976; box-shadow:0 0 14px rgba(233,201,118,.8); }
.mosaic-item.drop-before::before { top:0; }
.mosaic-item.drop-after::after { bottom:0; }
.is-editing .mosaic-item img { pointer-events: none; }
.mosaic-item { position: relative; }
.tile-tools { position: absolute; inset: auto 0 0; display: flex; flex-wrap: wrap; background: #080808e8; }
.tile-tools button { flex: 1; min-height: 44px; padding: 4px; font-size: 14px; color: white; background: transparent; border: 1px solid #c9a45d80; cursor: pointer; }
.edit-tools button:disabled { opacity: .4; cursor: default; }
.pvp-label { position: absolute; z-index: 2; transform: translate(-50%,-50%); pointer-events: none; font-family: Arial,sans-serif; font-weight: 500; line-height: 1.2; white-space: nowrap; padding: 5px 7px; border: 1px solid currentColor; background: rgba(255,255,255,.06); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.pvp-label[data-color="white"] { color: #fff; }
.pvp-label[data-color="black"] { color: #000; }
.is-editing .pvp-label, .price-preview .pvp-label { pointer-events: auto; cursor: move; touch-action: none; box-shadow: 0 0 0 2px rgba(201,164,93,.55); }
.pvp-label.is-dragging { box-shadow: 0 0 0 3px #c9a45d; }
.tile-tools { z-index: 3; }
.mosaic > .tile-tools { position:static; display:flex; flex-wrap:wrap; padding:8px; gap:6px; border:1px solid #c9a45d80; background:#171717; }
.mosaic > .tile-tools p { flex-basis:100%; margin:0 0 4px; font-size:14px; }
.mosaic > .tile-tools button { flex:0 1 auto; padding:8px 12px; }
.edit-mode-menu { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.edit-mode-menu button { min-height:48px; padding:8px; border:1px solid #c9a45d80; color:#fff; background:#171717; font:700 13px/1.2 Arial,sans-serif; letter-spacing:.06em; }
.order-dialog { width:min(96vw,44rem); height:min(90dvh,52rem); padding:0; color:#fff; background:#111; border:1px solid #c9a45d; }
.order-dialog::backdrop { background:rgba(0,0,0,.82); }
.order-dialog-head { position:sticky; z-index:3; top:0; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:14px; background:#111; border-bottom:1px solid #c9a45d55; }
.order-dialog-head h3 { margin:0; font:24px Georgia,serif; }
.order-dialog-head p { margin:5px 0 0; font:14px/1.35 Arial,sans-serif; }
.order-dialog-head button { min-width:44px; min-height:44px; color:#fff; background:#222; border:1px solid #c9a45d80; font-size:22px; }
.order-actions { position:sticky; z-index:3; top:88px; display:flex; gap:8px; padding:8px 14px 10px; background:#111; }
.order-actions button { flex:1; min-height:44px; color:#fff; background:#222; border:1px solid #c9a45d80; font:14px Arial,sans-serif; }
.order-actions button:disabled { opacity:.45; }
.order-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:8px; }
.order-item { position:relative; min-width:0; }
.order-thumb { position:relative; width:100%; min-width:0; padding:0; overflow:hidden; border:2px solid transparent; background:#080808; }
.order-thumb.is-selected { border-color:#e9c976; opacity:.55; }
.order-thumb.is-drag-over { border-color:#fff; box-shadow:0 0 0 3px #e9c976,0 0 18px #e9c976; }
.order-select { position:absolute; z-index:2; right:6px; top:6px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:2px solid #fff; border-radius:50%; color:#111; background:rgba(0,0,0,.45); font:700 18px Arial,sans-serif; box-shadow:0 2px 10px rgba(0,0,0,.55); }
.order-select[aria-pressed="true"] { border-color:#e9c976; background:#e9c976; }
.order-grid img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.order-thumb span { position:absolute; left:4px; bottom:4px; min-width:24px; padding:3px 5px; color:#111; background:#e9c976; font:700 12px Arial,sans-serif; }
.order-save { position:sticky; z-index:4; bottom:0; display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:#111; border-top:1px solid #c9a45d55; }
.order-save button { flex:1; min-height:48px; color:#fff; background:#222; border:1px solid #c9a45d80; font:700 14px Arial,sans-serif; }
.order-save [data-order-action="save"] { color:#111; background:#e9c976; }
@media (max-width:600px) {
 .order-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .order-actions { top:104px; }
}
.label-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.label-list button[aria-pressed="true"],.edit-tools button[aria-pressed="true"] { outline:2px solid #c9a45d; }
.price-dialog { width: min(94vw,420px); max-height: 90dvh; overflow: auto; border: 1px solid #c9a45d; background: #171717; color: #fff; padding: 18px; }
.price-dialog::backdrop { background: #000b; }
.price-dialog h3 { margin-top: 0; font: 24px Georgia,serif; }
.price-dialog label { display: grid; gap: 5px; margin-bottom: 10px; font-size: 14px; }
.color-choice { margin: 0 0 12px; padding: 0; border: 0; }
.color-choice legend { margin-bottom: 6px; font-size: 14px; }
.color-choice button { min-width: 46%; margin-right: 6px; }
.color-choice button[aria-pressed="true"] { border-color: #c9a45d; box-shadow: inset 0 0 0 1px #c9a45d; }
.price-dialog input, .price-dialog select, .price-dialog button { min-height: 44px; font: 16px Arial,sans-serif; padding: 8px; }
.price-preview { position: relative; width: 100%; overflow: hidden; touch-action: none; user-select: none; }
.price-preview img { display: block; width: 100%; height: auto; }
.price-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.price-actions button { color: #fff; background: #222; border: 1px solid #c9a45d80; }
.price-example { font-size: 14px; line-height: 1.4; }
.mosaic-item img { display: block; width: 100%; height: auto; }
.mosaic-item .photo-trigger { height: auto; }
.explore-more { display: block; width: 100%; min-height: 48px; margin-top: 1rem; border: 1px solid #c9a45d80; background: transparent; color: #f4f0e8; font-size: .875rem; }
[hidden] { display: none !important; }
.gallery-controls { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem env(safe-area-inset-bottom); }
.gallery-controls button { background: transparent; color: white; border: 0; min-width: 60px; min-height: 48px; font-size: 1.5rem; }
body .image-stage { height: calc(100% - 170px - env(safe-area-inset-bottom)); }
.selection-button, .trade-section [data-open-selection] { display: none; }
body .topbar .brand { left: 50%; transform: translate(-50%,-50%); }
/* Interactive editorial edition */
section[id] { scroll-margin-top: 4rem; }
.chapter-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%,30rem); z-index: 25; display: flex; background: #0b0b0bf5; border-top: 1px solid #c9a45d55; padding-bottom: env(safe-area-inset-bottom); }
.chapter-nav a { flex: 1; min-height: 48px; display: grid; place-items: center; font-size: 12px; color: #ddd; }
.chapter-nav a[aria-current] { color: #c9a45d; box-shadow: inset 0 2px #c9a45d; }
body footer { padding-bottom: 6rem; }
body .topbar .brand { left: 1rem; transform: translateY(-50%); }
body .hero-panel { transition: opacity .65s ease; }
.hero-carousel { touch-action: pan-y; }
body .product-image:has(img) { aspect-ratio: 3 / 4; }
body .product-image img, body .visual-slot.is-filled img { object-fit: contain; }
#halo .product-strip, #diamond-land .product-strip { display: none; }
.photo-trigger { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.photo-hint { margin: .65rem 0 0; font-size: 12px; opacity: .7; }
.reveal { animation: reveal-in .7s ease both; }
@keyframes reveal-in { from { opacity: .3; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.image-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: #080808; color: white; }
.image-dialog::backdrop { background: #080808; }
.image-stage { position:relative; height: calc(100% - 112px); overflow: auto; display: grid; place-items: center; }
.image-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.image-price-layer { position:absolute; z-index:2; pointer-events:none; }
.image-price-layer .pvp-label { pointer-events:none; }
.image-stage.is-zoomed { display: block; }
.image-stage.is-zoomed img { width: 180%; max-width: none; max-height: none; }
.close-image, .zoom-image { min-height: 48px; padding: 12px 22px; border: 0; background: #191919; color: #eee; font-size: 16px; }
.close-image { display: block; margin-left: auto; }
html:has(.image-dialog[open]) { overflow: hidden; }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { animation: none; } body .hero-panel { transition: none; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: #171717; font-family: Arial, Helvetica, sans-serif; }
main, footer { container-type:inline-size; width: min(100%, 30rem); margin-inline: auto; background: var(--ink); box-shadow: 0 0 5rem rgba(0,0,0,.35); }
main :where(h1,h2,h3,p,button,a), footer :where(span,small), .screen-editor :where(summary,p,label,button,a) { min-width:0; max-width:100%; overflow-wrap:break-word; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.topbar { position: fixed; z-index: 20; top: 0; left: 50%; width: min(100%, 30rem); height: 3.5rem; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(7,7,7,.88); backdrop-filter: blur(12px); }
.brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; }
.brand img { display: block; width: clamp(6.7rem, 25vw, 8.5rem); height: auto; }
.selection-button { margin-left: auto; border: 0; background: none; text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; cursor: pointer; }
.selection-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: .35rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }

.opening { position: relative; min-height: 100svh; overflow: hidden; padding-top: 3.5rem; background: #070707; }
.hero-carousel { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: calc(100svh - 12rem); overflow: hidden; background: #070707; }
.hero-carousel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 22%, transparent 84%, rgba(0,0,0,.18)); pointer-events: none; }
.hero-panel { position: absolute; inset: 0; height: 100%; margin: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .28s ease; }
.hero-panel.is-active { opacity: 1; visibility: visible; }
.hero-panel img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; image-rendering: auto; }
.hero-panel figcaption { position: absolute; z-index: 2; left: 1rem; bottom: .7rem; margin: 0; color: #fff; font-size: .67rem; letter-spacing: .16em; text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.opening-content { position: relative; z-index: 3; width: 100%; padding: .72rem 1rem .8rem; background: #070707; border-top: 1px solid rgba(201,164,93,.45); pointer-events: none; }
.opening-content a { pointer-events: auto; }
.opening-content .eyebrow { display: block; margin: 0 0 .35rem; font-size: .58rem; line-height: 1.2; letter-spacing: .11em; white-space: normal; text-wrap:balance; }
.eyebrow { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; line-height: 1.4; color: var(--gold); }
.opening h1, .section-heading h2, .collection-hero h2, .trade-section h2, .selection-dialog h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.opening h1 { position: relative; margin: 0; color: #fff; font-size: clamp(2rem, 8.7cqi, 2.6rem); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; white-space: normal; text-wrap:balance; }
.opening h1 em { color: transparent; -webkit-text-stroke: 1px var(--gold); font-weight: 400; }
.opening-copy { margin: .38rem 0 .62rem; color: rgba(255,255,255,.74); font-family: Georgia, serif; font-size: .86rem; }
.hero-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: .25rem 0 .55rem; background: rgba(255,255,255,.18); pointer-events: auto; }
.hero-tabs button { min-height: 2.1rem; padding: .42rem .15rem; border: 0; color: rgba(255,255,255,.62); background: #111; font-size: .61rem; letter-spacing: .07em; cursor: pointer; }
.hero-tabs button[aria-selected="true"] { color: var(--gold); background: #1b1812; box-shadow: inset 0 -2px var(--gold); }
.opening .discover { width: 100%; padding: .42rem 0 0; font-size: .66rem; }
.discover { display: flex; justify-content: space-between; align-items: center; width: min(100%, 23rem); padding: 1rem 0; border-top: 1px solid var(--line); text-transform: uppercase; letter-spacing: .12em; font-size: .77rem; }

.collection-index { padding: 6rem var(--pad); }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 2rem; }
.section-heading h2 { margin: 0; font-size: clamp(2.6rem, 10cqi, 4.5rem); text-wrap:balance; }
.collection-cards { display: grid; gap: 1px; background: #333; }
.collection-card { position: relative; min-height: 19rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; overflow: hidden; background: #101010; transition: transform .25s ease, filter .25s ease; }
.collection-card::before { content: ""; position: absolute; width: 15rem; aspect-ratio: 1; right: -4rem; top: -4rem; border-radius: 50%; border: 1px solid currentColor; opacity: .35; }
.collection-card:hover { transform: translateY(-4px); filter: brightness(1.15); }
.collection-number { position: absolute; left: 1.5rem; top: 1.5rem; color: var(--gold); font-size: .75rem; letter-spacing: .16em; }
.collection-name { position: relative; font-family: Georgia, serif; font-size: clamp(1.75rem, 7cqi, 2.2rem); line-height: .92; }
.collection-promise { position: relative; margin-top: 1rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; opacity: .7; }
.collection-card.armour { min-height: 0; aspect-ratio: 6 / 5; background-color: #090909; background-image: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.22) 48%, rgba(0,0,0,.04) 72%), url('armour-universe.jpg?v=11'); background-position: center; background-size: cover; }
.collection-card.armour::before { content: none; }
.collection-card.armour .collection-number,
.collection-card.armour .collection-name,
.collection-card.armour .collection-promise { z-index: 1; text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.collection-card.halo { min-height: 0; aspect-ratio: 6 / 5; color: var(--paper); background-color: #171109; background-image: linear-gradient(0deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.02) 72%), url('halo-universe.jpg?v=13'); background-position: center; background-size: cover; }
.collection-card.halo::before { content: none; }
.collection-card.halo .collection-number { color: var(--gold); }
.collection-card.halo .collection-number,
.collection-card.halo .collection-name,
.collection-card.halo .collection-promise,
.collection-card.diamond .collection-number,
.collection-card.diamond .collection-name,
.collection-card.diamond .collection-promise { z-index: 1; text-shadow: 0 2px 16px rgba(0,0,0,.92); }
.collection-card.diamond { min-height: 0; aspect-ratio: 6 / 5; background-color: #09070c; background-image: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.02) 72%), url('diamond-universe.jpg?v=13'); background-position: center; background-size: cover; }
.collection-card.diamond::before { content: none; }

.collection-section { padding: 6rem 0; overflow: hidden; }
.collection-hero { padding: 0 var(--pad); }
.collection-hero h2 { max-width:100%; margin: 0; font-size: clamp(4.5rem, 17cqi, 5.25rem); line-height: .78; letter-spacing: -.06em; overflow-wrap:normal; }
#armour-title { font-size: clamp(3.1rem, 12.5cqi, 3.8rem); }
#diamond-title { font-size: clamp(2.75rem, 11cqi, 3.4rem); line-height: .84; }
.manifesto { margin: 1.5rem 0 2.5rem; font-family: Georgia, serif; font-size: clamp(1.35rem, 5cqi, 2.25rem); line-height: 1.15; text-wrap:balance; }
.visual-slot { position: relative; min-height: min(72svh, 44rem); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; border: 1px solid rgba(255,255,255,.25); overflow: hidden; }
.visual-slot::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.14); }
.visual-slot::after { content: ""; position: absolute; width: 50%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; left: 25%; top: 20%; opacity: .3; }
.visual-slot span, .visual-slot small { position: relative; z-index: 1; }
.visual-slot span { font-size: .75rem; letter-spacing: .18em; }
.visual-slot small { margin-top: .55rem; opacity: .58; }
.visual-slot.is-filled { min-height: 0; aspect-ratio: 3 / 4; padding: 0; border: 0; background: #080808; }
.visual-slot.is-filled::before, .visual-slot.is-filled::after { content: none; }
.visual-slot.is-filled img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.product-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 24rem); gap: 1rem; overflow-x: auto; padding: 1rem var(--pad) 1.5rem; scroll-snap-type: x mandatory; }
.product-card { scroll-snap-align: start; padding: 1rem; color: var(--ink); background: var(--paper); }
.product-image { position: relative; aspect-ratio: 4/5; display: grid; place-items: end start; padding: 1rem; overflow: hidden; color: rgba(255,255,255,.65); background: #1b1b1b; }
.product-image::before, .product-image::after { content: ""; position: absolute; border: 1px solid currentColor; }
.product-image::before { width: 62%; aspect-ratio: 1; border-radius: 50%; left: 19%; top: 17%; }
.product-image::after { inset: 8%; opacity: .3; }
.product-image span { position: relative; z-index: 1; text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; }
.product-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-image.armour-product, .product-image.armour-look { padding: 0; background: #111; }
.product-image.armour-product::before, .product-image.armour-product::after,
.product-image.armour-look::before, .product-image.armour-look::after { content: none; }
.product-image.armour-product img { object-position: center; }
.product-image.armour-look img { object-position: center 42%; }
.product-image.halo-mark { color: #64491c; background: radial-gradient(circle at center, #f6e8b8, #b98a32); }
.product-image.diamond-mark { color: #cbb3ec; background: radial-gradient(circle at center, #463259, #110d16); }
.product-image.alt::before { width: 40%; left: 30%; top: 29%; transform: rotate(45deg); border-radius: 0; }
.product-type { margin: 1rem 0 .3rem; text-transform: uppercase; letter-spacing: .13em; font-size: .67rem; color: #6b665d; }
.product-card h3 { margin: 0 0 1.25rem; font-family: Georgia, serif; font-weight: 400; font-size: 1.4rem; }
.favorite { width: 100%; display: flex; justify-content: space-between; padding: .85rem 0; color: var(--ink); border: 0; border-top: 1px solid #bbb4a8; background: none; cursor: pointer; }
.favorite[aria-pressed="true"] { color: #74561e; }

.theme-armour { background: linear-gradient(180deg, #080808, #232323 55%, #090909); }
.theme-halo { color: #171109; background: linear-gradient(180deg, #d7b666, #f6e9c7 58%, #ae7f2a); }
.theme-halo .eyebrow { color: #5d4315; }
.theme-halo .visual-slot { border-color: rgba(23,17,9,.3); }
.theme-diamond { background: linear-gradient(180deg, #09070c, #352743 52%, #08070a); }

.trade-section { container-type:inline-size; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 6rem var(--pad); background: var(--paper); color: var(--ink); }
.trade-section h2 { max-width:100%; margin: 0; font-size: clamp(2.8rem, 15cqi, 4.1rem); line-height: .9; letter-spacing: -.05em; overflow-wrap:break-word; }
.trade-section > p:not(.eyebrow):not(.trade-note) { max-width: 34rem; font-size: 1.1rem; line-height: 1.6; }
.primary-action { width: min(100%, 30rem); display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding: 1.15rem 1.25rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; cursor: pointer; }
.trade-note { margin-top: 2rem; font-size: .72rem; letter-spacing: .08em; opacity: .55; }

footer { display: flex; flex-wrap:wrap; justify-content: space-between; align-items: end; gap: 1rem; padding: 3rem var(--pad); }
footer span { font-family: Georgia, serif; letter-spacing: .15em; }
footer small { opacity: .6; text-align: right; }

.selection-dialog { width: min(92vw, 38rem); max-height: 84svh; padding: 2rem; border: 1px solid #665a45; color: var(--paper); background: #101010; }
.selection-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(6px); }
.dialog-top { display: flex; justify-content: flex-end; }
.dialog-top button { border: 0; background: none; font-size: 2rem; cursor: pointer; }
.selection-dialog h2 { margin: 0 0 2rem; font-size: 2.5rem; }
.selection-list { display: grid; gap: .75rem; }
.selection-item, .selection-empty { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.selection-item { display: flex; justify-content: space-between; gap: 1rem; }
.selection-item button { border: 0; background: none; color: var(--gold); cursor: pointer; }
.selection-dialog .primary-action { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.share-status { min-height: 1.4rem; font-size: .8rem; color: var(--gold); }

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