/* Crest Studio. Builds on styles.css. */
.studio-hero{text-align:center;padding:48px 16px 12px;max-width:820px;margin:0 auto}
.studio-hero h1{font-size:clamp(32px,7vw,58px);line-height:1.1;margin:8px 0 14px}
.studio-hero .lede b{color:var(--gold-2);font-weight:400}
.studio{display:grid;gap:28px;padding:24px 16px 48px;max-width:1100px;margin:0 auto;align-items:start}
@media(min-width:900px){.studio{grid-template-columns:1.05fr 1fr}.stage{position:sticky;top:84px}}
.stage{position:relative;padding:14px;overflow:hidden}
.stage .art svg{width:100%;height:auto;display:block}
/* The preview keeps its 4:5 shape before the crest is drawn, so nothing jumps while the page loads; the watermark
   sits on the artwork itself (a pseudo-element survives every redraw of the preview). */
.stage .art{position:relative;aspect-ratio:4/5}
.stage .art::after{content:"Preview \00B7  usurp.games";position:absolute;inset:auto 0 46% 0;text-align:center;transform:rotate(-24deg);font-family:var(--serif);font-size:clamp(18px,4vw,30px);letter-spacing:.3em;text-transform:uppercase;color:rgba(122,16,32,.22);pointer-events:none;white-space:nowrap}
.stage .wm{display:none}
.panel{display:grid;gap:16px;min-width:0}
.fld{display:block;margin:0}
.fld>span{display:block;font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.fld input,.fld select{width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:17px;color:var(--text);background:#120e0a;border:1px solid var(--gold-deep);border-radius:0;outline:none}
.fld input:focus-visible,.fld select:focus-visible{border-color:var(--gold-2);box-shadow:0 0 0 2px rgba(212,175,90,.3)}
.sws{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:40px;height:40px;border:2px solid #3a2e1f;background:var(--sw);cursor:pointer;border-radius:0;padding:0}
.sw[aria-pressed="true"]{border-color:var(--gold-2);box-shadow:0 0 0 2px var(--gold-2)}
.sw:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.chk{display:flex;gap:10px;align-items:center;font-size:16px;color:var(--text);cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--gold)}
.buy{border-top:1px solid #3a2e1f;padding-top:18px;display:grid;gap:10px}
.btn.big{font-size:17px;padding:16px 22px;text-align:center;justify-content:center}
.note{color:#ffb4a0;font-size:15px}
.paid{max-width:820px;margin:18px auto 0;padding:26px 22px;border-color:var(--gold)}
.paid h2{color:var(--gold-2);margin:6px 0 8px;font-size:clamp(22px,4vw,30px)}
.paid a{color:var(--gold-2)}
.dl{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.ref{margin-top:14px;word-break:break-all}
.how,.faq{max-width:900px;margin:0 auto;padding:40px 16px}
.how h2,.faq h2{font-size:clamp(26px,5vw,38px);margin-bottom:22px}
.steps3{list-style:none;display:grid;gap:16px;counter-reset:s;margin:0 0 18px;padding:0}
@media(min-width:760px){.steps3{grid-template-columns:repeat(3,1fr)}}
.steps3 li{border:1px solid #3a2e1f;padding:18px;background:rgba(0,0,0,.25);counter-increment:s}
.steps3 li::before{content:counter(s,upper-roman);font-family:var(--serif-d);color:var(--gold);font-size:22px;display:block}
.steps3 b{display:block;font-family:var(--serif);color:var(--gold-2);font-weight:700;margin:4px 0}
.faq details{border-bottom:1px solid #3a2e1f;padding:14px 0}
.faq summary{cursor:pointer;font-family:var(--serif);color:var(--gold-2);font-size:17px}
.faq p{margin-top:8px;color:var(--text)}
.site-foot p+p{margin-top:6px}
.stage{margin:0;padding:12px}
@media(max-width:420px){.sw{width:36px;height:36px}.sws{gap:7px}}
/* emblem picker */
.fld.emb>span b{color:var(--gold-2);font-weight:700;letter-spacing:.12em}
.emb-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.emb-tabs button{font:inherit;font-family:var(--serif);font-size:12px;letter-spacing:.08em;color:var(--muted);background:#120e0a;border:1px solid #3a2e1f;padding:6px 10px;min-height:36px;cursor:pointer}
.emb-tabs button[aria-pressed="true"]{color:var(--gold-2);border-color:var(--gold)}
.emb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.emb-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px 6px;min-height:84px;background:#17120d;border:1px solid #3a2e1f;color:var(--muted);font:inherit;font-size:12px;line-height:1.15;cursor:pointer}
.emb-b svg{width:46px;height:54px;flex:none}
.emb-b span{text-align:center;overflow-wrap:anywhere}
.emb-b:hover{border-color:var(--gold-deep)}
.emb-b[aria-checked="true"]{border-color:var(--gold-2);background:#2a2015;color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-2)}
.emb-b:focus-visible,.emb-tabs button:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
@media(max-width:420px){.emb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.emb-b svg{width:40px;height:48px}}
.row2{display:flex;flex-wrap:wrap;gap:10px}.row2 .btn{flex:1 1 180px}
/* blazon panel, gift, package thumbnails */
.mk{font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.meaning{border:1px solid #3a2e1f;background:rgba(0,0,0,.28);padding:14px 16px;display:grid;gap:2px}
.meaning .blz{font-style:italic;color:var(--gold-2);font-size:18px;margin-bottom:10px}
.meaning .mean{font-size:16px;color:var(--text)}
.meaning .tnote{font-size:14px;color:#ffb4a0;margin-top:8px}
.gift{border:1px solid #3a2e1f;padding:10px 14px}
.gift summary{cursor:pointer;font-family:var(--serif);color:var(--gold-2);font-size:15px}
.gift[open]{display:grid;gap:12px}
.inc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:6px}
@media(max-width:420px){.inc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inc figure{margin:0;text-align:center}
.inc .th{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:#120e0a;border:1px solid #3a2e1f;padding:6px;overflow:hidden}
.inc svg{display:block;height:auto}
.inc .th-print svg{width:74%;box-shadow:0 0 0 3px #5c4417,0 0 0 5px #d4af5a,0 6px 14px rgba(0,0,0,.6)}
.inc .th-av svg{width:82%;border-radius:50%;background:#efe1bd;aspect-ratio:1}
.inc .ph{width:58%;aspect-ratio:9/19.5;border-radius:10px;border:2px solid #5a4523;background:linear-gradient(#0c0a08,#2a231c 55%,#0c0a08);display:flex;align-items:center;justify-content:center}
.inc .ph svg{width:92%}
.inc figcaption{font-size:13px;line-height:1.3;color:var(--muted);margin-top:6px}
.mini-cert{background:#efe1bd;width:84%;padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:1px;color:#2a1a0e;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.mini-cert svg{width:70%}
.mc-k{font-family:var(--serif);font-size:6px;letter-spacing:.2em;color:#7a1020;text-transform:uppercase}
.mc-n{font-family:var(--serif-d);font-size:8px;font-weight:900;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mc-l{display:block;width:66%;height:2px;background:#c9b07a;margin-top:3px}
/* Crest Logo Kit card */
.kit{border-top:1px solid #3a2e1f;margin-top:8px;padding-top:16px;display:grid;gap:10px}
.kit-prev{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(120deg,#0c0a08,#2a231c 55%,#0c0a08);border:1px solid #3a2e1f;min-height:96px}
.kit-prev svg{width:74px;height:74px;flex:none}
.bn-t{display:grid;min-width:0}
.bn-t b{font-family:var(--serif-d);font-weight:900;color:var(--gold-2);font-size:clamp(16px,3.4vw,22px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-t i{font-family:var(--serif);font-style:normal;color:var(--gold);font-size:13px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-copy{font-size:16px;color:var(--text)}
.kit-copy b{color:var(--gold-2);font-weight:400;font-family:var(--serif)}
.ecard-mk{border:1px solid #3a2e1f;padding:10px 14px}
.ecard-mk summary{cursor:pointer;font-family:var(--serif);color:var(--gold-2);font-size:15px}
.ecard-mk[open]{display:grid;gap:12px}
.fld textarea{width:100%;padding:10px 14px;font:inherit;font-size:17px;color:var(--text);background:#120e0a;border:1px solid var(--gold-deep);border-radius:0;resize:vertical}
/* phone sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(13,11,9,.97);border-top:1px solid var(--gold-deep);box-shadow:0 -8px 24px rgba(0,0,0,.5);transform:translateY(115%);transition:transform .25s ease;visibility:hidden}
.buybar.on{transform:none;visibility:visible}
.bb-art{flex:none;width:46px;height:46px;padding:0;border:0;background:none;cursor:pointer}
.bb-art svg{display:block;width:100%;height:100%}
.bb-t{flex:1;min-width:0;display:grid;line-height:1.25}
.bb-t b{font-family:var(--serif);color:var(--gold-2);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-t span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .btn{flex:none;padding:12px 14px;font-size:13px;letter-spacing:.12em}
@media(min-width:900px){.buybar{display:none}}
@media(max-width:899px){.has-buybar .site-foot{padding-bottom:84px}}
@media(prefers-reduced-motion:reduce){.buybar{transition:none}}
/* shield shape, emblem count, full achievement */
.seg{display:inline-flex;border:1px solid var(--gold-deep)}
.seg button{font:inherit;font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--muted);background:#120e0a;border:0;padding:10px 18px;min-height:44px;cursor:pointer}
.seg button+button{border-left:1px solid var(--gold-deep)}
.seg button[aria-pressed="true"]{color:#14110e;background:var(--gold-2)}
.shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:420px}
.shapes button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;background:#17120d;border:1px solid #3a2e1f;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;min-height:70px}
.shapes svg{width:28px;height:34px}
.shapes svg path{fill:#3a2e1f;stroke:var(--gold);stroke-width:5}
.shapes button[aria-checked="true"]{border-color:var(--gold-2);color:var(--gold-2);background:#2a2015}
.shapes button[aria-checked="true"] svg path{fill:var(--gold-deep)}
.grand{border:1px solid var(--gold-deep);background:linear-gradient(180deg,rgba(212,175,90,.09),rgba(0,0,0,.25));padding:14px 16px;margin:0;display:grid;gap:10px}
.grand legend{font-family:var(--serif);color:var(--gold-2);font-size:15px;letter-spacing:.12em;text-transform:uppercase;padding:0 6px}
.grand legend em{font-style:normal;font-size:10px;letter-spacing:.14em;color:#14110e;background:var(--gold-2);padding:2px 6px;margin-left:6px;vertical-align:2px}
.grand p{font-size:15px;color:var(--muted);margin:0}
.g2{display:grid;gap:10px}@media(min-width:520px){.g2{grid-template-columns:1fr 1fr}}
/* "See it as": colour, engraved, line art, seal */
.stage .art img{width:100%;height:auto;display:block}
.views{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-top:10px;position:relative;z-index:1}
.views .mk{margin:0}
.views .seg button{padding:8px 12px;font-size:12px;min-height:40px}
.views-note{flex-basis:100%;text-align:center;font-size:14px;line-height:1.4;color:var(--muted);margin:0}
@media(max-width:380px){.views .seg button{padding:8px 8px;letter-spacing:.04em}}
.fld>span em.opt-l{font-family:var(--body);font-style:italic;text-transform:none;letter-spacing:0;color:var(--muted);font-size:13px;margin-left:4px}
.kit.heir{border-color:var(--gold-deep)}