/* shoppingexplained.com: the department-store directory. Site-locked skin, site 93.
   Written from a blank file: its own tokens (--em-*), its own classes, no script.
   The six colours below are the defaults; layout.php prints the owner's picks after this sheet. */

:root {
  --em-felt: #1F1D1C;
  --em-brass: #A87F3A;
  --em-green: #1E4A3A;
  --em-marble: #F5F1E8;
  --em-ink: #24201D;
  --em-red: #B4352B;
  --em-brass-hi: color-mix(in srgb, var(--em-brass) 52%, #fff);
  --em-brass-lo: color-mix(in srgb, var(--em-brass) 66%, #000);
  --em-letter: #FBF8F1;
  --em-cream: #FFFDF8;
  --em-manila: #F2E2BB;
  --em-line: #DCD3C2;
  --em-ink-soft: #5E564D;
  --em-wood: #3A2A18;
  --em-face-sign: Futura, "Futura PT", "Century Gothic", "URW Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --em-face-plaque: "Goudy Old Style", "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  --em-face-read: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --em-face-small: "Franklin Gothic Medium", "Franklin Gothic", "Libre Franklin", "Arial Narrow", Arial, sans-serif;
  --em-wide: 1180px;
}

/* ── the building ─────────────────────────────────────────────── */
.emporium *, .emporium *::before, .emporium *::after { box-sizing: border-box; }
.emporium {
  margin: 0;
  color: var(--em-ink);
  font: 1rem/1.6 var(--em-face-read);
  background-color: var(--em-marble);
  background-image:
    linear-gradient(118deg, transparent 0 38%, rgba(120, 100, 70, .05) 38.4% 38.7%, transparent 39.1%),
    linear-gradient(62deg, transparent 0 71%, rgba(120, 100, 70, .04) 71.3% 71.5%, transparent 71.9%);
  background-size: 900px 700px;
}
:where(.emporium) a { color: var(--em-green); }
.emporium img { max-width: 100%; height: auto; }
.skip-to-floor { position: absolute; left: -9999px; top: 8px; }
.skip-to-floor:focus { left: 12px; z-index: 20; background: var(--em-felt); color: var(--em-letter); padding: 8px 14px; border-radius: 4px; }

/* ── the canopy: stripes, shingle, lift buttons, valance ─────── */
.canopy { position: relative; background: var(--em-green); color: var(--em-letter); margin-bottom: 14px; }
.canopy-stripes { height: 12px; background: repeating-linear-gradient(90deg, var(--em-green) 0 26px, var(--em-letter) 26px 52px); border-bottom: 2px solid var(--em-brass); }
.canopy-row { max-width: var(--em-wide); margin: 0 auto; padding: 16px 20px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.shingle { display: inline-flex; align-items: center; gap: 12px; color: var(--em-letter); text-decoration: none; }
.shingle-bell, .shingle-logo { flex: none; border-radius: 50%; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.shingle-words { display: flex; flex-direction: column; line-height: 1.12; }
.shingle-name { font: 600 1.6rem/1.1 var(--em-face-plaque); letter-spacing: .03em; }
.shingle-strap { margin-top: 4px; font: .82rem var(--em-face-small); letter-spacing: .03em; color: var(--em-brass-hi); }
.shingle:hover .shingle-name { text-decoration: underline; text-decoration-color: var(--em-brass-hi); text-underline-offset: 4px; }

.desk-slip { display: flex; align-items: center; padding: 3px; background: var(--em-cream); border: 2px solid var(--em-brass); border-radius: 999px; }
.desk-slip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.desk-slip-field { width: 15rem; min-width: 0; border: 0; background: transparent; padding: 8px 12px; font: 1rem var(--em-face-read); color: var(--em-ink); }
.desk-slip-field:focus { outline: none; }
.desk-slip:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.desk-slip-ring { border: 0; border-radius: 999px; background: var(--em-felt); color: var(--em-letter); padding: 8px 16px; font: 600 .86rem var(--em-face-sign); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.desk-slip-ring:hover { background: var(--em-red); }

.lift-panel { max-width: var(--em-wide); margin: 0 auto; padding: 2px 20px 16px; }
.lift-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.lift-call a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(0, 0, 0, .18); color: var(--em-letter); text-decoration: none; font: 500 .9rem var(--em-face-sign); letter-spacing: .04em; }
.lift-call a:hover, .lift-call a:focus-visible { background: rgba(0, 0, 0, .32); }
.lift-call-lamp { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--em-brass-hi), var(--em-brass) 60%, var(--em-brass-lo)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); }
.lift-call-lamp::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.lift-call a:hover .lift-call-lamp::after, .lift-call a:focus-visible .lift-call-lamp::after { background: #FFD27A; box-shadow: 0 0 8px #FFC24D; }
.canopy-valance { position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; z-index: 2; background: radial-gradient(circle at 13px 0, var(--em-green) 12.5px, transparent 13px) 0 0 / 26px 14px repeat-x; }

/* ── the floor ────────────────────────────────────────────────── */
.salesfloor { max-width: var(--em-wide); margin: 0 auto; padding: 40px 20px 60px; }
.salesfloor--open { max-width: none; padding: 0; }

/* the lobby: letterboard, floor dial, information desk */
.lobby { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 28px; align-items: stretch; }
.letterboard {
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  padding: 36px 32px 32px; border: 12px solid var(--em-brass); border-radius: 4px; color: var(--em-letter);
  background-color: var(--em-felt);
  background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255, 255, 255, .055) 9px 10px);
  box-shadow: inset 0 0 0 2px var(--em-brass-lo), 0 12px 26px rgba(0, 0, 0, .18);
}
.letterboard-hello { margin: 0 0 14px; font: 500 .92rem var(--em-face-sign); letter-spacing: .42em; text-transform: uppercase; opacity: .78; }
.letterboard-h1 { margin: 0; font-family: var(--em-face-sign); font-weight: 500; font-size: clamp(2.2rem, 6vw, 4.3rem); line-height: 1.14; letter-spacing: .12em; text-transform: uppercase; color: var(--em-letter); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.letterboard-word { display: block; }
.letterboard-lead { max-width: 34rem; margin: 22px auto 0; font: .95rem/1.7 var(--em-face-sign); letter-spacing: .07em; text-transform: uppercase; opacity: .9; }

.lobby-side { display: flex; flex-direction: column; gap: 18px; }
.floor-dial { padding: 18px 18px 16px; border-radius: 130px 130px 10px 10px; background: var(--em-felt); text-align: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
.floor-dial-face { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.floor-dial-mark { font: 600 15px var(--em-face-sign); fill: var(--em-letter); }
.floor-dial-plate { display: inline-flex; flex-direction: column; align-items: center; margin: 6px auto 0; padding: 8px 22px; border-radius: 6px; color: var(--em-felt); background: linear-gradient(180deg, var(--em-brass-hi), var(--em-brass) 60%, var(--em-brass-lo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.floor-dial-count { font: 600 1.75rem/1 var(--em-face-plaque); letter-spacing: .03em; }
.floor-dial-words { margin-top: 4px; font: .76rem var(--em-face-small); letter-spacing: .14em; text-transform: uppercase; }

.info-desk { padding: 16px 16px 18px; background: var(--em-cream); border: 1px solid var(--em-line); border-top: 6px solid var(--em-green); border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .06); }
.info-desk-label { display: block; margin: 0 0 10px; font: 600 1.08rem var(--em-face-plaque); color: var(--em-green); }
.info-desk-row { display: flex; gap: 8px; }
.info-desk-input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--em-line); border-radius: 6px; background: #fff; color: var(--em-ink); font: 1rem var(--em-face-read); }
.info-desk-input:focus { outline: 2px solid var(--em-brass); outline-offset: 1px; }
.info-desk-bell { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 10px; border: 0; border-radius: 6px; background: var(--em-felt); color: var(--em-letter); font: 600 .92rem var(--em-face-sign); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.info-desk-bell:hover { background: var(--em-green); }
.lobby-shortcuts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lobby-shortcut { display: inline-block; padding: 7px 12px; background: var(--em-cream); border: 1px solid var(--em-line); border-left: 4px solid var(--em-brass); border-radius: 4px; color: var(--em-ink); text-decoration: none; font: .92rem var(--em-face-small); }
.lobby-shortcut:hover { border-left-color: var(--em-green); color: var(--em-green); }

/* a storey: the brass plaque over each part of the home */
.storey { margin-top: 64px; scroll-margin-top: 16px; }
.storey-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 22px; }
.storey-title,
.emporium .new-arrivals .section-head .display {
  position: relative; display: inline-block; margin: 0; padding: 8px 26px;
  font: 600 clamp(1.3rem, 2.6vw, 1.7rem)/1.2 var(--em-face-plaque); color: var(--em-felt);
  background: linear-gradient(180deg, var(--em-brass-hi), var(--em-brass) 62%, var(--em-brass-lo)); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .2);
}
.storey-title::before, .storey-title::after,
.emporium .new-arrivals .section-head .display::before, .emporium .new-arrivals .section-head .display::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--em-brass-lo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.storey-title::before, .emporium .new-arrivals .section-head .display::before { left: 8px; }
.storey-title::after, .emporium .new-arrivals .section-head .display::after { right: 8px; }
.storey-lead { flex: 1 1 260px; margin: 0; color: var(--em-ink-soft); font: 1rem/1.5 var(--em-face-read); }

/* the directory on the felt board */
.felt-directory {
  columns: 2 360px; column-gap: 46px; padding: 28px 30px 8px; border: 10px solid var(--em-wood); border-radius: 4px; color: var(--em-letter);
  background-color: var(--em-felt); background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 255, 255, .045) 13px 14px);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), 0 12px 26px rgba(0, 0, 0, .16);
}
.felt-floor { break-inside: avoid; margin: 0 0 26px; }
.felt-floor-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .18); font: 500 1.02rem var(--em-face-sign); letter-spacing: .16em; text-transform: uppercase; color: var(--em-letter); }
.felt-floor-no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--em-brass-hi), var(--em-brass) 60%, var(--em-brass-lo)); color: var(--em-felt); font: 700 1rem var(--em-face-sign); letter-spacing: 0; }
.felt-floor-n { margin-left: auto; font: .8rem var(--em-face-small); letter-spacing: .08em; color: var(--em-brass-hi); }
.felt-dept { margin: 0 0 13px; }
.felt-dept-line { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.felt-dept-name { color: var(--em-letter); text-decoration: none; font: 500 .98rem var(--em-face-sign); letter-spacing: .1em; text-transform: uppercase; }
.felt-dept-name:hover { color: var(--em-brass-hi); }
.felt-dept-dots { flex: 1; min-width: 18px; border-bottom: 2px dotted rgba(255, 255, 255, .3); transform: translateY(-4px); }
.felt-dept-n { white-space: nowrap; font: .8rem var(--em-face-small); letter-spacing: .04em; color: var(--em-brass-hi); }
.felt-counters { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.felt-counter { font: .86rem var(--em-face-small); }
.felt-counter-link { color: rgba(251, 248, 241, .84); text-decoration: none; }
.felt-counter-link:hover { color: var(--em-brass-hi); text-decoration: underline; }
.felt-counter-parts { display: inline-flex; gap: 3px; margin-left: 5px; }
.felt-counter-parts a { min-width: 18px; padding: 0 4px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; color: rgba(251, 248, 241, .75); text-align: center; text-decoration: none; font-size: .74rem; line-height: 1.5; }
.felt-counter-parts a:hover { border-color: var(--em-brass-hi); color: var(--em-brass-hi); }
.felt-more { margin-top: 5px; }
.felt-more summary { list-style: none; cursor: pointer; font: .8rem var(--em-face-small); letter-spacing: .06em; color: var(--em-brass-hi); }
.felt-more summary::-webkit-details-marker { display: none; }
.felt-more summary::before { content: "\25B8\00A0"; }
.felt-more[open] summary::before { content: "\25BE\00A0"; }

/* the shops and services: shopfronts under their own awnings */
.arcade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 22px; }
.shopfront { --em-tint: var(--em-green); display: flex; flex-direction: column; background: var(--em-cream); border: 1px solid var(--em-line); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .06); }
.shopfront--brass { --em-tint: var(--em-brass); }
.shopfront--red { --em-tint: var(--em-red); }
.shopfront--felt { --em-tint: var(--em-felt); }
.shopfront-awning { position: relative; height: 32px; margin: 0 -6px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, var(--em-tint) 0 22px, var(--em-letter) 22px 44px); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .12)); }
.shopfront-awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 11px 0, var(--em-tint) 10.5px, transparent 11px) 0 0 / 44px 10px repeat-x, radial-gradient(circle at 33px 0, var(--em-letter) 10.5px, transparent 11px) 0 0 / 44px 10px repeat-x; }
.shopfront-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px 18px 18px; }
.shopfront-sign { margin: 0; font: 600 1.2rem/1.25 var(--em-face-plaque); }
.shopfront-sign a { color: var(--em-felt); text-decoration: none; }
.shopfront-sign a:hover { color: var(--em-tint); text-decoration: underline; }
.shopfront-n { margin: 0; font: .78rem var(--em-face-small); letter-spacing: .12em; text-transform: uppercase; color: var(--em-ink-soft); }
.shopfront-wares { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.shopfront-ware { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 8px; background: var(--em-marble); border: 1px solid var(--em-line); border-radius: 4px; font: .86rem var(--em-face-small); }
.shopfront-ware-link { color: var(--em-ink); text-decoration: none; }
.shopfront-ware-link:hover { color: var(--em-tint); text-decoration: underline; }
.shopfront-ware-parts { display: inline-flex; gap: 2px; }
.shopfront-ware-parts a { padding: 0 4px; background: var(--em-cream); border: 1px solid var(--em-line); border-radius: 3px; color: var(--em-ink-soft); text-decoration: none; font-size: .72rem; }
.shopfront-ware-parts a:hover { border-color: var(--em-tint); color: var(--em-ink); }
.shopfront-more { margin-top: 2px; }
.shopfront-more summary { cursor: pointer; font: .82rem var(--em-face-small); color: var(--em-green); }
.shopfront-more .shopfront-wares { margin-top: 8px; }
.kiosk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; }
.kiosk-row-label { margin-right: 4px; font: 600 .84rem var(--em-face-small); letter-spacing: .12em; text-transform: uppercase; color: var(--em-ink-soft); }
.kiosk { display: inline-block; padding: 6px 13px; border-radius: 999px; background: var(--em-felt); color: var(--em-letter); text-decoration: none; font: .88rem var(--em-face-sign); letter-spacing: .04em; }
.kiosk:hover { background: var(--em-green); }
.kiosk-n { margin-left: 2px; font-size: .78rem; color: var(--em-brass-hi); }

