/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* ── Scene controls ─────────────────────────────────────────
     ACTIVE IMAGE SET — change 'set1' to 'set2' to swap all
     building images at once. JS reads this value on load.
     ────────────────────────────────────────────────────────── */
  --active-set: 'set1';

  /* ── Building sizes ─────────────────────────────────────────
     --width-*       controls display size as % of the scene.
     --width-*-sm    overrides at 480px and above.
     --width-*-md    overrides at 768px and above.
     --width-*-lg    overrides at 960px and above.
     --size-*        caps at natural PNG dimensions (never upscale).
     Adjust --width-* values to tune each building's scale.
     ────────────────────────────────────────────────────────── */
  --width-arrive:      90%;  --width-arrive-sm:  40%;  --width-arrive-md: 75%;  --width-arrive-lg: 80%;
  --width-cisco:       70%;  --width-cisco-sm:   40%;  --width-cisco-md:  45%;  --width-cisco-lg:  80%;
  --width-gm:          60%;  --width-gm-sm:      40%;  --width-gm-md:     45%;  --width-gm-lg:     80%;
  --width-kaplan:      60%;  --width-kaplan-sm:  40%;  --width-kaplan-md: 40%;  --width-kaplan-lg: 80%;
  --width-kasasa:      60%;  --width-kasasa-sm:  40%;  --width-kasasa-md: 40%;  --width-kasasa-lg: 80%;
  --width-rackspace:   80%;  --width-rackspace-sm:40%;  --width-rackspace-md:55%; --width-rackspace-lg:80%;
  --width-sumo:        50%;  --width-sumo-sm:     40%;  --width-sumo-md:    30%;  --width-sumo-lg:    80%;
  --width-visa:        70%;  --width-visa-sm:     40%;  --width-visa-md:    55%;  --width-visa-lg:    80%;

  /* ── Cloud sizes ────────────────────────────────────────────
     Width as % of #city. Three size tiers injected by JS.
     ────────────────────────────────────────────────────────── */
  --cloud-small:  18%;
  --cloud-medium: 23%;
  --cloud-large:  28%;

  --size-arrive:    823px;
  --size-cisco:     614px;
  --size-gm:        515px;
  --size-kaplan:    472px;
  --size-kasasa:    468px;
  --size-rackspace: 543px;
  --size-sumo:      419px;
  --size-visa:      547px;

  /* ── Street ─────────────────────────────────────────────────── */
  --street-top:         5%;    --street-top-sm:      5%;    --street-top-md:      5%;    --street-top-lg:      0%;
  --width-street:       150%;  --width-street-sm:    100%;  --width-street-md:    100%;  --width-street-lg:    100%;
  --maxwidth-street:    1125px; --maxwidth-street-sm: 1125px; --maxwidth-street-md: 1125px; --maxwidth-street-lg: 1125px;

  /* ── Building positions — mobile base ───────────────────────── */
  --me-top:            9%;   --me-right:            45%;
  --apartments-top:    0%;   --apartments-right:   -16.666666%;
  --kaplan-top:       -25%;   --kaplan-left:         35%;
  --kasasa-top:       -17%;   --kasasa-left:        -16.666666%;
  --rackspace-top:    35%;   --rackspace-left:     -40%;
  --bb-resume-top:    24%;   --bb-resume-left:      12.4999995%;
  --visa-top:         15%;   --visa-right:         -30%;
  --sumo-top:         83%;   --sumo-right:           -20%;
  --gm-top:           62%;   --gm-left:            10%;
  --arrive-top:       94%;   --arrive-right:       9%;
  --cisco-top:        64%;   --cisco-left:        -37%;

  /* ── Building positions — 480px ─────────────────────────────── */
  --me-top-sm:         2%;   --me-right-sm:         16.666666%;
  --apartments-top-sm: -4%;  --apartments-right-sm:-12.4999995%;
  --kaplan-top-sm:     0%;   --kaplan-left-sm:      20.8333325%;
  --kasasa-top-sm:     2%;   --kasasa-left-sm:     -12.4999995%;
  --rackspace-top-sm:  30%;  --rackspace-left-sm:  -12.4999995%;
  --bb-resume-top-sm:  23%;  --bb-resume-left-sm:   24.999999%;
  --visa-top-sm:       24%;  --visa-right-sm:      -16.666666%;
  --sumo-top-sm:       63%;  --sumo-right-sm:       12.4999995%;
  --gm-top-sm:         58%;  --gm-left-sm:         -16.666666%;
  --arrive-top-sm:     82%;  --arrive-right-sm:    -12.4999995%;
  --cisco-top-sm:      90%;  --cisco-left-sm:     -12.4999995%;

  /* ── Building positions — 768px ─────────────────────────────── */
  --me-top-md:         -3%;  --me-right-md:         16.666666%;
  --apartments-top-md: -11%; --apartments-right-md:  -4.1666665%;
  --kaplan-top-md:     -20%;  --kaplan-left-md:       30%;
  --kasasa-top-md:     -12%;  --kasasa-left-md:       -5%;
  --rackspace-top-md:  35%;  --rackspace-left-md:   -20%;
  --bb-resume-top-md:  23%;  --bb-resume-left-md:    33.333332%;
  --visa-top-md:       12%;  --visa-right-md:        -20%;
  --sumo-top-md:       85%;  --sumo-right-md:        -10%;
  --gm-top-md:         62%;  --gm-left-md:          13%;
  --arrive-top-md:     99%;  --arrive-right-md:      10%;
  --cisco-top-md:      65%;  --cisco-left-md:       -10%;

  /* ── Building positions — 960px ─────────────────────────────── */
  --me-top-lg:         -3%;  --me-right-lg:          16.666666%;
  --apartments-top-lg: -11%; --apartments-right-lg:  -2.08333325%;
  --kaplan-top-lg:     -26%;  --kaplan-left-lg:        35%;
  --kasasa-top-lg:     -14%;  --kasasa-left-lg:         6%;
  --rackspace-top-lg:  30%;  --rackspace-left-lg:     12%;
  --bb-resume-top-lg:  20%;  --bb-resume-left-lg:     33.333332%;
  --visa-top-lg:       10%;  --visa-right-lg:         15%;
  --sumo-top-lg:       49%;  --sumo-right-lg:         1%;
  --gm-top-lg:         55%;  --gm-left-lg:             30%;
  --arrive-top-lg:     72%;  --arrive-right-lg:       3%;
  --cisco-top-lg:      60%;  --cisco-left-lg:        2%;

  /* Modal brand colors */
  --color-jonathan:  #00579F;
  --color-kaplan:    #1E2171;
  --color-kasasa:    #D41F28;
  --color-rackspace: #231F20;
  --color-visa:      #00579F;
  --color-sumo:      #2A70E0;
  --color-gm:        #0060A8;
  --color-arrive:    #2ca9e0;
  --color-cisco:     #049fd9;

  /* Site palette */
  --color-bg:              #E8E8F1;
  --color-text:            #666;
  --color-link:            #2A4F67;
  --color-link-hover:      purple;
  --color-heading-primary: #2A4F67;
  --color-heading-accent:  #A1962E;
  --color-skill-fill:      #A1962E;
  --color-skill-bg:        #666;
  --color-sidebar-bg:      #E8E8F1;
  --color-selection:       #2D8DFF;

  /* Typography */
  --font-display: 'Berkshire Swash', cursive;
  --font-heading:  'Overlock SC', cursive;
  --font-body:     'Roboto', sans-serif;
  --font-ui:       'Open Sans', sans-serif;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Z-index scale */
  --z-street:        1;
  --z-building-back: 10;
  --z-building-mid:  20;
  --z-building-mid2: 30;
  --z-building-fore: 40;
  --z-building-top:  50;
  --z-clouds:        100;
  --z-overlay:       200;
  --z-modal:         300;

  /* Active modal brand color — overridden per modal via inline style */
  --modal-color: var(--color-jonathan);
}


