/* Readings hub (and other hubs): hero, section titles, and reading tiles with a fanned hand of cards. */
.hub-hero{text-align:center;max-width:760px;margin:0 auto 46px}
.hub-hero h1{margin:6px 0 14px}
.hub-hero .lead{margin:0 auto 22px;max-width:620px}
.hub-promises{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;list-style:none;padding:0;margin:0}
.hub-promises li{padding:7px 14px 7px 30px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:#d9cfdd;position:relative;background:#19151f}
.hub-promises li:before{content:'✧';position:absolute;left:12px;color:var(--gold)}
.hub-section-title{display:flex;align-items:center;gap:18px;max-width:1100px;margin:10px auto 22px;font-size:clamp(26px,3vw,34px)}
.hub-section-title:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.reading-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1100px;margin:0 auto 54px}
.reading-tile{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#1f1828 0%,#15111c 100%);text-decoration:none;color:inherit;transition:border-color .25s,transform .25s,box-shadow .25s}
.reading-tile:hover,.reading-tile:focus-visible{border-color:#d3b78a99;transform:translateY(-3px);box-shadow:0 18px 40px #0007}
.reading-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* A small fanned hand of three cards; it opens a little on hover. */
.tile-fan{position:relative;height:210px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:18px;background:radial-gradient(ellipse at 50% 88%,#d3b78a26,transparent 68%),radial-gradient(ellipse at 50% 0%,#6e4f7933,transparent 70%)}
.tile-fan img{height:160px;width:auto;margin:0 -20px;border-radius:9px;box-shadow:0 12px 26px #000a;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tile-fan img:nth-child(1){transform:rotate(-11deg) translateY(10px)}
.tile-fan img:nth-child(2){position:relative;z-index:1;transform:translateY(-6px)}
.tile-fan img:nth-child(3){transform:rotate(11deg) translateY(10px)}
.reading-tile:hover .tile-fan img:nth-child(1){transform:rotate(-16deg) translate(-14px,6px)}
.reading-tile:hover .tile-fan img:nth-child(2){transform:translateY(-14px)}
.reading-tile:hover .tile-fan img:nth-child(3){transform:rotate(16deg) translate(14px,6px)}
.tile-single img{margin:0;height:170px;transform:none!important}
.reading-tile:hover .tile-single img{transform:translateY(-8px)!important}
.tile-hand img{box-shadow:none;border-radius:0;height:176px}
.tile-body{padding:22px 26px 24px;display:flex;flex-direction:column;flex:1;border-top:1px solid #ffffff0d}
.tile-meta{margin:0 0 6px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.tile-body h3{margin:0 0 8px;font-size:30px;line-height:1.15}
.tile-body p:not(.tile-meta){margin:0 0 18px;color:var(--muted);font-size:15px}
.tile-cta{margin-top:auto;color:var(--gold);font-size:14px;letter-spacing:.5px}
.reading-tile:hover .tile-cta{text-decoration:underline;text-underline-offset:4px}
.hub-article{max-width:760px;margin:0 auto}
@media(max-width:760px){.reading-grid{grid-template-columns:1fr;gap:18px;margin-bottom:40px}.tile-fan{height:180px}.tile-fan img{height:136px}.tile-body{padding:18px 20px 20px}.tile-body h3{font-size:26px}}
@media(prefers-reduced-motion:reduce){.reading-tile,.tile-fan img{transition:none}.reading-tile:hover{transform:none}}
/* A row of three tiles (runes and numbers). */
.reading-grid-3{grid-template-columns:repeat(3,1fr)}
.reading-grid-3 .tile-body h3{font-size:26px}
.reading-grid-3 .tile-fan img{height:146px}
@media(max-width:960px){.reading-grid-3{grid-template-columns:1fr}}