:root {
  --tausta: #111111;
  --teksti: #f7f7f7;
  --himmea: #858585;
  --reuna: #606060;
  --oranssi: #ffa500;
  --kohdistus: #ffd166;

  --sivun-leveys: 78ch;
  --sisus-x: 2ch;
  --sisus-y: 0.82em;
  --fontti: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--tausta);
}

body {
  min-height: 100svh;
  margin: 0;
  background: var(--tausta);
  color: var(--teksti);
  font-family: var(--fontti);
  font-size: clamp(11px, 1.35vw, 16px);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

a {
  color: var(--oranssi);
  text-decoration: none;
}

a:visited { color: var(--oranssi); }
a:hover { color: #fff; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--kohdistus);
  outline-offset: 3px;
}

button { font: inherit; }
img, video { max-width: 100%; }

.ohituslinkki {
  position: fixed;
  z-index: 10000;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.45rem 0.6rem;
  background: var(--tausta);
  border: 1px solid var(--reuna);
  transform: translateY(-160%);
}

.ohituslinkki:focus { transform: translateY(0); }

.vain-lukijalle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sivu {
  width: min(calc(100vw - 1.25rem), var(--sivun-leveys));
  margin-inline: auto;
  padding-block: clamp(1rem, 5vw, 3rem);
}

.ylatunniste { margin-bottom: 0.85em; }

.tekstilogo {
  margin: 0;
  color: var(--oranssi);
  font: inherit;
  line-height: 1.02;
  white-space: pre;
  overflow: hidden;
  font-size: clamp(7px, 1.35vw, 16px);
}

.alaotsikko {
  margin: 0.6em 0 0;
  color: var(--himmea);
}

.paate,
.osio,
.reunarivi,
.reunasivu,
.paatteen-loppu {
  font: inherit;
  line-height: inherit;
}

.paate {
  width: 100%;
  color: var(--teksti);
  --paateleveys: 100%;
}

.himmea,
.ylateksti { color: var(--himmea); }

.hakaspainike {
  display: inline-flex;
  align-items: baseline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oranssi);
  cursor: pointer;
}

.hakaspainike::before { content: "[ "; color: var(--reuna); }
.hakaspainike::after { content: " ]"; color: var(--reuna); }
.hakaspainike:disabled { cursor: not-allowed; opacity: 0.65; }
.hakaspainike:hover:not(:disabled) { color: #fff; }

.tekstiosio p,
.nyt-soi p { margin: 0; }
.tekstiosio p + p { margin-top: 0.55em; }

.whois {
  line-height: 1.08;
}

.henkilokortti {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18ch, max-content);
  gap: 0.45em 2ch;
  align-items: start;
}

.henkilo p { margin: 0; }
.henkilo p + p { margin-top: 0.18em; }

.profiililinkit {
  display: grid;
  grid-template-columns: repeat(2, minmax(7ch, auto));
  gap: 0.12em 2ch;
}

.jakoviiva {
  height: 1px;
  margin: 0.68em calc(-1 * var(--sisus-x));
  background: var(--reuna);
}

.nyt-soi {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1.5ch;
  align-items: start;
}

.kansipaikka {
  width: 64px;
  aspect-ratio: 1;
  border: 1px solid var(--reuna);
  background:
    linear-gradient(135deg, transparent 0 48%, var(--reuna) 49% 51%, transparent 52%),
    linear-gradient(45deg, #242424, #111111);
}

.nyt-soi-teksti {
  min-width: 0;
}

.nyt-soi-teksti strong,
.nyt-soi-teksti .himmea {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postaukset,
.linkit {
  display: grid;
  gap: 0.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.postaukset time { white-space: nowrap; }

.linkit li {
  display: grid;
  grid-template-columns: max-content minmax(1.5ch, 1fr) minmax(0, max-content);
  gap: 0.8ch;
  align-items: baseline;
}

.pisteviiva {
  align-self: center;
  border-bottom: 2px dotted color-mix(in srgb, var(--reuna) 75%, transparent);
  transform: translateY(-0.15em);
}

.toiminnot {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75em;
}

@media (max-width: 700px) {
  :root {
    --sisus-x: 2ch;
    --sisus-y: 0.78em;
  }

  .sivu {
    width: min(calc(100vw - 0.75rem), var(--sivun-leveys));
    padding-block: 0.75rem;
  }

  .tekstilogo {
    font-size: clamp(6px, 1.65vw, 11px);
  }

  .nyt-soi {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1.25ch;
  }

  .kansipaikka { width: 48px; }
}

@media (max-width: 430px) {
  body { font-size: 12px; }

  .henkilokortti {
    grid-template-columns: minmax(0, 1fr) minmax(16ch, max-content);
    gap: 0.5em 1ch;
  }

  .profiililinkit { gap: 0.12em 1ch; }

  .linkit li {
    grid-template-columns: max-content 1fr;
  }

  .linkit li .pisteviiva { display: none; }
  .linkit li span:last-child { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}