/* ============================================================
   @FONT-FACE
   All fonts self-hosted. WOFF2 files belong in /fonts/.
   ============================================================ */
@font-face {
  font-family: 'Berkshire Swash';
  src: url('../fonts/BerkshireSwash-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overlock SC';
  src: url('../fonts/OverlockSC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   BASE RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--color-bg);
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: var(--color-text);
  background: none;
  overflow-x: hidden;
  min-height: 100%;
}

/* Prevent scroll when modal is open (added by JS) */
body.modal-active {
  overflow: hidden;
}

a {
  color: var(--color-link);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

ul {
  list-style: none;
  padding-left: 0;
}
ul li {
  position: relative;
  margin-bottom: var(--space-sm);
}
ul li::before {
  content: "\00d7";
  position: absolute;
  left: -15px;
  top: -1px;
}

h1 {
  font-family: var(--font-display);
  font-size: 4em;
  color: var(--color-heading-primary);
  line-height: 1em;
  margin: 0 0 var(--space-md);
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.2em;
  color: var(--color-heading-accent);
  margin: 0 0 var(--space-md);
}

h3 {
  font-family: var(--font-body);
  font-size: 1em;
  color: var(--color-heading-primary);
  margin: var(--space-md) 0 var(--space-sm);
}
h3 a {
  text-decoration: underline;
}

img,
svg {
  vertical-align: middle;
}

::selection {
  background: var(--color-selection);
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: var(--color-selection);
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: var(--space-md) 0;
  padding: 0;
}


/* ============================================================
   SPLASH
   ============================================================ */
#splash {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95vh;
  text-align: center;
}

.splash-inner {
  padding: var(--space-md);
}

#splash ul.titles {
  list-style: none;
  padding: 0;
  margin: 0;
}
#splash ul.titles li {
  display: block;
  margin-bottom: 8px;
}
#splash ul.titles li::before {
  content: none;
}
#splash ul.titles li h2 {
  margin-bottom: 0;
}


