:root { --void:#0c0c0c; --coal:#171717; --cream:#f2efe8; --soft:#b9b4ab; --signal:#ff6847; --line:rgba(242,239,232,.22); --display:Georgia,"Times New Roman",serif; --body:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--cream); background:var(--void); font-family:var(--body); line-height:1.65; } a { color:inherit; text-decoration-color:var(--signal); text-underline-offset:.22em; } a:hover,a:focus-visible { color:var(--signal); } :focus-visible { outline:2px solid var(--signal); outline-offset:4px; }.header { display:flex; justify-content:space-between; align-items:center; padding:1.15rem clamp(1.15rem,4vw,4.5rem); border-bottom:1px solid var(--line); }.brand { color:var(--cream); font-size:.77rem; font-weight:bold; letter-spacing:.08em; line-height:1; text-decoration:none; text-transform:uppercase; }.back { font-size:.68rem; font-weight:bold; letter-spacing:.11em; text-decoration:none; text-transform:uppercase; } main { width:min(100% - 2.3rem,52rem); margin:0 auto; padding:clamp(4.5rem,9vw,9rem) 0; } h1,h2 { font-family:var(--display); font-weight:400; letter-spacing:-.06em; line-height:.91; } h1 { margin:0 0 3rem; font-size:clamp(4rem,9vw,8rem); } h2 { margin:2.6rem 0 .8rem; color:var(--signal); font-size:clamp(2rem,4vw,3.4rem); } p { margin:0 0 1.15rem; } .notice { padding:1rem 1.2rem; border-left:3px solid var(--signal); background:var(--coal); font-size:.9rem; } footer { padding:1.5rem clamp(1.15rem,4vw,4.5rem); color:var(--soft); background:#060606; font-size:.76rem; } footer nav { display:flex; flex-wrap:wrap; gap:1.1rem; } @media (max-width:500px) { .header { align-items:flex-start; gap:1rem; flex-direction:column; } }