/* Crest Studio guide and free-tool pages. Builds on styles.css and studio.css. */
.pg-hero{text-align:center;padding:44px 16px 8px;max-width:860px;margin:0 auto}
.pg-hero h1{font-size:clamp(30px,6.4vw,52px);line-height:1.12;margin:8px 0 14px}
.pg-hero .lede{max-width:680px;margin:0 auto 22px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sec{max-width:900px;margin:0 auto;padding:34px 16px}
.sec h2{font-size:clamp(24px,4.4vw,34px);margin-bottom:14px}
.sec h3{font-family:var(--serif);color:var(--gold-2);font-size:19px;margin:22px 0 6px}
.sec p+p{margin-top:12px}
.sec ul,.sec ol{margin:10px 0 0 22px;display:grid;gap:8px}
.sec li::marker{color:var(--gold)}
.callout{border:1px solid var(--gold-deep);background:rgba(0,0,0,.28);padding:18px 20px;margin-top:18px}
.callout b{color:var(--gold-2);font-weight:400;font-family:var(--serif)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;max-width:1100px;margin:0 auto;padding:10px 16px 34px}
.card{border:1px solid #3a2e1f;background:rgba(0,0,0,.25);padding:12px;display:flex;flex-direction:column;gap:10px}
.card svg{width:100%;height:auto}
.card .cap{font-family:var(--serif);color:var(--gold-2);font-size:15px;text-align:center}
.card .sub{font-size:15px;color:var(--muted);text-align:center;margin-top:-6px}
.card .btn{justify-content:center;text-align:center;font-size:14px;padding:10px 12px;margin-top:auto}
.tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:17px}
.tbl th,.tbl td{border-bottom:1px solid #3a2e1f;padding:10px 8px;text-align:left;vertical-align:top}
.tbl th{font-family:var(--serif);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.tbl td:first-child{white-space:nowrap}
.tbl .la{font-family:var(--serif);color:var(--gold-2)}
.tbl a{font-size:14px;white-space:nowrap}
.sw-dot{display:inline-block;width:18px;height:18px;border:1px solid #5c4417;vertical-align:-3px;margin-right:8px}
.tblwrap{overflow-x:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 16px}
.chip{font:inherit;font-family:var(--serif);font-size:13px;letter-spacing:.08em;color:var(--muted);background:#120e0a;border:1px solid #3a2e1f;padding:8px 12px;cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{color:var(--gold-2);border-color:var(--gold)}
.gen{max-width:900px;margin:0 auto;padding:10px 16px 24px}
.gen-out{display:grid;gap:14px}
@media(min-width:760px){.gen-out.three{grid-template-columns:repeat(3,1fr)}}
.motto-card{border:1px solid var(--gold-deep);background:rgba(0,0,0,.3);padding:18px;text-align:center;display:flex;flex-direction:column;gap:8px}
.motto-card .la{font-family:var(--serif);font-weight:700;color:var(--gold-2);font-size:21px;line-height:1.25}
.motto-card .en{color:var(--text);font-style:italic}
.motto-card .src{font-size:14px;color:var(--muted)}
.motto-card .btn{justify-content:center;font-size:14px;padding:10px 12px;margin-top:auto}
.house{display:grid;gap:22px;align-items:center}
@media(min-width:760px){.house{grid-template-columns:minmax(0,320px) 1fr}}
.house .art{border:1px solid #3a2e1f;padding:10px;background:rgba(0,0,0,.25)}
.house .art svg{width:100%;height:auto}
.house h2{margin:0 0 6px}
.house .alts{margin-top:12px;color:var(--muted);font-size:16px}
.house .alts button{font:inherit;color:var(--gold-2);background:none;border:0;border-bottom:1px dotted var(--gold-deep);cursor:pointer;padding:0;margin:0 4px}
.namelist{columns:2 180px;column-gap:24px;margin-top:12px;list-style:none;padding:0}
.namelist li{break-inside:avoid;padding:4px 0;border-bottom:1px solid #2a231c}
.dlrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.dlrow .btn{font-size:14px;padding:10px 14px}
.tpl-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:16px}
.tpl-grid figure{margin:0;border:1px solid #3a2e1f;background:rgba(0,0,0,.25);padding:12px;display:flex;flex-direction:column;gap:10px}
.tpl-grid img{width:100%;height:auto;background:#fff}
.tpl-grid figcaption{font-family:var(--serif);color:var(--gold-2);font-size:15px}
.related{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:14px}
.related a{display:block;border:1px solid #3a2e1f;background:rgba(0,0,0,.25);padding:14px 16px;text-decoration:none}
.related a b{display:block;font-family:var(--serif);color:var(--gold-2);font-weight:700;font-size:16px}
.related a span{color:var(--muted);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-bottom:10px}
.foot-links a{font-size:15px}
.fine{font-size:14px;color:var(--muted);margin-top:16px}
.center{text-align:center}
.surname-form{display:flex;gap:12px;align-items:flex-end;max-width:560px;margin:0 auto 10px;flex-wrap:wrap}
.surname-form .fld{flex:1 1 240px}
.surname-form .btn{min-height:48px}
.card .sub i{font-size:14px}
.card img{width:100%;height:auto;aspect-ratio:4/5}
@media(max-width:520px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 10px 28px}.card{padding:8px;gap:6px}.card .cap{font-size:13px}.card .sub{font-size:13px}.card .btn{font-size:11px;padding:8px 6px;letter-spacing:.08em}}
/* heraldry quiz */
.quiz{max-width:720px}
.qnav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.qnav span{font-family:var(--serif);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.qnav .btn{padding:8px 12px;font-size:13px}
.qnav .bar{flex:1 1 100%;height:4px;background:#2a231c}
.qnav .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));transition:width .3s}
.qstep{border:1px solid #3a2e1f;background:rgba(0,0,0,.28);padding:18px;margin:0 0 14px;min-width:0}
.qstep legend{font-family:var(--serif);color:var(--gold-2);font-size:clamp(18px,4vw,22px);font-weight:700;padding:0 6px;line-height:1.3}
.opt{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid #3a2e1f;margin-top:10px;cursor:pointer;min-height:52px;font-size:18px;background:#120e0a}
.opt:hover,.opt:focus-within{border-color:var(--gold)}
.opt input{accent-color:var(--gold);width:20px;height:20px;flex:none}
.qres{text-align:center}
.qres .r-art svg{width:min(80vw,360px);height:auto;margin:0 auto 10px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.qres h2{font-size:clamp(24px,5vw,34px);margin:6px 0}
.qres .lede{margin:0 auto 10px}
.r-motto{font-family:var(--serif);color:var(--gold-2)}
.r-blz{font-style:italic;color:var(--gold-2);margin-top:6px}
.friend{display:flex;gap:14px;align-items:center;border:1px solid var(--gold-deep);padding:12px;margin-bottom:16px;background:rgba(0,0,0,.3)}
.friend .f-art svg{width:90px;height:auto}
.linkish{font:inherit;color:var(--gold-2);background:none;border:0;border-bottom:1px dotted var(--gold-deep);cursor:pointer;padding:0}
.muted-s{color:var(--muted);font-size:15px}
/* homepage */
.home-hero{display:grid;gap:14px;align-items:center;max-width:1120px;margin:0 auto;padding:22px 16px 6px}
@media(min-width:860px){.home-hero{grid-template-columns:1.15fr .85fr;gap:36px;padding-top:44px}}
.home-hero h1{font-size:clamp(30px,5.6vw,54px);line-height:1.1;margin:8px 0 12px}
.home-hero .lede{margin:0 0 18px}
.home-hero .surname-form{margin:0;max-width:560px}
.hh-art{order:-1;width:min(42vw,176px);margin:0 auto}
.hh-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.6))}
@media(min-width:860px){.hh-art{order:0;width:100%;max-width:430px}}
.hh-alt{font-size:15px;color:var(--muted);margin-top:12px}
.trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;max-width:1120px;margin:10px auto 0;padding:12px 16px;font-family:var(--serif);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2)}
.trust li::before{content:"\2726\00a0";color:var(--gold)}
.pack{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
@media(min-width:760px){.pack{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.pack figure{margin:0;border:1px solid #3a2e1f;background:rgba(0,0,0,.25);padding:10px;display:flex;flex-direction:column}
.pack img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#0d0b09}
.pack figcaption{font-family:var(--serif);font-size:15px;color:var(--gold-2);margin-top:8px;text-align:center;line-height:1.3}
.pack small{font-family:var(--body);font-size:14px;color:var(--muted);letter-spacing:0}
.emb-strip{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin:0 auto;padding:0 16px 10px}
@media(min-width:760px){.emb-strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}}
.emb-strip a{display:block;text-align:center;text-decoration:none;color:var(--gold-2);font-family:var(--serif);font-size:14px;border:1px solid #3a2e1f;background:rgba(0,0,0,.25);padding:8px 8px 10px}
.emb-strip a:hover{border-color:var(--gold)}
.emb-strip img{display:block;width:100%;height:auto;aspect-ratio:4/5;margin-bottom:6px}
.split{display:grid;gap:22px;align-items:center}
@media(min-width:760px){.split{grid-template-columns:1fr 1fr;gap:36px}}
.split img{display:block;width:100%;height:auto;border:1px solid #3a2e1f}
.split h2{margin:6px 0 10px}

.gm-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gm-mini a{display:block;text-decoration:none;color:var(--gold-2);font-family:var(--serif);font-size:12px;letter-spacing:.08em;text-align:center}
.gm-mini img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border:1px solid #3a2e1f;margin-bottom:4px}
.gm-mini a:hover img{border-color:var(--gold-deep)}

/* ad slot low on guide pages: links to the games until an ad network fills it */
.ad-slot.ad-content{max-width:900px;margin:34px auto 10px;padding:0 16px}
.ad-slot.ad-content.ad-net{min-height:280px}
.ad-slot .ad-lbl{display:block;font-family:var(--serif);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#7d6f57;text-align:center;margin-bottom:4px}
.hg{border:1px solid #3a2e1f;background:#120e0a;padding:20px 18px;text-align:center}
.hg .hg-k{font-family:var(--serif);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.hg h2{margin:4px 0 6px}
.hg p{margin:6px auto 0;max-width:620px}
.hg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 12px}
.hg-row a{display:block;text-decoration:none;color:var(--gold-2)}
.hg-row img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border:1px solid #3a2e1f;display:block;margin-bottom:4px}
.hg-row a:hover img{border-color:var(--gold-deep)}
.hg-row b{font-family:var(--serif);font-size:13px;letter-spacing:.04em;font-weight:700}
@media(max-width:520px){.hg-row{grid-template-columns:repeat(2,minmax(0,1fr))}}