/* ============================================================
   CITY SCENE
   ============================================================ */
#city {
  position: relative;
  padding: 0;
  overflow: visible;
  max-width: 1920px;
  margin: 0 auto;
}

/* Street — centered on #city, capped at natural image width */
#street {
  position: absolute;
  top: var(--street-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--width-street);
  max-width: var(--maxwidth-street);
  z-index: var(--z-street);
}
#street img {
  width: 100%;
  display: block;
}

/* Character avatar */
#me {
  position: absolute;
  top: var(--me-top);
  right: var(--me-right);
  z-index: 40;
}
#me img {
  width: 18.75vw;
  cursor: pointer;
}

/* All buildings share these base rules */
.building {
  position: absolute;
}
.building img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.building img:hover,
#me img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

/* ── Building positions — mobile base (< 480px) ─────────────── */
#apartments {
  top: var(--apartments-top);
  right: var(--apartments-right);
  z-index: var(--z-building-mid);
}
#apartments img { width: 26.25vw; }

#kaplan {
  top: var(--kaplan-top);
  left: var(--kaplan-left);
  z-index: var(--z-building-back);
  width: var(--width-kaplan);
  max-width: var(--size-kaplan);
}

#kasasa {
  top: var(--kasasa-top);
  left: var(--kasasa-left);
  z-index: var(--z-building-mid);
  width: var(--width-kasasa);
  max-width: var(--size-kasasa);
}

#rackspace {
  top: var(--rackspace-top);
  left: var(--rackspace-left);
  z-index: var(--z-building-fore);
  width: var(--width-rackspace);
  max-width: var(--size-rackspace);
}

#bb-resume {
  top: var(--bb-resume-top);
  left: var(--bb-resume-left);
  z-index: var(--z-building-top);
}
#bb-resume img {
  width: 26.25vw;
  /* Billboard doesn't need hover-scale — it's a link */
  cursor: pointer;
  transition: filter 0.2s ease;
}
#bb-resume img:hover {
  transform: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

#visa {
  top: var(--visa-top);
  right: var(--visa-right);
  z-index: var(--z-building-mid2);
  width: var(--width-visa);
  max-width: var(--size-visa);
}

#sumo {
  top: var(--sumo-top);
  right: var(--sumo-right);
  z-index: var(--z-building-top);
  width: var(--width-sumo);
  max-width: var(--size-sumo);
}

#gm {
  top: var(--gm-top);
  left: var(--gm-left);
  z-index: var(--z-building-top);
  width: var(--width-gm);
  max-width: var(--size-gm);
}

#arrive {
  top: var(--arrive-top);
  right: var(--arrive-right);
  z-index: var(--z-building-top);
  width: var(--width-arrive);
  max-width: var(--size-arrive);
}

#cisco {
  top: var(--cisco-top);
  left: var(--cisco-left);
  z-index: var(--z-building-top);
  width: var(--width-cisco);
  max-width: var(--size-cisco);
}


/* ============================================================
   CLOUDS (injected by JS)
   ============================================================ */
