@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Playfair+Display+SC:wght@700&display=swap');
:root{
  --bg:#f3f3f0; --ink:#1b1a17; --muted:#6f6a5c; --rule:rgba(27,26,23,.16); --rule-2:rgba(27,26,23,.34);
  --gold:#96701f; --gold-l:#b98a2a;
  --sans:"Playfair Display SC",Georgia,serif;
  --text:"Cormorant Garamond",Georgia,serif;
  --num:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.6}
.page{max-width:1000px;margin:0 auto;padding:44px 32px 72px;position:relative}

.top{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--rule-2);padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{display:block}
.wordmark{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:.2em;line-height:1;text-transform:uppercase;color:var(--ink)}
.wordmark i{font-style:normal;color:var(--gold)}
.top .meta{font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:right}

h1{font-family:var(--text);font-weight:300;font-size:clamp(44px,7vw,80px);line-height:1;letter-spacing:-.01em;margin:34px 0 0;max-width:15ch;color:var(--ink)}
h1 span{color:var(--gold);font-style:italic}
.deck{font-size:19px;line-height:1.55;max-width:50ch;margin:18px 0 0;color:var(--muted)}

.spec{display:flex;margin:34px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.spec div{flex:1;padding:14px 16px 14px 0;border-right:1px solid var(--rule)}
.spec div:last-child{border-right:0}
.spec b{display:block;font-family:var(--text);font-size:28px;font-weight:400;color:var(--gold);letter-spacing:-.01em}
.spec span{font-family:var(--sans);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

h2{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin:52px 0 18px;font-weight:700;color:var(--gold)}
h2::before{content:"";height:1px;background:var(--rule);flex:0 0 34px}
h2::after{content:"";height:1px;background:var(--rule);flex:1}

.screens{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:20px;align-items:start}
@media(max-width:820px){.screens{grid-template-columns:1fr}}
.screens figure{margin:0}
.screens img{display:block;width:100%;height:auto;box-shadow:0 24px 50px -28px rgba(27,26,23,.55)}
.screens figcaption{font-family:var(--sans);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:10px 0 0}

ol{margin:0;padding:0;list-style:none;counter-reset:s}
ol li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--rule)}
ol li::before{content:counter(s,decimal-leading-zero);font-family:var(--text);font-size:15px;color:var(--gold);padding-top:4px;letter-spacing:.06em}
ol li b{font-family:var(--text);font-size:20px;font-weight:600;display:block;margin-bottom:2px;color:var(--ink)}
ol li p{margin:0;color:var(--muted);font-size:16.5px;max-width:58ch}

table.edge{width:100%;border-collapse:collapse;font-size:16.5px}
table.edge th,table.edge td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.edge th{font-family:var(--sans);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
table.edge td:first-child{font-family:var(--text);font-weight:600;width:36%;color:var(--ink)}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:14px;border-top:1px solid var(--rule-2);font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.spec{flex-wrap:wrap}.spec div{flex:1 1 50%;border-bottom:1px solid var(--rule)}}