/* Work section, after Dennis Snellenberg's "Recent work" list: big project names on ruled rows,
   a square preview that trails the cursor (the previews slide inside it as you move between
   rows), and a round "View" button that follows a little faster. Phones get stacked cards. */
.work {
  --w-text: #f4f4ed;
  --w-muted: rgba(244, 244, 237, 0.5);
  --w-line: rgba(244, 244, 237, 0.225);
  --w-accent: #d2ff00;
  /* the footer's pill buttons read these */
  --f-line: var(--w-line);
  --f-accent: var(--w-accent);
  --f-on-accent: #282c20;
  --cp: 8vw;                     /* reference container padding at desktop (122.88px at 1536) */
  --sp: 21vh;                    /* reference section padding */
  --gap: clamp(1.5em, 4vw, 2.5em);

  position: relative;
  padding: calc(var(--sp) * 0.6) 0 var(--sp);
  background: #282c20;
  color: var(--w-text);
  font: 450 clamp(16px, 1.2vw, 19px) / 1.6 'Footer Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* The scroll section animates its own exit while still pinned (everything moves up 1:1 over its
   last viewport), so without this the pinned screen would then scroll away empty. Pulling the
   work list up by one viewport makes it follow the card up the screen like normal scrolling. */
.work[data-work] { margin-top: -115vh; padding-top: calc(var(--sp) * 0.3); z-index: 4; background: transparent; }
/* (pulled up a further 15vh so "Selected work" follows the text lines closely instead of after
   an empty band; at that offset it still starts below the card on every aspect checked) */
/* up to 768px wide the two text lines sit 0.35 of the screen lower (just under the card), so
   the list may only start right below them */
@media (max-width: 768px) { .work[data-work] { margin-top: -100vh; } }
.work__inner { max-width: 100em; margin: 0 auto; padding: 0 var(--cp); }
.work__label {
  margin: 0;
  padding: 0 0 var(--gap) var(--cp);
  font-size: 0.6em;
  font-weight: 450;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.work__label--more { padding-top: calc(var(--sp) * 0.6); }

.work__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--w-line); }

.work-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(var(--sp) / 3.5) 0 calc(var(--sp) / 3);
  border-top: 1px solid var(--w-line);
}
.work-row__main {
  width: 60%;                    /* reference 70/30; 60/40 gives the highlights room */
  padding-left: var(--cp);
  color: inherit;
  text-decoration: none;
}
.work-row__main::after { content: ''; position: absolute; inset: 0; }   /* the whole row is the link */
.work-row__name {
  display: block;
  padding: 0.1em 0;
  font-size: calc(clamp(3.25em, 7vw, 8em) * 0.75);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.01em;
}
.work-row__info {
  position: relative;
  z-index: 2;                    /* above the row-wide link, so it can be hovered and read */
  width: 40%;
  padding: 0.6em calc(var(--cp) * 0.5) 0 var(--gap);
}
.work-row__badge {
  margin: 0 0 0.5em;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--w-accent);
}
.work-row__line { margin: 0; }
.work-row__points {
  display: grid;
  gap: 0.35em;
  margin: 0.8em 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82em;
  line-height: 1.45;
  color: rgba(244, 244, 237, 0.72);
}
.work-row__points li { position: relative; padding-left: 1.1em; }
.work-row__points li::before {
  content: '';
  position: absolute; left: 0; top: 0.68em;
  width: 0.5em; height: 1px;
  background: var(--w-accent);
}
.work-row__links { position: relative; z-index: 2; display: flex; gap: 1.25em; margin: 0.9em 0 0; font-size: 0.85em; }
.work-row__links a { position: relative; color: var(--w-text); text-decoration: none; }
.work-row__links a::after {
  content: '';
  position: absolute; left: 0; bottom: -0.15em;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}
.work-row__links a:hover::after, .work-row__links a:focus-visible::after { transform: scaleX(1); }
.work-row__thumb { display: none; }

/* hover: the row fades back and its two halves part slightly (reference) */
.work-row__name, .work-row__info > :not(.work-row__links) {
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}
.work-row:hover .work-row__name { transform: translateX(calc(var(--cp) * -0.1)); opacity: 0.33; }
.work-row:hover .work-row__info > :not(.work-row__links) { transform: translateX(calc(var(--cp) * 0.1)); opacity: 0.33; }
/* reading the right-hand column: no fade, no shift */
.work-row:has(.work-row__info:hover) .work-row__name,
.work-row:has(.work-row__info:hover) .work-row__info > :not(.work-row__links) { transform: none; opacity: 1; }
.work-row__main:focus-visible { outline: none; }
.work-row:has(.work-row__main:focus-visible) .work-row__name { text-decoration: underline; text-decoration-thickness: 2px; }

