/* Shared identity, language dialog and media feedback across all pages. */
.titi-badge{display:inline-flex!important;align-items:center;gap:.5em;padding:.65em 1em;border:1px solid currentColor;border-radius:100px;color:inherit;text-decoration:none;font:500 12px/1.2 Arial,sans-serif;letter-spacing:.025em;width:max-content;max-width:100%;transition:background .2s,color .2s}
.titi-badge:hover{background:#242622;color:#f4f1e9}.titi-badge:focus-visible{outline:2px solid #a65532;outline-offset:4px}.titi-badge small{font:inherit;opacity:.65}.titi-badge strong{font-weight:600;white-space:nowrap}.titi-badge sup{font-size:.65em;vertical-align:super;margin-inline-start:.13em}
.media-host{position:relative}.media-loading{position:absolute;inset:45% auto auto 45%;width:24px;height:24px;border:2px solid #ddd;border-top-color:#78583d;border-radius:50%;animation:media-turn .8s linear infinite;pointer-events:none}.media-loading[hidden]{display:none}@keyframes media-turn{to{transform:rotate(360deg)}}
.language-dock{position:fixed;inset:auto 20px 22px auto;z-index:10020;border:1px solid #b7b1a7;border-radius:100px;padding:12px 18px;background:#f5f2eb;color:#292922;font:500 13px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 16px #0001}
#lang-panel{position:fixed!important;inset:0!important;z-index:10040!important;background:#181b1888!important;padding:24px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;transform:none!important;opacity:1!important;visibility:visible!important}
#lang-panel[hidden]{display:none!important}#lang-panel .lang-panel-inner{position:relative!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;width:min(680px,100%)!important;max-height:85dvh!important;overflow:auto!important;padding:56px 24px 24px!important;background:#f5f2eb!important;border-radius:20px!important;box-sizing:border-box!important}
#lang-panel .lang-item{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center;gap:8px!important;border:1px solid transparent!important;border-radius:14px!important;padding:12px 5px!important;background:transparent!important;color:#292922!important;font:12px/1.3 Arial,sans-serif!important;cursor:pointer;min-width:0!important;text-align:center!important}
#lang-panel .lang-item:hover,#lang-panel .lang-item[aria-pressed=true]{background:#e5dfd3!important;border-color:#c2b5a0!important}#lang-panel .lang-avatar{width:64px!important;height:64px!important;border-radius:50%!important;overflow:hidden!important;flex-shrink:0}#lang-panel img{width:100%!important;height:100%!important;object-fit:cover!important}#lang-panel .lang-name{color:#292922!important;font:inherit!important;text-transform:none!important;letter-spacing:0!important}#lang-panel .lang-close{position:absolute;inset:12px 16px auto auto;border:0;background:transparent;color:#292922;font:28px/1 Arial;cursor:pointer;padding:6px}
body:has(#lang-panel:not([hidden])){overflow:hidden}.language-native{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;padding:0!important;margin:0!important}
@media(max-width:600px){#lang-panel{padding:12px!important}#lang-panel .lang-panel-inner{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:50px 10px 16px!important}#lang-panel .lang-avatar{width:48px!important;height:48px!important}.language-dock{right:12px;bottom:calc(16px + env(safe-area-inset-bottom));padding:12px}body{padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){.media-loading{animation:none}}
/* On phones the extra language control stays in the document flow; the header and footer also open the picker. */
@media(max-width:600px){.language-dock{position:static;display:flex;width:max-content;max-width:calc(100% - 128px);margin:16px 64px}}
#lang-panel .lang-avatar{position:relative;background:#eee8dc}#lang-panel .lang-avatar img{position:absolute;width:400%!important;height:400%!important;max-width:none!important;left:var(--avatar-x);top:var(--avatar-y);object-fit:fill!important}

.media-pause{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:10020;width:42px;height:42px;border:1px solid #b7b1a7;border-radius:50%;background:#f5f2eb;color:#292922;cursor:pointer;font:16px Arial}
#lang-panel .lang-panel-inner{align-content:start!important;justify-items:stretch!important}
#lang-panel .lang-item{width:100%!important;max-width:none!important;box-sizing:border-box!important}
#lang-panel .lang-avatar{max-width:none!important;max-height:none!important;border:0!important;transform:none!important}
#lang-panel .lang-name{display:block!important;width:100%!important;white-space:nowrap!important;overflow-wrap:normal!important;line-height:1.4!important}

#lang-panel .lang-person{display:block!important;max-width:100%;font:11px/1.3 Arial,sans-serif!important;color:#675e50!important;white-space:normal;text-align:center}#lang-panel .lang-item{gap:5px!important}#lang-panel .lang-avatar{width:72px!important;height:72px!important}
@media(max-width:600px){#lang-panel .lang-avatar{width:56px!important;height:56px!important}}

/* One readable, tappable attribution across legacy and current page layouts. */
html body a.titi-badge{box-sizing:border-box;min-height:44px;flex-wrap:nowrap;white-space:nowrap;text-decoration:none;line-height:1.2}
html body a.titi-badge small{display:inline;font-size:12px}
html body a.titi-badge strong{display:inline;font-size:12px}
html body footer:has(.titi-badge){padding-bottom:max(88px,calc(64px + env(safe-area-inset-bottom)))}

/* Shared editorial credits, readable at phone widths and in RTL. */
.site-credits{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:8px 24px;width:100%;max-width:1180px;margin:0 auto;padding:24px 20px 100px;text-align:start;font:14px/1.6 Arial,sans-serif;letter-spacing:normal;color:inherit;overflow-wrap:anywhere}
.site-credits>span{display:block;max-width:100%}.site-credits>p{flex-basis:100%;margin:4px 0 0;max-width:75ch;font:inherit}
.fg-footer>.site-credits,.talk-footer>.site-credits{padding:0}
@media print{.site-credits{padding:12px 0;font-size:10pt}}

footer:has(>.site-credits){grid-template-columns:minmax(0,1fr)}
#site-footer-v5:has(.site-credits){position:static}
