/* Shared components for server-rendered pages (tools, guides, comparisons). */
.skip-link { position: absolute; z-index: 100; top: -3rem; left: 1rem; padding: .6rem 1rem; border-radius: .6rem; background: #fff; color: #111; font-weight: 700; }
.skip-link:focus { top: 1rem; }

.site-menu { max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
.site-menu > p:not(:first-child) { margin-top: .7rem; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; padding: 0; list-style: none; color: #bcae94; font-size: .82rem; }
.breadcrumbs li + li::before { margin-right: .35rem; content: "›"; color: #8d826d; }
.breadcrumbs a { color: #d9cdb6; text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-bright); text-decoration: underline; }
@media (max-width: 720px) { .breadcrumbs ol { justify-content: center; } }

.hero--compact { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-layout--single { grid-template-columns: minmax(0, 1fr); width: min(100%, 55rem); }
.hero--compact h1 { max-width: 22ch; font-size: clamp(2.2rem, 5vw, 3.9rem); }
.hero--compact .lead { font-size: clamp(1.02rem, 1.8vw, 1.18rem); }
.byline { margin: 1.3rem 0 0; color: #bcae94; font-size: .86rem; }

.prose { padding-top: clamp(2.5rem, 6vw, 4rem); }
.prose h2 { scroll-margin-top: 6rem; }
.prose h3 { margin: 2.2rem 0 .6rem; color: #fff4dc; font: 700 1.2rem/1.3 "Cinzel", Georgia, serif; }
.prose a { color: var(--gold-bright); text-underline-offset: .2em; }
.prose ol { padding-left: 1.4rem; }
.prose ol li, .prose ul li { margin: .35rem 0; }
.prose blockquote { margin: 1.8rem 0; padding: .4rem 1.3rem; border-left: 3px solid var(--gold); color: #f0e2c4; }
.prose code { padding: .1rem .38rem; border-radius: .35rem; background: rgba(255,255,255,.09); color: #ffe2a6; font: .95em/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; }
.prose hr { margin: 3rem 0; border: 0; border-top: 1px solid rgba(255,255,255,.12); }
.table-wrap, .prose table { display: block; width: 100%; overflow-x: auto; }
.prose table { margin: 1.6rem 0; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: .7rem .85rem; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--muted); text-align: left; vertical-align: top; white-space: nowrap; }
.prose td { white-space: normal; min-width: 7rem; }
.prose th { color: #fff4dc; font: 700 .82rem/1.3 "Cinzel", Georgia, serif; background: rgba(255,255,255,.04); }
.prose tbody tr:hover td { background: rgba(255,217,138,.04); }

.tldr { margin: 0 0 2.4rem; padding: 1.2rem 1.35rem; border: 1px solid rgba(255,217,138,.32); border-radius: 1rem; background: rgba(227,180,95,.09); }
.tldr strong { color: var(--gold-bright); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.tldr p { margin: .45rem 0 0; color: #f6e6c5 !important; }

.app-cta-inline { display: flex; align-items: center; gap: 1.1rem; margin: 3rem 0 0; padding: 1.3rem; border: 1px solid rgba(143,160,255,.35); border-radius: 1.1rem; background: linear-gradient(135deg, rgba(91,65,204,.2), rgba(227,180,95,.08)); }
.app-cta-inline img { flex: none; border-radius: 1rem; }
.app-cta-inline strong { color: #fff4dc; font-family: "Cinzel", Georgia, serif; }
.app-cta-inline p { margin: .3rem 0 0; font-size: .98rem !important; line-height: 1.55 !important; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .9rem; margin: 1.6rem 0 2.6rem; padding: 0; list-style: none; }
.card-grid li { margin: 0 !important; }
.card-grid a { display: grid; height: 100%; gap: .5rem; padding: 1.15rem; border: 1px solid rgba(255,225,168,.2); border-radius: 1rem; background: rgba(255,255,255,.035); color: #fff1d4; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.card-grid a:hover { transform: translateY(-3px); border-color: rgba(255,217,138,.6); background: rgba(255,217,138,.08); }
.card-grid strong { font: 700 1rem/1.35 "Cinzel", Georgia, serif; }
.card-grid span { color: #cbbd9f; font-size: .9rem; line-height: 1.5; }
.card-grid small { color: var(--gold-bright); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; margin: 1.5rem 0 2rem; }
.verdict > div { padding: 1.2rem; border: 1px solid rgba(255,225,168,.2); border-radius: 1rem; background: rgba(255,255,255,.035); }
.verdict > div:first-child { border-color: rgba(143,160,255,.45); background: rgba(91,65,204,.14); }
.verdict h3 { margin-top: 0 !important; }
.yes { color: #9be2a4; font-weight: 800; }
.no { color: #f0a08f; font-weight: 800; }
.part { color: #f2cf82; font-weight: 800; }

.destination .store-row { justify-content: center; }
.cta-points { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.6rem auto 0; padding: 0; list-style: none; }
.cta-points li { padding: .45rem .8rem; border: 1px solid rgba(255,225,168,.25); border-radius: 999px; background: rgba(7,9,12,.5); color: #efe1c4; font-size: .82rem; }

.site-footer { display: block; padding: 3rem clamp(1rem, 5vw, 5rem) 1.5rem; border-top: 1px solid rgba(255,255,255,.1); background: #050608; color: #bcae94; font-size: .88rem; }
.site-footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; width: min(100%, 76rem); margin: 0 auto; }
.site-footer-brand p { max-width: 22rem; margin: .8rem 0 0; line-height: 1.55; }
.site-footer nav { display: grid; align-content: start; gap: .55rem; }
.site-footer nav h2 { margin: 0 0 .3rem; color: #fff4dc; font: 700 .8rem/1.3 "Cinzel", Georgia, serif; letter-spacing: .06em; }
.site-footer a { color: #d5c7a8; text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright, #ffd98a); }
.site-footer-bottom { display: grid; gap: .6rem; width: min(100%, 76rem); margin: 2.4rem auto 0; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.08); color: #8d826d; }
.store-row--small { margin-top: 1rem; }
.store-row--small .official-store-link { height: 2.6rem; }
@media (max-width: 820px) { .site-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 720px) { .app-cta-inline { flex-direction: column; text-align: center; } }

.app-dialog { width: min(92vw, 26rem); padding: 2rem 1.6rem 1.6rem; border: 1px solid rgba(255,225,168,.28); border-radius: 1.5rem; background: #10161f; color: var(--ink, #f7ecd4); text-align: center; box-shadow: 0 2rem 6rem rgba(0,0,0,.5); }
.app-dialog::backdrop { background: rgba(4,6,9,.72); backdrop-filter: blur(6px); }
.app-dialog > img:first-of-type { border-radius: 1rem; }
.app-dialog h2 { margin: .2rem 0 .6rem; font: 700 1.6rem/1.15 "Cinzel", Georgia, serif; }
.app-dialog p:not(.eyebrow) { margin: 0; color: #d9cdb6; line-height: 1.55; }
.app-dialog .eyebrow { margin: .8rem 0 .3rem; }
.app-dialog .store-row { justify-content: center; margin-top: 1.2rem; }
.app-dialog .official-store-link { height: 2.9rem; }
.app-dialog-qr { margin-top: 1rem; padding: .5rem; border-radius: .8rem; background: #fff; }
.app-dialog-close { position: absolute; top: .7rem; right: .8rem; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; font-size: 1.4rem; }
@media (max-width: 720px) { .app-dialog-qr { display: none; } }

.home-hub { padding: clamp(4rem, 8vw, 6.5rem) 1.25rem; background: linear-gradient(180deg, #07090c, #0d131b 50%, #07090c); color: var(--ink, #f7ecd4); }
.home-hub-inner { width: min(100%, 72rem); margin: 0 auto; }
.home-hub h2 { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
.home-hub .home-hub-sub { margin-top: 1rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.home-hub-intro { margin: .9rem 0 0; color: #d5c7a8; font-size: 1.05rem; }
.home-hub .kicker { color: #ffd98a; }
.home-hub-more a { color: #ffd98a; font-weight: 700; }
.site-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(94vw, 52rem); }
.site-menu .menu-col { display: grid; align-content: start; gap: .1rem; }
.site-menu .menu-col p { margin: 0 .6rem .3rem; color: #606571; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.site-menu .icon, .nav-menu-button .icon { width: 1.2rem; height: 1.2rem; }
@media (max-width: 760px) { .site-menu { grid-template-columns: 1fr; } }

/* Chapters 06–07: the campaign continues into tools and guides. */
.realm { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem); background: #07090c; color: #f7ecd4; }
.realm-bg { position: absolute; z-index: -1; inset: 0; }
.realm-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: sepia(.4) saturate(.8); }
.realm-bg::after { position: absolute; inset: 0; background: linear-gradient(#07090c 0%, rgba(7,9,12,.55) 25%, rgba(7,9,12,.7) 75%, #07090c 100%), radial-gradient(ellipse at 50% 40%, transparent, rgba(7,9,12,.7) 75%); content: ""; }
.realm-head { max-width: 40rem; margin: 0 auto clamp(2.2rem, 4vw, 3rem); text-align: center; }
.realm-head--next { margin-top: clamp(4.5rem, 9vw, 7rem); }
.realm .chapter-number { margin: 0 0 .7rem; color: #d5c7a8; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.realm .chapter-number span { color: #ffd98a; }
.realm-kicker { margin: 0 0 .9rem; color: #c9b489; font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.realm h2 { margin: 0; color: #fff4dc; font: 400 clamp(2.4rem, 5.5vw, 4.4rem)/.98 "MedievalSharp", Georgia, serif; letter-spacing: -.035em; text-wrap: balance; }
.realm-intro { margin: 1.1rem auto 0; color: #d9cdb6; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; }
.realm .rcard { box-shadow: 0 2rem 3.5rem -1rem rgba(0,0,0,.7), 0 0 0 1px rgba(255,225,168,.08); }
.realm .rcard--text { box-shadow: 0 2rem 3.5rem -1rem rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07); }
.realm-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem; margin: 2.6rem 0 0; color: #8d826d; }
.realm-links a { color: #ffd98a; font-weight: 700; text-decoration: none; }
.realm-links a:hover { text-decoration: underline; }