:root{
  --cocoa:#2E241D;
  --cocoa-deep:#1D1612;
  --ivory:#F6F1EA;
  --brass-light:#C4A87A;
  --brass:#887553;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cocoa-deep)}
body{
  margin:0;
  min-width:320px;
  background:var(--cocoa-deep);
  color:var(--ivory);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}

/* The approved frames are the site. No repeated numbers, headings or copy. */
.site-shell{
  width:100%;
  margin:0 auto;
  background:var(--cocoa-deep);
}
.frame{
  position:relative;
  width:100%;
  margin:0;
  overflow:hidden;
  background:var(--cocoa-deep);
}
.artwork{
  position:relative;
  width:100%;
  margin:0 auto;
  line-height:0;
}
.artwork img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0;
}

/* Mobile: every approved portrait frame runs edge to edge. */
@media (max-width:899px){
  .site-shell{max-width:none}
  .frame,.artwork{width:100%}

  .hero-frame{
    min-height:0;
    display:block;
  }
  .hero-frame::before,
  .hero-frame::after{display:none}
  .hero-frame .artwork,
  .hero-frame picture{display:block;width:100%;height:auto}
  .hero-frame .artwork img{width:100%;height:auto;max-width:none}
}

/* Desktop: one large continuous editorial column, never a tiny phone mock-up. */
@media (min-width:900px){
  body{
    background:
      radial-gradient(circle at 50% 12%,rgba(136,117,83,.10),transparent 34%),
      var(--cocoa-deep);
  }
  .site-shell{
    width:min(100%,1180px);
    box-shadow:0 0 90px rgba(0,0,0,.34);
  }

  
}

/* The menu remains functional on every screen. */
.site-menu-button{
  position:fixed;
  top:max(18px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  z-index:900;
  width:50px;
  height:50px;
  border:1px solid rgba(196,168,122,.68);
  border-radius:50%;
  background:rgba(46,36,29,.90);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.26);
}
.site-menu-button span{display:block;width:21px;height:1.5px;background:var(--ivory)}
.site-menu-button:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px}
@media(max-width:899px){
  .site-menu-button{width:46px;height:46px;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
}

/* Invisible click target over the approved Apply artwork. */
.apply-hotspot{
  position:absolute;
  z-index:20;
  left:5%;
  bottom:3.8%;
  width:40%;
  height:8%;
  border-radius:4px;
  -webkit-tap-highlight-color:rgba(196,168,122,.18);
}
.apply-hotspot:focus-visible{outline:2px solid var(--brass-light);outline-offset:4px}

.menu-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(30,23,18,.995);
  color:var(--ivory);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.menu-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.menu-inner{
  width:min(100%,920px);
  min-height:100dvh;
  margin:0 auto;
  padding:max(26px,env(safe-area-inset-top)) clamp(28px,7vw,86px) max(30px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}
.menu-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:clamp(34px,6vh,70px)}
.menu-wordmark{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,6vw,62px);line-height:1}
.menu-close{width:48px;height:48px;border:1px solid rgba(196,168,122,.45);border-radius:50%;background:transparent;color:var(--ivory);font:300 31px/1 Georgia,serif;cursor:pointer}
.chapter-nav{border-top:1px solid rgba(196,168,122,.35)}
.chapter-nav a{display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:center;min-height:62px;border-bottom:1px solid rgba(196,168,122,.28);color:var(--ivory);text-decoration:none;letter-spacing:.13em}
.chapter-nav span{color:var(--brass-light);font-family:Georgia,'Times New Roman',serif;font-size:21px;letter-spacing:.04em}
.chapter-nav strong{font-size:12px;font-weight:500}
.chapter-nav a:hover strong,.chapter-nav a:focus-visible strong{color:var(--brass-light)}
.chapter-nav a:focus-visible{outline:none}
.menu-footer{margin-top:auto;padding-top:28px;color:rgba(246,241,234,.58);font-family:Georgia,serif;font-style:italic;font-size:15px;line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* === V6: Separate mobile and desktop layouts === */

/* Mobile remains exactly as approved. */
.mobile-layout{display:block}
.desktop-layout{display:none}

@media (max-width:899px){
  .mobile-layout{display:block}
  .desktop-layout{display:none}
}

/* Desktop is an independent editorial column.
   Every frame shares one width and one left/right alignment. */
@media (min-width:900px){
  .mobile-layout{display:none !important}
  .desktop-layout{
    display:block;
    width:min(100%,1180px);
    margin:0 auto;
    background:var(--cocoa-deep);
    box-shadow:0 0 90px rgba(0,0,0,.34);
  }

  .desktop-frame{
    position:relative;
    width:100%;
    margin:0;
    overflow:hidden;
    background:var(--cocoa-deep);
    line-height:0;
  }

  .desktop-frame img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
  }

  .desktop-artwork{
    position:relative;
    width:100%;
  }

  .desktop-apply-hotspot{
    position:absolute;
    z-index:20;
    left:5%;
    bottom:3.8%;
    width:40%;
    height:8%;
    border-radius:4px;
  }

  .desktop-apply-hotspot:focus-visible{
    outline:2px solid var(--brass-light);
    outline-offset:4px;
  }
}