/* =============================================================================
   ANDRIY MALYSHCHAK — personal site styles
   css/styles.css

   Layers (in order):
     1. Reset
     2. Tokens          — CSS custom properties for every design decision
     3. Typography      — base type scale and body defaults
     4. Layout          — page container
     5. Components      — shared, reusable pieces
     6. Sections        — Hero · Writing · Thinking · Photos · Footer
     7. Animations      — keyframes and entrance transitions
     8. Responsive      — mobile-first breakpoint overrides
============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. RESET
───────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Prevent iOS font inflation in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

hr {
  border: none;
}

button,
input,
select,
textarea {
  font: inherit;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. TOKENS
   Every color, size, duration, and radius is a variable here.
   Changing a token propagates everywhere — never hardcode values below this.
───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Colors ─────────────────────────────── */
  --color-bg:               #F5F2EE;   /* warm off-white page background      */
  --color-surface:          #EDE9E3;   /* card / placeholder background        */
  --color-surface-active:   #E4DDD5;   /* surface on press                     */
  --color-text:             #1C1917;   /* primary text                         */
  --color-text-muted:       #78716C;   /* secondary text, metadata             */
  --color-text-very-muted:  #A8A29E;   /* labels, timestamps, captions         */
  --color-divider:          rgba(0, 0, 0, 0.07);
  --color-border:           rgba(28, 25, 23, 0.12); /* generic border / pull quote */
  --color-border-secondary: rgba(28, 25, 23, 0.14); /* music player default border  */
  --color-border-primary:   rgba(28, 25, 23, 0.30); /* music player hover border    */
  --color-border-focus:     rgba(28, 25, 23, 0.28); /* input focused state          */
  --color-accent-border:    rgba(28, 25, 23, 0.14); /* writing section left bar */
  --color-focus-ring:       rgba(28, 25, 23, 0.35);
  --color-link-active:      #0C0A09;

  /* ── Typography ──────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               system-ui, sans-serif;

  /* Scale — use clamp() for the heading, px for everything else */
  --font-size-2xs: 11px;
  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-md:  15px;
  --font-size-base: 16px;
  --font-size-lg:  17px;
  --font-size-xl:  clamp(28px, 6vw, 38px);

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  --line-height-tight: 1.2;
  --line-height-snug:  1.4;
  --line-height-base:  1.55;
  --line-height-loose: 1.7;

  --letter-spacing-tight:   -0.5px;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.02em;
  --letter-spacing-wider:    0.06em;
  --letter-spacing-label:    0.1em;

  /* ── Spacing — 8px grid ──────────────────── */
  --space-0-5:  4px;
  --space-1:    8px;
  --space-1-5: 12px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-7:   56px;
  --space-8:   64px;
  --space-9:   72px;
  --space-10:  80px;

  /* ── Layout ──────────────────────────────── */
  --max-width:    520px;
  --padding-x:    19px;   /* horizontal page padding on mobile */

  /* ── Radii ───────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Transitions ─────────────────────────── */
  --ease-default:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast:   150ms var(--ease-default);
  --transition-base:   200ms var(--ease-default);
  --transition-slow:   300ms var(--ease-default);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
───────────────────────────────────────────────────────────────────────────── */
html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Constrain body text line length for readability (~65 chars) */
p {
  max-width: 52ch;
}

/* Global focus ring — accessible and design-coherent */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. LAYOUT
───────────────────────────────────────────────────────────────────────────── */
.page {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 14px var(--padding-x) 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. COMPONENTS
───────────────────────────────────────────────────────────────────────────── */

/* ── .section — content section wrapper ── */
.section {
  padding: var(--space-3) 0 var(--space-5) 0;
}

.section.rotation {
  padding-bottom: var(--space-3);
}

/* ── .section__label — "my thoughts", "what i'm thinking about", etc. ── */
.section__label {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: #999;
  margin-bottom: 1.25rem;
}

/* ── .divider — 0.5px section separator ── */
.divider {
  width: 100%;
  height: 1px;
  /* Low opacity achieves the subtle 0.5px visual feel reliably across screens */
  background-color: var(--color-divider);
}

/* ── .arrow — animated → glyph inside links ── */
.arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
  margin-left: 2px;
  /* Prevent arrow from wrapping away from title text */
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. SECTIONS
───────────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  padding-top: 20px;
  padding-bottom: var(--space-5);
}

