@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }

:root { --clay: #c94831; --coal: #11100f; --paper: #f1e7da; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--clay); color: var(--coal); }
body { font-family: "Bricolage Grotesque", sans-serif; }
a { color: inherit; text-decoration: none; }
main { min-height: 100vh; overflow: hidden; position: relative; }
.grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
header { height: 88px; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-bottom: 4px solid var(--coal); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; }
header p:nth-child(2) { text-align: center; }
header p:last-child { text-align: right; }
.brand { width: max-content; font: 800 30px/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.05em; }
.stage { min-height: calc(100vh - 188px); position: relative; padding: 36px 32px 26px; border-bottom: 2px solid var(--coal); }
.kicker, .note, footer { font-family: "IBM Plex Mono", monospace; }
.kicker { margin: 0; font-size: 10px; letter-spacing: .08em; }
h1 { position: relative; z-index: 2; margin: 8vh 0 0; font-size: clamp(76px, 12vw, 194px); font-weight: 800; line-height: .77; letter-spacing: -.075em; }
h1 span { color: var(--paper); padding-left: 9vw; }
.note { position: absolute; z-index: 2; right: 32px; top: 38%; width: 220px; margin: 0; font-size: 10px; line-height: 1.5; text-align: right; }
.looker { position: absolute; right: 2vw; bottom: -5vw; width: min(43vw, 560px); transform: rotate(2deg); }
footer { min-height: 100px; padding: 22px 32px; display: flex; align-items: end; justify-content: space-between; gap: 30px; font-size: 10px; line-height: 1.5; }
footer p { margin: 0; }
footer a { padding-top: 8px; border-top: 2px solid var(--coal); }
.links { display: flex; gap: 24px; align-items: flex-end; }
.settings { appearance: none; padding: 8px 0 0; border: 0; border-top: 2px solid var(--coal); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cookie-notice { position: fixed; z-index: 30; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; padding: 18px; background: var(--paper); border: 2px solid var(--coal); box-shadow: 8px 8px 0 var(--coal); font: 400 11px/1.55 "IBM Plex Mono", monospace; }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { max-width: 760px; margin: 0; }
.cookie-notice p a { border-bottom: 1px solid currentColor; }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions button { appearance: none; min-width: 105px; padding: 11px 14px; border: 2px solid var(--coal); background: transparent; color: inherit; font: 500 10px/1 "IBM Plex Mono", monospace; cursor: pointer; }
.cookie-actions button:hover, .cookie-actions button:focus-visible { background: var(--coal); color: var(--paper); }
.legal { min-height: 100vh; background: var(--paper); }
.legal article { padding: 34px 32px 70px; }
.legal .eyebrow { margin: 0; font: 500 10px/1 "IBM Plex Mono", monospace; }
.legal h1 { margin: 8vh 0 10vh; font-size: clamp(70px, 11vw, 174px); }
.legal h1 span { color: var(--clay); }
.legal article section { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 30px; padding: 24px 0; border-top: 2px solid var(--coal); }
.legal h2 { margin: 0; font: 500 10px/1.2 "IBM Plex Mono", monospace; }
.legal section p { max-width: 760px; margin: 0; font-size: clamp(17px, 2vw, 25px); line-height: 1.3; }
.legal section a, .legal-return { border-bottom: 1px solid currentColor; }
.legal-return { display: inline-block; margin-top: 45px; font: 500 10px/1 "IBM Plex Mono", monospace; }

@media (max-width: 760px) {
  header { height: 76px; padding: 0 18px; grid-template-columns: 1fr auto; }
  header p:nth-child(2) { display: none; }
  .stage { min-height: calc(100svh - 76px); padding: 28px 18px 42px; }
  .kicker { max-width: 100%; font-size: 9px; line-height: 1.35; }
  h1 { margin-top: clamp(74px, 13svh, 124px); font-size: clamp(62px, 18vw, 112px); line-height: .8; }
  h1 span { padding-left: 0; }
  .note { position: static; width: min(82%, 260px); margin: 18px 0 0 auto; text-align: right; }
  .looker { width: 76vw; right: -18vw; bottom: 0; }
  footer { min-height: 0; padding: 28px 18px 36px; flex-direction: column; align-items: stretch; gap: 30px; }
  .links { width: 100%; flex-direction: column; gap: 10px; align-items: stretch; }
  .links a, .settings { width: 100%; text-align: right; }
  .cookie-notice { left: 10px; right: 10px; bottom: 10px; grid-template-columns: 1fr; gap: 14px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-actions button { width: 100%; }
  .legal article { padding: 28px 18px 60px; }
  .legal h1 { margin: 10vh 0; font-size: 18vw; }
  .legal article section { grid-template-columns: 1fr; gap: 13px; }
}