/* v27 site integration for the Imperial Atlas — loaded last */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-variable.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-600.woff2) format("woff2")}
.atlas-head{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1900px;margin:0 auto 14px;padding:2px 2px 10px;border-bottom:1px solid rgba(236,230,218,.08)}
.atlas-head .brand{display:inline-flex;align-items:center;gap:12px;color:#eee7f3;text-decoration:none;min-height:44px}
.atlas-head .brand img{width:44px;height:44px;border:1px solid rgba(236,230,218,.18);box-shadow:0 0 22px -6px rgba(238,43,70,.35)}
.atlas-head .brand strong{display:block;font:600 12px/1.2 "Barlow Condensed","Segoe UI",Arial,sans-serif;letter-spacing:3px;text-transform:uppercase}
.atlas-head .brand small{display:block;margin-top:3px;font:10px/1.3 Consolas,monospace;letter-spacing:1px;color:#aa9bb5}
.atlas-sitenav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.atlas-sitenav a{font:600 11px/1 "Barlow Condensed","Segoe UI",Arial,sans-serif;letter-spacing:2.6px;text-transform:uppercase;color:#cfc6d8;text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.atlas-sitenav a:hover{color:#fff;border-color:#ee2b46}
.atlas-skip{font:600 10px/1.5 "Barlow Condensed","Segoe UI",Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#c4b5d0;text-decoration:none;white-space:nowrap}
.console header h1,.console h2,.console h3{font-family:"Cormorant Garamond",Georgia,serif}
@media(max-width:820px){.atlas-sitenav{display:none}.atlas-head{margin-bottom:8px;padding:2px 6px 8px;gap:10px;min-width:0}.atlas-head .brand{min-width:0}.atlas-head .brand strong{letter-spacing:2px}.atlas-skip{white-space:normal;text-align:right;max-width:120px;line-height:1.4}}
@media(max-width:420px){.atlas-skip{font-size:9px;max-width:96px}}
html,body{overflow-x:clip}
/* embedded (iframe) mode: the parent page already carries the brand and navigation */
.embedded .atlas-sitenav{display:none}
.embedded .atlas-head{display:none}
.embedded body{padding-top:10px}
/* the home page already shows the V.L.A.D. terminal above the frame — open the embed on the map itself.
   hiding the header also parks the avatar animation: its IntersectionObserver reports it off-screen. */
.embedded .console>header{display:none}
.embedded .house-registry{margin-top:0}

/* The V.L.A.D. terminal is a fixed 400px block, centred, so on a phone it overhangs the
   viewport by (400 - 100vw)/2 on each side. Decorative overhang is fine — the header clips it —
   but the "Pause avatar" control was landing past the right edge and could not be fully tapped.
   Pull it in by exactly the overhang on narrow screens; unchanged at 400px and wider. */
@media (max-width:760px){
  .vlad-terminal #vladMotion{right:max(20px, calc((400px - 100vw) / 2 + 12px))}
}

/* comfortable touch targets: the footer disclosure was 14px tall and the avatar toggle 26px */
@media (hover:none){
  .console footer details>summary{min-height:44px;display:flex;align-items:center}
  .vlad-terminal #vladMotion{min-height:34px}
}

/* ---- mobile: the city record reads as a page section, not a cramped sheet ----
   It was position:fixed at max-height:64dvh over the map: a ~420px window onto ~1500px
   of dossier, so every city record was cut off mid-sentence and had to be scrolled
   inside a box that itself sat inside a scrolling page. Put it in normal flow under
   the map instead: full width, full height, one scroll. */
@media (max-width:1024px){
  #record,.record-open #record{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
    z-index:auto!important;max-height:none!important;overflow:visible!important;
    margin:12px 0 0!important;border-radius:4px!important;
    box-shadow:0 10px 30px #0008,0 0 0 2px #080b14b0!important}
  #recordImage,.record-open #recordImage{max-height:none!important;aspect-ratio:1.7!important}
  .record-body{padding-bottom:1.2rem}
  .workspace{grid-template-columns:minmax(0,1fr)!important}
  /* the close button is for the sheet; in flow the record is just the current record */
  #record .record-top #close{min-height:40px;min-width:40px}
}

/* touch: "which place?" chooser when a tap lands between several markers */
.tap-pick{position:fixed;z-index:200;width:min(240px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:.5rem;background:rgba(8,6,14,.96);border:1px solid rgba(236,230,218,.22);box-shadow:0 18px 40px -10px #000;font-family:"Barlow Condensed","Segoe UI",Arial,sans-serif}
.tap-pick p{margin:.1rem .3rem .4rem;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#aa9bb5}
.tap-pick button{display:block;width:100%;text-align:left;min-height:44px;padding:.45rem .6rem;margin:0 0 .25rem;background:#130f1c;border:1px solid rgba(236,230,218,.12);color:#eee7f3;cursor:pointer}
.tap-pick button:last-child{margin-bottom:0}
.tap-pick strong{display:block;font-weight:600;font-size:15px;letter-spacing:.5px}
.tap-pick span{display:block;font-size:12px;color:#aa9bb5;letter-spacing:.3px}