:root {
  --black: #0d0d0c;
  --paper: #f7ecd9;
  --ink: #e2402c;
  --ink-soft: rgba(226, 64, 44, 0.35);
  --white: #f5f0e6;
  --muted: #a89a86;
  --font-hand: 'Caveat', cursive;
  --pad: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  background:
    linear-gradient(rgba(245, 240, 230, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 240, 230, 0.035) 1px, transparent 1px),
    var(--black);
  background-size: 42px 42px, 42px 42px, auto;
  color: var(--white);
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper-grain texture over the whole canvas — reinforces the
   notebook/paper premise instead of a flat digital black */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- floating background doodles ---------- */
/* absolute (not fixed) and sized to the full document, not the viewport —
   so instead of the same 4 icons frozen in the same screen corners the
   whole time, different doodles drift into view near different sections
   as you scroll down the page */
.doodle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--ink-soft);
}

.doodle {
  position: absolute;
  width: 70px;
  height: 70px;
}

.d1 { top: 5%; right: 8%; }
.d2 { top: 15%; left: 5%; width: 55px; height: 55px; }
.d3 { top: 24%; right: 5%; width: 50px; height: 50px; }
.d4 { top: 33%; left: 8%; width: 60px; height: 60px; }
.d5 { top: 46%; right: 6%; width: 55px; height: 55px; }
.d6 { top: 60%; left: 5%; width: 50px; height: 50px; }
.d7 { top: 72%; right: 8%; width: 60px; height: 60px; }
.d8 { top: 85%; left: 6%; width: 55px; height: 55px; }
.d9 { top: 94%; right: 5%; width: 50px; height: 50px; }
.d10 { top: 90%; left: 12%; width: 55px; height: 55px; }
.d11 { top: 97%; right: 14%; width: 60px; height: 60px; }
.d12 { top: 9%; left: 22%; width: 42px; height: 42px; }
.d13 { top: 20%; right: 20%; width: 40px; height: 40px; }
.d14 { top: 41%; right: 20%; width: 48px; height: 48px; }
.d15 { top: 53%; left: 18%; width: 46px; height: 46px; }
.d16 { top: 68%; right: 22%; width: 44px; height: 44px; }
.d17 { top: 78%; left: 20%; width: 50px; height: 50px; }

/* ---------- nav ---------- */
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  /* generous top padding: the hover illustrations sit *above* this row, so
     the row needs to start well below the viewport's top edge or the
     illustrations get clipped off-screen */
  padding: clamp(190px, 28vw, 230px) var(--pad) var(--pad);
  max-width: 1000px;
  margin: 0 auto;
}

