/* Davis Brown: 8-bit, in the colors of the night-time bedroom he picked as inspiration. Deep indigo and royal blue,
   pale periwinkle for text, lit-window yellow for anything you can click, and the horizon's pink and the sky's blue
   to tell the pages apart (Narrative yellow, Social media pink, Commercials sky). Hard outlines and shadows with no blur,
   retro buttons that press down when clicked, and two pixel fonts: VT323, a calm terminal face, for headings,
   labels, and buttons, and Press Start 2P only for the big "Editor", the logo, and section numbers. Body text stays
   in the system font so it's easy to read. */
@font-face { font-family: "VT323"; src: url("fonts/vt323.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --bg: #10164a;        /* the room */
  --night: #0b1038;     /* the sky at its darkest */
  --panel: #1d2670;
  --panel-2: #26318a;
  --edge: #3a48b0;      /* a lighter rim, like light catching a frame */
  --line: #070b2b;      /* outlines and shadows */
  --text: #eef1ff;
  --muted: #aab6ee;
  --pale: #c9d4ff;
  --accent: #ffd36e;    /* the neighbor's lit window */
  --pink: #e59ac8;      /* the horizon */
  --sky: #9fc4ff;
  --pixel: "VT323", "Courier New", monospace;
  --arcade: "Press Start 2P", "Courier New", monospace;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --shadow: 5px 5px 0 var(--line);
  --c: var(--accent);   /* this page's color, set per page below */
  color-scheme: dark;
}
.page-social { --c: var(--pink); }
.page-commercials { --c: var(--sky); }
/* The pixel font's "fi" and "fl" ligatures draw wrong ("film" came out as "Alm"), so ligatures are off everywhere. */
*, *::before, *::after { box-sizing: border-box; font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0 !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font);
  background-image: radial-gradient(rgba(159, 184, 255, .08) 1px, transparent 1.2px); background-size: 12px 12px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2 { margin: 0; font-family: var(--pixel); font-weight: 400; line-height: .9; letter-spacing: 0; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
/* Pixel cursors: an arrow everywhere, and a pointing hand on anything clickable (art/davis-brown/make_cursors.py) */
html { cursor: url("img/cursor.svg") 0 0, auto; }
a, button, summary, [data-video], [data-copy], .btn { cursor: url("img/cursor-hand.svg") 15 1, pointer; }
:focus-visible { outline: 3px dashed var(--accent); outline-offset: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; background: var(--accent); color: var(--line); border: 3px solid var(--line); font-weight: 700; }
.skip:focus { top: 12px; }
.i { width: 1em; height: 1em; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Small pixel labels */
.eyebrow, .card__meta, .views, .tag, .skills li, .contact__label, .about__card figcaption {
  font-family: var(--pixel); font-size: 20px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
}
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--muted); }
.eyebrow::before { content: ""; width: 12px; height: 12px; background: var(--c); box-shadow: 3px 3px 0 var(--line); }

/* Retro buttons: outlined, a hard shadow, and they press in when clicked */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 20px;
  border: 3px solid var(--line); background: var(--accent); color: var(--line); box-shadow: var(--shadow);
  font: 24px/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: transform .08s steps(2), box-shadow .08s steps(2); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--line); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--line); }
.btn--light { background: var(--panel-2); color: var(--text); box-shadow: var(--shadow), inset 3px 3px 0 var(--edge); }
.btn--light:hover { box-shadow: 3px 3px 0 var(--line), inset 3px 3px 0 var(--edge); }
.btn--small { min-height: 42px; padding: 8px 14px; font-size: 21px; box-shadow: 4px 4px 0 var(--line); }
.btn--small.btn--light { box-shadow: 4px 4px 0 var(--line), inset 2px 2px 0 var(--edge); }
.btn--small:hover { box-shadow: 2px 2px 0 var(--line); }
.btn--big { min-height: 60px; padding: 14px 24px; font-size: 27px; }

