@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@700;800;900&family=Manrope:wght@500;700;800;900&display=swap");

/* How Old Inside — shared styles for the quiz network.
   AD POLICY: clean banner only. NEVER popunder / social bar / redirect. */
:root{
  --paper:#f5efe4;
  --paper2:#fffaf1;
  --panel:#fffaf2;
  --panel2:#f0e5d4;
  --ink:#172235;
  --soft:#6f665d;
  --line:#d8c8ad;
  --deep:#101726;
  --accent:#5f4dc9;
  --accent2:#0d6f78;
  --accent3:#d89a38;
  --accent4:#b65b70;
  --shadow:0 22px 55px -34px rgba(34,24,10,.65);
  --radius:8px;
}

.theme-mental{--accent:#5047b8;--accent2:#0d6f78;--accent3:#dca544;--accent4:#8a5b87}
.theme-emotional{--accent:#b65b70;--accent2:#137078;--accent3:#e0a23a;--accent4:#7f4db2}
.theme-soul{--accent:#6f4a2d;--accent2:#506c58;--accent3:#c58f37;--accent4:#7a5369}
.theme-generation{--accent:#0a6771;--accent2:#734bb0;--accent3:#d68c2c;--accent4:#d45f50}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,rgba(23,34,53,.035) 1px,transparent 1px),
    linear-gradient(rgba(23,34,53,.03) 1px,transparent 1px),
    linear-gradient(135deg,rgba(255,250,241,.96),rgba(239,226,207,.9));
  background-size:34px 34px,34px 34px,100% 100%;
  color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:18px}

/* ---- site header / nav ---- */
.siteHead{
  max-width:1020px;
  margin:0 auto;
  padding:16px 18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.logo{
  font-family:"Fraunces",serif;
  font-weight:900;
  font-size:22px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.logo:before{
  content:"HI";
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fffaf1;
  font-family:"Manrope",sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.03em;
}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  font-size:12px;
  font-weight:900;
  color:var(--ink);
  background:rgba(255,250,242,.72);
  border:1px solid rgba(23,34,53,.16);
  border-radius:999px;
  padding:8px 12px;
  box-shadow:0 10px 20px -18px rgba(23,34,53,.7);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.nav a:hover{transform:translateY(-1px);border-color:var(--accent)}
.nav a.active{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ---- common surface ---- */
.card{
  background:
    linear-gradient(180deg,rgba(255,253,247,.98),rgba(255,247,236,.98));
  border:1px solid rgba(81,61,35,.24);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent),
    repeating-linear-gradient(0deg,rgba(23,34,53,.025) 0 1px,transparent 1px 5px);
  opacity:.38;
  mix-blend-mode:multiply;
}
.card>*{position:relative}
.pageTitle{text-align:center;margin:18px 0 16px}
.pageTitle h1{
  font-family:"Fraunces",serif;
  font-size:34px;
  line-height:1;
  margin:0;
  font-weight:900;
  color:var(--ink);
  letter-spacing:0;
}
.pageTitle .sub{font-size:13px;color:var(--soft);font-weight:900;margin-top:8px}

/* ---- homepage ---- */
.hero{
  min-height:430px;
  margin:18px 0 18px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(23,34,53,.14);
  box-shadow:var(--shadow);
  display:flex;
  align-items:flex-end;
  background:#101726;
}
.cabinetHero{position:absolute;inset:0;margin:0}
.cabinetHero img{width:100%;height:100%;object-fit:cover;display:block}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(16,23,38,.04) 0%,rgba(16,23,38,.12) 42%,rgba(16,23,38,.78) 100%);
}
.heroCopy{
  position:relative;
  z-index:1;
  color:#fffaf1;
  width:min(640px,100%);
  padding:34px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ffcf7c;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero h1{
  font-family:"Fraunces",serif;
  font-size:clamp(42px,6.8vw,74px);
  line-height:.92;
  font-weight:900;
  margin:10px 0 12px;
  color:#fffaf1;
  letter-spacing:0;
}
.hero h1 em{font-style:italic;color:#ffd388}
.hero p{font-size:16px;max-width:560px;margin:0;line-height:1.58;font-weight:800;color:rgba(255,250,241,.9)}
.testGrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media(min-width:620px){.testGrid{grid-template-columns:1fr 1fr}}
.tcard{
  --cardAccent:var(--accent);
  display:grid;
  grid-template-columns:56px 1fr;
  align-items:center;
  gap:14px;
  min-height:112px;
  background:rgba(255,250,242,.82);
  border:1px solid rgba(23,34,53,.14);
  border-left:6px solid var(--cardAccent);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 18px 36px -30px rgba(23,34,53,.8);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.tcard:hover{transform:translateY(-3px);border-color:var(--cardAccent);background:#fffaf2}
.tcardMental{--cardAccent:#5047b8}
.tcardEmotion{--cardAccent:#b65b70}
.tcardSoul{--cardAccent:#6f4a2d}
.tcardGeneration{--cardAccent:#0a6771}
.tcard .ic{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(23,34,53,.22);
  border-radius:50%;
  color:#fff;
  background:var(--cardAccent);
  font-size:15px;
  font-weight:900;
  letter-spacing:.04em;
}
.tcard .nm{font-family:"Fraunces",serif;font-weight:900;font-size:18px;color:var(--ink);line-height:1.1}
.tcard .ds{font-size:13px;color:var(--soft);font-weight:800;margin-top:5px;line-height:1.35}

/* ---- intro ---- */
.intro{text-align:center}
.artifactPanel{
  height:170px;
  margin:-6px -6px 18px;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  border:1px solid rgba(23,34,53,.14);
  background:#ddd0b8;
}
.artifactPanel img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96) contrast(1.02)}
.artifactPanel:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(15,22,35,.02),rgba(15,22,35,.42));
}
.artifactPanel span{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:1;
  color:#fffaf1;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.sigil{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:50%;
  border:1px solid rgba(23,34,53,.22);
  background:
    linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fffaf1;
  font-weight:900;
  letter-spacing:.05em;
  box-shadow:0 16px 30px -24px var(--accent);
}
.introLead{color:var(--soft);font-size:15px;line-height:1.62;font-weight:800;margin:0 auto 18px;max-width:500px}
.btn{
  font:inherit;
  cursor:pointer;
  border:none;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  letter-spacing:0;
}
.start{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  padding:15px 34px;
  font-size:17px;
  box-shadow:0 18px 30px -24px var(--accent);
}
.start:active{transform:translateY(1px)}
.meta{margin-top:12px;font-size:12px;color:var(--soft);font-weight:900}

/* ---- quiz ---- */
.quiz{display:none}
.bar{height:10px;background:#e9ddca;border:1px solid rgba(23,34,53,.14);border-radius:999px;overflow:hidden;margin-bottom:8px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent3),var(--accent2),var(--accent));transition:width .35s ease}
.qcount{font-size:12px;color:var(--soft);font-weight:900;text-align:right;margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em}
.qtext{font-family:"Fraunces",serif;font-size:24px;font-weight:900;line-height:1.16;margin:8px 0 18px;color:var(--ink)}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  text-align:left;
  background:rgba(255,250,242,.74);
  border:1.5px solid rgba(23,34,53,.15);
  border-radius:var(--radius);
  padding:15px 16px;
  font:inherit;
  font-weight:900;
  font-size:15px;
  line-height:1.28;
  color:var(--ink);
  cursor:pointer;
  transition:transform .08s ease,border-color .16s,background .16s,box-shadow .16s;
}
.opt:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:var(--accent);background:rgba(255,255,255,.96)}
.navRow{display:flex;justify-content:space-between;margin-top:18px;gap:10px}
.ghost{background:transparent;color:var(--soft);border:1.5px solid rgba(23,34,53,.16);padding:11px 18px;font-weight:900;border-radius:999px;cursor:pointer}
.ghost:disabled{opacity:.42;cursor:not-allowed}

/* ---- result ---- */
.result{display:none;text-align:center}
.resultArtifact{
  width:min(310px,100%);
  height:124px;
  margin:0 auto 14px;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  border:1px solid rgba(23,34,53,.18);
  background:#ddd0b8;
  box-shadow:0 18px 40px -34px rgba(23,34,53,.75);
}
.resultArtifact img{width:100%;height:100%;object-fit:cover;display:block}
.resultArtifact:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,23,38,.02),rgba(16,23,38,.52))}
.resultArtifact span{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:1;
  color:#fffaf1;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.resultKicker{
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.result .em{font-size:36px;line-height:1;margin-bottom:4px}
.bigNum{font-family:"Fraunces",serif;font-size:72px;font-weight:900;color:var(--ink);line-height:.9}
.bigNum small{font-family:"Manrope",sans-serif;font-size:17px;color:var(--soft);font-weight:900}
.bigCat{font-family:"Fraunces",serif;font-size:46px;font-weight:900;color:var(--ink);line-height:1.02;margin:4px auto;max-width:560px}
.persona{font-family:"Fraunces",serif;font-size:26px;font-weight:900;margin:8px 0 2px;color:var(--ink)}
.pdesc{color:var(--soft);font-size:15px;font-weight:800;line-height:1.55;max-width:500px;margin:8px auto 14px}
.traitGrid{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px auto 14px;max-width:520px}
.traitGrid span{
  border:1px solid rgba(23,34,53,.14);
  border-radius:999px;
  background:rgba(255,250,242,.82);
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  padding:7px 11px;
}
.proof{
  max-width:500px;
  margin:0 auto 16px;
  color:#574e45;
  background:rgba(232,219,198,.55);
  border:1px solid rgba(23,34,53,.1);
  border-radius:var(--radius);
  padding:11px 13px;
  font-size:13px;
  line-height:1.45;
  font-weight:800;
}
.meterWrap{max-width:420px;margin:0 auto 18px;text-align:left}
.mlabel{display:flex;justify-content:space-between;font-size:11px;font-weight:900;color:var(--soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em}
.meter{height:13px;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--accent3),var(--accent));position:relative;border:1px solid rgba(23,34,53,.12)}
.meter b{position:absolute;top:-4px;width:20px;height:20px;border-radius:50%;background:#fffaf1;border:4px solid var(--accent);transform:translateX(-50%);box-shadow:0 5px 11px rgba(0,0,0,.2)}
.resBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share{background:linear-gradient(135deg,var(--accent2),#0aa986);padding:13px 24px;font-size:15px}
.retake{background:linear-gradient(135deg,var(--accent),var(--accent4));padding:13px 24px;font-size:15px}
.disclaim{font-size:12px;color:var(--soft);font-weight:900;margin-top:14px}
.moreTests{margin-top:18px;border-top:1px solid rgba(23,34,53,.12);padding-top:14px}
.moreTests p{font-size:11px;color:var(--soft);font-weight:900;text-transform:uppercase;letter-spacing:.16em;margin:0 0 10px}
.moreTests .links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.moreTests a{font-size:13px;font-weight:900;background:rgba(255,250,242,.8);border:1px solid rgba(23,34,53,.14);border-radius:999px;padding:8px 13px;color:var(--ink)}
.moreTests a:hover{border-color:var(--accent)}

.bannerAd{
  margin:16px 0;
  border:1px dashed rgba(23,34,53,.18);
  border-radius:var(--radius);
  background:rgba(255,250,242,.38);
  color:var(--soft);
  font-size:11px;
  font-weight:900;
  text-align:center;
  padding:10px;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---- SEO content ---- */
.content{margin-top:26px}
.content h1{font-family:"Fraunces",serif;font-size:32px;color:var(--ink);margin:6px 0 12px;line-height:1.05}
.content h2{font-family:"Fraunces",serif;font-size:24px;color:var(--ink);margin:24px 0 8px;line-height:1.05}
.content p,.content li{font-size:14.5px;line-height:1.7;color:#3d372f;font-weight:600}
.content ul{padding-left:20px}
.faq dt{font-weight:900;color:var(--ink);margin-top:13px}
.faq dd{margin:4px 0 0;font-size:14px;line-height:1.58;color:#4f473e;font-weight:600}
.notFound{
  background:rgba(255,250,242,.78);
  border:1px solid rgba(23,34,53,.14);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.notFound .eyebrow{
  color:var(--accent);
  text-shadow:none;
  margin:0 0 10px;
}
.notFound .testGrid{margin-top:18px}
footer{margin-top:26px;padding-top:14px;border-top:1px solid rgba(23,34,53,.12);text-align:center;color:var(--soft);font-size:12px;font-weight:900}
footer a{margin:0 6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fffaf1;
       padding:11px 18px;border-radius:999px;font-weight:900;font-size:13px;opacity:0;transition:.3s;pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:620px){
  .siteHead{display:block;padding:14px 16px 0}
  .logo{font-size:20px;margin-bottom:10px}
  .nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:5px;
    padding-bottom:5px;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;font-size:11px;padding:7px 9px}
  .wrap{padding:14px}
  .hero{min-height:390px;margin-top:12px}
  .heroCopy{padding:22px}
  .hero p{font-size:14px}
  .pageTitle h1{font-size:29px}
  .card{padding:18px}
  .artifactPanel{height:142px}
  .qtext{font-size:21px}
  .bigNum{font-size:62px}
  .bigCat{font-size:39px}
  .resBtns{display:grid;grid-template-columns:1fr;max-width:260px;margin:0 auto}
  .share,.retake{width:100%}
}