.cloud {
  position: absolute;
  z-index: var(--z-clouds);
  pointer-events: none;
  display: none; /* JS fades these in */
}
.cloud img {
  opacity: 0.75;
  display: block;
}
.cloud .left {
  transform: scaleX(-1);
}
.cloud .small  { width: var(--cloud-small); }
.cloud .medium { width: var(--cloud-medium); }
.cloud .large  { width: var(--cloud-large); }


/* ============================================================
   MODAL OVERLAY
   ============================================================ */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}


/* ============================================================
   MODAL DIALOG
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-md);
  overflow-y: auto;
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Vertically center short modals, let tall ones scroll */
@media (min-height: 600px) {
  .modal {
    align-items: center;
  }
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: var(--modal-max-width, 800px);
  margin: auto;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.modal-content {
  display: flex;
  flex-direction: column;
}

/* ── Modal header ──────────────────────────────────────────── */
.modal-header {
  position: relative;
  background-color: var(--modal-color);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-logo {
  display: block;
  max-height: 56px;
  max-width: 240px;
  margin: 0 auto;
}

/* Jonathan modal uses a name heading instead of a logo image */
.modal-name {
  color: #fff;
  font-family: var(--font-display);
  font-size: 2em;
  text-align: center;
  width: 100%;
  margin: 0;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  transition: color 0.15s ease;
}
.modal-close:hover {
  color: #fff;
}

/* ── Modal body — two-column grid ──────────────────────────── */
.modal-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.modal-main {
  padding: var(--space-lg) var(--space-xl);
}
.modal-main h2 {
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--color-heading-primary);
}
.modal-main h3 {
  margin-top: var(--space-lg);
}

.modal-sidebar {
  background: var(--color-sidebar-bg);
  padding: var(--space-lg);
  min-height: 300px;
}
.modal-sidebar h2 {
  margin-bottom: var(--space-sm);
}

/* Stack columns on small screens */
@media (max-width: 540px) {
  .modal-body {
    grid-template-columns: 1fr;
  }
  .modal-sidebar {
    min-height: auto;
  }
}

/* ── Job title / date range ────────────────────────────────── */
.job-title {
  color: var(--color-heading-primary);
  font-family: var(--font-heading);
  font-size: 1.2em;
  margin: var(--space-md) 0 var(--space-xs);
}

.date-range {
  color: var(--color-text);
  font-size: 0.9em;
  margin: 0 0 var(--space-md);
  opacity: 0.8;
}

/* Responsibilities list inherits global ul li × bullet */
.responsibilities {
  padding-left: 15px;
}

/* ── Placeholder text ──────────────────────────────────────── */
.placeholder-text {
  color: var(--color-text);
  font-style: italic;
  opacity: 0.7;
}

/* ── Deliverable images ────────────────────────────────────── */
.deliverable {
  display: block;
  width: 100%;
  margin: 15px 0;
  border-radius: 2px;
}
img.deliverable[src=""] {
  min-height: 120px;
  background: repeating-linear-gradient(
    -45deg,
    #ddd 0,
    #ddd 1px,
    #e8e8e8 0,
    #e8e8e8 8px
  );
}

/* ── Software icons ────────────────────────────────────────── */
.software {
  width: 50px;
  height: 50px;
  margin: 0 15px 15px 0;
  float: left;
  object-fit: contain;
}

/* ── Skill tags (sidebar placeholder chips) ────────────────── */
.skill-tag {
  display: inline-block;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 0.85em;
  color: var(--color-heading-primary);
  margin: 0 6px 8px 0;
}

/* ── Skill meter bars ──────────────────────────────────────── */
.meter {
  width: 100%;
  height: 16px;
  background: var(--color-skill-bg);
  margin-bottom: var(--space-md);
}
.filler {
  height: 100%;
  width: 0;
  background: var(--color-skill-fill);
  transition: width 1s ease;
}
.filler.expert       { width: 100%; }
.filler.advanced     { width: 75%; }
.filler.intermediate { width: 50%; }
.filler.novice       { width: 25%; }


/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  padding: var(--space-md) var(--space-xl);
}
#footer .footer-inner {
  text-align: right;
}
.copyright {
  font-size: 0.85em;
  color: var(--color-text);
  margin: 0;
}


/* ============================================================
   @KEYFRAMES
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-150px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   JS-DRIVEN ENTRANCE ANIMATIONS
   JS adds body.js-loaded on DOMContentLoaded.
   animation-fill-mode: both holds the `from` state during delay,
   so buildings stay invisible until their moment arrives.
   ============================================================ */

