:root {
    --primary-color: rgb(240,240,240, 1);
    --secondary-color: #f7f3f1;
    --accent-color: #0000CC;
    --text-color: #333;
    --background-color: #fff;
  }
  
  /* Main scroll container for the page */
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
   
  p {
    padding: 0;
    margin: 0rem auto  1rem auto;
  }
  
  h2, h3, h4, h5 {
    margin: 0rem auto 1rem auto;
  }

  /* Snap settings for top-level sections */
  header, section, footer {
    scroll-snap-align: start;
    -webkit-scroll-snap-align: start;
  }
  
  /* Ensure that by default inner elements are not snap targets */
  .section-narrow {
    scroll-snap-align: none;
    -webkit-scroll-snap-align: none;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Note: "text-wrap: pretty;" is nonstandard; remove if not needed */
  }
  
  html {
    font-size: 14px;
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: hidden;
  }
  
  /* HERO Section */
  .hero {
    background: url('assets/drottninggatan_shiny_1.jpg') no-repeat center center/cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
  }
  
  h1 {
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 6em;
    width: 100%;
    text-align: center;
    color: var(--primary-color);
    pointer-events: none;
    text-transform: uppercase;
    text-shadow: rgb(0, 0, 0, 1) 1px 1px 0px,
                 rgb(0, 0, 0, 1) 2px 2px 0px,
                 rgb(0, 0, 0, 1) 3px 3px 0px,
                 rgb(0, 0, 0, 1) 4px 4px 0px,
                 rgb(0, 0, 0, 1) 5px 5px 0px,
                 rgba(0, 0, 0, 1) 6px 6px 0px;
    transform: perspective(500px) rotateX(-2deg);
    letter-spacing: 0rem;
    margin-bottom: 1rem;
  }
  
  h1, h2, h3, h4 {
    font-family: "EB Garamond", serif;
  }
  
  /* Navigation */
  nav {
    position: fixed;
    top: 0;
    padding: 1rem 0;
  }
  
  nav div {
    border-radius: 5rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.8rem 2rem;
    gap: 1.5rem;
    display: flex;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
    justify-content: center;
    z-index: 1000;
    width: auto;
  }
  
  nav a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
  }
  
  nav a:hover {
    text-decoration: underline;
    color: var(--secondary-color);
  }

  nav a:active {
    color: var(--text-color);
    text-decoration: underline;
  }
  
  header {
    padding: 0;
  }
  
  /* Sections */
  section {
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .image-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  h2 {
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 2.5rem;
    max-width: 600px;
    margin-top: 4rem;
  }
  
  /* Link styles */
  a {
    color: #0000EE;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
  }
  
  footer a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
  }
  
  a:hover, footer a:hover {
    color: var(--accent-color);
    text-decoration: underline;
  }
  
  a:focus {
    outline: 2px solid #666;
    outline-offset: 2px;
  }
  
  a:active {
    color: #000;
    text-decoration: underline;
  }
  
  hr {
    border: none;
    width: 100%;
    max-width: 600px;
    height: 0;
    display: block;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    margin: 2rem auto;
    padding: 2px 0;
  }
  
  h3 {
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.8rem;
    margin-bottom: 0.2rem;
    max-width: 600px;
  }
  
  h4 {
    font-size: 1.2rem;
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: hidden;
    margin-bottom: 0;
  }
  
  p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0rem auto 2rem auto;
    line-height: 1.6rem;
  }
  
  .street-view-image {
    width: 100%;
    height: 30vh;
    background: url(assets/street_view_drawing.png) center center / contain no-repeat;
    margin-top: 2rem;
  }
  
  .skyline-image {
    width: 100%;
    height: 20vh;
    background: url(assets/skyline_stockholm_norrmalm.png) center center / contain no-repeat;
    margin-top: 2rem;
  }
  
  .tenant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0;
    width: 90%;
    max-width: 1400px;
    margin: 1rem 0 10rem 0;
  }
  
  .tenant {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 8px;
    transition: transform 0.3s ease;
  }
  
  .tenant:hover {
    transform: scale(1.1);
  }
  
  .tenant img {
    max-width: 100%;
    height: auto;
    max-height: 100px;
  }
  
  footer {
    background-color: var(--background-color);
    color: var(--text-color);
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
  }
  
  /* Responsive adjustments for small devices */
  @media (max-width: 768px) {
    html {
      font-size: 11px;
    }
    h1 {
      font-size: 3rem;
    }
    h2 {
      font-size: 2rem;
    }
    .tenant-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    /* Adjust section padding */
    section {
      padding: 0 3rem;
    }
  }
  
  /* Navigation animations */
  nav {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
  }
  
  @keyframes hideNav {
    to {
      transform: translateY(-100%);
      opacity: 0;
    }
  }
  
  @keyframes showNav {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  nav:not(:hover) div {
    animation: hideNav 0.5s ease-in-out forwards;
  }
  
  nav:hover div {
    animation: showNav 0.5s ease-in-out forwards;
  }
  
  header:not(:hover) nav div {
    animation: hideNav 0.5s ease-in-out forwards;
  }
  
  header:hover nav div {
    animation: showNav 0.5s ease-in-out forwards;
  }
  
  /* Full-bleed image sections for larger screens */
  .narrow-section {
    width: 50vw; /* Each image takes half the viewport width */
    height: 100vh; /* Full viewport height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* Background image assignments */
  #second-image {
    background-image: url('assets/drottninggatan_wrede_2.jpg');
  }
  #third-image {
    background-image: url('assets/drottninggatan_shiny_2.jpg');
  }
  #fourth-image {
    background-image: url('L1440220.jpg');
  }
  .portrait-1 {
    background-image: url('assets/drottninggatan_wrede_1.jpg');
  }
  .portrait-2 {
    background-image: url('assets/drottninggatan_shiny_3.jpg');
  }
  .portrait-3 {
    background-image: url('assets/drottninggatan_shiny_4.jpg');
  }
  .portrait-4 {
    background-image: url('assets/drottninggatan_shiny_6.jpg');
  }
  .portrait-5 {
    background-image: url('assets/drottninggatan_shiny_5.jpg');
  }
  .portrait-6 {
    background-image: url('assets/drottninggatan_shiny_7.jpg');
  }
  .portrait-8 {
    background-image: url('assets/drottninggatan_shiny_8.jpg');
  }
  
  /* Side-by-side layout on large screens */
  .narrow-section-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: row;
    gap: 3vw;
  }

  .tall-section {
    background-color: red;
    scroll-snap-type: y proximity;
  }
  
  /* For small devices: Flatten nested structure so that the narrow sections
     become direct snap targets of the body’s scroll container */
  @media (max-width: 768px) {
    /* Basic typography and layout tweaks */
    h1 {
      font-size: 3rem;
    }
    h2 {
      font-size: 2rem;
    }
    .tenant-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    section {
      padding: 0 3rem;
    }
    
    /* Remove snapping and flatten structure from the outer wrapper */
    .stack-on-small-devices {
      scroll-snap-align: none;
      -webkit-scroll-snap-align: none;
      display: contents;
    }
    
    /* Remove the extra wrapper from the snapping hierarchy */
    .narrow-section-container {
      display: contents;
    }
    
    /* Each narrow section is now a direct snap target of the main scroll container */
    .narrow-section {
      width: 100%;
      min-height: 100vh;
      scroll-snap-align: start;
      -webkit-scroll-snap-align: start;
    }

    .skyline-image {
        height: 120px;
    }
    .street-view-image{
        height: 180px;
    }

    .tenant-grid {
        margin-bottom: 2rem;
    }
  }

  @media (min-width: 769px) and (max-height: 929px) {
    html, body {
      /* Disable the snapping behavior */
      scroll-snap-type: none;
      -webkit-scroll-snap-type: none;
    }
    
    header, section, footer {
      scroll-snap-align: initial;
      -webkit-scroll-snap-align: initial;
    }

    h2 {
        margin-top: 10rem;
    }
  }

  @media (max-width: 768px) and (max-height: 700px) {
    html, body {
      /* Disable the snapping behavior */
      scroll-snap-type: none;
      -webkit-scroll-snap-type: none;
    }
    
    header, section, footer {
      scroll-snap-align: initial;
      -webkit-scroll-snap-align: initial;
    }

    h2 {
        margin-top: 5rem;
    }
  }