/* Characterz / ThreeDee presentation. Keep content, artwork and catalog behavior intact.
   Canonical palette: prototypes/headz-studio/components/color-tokens.css. */
@font-face{font-family:Poppins;src:url('/assets/Poppins-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
body[data-palette]{background:var(--td-color-page);color:var(--td-color-text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,.logo,.footer-credit{font-family:Poppins,Arial,sans-serif;font-weight:800;text-wrap:balance}
p{text-wrap:pretty}
.hero h1{font-size:clamp(42px,6vw,84px);line-height:1.08;letter-spacing:-.055em}
.hero h1 span{font:inherit;color:var(--td-color-text)}
.hero h1 span::after{content:none}
.hero:has(.hero-wordmark){height:auto;min-height:0;padding-block:var(--td-space-40)}
.hero h1.hero-wordmark{font-size:clamp(100px,16vw,200px);line-height:1.05;margin:0 0 var(--td-space-20);letter-spacing:-.065em}
.hero h1.hero-wordmark span{color:var(--td-color-signature)}
.hero-tagline{font-family:Poppins,Arial,sans-serif;font-weight:800;font-size:clamp(18px,2.5vw,28px);line-height:1.4;margin:0 0 var(--td-space-10);color:var(--td-color-text)}
.logo{font-weight:800;letter-spacing:-1.5px}
.logo span{color:var(--td-color-signature)}
.logo{display:inline-flex;align-items:baseline;white-space:nowrap}
.logo small{margin-left:var(--td-space-10);font:400 14px/1.5 Arial,Helvetica,sans-serif;letter-spacing:0;color:var(--td-color-muted)}
@media(max-width:700px){.logo{position:relative;padding-bottom:16px}.logo small{position:absolute;left:0;bottom:0;margin-left:0;font-size:11px}}
.hero{background:var(--td-color-page)}
.copy{background:radial-gradient(ellipse,var(--td-color-page) 60%,transparent 75%)}
.hero-icon-pattern img{filter:none}
nav[aria-label="Main navigation"]{background:var(--td-color-page);border-bottom:1px solid var(--td-color-border)}
.eyebrow,.textlink,.faq-list a,.icon-detail a,.icon-page{color:var(--td-color-link)}
.intro,.format-item span,.count,.note,.empty,.previewlabel,.preview-description,.faq-intro p,.faq-list p,.category-nav h3,.search-status p,.more-row{color:var(--td-color-muted)}
.primary,.icon-detail .buy{background:var(--td-color-action);color:var(--td-color-on-action);border:1px solid var(--td-color-action);box-shadow:0 2px 0 var(--td-deep-coral);border-radius:6px}
.primary:hover,.icon-detail .buy:hover{background:var(--td-color-action-hover);border-color:var(--td-color-action-hover)}
nav .buy,#load-more{background:var(--td-ink);color:var(--td-color-on-dark);border-color:var(--td-ink);box-shadow:none;border-radius:6px}
nav .buy:hover,#load-more:hover{background:var(--td-color-muted)}
.contents,.preview-stage,.detail-views figure,dialog .mainimg{background:var(--td-color-surface);border-color:var(--td-color-border)}
.contents{gap:var(--td-space-20);padding:var(--td-space-20) var(--td-space-30)}
.format-item{border-color:var(--td-color-border)}
.card{background:var(--td-color-surface);border-color:var(--td-color-border);color:var(--td-color-text)}
.card:hover{border-color:var(--td-color-link)}
.filter,.category-nav .filter{background:transparent;color:var(--td-color-muted)}
.filter:hover{background:var(--td-color-surface)}
.filter[aria-pressed=true],.category-nav .filter[aria-pressed=true]{background:var(--td-color-selected-surface);color:var(--td-color-selected-text);box-shadow:inset 3px 0 var(--td-color-link);font-weight:700}
.search,.mobile-category select,.style-control select,.step,.close{background:var(--td-color-page);color:var(--td-color-text);border-color:var(--td-color-control-text)}
.search::placeholder{color:var(--td-color-muted)}
.search-field button,.search-status button,.search-help button{background:var(--td-color-surface);color:var(--td-color-link);border-color:var(--td-color-control-text)}
dialog{background:var(--td-color-page);color:var(--td-color-text);border-color:var(--td-color-border)}
dialog::backdrop{background:#20221f99}
.angle{background:var(--td-color-page);color:var(--td-color-muted);border-color:var(--td-color-control-text)}
.angle[aria-pressed=true]{background:var(--td-color-selected-surface);border-color:var(--td-color-link);color:var(--td-color-selected-text)}
.faq-section,.faq-list details{border-color:var(--td-color-border)}
.site-footer{background:var(--td-ink);background-image:none;border-color:var(--td-ink);color:var(--td-color-on-dark)}
.site-footer .footer-brand p,.site-footer .footer-credit,.site-footer .footer-group h3{color:var(--td-color-on-dark)}
.site-footer a:hover{color:var(--td-color-on-dark-accent)}
.icon-detail{color:var(--td-color-text)}
body[data-palette] :is(a,button,input,select,summary):focus-visible{outline:3px solid var(--td-color-focus);outline-offset:4px}
.site-footer a:focus-visible{outline-color:var(--td-color-on-dark-accent)}
::selection{background:var(--td-color-surface);color:var(--td-color-text)}
@media(max-width:700px){.contents{padding:var(--td-space-20)}.hero h1{font-size:clamp(38px,10vw,60px)}.actions{flex-wrap:wrap;gap:var(--td-space-20)}.copy{max-width:100%}}