/* =========================================================
   home.css — the vertical home page

   Five stacked acts: hero · work · about · how I work · end.
   The mascot rides along in a fixed corner slot so she can
   never land on top of a project card.
   ========================================================= */

/* ---------- 1 · hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(120px, 16vh, 190px) var(--gut) clamp(80px, 12vh, 130px);
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
}
.hero__inner { width: var(--rail); margin: 0 auto; position: relative; z-index: 3; }

/* The banner keeps the original composition: a handwritten line, the
   wordmark set as large as it will go, then the signature hanging off a
   looping arrow — with the mess scattered around it. */

.hero__eyebrow {
  color: var(--sky);
  font-size: clamp(1.25rem, 2vw, 2rem);
  margin-left: .3em;
  opacity: .95;
}

.hero__title {
  font-size: clamp(4rem, 12.5vw, 12rem);
  line-height: .94;
  letter-spacing: -.03em;
  margin: .02em 0 0 -.03em;
}

.hero__sig {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: -.08em;
  padding-left: clamp(50px, 14vw, 210px);
}
.hero__sig-arrow {
  width: clamp(36px, 4.2vw, 60px);
  color: var(--sky);
  transform: rotate(4deg);
  flex: none;
}
.hero__name {
  color: var(--sky);
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
  margin-top: clamp(22px, 3.2vw, 44px);
}

.hero__blurb {
  margin-top: clamp(22px, 3vw, 38px);
  max-width: 34ch;
  font-size: clamp(1rem, 1.1vw, 1.14rem);
  line-height: 1.64;
  color: rgba(252, 250, 245, .76);
}
.hero__blurb b { color: var(--sky); font-weight: 500; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.6vw, 42px); }
/* the banner is navy, so the outline buttons need the light ink */
.hero .btn { --btn-fg: var(--sky); }

/* the callout that points at her, mid-fall */
.hero__oops {
  position: absolute;
  left: 48%;
  top: 62%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--sky);
  opacity: .8;
  animation: sway 3.6s var(--e-soft) infinite;
  transform-origin: left center;
  pointer-events: none;
}
.hero__oops span:first-child {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  white-space: nowrap;
}
.hero__oops .doodle { width: clamp(40px, 4.2vw, 64px); transform: rotate(-42deg); }

/* the tripping mascot, bottom-right of the banner */
.hero__mascot {
  position: absolute;
  right: clamp(10px, 5vw, 130px);
  bottom: clamp(60px, 14vh, 170px);
  width: clamp(220px, 29vw, 440px);
  color: var(--sky);
  opacity: .95;
  z-index: 2;
  pointer-events: none;
}
/* strokes are in screen px, so the big figure needs a heavier nib */
.hero__mascot .stroke { stroke-width: 3.2; }
.hero__mascot .stroke-thin { stroke-width: 2.3; }
.hero__mascot .mk-body { animation: trip-wobble 3.4s var(--e-soft) infinite; transform-origin: 180px 200px; }
.hero__mascot .mk-head { animation: bob 2.6s var(--e-soft) infinite; transform-origin: 86px 88px; }
.hero__mascot .mk-fly  { transform-origin: 240px 40px; }
.hero__mascot .mk-fly--1 { animation: drift 4.2s var(--e-soft) infinite; }
.hero__mascot .mk-fly--2 { animation: drift 5.1s var(--e-soft) infinite .4s; }
.hero__mascot .mk-fly--3 { animation: drift 3.7s var(--e-soft) infinite .8s; }
.hero__mascot .mk-speed  { animation: speed-flick 1.1s steps(2) infinite; }