/* ask it your way: hanging signs */
.wayfinder { list-style: none; margin: 0; padding: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 38px 22px; }
.wayfinder-sign { position: relative; padding: 16px 16px 14px; background: var(--em-green); color: var(--em-letter); border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.wayfinder-sign::before, .wayfinder-sign::after { content: ""; position: absolute; top: -20px; width: 2px; height: 20px; background: #85817A; }
.wayfinder-sign::before { left: 26px; }
.wayfinder-sign::after { right: 26px; }
.wayfinder-main { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; color: inherit; text-decoration: none; }
.wayfinder-arrow { grid-row: span 3; padding-top: 2px; font: 700 1.6rem/1 var(--em-face-sign); color: var(--em-brass-hi); }
.wayfinder-shape { font: 600 1.14rem var(--em-face-sign); letter-spacing: .04em; }
.wayfinder-note { font: .9rem/1.45 var(--em-face-read); opacity: .86; }
.wayfinder-n { font: .76rem var(--em-face-small); letter-spacing: .1em; text-transform: uppercase; color: var(--em-brass-hi); }
.wayfinder-main:hover .wayfinder-shape { text-decoration: underline; text-underline-offset: 3px; }
.wayfinder-parts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); }
.wayfinder-parts a { padding: 0 6px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 3px; color: var(--em-letter); text-decoration: none; font: .78rem var(--em-face-small); }
.wayfinder-parts a:hover { border-color: var(--em-brass-hi); color: var(--em-brass-hi); }

