/* kovalcik.info — direction E "Portrait ring", dark + light themes.
   Palette tokens are the ones locked in the spec (issue #6). */

* { box-sizing: border-box; }

html[data-theme=dark] {
  color-scheme: dark;
  --bg: radial-gradient(900px 430px at 50% -10%, #17233d 0%, #0e1118 60%);
  --fg: #eef1f7; --muted: #a9b2c3;
  --name-accent: #6d97ff;
  --btn-solid: #3b6dff; --btn-solid-fg: #fff;
  --btn-out-b: #2c3852; --btn-out-fg: #dfe6f2;
  --toggle-fg: #a9b2c3; --toggle-b: #2c3852;
}

html[data-theme=light] {
  color-scheme: light;
  --bg: radial-gradient(900px 430px at 50% -10%, #e9eefb 0%, #f6f8fc 60%);
  --fg: #131a26; --muted: #5c6675;
  --name-accent: #2f5ae0;
  --btn-solid: #3b6dff; --btn-solid-fg: #fff;
  --btn-out-b: #ccd6e8; --btn-out-fg: #26303f;
  --toggle-fg: #5c6675; --toggle-b: #ccd6e8;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* real phones: measure the visible viewport, not the one behind the URL bar */
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: min(12vh, 64px) 24px min(14vh, 72px);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Portrait: CSS applies only the circle mask and the gradient ring. */
.photo-ring {
  padding: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b8cff, #8a5bff);
}

.photo {
  width: min(230px, 56vw);
  height: auto; /* overrides the img height attribute so aspect-ratio applies */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h1 .accent { color: var(--name-accent); }

.line {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  max-width: 34ch;
}

.links {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 30px;
  border: 2px solid transparent; /* same box as the outlined button: equal heights */
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  min-height: 44px;
}

.links .btn-solid { background: var(--btn-solid); color: var(--btn-solid-fg); }
.links .btn-out { border-color: var(--btn-out-b); color: var(--btn-out-fg); }

/* Theme switch, top-right. */
#theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--toggle-b);
  background: transparent;
  color: var(--toggle-fg);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

/* Below 420px the button pair stacks full-width (mobile contract, issue #11). */
@media (max-width: 420px) {
  .links {
    flex-direction: column;
    width: 100%;
  }
  body { gap: 20px; }
}

/* Short screens: the vertical clamp (min(12vh, 64px) / min(14vh, 72px)) alone
   still overflows the smallest phones — at 320x568 the composition plus the
   clamp needs 626px. On short viewports the padding stays below the clamp and
   the rhythm tightens, so the composition fits without scrolling (issue #11). */
@media (max-height: 640px) {
  body { padding: min(8vh, 32px) 24px min(9vh, 36px); }
  main { gap: 16px; }
}