/* Splash fades in immediately */
body.js-loaded #splash {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

/* Street fades in after 2.5 s */
body.js-loaded #street {
  animation: fadeIn 1s ease 2.5s both;
}

/* All buildings drop in starting at 5.5 s, staggered by 0.1 s */
body.js-loaded .building,
body.js-loaded #me {
  animation: dropIn 1s ease both;
}

body.js-loaded #me         { animation-delay: 5.5s; }
body.js-loaded #apartments { animation-delay: 5.6s; }
body.js-loaded #kaplan     { animation-delay: 5.7s; }
body.js-loaded #kasasa     { animation-delay: 5.8s; }
body.js-loaded #rackspace  { animation-delay: 5.9s; }
body.js-loaded #bb-resume  { animation-delay: 6.0s; }
body.js-loaded #visa       { animation-delay: 6.1s; }
body.js-loaded #sumo       { animation-delay: 6.2s; }
body.js-loaded #gm         { animation-delay: 6.3s; }
body.js-loaded #arrive     { animation-delay: 6.4s; }
body.js-loaded #cisco      { animation-delay: 6.5s; }

/* Clouds are injected and faded in by JS — no CSS animation needed */


/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (min-width: 480px) {

  #street {
    top: var(--street-top-sm);
    width: var(--width-street-sm);
    max-width: var(--maxwidth-street-sm);
  }

  #me {
    top: var(--me-top-sm);
    right: var(--me-right-sm);
  }
  #me img { width: 15vw; }

  #apartments {
    top: var(--apartments-top-sm);
    right: var(--apartments-right-sm);
  }
  #apartments img { width: 22.5vw; }

  #kaplan {
    top: var(--kaplan-top-sm);
    left: var(--kaplan-left-sm);
  }

  #kasasa {
    top: var(--kasasa-top-sm);
    left: var(--kasasa-left-sm);
  }

  #rackspace {
    top: var(--rackspace-top-sm);
    left: var(--rackspace-left-sm);
  }

  #bb-resume {
    top: var(--bb-resume-top-sm);
    left: var(--bb-resume-left-sm);
  }
  #bb-resume img { width: 18.75vw; }

  #visa {
    top: var(--visa-top-sm);
    right: var(--visa-right-sm);
  }

  #sumo {
    top: var(--sumo-top-sm);
    right: var(--sumo-right-sm);
  }

  #gm {
    top: var(--gm-top-sm);
    left: var(--gm-left-sm);
  }

  #arrive {
    top: var(--arrive-top-sm);
    right: var(--arrive-right-sm);
  }

  #cisco {
    top: var(--cisco-top-sm);
    left: var(--cisco-left-sm);
  }

  #kaplan    { width: var(--width-kaplan-sm); }
  #kasasa    { width: var(--width-kasasa-sm); }
  #rackspace { width: var(--width-rackspace-sm); }
  #visa      { width: var(--width-visa-sm); }
  #sumo      { width: var(--width-sumo-sm); }
  #gm        { width: var(--width-gm-sm); }
  #arrive    { width: var(--width-arrive-sm); }
  #cisco     { width: var(--width-cisco-sm); }
}


/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (min-width: 768px) {

  #street {
    top: var(--street-top-md);
    width: var(--width-street-md);
    max-width: var(--maxwidth-street-md);
  }

  #me {
    top: var(--me-top-md);
    right: var(--me-right-md);
  }
  #me img { width: 11.25vw; }

  #apartments {
    top: var(--apartments-top-md);
    right: var(--apartments-right-md);
  }
  #apartments img { width: 18.75vw; }

  #kaplan {
    top: var(--kaplan-top-md);
    left: var(--kaplan-left-md);
  }

  #kasasa {
    top: var(--kasasa-top-md);
    left: var(--kasasa-left-md);
  }

  #rackspace {
    top: var(--rackspace-top-md);
    left: var(--rackspace-left-md);
  }

  #bb-resume {
    top: var(--bb-resume-top-md);
    left: var(--bb-resume-left-md);
  }
  #bb-resume img { width: 15vw; }

  #visa {
    top: var(--visa-top-md);
    right: var(--visa-right-md);
  }

  #sumo {
    top: var(--sumo-top-md);
    right: var(--sumo-right-md);
  }

  #gm {
    top: var(--gm-top-md);
    left: var(--gm-left-md);
  }

  #arrive {
    top: var(--arrive-top-md);
    right: var(--arrive-right-md);
  }

  #cisco {
    top: var(--cisco-top-md);
    left: var(--cisco-left-md);
  }

  #kaplan    { width: var(--width-kaplan-md); }
  #kasasa    { width: var(--width-kasasa-md); }
  #rackspace { width: var(--width-rackspace-md); }
  #visa      { width: var(--width-visa-md); }
  #sumo      { width: var(--width-sumo-md); }
  #gm        { width: var(--width-gm-md); }
  #arrive    { width: var(--width-arrive-md); }
  #cisco     { width: var(--width-cisco-md); }

  /* Full-screen modals on narrow viewports → constrained modal on 768+ */
  .modal {
    padding: var(--space-xl);
  }
}