@keyframes trip-wobble {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30%      { transform: rotate(-3.5deg) translateY(-6px); }
  65%      { transform: rotate(2.5deg) translateY(3px); }
}
@keyframes speed-flick { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

@media (max-width: 900px) {
  .hero__mascot { width: min(230px, 56vw); right: -14px; bottom: 2vh; opacity: .42; }
  .hero__oops { display: none; }
  .hero__sig { padding-left: clamp(30px, 20vw, 120px); }
}

/* the scattered mess — hero only */
.dood {
  position: absolute;
  display: block;
  color: var(--sky);
  opacity: .34;
  z-index: 1;
  pointer-events: none;
}
.dood--hot { pointer-events: auto; cursor: pointer; transition: transform .5s var(--e-back), opacity .4s; }
.dood--hot:hover { transform: rotate(-12deg) scale(1.14); opacity: .8; }
.dood--float { animation: drift 11s var(--e-soft) infinite; }

/* kept to the top band, the two margins and the strip along the bottom,
   so nothing lands on the wordmark or on her */
.dood-cup    { width: 68px;  left: 1.5%; top: 30%; transform: rotate(-126deg); }
.dood-puddle { width: 110px; left: .5%;  top: 39%; opacity: .2; }
.dood-drop   { width: 16px;  left: 5%;   top: 36.5%; opacity: .26; }
.dood-pencil { width: 118px; left: 24%;  top: 9%;  transform: rotate(-14deg); }
.dood-plane  { width: 68px;  left: 52%;  top: 12%; transform: rotate(-22deg); }
.dood-star   { width: 32px;  left: 66%;  top: 24%; }
.dood-tangle { width: 74px;  right: 6%;  top: 9%; }
.dood-clip   { width: 32px;  right: 26%; top: 18%; transform: rotate(28deg); }
.dood-sticky { width: 62px;  left: 32%;  bottom: 12%; opacity: .22; }
.dood-banana { width: 88px;  left: 54%;  bottom: 16%; transform: rotate(6deg); }
.dood-spark  { width: 28px;  right: 3%;  bottom: 28%; }
.dood-scrib  { width: 104px; right: 4%;  bottom: 9%; opacity: .18; }

@media (max-width: 900px) {
  .dood-pencil, .dood-clip, .dood-sticky, .dood-scrib, .dood-banana, .dood-plane { display: none; }
  .dood-cup { top: 12%; left: auto; right: 6%; }
  .dood-puddle { top: 18%; left: auto; right: 2%; }
  .dood-drop { display: none; }
}

.hero__scroll {
  position: absolute;
  left: var(--gut);
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(252, 250, 245, .5);
}
/* the page scrolls down, so the cue points down */
.hero__scroll .doodle { width: 15px; animation: bob 2.4s var(--e-soft) infinite; }

/* ---------- 2 · work ---------- */

.work {
  position: relative;
  padding: clamp(80px, 12vw, 150px) var(--gut) clamp(60px, 9vw, 120px);
  background: var(--paper);
}
.work__inner { width: var(--rail); margin: 0 auto; }
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(44px, 6vw, 80px);
}
.work__head h2 { margin-top: .2em; }

.cards { display: grid; gap: clamp(48px, 7vw, 110px); }

/* one project — image on one side, the argument on the other */
.card {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.card:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.card:nth-child(even) .card__media { order: 2; }

@media (max-width: 900px) {
  .card,
  .card:nth-child(even) { grid-template-columns: 1fr; gap: 26px; }
  .card:nth-child(even) .card__media { order: 0; }
}

.card__media {
  position: relative;
  border: 1px solid rgba(18, 41, 93, .14);
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-tint);
  box-shadow: 0 30px 60px -34px rgba(18, 41, 93, .55);
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.card:hover .card__media { transform: translateY(-8px); box-shadow: 0 40px 70px -34px rgba(18, 41, 93, .6); }
.card__media .tile__shot { aspect-ratio: 16 / 11; overflow: hidden; display: block; }
.card__media .tile__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--e-out); }
.card:hover .card__media .tile__shot img { transform: scale(1.04); }

.card__no {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--blue);
}
.card__cat {
  display: block;
  margin: 1.4em 0 .1em;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}
.card__title {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.04;
  margin: .1em 0 .3em;
}
.card__line { font-size: clamp(1rem, 1.08vw, 1.14rem); line-height: 1.62; opacity: .78; max-width: 42ch; }

