:root { color-scheme: light; font-family: "Instrument Sans", system-ui, sans-serif; color: #292822; background: #f6f2e9; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 76rem; padding: 0 clamp(1rem, 5vw, 4rem); }
header, footer, nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
header, footer { padding: 1.25rem 0; }
footer { border-top: 1px solid #c5bba8; }
a { color: inherit; text-underline-offset: .2em; }
.brand { font-weight: 800; text-decoration: none; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; padding: .75rem; background: white; }
:focus-visible { outline: 3px solid #8b472a; outline-offset: 4px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1rem, 6vw, 5rem); padding: clamp(2rem, 6vw, 6rem) 0; }
.account { grid-template-columns: minmax(0, 40rem); min-height: 70vh; }
h1, h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; line-height: 1.04; margin: 0 0 1rem; }
h1 { font-size: clamp(2.6rem, 7vw, 5.7rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3, p { margin: 0 0 .75rem; }
p, li { line-height: 1.55; }
.intro { font-size: 1.2rem; max-width: 34rem; margin-bottom: 1.4rem; }
.button { display: inline-block; font: inherit; font-weight: 700; padding: .85rem 1.15rem; border: 0; border-radius: .5rem; background: #273e33; color: #fff; text-decoration: none; cursor: pointer; }
figure { margin: 0; }
img { width: 100%; height: auto; display: block; border-radius: 1rem; }
figcaption { margin-top: .5rem; font-size: .875rem; }
main > section { margin-bottom: clamp(2rem, 5vw, 4rem); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
ol.tiles { padding-left: 1.5rem; }
.tiles > *, .notice { padding: 1.25rem; background: #e9e2d3; border-radius: .75rem; }
.notice { margin-bottom: 1.5rem; }
.notice h2 { font-size: 2rem; }
.demo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; padding: 1.4rem; margin-top: 1rem; background: #eee7db; border-radius: .75rem; }
.demo [role=status] { flex-basis: 100%; text-align: center; margin: 0; }
.screen { display: grid; place-items: center; width: clamp(4rem, 14vw, 8rem); height: clamp(3rem, 10vw, 6rem); background: #fff8e9; border: .35rem solid #665446; border-radius: .5rem; font-size: 1.7rem; }
.screen.changed { animation: reveal .35s ease-out; }
@keyframes reveal { from { opacity: .35; transform: scale(.95); } }
@media (prefers-reduced-motion: reduce) { .screen.changed { animation: none; } }
details { padding: 1rem 0; border-top: 1px solid #c5bba8; }
summary { cursor: pointer; font-weight: 650; }
details p { margin: .75rem 0 0; }
@media (max-width: 44rem) { .hero, .tiles { grid-template-columns: 1fr; } }