/* ══════════════════════════════════════════════════════════════════
   Traveling Flâneur — site footer
   Self-contained: tokens + light and dark variants + responsive.
   Pair with flaneur-footer.js. Shares tokens with flaneur-nav.css —
   loading both is fine, the :root block is identical.
   ══════════════════════════════════════════════════════════════════ */

:root{
 --white:#fff;--parch:#F6F1E9;--oak:#E0D2BB;--grey:#939080;
 --olive:#605831;--ink:#464529;--body:#5b5947;--hover:#7d7448;--line:#e2d8c2;
 --foot-pad:52px 100px;
}

.tf-foot,.tf-foot *{box-sizing:border-box}
.tf-foot{font-family:"Noto Serif Bengali",Georgia,serif;border-top:1px solid var(--line);padding:var(--foot-pad);background:var(--white);color:var(--body)}
.tf-foot a{text-decoration:none;transition:color .18s}

/* ── top row: brand · links · social ────────────────────────────── */
.tf-foot-top{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.tf-foot-brand{display:flex;align-items:center;gap:14px}
.tf-foot-brand img{height:28px;width:auto;display:block}
.tf-foot-brand b{font-size:19px;font-weight:600;color:var(--ink);line-height:1.2}
.tf-foot-brand .tf-foot-tag{display:block;font-size:14px;font-weight:400;color:var(--grey);margin-top:3px}

.tf-foot-links{display:flex;gap:26px;flex-wrap:wrap;margin-left:auto}
.tf-foot-links a{font-size:15px;color:var(--body);position:relative}
.tf-foot-links a:hover{color:var(--olive)}
.tf-foot-links a[aria-current="page"]{color:var(--olive);font-weight:600}

.tf-foot-social{display:flex;gap:16px}
.tf-foot-social a{color:var(--grey);display:flex;align-items:center}
.tf-foot-social a:hover{color:var(--olive)}

/* ── bottom row: legal · motto ──────────────────────────────────── */
.tf-foot-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;width:100%;margin-top:30px;padding-top:26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--grey)}
.tf-foot-legal{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.tf-foot-legal a{color:var(--grey)}
.tf-foot-legal a:hover{color:var(--olive)}
.tf-foot-motto{font-style:italic;font-size:14.5px;color:var(--olive)}

/* language toggle — same control as the nav, quieter here */
.tf-foot .tf-lang{display:flex;gap:2px;padding:3px;border-radius:100px;background:rgba(96,88,49,.08)}
.tf-foot .tf-lang a,.tf-foot .tf-lang button{border:0;cursor:pointer;font-family:inherit;border-radius:100px;padding:5px 12px;font-size:12.5px;font-weight:600;letter-spacing:.05em;background:transparent;color:var(--grey);transition:background .18s,color .18s}
.tf-foot .tf-lang a:hover,.tf-foot .tf-lang button:hover{color:var(--ink)}
.tf-foot .tf-lang [aria-pressed="true"]{background:var(--olive);color:#fff}

/* ── dark variant — for pages ending on an ink band ─────────────── */
.tf-foot.is-dark{background:var(--ink);border-color:rgba(224,210,187,.2);color:#cfc7b4}
.tf-foot.is-dark .tf-foot-brand b{color:#fff}
.tf-foot.is-dark .tf-foot-brand img{filter:invert(1)}
.tf-foot.is-dark .tf-foot-tag{color:#a49c88}
.tf-foot.is-dark .tf-foot-links a{color:#d6cebb}
.tf-foot.is-dark .tf-foot-links a:hover,.tf-foot.is-dark .tf-foot-social a:hover,.tf-foot.is-dark .tf-foot-legal a:hover{color:var(--oak)}
.tf-foot.is-dark .tf-foot-links a[aria-current="page"]{color:var(--oak)}
.tf-foot.is-dark .tf-foot-social a{color:#a49c88}
.tf-foot.is-dark .tf-foot-bottom{border-color:rgba(224,210,187,.2);color:#a49c88}
.tf-foot.is-dark .tf-foot-legal a{color:#a49c88}
.tf-foot.is-dark .tf-foot-motto{color:var(--oak)}
.tf-foot.is-dark .tf-lang{background:rgba(255,255,255,.12)}
.tf-foot.is-dark .tf-lang a,.tf-foot.is-dark .tf-lang button{color:#cfc7b4}
.tf-foot.is-dark .tf-lang [aria-pressed="true"]{background:var(--oak);color:var(--ink)}

/* ── focus ──────────────────────────────────────────────────────── */
.tf-foot a:focus-visible,.tf-foot button:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:4px}
.tf-foot.is-dark a:focus-visible,.tf-foot.is-dark button:focus-visible{outline-color:var(--oak)}

/* ── responsive ─────────────────────────────────────────────────── */
/* between 900 and 1150 the 100px gutters starve the row — tighten them
   so the brand · links · social line stays a single row all the way
   down to the mobile breakpoint. */
@media (max-width:1150px){
 :root{--foot-pad:52px 40px}
 .tf-foot-top{gap:24px}
 .tf-foot-links{gap:18px}
}
@media (max-width:900px){
 :root{--foot-pad:40px 26px}
 .tf-foot-top{flex-direction:column;gap:28px}
 .tf-foot-links{margin-left:0;flex-direction:column;gap:14px}
 .tf-foot-links a{font-size:17px;padding:2px 0}   /* ≥44px rows with line-height */
 .tf-foot-bottom{flex-direction:column;align-items:flex-start;gap:14px;margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
 .tf-foot a,.tf-foot button{transition-duration:.01ms!important}
}