/* The shelf (home page). Uses the colours and fonts from site.css. */
.home-shelf{background:radial-gradient(ellipse 80% 60% at 50% 38%,#3a1c1c 0%,var(--bg) 55%,var(--bg-deep) 100%) fixed}
.shelf-section{max-width:1240px;margin:0 auto;padding:0 24px 56px}
.shelf-head{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 0 8px}
.shelf-head .eyebrow{margin-bottom:6px}
.shelf-head h1{font-size:clamp(26px,3vw,40px);font-weight:500;line-height:1.45;margin:0;color:var(--gold)}
.shelf-head h1.typing::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:4px;vertical-align:-.1em;background:var(--gold);animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.shelf-head .home-name{display:inline;font:italic 21px/1.4 var(--display);margin:0;color:var(--text)}
.shelf-head .home-description{display:inline;font-size:18px;line-height:1.5;margin:0 0 0 10px;color:var(--muted)}
.shelf-head .home-description br{display:none}
.shelf-emblem{width:84px;height:84px;object-fit:cover;border-radius:50%;border:1px solid var(--gold);box-shadow:0 10px 40px #0006;flex-shrink:0}

.shelf-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:10px 0 12px;border-top:1px solid var(--line)}
.shelf-filters{display:flex;flex-wrap:wrap;gap:8px}
.shelf-filter{display:flex;align-items:baseline;gap:8px;padding:7px 15px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font:15px/1.3 var(--display);background:#2c1b1e;min-height:42px;align-items:center}
.shelf-filter [lang=te]{font-size:15px;color:var(--gold)}
.shelf-filter:hover:not(:disabled){background:#3b2728;color:var(--text)}
.shelf-filter[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#2a1b12}
.shelf-filter[aria-pressed=true] [lang=te]{color:#2a1b12}
.shelf-search{display:flex;gap:8px;align-items:center;flex:0 1 430px;min-width:260px}
.shelf-search input{flex:1;min-width:0;min-height:42px;background:#160d10;border:1px solid var(--line);border-radius:3px;color:var(--text);font:17px/1.3 var(--body);padding:8px 14px}
.shelf-search input::placeholder{color:#8f7c6b}
.shelf-search input:focus{outline:2px solid var(--gold);outline-offset:2px}
.shelf-search button{white-space:nowrap}

.shelf-stage{position:relative;height:clamp(440px,calc(100svh - 292px),740px);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:radial-gradient(ellipse 70% 70% at 50% 45%,#4a2a24 0%,#2a1618 48%,#160d10 100%)}
.shelf-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.shelf-tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;background:#160d10ee;border:1px solid var(--gold);border-radius:3px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap;z-index:3}
.shelf-tip b{font-weight:400;font-size:18px;line-height:1.5;color:var(--text)}
.shelf-tip span{font:italic 13px/1.3 var(--display);color:var(--gold)}
.shelf-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;padding:5px 16px;border-radius:99px;background:#160d1099;backdrop-filter:blur(6px);color:var(--text);font:italic 13px/1.4 var(--display);letter-spacing:.14em;pointer-events:none;transition:opacity .6s;display:none;white-space:nowrap}
.shelf-hint.hide{opacity:0}
.shelf-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:var(--muted);font:italic 22px/1.5 var(--display);pointer-events:none;text-align:center;padding:24px}

.shelf-card{position:absolute;right:22px;top:50%;width:min(360px,calc(100% - 44px));max-height:calc(100% - 40px);overflow:auto;transform:translate(24px,-50%);opacity:0;background:#1c1013f2;border:1px solid var(--gold);border-radius:4px;padding:26px 26px 20px;box-shadow:0 20px 60px #000a;transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1);z-index:4}
.shelf-card.on{opacity:1;transform:translate(0,-50%)}
.shelf-card[hidden]{display:none}
.card-close{position:absolute;right:8px;top:6px;border:0;font-size:26px;line-height:1;padding:6px 10px;min-height:40px;color:var(--muted)}
.card-kicker{margin:0 28px 10px 0;font:13px/1.6 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card-kicker [lang=te]{text-transform:none;letter-spacing:0;font-size:15px;color:var(--gold)}
.shelf-card h2{font:400 30px/1.35 var(--display);margin:0 0 4px;color:var(--text)}
.shelf-card h2[lang=te]{font-family:'Noto Serif Telugu',serif;font-size:26px;line-height:1.7}.shelf-card h2[lang=hi]{font-family:'Noto Serif Devanagari',serif;font-size:26px;line-height:1.7}
.card-sub{font:italic 19px/1.4 var(--body);margin:0 0 12px;color:var(--muted)}
.card-desc{font-size:18px;line-height:1.55;color:var(--muted);margin:0 0 20px}
.card-actions{display:flex;gap:10px;margin-bottom:14px}
.card-read{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 28px;background:var(--gold);color:#2a1b12;border-radius:3px;font:16px/1 var(--display);font-weight:500}
.card-read:hover{background:#f0cd8a}
.card-steps{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}
.card-steps button{font-size:14px;padding:6px 12px;min-height:40px}
.card-steps #cardShare{margin-left:auto}

/* the same list, for keyboards, screen readers and browsers without 3D */
.shelf-list{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.shelf-list h3{font:italic 15px/1.5 var(--display);color:var(--gold);margin:0 0 8px;font-weight:400}
.shelf-list h3 [lang=te]{font-style:normal}
.shelf-list ul{list-style:none;padding:0;margin:0}
.shelf-list a{display:block;padding:5px 0;font-size:18px;line-height:1.5;color:var(--muted)}
.shelf-list a:hover{color:var(--gold)}
.shelf-ok .shelf-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
.shelf-ok .shelf-list:focus-within{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
html:not(.shelf-ok) .shelf-stage,html:not(.shelf-ok) .shelf-tools,html:not(.shelf-ok) .shelf-search{display:none}
.shelf-section .hall-links{margin-top:30px;border-top:1px solid var(--line)}

@media (max-width:900px){.shelf-list{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
  .shelf-section{padding:0 14px 40px}
  .shelf-head{padding:20px 0 10px;gap:14px;align-items:flex-start}
  .shelf-head .home-name{font-size:19px}.shelf-head .home-description{font-size:17px}
  .shelf-emblem{width:72px;height:72px;margin-top:4px}
  .shelf-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none;width:calc(100% + 28px)}
  .shelf-filters::-webkit-scrollbar{display:none}
  .shelf-filter{flex:0 0 auto}
  .shelf-search{flex:1 1 100%}
  .shelf-stage{height:clamp(420px,66svh,640px)}
  .shelf-hint{display:block}
  .shelf-card{right:10px;left:10px;top:auto;bottom:10px;width:auto;max-height:none;overflow:visible;transform:translateY(24px);padding:14px 16px 12px}
  .shelf-card.on{transform:none}
  .card-close{top:2px;right:4px}
  .card-kicker{font-size:11px;margin:0 30px 4px 0;line-height:1.5}.card-kicker [lang=te]{font-size:13px}
  .shelf-card h2{font-size:21px;line-height:1.3;margin:0}.shelf-card h2[lang=te],.shelf-card h2[lang=hi]{font-size:20px;line-height:1.55}
  .card-sub{font-size:16px;margin:0 0 6px}
  .card-desc{font-size:15px;line-height:1.45;margin:0 0 10px}
  .card-actions{margin-bottom:10px}.card-read{min-height:42px;padding:0 24px}
  .card-actions button{min-height:42px}
  .card-steps{padding-top:10px;gap:6px}.card-steps button{min-height:38px;font-size:13px;padding:4px 10px}
  .shelf-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.shelf-card,.shelf-hint{transition:none}.shelf-head h1.typing::after{animation:none}}