/* SR Writings – shared polish: liquid-glass buttons on every top bar, phone tab bar, page transitions, press feedback */
:root{--g-bg:rgba(255,255,255,.55);--g-line:rgba(120,90,60,.18);--g-hi:rgba(255,255,255,.6);--g-shadow:0 4px 14px rgba(40,25,15,.13)}
html[data-theme=dark],:root[data-theme="dark"]{--g-bg:rgba(48,41,36,.55);--g-line:rgba(255,255,255,.13);--g-hi:rgba(255,255,255,.12);--g-shadow:0 4px 14px rgba(0,0,0,.35)}

/* smooth fade between pages (Chrome, Edge, Safari 18) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* liquid-glass buttons on the top bars */
.site-head .site-install,
.top>a,.top>button,.top-in>a,.top-in>button,
.bar .bar-in>a,.bar .bar-in>button,.bar .bar-in>select{
  background:var(--g-bg)!important;border:1px solid var(--g-line)!important;border-radius:999px;
  -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);
  box-shadow:inset 0 1px 0 var(--g-hi),var(--g-shadow)!important;transition:transform .12s ease}
.bar .bar-in{gap:6px!important}
.top>.sp,.bar .bar-in>.sp{background:none!important;border:0!important;box-shadow:none!important}
.site-head .site-donate{background:var(--accent,#4f342f)!important}

/* press feedback */
button:active,a.glass:active,.site-install:active,.top a:active,.bar a:active,.tabbar a:active{transform:scale(.95)}

/* bottom tab bar on phones */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:30;max-width:520px;margin:0 auto;
    justify-content:space-around;padding:6px;border-radius:22px;background:var(--g-bg);border:1px solid var(--g-line);
    -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:inset 0 1px 0 var(--g-hi),0 8px 28px rgba(40,25,15,.2)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:16px;text-decoration:none;
    color:var(--muted,#6a5543);font:600 10.5px/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;transition:background .2s,color .2s,transform .12s}
  .tabbar a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.on{color:var(--accent,#4f342f);background:var(--g-hi)}
  html[data-theme=dark] .tabbar a.on{background:rgba(212,176,138,.16)}
  body.has-tabbar{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body.has-tabbar .pwa-banner{bottom:calc(84px + env(safe-area-inset-bottom))}
  .site-head .site-studies,.site-head .site-charts,.site-head .site-sri,.site-head .site-study{display:none!important}
}

/* home: continue-reading card, cover rows, featured */
.hp{margin:0 0 22px}
.hp h3{font:700 13px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6a5543);margin:18px 2px 10px;display:flex;align-items:baseline;gap:8px}
.hp h3 a{margin-left:auto;font-size:12px;letter-spacing:0;text-transform:none;color:var(--accent,#4f342f);text-decoration:none}
.hp-hero{display:flex;gap:16px;align-items:center;padding:14px;border-radius:18px;text-decoration:none!important;color:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.35));border:1px solid var(--g-line);box-shadow:0 10px 30px rgba(40,25,15,.12)}
html[data-theme=dark] .hp-hero{background:linear-gradient(135deg,rgba(60,52,45,.75),rgba(40,35,30,.45))}
.hp-hero img{width:auto;max-width:100px;height:150px;object-fit:contain;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.25);flex:none;background:white}
.hp-hero small{display:block;font:700 11px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6a5543)}
.hp-hero b{display:block;font:700 19px/1.25 Georgia,serif;margin:4px 0;color:var(--accent,#4f342f)}
.hp-hero span{font:14px system-ui,sans-serif;color:var(--muted,#6a5543)}
.hp-hero i{display:inline-block;margin-top:10px;font:600 14px system-ui,sans-serif;font-style:normal;background:var(--accent,#4f342f);color:var(--bg,#f3e6cd);border-radius:999px;padding:8px 16px}
.hp-row{display:flex;align-items:flex-end;gap:14px;overflow-x:auto;padding:8px 4px 12px;scroll-snap-type:x proximity;scrollbar-width:none}.hp-row::-webkit-scrollbar{display:none}
.hp-cv{flex:0 0 112px;scroll-snap-align:start;text-decoration:none!important;color:inherit;font:12px/1.3 system-ui,sans-serif}
.hp-cv img{display:block;width:auto;max-width:112px;height:170px;object-fit:contain;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);background:white;margin-bottom:6px}
.hp-cv b{display:block;font:700 11px ui-monospace,Menlo,monospace;color:var(--accent,#4f342f)}
.hp-cv span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.hp-fc{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none!important;color:inherit;background:var(--card,#fff);border:1px solid var(--g-line);box-shadow:0 6px 20px rgba(40,25,15,.1)}
.hp-fc img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:white}
.hp-fc div{padding:10px 14px 12px}.hp-fc small{font:700 11px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6a5543)}
.hp-fc b{display:block;font:700 16px/1.3 Georgia,serif;color:var(--accent,#4f342f);margin-top:3px}

/* empty states */
.empty::before{content:"";display:block;width:64px;height:64px;margin:0 auto 12px;opacity:.55;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H18v15H5.5A1.5 1.5 0 0 0 4 19.5z'/%3E%3Cpath d='M4 19.5A1.5 1.5 0 0 0 5.5 21H20V6'/%3E%3Cpath d='M9 8h5M9 11h5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H18v15H5.5A1.5 1.5 0 0 0 4 19.5z'/%3E%3Cpath d='M4 19.5A1.5 1.5 0 0 0 5.5 21H20V6'/%3E%3Cpath d='M9 8h5M9 11h5'/%3E%3C/svg%3E") center/contain no-repeat}
.tg-mine .tg-fav-row{display:none!important}
.hp-top{margin:4px 0 18px}.hp-top h3{margin-top:4px}
/* dark mode: pages that do not define the colour variables (home page) */
html[data-theme=dark] .hp-hero b,html[data-theme=dark] .hp-cv b,html[data-theme=dark] .hp-fc b,html[data-theme=dark] .hp h3 a,html[data-theme=dark] .tabbar a.on{color:#d4b08a}
html[data-theme=dark] .hp h3,html[data-theme=dark] .hp-hero small,html[data-theme=dark] .hp-hero span,html[data-theme=dark] .hp-fc small,html[data-theme=dark] .tabbar a{color:#a69d91}
html[data-theme=dark] .hp-cv,html[data-theme=dark] .hp-fc{color:#e9e3da}
html[data-theme=dark] .hp-hero i{background:#d4b08a;color:#191613}
html[data-theme=dark] .hp-fc{background:#221e1a}
@media (max-width:1100px){.site-head .site-install:not(.site-donate) span{display:none}.site-head .site-install:not(.site-donate){padding:8px 10px!important}}
body:has(#vw:not([hidden])) .tabbar,body:has(.lbx:not([hidden])) .tabbar,body:has(#lb:not([hidden])) .tabbar{display:none!important}
@media (max-width:760px){.site-head .site-name{display:block!important;font-size:16px!important;line-height:1.15;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-head .site-theme{margin-left:auto}}

.tg-view{display:none!important}
.top{transition:transform .28s ease}.top.away{transform:translateY(-110%)}
.top{transition:transform .28s ease}.top.away{transform:translateY(-110%)}

.tg-mine-item.tg-bm small{-webkit-line-clamp:4!important}

/* home: no centred title block; languages on one line on phones */
.tg-gallery .tg-head{display:none!important}
@media (max-width:760px){.tg-langbar{display:flex!important;flex-wrap:nowrap!important;width:100%;max-width:100%;box-sizing:border-box;justify-content:space-between;gap:2px!important;padding:4px!important}
  .tg-langbar .tg-lang{flex:1 1 auto;white-space:nowrap;padding:7px 6px!important;font-size:14px!important;min-width:0}}
.hp{margin-top:6px}
/* home: languages on one line, no centered title, continue reading under the search */
.tg-langbar{flex-wrap:nowrap!important;white-space:nowrap}
@media (max-width:520px){.tg-langbar{gap:2px!important;padding:4px!important}.tg-lang{padding:7px 11px!important;font-size:.86em!important}}
.tg-gallery .tg-head{display:none!important}