/* Name */
.hero__name {
  font-size: clamp(31px, 8.5vw, 44px);
  font-weight: 200;
  line-height: var(--line-height-tight);
  letter-spacing: -1px;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

/* Tagline */
.hero__tagline {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  margin-bottom: 29px;
  max-width: 38ch;
}

/* ── Headshot ── */
.headshot {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
  /* Placeholder styles — overridden when content is an <img> */
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Direct <img> inside the div */
.headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* When the headshot itself is an <img> (after swap) */
img.headshot {
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: transparent;
}

.headshot__initials {
  font-size: 28px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-very-muted);
  letter-spacing: var(--letter-spacing-wide);
  user-select: none;
}

/* ── · separator — muted dot with breathing room ── */
.sep {
  display: inline-block;
  margin: 0 8px;
  opacity: 0.4;
}


/* ── Location ── */
.hero__location {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  margin-top: 14px;
  margin-bottom: 0;
  max-width: none;
}

/* ── Roles grid — dots align because both rows share the same column widths ── */
.hero__roles {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.hero__role-title {
  font-style: italic;
}

.hero__role-link {
  font-weight: var(--font-weight-medium);
  color: #57534E;
  text-decoration: underline;
  text-decoration-color: rgba(120, 113, 108, 0.4);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: text-decoration-color var(--transition-fast);
}

.hero__role-link:hover {
  text-decoration-color: var(--color-text-muted);
}

/* ── Social links — bottom of page ── */
.social-links {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: var(--space-0-5) 0 0;
}

.social-links__item {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-decoration-color: rgba(28, 25, 23, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition-fast);
}

.social-links__item:hover {
  text-decoration-color: var(--color-text);
}

.social-links__item:active {
  opacity: 0.65;
  transition-duration: 50ms;
}


/* ════════════════════════════════════════
   WRITING
════════════════════════════════════════ */
.writing {
}

.writing__post {
  /* Semantic wrapper — layout handled by .writing and child selectors */
}

.writing__title {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  min-height: 44px;
  margin-bottom: var(--space-1-5);
  transition: color var(--transition-fast);
}

.writing__title:hover {
  color: var(--color-link-active);
}

.writing__title:active {
  opacity: 0.65;
  transition-duration: 50ms;
}

.writing__blurb {
  font-size: 14px;
  line-height: var(--line-height-loose);
  color: var(--color-text-muted);
  max-width: 50ch;
}


/* ════════════════════════════════════════
   THINKING
════════════════════════════════════════ */
.thinking__list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* blurb → next title; min-height on title adds ~10px visual, total ~20px */
}

.thinking__item {
  display: flex;
  flex-direction: column;
  gap: 4px; /* title → its own blurb — stays tight */
}

.thinking__title {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  min-height: 44px;
  line-height: var(--line-height-snug);
  transition: color var(--transition-fast);
}

.thinking__title:hover {
  color: var(--color-link-active);
}

.thinking__title:active {
  opacity: 0.65;
  transition-duration: 50ms;
}

.thinking__source {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-very-muted);
  font-style: italic;
  line-height: var(--line-height-base);
  padding-left: 2px;
}


/* ════════════════════════════════════════
   ALBUM GRID — "on rotation"
════════════════════════════════════════ */
.album-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin: 16px 0 0;
  align-items: start; /* top row pure covers; bottom row covers + name below */
}

.album-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  touch-action: manipulation;
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Cover — fills cell */
.album-cell__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark overlay — fast fade-in, slow cinematic fade-out */
.album-cell__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 800ms ease-out; /* slow fade-out */
  pointer-events: none;
}

.album-cell--active .album-cell__overlay {
  opacity: 1;
  transition: opacity 200ms ease; /* fast fade-in */
}

/* Bottom-left play circle */
.album-cell__hint {
  position: absolute;
  bottom: 10px;
  left: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 150ms ease;
  pointer-events: none;
}

