/* House of Stories Project — typography layer, load after the base dark design CSS. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
  --hos-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --hos-font-ui: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --hos-type-hero: clamp(3.4rem, 6vw, 5.75rem);
  --hos-type-h1: clamp(2.9rem, 4.8vw, 4.5rem);
  --hos-type-h2: clamp(2.4rem, 3.8vw, 3.75rem);
  --hos-type-h3: clamp(1.75rem, 2.5vw, 2.5rem);
  --hos-type-body: 1.0625rem;
  --hos-type-lead: clamp(1.125rem, 1.7vw, 1.25rem);
  --hos-type-ui: 1rem;
  --hos-type-eyebrow: 0.8125rem;
  --hos-type-caption: 0.875rem;
}
body { font-family: var(--hos-font-ui); font-size:var(--hos-type-body); line-height:1.6; }
.hos-type-hero { font-family:var(--hos-font-display); font-size:var(--hos-type-hero); font-weight:600; line-height:.98; letter-spacing:-.025em; }
.hos-type-h1 { font-family:var(--hos-font-display); font-size:var(--hos-type-h1); font-weight:600; line-height:1.04; letter-spacing:-.02em; }
.hos-type-h2 { font-family:var(--hos-font-display); font-size:var(--hos-type-h2); font-weight:600; line-height:1.08; }
.hos-type-h3 { font-family:var(--hos-font-display); font-size:var(--hos-type-h3); font-weight:600; line-height:1.12; }
.hos-type-lead { font-family:var(--hos-font-ui); font-size:var(--hos-type-lead); line-height:1.65; max-width:65ch; }
.hos-type-ui { font-family:var(--hos-font-ui); font-size:var(--hos-type-ui); font-weight:600; }
.hos-type-eyebrow { font-family:var(--hos-font-ui); font-size:var(--hos-type-eyebrow); font-weight:800; text-transform:uppercase; letter-spacing:.2em; }
.hos-type-caption { font-family:var(--hos-font-ui); font-size:var(--hos-type-caption); line-height:1.45; }
.hos-type-statement { font-family:var(--hos-font-ui); font-size:var(--hos-type-h1); font-weight:800; line-height:1.04; letter-spacing:-.035em; }
.hos-readable { max-width:68ch; }
button, input, textarea, select { font-family:var(--hos-font-ui); font-size:1rem; }
@media (max-width: 640px) { :root { --hos-type-body:1rem; --hos-type-hero:clamp(2.8rem,11vw,4rem); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }

/* Adapt the package roles to the existing buildless workspace. */
:root{--font-display:var(--hos-font-display);--font-ui:var(--hos-font-ui)}
body{font-family:var(--hos-font-ui);font-size:var(--hos-type-body);line-height:1.6}
h1,body[data-intensity=reflective] h1{font:600 var(--hos-type-h1)/1.04 var(--hos-font-display);letter-spacing:-.02em;overflow-wrap:break-word}
.hero h1{font:600 var(--hos-type-hero)/.98 var(--hos-font-display);letter-spacing:-.025em;max-width:750px}
body[data-intensity=focused] .hero h1{font-size:var(--hos-type-h2)}
h2,.card h2,.panel h2{font:600 var(--hos-type-h2)/1.08 var(--hos-font-display)}
h3,.card h3,.feature h3{font:600 var(--hos-type-h3)/1.12 var(--hos-font-display)}
p,.card p,.panel p,.note,.card .note,.feature p{font:400 var(--hos-type-body)/1.7 var(--hos-font-ui);max-width:68ch}
.hero>p:not(.privacyhint){font-size:var(--hos-type-lead);line-height:1.65;max-width:65ch}
nav button,.sidebottom>button{font:600 16px/1.45 var(--hos-font-ui);min-height:44px}
nav h3{font:800 12px/1.5 var(--hos-font-ui);letter-spacing:.15em}
.eyebrow,.tag{font:800 var(--hos-type-eyebrow)/1.6 var(--hos-font-ui);letter-spacing:.2em}
.composer label{font:600 17px/1.5 var(--hos-font-ui)}
.composer textarea,textarea.answer{font:400 18px/1.65 var(--hos-font-ui)}
.submit,.actions button,.pill,.feature button{font:600 16px/1.5 var(--hos-font-ui);min-height:48px}
.quick strong{font:600 16px/1.5 var(--hos-font-ui)}.quick p{font:400 16px/1.65 var(--hos-font-ui)}
.privacyhint,.hero p.privacyhint{font:400 14px/1.6 var(--hos-font-ui)!important;max-width:68ch!important}
.composebottom small,.sectionlabel,.sectionlabel span:last-child,.samples button{font:400 14px/1.6 var(--hos-font-ui)}
.samples button{min-height:44px}.sectionlabel{gap:18px}.composebottom{gap:16px;align-items:center}.submit{white-space:nowrap}.submit span{margin-left:12px}
.feedback,.feedback input{font-size:16px}.anonymous{font-size:14px}.anonymous small{font-size:12px}.testbadge{font-size:11px}header{font-size:14px}footer{font-size:14px}footer span{font-size:11px}
.brand{font-family:var(--hos-font-display)}.brand small{font-family:var(--hos-font-ui)}
.storychip{font-size:16px}.usertext{font-size:18px;max-width:68ch}
.collapsed nav button{font-size:16px}.collapsed .sidebottom>button{font-size:0}
@media(min-width:721px) and (max-width:1000px){.sidebottom>button{font-size:0}.hero h1{max-width:650px}.quickgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){header{gap:8px}#breadcrumb{font-size:12px}.testbadge{display:none}.hero h1{max-width:100%;font-size:var(--hos-type-hero)}.hero>p:not(.privacyhint){font-size:18px}.composer textarea,textarea.answer{font-size:17px}.composebottom{flex-wrap:wrap}.composebottom small{flex:1 1 100%;font-size:13px}.composebottom .submit{margin-left:auto}.quickgrid{grid-template-columns:minmax(0,1fr)}.sectionlabel{flex-wrap:wrap}.sectionlabel span:last-child{max-width:none;text-align:left}.feature{gap:18px}.collapsed .sidebottom>button{font-size:16px}.privacyhint button{padding-left:0}footer{flex-wrap:wrap;gap:12px}.panel h2{font-size:var(--hos-type-h2)}}