@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Libre+Caslon+Display&display=swap');

:root { --bone:#f1ede3; --paper:#e7e0d2; --ink:#12110f; --muted:#756d62; --line:rgba(18,17,15,.18); --blood:#9b2f28; --copper:#b47a47; --serif:'Libre Caslon Display',Georgia,serif; --sans:'Inter',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--bone); color:var(--ink); font-family:var(--sans); }
button,a { font:inherit; }
a { color:inherit; }
.bg-layer { position:fixed; inset:0; z-index:-2; opacity:0; background-size:cover; background-position:center; transition:opacity .7s ease; }
.overlay-layer { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.particle { position:absolute; bottom:-20px; border-radius:50%; opacity:.25; animation:rise var(--speed) linear infinite; }
@keyframes rise { to { transform:translateY(-110vh); opacity:0; } }

.house-header { min-height:92px; display:grid; grid-template-columns:260px 1fr auto; align-items:center; gap:34px; padding:14px clamp(24px,5vw,72px); border-bottom:1px solid rgba(241,237,227,.14); background:rgba(18,17,15,.97); color:var(--bone); }
.house-brand img { display:block; width:230px; height:60px; object-fit:contain; object-position:left center; }
.house-header nav { display:flex; justify-content:center; gap:clamp(20px,3vw,44px); }
.house-header nav a,.sound-button { border:0; border-bottom:1px solid transparent; background:none; color:inherit; text-decoration:none; text-transform:uppercase; letter-spacing:.13em; font-size:10px; cursor:pointer; }
.house-header nav a:hover,.sound-button:hover,.house-header nav a[aria-current="page"] { border-color:var(--copper); }

.library-shell { min-height:calc(100vh - 92px); }
.library-intro { min-height:570px; display:flex; flex-direction:column; justify-content:center; padding:90px clamp(24px,8vw,120px); background:linear-gradient(90deg,rgba(10,10,9,.18),rgba(10,10,9,.84) 66%),url('darkling-house-background.png') center/cover; color:var(--bone); }
.eyebrow,.section-number,.card-kicker { margin:0 0 28px; text-transform:uppercase; letter-spacing:.18em; font-size:10px; font-weight:600; }
.library-intro h1 { max-width:900px; margin:0; font:400 clamp(58px,8.5vw,126px)/.84 var(--serif); letter-spacing:-.055em; }
.library-intro h1 em { color:#c66a56; font-weight:400; }
.intro-copy { max-width:610px; margin:42px 0 0; font:400 clamp(18px,1.5vw,23px)/1.55 var(--serif); }

.quest-panel { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr); gap:clamp(48px,8vw,120px); padding:110px clamp(24px,8vw,120px); border-bottom:1px solid var(--line); position:relative; }
.quest-heading h2 { margin:0; font:400 clamp(44px,5.5vw,78px)/.95 var(--serif); letter-spacing:-.045em; }
.progress-container { position:absolute; top:0; left:0; right:0; height:3px; background:rgba(18,17,15,.08); display:none; }
.progress-bar { height:100%; width:0; background:var(--blood); transition:width .5s ease; }
.card-stage { min-height:430px; perspective:1000px; }
.glass-card { display:none; padding:clamp(30px,5vw,66px); background:var(--ink); color:var(--bone); border:1px solid rgba(241,237,227,.16); box-shadow:18px 18px 0 var(--paper); opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.glass-card.active { display:block; opacity:1; transform:none; }
.glass-card h2 { margin:0 0 22px; font:400 clamp(36px,4vw,58px)/1 var(--serif); }
.glass-card h3 { font:400 24px/1.2 var(--serif); }
.glass-card p { font:400 18px/1.6 var(--serif); color:rgba(241,237,227,.78); }
.primary-btn,.option-btn { width:100%; display:flex; justify-content:space-between; gap:22px; align-items:center; margin-top:28px; padding:18px 20px; border:1px solid rgba(241,237,227,.28); background:transparent; color:var(--bone); text-decoration:none; text-align:left; text-transform:uppercase; letter-spacing:.13em; font-size:10px; cursor:pointer; transition:.25s ease; }
.primary-btn:hover,.option-btn:hover { background:var(--bone); color:var(--ink); border-color:var(--bone); }
.options-list { display:grid; gap:12px; margin-top:30px; }
.options-list .option-btn { margin-top:0; font:400 18px/1.45 var(--serif); text-transform:none; letter-spacing:0; }
.result-badge { color:#d59a68; text-transform:uppercase; letter-spacing:.18em; font-size:10px; margin-bottom:20px; }

.library-notes { display:grid; grid-template-columns:repeat(3,1fr); padding:0 clamp(24px,8vw,120px) 110px; }
.library-notes article { padding:36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.library-notes article:first-child { border-left:1px solid var(--line); }
.library-notes span { color:var(--blood); font-size:10px; letter-spacing:.16em; }
.library-notes h3 { margin:44px 0 12px; font:400 28px/1.1 var(--serif); }
.library-notes p { margin:0; color:var(--muted); font:400 16px/1.5 var(--serif); }
.house-footer { min-height:230px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; padding:44px clamp(24px,8vw,120px); background:var(--ink); color:var(--bone); }
.house-footer img { width:230px; }
.house-footer p,.house-footer a { font-size:10px; text-transform:uppercase; letter-spacing:.14em; text-decoration:none; }
body.theme-kate .glass-card { background:#15100d; }
body.theme-valentina .glass-card { background:#150e18; }

@media (max-width:850px) {
  .house-header { grid-template-columns:1fr auto; }
  .house-header nav { grid-column:1/-1; grid-row:2; justify-content:flex-start; overflow-x:auto; padding-bottom:8px; }
  .quest-panel { grid-template-columns:1fr; }
  .library-notes { grid-template-columns:1fr; }
  .library-notes article { border-left:1px solid var(--line); }
  .house-footer { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .house-brand img { width:185px; }
  .sound-button { font-size:0; }
  .sound-button::after { content:'Audio'; font-size:9px; }
  .library-intro { min-height:520px; }
  .quest-panel { padding-block:76px; }
  .glass-card { box-shadow:10px 10px 0 var(--paper); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }