/* Steiff web brand adaptation. Sources and deliberate adaptations: README.md. */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/work-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/work-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/work-sans-700.woff2') format('woff2');
}

:root {
  --paper: #fafafa;
  --warm: #f7f7f7;
  --ink: #000000;
  --muted: #656565;
  --accent: #000000;
  --line: #e5e5e5;
  --serif: 'Work Sans', Arial, sans-serif;
  --sans: 'Work Sans', Arial, sans-serif;
}

body { font-weight: 400; background: #fafafa; }
h1, h2, h3 { font-family: var(--sans); font-style: normal; }
h1 { font-size: clamp(46px, 4.4vw, 64px); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; }
h2 { font-weight: 700; font-size: clamp(34px, 3.65vw, 52px); letter-spacing: -.035em; line-height: 1.16; }
h3 { font-weight: 700; letter-spacing: -.025em; }
em { color: inherit; font-style: normal; font-weight: inherit; }
.eyebrow { color: #555; font-weight: 600; letter-spacing: .09em; }

.announcement { background: #cdd7d7; color: #000; font-weight: 400; }
.announcement span { border-color: #a7b6b6; color: #000; border-radius: 0; }
.site-header { background: #fff; border-color: #ddd; }
.site-header .steiff-logo { width: 112px; height: 49px; }
.site-header .memories-wordmark { color: #555; font-size: 15px; }
.site-header .brand-cross { color: #777; }
.site-header nav a { color: #000; font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.button { min-height: 50px; border-radius: 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; box-shadow: 0 2px 8px #58585852; }
.button:hover { background: #000; border-color: #000; transform: none; box-shadow: 0 3px 12px #58585866; }
.button.light:hover { background: #ededed; color: #000; border-color: #ededed; }
.button.outline { background: #fff; color: #656565; border-color: #ddd; font-weight: 400; box-shadow: none; }
.button.outline:hover { background: #000; color: #fff; }
.text-link { color: #000; font-weight: 600; }
.text-link:hover { color: #555; border-color: #555; }
.tiny-line, .caption-line { background: #000; }
.hero-halo { background: radial-gradient(ellipse at center, #f3f3f3 0%, #f8f8f8 45%, #ffffff00 71%); }
.hero-note, .stage-status { color: #666; }
.stage-kicker { font-family: var(--sans); font-size: 12px; font-style: normal; font-weight: 400; color: #555; }
.handwritten, .photo-print span { font-family: var(--sans); font-style: normal; font-weight: 400; color: #333; }
.hero-handwritten { font-size: 15px; }
.photo-print { background: #fff; box-shadow: 0 8px 25px #00000018; }
.zoom-button, .icon-button { background: #fff; border-color: #ccc; color: #000; }
.zoom-button:hover, .icon-button:hover { background: #eee; }
.hero-look-picker { background: #fff; border-color: #ccc; border-radius: 0; }
.hero-look-picker button { border-radius: 0; color: #000; font-weight: 400; }
.hero-look-picker button.active { color: #fff; background: #000; font-weight: 600; }

.promise-strip { background: #f7f7f7; border-color: #ddd; }
.promise-strip i { border-color: #aaa; color: #000; }
.comparison-pictures figure, .gift-image, .look-card, .upload-area, .upload-result, .builder-preview-image { border-radius: 0; }
.comparison-pictures figcaption { color: #000; font-weight: 600; }
.detail-list span, .step-number, .step-foot { color: #000; }
.detail-list { line-height: 1.55; }
.person-option.active { border-color: #000; border-width: 2px; }
.person-option:hover { border-color: #777; }
.look-card { border-color: #ddd; background: #fff; }
.look-card.selected { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.look-card:hover { border-color: #000; }
.look-card-image { background: #fff; }
.look-card .look-badge { background: #f2f2f2; border-radius: 0; color: #333; }
.look-name { font-family: var(--sans); font-size: 20px; font-weight: 600; }
.look-subtitle { color: #555; }
.selected .look-selected { color: #fff; border-color: #000; background: #000; }
.look-card-text { border-top: 1px solid #eee; }
.step-number { font-style: normal; font-weight: 600; }
.craft-section { background: #f7f7f7; }
.craft-copy h2 { font-size: 45px; }
.craft-copy > p:not(.eyebrow) { color: #555; }
.craft-signature { border-color: #ccc; }
.craft-signature > span:last-child { color: #555; }
.image-credit { background: #ffffffed; color: #333; }
.gift-image, .gift-cards article:nth-child(2) .gift-image, .gift-cards article:nth-child(3) .gift-image { background: #f5f5f5; }
.gift-cards h3 { font-size: 23px; }
.gift-cards article > span { color: #555; }
.faq-list summary { color: #000; font-weight: 600; }
.faq-list summary span { color: #000; }
.final-cta { background: #000; color: #fff; }
.final-cta em { color: inherit; }
.final-cta .eyebrow, .final-cta p { color: #ddd; }
.final-cta h2 { font-size: 52px; }
.final-cta > img { border-radius: 0; }
.site-footer { background: #f7f7f7; }
.footer-top > span, .footer-bottom p, .footer-link { color: #666; }

dialog { background: #fff; border: 1px solid #ddd; border-radius: 0; }
.builder-heading { font-weight: 600; }
.builder-progress { color: #666; }
.builder-progress .current { color: #000; border-color: #000; font-weight: 600; }
.upload-area { background: #f7f7f7; border-color: #777; }
.upload-area.dragging { background: #eee; border-color: #000; }
.demo-person { border-radius: 0; }
.demo-person:hover, .demo-person.active { background: #f5f5f5; border-color: #000; }
.builder-look-buttons button { color: #000; border-color: #ccc; border-radius: 0; }
.builder-look-buttons .active { background: #f2f2f2; border-color: #000; font-weight: 600; }
.builder-look-buttons button span, .builder-preview-image .preview-label { color: #666; }
.builder-options textarea { background: #fff; border-color: #aaa; border-radius: 0; }
.summary-list dt { color: #555; }
.status-note { color: #444; background: #f7f7f7; border-color: #000; }
.selected-notice { color: #000; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #32786e; outline-offset: 4px; }

@media (max-width: 1100px) {
  h1 { font-size: 50px; }
  .site-header .brand { gap: 12px; }
  .site-header .steiff-logo { width: 98px; height: 43px; }
  .site-header nav { gap: 19px; }
  .site-header nav a { font-size: 13px; }
  .look-name { font-size: 18px; }
  .craft-copy h2 { font-size: 39px; }
}
@media (max-width: 820px) {
  h1 { font-size: 39px; }
  .hero-handwritten { font-size: 14px; }
  .craft-copy h2 { font-size: 32px; }
  .final-cta h2 { font-size: 40px; }
  .gift-cards h3 { font-size: 20px; }
}
@media (max-width: 600px) {
  h1 { font-size: clamp(34px, 9.5vw, 46px); line-height: 1.14; letter-spacing: -.05em; }
  h2 { font-size: 33px; line-height: 1.17; }
  .site-header .steiff-logo { width: 77px; height: 39px; }
  .site-header .memories-wordmark { font-size: 12px; }
  .site-header .brand { gap: 9px; }
  .site-header .button.small { font-size: 12px; min-height: 42px; }
  .hero-copy .eyebrow { font-size: 12px; letter-spacing: 0; }
  .hero-copy .tiny-line { flex-shrink: 0; }
  .hero-handwritten { font-size: 13px; }
  .stage-kicker { font-size: 12px; max-width: 160px; text-align: right; }
  .look-name { font-size: 17px; }
  .look-card-text { min-height: 102px; }
  .look-card .look-badge { font-size: 12px; }
  .craft-copy h2 { font-size: 34px; }
  .gift-cards h3 { font-size: 22px; }
  .final-cta h2 { font-size: 35px; }
  .builder-heading { font-size: 28px; }
  .builder-look-buttons button { font-size: 14px; }
}
@media (max-width: 360px) {
  .site-header .steiff-logo { width: 68px; }
  h1 { font-size: 33px; }
  .look-name { font-size: 16px; }
  .stage-kicker { max-width: 130px; }
}