/* ══════════════════════════════════════════════════════════════════
   Traveling Flâneur — site navigation
   Self-contained: tokens + desktop pill nav + mobile bar + drawer.
   Depends on nothing. Pair with flaneur-nav.js.
   ══════════════════════════════════════════════════════════════════ */

:root{
 --white:#fff;--parch:#F6F1E9;--oak:#E0D2BB;--grey:#939080;
 --olive:#605831;--ink:#464529;--body:#5b5947;--hover:#7d7448;--line:#e2d8c2;
 --nav-top:18px;              /* distance from top of the page   */
 --nav-break:900px;           /* below this, mobile bar + drawer */
 --nav-ease:cubic-bezier(.4,0,.2,1);
}

.tf-nav,.tf-nav *,.tf-bar,.tf-bar *,.tf-drawer,.tf-drawer *{box-sizing:border-box}
.tf-nav,.tf-bar,.tf-drawer{font-family:"Noto Serif Bengali",Georgia,serif}
.tf-nav a,.tf-bar a,.tf-drawer a{text-decoration:none}

/* ── desktop: floating "tubelight" pill ─────────────────────────── */
.tf-nav{position:absolute;top:var(--nav-top);left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:2px;padding:5px;border-radius:100px;background:rgba(255,255,255,.9);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid rgba(226,216,194,.85);box-shadow:0 4px 22px rgba(96,88,49,.07);transition:top .3s var(--nav-ease),background .25s,box-shadow .25s,transform .3s var(--nav-ease)}
.tf-nav .tf-mark{display:flex;align-items:center;padding:6px 15px}
.tf-nav .tf-mark img{height:23px;width:auto;display:block}
.tf-nav .tf-link{padding:9px 16px;border-radius:100px;font-size:15px;line-height:1;color:var(--ink);white-space:nowrap;position:relative;transition:background .18s,color .18s}
.tf-nav .tf-link:hover{background:rgba(96,88,49,.07)}
.tf-nav .tf-link[aria-current="page"]{background:rgba(96,88,49,.1);font-weight:600}
/* the "tubelight" bar above the active item */
.tf-nav .tf-link[aria-current="page"]::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:26px;height:3px;background:var(--olive);border-radius:0 0 3px 3px;box-shadow:0 0 10px 1px rgba(96,88,49,.45)}

