/* ==========================================================================
   BAGHAJATIN.COM — Shell: masthead, index overlay, footer, motion
   ========================================================================== */

/* ---------- 1. MASTHEAD ---------- */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  height:var(--nav-h);
  background:rgba(8,11,16,.90);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(176,114,46,.26);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.masthead.is-scrolled{
  background:rgba(8,11,16,.97);
  border-bottom-color:rgba(176,114,46,.42);
  box-shadow:0 1px 30px rgba(0,0,0,.4);
}
.masthead__in{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(.8rem,2vw,2rem);
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);
}

/* Wordmark */
.mark{display:flex;align-items:center;gap:.75rem;flex:none;padding-block:.4rem}
.mark__sq{
  width:9px;height:9px;background:var(--copper);flex:none;
  transition:transform .5s var(--ease-out);
}
.mark:hover .mark__sq{transform:rotate(45deg)}
.mark__txt{display:flex;flex-direction:column;line-height:1}
.mark__name{
  font-family:var(--f-display);
  font-size:clamp(1.02rem,1.5vw,1.24rem);
  font-weight:500;
  letter-spacing:.05em;
  color:var(--ivory-050);
  text-transform:uppercase;
}
.mark__yrs{
  font-family:var(--f-mono);
  font-size:.56rem;letter-spacing:.32em;
  color:var(--copper-lt);
  margin-top:.36rem;
}

/* Primary nav — full 12-item row on large screens only */
.nav{display:none}
@media (min-width:1280px){
  .nav{display:flex;align-items:center;gap:clamp(12px,1.15vw,20px);flex-wrap:nowrap}
}
.nav__a{
  font-family:var(--f-mono);
  font-size:.645rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--fog-300);
  white-space:nowrap;
  padding:.6rem 0;
  position:relative;
  transition:color .3s var(--ease);
}
.nav__a::after{
  content:"";position:absolute;left:0;right:0;bottom:.1rem;height:1px;
  background:var(--copper);
  transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.nav__a:hover,.nav__a:focus-visible{color:var(--ivory-050)}
.nav__a:hover::after,.nav__a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__a[aria-current="page"]{color:var(--copper-lt)}
.nav__a[aria-current="page"]::after{transform:scaleX(1);background:var(--copper-lt)}

/* Index toggle */
.idxbtn{
  display:inline-flex;align-items:center;gap:.7rem;flex:none;
  font-family:var(--f-mono);font-size:.645rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-050);
  border:1px solid rgba(243,239,229,.24);
  padding:.72rem 1.05rem;
  min-height:44px;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.idxbtn:hover,.idxbtn:focus-visible{border-color:var(--copper);background:rgba(176,114,46,.14)}
.idxbtn__bars{display:grid;gap:3.5px;width:15px;flex:none}
.idxbtn__bars i{display:block;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.idxbtn__bars i:nth-child(2){width:70%;margin-left:auto}
.idxbtn[aria-expanded="true"] .idxbtn__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.idxbtn[aria-expanded="true"] .idxbtn__bars i:nth-child(2){opacity:0}
.idxbtn[aria-expanded="true"] .idxbtn__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.idxbtn__lbl-close{display:none}
.idxbtn[aria-expanded="true"] .idxbtn__lbl-open{display:none}
.idxbtn[aria-expanded="true"] .idxbtn__lbl-close{display:inline}

/* ---------- 2. INDEX OVERLAY ---------- */
.index{
  position:fixed;inset:0;z-index:8900;
  background:var(--ink-900);
  padding-top:var(--nav-h);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
.index.is-open{opacity:1;visibility:visible}
.index__in{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(2rem,5vw,4rem) var(--gut) clamp(3rem,7vw,5rem);
}
.index__grid{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:860px){.index__grid{grid-template-columns:1.4fr 1fr}}
@media (min-width:1180px){.index__grid{grid-template-columns:1.4fr 1fr .95fr}}
.index__col h2{
  font-size:clamp(.7rem,.9vw,.78rem);
  font-family:var(--f-mono);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--copper-lt);
  padding-bottom:.9rem;margin-bottom:1.4rem;
  border-bottom:1px solid rgba(243,239,229,.14);
}
.index__list{display:grid;gap:0}
.index__link{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:clamp(.6rem,1.1vw,.85rem) 0;
  border-bottom:1px solid rgba(243,239,229,.08);
  color:var(--fog-300);
  transition:color .3s var(--ease),padding-left .4s var(--ease-out);
}
.index__link:hover,.index__link:focus-visible{color:var(--ivory-050);padding-left:.75rem}
.index__link[aria-current="page"]{color:var(--copper-lt)}
.index__n{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--copper-lt);opacity:.85;flex:none;width:2.2em;
}
.index__t{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,2.5vw,1.75rem);
  line-height:1.15;letter-spacing:-.01em;
}
.index__d{
  margin-left:auto;text-align:right;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  color:var(--fog-400);text-transform:uppercase;
  display:none;
}
@media (min-width:700px){.index__d{display:block}}
.index__meta{
  display:grid;gap:1.6rem;
  font-size:var(--t-small);color:var(--fog-300);
}
.index__meta a{color:var(--ivory-050);border-bottom:1px solid rgba(176,114,46,.5);padding-bottom:1px}
.index__meta a:hover{border-bottom-color:var(--copper-lt)}

