/* ============================================================
   rued.dk — placeholder

   Small on purpose. Nothing here should be worth keeping when
   the page is replaced, so there is nothing to unpick later.

   Light and the same type stack as digitalarts.dk, so a visitor
   moving between the two does not feel they have left one world
   for another. Colours are the same values and clear 4.5:1
   against the background.
   ============================================================ */

:root{
  --color-bg:             #fbfbfd;
  --color-text-primary:   #1d1d1f;   /* 16.28:1 */
  --color-text-secondary: #515154;   /*  7.65:1 */
  --color-action:         #0066cc;   /*  5.39:1 */

  --font-display: "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "SF Pro Text",    -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  background:var(--color-bg); color:var(--color-text-primary);
  font-family:var(--font-text); font-size:17px; line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--color-action); outline-offset:3px; border-radius:4px; }

/* Centred both ways on a large screen. On a phone it sits nearer the
   top, where the eye goes first, rather than floating in the middle of
   a tall viewport. */
.page{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:80px 24px;
}
.card{ width:100%; max-width:440px; }

.name{
  font-family:var(--font-display);
  font-size:clamp(32px, 6vw, 44px);
  font-weight:600; line-height:1.06; letter-spacing:-.02em;
}
.line{
  margin-top:12px;
  font-size:17px; color:var(--color-text-secondary);
  letter-spacing:-.01em;
}
/* The second line is a different kind of statement from the first, so
   it gets air rather than sitting in the same block. */
.line--after{ margin-top:22px; }

/* Underlined from the start, not on hover: there is one link on the
   page and it has to be findable on a touch screen too. */
.line a{
  color:var(--color-action);
  text-decoration:underline;
  text-decoration-color:rgba(0,102,204,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .15s;
}
.line a:hover{ text-decoration-color:var(--color-action); }

@media (max-width:600px){
  .page{ align-items:flex-start; padding:88px 22px 56px; }
}