/* daniel.snor.cz – the front page. Orange like sean.cz, a name with a face,
   and one stage below that shows the apps one at a time. */

:root {
  --orange: #ff6600;
  --on-orange: #000000;
  --stage-bg: #ffffff;
  --stage-text: #1d1d1f;
  --stage-muted: #6e6e73;
  --stage-link: #d4570a;
  /* One step between the intro, the card, the icons and the links. */
  --step: 32px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --stage-bg: #1d1d1f;
    --stage-text: #f2f2f2;
    --stage-muted: #a1a1a6;
    --stage-link: #ff9a4d;
  }
}

html.home, .home body { background: var(--orange); color: var(--on-orange); }
.home a { color: inherit; }

.home .wrap { max-width: 860px; }

/* Top line: name on the left, language switch on the right. */
.home header.top { padding: 28px 0 0; }
.home header.top .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home header.top nav a { font-size: 15px; font-weight: 600; opacity: 0.75; }
.home header.top nav a:hover { opacity: 1; text-decoration: none; }

/* The name and the face. */
.me { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 0 var(--step); }
.me h1 { margin: 0; font-size: clamp(40px, 7vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.me p { margin: 10px 0 0; font-size: clamp(17px, 2.2vw, 21px); font-weight: 500; max-width: 30em; opacity: 0.9; }
.me img { width: clamp(96px, 16vw, 160px); height: auto; aspect-ratio: 1; border-radius: 50%; flex: none; background: #fff; }

/* The stage: one app at a time. */
.stage { background: var(--stage-bg); color: var(--stage-text); border-radius: 22px; padding: 28px; min-height: 240px; box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.stage a { color: var(--stage-link); }
.stage .show { display: flex; gap: 28px; align-items: flex-start; }
.stage .show[hidden] { display: none; }
.stage .icon { width: 128px; height: 128px; border-radius: 28px; flex: none; object-fit: contain; }
.stage .icon.round { border-radius: 50%; }
.stage .kind { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stage-muted); margin: 4px 0 4px; }
.stage h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; }
.stage h2 .wordmark .m { color: #fff; }
.stage p { margin: 0 0 12px; font-size: 18px; }
.stage .links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 16px; font-weight: 600; }
.stage .soon { color: var(--stage-muted); font-weight: 500; }

/* The row of small icons under the stage: the switch between the apps. */
/* One row always: each icon is at most --icon wide and they shrink together
   on a narrow screen rather than wrap to a second row. */
.picker { --icon: 56px; list-style: none; margin: var(--step) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--icon)); gap: 16px; }
.picker button { all: unset; cursor: pointer; display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; opacity: 0.8; transition: opacity 0.15s; }
.picker button img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--stage-bg); }
.picker button:hover, .picker button:focus-visible { opacity: 1; }
.picker button[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--on-orange); }
.picker button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Where else to find me. */
.elsewhere { padding: var(--step) 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px; font-weight: 600; }
.elsewhere a { opacity: 0.85; }
.elsewhere a:hover { opacity: 1; }
.elsewhere .copy { margin-left: auto; font-weight: 400; opacity: 0.7; }

/* Without the script every app is shown; the picker is not needed. */
.no-js .stage .show[hidden] { display: flex; }
.no-js .stage .show + .show { margin-top: 28px; padding-top: 28px; border-top: 0.5px solid rgba(128,128,128,0.35); }
.no-js .picker { display: none; }

@media (max-width: 600px) {
  .me { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  .stage { padding: 22px 18px; border-radius: 18px; }
  .stage .show { flex-direction: column; gap: 16px; }
  .stage .icon { width: 96px; height: 96px; border-radius: 22px; }
  .stage h2 { font-size: 26px; }
  .picker { --icon: 48px; gap: 12px; }
  .picker button { border-radius: 12px; }
  .elsewhere .copy { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .picker button { transition: none; }
}

/* The whole block stands in the middle of the window, top to bottom. */
.home body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.home main.wrap { margin-top: auto; margin-bottom: auto; width: 100%; padding-top: var(--step); padding-bottom: var(--step); }

/* Every app takes the same cell, so the card is as tall as the tallest one
   and the centred block does not move when the stage changes. */
.home .stage { display: grid; }
.home .stage .show { grid-area: 1 / 1; }
.home .stage .show[hidden] { display: flex; visibility: hidden; }
.no-js .stage { display: block; }
.no-js .stage .show[hidden] { visibility: visible; }