/* ============================================================
   tothdavid.eu
   Type:   Fraunces (display) / IBM Plex Mono (meta + links)
   Ground: warm obsidian. One accent: ember vermilion.
   ============================================================ */

:root {
  --ink-900: #0a0806;

  --paper:   #f4ebe0;
  --paper-2: #c2b4a5;
  --paper-3: #97887a;

  --accent:     #ff5a1f;
  --accent-lit: #ff8a53;

  --r: 2px;
  --gutter: clamp(1.35rem, 4vw, 3.25rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

html { background: var(--ink-900); }

body {
  min-height: 100dvh;
  color: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 32%, #1c1410 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 110%, #241109 0%, transparent 60%),
    var(--ink-900);
}

::selection { background: var(--accent); color: #fff; }

/* ---------- deck ---------- */

/* canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   300x150, so the size has to be stated outright */
#deck {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* horizontal drags belong to the deck, not the page */
  cursor: grab;
}

#deck:active { cursor: grabbing; }

.no-webgl #deck { display: none; }

/* ---------- chrome ---------- */

.chrome {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  padding: var(--gutter);
  pointer-events: none;
}

.masthead { grid-row: 1; grid-column: 1 / -1; }

.name {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--paper);
}

.label {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.picker {
  grid-row: 3;
  grid-column: 1;
  justify-self: start;
  align-self: end;
}

.colophon {
  grid-row: 3;
  grid-column: 2;
  justify-self: end;
  align-self: end;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--paper-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- the real links ----------
   Visible and fully styled without JS. Once the deck takes over they
   step out of the way, but stay in the accessibility tree and come
   back the moment someone tabs into them. */

.roster {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r);
  transition: color 0.24s var(--ease);
}

.link::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 11px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.24s var(--ease);
}

.link:hover { color: var(--accent-lit); }
.link:hover::after { opacity: 1; }
.link:active { color: var(--accent); }
.link.is-active { color: var(--accent-lit); }

.link:focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 4px;
}

.deck-on .roster {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* a keyboard user tabbing in gets the list back */
.deck-on .roster:focus-within {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 1rem;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* ---------- dots ---------- */

.dots {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.dot {
  pointer-events: auto;
  width: 34px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 2px;
  background: var(--paper-3);
  opacity: 0.45;
  transition: opacity 0.24s var(--ease), background-color 0.24s var(--ease);
}

.dot:hover::before { opacity: 0.8; }
.dot.is-active::before { background: var(--accent); opacity: 1; }

.dot:focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 2px;
}

.hint {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--paper-3);
}

/* ---------- mobile ---------- */

@media (max-width: 760px) {
  body { font-size: 14px; }

  .chrome {
    padding: 1.35rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom));
  }

  .name { font-size: 1.5rem; }

  .picker { grid-column: 1 / -1; justify-self: start; }

  .colophon {
    grid-row: 4;
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.75rem;
  }

  .chrome { grid-template-rows: auto 1fr auto auto; }

  .roster { gap: 0 1.15rem; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .link, .link::after, .dot::before { transition: none; }
}