<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Timothy Hankins</title>
  <meta name="description" content="Writer, songwriter, game-maker, pastor. The rooms of a stubbornly un-specialized creative practice.">
  <meta property="og:title" content="Timothy Hankins">
  <meta property="og:description" content="When life collapses around you, keep building.">
  <meta property="og:image" content="/assets/header.jpg">
  <meta property="og:type" content="profile">
  <meta name="theme-color" content="#14110d">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.92em' font-size='86' font-family='Georgia,serif'>T</text></svg>">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

    :root {
      --bg-dark: #14110d;
      --bg-cream: #1f1d1a;
      --surface-dark: #1f1a14;
      --surface-dark-elev: #2a2218;
      --text-dark: #f5ede0;
      --text-dark-muted: #a89c8a;
      --text-cream: #f5ede0;
      --text-cream-muted: #a89c8a;
      --accent-warm: #e8a87c;
      --accent-warm-strong: #d4884a;
      --accent-blue: #7a9bc4;
      --accent-blue-strong: #4a6b94;
      --border-dark: #2a2218;
      --border-cream: #c9b896;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-dark);
      color: var(--text-dark);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }

    /* ─── HERO ─── */
    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
      padding: 4rem 1.5rem;
    }
    .hero-image {
      position: absolute; inset: 0;
      background: url('/assets/header.jpg') center 55% / cover no-repeat;
      z-index: -2;
      filter: saturate(0.78) brightness(0.82) blur(3px);
      transform: scale(1.06); /* hides blur soft-edge against viewport */
    }
    .hero-overlay {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 50% 45%, transparent 18%, rgba(20,17,13,0.45) 70%, rgba(20,17,13,0.78) 100%),
        linear-gradient(180deg, rgba(20,17,13,0.35) 0%, rgba(20,17,13,0.6) 55%, rgba(20,17,13,0.95) 100%);
      z-index: -1;
    }
    .hero-inner {
      max-width: 1100px;
      text-align: center;
      position: relative;
      z-index: 2;
    }
    /* Algorithmic ember layer — drifts above the photo, below the content */
    #hero-embers {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .hero-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent-warm);
      margin-bottom: 2.25rem;
      opacity: 0.95;
    }
    .hero-headline {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(2rem, 5.4vw, 4rem);
      font-weight: 500;
      line-height: 1.14;
      letter-spacing: -0.02em;
      color: var(--text-dark);
      margin: 0 auto 1.75rem;
      max-width: 32ch;
    }
    .hero-headline .setup {
      font-size: 0.76em;
      color: var(--text-dark);
      opacity: 0.92;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--accent-warm);
      font-weight: 500;
      font-size: 1.22em;
      display: inline-block;
      line-height: 1.05;
      margin-top: 0.1em;
    }
    .hero-sub {
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-size: clamp(1rem, 1.5vw, 1.18rem);
      color: var(--text-dark-muted);
      max-width: 46ch;
      margin: 0 auto;
      line-height: 1.55;
    }
    .hero-scroll {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      color: var(--text-dark-muted);
      font-size: 0.7rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      font-weight: 600;
      text-decoration: none;
      opacity: 0.65;
      transition: opacity 0.2s, transform 0.2s;
      z-index: 2;
    }
    .hero-scroll:hover { opacity: 1; transform: translate(-50%, 3px); }

    /* ─── INTRO ─── */
    .intro {
      background:
        radial-gradient(ellipse at 25% 30%, rgba(232,168,124,0.09), transparent 55%),
        radial-gradient(ellipse at 80% 75%, rgba(122,155,196,0.06), transparent 55%),
        linear-gradient(170deg, #181612 0%, #1f1d1a 45%, #1a1c1f 100%);
      color: var(--text-cream);
      padding: 5.5rem 2rem 5rem;
    }
    .intro-inner {
      max-width: 720px;
      margin: 0 auto;
      display: flex;
      gap: 2.5rem;
      align-items: center;
    }
    .intro-photo {
      width: 200px; height: 240px;
      border-radius: 10px;
      object-fit: cover;
      object-position: center 25%;
      flex-shrink: 0;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    }
    .intro-body { flex: 1; }
    .intro-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.95rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text-cream);
      margin-bottom: 1.1rem;
    }
    .intro-body p {
      font-family: 'Lora', Georgia, serif;
      font-size: 1.22rem;
      line-height: 1.6;
      color: var(--text-cream);
      margin-bottom: 0.9rem;
    }
    .intro-body p:last-child { margin-bottom: 0; }

    /* ─── ROOMS (v2 — full-bleed chapters) ─── */
    .rooms {
      background: var(--bg-dark);
      padding: 0;
    }
    .rooms-label {
      max-width: 900px;
      margin: 0 auto;
      padding: 5rem 1.5rem 4rem;
      text-align: center;
    }
    .rooms-label-tag {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent-blue);
      margin-bottom: 0.85rem;
      display: block;
    }
    .rooms-label h2 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.5rem, 2.6vw, 2rem);
      font-weight: 500;
      letter-spacing: -0.015em;
      color: var(--text-dark);
    }

    /* Full-bleed chapter strip */
    .room {
      position: relative;
      min-height: clamp(560px, 78vh, 780px);
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(255,255,255,0.04);
    }

    /* Background gradient per room (image slots later override this) */
    .room::before {
      content: '';
      position: absolute; inset: 0;
      z-index: -2;
    }
    .room::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(20,17,13,0.65) 0%, rgba(20,17,13,0.78) 100%);
      z-index: -1;
    }

    /* Per-room moods */
    .room.r-notes::before {
      background: url('/assets/notes.jpg') no-repeat;
      background-size: 115% auto;
      /* Shift source 24px left of center; after the mirror that becomes a
         24px push to the right in the visible result. */
      background-position: calc(50% - 40px) center;
      transform: scaleX(-1);
    }
    /* Asymmetric overlay: darken the LEFT (content side) and let the image
       breathe on the RIGHT. Plus a soft top/bottom vignette for legibility. */
    .room.r-notes::after {
      background:
        linear-gradient(90deg, rgba(20,17,13,0.88) 0%, rgba(20,17,13,0.68) 28%, rgba(20,17,13,0.22) 55%, rgba(20,17,13,0.08) 100%),
        linear-gradient(180deg, rgba(20,17,13,0.18) 0%, transparent 30%, transparent 70%, rgba(20,17,13,0.28) 100%);
    }
    .room.r-notes .room-number { opacity: 0.13; color: #f5ede0; }
    .room.r-ash::before {
      background: url('/assets/abyss.jpg') center / cover no-repeat;
      filter: blur(55px) brightness(0.62) saturate(1.25);
      transform: scale(1.18);
    }
    .room.r-ash::after {
      background:
        linear-gradient(135deg, rgba(30,16,12,0.45) 0%, rgba(20,10,8,0.72) 100%),
        radial-gradient(ellipse at 70% 50%, transparent 30%, rgba(15,8,6,0.45) 100%);
    }
    .room.r-burned::before {
      background: url('/assets/burned-screen.png') center 30% / cover no-repeat;
      filter: blur(70px) brightness(0.55) saturate(1.45);
      transform: scale(1.2);
    }
    .room.r-burned::after {
      background:
        linear-gradient(135deg, rgba(40,14,8,0.40) 0%, rgba(18,8,6,0.75) 100%),
        radial-gradient(ellipse at 60% 50%, transparent 25%, rgba(12,6,4,0.4) 100%);
    }
    .room.r-novels::before {
      background:
        radial-gradient(ellipse at 30% 60%, rgba(122,140,170,0.28), transparent 65%),
        radial-gradient(ellipse at 80% 30%, rgba(90,105,135,0.22), transparent 55%),
        linear-gradient(135deg, #181a20 0%, #1f2228 60%, #252a35 100%);
    }
    .room.r-bench::before {
      background:
        radial-gradient(ellipse at 25% 30%, rgba(122,155,196,0.42), transparent 55%),
        radial-gradient(ellipse at 75% 75%, rgba(74,107,148,0.30), transparent 60%),
        linear-gradient(135deg, #0f1418 0%, #1a2230 60%, #243042 100%);
    }

    /* Decorative glyph hidden — the CSS and HTML are left in place in case
       we want to revive an ornament approach later. */
    .room-number { display: none; }
    .room-number {
      position: absolute;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(24rem, 60vw, 56rem);
      line-height: 0.78;
      color: var(--text-dark);
      opacity: 0.07;
      letter-spacing: -0.04em;
      user-select: none;
      pointer-events: none;
      z-index: 0;
    }
    .room:not(.flip) .room-number {
      right: -2vw; bottom: -3vh;
    }
    .room.flip .room-number {
      left: -2vw; top: -8vh;
    }
    /* Letter Chain: phone covers the top-left default position, so move
       the number to the BOTTOM-LEFT — beneath the phone, flush at the
       room edge so the digit shape reads cleanly. */
    .room.r-letters .room-number {
      top: auto;
      left: -10vw; bottom: 0;
    }
    /* Ash to Ember: push the number further into the corner so it reads as
       a backdrop accent rather than floating mid-room behind the album. */
    .room.r-ash .room-number {
      left: -5vw; top: -12vh;
    }
    /* Pull the album cover further left — the square album has less vertical
       mass than the BURNED phone opposite, so it needs to be anchored closer
       to the edge to feel balanced across rooms. */
    .room.r-ash.flip .room-object {
      left: clamp(3.5vw, 11vw, 14vw);
    }
    .room.r-bench .room-number,
    .room.r-novels .room-number {
      opacity: 0.09;
    }

    /* Content column */
    .room-wrap {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 5rem 2rem;
      position: relative;
      z-index: 1;
    }
    .room-content {
      max-width: 620px;
    }
    .room.flip .room-content {
      margin-left: auto;
    }

    .room-kind {
      font-family: 'Inter', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent-warm);
      margin-bottom: 1.25rem;
      display: inline-block;
      padding: 0.45rem 0.85rem;
      border: 1px solid currentColor;
      border-radius: 999px;
    }
    .room.r-novels .room-kind,
    .room.r-bench .room-kind,
    .room.r-letters .room-kind { color: var(--accent-blue); }

    .room-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(2.4rem, 5.5vw, 4.6rem);
      font-weight: 500;
      letter-spacing: -0.025em;
      line-height: 1.02;
      color: var(--text-dark);
      margin-bottom: 1.6rem;
    }
    .room.r-novels .room-title { font-style: italic; font-weight: 400; }
    .room.r-notes .room-title {
      font-style: italic;
      font-weight: 400;
      font-size: clamp(2.8rem, 6.4vw, 5.4rem);
    }

    .room-desc {
      font-family: 'Lora', Georgia, serif;
      font-size: clamp(1.05rem, 1.3vw, 1.22rem);
      line-height: 1.65;
      color: var(--text-dark);
      opacity: 0.88;
      margin-bottom: 2.5rem;
      max-width: 46ch;
    }
    .room-desc em { font-style: italic; color: var(--accent-warm); opacity: 1; }
    .room.r-novels .room-desc em,
    .room.r-bench .room-desc em,
    .room.r-letters .room-desc em { color: var(--accent-blue); }

    .room-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.86rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--bg-dark);
      background: var(--accent-warm);
      text-decoration: none;
      padding: 1.05rem 1.85rem;
      border-radius: 999px;
      transition: transform 0.2s, background 0.2s, gap 0.2s;
    }
    .room-cta::after { content: '→'; font-size: 1.1em; transition: transform 0.2s; }
    .room-cta:hover { background: var(--accent-warm-strong); transform: translateY(-2px); gap: 0.95rem; }
    .room-cta:hover::after { transform: translateX(3px); }

    .room.r-novels .room-cta,
    .room.r-bench .room-cta,
    .room.r-letters .room-cta { background: var(--accent-blue); color: var(--bg-dark); }
    .room.r-novels .room-cta:hover,
    .room.r-bench .room-cta:hover,
    .room.r-letters .room-cta:hover { background: var(--accent-blue-strong); color: var(--text-dark); }

    .room-cta.muted {
      background: transparent;
      color: var(--text-dark-muted);
      border: 1px solid var(--text-dark-muted);
      cursor: default;
    }
    .room-cta.muted::after { content: '·'; opacity: 0.6; }
    .room-cta.muted:hover { background: transparent; color: var(--text-dark-muted); transform: none; gap: 0.7rem; }
    .room-cta.muted:hover::after { transform: none; }

    /* ─── Room objects (album / phone) ─── */
    .room-object {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      pointer-events: none;
    }
    /* Objects pulled away from content for breathing room. The chapter number
       stays partly visible at the opposite corner as a backdrop element. */
    .room:not(.flip) .room-object { right: clamp(7vw, 19vw, 22vw); }
    .room.flip .room-object { left: clamp(7vw, 19vw, 22vw); }

    .room-object.album {
      width: clamp(300px, 32vw, 540px);
      aspect-ratio: 1 / 1;
      border-radius: 6px;
      overflow: hidden;
      box-shadow:
        0 40px 80px rgba(0,0,0,0.65),
        0 14px 28px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.08);
      transform: translateY(-50%) rotate(-3deg);
      transition: transform 0.4s ease;
    }
    .room.flip .room-object.album {
      transform: translateY(-50%) rotate(3deg);
    }
    .room-object.album img {
      width: 100%; height: 100%;
      display: block;
      object-fit: cover;
    }

    .room-object.phone {
      width: clamp(210px, 20vw, 280px);
      aspect-ratio: 9 / 19;
      background: #0a0a0a;
      border-radius: 34px;
      padding: 10px;
      box-shadow:
        0 40px 80px rgba(0,0,0,0.65),
        0 14px 28px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(255,255,255,0.1);
      transform: translateY(-50%) rotate(-3deg);
      transition: transform 0.4s ease;
    }
    .room.flip .room-object.phone {
      transform: translateY(-50%) rotate(3deg);
    }
    .room-object.phone::before {
      /* notch */
      content: '';
      position: absolute;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      width: 60px; height: 16px;
      background: #0a0a0a;
      border-radius: 0 0 12px 12px;
      z-index: 2;
    }
    .room-object.phone img {
      width: 100%; height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 24px;
    }

    /* Book cover (mock) — portrait card with typographic cover */
    .room-object.book {
      width: clamp(220px, 22vw, 300px);
      aspect-ratio: 2 / 3;
      border-radius: 4px;
      overflow: hidden;
      box-shadow:
        0 40px 80px rgba(0,0,0,0.7),
        0 14px 28px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.06);
      transform: translateY(-50%) rotate(-3deg);
      transition: transform 0.4s ease;
      background:
        radial-gradient(ellipse at 50% 85%, rgba(170,55,32,0.32), transparent 70%),
        linear-gradient(180deg, #1a1108 0%, #2a1410 50%, #160806 100%);
      display: flex;
      flex-direction: column;
      padding: 1.5rem 1.1rem;
    }
    .room.flip .room-object.book {
      transform: translateY(-50%) rotate(3deg);
    }
    .book-tag {
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(216, 200, 184, 0.55);
      text-align: center;
    }
    .book-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1rem, 1.5vw, 1.4rem);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-align: center;
      line-height: 1.1;
      color: #f0e3cf;
      text-transform: uppercase;
      margin: auto 0;
    }
    .book-author {
      font-family: 'Inter', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(216, 200, 184, 0.7);
      text-align: center;
      font-weight: 500;
    }
    .book-badge {
      position: absolute;
      top: 0.6rem;
      right: 0.6rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.54rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: #c9a896;
      border: 1px solid rgba(201, 168, 150, 0.6);
      padding: 0.25rem 0.5rem;
      border-radius: 2px;
      background: rgba(0,0,0,0.3);
    }

    /* When a room has an object, narrow the content column so it doesn't overlap */
    .room.has-object .room-content { max-width: 500px; }

    /* Letter Chain — use the game's actual neon as the room mood */
    .room.r-letters::before {
      background: url('/assets/letterchain-screen.png') center 30% / cover no-repeat;
      filter: blur(70px) brightness(0.45) saturate(1.5);
      transform: scale(1.2);
    }
    .room.r-letters::after {
      background:
        linear-gradient(135deg, rgba(10,28,28,0.45) 0%, rgba(8,18,18,0.78) 100%),
        radial-gradient(ellipse at 30% 50%, transparent 25%, rgba(6,14,14,0.45) 100%);
    }

    /* ─── Responsive rooms ─── */
    @media (max-width: 760px) {
      .room { min-height: clamp(520px, 86vh, 700px); }
      .room-wrap { padding: 4rem 1.5rem; }
      .room-content, .room.flip .room-content { margin: 0; max-width: 100%; }
      .room-title { font-size: clamp(2rem, 9vw, 2.8rem); }
      .room-desc { font-size: 1.02rem; }
      .room-number { font-size: clamp(11rem, 60vw, 18rem); opacity: 0.06; }
      .room:not(.flip) .room-number { right: -8vw; bottom: -4vh; }
      .room.flip .room-number { left: -8vw; top: -4vh; }
      .room-cta { padding: 0.95rem 1.5rem; font-size: 0.8rem; }
      /* On mobile, switch the room to a column stack so object + content
         stack vertically instead of fighting for horizontal space. */
      .room {
        flex-direction: column;
        justify-content: center;
        padding-top: 3.5rem;
        padding-bottom: 1rem;
      }
      .room-object,
      .room.flip .room-object,
      .room.r-ash.flip .room-object {
        position: static;
        transform: none;
        margin: 0 auto 2.25rem;
        left: auto; right: auto; top: auto; bottom: auto;
        display: block;
        max-width: 80vw;
      }
      .room-object.album,
      .room.flip .room-object.album {
        width: clamp(220px, 62vw, 320px);
        transform: rotate(-2.5deg);
      }
      .room-object.phone,
      .room.flip .room-object.phone {
        width: clamp(160px, 44vw, 220px);
        transform: rotate(-2.5deg);
      }
      .room-object.book,
      .room.flip .room-object.book {
        width: clamp(190px, 52vw, 260px);
        transform: rotate(-2.5deg);
      }
      .room.has-object .room-content { max-width: 100%; }
      /* Notes room: revert to cover sizing and simpler top/bottom overlay
         (the asymmetric horizontal-fade overlay is for the side-by-side
         desktop layout; doesn't apply when stacked). */
      .room.r-notes::before {
        background-size: cover;
        background-position: center;
        transform: scaleX(-1);
      }
      .room.r-notes::after {
        background: linear-gradient(180deg, rgba(20,17,13,0.45) 0%, rgba(20,17,13,0.28) 35%, rgba(20,17,13,0.68) 100%);
      }
    }

    /* ─── CLOSING ─── */
    .closing {
      background:
        radial-gradient(ellipse at 75% 25%, rgba(122,155,196,0.08), transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(232,168,124,0.06), transparent 55%),
        linear-gradient(170deg, #1a1c1f 0%, #1f1d1a 45%, #181612 100%);
      color: var(--text-cream);
      padding: 5.5rem 2rem 3rem;
    }
    .closing-inner {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .closing-line {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic;
      font-size: 1.35rem;
      color: var(--text-cream);
      max-width: 36ch;
      margin: 0 auto 2.75rem;
      line-height: 1.45;
    }
    .closing-line::before {
      content: '';
      display: block;
      width: 50px; height: 1px;
      background: var(--accent-blue-strong);
      margin: 0 auto 1.75rem;
    }

    .social-row {
      display: flex;
      gap: 0.55rem;
      justify-content: center;
      margin-bottom: 2.5rem;
      flex-wrap: wrap;
    }
    .social-icon {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-cream-muted);
      transition: all 0.2s;
      text-decoration: none;
    }
    .social-icon:hover {
      background: var(--accent-blue-strong);
      border-color: var(--accent-blue-strong);
      color: var(--bg-cream);
      transform: translateY(-2px);
    }
    .social-icon svg { width: 18px; height: 18px; fill: currentColor; }

    .portfolio-link {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.9rem 1.7rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--bg-cream);
      background: var(--text-cream);
      text-decoration: none;
      border-radius: 999px;
      transition: background 0.2s, transform 0.2s;
    }
    .portfolio-link:hover { background: var(--accent-blue-strong); transform: translateY(-1px); }

    footer.colophon {
      background: var(--bg-dark);
      color: var(--text-dark-muted);
      text-align: center;
      padding: 1.75rem 1rem;
      font-size: 0.75rem;
      letter-spacing: 0.06em;
    }
    footer.colophon span { opacity: 0.7; }
    footer.colophon a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dotted currentColor;
    }
    footer.colophon a:hover { color: var(--accent-warm); border-bottom-color: var(--accent-warm); }

    /* ─── Responsive ─── */
    @media (max-width: 760px) {
      .intro { padding: 4rem 1.25rem; }
      .intro-inner { gap: 1.75rem; align-items: center; }
      .intro-photo { width: 100px; height: 120px; flex-shrink: 0; }
      .intro-name { font-size: 1.5rem; margin-bottom: 0.75rem; }
      .intro-body p { font-size: 1rem; line-height: 1.55; }
.closing { padding: 4rem 1.5rem 2.5rem; }
      .hero-headline { max-width: 14ch; }
    }
  </style>
