/* ===========================
   LAYOUT.CSS — page structure
   =========================== */

/* 🧱 App frame: left sticky + right scroll */
.app{ display:flex; min-height:100vh; }

/* ⬅️ Sticky left column (desktop) */
.nav-left{
  position: fixed; top:0; left:0;
  height: 100dvh; min-height:100dvh;
  width: var(--nav-w);
  background: var(--bg-main); color: var(--ink);
  padding: var(--gutter);
  border-right: var(--stroke) solid var(--ink);
  overscroll-behavior: contain;
  z-index: 3;
}
.nav-left__inner{ display:flex; flex-direction:column; width:100%; height:100%; }

/* ➡️ Scrollable right column (desktop) */
.content{
  flex:1; background: var(--bg-main);
  height: 100dvh; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  margin-left: var(--nav-w);
}

/* First block top stroke on desktop */
@media (min-width: 768px){
  .content > .block:first-of-type{ border-top: 1px solid var(--ink); }
}

/* ---------------------------
   📱 Mobile-only sticky intro
   --------------------------- */
@media (max-width: 767px){
  .app{ display:block; }
  .nav-left{ display:none !important; }
  .content{ margin-left:0; width:100%; }

  #intro-mobile{
    position: sticky; top: env(safe-area-inset-top, 0px); z-index:10;
    width: 100%; margin: 0;
    background:#F0F0F0;
    padding: calc(20px + env(safe-area-inset-top,0px)) 20px 20px;
    border-top: 1px solid #0D0D0D;
    border-bottom: 1px solid #0D0D0D;  /* ✅ show one clear line */
    box-shadow: none;  
  }
  #intro-mobile + .block{ border-top:0 !important; }

  #intro-mobile .intro{
    margin:0; color:#0D0D0D;
    font-family: var(--font-display);
    font-weight:400;
    font-size: clamp(28px, 6.5vw, 36px);
    line-height:1.25;
  }
  #intro-mobile .regular{ font-family:var(--font-display); font-weight:400; }
  #intro-mobile .italic{
  font-family: var(--font-display-italic);
  font-weight: 400;
  font-style: italic;
  font-synthesis: none;
}

  #intro-mobile .intro .regular:first-child{
    font-weight: 700;
  }

  /* hide .content scrollbar (mobile) */
  .content::-webkit-scrollbar{ display:none; }
  .content{ scrollbar-width:none; }
}

/* 🖥️ Hide intro only on *real* desktop now (≥1200px) */
@media (min-width: 1200px){
  #intro-mobile{ display:none !important; visibility:hidden; }
}

/* ---------------------------
   📲 Tablet (768–1199) — mobile-like layout
   --------------------------- */
@media (min-width: 768px) and (max-width: 1199px){
  .app{ display:block; }
  .nav-left{ display:none !important; }
  .content{ margin-left:0; width:100%; }

  #intro-mobile{
    display:block !important;
    position: sticky; top: env(safe-area-inset-top,0px); z-index:10;
    width:100%; margin:0;
    background:#F0F0F0;
    padding: calc(20px + env(safe-area-inset-top,0px)) 20px 20px;
    border-top:1px solid #0D0D0D;
    border-bottom:1px solid #0D0D0D;   /* ✅ one clear line */
    box-shadow:none;                   /* ✅ prevent double line */
  }
  #intro-mobile + .block{ border-top:0 !important; }

  #intro-mobile .intro{
    margin:0; color:#0D0D0D;
    font-family:var(--font-display); font-weight:400;
    font-size: clamp(30px, 5.4vw, 40px);
    line-height:1.25;
  }
  #intro-mobile .regular{ font-family:var(--font-display); font-weight:400; }
  #intro-mobile .italic{
  font-family: var(--font-display-italic);
  font-weight: 400;
  font-style: italic;
  font-synthesis: none;
}

  #intro-mobile .intro .regular:first-child{
    font-weight: 700;
  }
}