/* /work — the evidence page.

   It shares the tube with the hero on purpose: this is an internal page, so it
   belongs to the machine. /resume.html deliberately does NOT, because its job
   is to be parsed by ATS software and skimmed in ten seconds, and a CRT is the
   wrong costume for that.

   The tier rule still holds. Pixels are the machine (the back arrow, the HUD
   light). Mono is what it says (keys, eyebrows, tags). Type is what Juan says
   (the headings and every line of prose). No body copy is ever pixels. */

.doc { min-height: 100%; }

/* the hero scrolls nothing; this page is a document and scrolls normally */
.doc__head { padding-block: 12vh 6vh; }
.doc__main { padding-block: 0 4vh; }
.doc__foot { padding-block: 6vh 16vh; border-top: 1px solid rgba(220, 230, 221, .09); }

.back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--fg-dim); text-decoration: none;
  margin-bottom: 40px;
}
.back i {
  width: 7px; height: 7px; background: var(--amber); border-radius: 1px;
  box-shadow: 0 0 10px rgba(240, 168, 60, .8);
  transition: transform .25s cubic-bezier(.2, .8, .25, 1);
}
.back:hover { color: var(--amber); }
.back:hover i { transform: translateX(-4px); }

.doc__h1 {
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.02; letter-spacing: -.022em; font-weight: 800;
  margin: 6px 0 22px; max-width: 16ch;
  color: var(--fg);
}
.doc__lede {
  margin: 0; max-width: 56ch;
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.62; color: var(--fg-dim);
}

/* ------------------------------------------------------------------ items */

.item {
  padding-block: clamp(38px, 6vh, 62px);
  border-top: 1px solid rgba(220, 230, 221, .09);
  max-width: 62ch;
  /* anchored from the icon row, so leave room under a sticky-free header */
  scroll-margin-top: 8vh;
}
.item:first-child { border-top: none; }

.item__k {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber);
}
.item__h {
  margin: 0 0 18px;
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.12;
  letter-spacing: -.014em; font-weight: 800; color: var(--fg);
}
.item p {
  margin: 0 0 14px;
  font-size: clamp(14.5px, 1.45vw, 16.5px); line-height: 1.68; color: var(--fg-dim);
}
.item em { font-style: italic; color: var(--fg); }

/* the line that makes this a portfolio rather than a list */
.item__cost {
  border-left: 2px solid rgba(240, 168, 60, .45);
  padding-left: 16px;
  margin-block: 20px 18px !important;
}
.item__cost b { color: var(--amber); font-weight: 600; }

.tags {
  font-family: var(--mono); font-size: 10.5px !important; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-dim); opacity: .7;
  margin-bottom: 18px !important;
}
.item__go { margin: 0 !important; }

@media (max-width: 620px) {
  .doc__head { padding-block: 8vh 4vh; }
  .back { margin-bottom: 28px; }
  .item__cost { padding-left: 12px; }
}

/* the human block — the same page, a different job. It reads as an aside
   rather than a sixth project, so the "five things" count still means the
   work. The research is blunt that this is the part that decides whether
   someone wants to work with you, and equally blunt that it should be short. */