.card__focus { margin: 1.6em 0 0; }
.card__focus li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: .62em 0;
  font-size: .92rem;
  line-height: 1.55;
  opacity: .82;
}
.card__focus li + li { border-top: 1px solid rgba(63, 111, 151, .16); }
.card__focus .doodle { flex: none; width: 20px; margin-top: 5px; color: var(--accent); }

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 1.7em;
}
.card__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--navy);
}
.card__go .doodle { width: 34px; color: var(--accent); transition: transform .45s var(--e-back); }
.card:hover .card__go .doodle { transform: translateX(8px); }
.card__meta { font-size: .8rem; color: var(--blue); opacity: .8; }

/* ---------- 4 · about preview ---------- */

.aboutp {
  position: relative;
  padding: clamp(80px, 12vw, 150px) var(--gut);
  background: var(--paper-warm);
  overflow: hidden;
}
.aboutp__inner {
  width: var(--rail);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(300px, 1.28fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 860px) { .aboutp__inner { grid-template-columns: 1fr; } }

.aboutp__photo { position: relative; }
.aboutp__photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 55%;
  border-radius: 18px;
  border: 1px solid rgba(18, 41, 93, .16);
}
.aboutp__tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(.98rem, 1.15vw, 1.24rem);
  color: var(--blue);
  white-space: nowrap;
}
.aboutp__tag .doodle { width: clamp(38px, 3.6vw, 54px); }
.aboutp__tag--a { top: -4%; left: -5%; }
.aboutp__tag--a .doodle { transform: rotate(28deg); }
.aboutp__tag--b { bottom: 18%; left: -11%; }
.aboutp__tag--b .doodle { transform: rotate(-34deg); }
.aboutp__tag--c { bottom: -3%; right: -4%; flex-direction: row-reverse; }
.aboutp__tag--c .doodle { transform: rotate(16deg) scaleX(-1); }
@media (max-width: 860px) {
  .aboutp__tag--a { left: 0; }
  .aboutp__tag--b { left: -2%; }
  .aboutp__tag--c { right: 0; }
}

.aboutp h2 { margin: .16em 0 .4em; }
.aboutp .lede { max-width: 54ch; opacity: .82; }

.aboutp__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 28px;
  margin: clamp(28px, 3.4vw, 40px) 0;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(18, 41, 93, .16);
}
.aboutp__facts strong { display: block; font-size: .98rem; font-weight: 600; line-height: 1.4; }
.aboutp__facts span {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: .8;
}

.aboutp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ---------- 4b · how I work ----------
   Sits after the work and the introduction, so by the time you read it
   you have already seen what it produced. Numbered stops on a dashed
   trail rather than another card grid. */

.process {
  position: relative;
  padding: clamp(80px, 12vw, 150px) var(--gut);
  background: var(--paper-warm);
  overflow: hidden;
}
.process__inner { width: var(--rail); margin: 0 auto; position: relative; z-index: 2; }

.process__head { max-width: 46ch; }
.process__head h2 { margin: .16em 0 .42em; }
.process__head .lede { opacity: .8; }

.process__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 3.4vw, 48px);
  margin: clamp(46px, 6vw, 78px) 0 0;
  padding: clamp(34px, 4vw, 54px) 0 0;
  position: relative;
}
/* the trail the numbers sit on */
.process__steps::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(18, 41, 93, .34) 0 10px,
    transparent 10px 20px
  );
}
.process__steps li { position: relative; }

.process__no {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin: -1px 0 18px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1;
  color: var(--paper);
  background: var(--navy);
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
}
.process__steps li:nth-child(even) .process__no { background: var(--blue); }

.process__steps h3 { font-size: 1.02rem; margin-bottom: .5em; }
.process__steps p { font-size: .93rem; line-height: 1.62; opacity: .75; }

.process__doodle {
  position: absolute;
  right: 3%; bottom: 6%;
  width: clamp(140px, 18vw, 260px);
  color: var(--blue);
  opacity: .16;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 620px) {
  .process__steps { padding-top: clamp(26px, 6vw, 40px); }
  .process__no { margin-bottom: 14px; }
}

/* ---------- 5 · end ---------- */