.nav-group {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.nav-logo {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  /* the logo's own bottom edge sits on the same baseline as the nav links
     (about/Work/Connect); shifting down by half its own height moves its
     vertical CENTER onto that baseline instead, so it reads as "in line
     with" the text rather than towering above it */
  transform: translateY(50%);
  display: block;
  width: clamp(160px, 20vw, 260px);
  height: clamp(160px, 20vw, 260px);
  color: var(--white);
  transition: color 0.25s ease;
}

.nav-logo svg { width: 100%; height: 100%; }
.nav-logo:hover { color: var(--ink); }

.nav-links {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 28px;
}

/* Each nav item owns its own illustration slot, positioned directly above
   itself (not a single shared/centered slot) — and the slot is a child of
   the same hoverable wrap as the button, with zero gap between them, so
   moving the cursor up from the label into the illustration never drops
   out of hover. */
.nav-item-wrap {
  position: relative;
}

.nav-art-slot {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 130px;
  height: 104px;
  padding-bottom: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-item-wrap:hover .nav-art-slot,
.nav-item-wrap:focus-within .nav-art-slot,
.nav-links[data-hovering="about"] .nav-item-wrap[data-item="about"] .nav-art-slot,
.nav-links[data-hovering="work"] .nav-item-wrap[data-item="work"] .nav-art-slot,
.nav-links[data-hovering="connect"] .nav-item-wrap[data-item="connect"] .nav-art-slot {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.art { width: 100%; height: 88px; overflow: visible; }

/* hand-drawn "sketching in" stroke animation — each shape gets pathLength="1"
   in the markup so a uniform dasharray/dashoffset works regardless of the
   shape's actual size or complexity */
.art path, .art circle, .art rect {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s ease;
}

.nav-item-wrap:hover .art path,
.nav-item-wrap:hover .art circle,
.nav-item-wrap:hover .art rect,
.nav-item-wrap:focus-within .art path,
.nav-item-wrap:focus-within .art circle,
.nav-item-wrap:focus-within .art rect {
  stroke-dashoffset: 0;
}

.art path:nth-child(1), .art circle:nth-child(1), .art rect:nth-child(1) { transition-delay: 0s; }
.art path:nth-child(2), .art circle:nth-child(2), .art rect:nth-child(2) { transition-delay: 0.06s; }
.art path:nth-child(3), .art circle:nth-child(3), .art rect:nth-child(3) { transition-delay: 0.12s; }
.art path:nth-child(4), .art circle:nth-child(4), .art rect:nth-child(4) { transition-delay: 0.18s; }
.art path:nth-child(5), .art circle:nth-child(5), .art rect:nth-child(5) { transition-delay: 0.24s; }
.art path:nth-child(6), .art circle:nth-child(6), .art rect:nth-child(6) { transition-delay: 0.3s; }
.art path:nth-child(7), .art circle:nth-child(7), .art rect:nth-child(7) { transition-delay: 0.36s; }

.wip-note {
  font-family: var(--font-hand);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.4s ease 0.4s;
}

.nav-item-wrap:hover .wip-note,
.nav-item-wrap:focus-within .wip-note { opacity: 1; }

/* social icons for the Connect slot — each icon sits at a FIXED absolute
   position along a hand-drawn curved arrow, all within one rectangular box
   that fully encloses every icon position. This matters for hover: because
   nothing here relies on a transform that pushes an icon outside its
   parent's own layout box, the whole rectangle (icons AND the gaps between
   them) stays one continuous hoverable area — moving the mouse from
   "Connect" up along the curve never crosses a dead zone and drops out. */
/* left:0 (not left:100%) is deliberate: the box now starts at the SAME left
   edge as "Connect" itself and fully contains it, instead of merely
   touching its right edge. That removes a diagonal dead-zone at the corner
   where the two boxes used to just meet — any path from "Connect" up to an
   icon now stays inside one box the whole way, never crossing a gap. */
.nav-art-slot--social {
  left: 0;
  bottom: -6px;
  top: auto;
  transform: none;
  width: 260px;
  height: 190px;
  display: block;
  padding: 0;
}

.nav-item-wrap:hover .nav-art-slot.nav-art-slot--social,
.nav-item-wrap:focus-within .nav-art-slot.nav-art-slot--social,
.nav-links[data-hovering="connect"] .nav-item-wrap[data-item="connect"] .nav-art-slot.nav-art-slot--social {
  transform: none;
}

/* touch devices have no real hover, so this flyout can never be triggered
   there anyway — worse, its off-screen resting position was causing real
   horizontal overflow on every mobile visit. Removed from layout entirely
   on no-hover devices; the footer's .footer-socials row is the mobile way in. */
@media (hover: none) {
  .nav-art-slot--social { display: none; }
}

/* belt-and-suspenders: hover-media-feature support varies across mobile
   browsers, so also guarantee this on any narrow viewport regardless of
   what the browser reports for touch/hover capability */
@media (max-width: 820px) {
  .nav-art-slot--social { display: none; }
}

/* mobile: tapping "Connect" toggles the social icons open in normal
   document flow instead of the desktop's absolutely-positioned curved
   flyout (that flyout is what caused the original horizontal-overflow bug,
   so it stays hidden on touch — this is a completely separate, safe layout
   for the same icons, only shown while .is-open is toggled by script.js) */
@media (hover: none), (max-width: 820px) {
  .nav-item-wrap[data-item="connect"].is-open .nav-art-slot--social {
    display: flex;
    position: static;
    width: auto;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    padding: 18px 0 4px;
  }
  .nav-item-wrap[data-item="connect"].is-open .social-icon {
    position: static;
    opacity: 1;
    transform: none;
    flex-direction: column;
    gap: 6px;
  }
  .nav-item-wrap[data-item="connect"].is-open .social-icon svg {
    width: 26px;
    height: 26px;
  }
  .nav-item-wrap[data-item="connect"].is-open .social-icon path,
  .nav-item-wrap[data-item="connect"].is-open .social-icon circle,
  .nav-item-wrap[data-item="connect"].is-open .social-icon rect {
    stroke-dashoffset: 0;
  }
}

.social-icon {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: color 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.nav-item-wrap:hover .social-icon,
.nav-item-wrap:focus-within .social-icon,
.nav-links[data-hovering="connect"] .social-icon {
  opacity: 1;
  transform: translateY(0);
}

/* stacked close to directly above "Connect", with only a gentle rightward
   lean as they rise — not a wide diagonal spread */
.social-icon--1 { left: 90px; bottom: 8px; }
.social-icon--2 { left: 100px; bottom: 55px; }
.social-icon--3 { left: 112px; bottom: 108px; }
.social-icon--4 { left: 124px; bottom: 152px; }

.social-icon--1 { transition-delay: 0s; }
.social-icon--2 { transition-delay: 0.08s; }
.social-icon--3 { transition-delay: 0.16s; }
.social-icon--4 { transition-delay: 0.24s; }

/* icons grow slightly as they climb the curve, matching the sketch */
.social-icon--1 svg { width: 22px; height: 22px; }
.social-icon--2 svg { width: 26px; height: 26px; }
.social-icon--3 svg { width: 30px; height: 30px; }
.social-icon--4 svg { width: 26px; height: 26px; }

.social-icon svg { flex-shrink: 0; transition: transform 0.2s ease; }
.social-icon:hover { color: var(--ink); }
.social-icon:hover svg { transform: scale(1.15); }

.social-name {
  font-family: var(--font-hand);
  font-size: 1rem;
  white-space: nowrap;
}

.social-icon path, .social-icon circle, .social-icon rect {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s ease;
}

.nav-item-wrap:hover .social-icon path,
.nav-item-wrap:hover .social-icon circle,
.nav-item-wrap:hover .social-icon rect,
.nav-item-wrap:focus-within .social-icon path,
.nav-item-wrap:focus-within .social-icon circle,
.nav-item-wrap:focus-within .social-icon rect {
  stroke-dashoffset: 0;
}

.nav-item {
  position: relative;
  display: block;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--white);
  text-decoration: none;
  padding: 4px 10px;
  transition: color 0.25s ease;
}

.nav-item-wrap:hover .nav-item { color: var(--ink); }

.hover-oval {
  position: absolute;
  inset: -6px -10px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cellipse cx='50' cy='20' rx='47' ry='17' fill='none' stroke='%23e2402c' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.nav-item-wrap:hover .hover-oval { opacity: 1; transform: scale(1); }

main {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--pad);
  perspective: 1800px;
}

/* page-turn: each section tilts on its top edge like a notebook page lifting
   away as it scrolls past, and settles flat as the next one arrives —
   applied via JS/ScrollTrigger (see .page-section in script.js) */
main > section {
  transform-style: preserve-3d;
  transform-origin: top center;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  main { perspective: none; }
}

/* ---------- hero notebook card ---------- */
.hero {
  padding: 4vh 0 8vh;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 2/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(226, 64, 44, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-card {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 18px;
  color: var(--black);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  background-image:
    linear-gradient(rgba(226, 64, 44, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 64, 44, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* permanent, static 3D lean — not scroll-tied, so it never flickers between
   flat/tilted or dims like the page-turn effect on lower sections. Higher
   specificity than the generic .reveal.is-visible rule so it wins that
   shared transform property outright regardless of source order. */
.hero-card.reveal.is-visible {
  transform: translateY(0) rotateX(4deg) rotateY(-3deg);
  opacity: 1;
}

/* the 3D lean depends on a wide perspective/viewing distance to read as a
   gentle tilt — on a narrow phone screen the same tilt reads as visibly
   skewed instead, so keep it flat there and save the flourish for desktop */
@media (max-width: 820px) {
  .hero-card.reveal.is-visible {
    transform: translateY(0);
  }
}

.hero-card-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
}

.hero-signature {
  font-family: var(--font-hand);
  font-size: 2.6rem;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}

.hero-label {
  font-size: 1.2rem;
  color: #4a3f33;
  margin: 4px 0 20px;
}

.hero-label .rotator {
  color: inherit;
  font-weight: inherit;
}

.hero-headline {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  line-height: 1.1;
  text-wrap: balance;
}

.rotator {
  font-family: var(--font-hand);
  color: var(--ink);
  font-weight: 700;
  display: inline-block;
}

.hero-location {
  font-size: 1.15rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3a3025;
  margin: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: #3a3025;
}

.status-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  animation: status-pulse 2s ease-out infinite;
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 64, 44, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(226, 64, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 64, 44, 0); }
}

.hero-scene {
  width: 100%;
  height: auto;
  color: var(--ink);
  animation: hero-bob 5s ease-in-out infinite;
}

@keyframes hero-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-0.6deg); }
}

/* the vibe-coding loop: a real prompt is typed, then cross-fades into
   shipped code with a checkmark. Both phases have a real resting opacity
   set as plain SVG attributes (see index.html), so reduced-motion users
   still see one complete, correct frame instead of an animation-gated one. */
.hero-phase--prompt { animation: heroPhasePrompt 6s ease-in-out infinite; }
.hero-phase--shipped { animation: heroPhaseShipped 6s ease-in-out infinite; }

@keyframes heroPhasePrompt {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes heroPhaseShipped {
  0%, 45% { opacity: 0; }
  55%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

.hero-thinking-dot {
  animation: heroThinkingDot 1.2s ease-in-out infinite;
}
.hero-thinking-dot:nth-of-type(2) { animation-delay: 0.15s; }
.hero-thinking-dot:nth-of-type(3) { animation-delay: 0.3s; }

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

.hero-shipped-badge {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: heroShippedPop 6s ease-out infinite;
}

@keyframes heroShippedPop {
  0%, 54% { transform: scale(0); opacity: 0; }
  62% { transform: scale(1.15); opacity: 1; }
  70%, 95% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.hero-cursor {
  animation: hero-cursor-blink 0.9s step-end infinite;
}

@keyframes hero-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero-fold {
  position: relative;
  height: 26px;
  border-top: 2px dashed var(--ink-soft);
}

.hero-fold-ribbon {
  position: absolute;
  right: 40px;
  top: -14px;
  width: 40px;
  height: 40px;
  background: var(--ink);
  border-radius: 4px;
  transform: rotate(20deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 720px) {
  .hero-card-inner { grid-template-columns: 1fr; }
}

/* ---------- section labels shared ---------- */
.section-label {
  font-family: var(--font-hand);
  font-size: 2.3rem;
  color: var(--ink);
  margin: 0 0 28px;
  font-weight: 600;
  text-wrap: balance;
}

/* ---------- beliefs ---------- */
/* ---------- stats ---------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 60px;
  padding: 4vh 0 8vh;
  text-align: center;
}

.stat-item { min-width: 140px; }

.stat-icon {
  width: 44px;
  height: 44px;
  color: var(--ink);
  margin-bottom: 8px;
}

.stat-icon--rocket { animation: hero-bob 2.4s ease-in-out infinite; }
.stat-icon-flame { animation: flame-flicker 0.3s ease-in-out infinite alternate; transform-origin: top center; }
.stat-icon-blink { animation: hero-cursor-blink 2.6s step-end infinite; }
.stat-icon--flag .stat-icon-flag { animation: skill-bob 2s ease-in-out infinite; transform-origin: left center; }
.stat-icon--check .stat-icon-check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: stat-check-draw 1.6s ease-in-out infinite;
}

@keyframes stat-check-draw {
  0%, 20% { stroke-dashoffset: 30; }
  50%, 100% { stroke-dashoffset: 0; }
}

.stat-number {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 4rem);
  color: var(--ink);
  margin: 0;
  line-height: 1;
}

.stat-label {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- hand-drawn divider ticker ---------- */
.ticker {
  overflow: hidden;
  border-top: 1px dashed var(--ink-soft);
  border-bottom: 1px dashed var(--ink-soft);
  padding: 14px 0;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 55s linear infinite;
}

.ticker-phrase {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-phrase:nth-child(2) { display: none; }
}

.beliefs {
  padding: 8vh 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}

.beliefs-illustration {
  width: 100%;
  max-width: 260px;
  height: auto;
  color: var(--ink);
  justify-self: center;
}

.beliefs-bulb-glow { animation: skill-twinkle 1.8s ease-in-out infinite; }

.beliefs-pencil {
  transform-box: fill-box;
  transform-origin: center;
  animation: beliefs-pencil-wiggle 3.4s ease-in-out infinite;
}

@keyframes beliefs-pencil-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@media (max-width: 800px) {
  .beliefs {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .beliefs-illustration {
    order: -1;
    max-width: 200px;
    margin-bottom: 4px;
  }
  .belief-icon { margin-left: auto; margin-right: auto; }
  .flip-in { margin: 0 auto; }
}

.belief-icon {
  width: 44px;
  height: 44px;
  color: var(--ink);
  margin-bottom: 12px;
}

.belief-icon-glow { animation: skill-twinkle 1.8s ease-in-out infinite; }

.belief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  perspective: 1000px;
}

.flip-in {
  font-size: 1.5rem;
  max-width: 60ch;
  padding-left: 26px;
  position: relative;
  transform-origin: left center;
  transform: rotateY(-90deg) scaleX(0.4);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.flip-in.is-flipped { transform: rotateY(0deg) scaleX(1); opacity: 1; }

.flip-in::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink);
}

/* ---------- work / corkboard ---------- */
.work { padding: 6vh 0 10vh; }

.corkboard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 44px 40px;
  border: 1px solid rgba(245, 240, 230, 0.15);
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(245, 240, 230, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 240, 230, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

.board-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 24px;
}

/* the [hidden] attribute alone doesn't work here — an author stylesheet's
   display:flex above always wins over the browser's default [hidden]
   { display:none } rule, so it has to be restated explicitly or the
   category tabs would show every row at once regardless of selection */
.board-row[hidden] {
  display: none;
}

.project-card--wide { width: 260px; }
.project-card--wide .project-mock { height: 96px; }

/* horizontal category switcher — click or hover a tab to swap which row of
   project cards is showing below, instead of stacking every category at
   once (keeps the page from growing every time a project is added) */
.board-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.board-tab {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--white);
  background: none;
  border: 1.5px solid rgba(245, 240, 230, 0.3);
  border-radius: 999px;
  padding: 6px 20px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.board-tab:hover { border-color: var(--ink); color: var(--ink); }

.board-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.ruler {
  position: absolute;
  background: repeating-linear-gradient(to right, rgba(245,240,230,0.25) 0, rgba(245,240,230,0.25) 1px, transparent 1px, transparent 32px);
  opacity: 0.5;
}

.ruler-top { top: 0; left: 0; right: 0; height: 6px; }
.ruler-left {
  top: 0; left: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(to bottom, rgba(245,240,230,0.25) 0, rgba(245,240,230,0.25) 1px, transparent 1px, transparent 32px);
}

/* A torn kraft-paper note pinned to the board — deliberately NOT styled like
   a project card (different paper tone, ragged edges, a tape strip, bigger
   bolder ink) so it reads as a handwritten aside, not another tile in the
   grid. Sits slightly above the cards via a taller shadow + scale. */
.note-card {
  position: relative;
  align-self: center;
  max-width: 210px;
  transform: rotate(var(--rot, -3deg));
  background: linear-gradient(155deg, #e8cfa0, #dcbb85);
  color: #3a2a12;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.15;
  padding: 26px 24px 20px;
  clip-path: polygon(
    1% 4%, 12% 0%, 27% 3%, 41% 0%, 58% 2%, 74% 0%, 89% 3%, 100% 0%,
    98% 22%, 100% 40%, 97% 58%, 100% 76%, 98% 92%, 100% 100%,
    83% 97%, 66% 100%, 49% 97%, 33% 100%, 17% 97%, 3% 100%, 0% 100%,
    2% 82%, 0% 64%, 3% 46%, 0% 28%, 2% 12%
  );
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(0, 0, 0, 0.15) inset;
  z-index: 3;
}

.note-card::before {
  /* washi-tape strip pinning the note down */
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 64px;
  height: 26px;
  background: rgba(226, 64, 44, 0.85);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.note-card::after {
  /* a little ink underline, like the phrase was underlined for emphasis */
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 14px;
  height: 3px;
  background: var(--ink);
  opacity: 0.6;
  transform: rotate(-1deg);
}

.project-card {
  /* rotation/scale are owned by GSAP (see script.js) so Draggable's transform
     writes never conflict with a CSS-set rotation */
  position: relative;
  width: 200px;
  background: var(--paper);
  color: var(--black);
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
  cursor: grab;
  touch-action: none;
  transition: box-shadow 0.3s ease;
  display: block;
  text-decoration: none;
}

.project-card:hover {
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

/* a second card "material" — a dark device-bezel frame instead of the cream
   paper card, so a row reads as a mix of pinned photos + phone screenshots
   rather than a uniform grid of identical cards */
.project-card--dark {
  background: #17140f;
  border: 3px solid #2a251c;
  color: var(--white);
}

.project-card--dark .project-mock {
  background: #0d0d0c;
}

.project-card--dark .project-label { color: var(--white); }
.project-card--dark .project-desc { color: #9c9080; }

.project-mock {
  position: relative;
  height: 110px;
  border-radius: 4px;
  background: #efe3cd;
  overflow: hidden;
  margin-bottom: 10px;
}

.project-label {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  margin: 0;
  text-align: center;
  color: var(--black);
}

.project-desc {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 500;
  color: #5c5040;
  margin: 2px 0 0;
  text-align: center;
  line-height: 1.25;
}

/* ---------- bespoke animated mock illustrations, one per project's actual function ---------- */

/* OrbitAI Labs — a satellite dot orbiting a hub, echoing the brand name */
.mock-orbit { display: flex; align-items: center; justify-content: center; }
.orbit-ring { position: absolute; width: 64px; height: 64px; border: 1.5px dashed rgba(13,13,12,0.25); border-radius: 50%; }
.orbit-center { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--black); opacity: 0.7; }
.orbit-dot {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  top: 50%; left: 50%;
  transform-origin: -22px 0;
  animation: orbit-spin 4s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg) translateX(0) translateY(-32px); } }

/* CodeRoom — two colored cursors blinking over growing code lines, like live co-editing */
.mock-cursors { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; }
.code-line { display: block; height: 8px; border-radius: 4px; background: rgba(13,13,12,0.15); animation: code-grow 3s ease-in-out infinite; }
.code-line:nth-child(2) { animation-delay: 0.4s; }
@keyframes code-grow { 0%, 100% { transform: scaleX(1); transform-origin: left; } 50% { transform: scaleX(0.7); transform-origin: left; } }
.cursor { position: absolute; width: 2px; height: 14px; animation: cursor-blink 1s step-end infinite; }
.cursor-1 { background: var(--ink); top: 20px; left: 60px; }
.cursor-2 { background: #2f7de1; top: 42px; left: 100px; animation-delay: 0.5s; }
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* GrabText — a marching-ants selection box sweeping over text, like a live screen-grab */
.mock-marquee { display: flex; align-items: center; justify-content: center; }
.marquee-text {
  width: 70%; height: 42px;
  background:
    linear-gradient(rgba(13,13,12,0.18) 8px, transparent 8px),
    linear-gradient(rgba(13,13,12,0.18) 8px, transparent 8px);
  background-size: 100% 16px;
  background-repeat: repeat-y;
}
.marquee-box {
  position: absolute;
  width: 45%; height: 26px;
  border: 2px dashed var(--ink);
  border-radius: 2px;
  animation: marquee-sweep 3.2s ease-in-out infinite, marquee-ants 0.6s linear infinite;
}
@keyframes marquee-sweep {
  0%, 100% { transform: translate(-14px, -8px); }
  50% { transform: translate(14px, 8px); }
}
@keyframes marquee-ants { to { border-image-source: none; background-position: 8px 0; } }

/* Zoya — an audio waveform, breathing like it's listening */
.mock-waveform { display: flex; align-items: center; justify-content: center; gap: 6px; }
.wave-bar { width: 6px; height: 16px; border-radius: 3px; background: var(--ink); animation: wave-pulse 1.1s ease-in-out infinite; }
.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: 0.15s; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-delay: 0.15s; }
.wave-bar:nth-child(5) { animation-delay: 0s; }
@keyframes wave-pulse { 0%, 100% { height: 14px; } 50% { height: 44px; } }

/* X / social auto-posters — a post sliding up and out, like it's just been published */
.mock-post { display: flex; align-items: center; justify-content: center; }
.post-line { width: 60%; height: 8px; border-radius: 4px; background: rgba(13,13,12,0.15); }
.post-slip {
  position: absolute;
  width: 55%; height: 22px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  animation: post-ship 2.4s ease-in infinite;
}
@keyframes post-ship {
  0% { transform: translateY(24px); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translateY(-30px); opacity: 1; }
  100% { transform: translateY(-38px); opacity: 0; }
}

/* Threads automation — three linked dots pulsing in sequence, like a thread posting */
.mock-thread { display: flex; align-items: center; justify-content: center; gap: 14px; }
.thread-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); animation: thread-pulse 1.8s ease-in-out infinite; }
.thread-dot:nth-child(2) { animation-delay: 0.3s; }
.thread-dot:nth-child(3) { animation-delay: 0.6s; }
@keyframes thread-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Auto Carousel Agent — slides cycling through, like a carousel scrolling itself */
.mock-carousel { display: flex; align-items: center; justify-content: center; gap: 8px; }
.carousel-slide { width: 34px; height: 46px; border-radius: 3px; background: rgba(13,13,12,0.12); animation: carousel-cycle 2.4s ease-in-out infinite; }
.carousel-slide:nth-child(1) { animation-delay: 0s; }
.carousel-slide:nth-child(2) { animation-delay: 0.3s; background: rgba(226,64,44,0.5); }
.carousel-slide:nth-child(3) { animation-delay: 0.6s; }
@keyframes carousel-cycle { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.08); } }

/* Auto Infographics — a bar chart growing, like data becoming a graphic */
.mock-bars { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding-bottom: 18px; }
.chart-bar { width: 12px; border-radius: 3px 3px 0 0; background: var(--ink); animation: chart-grow 2s ease-in-out infinite; }
.chart-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
.chart-bar:nth-child(2) { height: 36px; animation-delay: 0.2s; background: #2f7de1; }
.chart-bar:nth-child(3) { height: 26px; animation-delay: 0.4s; }
.chart-bar:nth-child(4) { height: 44px; animation-delay: 0.6s; background: #2f7de1; }
@keyframes chart-grow { 0%, 100% { transform: scaleY(1); transform-origin: bottom; } 50% { transform: scaleY(0.55); transform-origin: bottom; } }

/* LinkedIn automation — a clock hand ticking, posting on schedule */
.mock-clock { display: flex; align-items: center; justify-content: center; }
.clock-face { width: 40px; height: 40px; border: 2px solid rgba(13,13,12,0.3); border-radius: 50%; }
.clock-hand {
  position: absolute;
  width: 2px; height: 16px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: bottom center;
  bottom: 55px;
  animation: clock-tick 2s steps(4) infinite;
}
.clock-ping {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  right: 28%;
  animation: clock-post 2s ease-in-out infinite;
}
@keyframes clock-tick { to { transform: rotate(360deg); } }
@keyframes clock-post { 0%, 80%, 100% { opacity: 0; transform: scale(0.5); } 90% { opacity: 1; transform: scale(1); } }

/* YouTube Shorts Automation — a vertical video frame with a play triangle
   pulsing, like a short auto-rendering and looping */
.mock-shorts { display: flex; align-items: center; justify-content: center; }
.shorts-frame { width: 46px; height: 82px; border: 2px solid var(--ink); border-radius: 8px; opacity: 0.5; }
.shorts-play {
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--ink);
  animation: shorts-pulse 1.8s ease-in-out infinite;
}
@keyframes shorts-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }

/* Genesis — twinkling stars for a cinematic, spacefaring scroll experience */
.mock-stars { background: #1c1a17; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--white); animation: star-twinkle 2.4s ease-in-out infinite; }
.star:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.star:nth-child(2) { top: 60%; left: 30%; animation-delay: 0.4s; }
.star:nth-child(3) { top: 30%; left: 55%; animation-delay: 0.8s; }
.star:nth-child(4) { top: 70%; left: 70%; animation-delay: 1.2s; }
.star:nth-child(5) { top: 45%; left: 85%; animation-delay: 1.6s; }
@keyframes star-twinkle { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.8); } }

/* Wilderness — a tree swaying, for the outdoor/forest brand */
.mock-sway { display: flex; align-items: flex-end; justify-content: center; }
.tree-trunk { width: 6px; height: 26px; background: #8a6a4a; }
.tree-leaves {
  position: absolute;
  bottom: 40px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #5c7a4f;
  animation: tree-sway 3s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes tree-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Rocket — thrust flickering beneath a climbing rocket, for the agency brand */
.mock-rocket { display: flex; align-items: center; justify-content: center; }
.rocket-body {
  width: 20px; height: 34px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50% 50% 4px 4px;
  animation: rocket-hover 2.2s ease-in-out infinite;
}
.rocket-flame {
  position: absolute;
  bottom: 30px;
  width: 10px; height: 16px;
  background: var(--ink);
  border-radius: 0 0 8px 8px;
  animation: flame-flicker 0.3s ease-in-out infinite alternate;
}
@keyframes rocket-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes flame-flicker { from { transform: scaleY(1) scaleX(1); opacity: 0.8; } to { transform: scaleY(1.4) scaleX(0.7); opacity: 1; } }

/* Vanta — a lightning-bolt spark, for the high-energy sneaker brand */
.mock-spark { display: flex; align-items: center; justify-content: center; }
.spark-bolt {
  width: 22px; height: 40px;
  background: var(--ink);
  clip-path: polygon(60% 0, 0 55%, 40% 55%, 30% 100%, 100% 40%, 55% 40%);
  animation: spark-flicker 1.4s ease-in-out infinite;
}
@keyframes spark-flicker { 0%, 100% { opacity: 1; filter: brightness(1); } 45% { opacity: 0.4; } 50% { opacity: 1; filter: brightness(1.4); } }

/* AURÉLIE — a glossy shimmer sweeping a product card, for the luxury fashion showcase */
.mock-shimmer { display: flex; align-items: center; justify-content: center; }
.shimmer-card { width: 60%; height: 70px; border-radius: 4px; background: #e8dcc4; }
.shimmer-sweep {
  position: absolute;
  width: 40px; height: 100%;
  top: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: shimmer-slide 2.6s ease-in-out infinite;
}
@keyframes shimmer-slide { 0% { left: -20%; } 100% { left: 110%; } }

@media (max-width: 720px) {
  .board-row { flex-direction: column; align-items: center; }
  .project-card, .project-card--wide { width: 100%; max-width: 320px; }
}

/* ---------- work catalog: the full list, filterable by category ---------- */
.catalog { margin-top: 8vh; }

.catalog-intro {
  font-size: 1.3rem;
  color: var(--white);
  margin: 0 0 20px;
}

.catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.catalog-tab {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--white);
  background: none;
  border: 1.5px solid rgba(245, 240, 230, 0.3);
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.catalog-tab:hover { border-color: var(--ink); color: var(--ink); }

.catalog-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.catalog-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(245, 240, 230, 0.15);
}

.catalog-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(245, 240, 230, 0.15);
  text-decoration: none;
  color: var(--white);
  transition: background 0.2s ease, padding-left 0.2s ease;
}

.catalog-item:hover {
  background: rgba(226, 64, 44, 0.06);
  padding-left: 16px;
}

.catalog-item[hidden] { display: none; }

.catalog-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  color: var(--white);
  transition: color 0.2s ease;
}

.catalog-icon svg { width: 100%; height: 100%; }
.catalog-item:hover .catalog-icon { color: var(--ink); }

/* idle animation per icon family — a small bit of life, keyed to what each
   project type "does" (a beat/pulse for automation, thrust/hover for a
   rocket-style landing page, a scan sweep for the browser-extension icon) */
.icon-chrome { animation: icon-scan 3.5s ease-in-out infinite; }
.icon-web { animation: hero-bob 4.5s ease-in-out infinite; }
.icon-bot { animation: icon-pulse 2s ease-in-out infinite; }
.icon-rocket { animation: icon-hover 2.6s ease-in-out infinite; }

@keyframes icon-scan {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes icon-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.catalog-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.catalog-name {
  font-family: var(--font-hand);
  font-size: 1.3rem;
}

.catalog-tag {
  font-size: 0.95rem;
  color: var(--muted);
}

.catalog-arrow {
  font-size: 1.3rem;
  color: var(--ink);
  transform: translate(0, 0);
  transition: transform 0.2s ease;
}

.catalog-item:hover .catalog-arrow { transform: translate(3px, -3px); }

@media (max-width: 600px) {
  .catalog-tag { display: none; }
}

/* ---------- transition ---------- */
.transition {
  padding: 6vh 0;
  text-align: center;
  border-top: 1px solid rgba(245, 240, 230, 0.1);
}

.transition-art { width: 100px; height: 100px; color: var(--ink); margin-bottom: 12px; }

.terminal-scene {
  display: inline-block;
  text-align: center;
}

.terminal {
  display: inline-block;
  text-align: left;
  background: #14100c;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 0 0 16px;
  min-width: 320px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.terminal-stand {
  display: block;
  width: 200px;
  height: 52px;
  color: var(--ink);
  margin: 0 auto 20px;
  animation: hero-bob 5.5s ease-in-out infinite;
}

.terminal-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(245, 240, 230, 0.1);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.25);
}

.terminal-dot:first-child { background: var(--ink); }

.terminal-line {
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  color: var(--white);
  padding: 16px 18px 0;
  margin: 0;
}

.terminal-prompt { color: var(--ink); margin-right: 8px; }

.terminal-caret {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--ink);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: hero-cursor-blink 0.9s step-end infinite;
}