.item--human { border-top-width: 1px; }
.item--human .item__k { color: var(--cool, #2FD9C5); }
.item--human .item__h { font-size: clamp(19px, 2.2vw, 25px); }

/* ===================================================== LEAD MARK + STATS ===
   The page was a wall of prose. The research on portfolio pages is blunt about
   why that fails: recruiters scroll a case study in SECONDS looking for visual
   proof, and visuals "convey complex information far more efficiently than
   words." So every project now opens with a mark and carries its numbers where
   a scan will hit them, with the prose demoted to the layer that has to stand
   up in an interview rather than the layer that has to survive a skim.

   A CAROUSEL was considered and rejected — see the README. Short version: in
   the Notre Dame study only 1% of visitors clicked a carousel at all and 84% of
   those clicks were the FIRST slide, so four of these five projects would have
   been invisible. */

.item__lead {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px);
  margin-bottom: 20px;
}
.item__lead .item__k { margin-bottom: 6px; }
.item__lead .item__h { margin-bottom: 0; }

/* the mark is the SAME pixel sprite the hero icons use, at hero size — which is
   what keeps this page reading as the same machine as the front door */
.plate {
  flex: none;
  display: grid;
  grid-template-columns: repeat(8, var(--pp));
  grid-auto-rows: var(--pp);
  gap: calc(var(--pp) * .18);
  --pp: clamp(5px, 0.85vw, 8px);
  padding: calc(var(--pp) * 1.5);
  border: 1px solid rgba(240, 168, 60, .16);
  border-radius: 4px;
  background: rgba(240, 168, 60, .028);
}
.plate i { background: transparent; border-radius: 1px; }
.plate i.on {
  background: var(--amber);
  box-shadow: 0 0 7px rgba(240, 168, 60, .55);
}

/* the numbers. Display type for the figure, mono for the label — the figure is
   Juan's fact, the label is the machine annotating it. */
.stats {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3.4vw, 42px);
}
.stats li { display: flex; flex-direction: column; gap: 4px; }
.stats b {
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: var(--fg);
  text-shadow: 0 0 22px rgba(240, 168, 60, .30);
}
.stats span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-dim);
}

@media (max-width: 560px) {
  .item__lead { gap: 14px; }
  .stats { gap: 18px 26px; }
}

/* the one real photograph on the site, and the only place a face belongs: the
   hero is a machine whose face is the eyes, so a person appears here — beside
   the block that says who is behind the work. */
.me {
  display: block;
  width: clamp(96px, 11vw, 128px); height: auto;
  border-radius: 5px;
  border: 1px solid rgba(240, 168, 60, .18);
  /* sit it in the tube's palette rather than letting a bright studio blue
     punch a hole in the screen */
  filter: saturate(.72) contrast(1.04) brightness(.9);
}
.item__lead--me { align-items: center; }

/* ================================================== PANELS, NOT A CAROUSEL ==
   Juan's objection was exact: an icon labelled CAMERA promises a deep dive and
   delivered a fragment of a list. Clicking one should LAND you on that thing.

   So each item is a full-viewport panel and the page scroll-snaps between them.
   That gives the carousel feeling he wanted — one thing at a time, arriving on
   the item you chose — without any of the reasons carousels test badly: nothing
   auto-rotates, no slide is hidden, every panel stays in the DOM and in the
   accessibility tree, and the browser owns the scrolling physics, keyboard
   navigation and focus order, which is very hard to beat by hand.

   PROXIMITY, not mandatory. A panel whose content runs taller than the viewport
   must not trap someone mid-scroll; proximity snaps when you are close and
   gets out of the way when you are not. */
html { scroll-snap-type: y proximity; }

.item {
  min-height: 100svh;
  display: grid;
  align-content: center;
  scroll-snap-align: center;
  padding-block: 8vh;
  /* the divider between projects stops making sense once each one owns a
     screen — the edge of the viewport is the divider now */
  border-top: none;
}
.doc__head { min-height: 92svh; display: grid; align-content: center; }
.doc__foot { scroll-snap-align: center; }

/* ---------------------------------------------------------------- index --- */
.index {
  position: fixed; z-index: 44; right: max(2vw, 14px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono);
}
.index a {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 3px;
  text-decoration: none; color: var(--fg-dim);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .5; transition: opacity .3s ease, color .3s ease;
}
.index a b { font-weight: 400; color: var(--amber); opacity: .6; }
.index a span {
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .35s cubic-bezier(.2, .8, .25, 1);
}
.index:hover a, .index a:focus-visible { opacity: .9; }
.index:hover a span, .index a:focus-visible span { max-width: 130px; }
.index a.is-here { opacity: 1; }
.index a.is-here b { opacity: 1; }
.index a.is-here span { max-width: 130px; }

@media (max-width: 760px) {
  /* on a phone the index becomes a row of ticks along the bottom edge */
  .index {
    right: auto; left: 50%; top: auto; bottom: 8px;
    transform: translateX(-50%);
    flex-direction: row; gap: 6px;
  }
  .index a span { display: none; }
  .index a { padding: 6px; }
  .item { padding-block: 12vh 14vh; }
}