/* smaller list for the rest */
.work__list--more .work-row { padding: 1.6em 0 1.7em; }
.work__list--more .work-row__name { font-size: clamp(1.55em, 2.3vw, 2.5em); }
.work__list--more .work-row__info { padding-top: 0; }
.work__list--more .work-row__links { margin-top: 0.5em; }

.work__all { display: flex; justify-content: center; padding-top: calc(var(--sp) * 0.5); }
.work__all .btn-pill .mag__text { gap: 0.5em; }

/* ---- floating preview + "View" button (desktop pointers only) ---- */
.work-float, .work-view {
  position: fixed;
  left: 0; top: 0;
  z-index: 9;
  pointer-events: none;
  will-change: transform;
}
.work-float {
  width: clamp(10em, 27.5vw, 25em);
  aspect-ratio: 1;
  overflow: hidden;
  clip-path: inset(50% 50% 50% 50%);
  transition: clip-path 0.4s cubic-bezier(0.36, 0, 0.66, 0);
  font-size: clamp(16px, 1.2vw, 19px);
}
.work-float.is-active { clip-path: inset(0 0 0 0); transition: clip-path 0.4s cubic-bezier(0.34, 1, 0.64, 1); }
.work-float__stack {
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
}
.work-float__tile { display: block; width: 100%; aspect-ratio: 1; background: center / cover no-repeat; }
.work-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.75em, 5.5vw, 5em);
  height: clamp(3.75em, 5.5vw, 5em);
  border-radius: 50%;
  background: var(--w-accent, #d2ff00);
  color: #282c20;
  font: 450 clamp(16px, 1.2vw, 19px) / 1 'Footer Sans', Arial, sans-serif;
  scale: 0;
  transition: scale 0.4s cubic-bezier(0.36, 0, 0.66, 0);
}
.work-view.is-active { scale: 1; transition: scale 0.4s cubic-bezier(0.34, 1, 0.64, 1); }
.work-view.is-pressed { scale: 1.25; }
@media (hover: none), (max-width: 720px) { .work-float, .work-view { display: none; } }

/* ---- phone: stacked cards with the preview inline ---- */
@media (max-width: 720px) {
  .work { --cp: clamp(1.25em, 4vw, 2.5em); --sp: 14vh; }
  .work__label { padding-left: 0; }
  .work-row { flex-direction: column; align-items: stretch; padding: 1.75em 0 2em; }
  .work-row__main { width: 100%; padding-left: 0; }
  .work-row__thumb { display: block; margin-bottom: 1.1em; }
  .work-row__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
  .work-row__name { font-size: 2.1em; }
  .work-row__info { width: 100%; padding: 0.6em 0 0; }
  .work-row:hover .work-row__name, .work-row:hover .work-row__info > :not(.work-row__links) { transform: none; opacity: 1; }
  .work__list--more .work-row__thumb { display: none; }
  .work__list--more .work-row__name { font-size: 1.55em; }
}
@media (prefers-reduced-motion: reduce) {
  .work-float, .work-float__stack, .work-view, .work-row__name, .work-row__info > * { transition: none !important; }
}