.transition-tagline {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--white);
  margin: 0;
}

/* ---------- about ---------- */
.about {
  padding: 6vh 0 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.about-bio {
  max-width: 85ch;
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--white);
}

.about-bio p { margin: 0 0 1em; }
.about-bio p:last-child { margin-bottom: 0; }
.about-bio strong { color: var(--ink); font-size: 1.5rem; }
.about-bio em { font-style: italic; color: var(--muted); }

.about-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.polaroid {
  width: 160px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  padding: 10px 10px 26px;
  transform: rotate(-4deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.polaroid:hover {
  transform: rotate(2deg) scale(1.04);
}

.polaroid-photo {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(13,13,12,0.08);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  overflow: hidden;
}

.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
}

.polaroid-caption {
  font-family: var(--font-hand);
  color: var(--ink);
  font-size: 1.2rem;
  text-align: center;
  margin: 10px 0 0;
}

.lookfor-card {
  width: 100%;
  max-width: 640px;
  margin-top: 24px;
  background: var(--paper);
  color: var(--black);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.lookfor-card .section-label { margin-bottom: 16px; }

.checklist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 1.15rem;
  color: #4a3f33;
}

.checklist li[data-checked="true"] { color: var(--black); }

.check-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}

.checklist li[data-checked="true"] .check-box { background: var(--ink); }

