@charset "utf-8";
/* Naireen · layout.css — nav bar, chapter shell, footer */

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:40;
  padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(to bottom, rgba(11,11,14,.92), rgba(11,11,14,.66) 70%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.nav-in{
  height:var(--nav); display:flex; align-items:center; gap:clamp(12px,3vw,34px);
  width:min(1240px,100%); margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand svg{height:21px; width:auto; display:block}
.nav-links{display:flex; gap:clamp(10px,2.2vw,26px); margin-inline-start:auto; font-family:var(--f-ar); font-size:14.5px; font-weight:400}
.nav-links a{color:#CFCABE; padding:6px 2px; position:relative; transition:color .22s}
.nav-links a::after{content:""; position:absolute; inset-inline:2px; bottom:2px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:100% 50%; transition:transform .32s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{color:var(--ivory)} .nav-links a:hover::after{transform:scaleX(1)}
.nav .btn{flex:0 0 auto}
.bar{height:1.5px; background:var(--gold); transform:scaleX(0); transform-origin:100% 50%; box-shadow:0 0 12px rgba(214,174,91,.7)}

/* ---------- chapters ---------- */
.ch{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding-block:clamp(96px,13vh,150px)}
.wrap{
  width:min(1240px,100%); margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
.split{display:grid; grid-template-columns:minmax(0,calc(50% + 40px)) 1fr; gap:40px; align-items:center}
.narrow{width:min(620px,100%)}

.eyebrow{
  font-family:var(--f-ui); font-size:11px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:10px; margin:0 0 20px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--gold); opacity:.6; flex:0 0 auto}
h1,h2,h3{font-family:var(--f-ar-display); font-weight:600; line-height:1.14; margin:0; text-wrap:balance; letter-spacing:0}
h1{font-size:clamp(37px,5.6vw,68px)}
h2{font-size:clamp(31px,4.9vw,56px)}
h3{font-size:clamp(21px,2.3vw,25px); line-height:1.3}
.lede{font-size:clamp(16px,1.35vw,18.5px); color:#BFBAAE; max-width:54ch; margin:22px 0 0}
.tag-en{font-family:var(--f-en); font-size:clamp(17px,1.7vw,21px); color:var(--stone); letter-spacing:.01em; font-style:italic}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* reveal (opt-in: only when JS adds .js to <html>) */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1; transform:none}

/* ---------- footer / chapter ---------- */
.foot{position:relative; z-index:1; border-top:1px solid var(--line-soft); padding-block:36px}
.foot-in{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between}
.foot svg{height:19px; width:auto; opacity:.9}
.foot p{margin:0; font-family:var(--f-ui); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--stone)}
.chap{
  position:fixed; z-index:30; bottom:max(18px,env(safe-area-inset-bottom,0px)); inset-inline-end:max(16px,env(safe-area-inset-right,0px));
  font-family:var(--f-ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone);
  display:flex; align-items:center; gap:8px; pointer-events:none;
}
.chap::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold)}

:root{scroll-behavior:smooth}
.ch,#speed{scroll-margin-top:calc(var(--nav) + 8px)}
.foot p.foot-meta{flex-basis:100%; display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:center;
  border-top:1px solid var(--line-soft); padding-top:16px; margin-top:4px !important;
  font-family:var(--f-ui); font-size:11.5px; letter-spacing:.05em; text-transform:none; color:var(--stone)}
.foot-links{display:flex; flex-wrap:wrap; gap:6px}
.foot-links button{background:none; border:1px solid transparent; color:var(--mist); font-family:var(--f-ar); font-size:13.5px; cursor:pointer; padding:6px 10px; border-radius:999px; transition:color .25s,border-color .25s}
.foot-links button:hover{color:var(--flash); border-color:rgba(214,174,91,.4)}
.foot-meta a{color:var(--mist); transition:color .25s}
.foot-meta a:hover{color:var(--flash)}