:root{color-scheme:dark;font-family:Georgia,Iowan Old Style,serif;color:#f2ecdc;background:#101717}*{box-sizing:border-box}body{margin:0}header,main{width:min(92%,84rem);margin-inline:auto}header{display:flex;align-items:center;justify-content:space-between;min-height:5rem;border-bottom:1px solid #47524d}header a:first-child{font-size:1.3rem}header a,.demo{text-decoration:none}a{color:inherit;text-underline-offset:.25em}a:focus-visible{outline:2px solid #f3c283;outline-offset:.4rem}header a:hover{text-decoration:underline}article{display:grid;grid-template-columns:minmax(17rem,.74fr) minmax(0,1.26fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;padding:clamp(3rem,10vh,8rem) 0}.kind,figcaption,.demo-note,header a:last-child,.demo{font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.kind{margin:0;color:#e2b789;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}h1{margin:.18em 0 .26em;font-size:clamp(3.6rem,6.6vw,6.5rem);font-weight:400;letter-spacing:-.065em;line-height:1.06}.introduction>p:not([class]){max-width:37ch;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.55}.demo{display:inline-flex;gap:1rem;align-items:center;padding:.8rem 1rem;margin-top:.55rem;background:#edd1a3;color:#1c211e;font-weight:600}.demo:hover{background:#ffe4b7}.demo-note,figcaption{color:#bdc5b9;font-size:.87rem;line-height:1.55}.demo-note{max-width:33ch}figure{margin:0}figure img{display:block;width:100%;height:auto;border:1px solid #69706a}figcaption{margin-top:.65rem}@media(max-width:48rem){header,main{width:min(89%,36rem)}header{min-height:4rem}article{grid-template-columns:1fr;gap:2rem;padding:2.8rem 0}}