/* The menu */
.nav { position: sticky; top: 0; z-index: 20; background: var(--night); border-bottom: 3px solid var(--edge); }
.nav__inner { display: flex; align-items: center; gap: 22px; height: 76px; }
.mark { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; }
.mark__box { display: grid; place-items: center; width: 40px; height: 40px; background: var(--accent); color: var(--line); font: 12px var(--arcade); box-shadow: 3px 3px 0 var(--pink); }
.mark__name { font: 30px/1 var(--pixel); }
.nav nav { display: flex; gap: 6px; margin-left: auto; }
.nav nav a { padding: 6px 12px; font: 28px/1 var(--pixel); color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav nav a:hover { color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge); }
.nav nav a[aria-current] { color: var(--line); background: var(--pale); box-shadow: inset 0 0 0 2px var(--line); }
.nav .btn[aria-current] { background: var(--pink); }

/* Home: just the hero. His name slides in from the right, "Editor" from the left, and an 8-bit Davis edits beside
   it; a button for each page, and the ticker along the bottom of the screen. */
.page-home main { display: flex; flex-direction: column; min-height: calc(100svh - 79px); }
.hero { flex: 1; display: flex; align-items: center; padding-block: clamp(40px, 6vw, 80px); overflow: hidden; }
.hero > .wrap { width: min(1180px, 100% - 40px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
.hero h1 span { display: block; }
.hero__name { font-size: clamp(64px, 8vw, 116px); white-space: nowrap; animation: from-right .9s cubic-bezier(.16, .84, .3, 1) both; }
.hero__role { margin-top: 18px; font: clamp(40px, 5.6vw, 80px)/1 var(--arcade); text-transform: uppercase; color: var(--accent); text-shadow: 5px 5px 0 var(--pink); -webkit-text-stroke: 2px var(--line); animation: from-left .9s .15s cubic-bezier(.16, .84, .3, 1) both; }
@keyframes from-right { from { transform: translateX(45vw); opacity: 0; } }
@keyframes from-left { from { transform: translateX(-45vw); opacity: 0; } }
.hero__lead { max-width: 42ch; margin: 30px 0 0; color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); animation: rise .7s .55s ease-out both; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.hero__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 520px; margin-top: 34px; animation: rise .7s .7s ease-out both; }
.hero__menu .btn { justify-content: flex-start; font-size: 22px; white-space: nowrap; }
.btn--social { background: var(--pink); }
.btn--commercials { background: var(--sky); }
.hero__scene { border: 3px solid var(--pale); box-shadow: 10px 10px 0 var(--line); background: var(--bg); animation: rise .8s .4s ease-out both; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

/* The 8-bit room. Every move is in whole pixels (steps), like an old game. */
.px { display: block; width: 100%; height: auto; }
.px-shot { opacity: 0; animation: px-shot 6s steps(1, end) infinite; }
.px-shot-1 { opacity: 1; }
.px-shot-2 { animation-delay: 1.5s; }
.px-shot-3 { animation-delay: 3s; }
.px-shot-4 { animation-delay: 4.5s; }
@keyframes px-shot { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.px-playhead { animation: px-playhead 6s steps(12, end) infinite; }
@keyframes px-playhead { to { transform: translateX(12px); } }
.px-hand { animation: px-type 1.4s steps(1, end) infinite; }
@keyframes px-type { 0%, 30%, 60%, 100% { transform: none; } 15%, 45%, 75% { transform: translateY(-1px); } 85% { transform: translate(-1px, -1px); } }
.px-eye { transform-box: fill-box; transform-origin: center; animation: px-blink 4.5s steps(1, end) infinite; }
@keyframes px-blink { 0%, 93%, 100% { transform: none; } 94%, 97% { transform: scaleY(.5); } }
.px-steam { animation: px-steam 1.8s steps(3, end) infinite; }
@keyframes px-steam { from { transform: translateY(1px); opacity: 1; } to { transform: translateY(-2px); opacity: .2; } }
.px-star { animation: px-twinkle 3.2s steps(1, end) infinite; }
.px-star-1 { animation-delay: .8s; }
.px-star-2 { animation-delay: 1.6s; }
.px-star-3 { animation-delay: 2.4s; }
@keyframes px-twinkle { 0%, 70%, 100% { opacity: 1; } 75%, 90% { opacity: .15; } }
.px-shooting { opacity: 0; animation: px-shooting 9s steps(6, end) infinite 2s; }
@keyframes px-shooting { 0%, 92% { opacity: 0; transform: none; } 93% { opacity: 1; transform: none; } 99% { opacity: 1; transform: translate(10px, 5px); } 100% { opacity: 0; transform: translate(12px, 6px); } }
.px-lit { animation: px-lit 14s steps(1, end) infinite; }
@keyframes px-lit { 0%, 61%, 66%, 100% { opacity: 1; } 62%, 65% { opacity: 0; } }
.px-beams { animation: px-beams 7s ease-in-out infinite alternate; }
@keyframes px-beams { from { opacity: .7; } to { opacity: 1.2; } }

/* The headliner: his skills and his channel's numbers, running nonstop like a stock ticker */
.ticker { overflow: hidden; background: var(--night); border-block: 3px solid var(--edge); padding-block: 14px; }
.ticker__track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.tk { display: flex; align-items: baseline; gap: 10px; font: 30px/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--pale); }
.tk::after { content: ""; align-self: center; width: 8px; height: 8px; margin-inline: 26px; background: var(--edge); }
.tk b { font-weight: 400; color: var(--muted); }
.tk i { font-style: normal; color: var(--accent); }
.tk:nth-of-type(3n + 1) i { color: var(--pink); }
.tk:nth-of-type(3n + 2) i { color: var(--sky); }
.tk--skill { color: var(--line); background: var(--accent); padding: 4px 10px 2px; box-shadow: 3px 3px 0 var(--pink); }
.tk--skill { margin-right: 34px; }
.tk--skill::after { display: none; }
.tk--note { font-size: 22px; color: var(--muted); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* The reel at the top of each work page. A work-in-progress screen until his collage is up. */
.reel { padding-top: 34px; }
.reel__screen { position: relative; display: grid; place-content: center; justify-items: center; gap: 14px; aspect-ratio: 16 / 9; padding: 24px; overflow: hidden; text-align: center;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, #1d2670, var(--night) 75%);
  border: 3px solid var(--pale); box-shadow: 10px 10px 0 var(--c); }
.reel__screen--live { display: block; padding: 0; background: #000; }
.reel__screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.reel__label { display: flex; align-items: center; gap: 10px; margin: 0; font: 22px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.reel__rec { width: 12px; height: 12px; background: #ff4d6d; animation: rec 1.2s steps(1, end) infinite; }
@keyframes rec { 50% { opacity: 0; } }
.reel h2 { font-size: clamp(48px, 8vw, 104px); color: var(--c); text-shadow: 4px 4px 0 var(--line); }
.reel__note { max-width: 40ch; margin: 0; color: var(--pale); }
.reel__timeline { position: relative; display: flex; gap: 4px; width: min(420px, 80%); height: 20px; margin-top: 10px; padding: 4px; background: var(--line); }
.reel__timeline span { flex: 1; background: var(--edge); }
.reel__timeline span:nth-child(2) { background: var(--pink); flex: 1.6; }
.reel__timeline span:nth-child(3) { background: var(--accent); flex: .8; }
.reel__timeline span:nth-child(5) { background: var(--sky); flex: 1.3; }
.reel__timeline i { position: absolute; top: -6px; bottom: -6px; left: 4px; width: 3px; background: #ff4d6d; animation: reel-playhead 5s steps(40, end) infinite; }
@keyframes reel-playhead { to { left: calc(100% - 7px); } }

.section { padding-block: clamp(56px, 8vw, 96px) 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 30px; padding-bottom: 16px; border-bottom: 3px dashed var(--edge); }
.section__head h2 { font-size: clamp(56px, 8vw, 92px); }
.section__head > p { margin: 0 0 6px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 26px; }
.grid--wide, .grid[data-layout="wide"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--tall, .grid[data-layout="tall"]{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 18px; }
.card { display: block; text-decoration: none; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--panel); border: 3px solid var(--pale); box-shadow: var(--shadow); transition: transform .1s steps(2), box-shadow .1s steps(2), border-color .1s; }
.grid--tall .thumb, .grid[data-layout="tall"] .thumb{ aspect-ratio: 2 / 3; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .thumb, .card:focus-visible .thumb { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--c); border-color: var(--c); }
.play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; background: var(--c); color: var(--line); border: 3px solid var(--line); font-size: 18px; transition: transform .1s steps(2); }
.card:hover .play { transform: scale(1.15); }
.tag, .views { position: absolute; left: 10px; top: 10px; padding: 2px 8px; border: 2px solid var(--line); color: var(--line); }
.tag { background: var(--accent); }
.views { top: auto; bottom: 10px; background: var(--pale); font-size: 18px; }
.grid--tall .play, .grid[data-layout="tall"] .play{ width: 32px; height: 32px; font-size: 14px; bottom: auto; top: 10px; }
.card__title { display: block; margin-top: 14px; font: 27px/1 var(--pixel); }
.grid--wide .card__title, .grid[data-layout="wide"] .card__title{ font-size: 36px; }
.grid--tall .card__title, .grid[data-layout="tall"] .card__title{ font-size: 22px; }
.card__meta { display: block; margin-top: 6px; color: var(--muted); font-size: 19px; }
.more { margin: 36px 0 0; }

/* Inner pages: a big pixel title */
.page-head { padding-block: clamp(48px, 7vw, 88px) 0; }
.page-head h1 { font-size: clamp(76px, 13vw, 168px); text-shadow: 5px 5px 0 var(--line); }
.soon { padding: clamp(28px, 5vw, 48px); background: var(--panel); border: 3px dashed var(--edge); text-align: center; }
.soon h2 { font-size: clamp(44px, 6vw, 72px); color: var(--c); }
.soon p { margin: 12px auto 26px; max-width: 46ch; color: var(--muted); font-size: 18px; }

/* About: like a character card */
.about { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; padding-block: 40px clamp(64px, 9vw, 112px); }
.about__card { margin: 0; padding: 12px; background: var(--panel); border: 3px solid var(--pale); box-shadow: 8px 8px 0 var(--line); }
.about__card img { width: 100%; aspect-ratio: 225 / 459; object-fit: cover; border: 3px solid var(--line); }
.about__card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 12px; }
.about__card figcaption span:last-child { color: var(--accent); }
.about__lead { margin: 0 0 18px; font: clamp(30px, 3.2vw, 40px)/1.1 var(--pixel); }
.about__text > p:not(.about__lead) { max-width: 58ch; margin: 0 0 16px; color: var(--muted); font-size: 18px; }
.about__skills-title { margin: 30px 0 14px; font-size: 40px; }
.skills { display: flex; flex-wrap: wrap; gap: 12px; }
.skills li { padding: 10px 12px; background: var(--panel-2); border: 3px solid var(--line); box-shadow: 3px 3px 0 var(--line), inset 2px 2px 0 var(--edge); }
.skills li:first-child { background: var(--accent); color: var(--line); box-shadow: 3px 3px 0 var(--line); }

/* Contact */
.contact { padding-block: 0 clamp(72px, 10vw, 128px); }
.contact h2 { font-size: clamp(56px, 9vw, 108px); text-shadow: 4px 4px 0 var(--line); }
.contact__lead { max-width: 46ch; margin: 22px 0 36px; color: var(--muted); font-size: 19px; }
.contact__box { max-width: 760px; padding: clamp(24px, 4vw, 40px); background: var(--panel); border: 3px solid var(--pale); box-shadow: 10px 10px 0 var(--line); }
.contact__label { margin: 0; color: var(--muted); }
.contact__email { display: block; margin-top: 6px; font: clamp(36px, 5.4vw, 58px)/1 var(--pixel); color: var(--accent); overflow-wrap: anywhere; text-decoration: none; }
.contact__email:hover { color: var(--pink); }
.contact .hero__actions { margin-top: 26px; }
.contact__links { margin: 36px 0 0; }

.footer { border-top: 3px solid var(--edge); background: var(--night); }
.page-narrative .footer, .page-social .footer, .page-commercials .footer { margin-top: clamp(64px, 9vw, 112px); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 24px 32px; color: var(--muted); font: 21px/1.2 var(--pixel); letter-spacing: .04em; text-transform: uppercase; }
.footer p { margin: 0; }
.copy { font-family: var(--font); font-size: .8em; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* The video player */
.player { width: min(1100px, 100vw - 32px); padding: 0; border: 3px solid var(--pale); background: #000; overflow: visible; box-shadow: 10px 10px 0 var(--accent); }
.player::backdrop { background: rgba(7, 11, 43, .86); }
.player__frame { aspect-ratio: 16 / 9; }
.player--short { width: min(420px, 100vw - 32px, (100vh - 120px) * 9 / 16); }
.player--short .player__frame { aspect-ratio: 9 / 16; }
.player iframe { display: block; width: 100%; height: 100%; border: 0; }
.player__close { position: absolute; right: -3px; top: -58px; width: 44px; height: 44px; border: 3px solid var(--line); background: var(--accent); color: var(--line); font: 20px/1 var(--arcade); cursor: url("img/cursor-hand.svg") 15 1, pointer; box-shadow: 3px 3px 0 var(--line); }

/* Tablets and phones */
@media (min-width: 641px) and (max-width: 900px) {
  .nav nav a { padding: 6px 8px; font-size: 24px; }
  .mark__name { display: none; }
}
@media (max-width: 980px) {
  .grid--tall, .grid[data-layout="tall"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__scene { max-width: 640px; }
}
@media (max-width: 760px) {
  .grid, .grid--wide, .grid[data-layout="wide"]{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .grid--tall, .grid[data-layout="tall"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__card { max-width: 260px; }
}
@media (max-width: 640px) {
  .nav__inner { flex-wrap: wrap; gap: 8px 10px; height: auto; padding-block: 10px; }
  .mark__name { display: none; }
  .nav nav { order: 3; flex-basis: 100%; justify-content: space-between; margin: 0; gap: 0; }
  .nav nav a { padding: 4px 6px; font-size: 22px; }
  .nav__cta { margin-left: auto; }
  .nav__more { display: none; }
  .reel__screen { aspect-ratio: auto; padding: 36px 16px 30px; }
  .reel h2 { font-size: 44px; }
  .page-home main { min-height: 0; }
  .hero__menu { grid-template-columns: minmax(0, 1fr); }
  .tk { font-size: 24px; }
  .btn--small { padding: 9px 10px; }
  .hero__role { -webkit-text-stroke: 1.5px var(--line); text-shadow: 4px 4px 0 var(--pink); }
  .hero__actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track, .hero__name, .hero__role, .hero__lead, .hero__menu, .hero__scene, .px *, .reel__rec, .reel__timeline i { animation: none !important; }
  .ticker { overflow-x: auto; }
  .px-shot { opacity: 0; } .px-shot-1 { opacity: 1; } .px-shooting { opacity: 0; }
  .btn, .thumb, .play { transition: none; }
}

/* Sections that fill from his YouTube channel stay hidden until they have videos */
[hidden] { display: none !important; }

/* A reel picked in the portal: one big player */
.grid[data-layout="player"] { grid-template-columns: minmax(0, 1fr); }
.reel__item { list-style: none; }

/* The portal's own player controls (when he turns them on for a reel), in the site's pixel style */
.reel { --tlt-player-accent: var(--accent); --tlt-player-bg: rgba(8, 11, 38, .88); --tlt-player-text: var(--pale); --tlt-player-radius: 0; --tlt-player-font: 22px/1 var(--pixel); }
.reel .tlt-yt-bar { border: 2px solid var(--edge); }