/* language toggle (shared by nav + drawer) */
.tf-lang{display:flex;gap:2px;margin-left:6px;padding:3px;border-radius:100px;background:rgba(96,88,49,.08)}
.tf-lang button{border:0;cursor:pointer;font-family:inherit;border-radius:100px;padding:6px 13px;font-size:13px;font-weight:600;letter-spacing:.05em;background:transparent;color:var(--grey);transition:background .18s,color .18s}
.tf-lang button:hover{color:var(--ink)}
.tf-lang button[aria-pressed="true"]{background:var(--olive);color:#fff}

/* dark variant — for navs sitting on a photo or an ink band */
.tf-nav.is-dark{background:rgba(52,51,31,.55);border-color:rgba(224,210,187,.24)}
.tf-nav.is-dark .tf-link{color:#efe9dc}
.tf-nav.is-dark .tf-link:hover{background:rgba(255,255,255,.1)}
.tf-nav.is-dark .tf-link[aria-current="page"]{background:rgba(255,255,255,.14)}
.tf-nav.is-dark .tf-link[aria-current="page"]::before{background:var(--oak);box-shadow:0 0 10px 1px rgba(224,210,187,.5)}
.tf-nav.is-dark .tf-mark img{filter:invert(1)}
.tf-nav.is-dark .tf-lang{background:rgba(255,255,255,.12)}
.tf-nav.is-dark .tf-lang button{color:#cfc7b4}
.tf-nav.is-dark .tf-lang button[aria-pressed="true"]{background:var(--oak);color:var(--ink)}

/* scrolled: pill detaches from the hero and pins to the viewport   */
.tf-nav.is-fixed{position:fixed}
.tf-nav.is-stuck{top:10px;background:rgba(255,255,255,.96);box-shadow:0 6px 26px rgba(96,88,49,.13)}
.tf-nav.is-stuck.is-dark{background:rgba(52,51,31,.82)}
/* scrolling down hides it; scrolling up brings it back            */
.tf-nav.is-hidden{transform:translateX(-50%) translateY(-140%)}

/* ── mobile bar ─────────────────────────────────────────────────── */
.tf-bar{display:none;position:absolute;top:0;left:0;right:0;z-index:60;align-items:center;gap:10px;padding:14px 18px;transition:background .25s,box-shadow .25s,transform .3s var(--nav-ease)}
.tf-bar .tf-mark{display:flex;align-items:center;gap:10px}
.tf-bar .tf-mark img{height:20px;width:auto;display:block}
.tf-bar .tf-wordmark{font-size:15px;font-weight:600;color:var(--ink)}
.tf-bar.is-fixed{position:fixed}
.tf-bar.is-stuck{background:rgba(255,255,255,.95);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 4px 20px rgba(96,88,49,.1)}
.tf-bar.is-hidden{transform:translateY(-120%)}
.tf-bar.is-dark .tf-wordmark{color:#efe9dc}
.tf-bar.is-dark .tf-mark img{filter:invert(1)}
.tf-bar.is-dark .tf-burger i{background:#efe9dc}

/* hamburger — three rules that fold into an X */
.tf-burger{margin-left:auto;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;border:0;background:transparent;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.tf-burger i{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--nav-ease),opacity .2s,width .3s var(--nav-ease)}
.tf-burger i:nth-child(2){width:16px}
.tf-burger:hover i:nth-child(2){width:22px}
.tf-burger[aria-expanded="true"] i{background:var(--ink);width:22px}
.tf-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.tf-burger[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(.2)}
.tf-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── drawer ─────────────────────────────────────────────────────── */
.tf-drawer{position:fixed;inset:0;z-index:70;background:var(--white);display:flex;flex-direction:column;padding:86px 26px 34px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s var(--nav-ease),transform .35s var(--nav-ease),visibility .3s}
.tf-drawer.is-open{opacity:1;visibility:visible;transform:none}
.tf-drawer-links{display:flex;flex-direction:column;margin-top:8px}
.tf-drawer-links a{position:relative;display:flex;align-items:baseline;gap:14px;padding:19px 0;font-size:31px;line-height:1.1;color:var(--ink);border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .4s var(--nav-ease),transform .4s var(--nav-ease),color .18s}
.tf-drawer.is-open .tf-drawer-links a{opacity:1;transform:none}
.tf-drawer.is-open .tf-drawer-links a:nth-child(1){transition-delay:.06s}
.tf-drawer.is-open .tf-drawer-links a:nth-child(2){transition-delay:.11s}
.tf-drawer.is-open .tf-drawer-links a:nth-child(3){transition-delay:.16s}
.tf-drawer.is-open .tf-drawer-links a:nth-child(4){transition-delay:.21s}
.tf-drawer-links a .tf-idx{font-size:12px;letter-spacing:.16em;color:var(--oak);min-width:22px}
.tf-drawer-links a:active{color:var(--hover)}
.tf-drawer-links a[aria-current="page"]{color:var(--olive);font-weight:600}
.tf-drawer-links a[aria-current="page"] .tf-idx{color:var(--olive)}
.tf-drawer-foot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:18px;opacity:0;transition:opacity .4s var(--nav-ease) .26s}
.tf-drawer.is-open .tf-drawer-foot{opacity:1}
.tf-drawer-foot .tf-lang{align-self:flex-start;margin-left:0}
.tf-drawer-motto{font-style:italic;font-size:19px;color:var(--olive)}
.tf-drawer-social{display:flex;gap:18px}
.tf-drawer-social a{color:var(--grey);display:flex;transition:color .18s}
.tf-drawer-social a:hover{color:var(--olive)}

/* ── focus, breakpoint, motion ──────────────────────────────────── */
.tf-nav a:focus-visible,.tf-bar button:focus-visible,.tf-drawer a:focus-visible,.tf-lang button:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:100px}
.tf-nav.is-dark a:focus-visible,.tf-nav.is-dark .tf-lang button:focus-visible{outline-color:var(--oak)}
body.tf-locked{overflow:hidden}

@media (max-width:900px){
 .tf-nav{display:none}
 .tf-bar{display:flex}
}
@media (prefers-reduced-motion:reduce){
 .tf-nav,.tf-bar,.tf-drawer,.tf-drawer-links a,.tf-drawer-foot,.tf-burger i{transition-duration:.01ms!important}
 .tf-nav.is-hidden,.tf-bar.is-hidden{transform:translateX(-50%)}
 .tf-bar.is-hidden{transform:none}
}