/* ---------- 3. READING PROGRESS RAIL ---------- */
.rail{
  position:fixed;left:0;top:var(--nav-h);bottom:0;width:3px;z-index:8000;
  background:rgba(8,11,16,.10);pointer-events:none;
}
.rail__fill{
  position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--copper),var(--crimson));
  transform-origin:top;
}
.on-ink-page .rail{background:rgba(243,239,229,.10)}

/* ---------- 4. FOOTER ---------- */
.foot{
  background:var(--ink-900);
  color:var(--ivory-100);
  padding-block:clamp(3.5rem,8vw,6.5rem) clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid rgba(176,114,46,.3);
  position:relative;
}
.foot__top{
  display:grid;gap:clamp(2.4rem,5vw,4rem);
  grid-template-columns:1fr;
  padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid rgba(243,239,229,.12);
}
@media (min-width:760px){.foot__top{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1100px){.foot__top{grid-template-columns:1.7fr 1fr 1fr 1.15fr}}
.foot__brand .display{
  font-size:clamp(1.9rem,4vw,2.9rem);
  color:var(--ivory-050);line-height:1;letter-spacing:.01em;
}
.foot__yrs{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.3em;
  color:var(--copper-lt);margin-top:.9rem;
}
.foot__blurb{
  margin-top:1.4rem;max-width:42ch;
  color:var(--fog-300);font-size:var(--t-small);line-height:1.6;
}
.foot h2{
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--copper-lt);
  margin-bottom:1.25rem;
}
.foot__list{display:grid;gap:.62rem}
.foot__list a{
  color:var(--fog-300);font-size:var(--t-small);
  display:inline-block;padding-block:.16rem;
  transition:color .3s var(--ease),transform .35s var(--ease-out);
}
.foot__list a:hover,.foot__list a:focus-visible{color:var(--ivory-050);transform:translateX(4px)}
.foot__contact{display:grid;gap:1.15rem}
.foot__ci{display:grid;gap:.3rem}
.foot__ck{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fog-400);
}
.foot__cv{
  font-family:var(--f-display);font-size:clamp(1.05rem,1.7vw,1.3rem);
  color:var(--ivory-050);letter-spacing:.01em;
  border-bottom:1px solid rgba(176,114,46,.42);
  padding-bottom:.22rem;display:inline-block;
  transition:border-color .3s var(--ease),color .3s var(--ease);
  overflow-wrap:anywhere;
}
a.foot__cv:hover,a.foot__cv:focus-visible{color:var(--copper-lt);border-bottom-color:var(--copper-lt)}

/* Social icons — rendered as icons only. No profile has been verified for this
   project, so these are deliberately not links to invented destinations. */
.social{display:flex;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap}
.social__i{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;
  border:1px solid rgba(243,239,229,.2);
  color:var(--fog-300);
}
.social__i svg{width:16px;height:16px}
.social__note{
  margin-top:.9rem;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.08em;color:var(--fog-400);line-height:1.6;max-width:34ch;
}
.foot__bottom{
  padding-top:clamp(1.5rem,3vw,2.2rem);
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;
  align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;
  color:var(--fog-400);
}
.foot__bottom a{color:var(--fog-300);border-bottom:1px solid rgba(176,114,46,.45);padding-bottom:1px}
.foot__bottom a:hover,.foot__bottom a:focus-visible{color:var(--copper-lt);border-bottom-color:var(--copper-lt)}
.foot__credit strong{color:var(--ivory-100);font-weight:500}

/* ---------- 5. MOTION PRIMITIVES ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}

[data-reveal="mask"]{
  opacity:1;transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}

[data-reveal="wipe"]{
  opacity:1;transform:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0)}

[data-reveal="rise"]{transform:translateY(46px)}
[data-reveal="fade"]{transform:none}

/* Line-by-line display reveal */
.rvl-line{display:block;overflow:hidden}
.rvl-line > span{
  display:block;
  transform:translateY(102%);
  transition:transform 1.05s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.is-in .rvl-line > span,.rvl-line.is-in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal="mask"],[data-reveal="wipe"]{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .rvl-line > span{transform:none!important;transition:none!important}
  .rail__fill{transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------- 6. NO-JS FALLBACK ---------- */
.no-js [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
.no-js .rvl-line > span{transform:none!important}
/* Without JS the overlay cannot be dismissed — hide it and rely on the
   footer, which links to every page on the site. */
.no-js .index,.no-js .idxbtn{display:none}
.no-js .rail{display:none}