/* borkborkbork.com — Swedish flag palette, nothing else.
   Flag yellow on a darkened flag blue: 7.7:1, so the type clears AA even at
   this size rather than relying on the large-text exemption. */
:root {
  --blue: #00396b;
  --yellow: #fecc00;
  --icon-hover: #ffffff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* accounts for mobile browser chrome; ignored where unsupported */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 20px 12vh; /* uneven padding seats the block above centre, as the old site did */
  background: var(--blue);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Small, light and widely tracked: at this size the tracking does the work that
   scale used to, and the empty field around it carries the composition.
   text-indent offsets the trailing space letter-spacing adds after the last
   letter, which would otherwise sit the line left of true centre. */
h1 {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.social {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: clamp(12px, 2vh, 18px);
}

.social a {
  display: inline-flex;
  padding: 14px; /* pads the 18px glyph out to a 46px touch target */
  color: var(--yellow);
  border-radius: 8px;
  transition: color 0.2s ease;
}

.social a:hover,
.social a:focus-visible {
  color: var(--icon-hover);
}

/* Ring follows the hover colour so the focused state reads as one change.
   Negative offset draws it inside the padding, keeping the indicator
   proportionate to the 18px glyph without shrinking the 46px touch target. */
.social a:focus-visible {
  outline: 1px solid var(--icon-hover);
  outline-offset: -7px;
}

@media (prefers-reduced-motion: reduce) {
  .social a { transition: none; }
}