/* KROMA: shared type scale and layout, including the thank-you page. */
:root {
  --type-small: .875rem;
  --type-label: .75rem;
  --type-body: 1rem;
  --type-title: clamp(2rem, 3.9vw, 3.75rem);
  --page-gutter: clamp(1.25rem, 5vw, 6rem);
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--type-body); line-height: 1.7; }
body, input, select, textarea, button { font-synthesis: none; }
.header, .hero, .section, footer { min-width: 0; }
.hero, .universe-grid, .product-grid, .process, .faq, .contact, .form-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.hero > *, .section > *, .universe-grid > *, .product-grid > *,
.form-row > *, .contact form, .contact-copy { min-width: 0; }
.header { padding-inline: var(--page-gutter); gap: 1.5rem; }
.brand { flex: 0 0 auto; }
.header nav { font-size: var(--type-small); gap: clamp(1rem, 2vw, 2rem); }
.eyebrow, .line-tag, .product-kicker {
  font-size: var(--type-label); line-height: 1.6; letter-spacing: .12em;
}
.hero-copy { padding: clamp(2.5rem, 5vw, 5rem) var(--page-gutter); }
.hero h1 {
  font-size: clamp(2.75rem, 6.8vw, 6.5rem); line-height: 1.08;
  letter-spacing: -.045em; margin-bottom: 1.75rem;
}
.hero-description { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.8; }
.hero-actions { gap: 1rem 1.5rem; }
.button, .text-link { font-size: var(--type-small); line-height: 1.5; min-height: 2.75rem; }
.button { padding: 1rem 1.35rem; min-height: 3.25rem; gap: 1rem; }
.text-link { align-items: center; }
.hero-foot p, .visual-note { font-size: var(--type-small); line-height: 1.6; }
.hero-visual { min-width: 0; width: 100%; }
.photo-caption { font-size: var(--type-label); line-height: 1.5; flex-wrap: wrap; letter-spacing: .04em; }
.specialties {
  overflow: visible; flex-wrap: wrap; white-space: normal; gap: .75rem 1.5rem;
  font-size: var(--type-label); padding: 1.5rem var(--page-gutter); text-align: center;
}
.specialties span { font-size: inherit; }
.specialties i { font-size: 1.125rem; }
.section { padding: clamp(3.5rem, 7vw, 6.25rem) var(--page-gutter); }
h2, .section-intro h2, .options-heading h2, .faq h2, .contact h2, .process-title h2 {
  font-size: var(--type-title); line-height: 1.15; letter-spacing: -.035em;
}
.section-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem 3rem; }
.section-intro > p:last-child, .options-heading > p {
  font-size: var(--type-body); line-height: 1.8; max-width: 36ch;
}
.options-heading > p { flex: 0 1 36ch; }
.universe { min-height: 40rem; padding: 2rem 2rem 14rem; }
.universe h3 { font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.2; letter-spacing: -.03em; }
.universe p, .universe ul { font-size: var(--type-body); line-height: 1.8; }
.universe p { max-width: 38ch; }
.universe li { margin-block: .35rem; }
.universe ul { margin-bottom: 1.5rem; }
.business-art, .personal-art { left: 2rem; right: 2rem; }
.small-label, .label-three { font-size: var(--type-label); letter-spacing: .08em; }
.filters button { min-height: 2.75rem; font-size: var(--type-small); padding: .65rem 1.1rem; }
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.product { display: flex; flex-direction: column; min-width: 0; }
.product-art { height: auto; aspect-ratio: 1; flex-shrink: 0; }
.product-info { display: flex; flex-direction: column; flex: 1; }
.product h3 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -.025em; }
.product-info > p:not(.product-kicker) { font-size: var(--type-body); line-height: 1.8; min-height: 0; max-width: 42ch; flex: 1; }
.product-kicker { color: #626269; }
.product-choose { font-size: var(--type-small); line-height: 1.6; min-height: 2.75rem; align-items: center; gap: 1rem; }
.illustration-note { font-size: var(--type-small); line-height: 1.8; max-width: 70ch; }
.school-label { font-size: var(--type-small); white-space: normal; line-height: 1.4; }
.school-label:nth-child(3), .sticker-outline { font-size: var(--type-label); }
.school-label span { flex-shrink: 0; }
.process, .faq, .contact { gap: clamp(2.5rem, 5vw, 5rem); }
.steps h3 { font-size: 1.375rem; line-height: 1.35; }
.steps p { font-size: var(--type-body); line-height: 1.8; max-width: 48ch; color: #bebec6; }
.steps li > span { font-size: var(--type-small); }
summary { font-size: var(--type-body); line-height: 1.6; min-height: 3.5rem; }
summary > span { flex-shrink: 0; }
details > p { font-size: var(--type-body); line-height: 1.8; }
.contact-copy > p:not(.eyebrow) { font-size: var(--type-body); line-height: 1.8; max-width: 38ch; color: #bdbdc5; }
.contact-instagram, .email-link { font-size: var(--type-small); line-height: 1.8; }
.contact-instagram { max-width: 100%; }
.contact-instagram strong { font-size: clamp(1.125rem, 2vw, 1.5rem); overflow-wrap: anywhere; }
.contact label { font-size: var(--type-small); line-height: 1.6; }
input, select, textarea { font-size: var(--type-body); line-height: 1.6; padding: .875rem; min-height: 3.25rem; }
textarea { min-height: 9rem; }
select { text-overflow: ellipsis; }
.form-row { gap: 1rem; }
.form-note, .send-status { font-size: var(--type-small); line-height: 1.8; max-width: 60ch; }
#captcha-widget { min-width: 0; max-width: 100%; margin-bottom: 1.25rem; }
.form-trap { min-width: 0 !important; }
footer { padding-inline: var(--page-gutter); }
footer > p, footer > div { font-size: var(--type-small); line-height: 1.8; }
footer > div span { font-size: var(--type-small); }
.thanks-content { width: 100%; max-width: 52rem; padding: 3.5rem var(--page-gutter); }
.thanks-content h1 { font-size: clamp(2.25rem, 5.5vw, 4.625rem); line-height: 1.15; letter-spacing: -.035em; }
.thanks-content > p:not(.eyebrow) { font-size: var(--type-body); line-height: 1.8; max-width: 48ch; }
#receipt { overflow-wrap: anywhere; font-size: var(--type-small); }

@media (max-width: 1279px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .header { height: 5.125rem; }
  .brand { width: 10.5rem; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 2.75rem; height: 2.75rem; background: none; border: 0; padding: 10px; }
  .menu-toggle span { width: 23px; height: 1px; background: white; }
  .header nav { display: none; position: absolute; top: 5.125rem; inset-inline: 0; padding: 1.5rem var(--page-gutter); background: var(--black); border-bottom: 1px solid #333; flex-direction: column; align-items: stretch; gap: 1rem; font-size: 1rem; }
  .header nav.is-open { display: flex; }
  .header nav a { display: flex; align-items: center; min-height: 2.75rem; }
  .nav-cta { justify-content: space-between; }
  .contact, .faq, .process { grid-template-columns: minmax(0, 1fr); }
  .contact-copy { max-width: 42rem; }
  .contact-copy > p:not(.eyebrow) { max-width: 48ch; }
  .contact form { max-width: 48rem; width: 100%; }
  .universe { padding-inline: 1.5rem; }
  .business-art, .personal-art { left: 1.5rem; right: 1.5rem; }
  .section-intro { display: block; }
  .section-intro > p:last-child { margin-top: 1.5rem; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(2.75rem, 13.5vw, 5.25rem); }
  .hero-visual { min-height: 0; max-height: none; aspect-ratio: 4 / 5; height: auto; }
  .hero-actions .text-link { font-size: var(--type-small); }
  .hero-foot p, .visual-note { font-size: var(--type-small); }
  .universe-grid { grid-template-columns: minmax(0, 1fr); }
  .universe { min-height: 0; padding-bottom: 14rem; }
  .universe h3 { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
  .options-heading { display: block; }
  .options-heading > p { margin-top: 1.5rem; }
  .specialties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
  .specialties i { display: none; }
  .specialties span { font-size: var(--type-label); line-height: 1.7; }
  .school-art { padding: 1.5rem; }
  .school-label { padding: .75rem; }
  .school-label:nth-child(3) { font-size: var(--type-label); }
  .sticker-outline { max-width: calc(100% - 2rem); right: 1rem; font-size: var(--type-label); }
  .steps h3 { font-size: 1.25rem; }
  .faq-list summary { font-size: var(--type-body); }
  .form-note { font-size: var(--type-small); }
  footer > div { justify-content: flex-start; }
}
@media (max-width: 639px) {
  .product-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
  .form-row { gap: 0; }
  .product-art { aspect-ratio: 1.15; }
  .school-art { gap: .75rem; }
  .thanks-content .eyebrow { margin-top: 3rem; }
}
@media (max-width: 359px) {
  .visual-note { right: 1rem; padding: .75rem; }
  .photo-caption { padding-inline: 1rem; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .business-art, .personal-art { left: 1.25rem; right: 1.25rem; }
  .name-label { max-width: 100%; font-size: 1rem; }
}