.end {
  position: relative;
  padding: clamp(90px, 14vw, 170px) var(--gut) clamp(70px, 10vw, 120px);
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
  text-align: center;
}
.end__inner { width: var(--rail-narrow); margin: 0 auto; position: relative; z-index: 2; }
.end h2 { margin: .2em 0 .34em; }
.end .lede { margin: 0 auto; max-width: 40ch; color: rgba(252, 250, 245, .76); }
.end__mail {
  display: inline-block;
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  letter-spacing: -.018em;
  color: var(--sky);
}
.end__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(26px, 3.4vw, 40px); }

.end__meta {
  margin-top: clamp(48px, 7vw, 88px);
  font-size: .8rem;
  color: rgba(252, 250, 245, .5);
}
.end__meta .hand { font-size: 1rem; }

.end__wave {
  position: absolute;
  left: 4%;
  bottom: -14px;
  width: clamp(120px, 15vw, 210px);
  color: var(--sky);
  opacity: .34;
  z-index: 1;
  pointer-events: none;
}
/* she actually waves */
.end__wave .mkw-arm { animation: wave-arm 2s var(--e-soft) infinite; transform-origin: 130px 110px; }
@keyframes wave-arm {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-20deg); }
}

.end__dood {
  position: absolute;
  color: var(--sky);
  opacity: .22;
  z-index: 1;
  pointer-events: none;
}
.end__dood--1 { right: 6%; top: 18%; width: 70px; animation: drift 12s var(--e-soft) infinite; }
.end__dood--2 { right: 16%; bottom: 14%; width: 40px; }
.end__dood--3 { left: 20%; top: 14%; width: 34px; }
@media (max-width: 860px) { .end__wave, .end__dood--1 { display: none; } }

/* =========================================================
   the scroll companion

   Fixed in the bottom-left gutter. She is never in the flow
   of the page, so she cannot overlap a card; below 1100px
   she stands down entirely.
   ========================================================= */

/* The slot is exactly the empty gutter to the left of the content rail,
   and it clips. However wide the window, she and her rope can never
   paint over a card — the rope simply runs out of sight underneath it. */
.companion {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 45;
  width: calc(50vw - 590px);   /* 590px = half the 1180px content rail */
  max-width: 210px;
  height: 190px;
  overflow: hidden;
  color: var(--blue);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s var(--e-out), transform .55s var(--e-out);
  pointer-events: none;
}
.companion.is-in { opacity: .92; transform: none; }

/* narrow enough that her whole body sits inside the gutter at 1440px,
   the tightest width she is shown at — only the rope runs off the edge */
.companion__fig {
  position: absolute;
  right: 10px;
  bottom: -8px;
  width: 112px;
  pointer-events: auto;
  cursor: pointer;
}
.companion .mascot { width: 100%; }

/* the rope she is hauling, trailing up and off to the right */
.companion__rope {
  position: absolute;
  left: 72%;
  bottom: 44%;
  width: 210px;
  height: 130px;
  overflow: visible;
  pointer-events: none;
}
.companion__rope path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .45;
}

/* sits above her head and inside the clip, so it wraps rather than
   getting sliced off at the gutter edge */
.companion__say {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 106px;
  padding: .3em .6em;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  color: var(--navy);
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  opacity: 0;
  transform: scale(.7) rotate(-6deg);
  transform-origin: 0 100%;
  transition: opacity .3s, transform .35s var(--e-back);
  pointer-events: none;
  z-index: 2;
}
.companion.is-talking .companion__say { opacity: 1; transform: none; }

/* she leans into it while the page is moving */
.companion__fig { transition: transform .4s var(--e-out); }
.companion.is-hauling .companion__fig { transform: rotate(-4deg) translateX(3px); }

.companion .mkp-effort,
.companion .mkp-sweat,
.companion .mkp-dust { opacity: 0; transition: opacity .4s; }
.companion.is-hauling .mkp-effort,
.companion.is-hauling .mkp-sweat,
.companion.is-hauling .mkp-dust { opacity: .8; }

.companion .mkp-eyes { animation: blink 6s infinite; transform-origin: center; }

/* below 1440px the gutter is too thin to hold her without slicing her up */
@media (max-width: 1439px) { .companion { display: none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .companion { transition: none; }
  .companion .mkp-eyes { animation: none; }
  .hero__scroll .doodle { animation: none; }
}