.checklist li[data-checked="true"] .check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cta-pill {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 22px;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  animation: pulse 2.4s ease-in-out infinite;
}

.cta-pill:hover {
  background: var(--ink);
  color: var(--paper);
  transform: scale(1.06);
  animation-play-state: paused;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 64, 44, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(226, 64, 44, 0); }
}

.lookfor-frame {
  border: 3px solid var(--ink);
  border-radius: 8px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.lookfor-illustration { width: 70%; height: auto; }

.lookfor-hand { animation: lookfor-reach 2.4s ease-in-out infinite; }
.lookfor-hand:first-of-type { transform-origin: 30px 70px; }
.lookfor-hand:last-of-type { transform-origin: 110px 70px; animation-delay: 0.1s; }

@keyframes lookfor-reach {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.lookfor-spark { animation: star-twinkle 1.6s ease-in-out infinite; }
.lookfor-spark:nth-child(4) { animation-delay: 0.2s; }
.lookfor-spark:nth-child(5) { animation-delay: 0.4s; }

@media (max-width: 640px) {
  .lookfor-card { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  z-index: 1;
  padding: 4vh var(--pad) 4vh;
  text-align: center;
  color: var(--muted);
}

/* a plain, always-tappable row of the same social links — the nav's hover
   flyout is a nice desktop flourish, but touch devices have no real hover,
   so this is the reliable way in for anyone on a phone */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 18px;
}

.footer-socials a {
  width: 26px;
  height: 26px;
  color: var(--muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-socials a:hover { color: var(--ink); transform: translateY(-2px); }
.footer-socials svg { width: 100%; height: 100%; }

.footer-art {
  width: 100px;
  height: 92px;
  color: #f2e3cf;
  opacity: 0.9;
  margin-bottom: 16px;
  animation: footer-sway 4.5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes footer-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.footer-egg {
  font-size: 0.95rem;
  opacity: 0.25;
  transition: opacity 0.4s ease;
  cursor: default;
}

.footer-egg:hover { opacity: 0.7; }

.footer-sign {
  font-family: var(--font-hand);
  color: var(--ink);
  font-size: 1.4rem;
  margin-top: 12px;
}

/* ---------- shared reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- hero first-load intro ---------- */
.hero-intro-el { opacity: 0; }
.hero-signature.hero-intro-el { transform: translateY(14px); }
.hero-label.hero-intro-el,
.hero-location.hero-intro-el { transform: translateY(10px); }
.hero-headline.hero-intro-el { opacity: 1; }

/* ---------- scroll-spy active nav item ---------- */
.nav-item-wrap.is-active .hover-oval { opacity: 1; transform: scale(1); }
.nav-item-wrap.is-active .nav-item { color: var(--ink); }

/* ---------- back-to-top paper airplane ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.back-to-top:hover { background: var(--ink); color: var(--paper); }

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top svg { width: 22px; height: 22px; }

@media (max-width: 600px) {
  .back-to-top { right: 16px; bottom: 16px; }
}

/* ---------- scroll progress pencil line ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 100vh;
  z-index: 50;
  background: rgba(247, 236, 217, 0.08);
  pointer-events: none;
}

.scroll-progress-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--ink);
}

@media (max-width: 820px) {
  .nav {
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .nav-logo {
    position: static;
    /* the desktop rule shifts the logo down by half its own height to
       vertically center it against the nav-links baseline (see the base
       .nav-logo rule) — irrelevant once it's stacked in normal flow above
       the links instead of beside them, and left unset here it still
       applies, shoving the logo down into the links below it */
    transform: none;
    width: clamp(140px, 45vw, 200px);
    height: clamp(140px, 45vw, 200px);
  }
  main { padding: 0 20px; }
}

/* every idle/looping animation gets a reduced-motion off switch; reveals and
   hover states still work, they just stop looping/sliding */
@media (prefers-reduced-motion: reduce) {
  .hero-scene, .terminal-stand, .footer-art, .cta-pill, .doodle,
  .orbit-dot, .code-line, .cursor, .marquee-box, .wave-bar, .post-slip,
  .thread-dot, .carousel-slide, .chart-bar, .clock-hand, .clock-ping, .shorts-play,
  .star, .tree-leaves, .rocket-body, .rocket-flame, .spark-bolt, .shimmer-sweep,
  .hero-phase--prompt, .hero-phase--shipped, .hero-thinking-dot, .hero-shipped-badge, .hero-cursor, .terminal-caret,
  .stat-icon--rocket, .stat-icon-flame, .stat-icon-blink, .stat-icon--flag .stat-icon-flag,
  .stat-icon--check .stat-icon-check, .belief-icon-glow,
  .lookfor-hand, .lookfor-spark, .status-dot, .beliefs-bulb-glow, .beliefs-pencil {
    animation: none !important;
  }
  .reveal, .flip-in, .art, .hover-oval, .nav-art-slot, .polaroid, .project-card {
    transition-duration: 0.01ms !important;
  }
  .hero-intro-el {
    opacity: 1 !important;
    transform: none !important;
  }
  .back-to-top { transition-duration: 0.01ms !important; }
}