@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600&display=swap');

:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; background:#10100f; color:#f5f2e9; }
* { box-sizing:border-box; }
body { margin:0; background:#10100f; }
.masthead, main, footer { width:min(1440px, calc(100% - 48px)); margin:auto; }
.masthead { min-height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #393833; }
.wordmark { color:#f5f2e9; text-decoration:none; font:600 18px/1 'Manrope'; letter-spacing:.18em; }
.wordmark span { color:#c9ff62; }
.masthead p { color:#96948d; font-size:13px; letter-spacing:.05em; }
.intro { padding:9vw 0 7vw; max-width:1000px; }
.eyebrow, .type, .number { font:600 11px/1.2 'Manrope'; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow { color:#c9ff62; }
h1 { font:500 clamp(48px,7vw,104px)/.98 'Manrope'; letter-spacing:-.055em; margin:24px 0 30px; }
h1 em { font-style:normal; color:#9a9993; }
.lede { max-width:670px; color:#b6b3aa; font-size:clamp(18px,2vw,26px); line-height:1.45; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
.card { min-height:540px; padding:28px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; color:white; text-decoration:none; background-image:linear-gradient(180deg,rgba(5,5,4,.08) 20%,rgba(5,5,4,.83) 100%),var(--image); background-size:cover; background-position:center; transition:filter .35s ease; }
.card::after { content:''; position:absolute; inset:0; border:1px solid transparent; transition:border-color .35s; }
.card:hover { filter:saturate(1.15); }
.card:hover::after { border-color:#c9ff62; }
.card--wide { grid-column:span 2; min-height:680px; }
.number { position:absolute; left:28px; top:28px; color:#c9ff62; }
.type { color:#dad8d1; }
.card h2 { font:500 clamp(45px,6vw,90px)/.95 'Manrope'; letter-spacing:-.055em; margin:12px 0 4px; }
.card p { margin:0; color:#d3d0c7; font-size:17px; }
footer { border-top:1px solid #393833; margin-top:80px; min-height:130px; display:flex; align-items:center; justify-content:space-between; color:#77756e; font-size:13px; }
footer a { color:#c9ff62; text-decoration:none; border-bottom:1px solid rgba(201,255,98,.35); padding-bottom:3px; transition:border-color .2s ease; }
footer a:hover, footer a:focus-visible { border-color:#c9ff62; }
@media (max-width:700px) {
  .masthead, main, footer { width:min(100% - 28px,1440px); }
  .masthead p { display:none; }
  .intro { padding:90px 0 70px; }
  .grid { display:block; }
  .card, .card--wide { min-height:500px; margin-bottom:2px; }
  footer { align-items:flex-start; justify-content:center; flex-direction:column; gap:8px; }
}