/* Daily Rivet 1.10.14 — server-rendered Hogwarts house landing page. */
.quiz-page--house-landing .quiz-page-hero,
.quiz-page--house-landing .standard-article-feature,
.quiz-page--house-landing .quiz-page-sidebar,
.quiz-page--house-landing .quiz-more,
.quiz-page--house-landing .quiz-newsletter,
.quiz-page--house-landing .quiz-page-footer,
.quiz-page--house-landing .article-comments { display:none; }
.quiz-page--house-landing .quiz-page-layout,
.quiz-page--house-landing .quiz-page-main,
.quiz-page--house-landing .quiz-content { width:100%; max-width:none; margin:0; padding:0; }
.quiz-page--house-landing .quiz-page-layout { display:block; }
.quiz-page--house-landing .house-quiz-anchor { position:relative; top:-12px; scroll-margin-top:18px; }
.quiz-page--house-landing .rivet-personality-quiz[data-personality-skin="wizarding"] { margin-top:0; }

.house-landing {
    --house-navy:#050d20;
    --house-blue:#0a1b3a;
    --house-gold:#d5ad58;
    --house-gold-light:#ffe5a1;
    --house-paper:#fff9e9;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    padding:0 12px 14px;
    overflow:hidden;
    background:radial-gradient(circle at 18% 20%,rgba(35,72,137,.18),transparent 34%),var(--house-navy);
    color:#f6dfa0;
    font-family:Georgia,"Times New Roman",serif;
}
.house-landing * { box-sizing:border-box; }
.house-landing-hero {
    position:relative;
    isolation:isolate;
    width:calc(100% + 24px);
    min-height:520px;
    margin:0 -12px;
    padding:54px clamp(150px,20vw,310px) 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-bottom:2px solid #b99042;
    background:linear-gradient(90deg,rgba(3,9,24,.65),rgba(4,13,37,.1) 31%,rgba(4,13,37,.12) 69%,rgba(3,9,24,.68)),linear-gradient(180deg,rgba(2,8,22,.05),rgba(2,8,22,.12) 65%,rgba(2,8,22,.72)),url("../images/personality/wizarding-study-responsive-desktop.webp") center 17% / cover no-repeat,#07152d;
    box-shadow:inset 0 -28px 50px rgba(2,7,19,.62);
}
.house-landing-hero::after { position:absolute; z-index:-1; inset:0; box-shadow:inset 0 0 100px rgba(1,4,12,.7); content:""; }
.house-side-motto { position:absolute; top:42px; max-width:145px; margin:0; color:#f0dfb3; font:700 .72rem/1.6 Georgia,serif; letter-spacing:.14em; text-transform:uppercase; }
.house-side-motto--left { left:5%; text-align:left; }
.house-side-motto--right { right:5%; font-style:italic; text-align:right; }
.house-hero-copy { width:min(740px,100%); text-align:center; text-shadow:0 3px 14px #010617,0 1px 2px #01030a; }
.house-hero-copy h1 { margin:0 0 10px; color:#f8e4aa; font:700 clamp(3rem,5.4vw,5.35rem)/.95 Georgia,serif; letter-spacing:-.035em; text-wrap:balance; }
.house-quiz-subtitle { margin:0 auto 18px; color:#f6e6be; font-size:clamp(1.1rem,2vw,1.55rem); }
.house-quiz-subtitle span { margin-inline:8px; color:var(--house-gold); }
.house-deck { max-width:660px; margin:0 auto 20px; color:#fff4dc; font:clamp(1rem,1.25vw,1.16rem)/1.55 Georgia,serif; }
.house-launch { min-width:250px; min-height:52px; padding:14px 28px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #ffefb5; border-radius:7px; background:linear-gradient(90deg,#e8b64e,#f7d985,#e7af3f); box-shadow:0 7px 20px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.55); color:#251a08!important; font:700 1.05rem/1 Georgia,serif; text-decoration:none!important; text-shadow:none; }
.house-launch:hover { filter:brightness(1.07); transform:translateY(-1px); }
.house-launch:focus-visible { outline:3px solid #fff4cf; outline-offset:4px; }
.house-hero-facts { margin-top:17px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 0; color:#f1e9d8; font:.77rem/1.3 Arial,sans-serif; }
.house-hero-facts span { padding:0 20px; border-right:1px solid #a99368; }
.house-hero-facts span:last-child { border-right:0; }

.house-panel { position:relative; width:100%; margin-top:14px; border:1px solid #b9904f; box-shadow:inset 0 0 0 3px rgba(117,82,35,.18),0 10px 25px rgba(0,0,0,.32); }
.house-panel::before,.house-panel::after { position:absolute; z-index:2; color:#b9904f; font-size:1.4rem; line-height:1; content:"◇"; }
.house-panel::before { top:11px; left:14px; }
.house-panel::after { right:14px; bottom:11px; transform:rotate(180deg); }
.house-panel-note { position:absolute; z-index:3; top:18px; right:30px; margin:0; color:#dbc587; font:700 .62rem/1.4 Arial,sans-serif; letter-spacing:.15em; text-align:right; text-transform:uppercase; }
.house-panel h2,.house-closing h2 { margin:0 0 8px; color:inherit; font:700 clamp(1.8rem,3vw,2.6rem)/1 Georgia,serif; letter-spacing:-.02em; text-align:center; }
.house-panel h2::before,.house-panel h2::after { margin:0 12px; color:#b4873b; font-size:.85rem; vertical-align:middle; content:"✦"; }
.house-section-deck { margin:0 auto 18px; color:inherit; font:.9rem/1.4 Georgia,serif; text-align:center; opacity:.92; }

.house-how { padding:18px 28px 30px; overflow:hidden; background:radial-gradient(circle at 50% 0,rgba(55,92,145,.28),transparent 42%),radial-gradient(circle at 15% 78%,rgba(153,63,42,.12),transparent 25%),linear-gradient(180deg,#0a1b3a,#040d21 92%); color:#f6dfa0; }
.house-how::after { position:absolute; inset:0; opacity:.26; background-image:radial-gradient(circle at 8% 18%,#f2d37b 0 1px,transparent 2px),radial-gradient(circle at 78% 24%,#f2d37b 0 1px,transparent 2px),radial-gradient(circle at 45% 72%,#f2d37b 0 1px,transparent 2px),radial-gradient(circle at 92% 80%,#f2d37b 0 1px,transparent 2px); content:""; pointer-events:none; }
.house-how > * { position:relative; z-index:1; }
.house-how-deck { max-width:670px; margin:0 auto 20px; color:#d4d1c8; font:.82rem/1.55 Arial,sans-serif; text-align:center; }
.house-how-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.house-how-grid::before { position:absolute; top:76px; right:15%; left:15%; height:1px; background:linear-gradient(90deg,transparent,#b98e3e 12%,#edce78 50%,#b98e3e 88%,transparent); box-shadow:0 0 8px rgba(237,206,120,.35); content:""; }
.house-how-item { position:relative; min-height:282px; padding:0 20px 22px; border:1px solid rgba(190,149,70,.5); background:linear-gradient(180deg,rgba(19,42,79,.5),rgba(5,15,35,.78)); box-shadow:inset 0 0 0 4px rgba(7,21,45,.6); text-align:center; }
.house-how-item::after { position:absolute; bottom:9px; left:50%; color:#b58d49; font-size:.62rem; content:"✦"; transform:translateX(-50%); }
.house-step-number { position:absolute; z-index:3; top:11px; left:13px; width:36px; height:36px; display:grid; place-items:center; border:1px solid #c39745; border-radius:50%; background:#07152d; box-shadow:0 0 0 3px rgba(7,21,45,.9); color:#f5d888; font-size:1.1rem; }
.house-how-icon { position:relative; z-index:2; width:116px; height:146px; margin:-4px auto -3px; display:block; background-position:center; background-repeat:no-repeat; background-size:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.house-how-icon--book { background-image:url("../images/personality/wizarding-how-book.webp"); }
.house-how-icon--orb { background-image:url("../images/personality/wizarding-how-crystal-ball.webp"); }
.house-how-icon--compass { background-image:url("../images/personality/wizarding-how-compass.webp"); }
.house-how-copy { display:block; }
.house-how-copy small { margin-bottom:5px; display:block; color:#d1b774; font:700 .62rem/1.2 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.house-how-copy strong { margin-bottom:8px; display:block; color:#ffe5a1; font:700 1.18rem/1.2 Georgia,serif; }
.house-how-copy > span { display:block; color:#d4d1c8; font:.76rem/1.55 Arial,sans-serif; }

.house-possibilities { padding:16px 14px 20px; background:linear-gradient(rgba(4,13,34,.86),rgba(2,8,22,.97)),radial-gradient(circle at 50% 0,#223d65,transparent 55%); color:#f6dfa0; }
.house-possibilities-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.house-card { --house-color:#b9904f; --house-trait:#f2d38a; position:relative; min-height:430px; padding:0 14px 20px; overflow:hidden; border:1px solid var(--house-color); background:linear-gradient(180deg,rgba(10,28,58,.98),rgba(4,13,31,.98)); box-shadow:inset 0 0 22px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.24); text-align:center; }
.house-card::before { position:absolute; inset:5px; border:1px solid rgba(230,202,129,.16); content:""; pointer-events:none; }
.house-card--gryffindor { --house-color:#a83c4a; --house-trait:#f5abb2; }
.house-card--ravenclaw { --house-color:#4f82b2; --house-trait:#b4d5f1; }
.house-card--hufflepuff { --house-color:#c49b47; --house-trait:#f2d38a; }
.house-card--slytherin { --house-color:#3d836f; --house-trait:#a9dac9; }
.house-card-art { position:relative; width:min(100%,270px); aspect-ratio:1 / 1; margin:0 auto; background-image:url("../images/personality/wizarding-house-crests.webp"); background-repeat:no-repeat; background-size:200% 200%; filter:drop-shadow(0 8px 14px rgba(0,0,0,.36)); }
.house-card-art::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 66%,rgba(4,13,31,.98)); content:""; }
.house-card--gryffindor .house-card-art { background-position:0 0; }
.house-card--ravenclaw .house-card-art { background-position:100% 0; }
.house-card--hufflepuff .house-card-art { background-position:0 100%; }
.house-card--slytherin .house-card-art { background-position:100% 100%; }
.house-card h3 { position:relative; margin:-18px 0 6px; color:#ffe8aa; font:700 1.65rem/1 Georgia,serif; text-shadow:0 2px 4px #000; }
.house-card em { position:relative; margin-bottom:9px; display:block; color:var(--house-trait); font:700 .67rem/1.3 Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.house-card-rule { position:relative; width:38px; height:1px; margin:9px auto; display:block; background:var(--house-color); }
.house-card p { position:relative; margin:0; color:#ded8ca; font:.76rem/1.55 Arial,sans-serif; }

.house-traits { padding:16px 24px 24px; background:radial-gradient(circle at 16% 20%,rgba(124,89,38,.08),transparent 24%),repeating-linear-gradient(0deg,rgba(89,60,28,.024) 0,rgba(89,60,28,.024) 1px,transparent 1px,transparent 4px),linear-gradient(110deg,#f7ecd2,#fff9e9 48%,#e8d7b7); color:#122b58; }
.house-traits .house-panel-note { color:#5c6475; }
.house-traits-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.house-trait { min-height:130px; padding:17px 10px; border:1px solid rgba(131,91,36,.3); background:rgba(255,255,255,.35); text-align:center; }
.house-trait-icon { width:48px; height:48px; margin:0 auto 11px; display:grid; place-items:center; border:2px solid #b48536; background:#0a1a38; color:#f3d177; transform:rotate(45deg); }
.house-trait-icon i { font:normal 1.25rem/1 Georgia,serif; transform:rotate(-45deg); }
.house-trait strong { margin-bottom:4px; display:block; color:#17325e; font:700 1rem/1.2 Georgia,serif; }
.house-trait small { color:#55514d; font:.74rem/1.35 Arial,sans-serif; }

.house-closing { min-height:260px; margin-top:14px; padding:46px clamp(30px,8vw,120px); display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; border:1px solid #b9904f; background:linear-gradient(90deg,rgba(3,9,24,.76),rgba(3,9,24,.36)),linear-gradient(180deg,rgba(3,9,24,.1),rgba(3,9,24,.62)),url("../images/personality/wizarding-study-responsive-desktop.webp") center 70% / cover no-repeat; color:#f8e4ab; }
.house-closing-motto { margin:0; color:#f8e4ab; font:700 clamp(2rem,4vw,3.4rem)/.98 Georgia,serif; text-transform:uppercase; text-shadow:0 2px 5px #000; }
.house-closing > div { text-align:center; }
.house-closing h2 { color:#f8e4ab; }
.house-closing > div > p { max-width:540px; margin:0 auto 18px; color:#fff1d0; font:1rem/1.5 Georgia,serif; }

@media (max-width:1050px) {
    .house-landing-hero { padding-inline:12vw; }
    .house-side-motto { display:none; }
    .house-how-grid { grid-template-columns:1fr; }
    .house-how-grid::before { display:none; }
    .house-possibilities-grid,.house-traits-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:650px) {
    .house-landing { padding-inline:7px; }
    .house-landing-hero { width:calc(100% + 14px); min-height:555px; margin-inline:-7px; padding:48px 20px 34px; background-image:linear-gradient(180deg,rgba(3,9,24,.42),rgba(3,9,24,.62)),url("../images/personality/wizarding-study-responsive-mobile.webp"); background-position:center top; }
    .house-hero-copy h1 { font-size:clamp(2.85rem,13vw,4rem); }
    .house-hero-facts { display:grid; gap:6px; }
    .house-hero-facts span { padding:0; border-right:0; }
    .house-panel-note { display:none; }
    .house-panel h2::before,.house-panel h2::after { margin-inline:6px; }
    .house-how { padding:18px 12px 24px; }
    .house-how-item { min-height:270px; padding-inline:14px; }
    .house-possibilities { padding-inline:9px; }
    .house-possibilities-grid,.house-traits-grid { grid-template-columns:1fr; }
    .house-card { min-height:0; }
    .house-card-art { width:min(100%,280px); }
    .house-traits { padding-inline:12px; }
    .house-closing { grid-template-columns:1fr; gap:25px; padding:42px 20px; text-align:center; }
}