@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Quicksand";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/quicksand-latin-600-normal.woff2") format("woff2")}

:root{
  --fjordur:#17242B;   /* Fjörður: logo, text, dark surfaces */
  --grjot:#3D4A51;     /* Grjót: body copy */
  --sandur:#ECEBE6;    /* Sandur: secondary surfaces */
  --pappir:#FAF9F5;    /* Pappír: page background */
  --linur:#E4E2DC;
  --a-dokkum:#F6F5F0;  /* text on Fjörður */
  --hover:#2B3A42;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--pappir);color:var(--fjordur);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:960px;margin:0 auto;padding-left:32px;padding-right:32px}

main{flex:1;display:flex;align-items:center;padding-top:96px;padding-bottom:128px}
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:40px;animation:appear .7s ease both}
.hero h1{margin:0;line-height:0}
.hero h1 svg{display:block;width:clamp(200px,40vw,384px);height:auto}
.hero p{margin:0;max-width:30em;font-size:clamp(18px,2.2vw,21px);line-height:1.6;color:var(--grjot);text-wrap:pretty}

.btn{
  display:inline-block;background:var(--fjordur);color:var(--a-dokkum);text-decoration:none;
  font-weight:600;font-size:15px;line-height:1.2;padding:14px 24px;border-radius:2px;
  transition:background-color .25s ease;
}
.btn:hover{background:var(--hover)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--fjordur);outline-offset:3px}

footer{background:var(--fjordur);color:var(--a-dokkum);padding-top:40px;padding-bottom:40px;font-size:14px;line-height:1.7}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px}
footer address{font-style:normal}
footer .name{font-family:"Quicksand","Manrope",system-ui,sans-serif;font-weight:600;font-size:18px;line-height:1.4;margin-bottom:4px}
footer .quiet{opacity:.72}
footer a{color:inherit;text-decoration:underline;text-underline-offset:4px;transition:opacity .25s ease}
footer a:hover{opacity:.78}
footer a:focus-visible{outline-color:var(--a-dokkum)}
footer .right{text-align:left}


.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mark-small{display:block;width:clamp(140px,26vw,220px);height:auto}

@keyframes appear{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero{animation:none}.btn,footer a{transition:none}}
@media (max-width:560px){
  .wrap{padding-left:24px;padding-right:24px}
  main{padding-top:64px;padding-bottom:88px}
  .hero{gap:32px}
  .hero h1 svg{width:min(62vw,260px)}
}