/* asked most: the take-a-number roll */
.queue-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.queue-display { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 8px 16px; border-radius: 8px; background: var(--em-felt); color: var(--em-letter); box-shadow: inset 0 0 0 3px #3A3633; }
.queue-display-label { font: .76rem var(--em-face-small); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.queue-display-no { font: 700 1.8rem/1 var(--em-face-sign); letter-spacing: .1em; color: #FF6A4D; text-shadow: 0 0 8px rgba(255, 90, 60, .6); font-variant-numeric: tabular-nums; }
.queue-roll { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.queue-stub { display: flex; align-items: stretch; overflow: hidden; background: var(--em-cream); border: 1px solid var(--em-line); border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .05); }
.queue-stub-no { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 64px; background: var(--em-red); color: #fff; font: 700 1.4rem var(--em-face-sign); letter-spacing: .04em; border-right: 2px dashed rgba(255, 255, 255, .6); }
.queue-stub-no::before, .queue-stub-no::after { content: ""; position: absolute; right: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--em-marble); }
.queue-stub-no::before { top: -6px; }
.queue-stub-no::after { bottom: -6px; }
.queue-stub-q { flex: 1; display: flex; align-items: center; padding: 12px 14px; color: var(--em-ink); text-decoration: none; font: 1rem/1.4 var(--em-face-read); }
.queue-stub-q:hover { color: var(--em-red); text-decoration: underline; }

/* words on the label: swing tags */
.swing-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 14px; }
.swing-tags li { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16)); }
.swing-tag { --em-tilt: -2deg; position: relative; display: inline-flex; align-items: center; padding: 10px 18px 10px 32px; background: var(--em-manila); color: var(--em-ink); text-decoration: none; font: 600 .95rem var(--em-face-sign); letter-spacing: .03em; clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); transform: rotate(var(--em-tilt)); }
.swing-tags li:nth-child(3n) .swing-tag { --em-tilt: 1.5deg; }
.swing-tags li:nth-child(3n+2) .swing-tag { --em-tilt: -.5deg; }
.swing-tag:hover { background: color-mix(in srgb, var(--em-manila) 80%, var(--em-brass)); }
.swing-tag-eyelet { position: absolute; left: 15px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--em-marble); box-shadow: inset 0 0 0 2px var(--em-brass); }
.swing-tags-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; font: .95rem var(--em-face-small); }
.swing-tags-all-link { font: 600 1rem var(--em-face-sign); }
.swing-tags-all-n { color: var(--em-ink-soft); }
.swing-tags-all-parts { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.swing-tags-all-parts a { padding: 0 6px; background: var(--em-cream); border: 1px solid var(--em-line); border-radius: 3px; color: var(--em-ink-soft); text-decoration: none; font-size: .8rem; }
.swing-tags-all-parts a:hover { border-color: var(--em-green); color: var(--em-green); }

/* new arrivals: the engine's newest pages */
.new-arrivals { margin-top: 64px; }
.emporium .new-arrivals .section { padding: 0; }
.emporium .new-arrivals .section-head { margin-bottom: 22px; }

/* ── the engine's own markup, dressed ─────────────────────────── */
.emporium .display { font-family: var(--em-face-plaque); color: var(--em-felt); }
.emporium .lead { font: 1.1rem/1.6 var(--em-face-read); color: var(--em-ink-soft); }
.emporium .breadcrumb { margin: 0 0 18px; font: .86rem var(--em-face-small); color: var(--em-ink-soft); }
.emporium .breadcrumb a { color: var(--em-green); text-decoration: none; }
.emporium .breadcrumb a:hover { text-decoration: underline; }
.emporium .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.emporium .post-card { display: flex; flex-direction: column; overflow: hidden; background: var(--em-cream); border: 1px solid var(--em-line); border-bottom: 4px solid var(--em-brass); border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .05); }
.emporium .post-card-media { display: block; }
.emporium .post-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.emporium .post-card-body { padding: 14px 16px 16px; }
.emporium .post-card-title { margin: 0 0 6px; font: 600 1.06rem/1.35 var(--em-face-plaque); }
.emporium .post-card-title a { color: var(--em-felt); text-decoration: none; }
.emporium .post-card-title a:hover { color: var(--em-green); text-decoration: underline; }
.emporium .post-card-excerpt { margin: 0; font: .93rem/1.55 var(--em-face-read); color: var(--em-ink-soft); }
.emporium .post-card-meta { font: .8rem var(--em-face-small); color: var(--em-ink-soft); }
.emporium .post-cat, .emporium .eyebrow, .emporium .card-tag, .emporium .pl-eyebrow { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 2px; background: var(--em-brass-hi); color: var(--em-felt); font: 600 .7rem var(--em-face-small); letter-spacing: .14em; text-transform: uppercase; }
.emporium .section-head .display, .emporium .topic-index-head .display { font-size: 1.6rem; }
.emporium .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 34px 0 0; }
.emporium .pagination a, .emporium .pagination span { min-width: 38px; padding: 7px 11px; background: var(--em-cream); border: 1px solid var(--em-line); border-radius: 4px; color: var(--em-ink); text-align: center; text-decoration: none; font: .9rem var(--em-face-small); }
.emporium .pagination a:hover { border-color: var(--em-green); color: var(--em-green); }
.emporium .pagination [aria-current] { background: var(--em-felt); border-color: var(--em-felt); color: var(--em-letter); }
.emporium .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.emporium .card { display: block; padding: 16px; background: var(--em-cream); border: 1px solid var(--em-line); border-left: 4px solid var(--em-green); border-radius: 6px; color: var(--em-ink); text-decoration: none; }
.emporium .card h3 { margin: 0; font: 600 1.05rem/1.35 var(--em-face-plaque); color: var(--em-felt); }
.emporium .card:hover h3 { color: var(--em-green); }
.emporium .btn { display: inline-block; padding: 10px 18px; border-radius: 4px; text-decoration: none; font: 600 .9rem var(--em-face-sign); letter-spacing: .05em; }
.emporium a.btn--accent, .emporium .btn--accent { background: var(--em-green); border: 0; color: var(--em-letter); }
.emporium a.btn--accent:hover { background: var(--em-felt); }
.emporium a.btn--ghost, .emporium .btn--ghost { background: transparent; border: 1px solid var(--em-green); color: var(--em-green); }
.emporium a.btn--ghost:hover { background: var(--em-green); color: var(--em-letter); }
.emporium .btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.emporium .blk-more { margin-top: 22px; text-align: center; }

