:root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, sans-serif; background: #faf7f4; color: #262a30; }
* { box-sizing: border-box; }
body { margin: 0; padding: clamp(1.2rem, 5vw, 4rem); }
main { width: min(100%, 62rem); margin: 0 auto; }
.hero { border-top: 3px solid #c45e36; padding: clamp(1.6rem, 5vw, 3rem) 0 2rem; }
.brand-icon { display: block; width: clamp(4.8rem, 12vw, 7rem); height: auto; }
.eyebrow { color: #8b3b1f; font-size: .86rem; font-weight: 650; }
h1, h2 { font-family: ui-serif, Georgia, serif; letter-spacing: -.045em; line-height: 1.03; }
h1 { font-size: clamp(3rem, 9vw, 5.6rem); margin: .18em 0 .3em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .8rem; }
p { max-width: 42rem; line-height: 1.6; }
a { color: #8b3b1f; text-underline-offset: .2em; }
.intro { font-size: clamp(1.22rem, 3vw, 1.6rem); margin: 0; }
.preview { border-top: 1px solid #ded8d2; padding-top: 1.7rem; }
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 3vw, 1.8rem); max-width: 44rem; }
figure { margin: 0; min-width: 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid #ded8d2; border-radius: clamp(.6rem, 2vw, 1.05rem); }
figcaption { font-size: .92rem; margin-top: .55rem; line-height: 1.4; }
footer { margin-top: 2rem; padding-top: .4rem; border-top: 1px solid #ded8d2; }
@media (prefers-color-scheme: dark) {
  :root { background: #141619; color: #f8f5f1; }
  .eyebrow, a { color: #ed986f; }
  .hero { border-color: #ed986f; }
  .preview, figure img, footer { border-color: #555a61; }
}

@media (max-width: 35rem) { .screens { grid-template-columns: 1fr; max-width: 22rem; } }