/* Hybrid tools page: C's atlas on top (sg-), then A's hanging racks (fat-) as you scroll. */
.sg-wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--sg-gutter); }
.sg-atlas-sec { padding: 26px 0 30px; }
.sg-atlas-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.sg-atlas-h .sg-h1 { margin: 4px 0 6px; font-size: clamp(34px, 4.4vw, 60px); }
.sg-atlas-h .sg-lede { margin: 0; }
.sg-halls { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; border-radius: 999px; border: 1px solid var(--gold-faint); background: rgba(12,10,8,.6); }
.sg-halls button { border: 0; background: none; color: var(--cream-dim); font: 600 13px/1 var(--font-heading); letter-spacing: .08em; padding: 9px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.sg-halls button.on { background: var(--btn-primary); color: var(--btn-primary-text); }
.sg-halls button:not(.on):hover { color: var(--cream); background: rgba(212,175,55,.1); }

.sg-atlas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: stretch; }
.sg-map { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--gold-hair); box-shadow: 0 30px 60px rgba(0,0,0,.6); background: #1a1410; }
.sg-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(12,10,8,.55) 100%); }
.sg-map-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.sg-map-route path { fill: none; stroke: #8a1c22; stroke-width: .35; stroke-dasharray: .9 .9; stroke-linecap: round; filter: drop-shadow(0 0 .3px rgba(0,0,0,.6)); }
.sg-pin { position: absolute; z-index: 2; transform: translate(-50%, -21px); display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; transition: opacity .3s, filter .3s; }
.sg-pin.up { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 21px)); }
.sg-pin-m { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: #3a2508; background: var(--sg-wax-gold); box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 0 0 3px rgba(90,60,10,.35), 0 0 0 3px rgba(12,10,8,.65); transition: transform .3s var(--ease-spring), box-shadow .3s; }
.sg-pin-l { padding: 4px 8px; border-radius: 6px; background: rgba(12,10,8,.82); border: 1px solid var(--gold-faint); font: 700 11px/1.1 var(--font-heading); letter-spacing: .04em; color: var(--cream); white-space: nowrap; text-align: center; }
.sg-pin-l small { display: block; font: italic 11px/1.1 var(--font-lore); color: var(--cream-dim); letter-spacing: 0; }
.sg-pin:hover .sg-pin-m, .sg-pin:focus-visible .sg-pin-m { transform: scale(1.14) rotate(-6deg); }
.sg-pin.on .sg-pin-m { background: var(--sg-wax); color: #ffe6b8; box-shadow: 0 6px 14px rgba(0,0,0,.6), 0 0 0 3px rgba(12,10,8,.65), 0 0 26px rgba(196,58,58,.8); transform: scale(1.18); }
.sg-pin.on .sg-pin-l { border-color: var(--gold); color: var(--gold-bright); }
.sg-pin.dim { opacity: .28; filter: grayscale(.8); }
.sg-map-token { position: absolute; z-index: 3; width: 34px; height: 34px; margin: -30px 0 0 -50px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #3a2f22, #15110d); border: 2px solid var(--gold-bright); box-shadow: 0 0 0 3px rgba(12,10,8,.7), 0 0 18px rgba(243,212,122,.7); pointer-events: none; }
.sg-map-token img { width: 22px; height: 22px; object-fit: contain; }
.sg-map-hint { position: absolute; left: 14px; bottom: 12px; z-index: 2; margin: 0; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(12,10,8,.75); border: 1px solid var(--gold-faint); font: italic 14px/1 var(--font-lore); color: var(--cream-dim); }

.sg-place { border-radius: 16px; border: 1px solid var(--gold-hair); background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(10px); min-height: 0; }
.sg-place .sg-frame { padding: 6px; }
.sg-place .sg-frame-in { aspect-ratio: 16 / 10; }
.sg-place-k { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sg-place h2 { margin: 0; font: 700 26px/1.1 var(--font-display); color: var(--gold); letter-spacing: .02em; }
.sg-place .sg-place-loc { font: italic 16px/1.2 var(--font-lore); color: var(--cream-dim); margin-top: -6px; }
.sg-place p.sg-place-line { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--cream-dim); }
.sg-place-limits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sg-place-limits div { border-radius: 10px; border: 1px solid var(--gold-faint); padding: 8px 10px; background: rgba(0,0,0,.25); }
.sg-place-limits small { display: block; font: 600 10px/1 var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 5px; }
.sg-place-limits b { font: 600 13px/1.3 var(--font-body); color: var(--cream); }
.sg-place .btn { margin-top: auto; }
.sg-place.swap > * { animation: rise .4s var(--ease-out) both; }
.sg-place.swap > *:nth-child(2) { animation-delay: .04s; } .sg-place.swap > *:nth-child(3) { animation-delay: .08s; } .sg-place.swap > *:nth-child(4) { animation-delay: .12s; }

@media (max-width: 1100px) { .sg-atlas { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .sg-pin-l { display: none; }
  .sg-pin-m { width: 28px; height: 28px; font-size: 14px; }
  .sg-pin, .sg-pin.up { transform: translate(-50%, -14px); }
  .sg-map-token { width: 24px; height: 24px; margin: -40px 0 0 -12px; }
  .sg-map-token img { width: 16px; height: 16px; }
  .sg-map-hint { display: none; }
  .sg-halls { border-radius: 14px; }
}

/* ─── A's armoury racks (copied from a-tools.css) ─── */
.fat-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fat-jump a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; border: 1px solid var(--gold-hair); background: rgba(12,10,8,.7); color: var(--cream); font: 600 14px/1 var(--font-heading); letter-spacing: .06em; transition: transform .2s var(--ease-spring), border-color .2s, box-shadow .2s; }
.fat-jump a:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 20px rgba(212,175,55,.2); }
.fat-jump iconify-icon { color: var(--gold); font-size: 18px; }
.fat-jump em { font-style: normal; font: 700 11px/1 var(--font-body); color: var(--cream-faint); }

.fat-racks { display: grid; gap: 40px; padding-bottom: 40px; overflow-x: clip; }
.fat-rack { position: relative; padding: 34px 0 10px; scroll-margin-top: 90px; }
.fat-rack-head { display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: center; margin-bottom: 26px; }
.fat-rack-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; color: var(--gold-bright); background: radial-gradient(circle at 50% 30%, #3a3026, #15110e); border: 1px solid var(--gold-hair); box-shadow: 0 0 24px rgba(255,122,47,.15); }
.fat-rack-h { margin: 6px 0 0; font: 700 32px/1 var(--font-display); color: var(--gold); }
.fat-rack-head p { margin: 0; justify-self: end; max-width: 420px; text-align: right; font: italic 18px/1.4 var(--font-lore); color: var(--cream-dim); }
.fat-rail { height: 16px; border-radius: 8px; margin: 0 -8px; position: relative; z-index: 2;
  background: linear-gradient(180deg, #5a4c3c, #2a221b 45%, #120f0c); box-shadow: inset 0 1px 0 rgba(255,235,200,.2), 0 8px 18px rgba(0,0,0,.6);
  background-image: radial-gradient(circle, #c9a85e 0 2px, #5c4a2c 3px, transparent 4px), linear-gradient(180deg, #5a4c3c, #2a221b 45%, #120f0c); background-size: 90px 16px, auto; background-position: 22px 0, 0 0; }
.fat-hooks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 0 14px; }
.fat-item { position: relative; display: block; text-decoration: none; color: inherit; padding-top: 34px; }
.fat-chain { position: absolute; top: -4px; left: 50%; width: 12px; height: 40px; margin-left: -6px; z-index: 1;
  background: repeating-linear-gradient(180deg, transparent 0 3px, #8a7550 3px 5px, #3a2f22 5px 9px, transparent 9px 10px); border-left: 2px solid #6b5a3e; border-right: 2px solid #3a2f22; border-radius: 6px; opacity: .9; }
.fat-card { position: relative; display: block; border-radius: 14px; overflow: hidden; transform-origin: 50% -34px; background: linear-gradient(180deg, #241f1a, #13100d); border: 1px solid rgba(212,175,55,.26);
  box-shadow: inset 0 1px 0 rgba(255,235,200,.08), 0 22px 40px rgba(0,0,0,.55); transition: border-color .25s, box-shadow .25s; }
.fat-item:hover .fat-card { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,235,200,.1), 0 26px 50px rgba(0,0,0,.6), 0 0 34px rgba(255,122,47,.2); }
.fat-shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid rgba(212,175,55,.2); }
.fat-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out), filter .4s; filter: brightness(.82); }
.fat-item:hover .fat-shot img { transform: scale(1.05); filter: brightness(1); }
.fat-ic { position: absolute; left: 14px; bottom: -22px; z-index: 2; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; color: var(--gold-bright);
  background: radial-gradient(circle at 50% 30%, #3a3026, #15110e); border: 1px solid var(--gold); box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.fat-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(12,10,8,.7)); }
.fat-body { display: grid; gap: 8px; padding: 30px 18px 18px; }
.fat-name { font: 700 20px/1.1 var(--font-heading); letter-spacing: .05em; color: var(--cream); }
.fat-item:hover .fat-name { color: var(--gold-bright); }
.fat-line { font: italic 17px/1.35 var(--font-lore); color: var(--cream-dim); min-height: 46px; }
.fat-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.fat-go { display: inline-flex; gap: 6px; align-items: center; font: 600 12px/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dim); transition: color .2s; }
.fat-item:hover .fat-go { color: var(--gold-bright); }
.fat-go iconify-icon { transition: transform .2s var(--ease-spring); }
.fat-item:hover .fat-go iconify-icon { transform: translateX(4px); }
/* hang-in */
.fat-rack .fat-item { opacity: 0; transform: translateY(-40px); }
.fat-rack.hung .fat-item { opacity: 1; transform: none; transition: opacity .4s calc(var(--i) * 120ms), transform .8s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 120ms); }
.fat-rack.hung .fat-card { animation: fat-settle 1.6s ease-out calc(var(--i) * 120ms + 200ms) both; }
@keyframes fat-settle { 0% { transform: rotate(-5deg); } 25% { transform: rotate(3.5deg); } 50% { transform: rotate(-2deg); } 75% { transform: rotate(.8deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .fat-rack .fat-item { opacity: 1; transform: none; } .fat-rack.hung .fat-card { animation: none; } }

.fat-cta { padding: 70px 0 110px; }
.fat-cta-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 36px 40px; border-radius: 18px; border: 1px solid var(--gold-hair); background: linear-gradient(100deg, rgba(255,122,47,.1), rgba(30,26,23,.8) 40%), url('assets/stone-dark.png') center / 400px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.fat-cta-in > div:first-child { display: grid; gap: 12px; }

@media (max-width: 1000px) {
  .fat-hooks { grid-template-columns: repeat(2, 1fr); }
  .fat-rack-head { grid-template-columns: auto 1fr; }
  .fat-rack-head p { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .fat-cta-in { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .fat-hero { padding: 64px 0 40px; }
  .fat-hooks { grid-template-columns: 1fr; padding: 0 6px; gap: 18px; }
  .fat-rack-h { font-size: 26px; }
  .fat-cta-in { padding: 24px 20px; }
  .fat-cta-in .btn { width: 100%; white-space: normal; }
}

/* the hand-off from the atlas to the racks */
.sg-atlas-more { display: flex; width: max-content; margin: 14px 0 0 auto; align-items: center; gap: 8px; }
.fat-rack-intro { padding: 70px 0 10px; }
.fat-rack-intro .fa-wrap { display: grid; gap: 16px; }
.fat-rack-intro .fa-lead { max-width: 620px; }
.sg-atlas-h .fa-h1 { margin: 8px 0 8px; }