/* Desktop hover only — touch stays at 0.4 */
@media (hover: hover) {
  .album-cell:hover .album-cell__hint {
    opacity: 1;
  }
}

.album-cell--active .album-cell__hint {
  opacity: 1;
}

/* Play triangle SVG — visible at rest, hidden when active */
.album-cell__play-icon {
  color: #1a1a1a;
  display: block;
  margin-left: 1px; /* optical center */
  flex-shrink: 0;
}

.album-cell--active .album-cell__play-icon {
  display: none;
}

/* Equalizer bars — hidden at rest, animate when active */
.album-cell__eq {
  display: none;
  align-items: center;
  gap: 2px;
}

.album-cell--active .album-cell__eq {
  display: flex;
}

.album-cell__bar {
  flex-shrink: 0;
  width: 2px;
  height: 5px;
  border-radius: 1px;
  background: #1a1a1a;
}

.album-cell--active .album-cell__bar:nth-child(1) {
  animation: eq-bounce 0.6s ease-in-out infinite alternate;
}
.album-cell--active .album-cell__bar:nth-child(2) {
  animation: eq-bounce 0.4s ease-in-out 0.15s infinite alternate;
}
.album-cell--active .album-cell__bar:nth-child(3) {
  animation: eq-bounce 0.8s ease-in-out 0.05s infinite alternate;
}

/* Card wrapper — name above, cover below */
.album-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Artist name — hidden by default, direction determined by row */
.album-card__name {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 400ms ease-in, transform 400ms ease-in;
  pointer-events: none;
  white-space: nowrap;
}

/* Top row: hidden below cover edge, slides UP out on play, drops back DOWN */
.album-card__name--top    { transform: translateY(6px); }

/* Bottom row: hidden above cover edge, slides DOWN out on play, rises back UP */
.album-card__name--bottom { transform: translateY(-6px); }

/* Reveal — both rows animate to resting position */
.album-card__name.artist-name-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1037ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,
              transform 1037ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}


/* ════════════════════════════════════════
   COOKING — "what i've cooked this week"
════════════════════════════════════════ */
.cooking__list {
  /* list-style already reset globally */
}

.cooking__item {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.cooking__item:last-child {
  margin-bottom: 0;
}

.cooking__name {
  font-weight: 400;
  color: var(--color-text);
}

.cooking__name--link {
  text-decoration: underline;
  text-decoration-color: rgba(28, 25, 23, 0.35);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition-fast);
}

.cooking__name--link:hover {
  text-decoration-color: var(--color-text);
}

.cooking__sep {
  color: var(--color-text-very-muted);
  margin: 0 4px;
}

.cooking__ingredients {
  font-style: italic;
  font-size: 14px;
  color: var(--color-text-very-muted);
}


/* ════════════════════════════════════════
   PHOTOS — horizontal scroll strip
════════════════════════════════════════ */
.photos {
  padding-bottom: var(--space-1);
}

.photo-strip {
  overflow: hidden;
  /* Break out of the page container to go edge-to-edge */
  margin-left: calc(-1 * var(--padding-x));
  margin-right: calc(-1 * var(--padding-x));
  padding-bottom: var(--space-1);
  cursor: grab;
  touch-action: pan-y; /* horizontal is JS-driven; vertical stays native */
  -webkit-user-select: none;
  user-select: none;
}

.photo-strip:active {
  cursor: grabbing;
}

/* Inner flex row — the JS translateX target.
   Holds originals + clones; gap must be identical between all items. */