/* ---- experience + education (same section tokens as .work; no cursor preview) ---- */
.cv { padding-top: 0; }
.cv__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--w-line); }
.cv-row {
  display: flex;
  align-items: flex-start;
  padding: calc(var(--sp) / 4) 0 calc(var(--sp) / 3.5);
  border-top: 1px solid var(--w-line);
}
.cv-row__main { width: 60%; padding-left: var(--cp); }
.cv-row__when {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.9em;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.cv-row__now {
  position: relative;
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--w-accent);
}
.cv-row__now::after {             /* "currently here": a slow ring */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--w-accent);
  animation: cv-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes cv-ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.cv-row__name {
  margin: 0;
  font-size: calc(clamp(3.25em, 7vw, 8em) * 0.5);
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cv-row__info { width: 40%; padding: 1.65em calc(var(--cp) * 0.5) 0 var(--gap); }
.cv-row__role { margin: 0; }
.cv-row--edu .cv-row__name { font-size: calc(clamp(3.25em, 7vw, 8em) * 0.4); }

@media (max-width: 720px) {
  .cv-row { flex-direction: column; padding: 1.75em 0 2em; }
  .cv-row__main, .cv-row__info { width: 100%; padding-left: 0; padding-right: 0; }
  .cv-row__info { padding-top: 0.9em; }
  .cv-row__name { font-size: 2.1em; }
  .cv-row--edu .cv-row__name { font-size: 1.6em; }
}
@media (prefers-reduced-motion: reduce) { .cv-row__now::after { animation: none; } }

/* ---- phones: the five main projects become swipe cards (scroll-snap), with a counter ---- */
.work__swipe { display: none; }
@media (max-width: 720px) {
  .work__list:not(.work__list--more) {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * var(--cp));
    padding: 0 var(--cp) 4px;
    border-bottom: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--cp);
    scrollbar-width: none;
  }
  .work__list:not(.work__list--more)::-webkit-scrollbar { display: none; }
  .work__list:not(.work__list--more) .work-row {
    flex: 0 0 84%;
    padding: 0 0 1.25em;
    border: 1px solid var(--w-line);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(244, 244, 237, 0.035);
    scroll-snap-align: start;
  }
  .work__list:not(.work__list--more) .work-row__thumb { margin-bottom: 1em; }
  .work__list:not(.work__list--more) .work-row__thumb img { aspect-ratio: 5 / 4; }
  .work__list:not(.work__list--more) .work-row__name { padding: 0 18px; font-size: 1.9em; }
  .work__list:not(.work__list--more) .work-row__info { padding: 0.5em 18px 0; }
  .work__label:first-child { padding-bottom: 1.1em; }
  .work__swipe {
    display: flex;
    align-items: center;
    gap: 1em;
    padding-top: 1.1em;
    font-size: 0.75em;
    letter-spacing: 0.02em;
    color: var(--w-muted);
  }
  .work__count b { font-weight: 450; color: var(--w-text); }
  .work__progress { position: relative; flex: 1; height: 1px; background: var(--w-line); }
  .work__progress i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 20%; background: var(--w-accent); transition: width 0.25s; }
  .work__hint { text-transform: uppercase; }
  .work__hint::after { content: ' →'; display: inline-block; animation: work-swipe 1.4s ease-in-out infinite; }
  .work__label--more { padding-top: 12vh; }
}
@keyframes work-swipe { 50% { transform: translateX(4px); } }

/* ---- wins: two photo cards (hackathon firsts) and a slim row for the best-pitch award ---- */
.wins { padding-top: 0; }
.wins__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gap) * 1.2);
  padding: 0 0 calc(var(--sp) / 3);
  border-top: 1px solid var(--w-line);
  padding-top: calc(var(--sp) / 4);
}
.win { min-width: 0; }
.win__media {
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.4em;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(244, 244, 237, 0.05);
}
.win__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.win__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: none; }
.win__media--pair a { display: block; overflow: hidden; border-radius: 6px; min-height: 0; }
@media (hover: hover) { .win__media:hover img, .win__media--pair a:hover img { scale: 1.035; } }
.win__place {
  margin: 0 0 0.5em;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--w-accent);
}
.win__name { margin: 0 0 0.35em; font-size: calc(clamp(3.25em, 7vw, 8em) * 0.36); font-weight: 450; line-height: 1.1; letter-spacing: -0.01em; }
.win__meta, .win__stats { margin: 0; color: rgba(244, 244, 237, 0.72); font-size: 0.9em; }
.win__stats { margin-top: 0.15em; }
.win__project { margin: 0.9em 0 0; font-size: 0.85em; }
.win__project a { color: var(--w-text); }
.win__credit { margin: 0.6em 0 0; font-size: 0.65em; color: var(--w-muted); }
.wins__more { margin-top: 0; }
.wins__more .cv-row__name { font-size: calc(clamp(3.25em, 7vw, 8em) * 0.4); }
@media (max-width: 720px) {
  .wins__grid { grid-template-columns: 1fr; gap: 2.4em; padding-top: 1.5em; }
  .win__name { font-size: 1.6em; }
  .wins__more .cv-row__name { font-size: 1.6em; }
}

/* ---- what I work with ---- */
.skills { padding-top: 0; }
.skills__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  padding: calc(var(--sp) / 4) 0 calc(var(--sp) / 3) var(--cp);
  border-top: 1px solid var(--w-line);
  border-bottom: 1px solid var(--w-line);
}
.skills__head {
  margin: 0 0 1.1em;
  font-size: 0.72em;
  font-weight: 450;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--w-accent);
}
.skills__list { display: grid; gap: 0.45em; margin: 0; padding: 0; list-style: none; font-size: 0.95em; line-height: 1.35; color: rgba(244, 244, 237, 0.85); }
@media (max-width: 991px) { .skills__grid { grid-template-columns: repeat(3, 1fr); row-gap: 2em; } }
@media (max-width: 720px) { .skills__grid { grid-template-columns: 1fr 1fr; padding-left: 0; row-gap: 1.8em; } .skills__list { font-size: 0.9em; } }