/* ============================================================
   RESPONSIVE — 960px  (full desktop layout)
   ============================================================ */
@media (min-width: 960px) {
  /* Typography scale-up */
  h1 { font-size: 6em; }
  h2 { font-size: 2em; }

  /* Splash: titles go inline with | separators */
  #splash ul.titles li {
    display: inline-block;
    margin: 0 20px;
    position: relative;
  }
  #splash ul.titles li:not(:first-child)::before {
    content: "|";
    display: block;
    position: absolute;
    left: -25px;
    top: 5px;
    font-size: 3em;
    color: var(--color-heading-accent);
    font-weight: 100;
  }

  #street {
    top: var(--street-top-lg);
    width: var(--width-street-lg);
    max-width: var(--maxwidth-street-lg);
  }

  /* Me */
  #me { top: var(--me-top-lg); right: var(--me-right-lg); }

  /* Building positions — desktop spec */
  #apartments {
    top: var(--apartments-top-lg);
    right: var(--apartments-right-lg);
    z-index: var(--z-building-mid);
  }

  #kaplan {
    top: var(--kaplan-top-lg);
    left: var(--kaplan-left-lg);
    z-index: var(--z-building-back);
  }

  #kasasa {
    top: var(--kasasa-top-lg);
    left: var(--kasasa-left-lg);
    z-index: var(--z-building-mid);
  }

  #rackspace {
    top: var(--rackspace-top-lg);
    left: var(--rackspace-left-lg);
    z-index: var(--z-building-fore);
  }

  #bb-resume {
    top: var(--bb-resume-top-lg);
    left: var(--bb-resume-left-lg);
    z-index: var(--z-building-top);
  }

  #visa {
    top: var(--visa-top-lg);
    right: var(--visa-right-lg);
    z-index: var(--z-building-mid2);
  }

  #sumo {
    top: var(--sumo-top-lg);
    right: var(--sumo-right-lg);
    z-index: var(--z-building-top);
  }

  #gm {
    top: var(--gm-top-lg);
    left: var(--gm-left-lg);
    z-index: var(--z-building-top);
  }

  #arrive {
    top: var(--arrive-top-lg);
    right: var(--arrive-right-lg);
    z-index: var(--z-building-top);
  }

  #cisco {
    top: var(--cisco-top-lg);
    left: var(--cisco-left-lg);
    z-index: var(--z-building-top);
  }

  #kaplan    { width: var(--width-kaplan-lg); }
  #kasasa    { width: var(--width-kasasa-lg); }
  #rackspace { width: var(--width-rackspace-lg); }
  #visa      { width: var(--width-visa-lg); }
  #sumo      { width: var(--width-sumo-lg); }
  #gm        { width: var(--width-gm-lg); }
  #arrive    { width: var(--width-arrive-lg); }
  #cisco     { width: var(--width-cisco-lg); }

  /* Clouds: slightly larger at desktop */
  .cloud .small  { width: calc(var(--cloud-small)  * 1.5); }
  .cloud .medium { width: calc(var(--cloud-medium) * 1.5); }
  .cloud .large  { width: calc(var(--cloud-large)  * 1.5); }
}


/* ============================================================
   RESPONSIVE — modals full-screen on mobile
   ============================================================ */
@media (max-width: 480px) {
  .modal {
    padding: 0;
    align-items: flex-start;
  }
  .modal-dialog {
    border-radius: 0;
    min-height: 100vh;
  }
}