.photo-strip__inner {
  display: flex;
  gap: var(--space-1-5);
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.photo-strip__item {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: clamp(160px, 52vw, 220px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  object-fit: cover;
}

.photo-strip__item--placeholder {
  background-color: var(--color-surface);
}

/* ── Bubble expand effect — pure scale, no layout margin on album cells ──
   Spring curve on expand, smooth ease-out on release.
   headshot-link keeps margin-bottom because it sits alone in the hero.
   Album cells use scale only so both top and bottom rows expand equally —
   adding margin-bottom to either row skews the perceived expansion size. */
.headshot-link.is-hovered {
  transform: scale(1.046);
  margin-bottom: 16px;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              margin-bottom 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.album-cell.is-hovered,
.album-cell.album-cell--active {
  transform: scale(1.057);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
  .headshot-link:hover {
    transform: scale(1.046);
    margin-bottom: 16px;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                margin-bottom 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .album-cell:hover {
    transform: scale(1.057);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .headshot-link,
  .album-cell {
    transition: none !important;
    transform: none !important;
  }

  .headshot-link {
    margin-bottom: 0 !important;
  }
}


/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer {
  padding-top: 0;
  padding-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__email {
  position: relative;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.footer__email::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.footer__email:hover {
  color: var(--color-text);
}

.footer__email:hover::after {
  transform: scaleX(1);
}

.footer__email:active {
  opacity: 0.65;
  transition-duration: 50ms;
}

.footer__copy {
  font-size: var(--font-size-xs);
  color: var(--color-text-very-muted);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. ANIMATIONS
   Pure CSS staggered page-load reveal — no JS required.
   animation-fill-mode: both keeps each element at opacity 0 until its
   delay fires, then holds it at opacity 1 after the animation ends.
───────────────────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Gentle left-right nudge on writing + thinking arrows */
@keyframes arrowPulse {
  0%   { transform: translateX(0);   opacity: 0.9; }
  50%  { transform: translateX(4px); opacity: 0.3; }
  100% { transform: translateX(0);   opacity: 0.9; }
}

/* Scoped only to writing and thinking section arrows */
.writing__title .arrow,
.thinking__title .arrow {
  opacity: 0.9;
  animation: arrowPulse 2s ease-in-out infinite;
}

/* Hover/touch-active: pause pulse, snap to nudged position */
.writing__title .arrow.arrow--active,
.thinking__title .arrow.arrow--active {
  animation: none;
  transform: translateX(4px);
  opacity: 1;
  transition: transform 150ms ease, opacity 150ms ease;
}

/* Returning: transition back to rest before pulse resumes */
.writing__title .arrow.arrow--returning,
.thinking__title .arrow.arrow--returning {
  animation: none;
  transform: translateX(0);
  opacity: 0.9;
  transition: transform 150ms ease, opacity 150ms ease;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

#cursor {
  font-weight: 200;
  color: var(--color-text-primary);
  margin-left: 1px;
  animation: blink 530ms ease infinite;
}

.headshot-link,
.hero__location,
.hero__roles,
.section.writing,
.section.thinking,
.section.rotation,
.section.cooking,
.section.photos,
.social-links,
.footer {
  animation: fadeUp 2000ms cubic-bezier(0.45, 0, 0.55, 1) both;
}
.headshot-link     { animation-delay:  90ms; }
.hero__location    { animation-delay: 135ms; }
.hero__roles       { animation-delay: 135ms; }
.section.writing   { animation-delay: 180ms; }
.section.thinking  { animation-delay: 225ms; }
.section.rotation  { animation-delay: 270ms; }
.section.cooking   { animation-delay: 315ms; }
.section.photos    { animation-delay: 360ms; }
.social-links      { animation-delay: 405ms; }
.footer            { animation-delay: 450ms; }

/* Reduced-motion: disable all entrance animations */
@media (prefers-reduced-motion: reduce) {
  .writing__title .arrow,
  .thinking__title .arrow {
    animation: none;
    opacity: 0.35;
    transform: none;
  }

  .writing__title .arrow.arrow--active,
  .thinking__title .arrow.arrow--active {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .writing__title .arrow.arrow--returning,
  .thinking__title .arrow.arrow--returning {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__tagline, .headshot-link,
  .hero__location, .hero__roles,
  .section.writing, .section.thinking,
  .section.rotation, .section.cooking, .section.photos,
  .social-links, .footer {
    animation: none;
  }

  .arrow,
  .footer__email::after {
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   IMAGE BLOCK — ambient image with location label
───────────────────────────────────────────────────────────────────────────── */
.image-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-1-5) 0;
  margin: var(--space-2) 0 var(--space-1-5) 0;
}

.image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  transform: scale(1);
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.ambient-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.image-location {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-very-muted);
  text-align: left;
  padding-left: 2px;
  letter-spacing: 0.02em;
  opacity: 1;
  transition: opacity 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Hover state ── */
@media (hover: hover) {
  .image-block:hover .image-wrap {
    transform: scale(1.057);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .image-block:hover .image-location {
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ── Touch hover state ── */
.image-block.is-hovered .image-wrap {
  transform: scale(1.057);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-block.is-hovered .image-location {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}



/* ─────────────────────────────────────────────────────────────────────────────
   8. RESPONSIVE
   Mobile-first — base styles above target 390px.
   These breakpoints add space and adjust proportions on larger screens.
───────────────────────────────────────────────────────────────────────────── */

/* ── Tablet / small desktop (640px+) ── */
@media (max-width: 639px) {
  .page {
    padding-top: 10px;
  }

  .hero {
    padding-top: 16px;
  }
}

@media (min-width: 640px) {
  .page {
    padding-top: var(--space-5);
    padding-bottom: 0;
  }

}

/* ── Large screen — center content, remove side padding ── */
@media (min-width: 600px) {
  .page {
    /* Side padding becomes implicit via max-width centering */
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   ARTICLE PAGE  (article.html)
   Extends the base stylesheet — no new tokens defined here.
───────────────────────────────────────────────────────────────────────────── */

/* Wider reading column than the homepage */
.article-page {
  max-width: 580px;
}

/* ── Entrance animation — whole page fades in as one unit ── */
.js .article-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.js .article-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .article-content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Scroll unfurl animation ── */
.js .article-content {
  --scroll-unfurl: 0;
}

.js .article-page section {
  transform: scaleY(calc(0.95 + 0.05 * var(--scroll-unfurl)));
  opacity: calc(0.8 + 0.2 * var(--scroll-unfurl));
  transition: transform 50ms linear, opacity 50ms linear;
}

/* ── Back link ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(var(--font-size-sm) * 1.1);
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 44px;
  margin-bottom: 2.5rem;
  transition: color var(--transition-fast);
}

.back-link .arrow {
  display: inline-flex;
  opacity: 0.9;
  animation: arrowPulse 2s ease-in-out infinite;
}

.back-link:hover .arrow {
  animation: none;
  transform: translateX(4px);
  opacity: 1;
  transition: transform 150ms ease, opacity 150ms ease;
}

.back-link:hover {
  color: var(--color-text);
}

.back-link:active {
  opacity: 0.65;
  transition-duration: 50ms;
}

/* ── Article header ── */
.article-header {
  margin-bottom: 2.5rem;
}

.article-header__title {
  font-size: clamp(26px, 5vw, 36px);
  font-weight: var(--font-weight-light);
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  max-width: none;
}

.article-header__byline {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: none;
}

/* ── Article body ── */
.article-body p {
  font-size: var(--font-size-base);
  line-height: 1.85;
  color: var(--color-text);
  max-width: 65ch;
  margin-bottom: var(--space-3);
}

.article-body h2 {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin-top: 2.5rem;
  margin-bottom: var(--space-2);
  max-width: none;
}

/* ── Article lede — slightly larger opening paragraph ── */
.article-lede {
  font-size: 17px;
  font-weight: var(--font-weight-light);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 2.5rem;
  max-width: 65ch;
}

/* ── Goals list — numbered rows ── */
.goals-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.goals-list__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}

.goals-list__num {
  font-size: 11px;
  color: var(--color-text-very-muted);
  font-weight: var(--font-weight-regular);
  width: 16px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.goals-list__text {
  font-size: 15px;
  color: var(--color-text);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

/* ── Pull quote ── */
.pull-quote {
  font-style: italic;
  font-size: 19px;
  font-weight: var(--font-weight-light);
  line-height: 1.55;
  color: var(--color-text);
  border-left: 2px solid var(--color-border-secondary);
  padding-left: 20px;
  margin: 2rem 0;
  max-width: 52ch;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PEOPLEBET — people i'd bet a million on  (inner.html)
───────────────────────────────────────────────────────────────────────────── */
.peoplebet {
  margin-top: var(--space-9);
}

.peoplebet__heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

.peoplebet__subheading {
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: none;
}

.peoplebet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* ── Card ── */
.peoplebet__card {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
}

.peoplebet__card-inner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 350ms ease;
}

.peoplebet__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.peoplebet__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: var(--space-2);
  z-index: 2;
}

.peoplebet__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: white;
  margin-bottom: 2px;
}

.peoplebet__role {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--font-weight-regular);
}

/* ── Drawer (slides up over photo) ── */
.peoplebet__drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4));
  padding: var(--space-3) var(--space-2);
  transform: translateY(100%);
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  gap: var(--space-3);
  z-index: 3;
}

.peoplebet__link {
  font-size: var(--font-size-sm);
  color: white;
  text-decoration: underline;
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity;
}

.peoplebet__link:nth-child(1) { transition-delay: 50ms; }
.peoplebet__link:nth-child(2) { transition-delay: 100ms; }
.peoplebet__link:nth-child(3) { transition-delay: 150ms; }

/* ── Hover state ── */
.peoplebet__card:hover .peoplebet__card-inner {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.peoplebet__card:hover .peoplebet__drawer {
  transform: translateY(0);
}

.peoplebet__card:hover .peoplebet__link {
  opacity: 1;
}

/* ── Active (locked) state ── */
.peoplebet__card.is-active .peoplebet__card-inner {
  transform: translateY(-16px) scale(1.06);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.peoplebet__card.is-active .peoplebet__drawer {
  transform: translateY(0);
}

.peoplebet__card.is-active .peoplebet__link {
  opacity: 1;
}

/* Prevent drawer closing when clicking links */
.peoplebet__link {
  pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PEOPLE LIST — inner.html easter egg section
───────────────────────────────────────────────────────────────────────────── */
.people {
  max-width: var(--max-width);
  margin: -1.13rem auto 0 auto;
  padding: 0;
}

.people__heading {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
  margin: -2.25rem 0 0.25rem 0;
}

.people__subheading {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-muted);
  margin: 0 0 1.5rem 0;
}

.people__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Entrance animation keyframes ── */
@keyframes peopleReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.people__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  grid-template-areas:
    "photo name  links"
    "photo role  role";
  column-gap: 20px;
  row-gap: 5px;
  padding: 12px 0;
  border-top: 0.5px solid var(--color-border);
  opacity: 0;
  transform: translateY(12px);
  transition: transform 0.15s;
}


.people__item:hover {
  transform: translateY(-2px);
}

@media (hover: none) {
  .people__item:active {
    transform: translateY(-2px);
  }
}

.people__list.is-animating .people__item {
  animation: peopleReveal 729ms ease-out forwards;
  animation-delay: calc(var(--item-index, 0) * 178ms);
}

@media (prefers-reduced-motion: reduce) {
  .people__item {
    opacity: 1;
    transform: none;
  }
}

.people__photo {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  grid-area: photo;
  align-self: center;
  transform: scale(1);
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

@media (hover: hover) {
  .people__photo:hover {
    transform: scale(1.057);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

.people__photo:active {
  transform: scale(1.057);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.people__info {
  display: contents;
}

.people__name {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
  grid-area: name;
  align-self: end;
}

.people__role {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  grid-area: role;
}

.people__links {
  display: flex;
  gap: 14px;
  white-space: nowrap;
  grid-area: links;
  align-self: end;
}

.people__link {
  font-size: 12px;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
  transition: text-decoration-color 150ms ease;
}

.people__link:hover {
  text-decoration-color: var(--color-text);
}

/* ── Mobile responsive (≤480px) ── */
@media (max-width: 480px) {
  .people__links {
    gap: 10px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   EASTER EGG — headshot silent link  (index.html)
───────────────────────────────────────────────────────────────────────────── */
.headshot-link {
  display: block;
  cursor: default;  /* no pointer — link should feel invisible */
  touch-action: manipulation;
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1),
              margin-bottom 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.headshot-link:focus,
.headshot-link:focus-visible {
  outline: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECRET PAGE  (secret.html)
───────────────────────────────────────────────────────────────────────────── */

/* Locked to viewport — no scroll, content perfectly centered */
.secret-body {
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-x);
}

/* Back link floats top-left without affecting the centered layout */
.secret-body .back-link {
  position: absolute;
  top: var(--padding-x);
  left: var(--padding-x);
  z-index: 10; /* stays above .secret-content stacking context */
}

/* Fade-in wrapper — centered in the viewport */
.secret-content {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.js .secret-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.js .secret-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Question prompt */
.secret-prompt {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  text-align: center;
  margin-bottom: 16px;
  max-width: none;
}

/* Input group — acts as the single visible field */
.secret-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--color-border);
  background: var(--color-bg);
  padding: 14px 20px;
  transition: border-color var(--transition-base);
}

.secret-input-group:focus-within {
  border-color: var(--color-border-focus);
}

.secret-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.05em;
  color: var(--color-text);
  text-align: center;
  padding: 0;
  /* Suppress browser default input styling */
  -webkit-appearance: none;
  appearance: none;
}

.secret-input--month,
.secret-input--day {
  width: 44px;
}

.secret-input--year {
  width: 72px;
}

.secret-input::placeholder {
  color: var(--color-text-very-muted);
}

/* Slash separator between date segments */
.secret-sep {
  font-size: 20px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-very-muted);
  user-select: none;
  padding: 0 4px;
  line-height: 1;
}

/* Error message — hidden by default, fades in on wrong answer */
.secret-error {
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 16px;
  opacity: 0;
  transition: opacity 300ms ease;
  max-width: none;
}

.secret-error--visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .secret-content {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .secret-error {
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   INNER PAGE  (inner.html)
   .inner-content fade-in pattern is the standard for all new pages:
     opacity 0 + translateY(10px) → is-visible → opacity 1 + translateY(0)
───────────────────────────────────────────────────────────────────────────── */
.js .inner-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.js .inner-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .inner-content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.inner-message {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  color: var(--color-text-muted);
  padding-bottom: 50vh; /* enough vertical room to feel scrollable */
  max-width: none;
}
.inner-list {
  display: flex;
  flex-direction: column;
}

.inner-entry {
  padding: var(--space-3) 0;
}

.inner-entry__name {
  font-size: 17px;
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  max-width: none;
}

.inner-entry__note {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  max-width: 46ch;
}


/* ─────────────────────────────────────────────────────────────────────────────
   MUSIC PLAYER WIDGET  (index.html)
───────────────────────────────────────────────────────────────────────────── */

/* ── Music player — plain inline text line ── */
.music-player {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 150ms ease;
}

.music-player:hover {
  color: var(--color-text);
}

.music-player:active {
  opacity: 0.7;
  transition: opacity 100ms ease;
}

/* Left slot — equalizer + icon */
.music-player__left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* SVG icon */
.music-player__icon {
  display: flex;
  align-items: center;
  color: inherit;
  line-height: 1;
}

/* "Fuckin' Problems · ASAP" */
.music-player__text {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: inherit;
  white-space: nowrap;
}

/* Separator between title and artist */
.music-player__sep {
  display: inline-block;
  margin: 0 6px;
  opacity: 0.5;
}

/* Equalizer bars — hidden when paused, slide in when playing */
.music-player__equalizer {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--transition-base), opacity var(--transition-base);
}

.music-player--playing .music-player__equalizer {
  max-width: 14px;
  opacity: 1;
}

.music-player__bar {
  flex-shrink: 0;
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background: currentColor;
}

.music-player--playing .music-player__bar:nth-child(1) {
  animation: eq-bounce 0.6s ease-in-out infinite alternate;
}
.music-player--playing .music-player__bar:nth-child(2) {
  animation: eq-bounce 0.4s ease-in-out 0.15s infinite alternate;
}
.music-player--playing .music-player__bar:nth-child(3) {
  animation: eq-bounce 0.8s ease-in-out 0.05s infinite alternate;
}

@keyframes eq-bounce {
  from { height: 3px;  }
  to   { height: 10px; }
}

/* ── Thinking-section music player item ── */
.thinking-player {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  cursor: pointer;
  transition: opacity 150ms ease;
  text-align: left;
}

.thinking-player:hover {
  opacity: 0.7;
}

.thinking-player:active {
  opacity: 0.5;
  transition-duration: 100ms;
}

.thinking-player__title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.thinking-player__controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.thinking-player__source {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-very-muted);
  font-style: italic;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .music-player__bar {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-player__bar {
    animation: none !important;
  }
}