/* =========================================================
   REAL PAGES — cases + /projects/
   Shared after the original design CSS. Desktop reference is preserved;
   standalone pages only release modal/fixed positioning.
   ========================================================= */
:root{color-scheme:dark}
body.case-page,
body.projects-page,
body.fashion-page{
  min-height:100vh;
  background:#020A12;
  color:#F4F8FF;
}

/* ---------- shared top navigation ---------- */
.page-nav{
  position:fixed;
  z-index:300;
  left:0;right:0;top:0;
  height:64px;
  padding:0 clamp(16px,3.2vw,42px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(180deg,rgba(2,10,18,.94),rgba(2,10,18,.72),transparent);
  pointer-events:none;
}
.page-nav a{pointer-events:auto;text-decoration:none;color:#F4F8FF}
.page-nav__brand{font-size:18px;font-weight:600;letter-spacing:-.045em}
.page-nav__brand span{
  background:linear-gradient(135deg,#B7E4FF,#3ED6FF 54%,#0570FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-nav__actions{display:flex;align-items:center;gap:9px}
.page-nav__link{
  min-height:36px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(183,228,255,.20);border-radius:999px;
  background:rgba(2,10,18,.38);color:rgba(244,248,255,.78)!important;
  font-size:10px;font-weight:600;letter-spacing:.03em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.page-nav__link:hover{border-color:rgba(62,214,255,.48);color:#F4F8FF!important}

/* ---------- standalone case pages ---------- */
.case-page-shell{padding:78px 0 56px}
.case-page .project-case-modal{
  position:relative!important;
  left:auto!important;top:auto!important;
  width:min(1220px,calc(100% - 36px))!important;
  height:auto!important;max-height:none!important;
  margin:0 auto!important;
  transform:none!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
  display:block!important;
  box-shadow:0 30px 90px rgba(0,0,0,.32)!important;
}
.case-page .project-case-modal[hidden]{display:block!important}
.case-page .case-footer{border-top:1px solid rgba(183,228,255,.10)}
.case-page .case-footer-cta{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  white-space:nowrap;
}
.case-page .case-page-next{
  width:min(1220px,calc(100% - 36px));
  margin:18px auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.case-page .case-page-next a{
  min-height:64px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1px solid rgba(183,228,255,.12);border-radius:14px 5px 14px 5px;
  background:linear-gradient(145deg,rgba(244,248,255,.025),rgba(5,112,255,.025));
  color:#F4F8FF;text-decoration:none;font-size:11px;
}
.case-page .case-page-next a span{opacity:.48;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.case-page .case-page-next a:hover{border-color:rgba(62,214,255,.36);background:rgba(5,112,255,.05)}

/* ---------- /projects/ is the old book, now a real URL ---------- */
.projects-page{overflow:hidden}
.projects-page .allprojects-overlay{
  position:fixed!important;inset:0!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(10,40,94,.26),transparent 54%),
    #020A12!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.projects-page .allprojects-stage{position:absolute!important;inset:0!important;padding-top:72px!important}
.projects-page .book-shell{opacity:1!important;transform:none!important;will-change:auto!important}
.projects-page .book-page{opacity:1!important}
.projects-page .book-page.left,
.projects-page .book-page.right{transform:none!important;will-change:auto!important}
.projects-page .book-intro,
.projects-page .book-project-list{opacity:1!important;transform:none!important;pointer-events:auto!important}
.projects-page .book-project{opacity:1!important;transform:none!important;text-decoration:none!important}
.projects-page .book-close{
  text-decoration:none;display:grid;place-items:center;
}
.projects-page .book-project:focus-visible,
.page-nav a:focus-visible,
.case-page-next a:focus-visible{outline:2px solid #3ED6FF;outline-offset:3px}

/* ---------- fashion placeholder: not indexed until full case exists ---------- */
.fashion-page-shell{padding:92px 18px 64px}
.fashion-placeholder{
  width:min(1050px,100%);margin:0 auto;overflow:hidden;
  border:1px solid rgba(183,228,255,.14);border-radius:22px 7px 22px 7px;
  background:#03090f;
}
.fashion-placeholder img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fashion-placeholder__copy{padding:clamp(26px,5vw,64px)}
.fashion-placeholder__copy small{color:rgba(183,228,255,.48);font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.fashion-placeholder__copy h1{margin:12px 0 18px;font-size:clamp(42px,8vw,84px);font-weight:300;letter-spacing:-.065em;line-height:.9}
.fashion-placeholder__copy p{max-width:560px;margin:0;color:rgba(244,248,255,.58);font-size:14px;line-height:1.7}

@media(max-width:700px){
  .page-nav{height:58px;padding:0 14px;background:linear-gradient(180deg,rgba(2,10,18,.98),rgba(2,10,18,.78),transparent)}
  .page-nav__brand{font-size:16px}
  .page-nav__link{min-height:34px;padding:0 11px;font-size:9px}
  .page-nav__actions .page-nav__link:first-child{display:none}
  .case-page-shell{padding:66px 0 28px}
  .case-page .project-case-modal{
    width:100%!important;margin:0!important;border-left:0!important;border-right:0!important;
    border-radius:0!important;box-shadow:none!important;
  }
  .case-page .case-page-next{width:calc(100% - 24px);grid-template-columns:1fr;margin-top:12px}
  .case-page .case-page-next a{min-height:58px}

  .projects-page{overflow:auto!important}
  .projects-page .allprojects-overlay{position:relative!important;min-height:100vh!important;height:auto!important;overflow:visible!important}
  .projects-page .allprojects-stage{
    position:relative!important;inset:auto!important;min-height:100vh!important;height:auto!important;
    padding:74px 12px 28px!important;display:block!important;overflow:visible!important;
  }
  .projects-page .book-shell{
    width:100%!important;height:auto!important;min-height:0!important;display:block!important;
  }
  .projects-page .book-edge,.projects-page .book-spine{display:none!important}
  .projects-page .book-page{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;height:auto!important;border-radius:18px 6px 18px 6px!important;
    overflow:visible!important;margin-bottom:12px!important;contain:none!important;
  }
  .projects-page .book-page.left{display:block!important}
  .projects-page .book-page.right{display:block!important}
  .projects-page .book-intro.book-intro--break{
    min-height:320px!important;height:auto!important;padding:26px 18px!important;
  }
  .projects-page .book-page.left .runaway-area{min-height:180px!important}
  .projects-page .book-projects-heading{position:relative!important;top:auto!important;left:auto!important;padding:24px 18px 0!important;font-size:15px!important}
  .projects-page .book-page.right .book-project-list{
    height:auto!important;padding:18px!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:none!important;gap:10px!important;
  }
  .projects-page .book-project{
    min-height:104px!important;display:grid!important;grid-template-columns:112px 1fr!important;
    border-radius:14px 5px 14px 5px!important;
  }
  .projects-page .book-project-media{position:relative!important;inset:auto!important;width:112px!important;height:102px!important}
  .projects-page .book-project-info{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;padding:16px!important;justify-content:center!important}
  .projects-page .book-project::before{background:linear-gradient(90deg,rgba(1,5,9,.02),rgba(1,5,9,.04) 30%,rgba(1,5,9,.64) 100%)!important}
  .projects-page .book-project-name{font-size:15px!important}
  .projects-page .book-project-bottom{font-size:9px!important}
  .projects-page .book-close{position:fixed!important;top:12px!important;right:12px!important;z-index:500!important}
  .projects-page .zalip-zone{position:fixed!important}
}


/* FINAL PAGE SEMANTICS */
.projects-page .book-projects-heading{margin:0;font-weight:600;}
.case-page h1.case-title{margin:0;}
.case-page .case-page-next a{font-size:12px;line-height:1.35;}
.case-page .case-page-next a span{font-size:9px;}
@media(max-width:700px){
  .projects-page .book-projects-heading{font-size:18px!important;letter-spacing:.06em!important;}
  .case-page .case-page-next a{font-size:13px!important;}
}