/* timmyversal.com starter site (2026-11-03). Plain CSS, no build step, no outside fonts or scripts
   (the privacy policy promises no third parties on this site). The full creative site replaces the look later. */

:root {
  --bg: #fbf8f3;
  --surface: #ffffff;
  --ink: #1d1a17;
  --muted: #6b635a;
  --line: #e6dfd4;
  --accent: #7b2cbf;   /* links: purple (user, 2026-11-06); 6.7:1 on the page background */
  --accent-ink: #ffffff;
  --todo-bg: #fff3a3;
  --todo-line: #d4a100;
  --spectrum: linear-gradient(90deg, #e4572e, #f3a712, #a8c256, #29a19c, #4361ee, #9d4edd);
  /* The same colors traveling around a frame instead of across it (user, 2026-11-06): films and app pictures. */
  --spectrum-ring: conic-gradient(from 200deg, #e4572e, #f3a712, #a8c256, #29a19c, #4361ee, #9d4edd, #e4572e);
  --ring: 3px;
  --radius: 14px;
  --max: 980px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14120f;
    --surface: #1e1b17;
    --ink: #f3eee7;
    --muted: #a99f93;
    --line: #34302a;
    --accent: #c084fc;   /* 7.1:1 on the dark background */
    --accent-ink: #14120f;
    --todo-bg: #5c4a00;
    --todo-line: #e0b400;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--font);
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header::after { content: ""; display: block; height: 4px; background: var(--spectrum); }  /* a second stripe under the menu (user, 2026-11-06) */
.site-header::before { content: ""; display: block; height: 4px; background: var(--spectrum); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap;
}
.wordmark { display: block; line-height: 0; text-decoration: none; }
.wordmark img { display: block; height: 36px; width: auto; }
.site-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.site-nav a:hover { color: var(--ink); }

/* Home */
.hero { padding: 72px 0 56px; }
.hero h1 {
  font: 800 clamp(34px, 6vw, 58px)/1.08 var(--font-display);
  letter-spacing: -0.02em; margin: 0 0 18px; max-width: 16ch;
}
.hero p { font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); margin: 0; max-width: 40ch; }  /* the top keeps its narrower design look (user, 2026-11-06) */
.hero-still {
  margin-top: 40px; aspect-ratio: 21 / 9; border-radius: var(--radius);
  background: var(--surface); border: 1px dashed var(--line);
  display: grid; place-items: center; text-align: center; padding: 16px; color: var(--muted);
}
.hero-still img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* The studio gate: the lit sign, with the unlit "AI" letters (the A and the palm-hidden L) flickering over it
   like a failing neon letter. Each 8.5 s round (user, 2026-11-06): flicker A (three blinks, 70/105/70 ms), 3 s lit, flicker B (two 60/50 ms flicks around a 260 ms sag), 4 s lit; the first starts about a second after the page opens (never more than three a second);
   steady for visitors who ask for reduced motion. The patch is placed in percent of the image. */
.gate { position: relative; aspect-ratio: auto; height: auto; padding: 0; overflow: hidden; display: block;
  border: var(--ring) solid transparent; border-radius: var(--radius);
  background: linear-gradient(#0b0d1c, #0b0d1c) padding-box, var(--spectrum-ring) border-box; }
.gate .gate-base { display: block; width: 100%; height: auto; aspect-ratio: 2752 / 1536; object-fit: fill; border-radius: 0; }  /* the picture sets the frame's size, so the AI patch (placed in % of this box) lines up exactly */
.gate .gate-ai-off {
  position: absolute; left: 72.965%; top: 9.766%; width: 11.773%; height: auto;
  border-radius: 0; opacity: 0; pointer-events: none;
  animation: ai-flicker 8.51s steps(1, end) -7.51s infinite;
}
@keyframes ai-flicker {
  0.0% { opacity: 1; }
  0.8226% { opacity: 0; }
  3.2902% { opacity: 1; }
  4.5241% { opacity: 0; }
  9.8707% { opacity: 1; }
  10.6933% { opacity: 0; }
  45.9459% { opacity: 1; }
  46.651% { opacity: 0; }
  47.7086% { opacity: 1; }
  50.7638% { opacity: 0; }
  52.4089% { opacity: 1; }
  52.9965% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gate .gate-ai-off { animation: none; } }

section { padding: 48px 0; border-top: 1px solid var(--line); }
section h2 {
  font: 700 13px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 24px;
}

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px;
}
.card h3 { font: 700 21px/1.25 var(--font-display); margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card .go { margin-top: auto; padding-top: 10px; font-weight: 600; }
.card { overflow: hidden; }
#apps .card { border: var(--ring) solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum-ring) border-box; }
.card .cover {
  display: block; width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 1200 / 797;
  margin: -22px -22px 6px; object-fit: cover; background: #0d0c0a;
}
.app-ad { margin-top: 28px; }
.ad-frame {
  border: var(--ring) solid transparent; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(#0d0c0a, #0d0c0a) padding-box, var(--spectrum-ring) border-box;
}
video.ad { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0d0c0a; }

.lead { font-size: 19px; margin: 0 0 12px; }  /* full width (user, 2026-11-06: the early line breaks looked off) */

/* A film with a click-to-play Vimeo player (play.js): nothing loads from Vimeo before the press. */
.film { display: grid; gap: 10px; max-width: 860px; }
.film h3 { font: 700 21px/1.25 var(--font-display); margin: 0; }
.film p { margin: 0; color: var(--muted); font-size: 16px; }
.player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--ring) solid transparent; border-radius: var(--radius);
  background: linear-gradient(#0d0c0a, #0d0c0a) padding-box, var(--spectrum-ring) border-box;
}
.player iframe, .player .play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play {
  display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px;
  background: #0d0c0a; color: #f3eee7; font: inherit; cursor: pointer;
}
.play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play-icon {
  position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.play-icon::after {
  content: ""; position: absolute; left: 29px; top: 22px;
  border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff;
}
.play:hover .play-icon { background: var(--accent); }
.play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.play mark.todo { position: relative; z-index: 1; }
.film .player-note { font-size: 14px; }

/* Text pages (privacy, support) */
.page { padding: 56px 0 72px; }
.page .wrap { max-width: 720px; }
.page h1 { font: 800 clamp(32px, 5vw, 44px)/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0 0 8px; }
.page .meta { color: var(--muted); margin: 0 0 32px; }
.page h2 { font: 700 22px/1.3 var(--font-display); margin: 40px 0 10px; }
.page ul { padding-left: 1.2em; }
.page li { margin: 6px 0; }
.summary {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 16px 20px; margin: 0 0 8px;
}
.faq h3 { font: 700 18px/1.35 var(--font); margin: 26px 0 4px; }
.faq p { margin: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 15px; }
.site-footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a { color: var(--muted); }
.site-footer .made-with small { font-size: 13px; }
.ref-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* Logo panels: our words + a platform's own logo (white, unaltered) over a darkened picture, in the rainbow frame.
   One line on wider screens; three centered lines on phones (NAME / on / logo) (user, 2026-11-06). */
.logo-panel {
  display: flex; align-items: center; justify-content: center; gap: 14px 22px; flex-wrap: wrap;
  min-height: 170px; padding: 32px 24px; margin: 4px 0 20px; text-decoration: none; color: #fff;
  border: var(--ring) solid transparent; border-radius: var(--radius);
  background: linear-gradient(var(--panel-shade), var(--panel-shade)) padding-box,
              var(--panel-image) center / cover padding-box,
              var(--spectrum-ring) border-box;
}
.logo-panel--patreon { --panel-shade: rgba(6, 6, 20, 0.45); --panel-image: url("/img/home/night-sky.webp"); }
.logo-panel--music { --panel-shade: rgba(6, 6, 20, 0.72); --panel-image: url("/img/home/album-wall.webp"); }
.logo-panel-name { font: 800 clamp(26px, 4.2vw, 38px)/1 var(--font-display); letter-spacing: 0.06em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.logo-panel-word { font: 500 clamp(20px, 3vw, 28px)/1 var(--font-display); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.logo-panel-logo { display: block; height: clamp(54px, 9vw, 84px); width: auto; }
.logo-panel-logo path { fill: #fff; }
.logo-panel:hover { filter: brightness(1.12); }
.logo-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (min-width: 641px) { .logo-panel { flex-wrap: nowrap; } }
@media (max-width: 640px) { .logo-panel { flex-direction: column; gap: 10px; } }

/* Still to fill in: every <mark class="todo"> must be gone before the site goes live
   (check: grep -rn 'class="todo"' site/public). */
mark.todo {
  background: var(--todo-bg); color: inherit; border-bottom: 2px dashed var(--todo-line);
  padding: 0 3px; border-radius: 3px;
}