@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#111111;
  --panel:#171717;
  --panel-hover:#202020;
  --text:#ffffff;
  --muted:#a8a8a8;
  --orange:#d83d10;
  --orange-hover:#ed4a19;
  --border:rgba(255,255,255,.105);
}

*{box-sizing:border-box}

html{
  min-width:320px;
  background:var(--bg);
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(216,61,16,.15), transparent 37rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.site{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(38px,7vh,80px) 20px;
}

.profile{
  width:min(100%,600px);
  text-align:center;
  animation:intro .65s cubic-bezier(.22,1,.36,1) both;
}

.avatar{
  display:block;
  width:clamp(154px,34vw,214px);
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  margin:0 auto clamp(27px,5vh,39px);
  border-radius:50%;
  box-shadow:0 22px 55px rgba(0,0,0,.35);
}

.content{width:100%}

.kicker{
  margin:0 0 17px;
  color:#c3c3c3;
  font-size:11px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.34em;
}

.logo{
  display:block;
  width:min(100%,470px);
  height:auto;
  margin:0 auto 26px;
}

.description{
  max-width:555px;
  margin:0 auto 31px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
  font-weight:400;
}

.links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.link{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 18px;
  color:#f5f5f5;
  text-decoration:none;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.005em;
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.link span:last-child{
  color:#777;
  font-size:13px;
  transition:color .18s ease, transform .18s ease;
}

.link:hover{
  transform:translateY(-2px);
  background:var(--panel-hover);
  border-color:rgba(255,255,255,.18);
}

.link:hover span:last-child{
  color:#aaa;
  transform:translate(1px,-1px);
}

.link--accent{
  grid-column:1/-1;
  background:var(--orange);
  border-color:transparent;
  color:#fff;
}

.link--accent span:last-child{color:rgba(255,255,255,.65)}

.link--accent:hover{
  background:var(--orange-hover);
  border-color:transparent;
}

.link--accent:hover span:last-child{color:#fff}

.imprint-button{
  appearance:none;
  border:0;
  padding:0;
  margin:29px 0 0;
  background:none;
  color:#777;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px;
  transition:color .18s ease;
}

.imprint-button:hover{color:#c5c5c5}

.dialog{
  width:min(calc(100vw - 28px),720px);
  max-height:min(88vh,850px);
  padding:0;
  overflow:auto;
  color:#fff;
  background:#131313;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  box-shadow:0 35px 120px rgba(0,0,0,.72);
}

.dialog::backdrop{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(5px);
}

.dialog__card{
  position:relative;
  padding:42px clamp(24px,6vw,52px) 38px;
}

.dialog__close{
  position:sticky;
  float:right;
  top:14px;
  margin:-24px -31px 0 0;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:#1d1d1d;
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.dialog h2{
  margin:0 0 28px;
  font-size:clamp(30px,6vw,43px);
  line-height:1;
  letter-spacing:-.04em;
}

.dialog h3{
  margin:27px 0 7px;
  color:#fff;
  font-size:15px;
  line-height:1.4;
}

.legal{
  color:#aaa;
  font-size:13px;
  line-height:1.72;
}

.legal p{margin:0 0 16px}
.legal strong{color:#e9e9e9}
.legal a{color:#fff;text-underline-offset:3px}

.back-button{
  min-width:112px;
  height:44px;
  margin-top:19px;
  padding:0 18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#1b1b1b;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@keyframes intro{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

@media (max-width:520px){
  .site{padding:32px 16px 38px}
  .links{grid-template-columns:1fr}
  .link--accent{grid-column:auto}
  .link{min-height:52px}
  .description{font-size:14px;line-height:1.7}
  .dialog__card{padding:38px 22px 30px}
  .dialog__close{margin:-20px -7px 0 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}