@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Karla"; src: url("fonts/karla.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
:root { color-scheme: light; --ink: #10262b; --petrol: #0f4c55; --paper: #fbfaf6; --gold: #c9a24a; --muted: #5b6b6e; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--paper); color: var(--ink); font: 17px/1.55 "Karla", system-ui, sans-serif; }
.portal { width: min(34rem, calc(100% - 2.5rem)); padding: 2.5rem 0; }
.mark { display: flex; align-items: center; gap: .75rem; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: 2.25rem; }
.mark em { font-style: normal; font-weight: 400; color: var(--muted); }
h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; margin: 0 0 1rem; }
.button { display: inline-block; margin-top: .5rem; padding: .8rem 1.35rem; border-radius: .6rem; background: var(--petrol); color: #fff; text-decoration: none; font-weight: 700; }
.button:hover { background: var(--ink); }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.apps { list-style: none; padding: 0; display: grid; gap: .75rem; }
.contact { margin-top: 2.5rem; color: var(--muted); font-size: .95rem; }
.contact a { color: var(--petrol); }