/* the counter: every page that is not the lobby */
.counter-sheet { position: relative; padding: clamp(20px, 4vw, 46px); background: var(--em-cream); border: 1px solid var(--em-line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .06); }
.counter-sheet::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 6px; border-radius: 8px 8px 0 0; background: repeating-linear-gradient(90deg, var(--em-green) 0 26px, var(--em-brass) 26px 52px); }
.counter-sheet > .display, .counter-sheet h1.display { margin-top: 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.emporium .section { padding-top: 0; }
.emporium .article-hero { margin: 0 0 24px; }
.emporium .article-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.emporium .article-hero-grid.solo { grid-template-columns: 1fr; }
.emporium .article-hero-copy h1, .emporium .article-main > h1 { margin: 0 0 12px; font: 600 clamp(1.7rem, 3.4vw, 2.5rem)/1.2 var(--em-face-plaque); color: var(--em-felt); }
.emporium .post-meta { font: .85rem var(--em-face-small); color: var(--em-ink-soft); }
.emporium .article-lead { font: 1.12rem/1.6 var(--em-face-read); color: var(--em-ink-soft); }
.emporium .article-hero-media img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 6px var(--em-marble), 0 0 0 7px var(--em-line); }
.emporium .article-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.emporium .article-shell.solo { grid-template-columns: 1fr; }
.emporium .article-main { min-width: 0; }
.emporium .toc { position: sticky; top: 16px; padding: 14px 16px; background: var(--em-marble); border: 1px solid var(--em-line); border-radius: 6px; font: .9rem/1.45 var(--em-face-small); }
.emporium .toc-h { margin: 0 0 8px; font: 600 .76rem var(--em-face-small); letter-spacing: .14em; text-transform: uppercase; color: var(--em-felt); }
.emporium .toc ol { margin: 0; padding-left: 18px; }
.emporium .toc li { margin: 5px 0; }
.emporium .toc a { color: var(--em-ink); text-decoration: none; }
.emporium .toc a:hover { color: var(--em-green); text-decoration: underline; }
.emporium .article-body { font: 1.08rem/1.75 var(--em-face-read); color: var(--em-ink); }
.emporium .article-body > :first-child { margin-top: 0; }
.emporium .article-body h2 { margin: 2em 0 .6em; padding-bottom: 8px; border-bottom: 2px solid var(--em-brass); font: 600 1.55rem/1.3 var(--em-face-plaque); color: var(--em-felt); }
.emporium .article-body h3 { margin: 1.6em 0 .5em; font: 600 1.18rem/1.35 var(--em-face-sign); letter-spacing: .02em; color: var(--em-green); }
.emporium .article-body p { margin: 0 0 1.05em; }
.emporium .article-body ul, .emporium .article-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.emporium .article-body li { margin: .35em 0; }
.emporium .article-body li::marker { color: var(--em-brass); }
.emporium .article-body a { color: var(--em-green); text-decoration-color: color-mix(in srgb, var(--em-green) 40%, transparent); text-underline-offset: 2px; }
.emporium .article-body blockquote { margin: 1.6em 0; padding: 18px 22px; border-left: 6px solid var(--em-brass); border-radius: 4px; background: var(--em-felt); color: var(--em-letter); font: 500 1.12rem/1.55 var(--em-face-sign); letter-spacing: .03em; }
.emporium .article-body blockquote p { margin: 0; }
.emporium .article-body .table-wrap { margin: 1.4em 0; overflow-x: auto; }
.emporium .article-body table { width: 100%; border-collapse: collapse; background: #fff; font: .95rem/1.5 var(--em-face-small); }
.emporium .article-body th { padding: 9px 12px; background: var(--em-green); color: var(--em-letter); text-align: left; font-weight: 600; }
.emporium .article-body td { padding: 9px 12px; border-bottom: 1px solid var(--em-line); vertical-align: top; }
.emporium .article-body tr:nth-child(even) td { background: var(--em-marble); }
.emporium .article-body .key-takeaways { margin: 1.4em 0; padding: 16px 20px 16px 40px; background: var(--em-marble); border: 1px solid var(--em-line); border-left: 6px solid var(--em-green); border-radius: 6px; }
.emporium .article-body .key-takeaways h2, .emporium .article-body .key-takeaways h3 { margin: 0 0 8px; padding: 0; border: 0; font: 600 .8rem var(--em-face-small); letter-spacing: .14em; text-transform: uppercase; color: var(--em-green); }
.emporium .article-body .key-takeaways li::marker { color: var(--em-green); }
.emporium .article-body .pro-tip { position: relative; margin: 1.4em 0; padding: 14px 16px 14px 56px; background: #FFF6E2; border: 1px dashed var(--em-brass); border-radius: 6px; }
.emporium .article-body .pro-tip::before { content: "TIP"; position: absolute; left: 13px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--em-brass); color: var(--em-felt); font: 700 .62rem/30px var(--em-face-sign); letter-spacing: .06em; text-align: center; }
.emporium .article-body .pro-tip p:last-child { margin-bottom: 0; }
.emporium .related-inline-link, .emporium .related-inline { font-family: var(--em-face-small); }
.emporium .inline-cta a:not(.btn) { color: var(--em-green); }
.emporium .faq { margin-top: 2.4em; }
.emporium .faq > h2, .emporium .post-links > h2 { margin: 0 0 14px; font: 600 1.45rem/1.3 var(--em-face-plaque); color: var(--em-felt); }
.emporium .faq-list { display: flex; flex-direction: column; gap: 8px; }
.emporium .faq-item { background: var(--em-marble); border: 1px solid var(--em-line); border-radius: 6px; }
.emporium .faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 14px 48px 14px 16px; font: 600 1.02rem/1.4 var(--em-face-plaque); color: var(--em-felt); }
.emporium .faq-item summary::-webkit-details-marker { display: none; }
.emporium .faq-item summary::after { content: "+"; position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--em-brass); color: var(--em-felt); font: 700 1rem/24px var(--em-face-sign); text-align: center; }
.emporium .faq-item[open] summary::after { content: "\2013"; }
.emporium .faq-a { padding: 0 16px 14px; font: 1rem/1.65 var(--em-face-read); }
.emporium .faq-a p { margin: 0 0 .6em; }
.emporium .post-links { margin-top: 2.4em; }
.emporium .blk-notfound { padding: 30px 0; text-align: center; }
.emporium .blk-notfound .display { font-size: 2rem; }
.emporium .blk-notfound .btn-row { justify-content: center; }