</head>
<body>

  <!-- ─────── HERO ─────── -->
  <section class="hero">
    <div class="hero-image"></div>
    <div class="hero-overlay"></div>
    <canvas id="hero-embers" aria-hidden="true"></canvas>
    <div class="hero-inner">
      <div class="hero-eyebrow">Timothy Hankins</div>
      <h1 class="hero-headline"><span class="setup">When life collapses around you,</span><br><em>keep building.</em></h1>
      <p class="hero-sub">Writing, music, games, code, and the pulpit.<br>One stubbornly un-specialized person.</p>
    </div>
    <a class="hero-scroll" href="#intro">Open the rooms ↓</a>
  </section>

  <!-- ─────── INTRO ─────── -->
  <section class="intro" id="intro">
    <div class="intro-inner">
      <img class="intro-photo" src="/assets/photo.jpg" alt="Timothy Hankins">
      <div class="intro-body">
        <h2 class="intro-name">Timothy Hankins</h2>
        <p>I'm a grieving father.<br>A metalhead.<br>A pastor.<br>A skeptic.<br>A believer.<br>Complicated and contradictory.</p>
        <p>Welcome to my workshop.</p>
      </div>
    </div>
  </section>

  <!-- ─────── ROOMS (v2) ─────── -->
  <section class="rooms" id="workshop">

    <!-- 01 — Notes From The Aftermath -->
    <article class="room r-notes">
      <span class="room-number" aria-hidden="true">❦</span>
      <div class="room-wrap">
        <div class="room-content">
          <div class="room-kind">Essays</div>
          <h3 class="room-title">Notes from the&nbsp;Aftermath</h3>
          <p class="room-desc">Long-form theological writing looking for meaning in the rubble and ashes.</p>
          <a class="room-cta" href="https://notesfromtheaftermath.com" target="_blank" rel="noopener">Read on Substack</a>
        </div>
      </div>
    </article>

    <!-- 02 — Ash to Ember -->
    <article class="room r-ash flip has-object">
      <span class="room-number" aria-hidden="true">❦</span>
      <div class="room-object album"><img src="/assets/abyss.jpg" alt="Abyss — Ash to Ember album cover" loading="lazy"></div>
      <div class="room-wrap">
        <div class="room-content">
          <div class="room-kind">Music</div>
          <h3 class="room-title">Ash to Ember</h3>
          <p class="room-desc"><em>Abyss</em>, releasing June 2, 2026, explores disorientation and crisis in the wake of unimaginable loss.</p>
          <a class="room-cta" href="https://ash2ember.com" target="_blank" rel="noopener">Visit ash2ember.com</a>
        </div>
      </div>
    </article>

    <!-- 03 — BURNED -->
    <article class="room r-burned has-object">
      <span class="room-number" aria-hidden="true">❦</span>
      <div class="room-object phone"><img src="/assets/burned-screen.png" alt="BURNED game home screen" loading="lazy"></div>
      <div class="room-wrap">
        <div class="room-content">
          <div class="room-kind">Spy Game</div>
          <h3 class="room-title">BURNED</h3>
          <p class="room-desc">A spy deduction card game in the <em>le Carré</em> tradition. Solo against the Network, pass-and-play with a friend, or online by room code. Free, no accounts, no ads.</p>
          <a class="room-cta" href="https://burned.alasgames.com" target="_blank" rel="noopener">Play BURNED</a>
        </div>
      </div>
    </article>

    <!-- 04 — Letter Chain -->
    <article class="room r-letters flip has-object">
      <span class="room-number" aria-hidden="true">❦</span>
      <div class="room-object phone"><img src="/assets/letterchain-screen.png" alt="Letter Chain word ladder game" loading="lazy"></div>
      <div class="room-wrap">
        <div class="room-content">
          <div class="room-kind">Word Game</div>
          <h3 class="room-title">Letter Chain</h3>
          <p class="room-desc">A word-ladder game — <em>change, add, or remove one letter at a time</em>. Beat the timer, chain combos, see how far you can go. Free in the browser, no accounts.</p>
          <a class="room-cta" href="https://letterchain.alasgames.com" target="_blank" rel="noopener">Play Letter Chain</a>
        </div>
      </div>
    </article>

    <!-- 05 — Novels in progress -->
    <article class="room r-novels has-object">
      <span class="room-number" aria-hidden="true">❦</span>
      <div class="room-object book">
        <span class="book-tag">A novel in progress</span>
        <span class="book-title">Red Sky</span>
        <span class="book-author">Timothy Hankins</span>
      </div>
      <div class="room-wrap">
        <div class="room-content">
          <div class="room-kind">Fiction</div>
          <h3 class="room-title">Red Sky</h3>
          <p class="room-desc">Clay is a tracker. A loner. A man looking for what he can never find. What do <em>you</em> do when your world collapses? In progress and available soon.</p>
          <p class="room-desc">A first chapter, while you wait.</p>
          <a class="room-cta" href="/clay">Read the first chapter</a>
        </div>
      </div>
    </article>

  </section>

  <!-- ─────── CLOSING ─────── -->
  <section class="closing">
    <div class="closing-inner">
      <div class="social-row">
        <a class="social-icon" href="https://bsky.app/profile/hnkns.com" target="_blank" rel="noopener" aria-label="Bluesky">
          <svg viewBox="0 0 568 501" xmlns="http://www.w3.org/2000/svg"><path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32 353.946 576.2 301.3 432.801 287.026 383.775c-2.702-9.282-3.976-13.641-3.026-9.979-.95-3.663-.324.697-3.026 9.979-14.274 49.026-66.92 192.425-186.307 69.545C31.556 388.56 60.778 323.8 175.653 304.25 109.933 315.435 36.053 296.955 15.778 224.502 9.945 203.66 0 75.293 0 57.947 0-28.906 76.134-1.611 123.121 33.664z"/></svg>
        </a>
        <a class="social-icon" href="https://www.youtube.com/@hnkns" target="_blank" rel="noopener" aria-label="YouTube">
          <svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
        </a>
        <a class="social-icon" href="https://www.tiktok.com/@hnkns" target="_blank" rel="noopener" aria-label="TikTok">
          <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M448 209.9a210.1 210.1 0 01-122.8-39.3v178.8A162.6 162.6 0 11185 188.3v89.9a74.6 74.6 0 1052.2 71.2V0h88a121 121 0 00122.8 121z"/></svg>
        </a>
        <a class="social-icon" href="https://www.instagram.com/hnkns" target="_blank" rel="noopener" aria-label="Instagram">
          <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9S160.5 370.9 224.1 370.9 339 319.6 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
        </a>
        <a class="social-icon" href="https://glass.photo/hnkns" target="_blank" rel="noopener" aria-label="Glass">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="fill:none;stroke:currentColor"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        </a>
        <a class="social-icon" href="https://www.facebook.com/tshankins" target="_blank" rel="noopener" aria-label="Facebook">
          <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256c0 120 82.7 220.8 194.2 248.5V334.2h-56.6v-78.2h56.6v-61.3c0-56.4 33-87.9 84.6-87.9 24.5 0 50.5 4.4 50.5 4.4v55.7h-28.4c-28 0-36.7 17.4-36.7 35.2v42h62.2l-10 78.2h-52.2v170.3C429.3 476.8 512 376 512 256z"/></svg>
        </a>
      </div>

      <a class="portfolio-link" href="/portfolio">Resume &amp; Portfolio</a>
    </div>
  </section>

  <footer class="colophon">
    <span>Built in Knoxville · © Timothy Hankins · Hero photo by <a href="https://unsplash.com/@viktortalashuk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener">Viktor Talashuk</a> on <a href="https://unsplash.com/photos/white-smoke-coming-out-from-brown-wood-Zcqw1XnVnDo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener">Unsplash</a></span>
  </footer>

  <script>
  /* Hero ember layer — slow upward drift of warm sparks over the smoke photo.
     Vanilla canvas, ~28 particles, paused when hero is off-screen, disabled
     for prefers-reduced-motion. Radial-gradient fill gives the soft glow. */
  (function() {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var canvas = document.getElementById('hero-embers');
    if (!canvas || !canvas.getContext) return;
    var ctx = canvas.getContext('2d');
    var hero = canvas.parentElement;
    var W = 0, H = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
    var particles = [];
    var running = true, started = false, raf = null;

    function resize() {
      var rect = hero.getBoundingClientRect();
      W = rect.width; H = rect.height;
      canvas.width = W * dpr; canvas.height = H * dpr;
      canvas.style.width = W + 'px'; canvas.style.height = H + 'px';
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    function spawn(initial) {
      return {
        x: Math.random() * W,
        y: initial ? Math.random() * H : H + Math.random() * 30,
        vx: (Math.random() - 0.5) * 0.25,
        vy: -(0.18 + Math.random() * 0.55),
        r: 0.9 + Math.random() * 2.4,
        life: 0,
        maxLife: 380 + Math.random() * 600,
        hue: 26 + Math.random() * 18,
        sway: Math.random() * Math.PI * 2,
        swaySpeed: 0.005 + Math.random() * 0.01,
      };
    }

    function init() {
      resize();
      var n = Math.max(18, Math.min(34, Math.floor(W / 55)));
      particles = [];
      for (var i = 0; i < n; i++) particles.push(spawn(true));
    }

    function tick() {
      raf = null;
      if (!running) return;
      ctx.clearRect(0, 0, W, H);
      for (var i = 0; i < particles.length; i++) {
        var p = particles[i];
        p.sway += p.swaySpeed;
        p.x += p.vx + Math.sin(p.sway) * 0.12;
        p.y += p.vy;
        p.life++;
        var fadeIn = Math.min(1, p.life / 90);
        var fadeOut = Math.min(1, (p.maxLife - p.life) / 140);
        var a = Math.max(0, Math.min(fadeIn, fadeOut)) * 0.78;
        // Soft glowing dot via radial gradient (cheaper than shadowBlur)
        var g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 4.5);
        g.addColorStop(0, 'hsla(' + p.hue + ', 85%, 70%, ' + a + ')');
        g.addColorStop(0.45, 'hsla(' + p.hue + ', 80%, 55%, ' + (a * 0.35) + ')');
        g.addColorStop(1, 'hsla(' + p.hue + ', 80%, 45%, 0)');
        ctx.fillStyle = g;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r * 4.5, 0, Math.PI * 2);
        ctx.fill();
        if (p.life >= p.maxLife || p.y < -10 || p.x < -20 || p.x > W + 20) {
          particles[i] = spawn(false);
        }
      }
      raf = requestAnimationFrame(tick);
    }

    function start() { if (!raf) { running = true; tick(); } }
    function stop() { running = false; if (raf) { cancelAnimationFrame(raf); raf = null; } }

    // Pause when hero is off-screen
    if ('IntersectionObserver' in window) {
      var obs = new IntersectionObserver(function(entries) {
        entries.forEach(function(e) { e.isIntersecting ? start() : stop(); });
      }, { threshold: 0.01 });
      obs.observe(hero);
    }

    var resizeTimer;
    window.addEventListener('resize', function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() { init(); }, 150);
    });

    init();
    start();
  })();
  </script>

</body>
</html>