/* the reminder at the end of every answer */
.policy-card { display: flex; align-items: flex-start; gap: 14px; margin: 36px 0 0; padding: 16px 18px; border-radius: 8px; background: var(--em-felt); color: var(--em-letter); font: .95rem/1.55 var(--em-face-read); }
.policy-card p { margin: 0; }
.policy-card-bell { flex: none; border-radius: 50%; }

/* ── the store front ──────────────────────────────────────────── */
.store-front { margin-top: 24px; border-top: 6px solid var(--em-brass); color: var(--em-letter); background-color: var(--em-felt); background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 255, 255, .035) 13px 14px); }
.store-front-grid { max-width: var(--em-wide); margin: 0 auto; padding: 42px 20px 22px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr); gap: 28px 36px; }
.store-front-name { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 1.25rem var(--em-face-plaque); color: var(--em-letter); }
.store-front-bell { flex: none; border-radius: 50%; }
.store-front-about p { margin: 0 0 10px; font: .95rem/1.6 var(--em-face-read); color: rgba(251, 248, 241, .86); }
.store-front-about .store-front-name { color: var(--em-letter); font: 600 1.25rem var(--em-face-plaque); }
.store-front-about .store-front-independent { padding-left: 10px; border-left: 3px solid var(--em-brass); font: .84rem/1.55 var(--em-face-small); color: rgba(251, 248, 241, .74); }
.store-front-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font: .95rem var(--em-face-sign); letter-spacing: .04em; }
.store-front-links a { color: var(--em-letter); text-decoration: none; }
.store-front-links a:hover { color: var(--em-brass-hi); text-decoration: underline; }
.store-hours { align-self: start; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 16px; border-radius: 6px; color: var(--em-felt); background: linear-gradient(180deg, var(--em-brass-hi), var(--em-brass) 60%, var(--em-brass-lo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.store-hours-label { font: 700 .72rem var(--em-face-small); letter-spacing: .18em; text-transform: uppercase; }
.store-hours-text { font: 600 1.05rem/1.35 var(--em-face-plaque); }
.store-front-fine { font: .8rem/1.5 var(--em-face-small); color: rgba(251, 248, 241, .62); }
.store-front-fine a { color: var(--em-brass-hi); }
.store-front-copy { max-width: var(--em-wide); margin: 0 auto; padding: 0 20px 26px; }

/* ── narrow screens ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .lobby { grid-template-columns: 1fr; }
  .store-front-grid { grid-template-columns: 1fr; }
  .emporium .article-shell, .emporium .article-hero-grid { grid-template-columns: 1fr; }
  .emporium .toc { position: static; }
}
@media (max-width: 640px) {
  .canopy-row { padding: 12px 16px 8px; }
  .shingle-name { font-size: 1.3rem; }
  .desk-slip { width: 100%; }
  .desk-slip-field { flex: 1; width: auto; }
  .lift-panel { padding: 2px 16px 14px; }
  .lift-panel-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .lift-panel-list::-webkit-scrollbar { display: none; }
  .lift-call { flex: none; }
  .salesfloor { padding: 28px 16px 44px; }
  .letterboard { padding: 26px 16px 22px; border-width: 8px; }
  .letterboard-hello { letter-spacing: .3em; }
  .letterboard-h1 { letter-spacing: .08em; }
  .felt-directory { padding: 20px 16px 2px; border-width: 6px; }
  .storey { margin-top: 48px; }
  .queue-roll { grid-template-columns: 1fr; }
  .store-front-grid { padding: 34px 16px 18px; }
  .store-front-copy { padding: 0 16px 22px; }
}