/* ==========================================================
   TINA FERNÁNDEZ — INDEX
   STYLE.CSS
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

  --black: #111;
  --white: #fff;
  --grey: #777;
  --background: #f7f7f5;

  --about-grey: #aaa9a3;

  --padding: clamp(18px, 1.65vw, 28px);

  --border:
    1px solid
    rgba(0, 0, 0, .15);

  --ease:
    cubic-bezier(.16, 1, .3, 1);

  --hero-reveal-top: 100%;
  --hero-geist-blur: 0px;

}


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {

  box-sizing:
    border-box;

}


html {

  width:
    100%;

  max-width:
    100%;

  scroll-behavior:
    auto;

  background:
    var(--background);

  color-scheme:
    only light;

}


html,
body {

  margin:
    0;

  padding:
    0;

  width:
    100%;

  max-width:
    100%;

}


body,
h1,
h2,
h3,
p {

  margin:
    0;

}


body {

  background:
    var(--background);

  color:
    var(--black);

  font-family:
    "Geist",
    Arial,
    sans-serif;

  overflow-x:
    hidden;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


button {

  font-family:
    inherit;

}


img,
video {

  display:
    block;

  max-width:
    100%;

  user-select:
    none;

  -webkit-user-drag:
    none;

}


::selection {

  background:
    var(--black);

  color:
    var(--white);

}


main,
section,
article,
div,
header,
footer,
nav {

  min-width:
    0;

}


.blur-on-scroll {

  will-change:
    filter,
    opacity,
    transform;

}


/* ==========================================================
   MAIN
========================================================== */

main {

  position:
    relative;

  z-index:
    10;

  width:
    100%;

  max-width:
    100%;

  margin-bottom:
    100svh;

  background:
    var(--background);

}


/* ==========================================================
   CURSOR
========================================================== */

.cursor {

  position:
    fixed;

  top:
    0;

  left:
    0;

  z-index:
    9999;

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    var(--black);

  pointer-events:
    none;

  transform:
    translate(-50%, -50%);

  transition:
    width .3s var(--ease),
    height .3s var(--ease),
    opacity .2s ease;

}


.cursor.active {

  width:
    54px;

  height:
    54px;

  opacity:
    .1;

}


/* ==========================================================
   PROJECT HOVER
========================================================== */

.project-hover-float {

  position:
    fixed;

  left:
    0;

  top:
    0;

  z-index:
    10000;

  pointer-events:
    none;

  opacity:
    0;

  transform:
    translate(18px, 18px);

  color:
    #fff;

  mix-blend-mode:
    difference;

  transition:
    opacity .16s ease;

}


.project-hover-float.is-visible {

  opacity:
    1;

}


.project-hover-name {

  display:
    block;

  margin-bottom:
    4px;

}


.project-hover-disciplines {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    1px;

}


/* ==========================================================
   HERO
========================================================== */

.hero {

  position:
    relative;

  width:
    100%;

  max-width:
    100%;

  height:
    138vh;

  background:
    var(--background);

}


.hero-sticky {

  position:
    sticky;

  top:
    0;

  width:
    100%;

  height:
    100vh;

  padding:
    108px
    var(--padding)
    22px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  overflow:
    visible;

}


.hero-top,
.hero-bottom {

  position:
    relative;

  z-index:
    20;

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;

  text-transform:
    uppercase;

}


.hero-top > *,
.hero-bottom > * {

  min-width:
    0;

}


.hero-meta {

  opacity:
    0;

  will-change:
    transform,
    opacity,
    filter;

}


.hero-meta-left {

  transform:
    translateY(15px);

  filter:
    blur(5px);

  animation:
    heroMetaEntrance
    1.05s
    .46s
    var(--ease)
    forwards;

}


.hero-meta-right {

  margin-left:
    auto;

  text-align:
    right;

  transform:
    translateY(15px);

  filter:
    blur(5px);

  animation:
    heroMetaEntrance
    1.05s
    .58s
    var(--ease)
    forwards;

}


.hero-discipline {

  transform:
    translateY(15px);

  filter:
    blur(5px);

  animation:
    heroMetaEntrance
    1.05s
    .70s
    var(--ease)
    forwards;

}


@keyframes heroMetaEntrance {

  from {

    opacity:
      0;

    transform:
      translateY(15px);

    filter:
      blur(5px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

    filter:
      blur(0);

  }

}


/* ==========================================================
   HERO WORK LINK
========================================================== */

.hero-work-link {

  position:
    relative;

  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding-bottom:
    3px;

  border-bottom:
    1px solid;

  transform-origin:
    100% 50%;

}


.hero-work-arrow {

  display:
    inline-block;

  transition:
    transform .5s var(--ease);

}


.hero-work-link:hover
.hero-work-arrow {

  transform:
    translate(5px, 5px)
    rotate(-8deg);

}

@media (hover: hover) and (pointer: fine) {
  .hero-work-link {
    transform-origin: left center;
    transition: transform .55s var(--ease), letter-spacing .55s var(--ease);
  }

  .hero-work-link:hover {
    transform: translate3d(10px, -4px, 0) rotate(-2.4deg);
    letter-spacing: -.045em;
  }
}


.hero-work-entrance {

  opacity:
    0;

  transform:
    translate3d(
      34px,
      18px,
      0
    )
    rotate(7deg)
    scale(.88);

  filter:
    blur(7px);

  animation:
    workLinkEntrance
    1.3s
    .78s
    var(--ease)
    forwards;

}


@keyframes workLinkEntrance {

  0% {

    opacity:
      0;

    transform:
      translate3d(
        34px,
        18px,
        0
      )
      rotate(7deg)
      scale(.88);

    filter:
      blur(7px);

  }


  45% {

    opacity:
      1;

    transform:
      translate3d(
        -8px,
        -3px,
        0
      )
      rotate(-2.5deg)
      scale(1.055);

    filter:
      blur(0);

  }


  70% {

    transform:
      translate3d(
        3px,
        1px,
        0
      )
      rotate(.7deg)
      scale(.985);

  }


  100% {

    opacity:
      1;

    transform:
      translate3d(0, 0, 0)
      rotate(0)
      scale(1);

    filter:
      blur(0);

  }

}


/* ==========================================================
   HERO TYPOGRAPHY LAYOUT
========================================================== */

.hero-transform {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  overflow:
    visible;

}


.hero-layer {

  width:
    100%;

  overflow:
    visible;

  will-change:
    clip-path,
    filter,
    opacity;

}


.hero-layer h1 {

  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  text-transform:
    uppercase;

  overflow:
    visible;

}


.hero-layer-normal {

  position:
    relative;

  z-index:
    1;

  opacity:
    1;

  filter:
    blur(
      var(--hero-geist-blur)
    );

  clip-path:
    inset(
      -100vh
      -100vw
      calc(
        100% -
        var(--hero-reveal-top)
      )
      -100vw
    );

}


.hero-transform.is-complete
.hero-layer-normal {

  opacity:
    0;

  visibility:
    hidden;

  filter:
    none;

}


.hero-layer-comic {

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;

  clip-path:
    inset(
      var(--hero-reveal-top)
      -100vw
      -100vh
      -100vw
    );

  overflow:
    visible;

}


.hero-row {

  position:
    relative;

  display:
    flex;

  width:
    100%;

  overflow:
    visible;

}


.graphic-row {

  width:
    75vw;

  max-width:
    calc(
      100vw -
      var(--padding) * 2
    );

  align-items:
    baseline;

}


.graphic-word,
.graphic-dash,
.design-word,
.passion-word {

  display:
    block;

  overflow:
    visible;

}


.graphic-dash {

  margin-left:
    .08em;

}


.design-row {

  width:
    100%;

  justify-content:
    flex-end;

  align-items:
    stretch;

  padding-right:
    clamp(
      72px,
      8.5vw,
      150px
    );

}


.is-my-block {

  position:
    absolute;

  right:
    0;

  top:
    -.01em;

  bottom:
    -.08em;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  align-items:
    flex-end;

  overflow:
    visible;

}


.is-word,
.my-word {

  display:
    block;

  overflow:
    visible;

  white-space:
    nowrap;

}


.my-word {

  padding-bottom:
    .06em;

}


.passion-row {

  width:
    75vw;

  max-width:
    calc(
      100vw -
      var(--padding) * 2
    );

  margin-top:
    .12em;

  padding-bottom:
    .12em;

  overflow:
    visible;

}


.passion-word {

  padding-bottom:
    .05em;

}


/* ==========================================================
   HERO REVEAL LINE
========================================================== */

.hero-transform-line {

  position:
    absolute;

  left:
    0;

  top:
    var(--hero-reveal-top);

  z-index:
    10;

  width:
    100%;

  height:
    1px;

  background:
    var(--black);

  pointer-events:
    none;

  transform:
    translateY(-.5px);

  opacity:
    0;

}


.hero-transform.is-transforming
.hero-transform-line {

  opacity:
    1;

}


.hero-transform.is-complete
.hero-transform-line {

  opacity:
    0;

}


/* ==========================================================
   HERO COMIC GRADIENT
========================================================== */

.hero-layer-comic
.graphic-word,

.hero-layer-comic
.graphic-dash,

.hero-layer-comic
.is-word,

.hero-layer-comic
.my-word,

.hero-layer-comic
.passion-word {

  background:
    none;

  color:
    var(--black);

  -webkit-text-fill-color:
    var(--black);

  animation:
    none;

}


.hero-layer-comic
.design-word {

  display:
    inline-block;

  padding:
    .08em
    .035em
    .10em;

  margin:
    -.08em
    -.035em
    -.10em;

  overflow:
    visible !important;

  background:
    linear-gradient(
      90deg,
      #ff2da8 0%,
      #ff4c8b 12%,
      #b750d5 28%,
      #7557dd 42%,
      #3485dc 56%,
      #23b8c4 68%,
      #51c56a 80%,
      #f2c94c 91%,
      #ff2da8 100%
    );

  background-size:
    230% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  -webkit-text-fill-color:
    transparent;

  animation:
    heroRainbowFlow
    7s
    linear
    infinite;

}


@keyframes heroRainbowFlow {

  from {

    background-position:
      0% 50%;

  }

  to {

    background-position:
      230% 50%;

  }

}


/* ==========================================================
   HERO GIFS
========================================================== */

.hero-gif-layer {

  position:
    absolute;

  inset:
    0;

  z-index:
    8;

  pointer-events:
    none;

  overflow:
    visible;

  clip-path:
    inset(
      var(--hero-reveal-top)
      -100vw
      -100vh
      -100vw
    );

}


.hero-gif {

  position:
    absolute;

  display:
    block;

  height:
    auto;

  max-width:
    none;

  object-fit:
    contain;

  pointer-events:
    none;

}


.hero-layer-comic
.passion-row {

  transform:
    translateX(
      clamp(
        155px,
        17vw,
        300px
      )
    );

}


.hero-gif-figma {

  top:
    13%;

  right:
    clamp(
      8px,
      2vw,
      48px
    );

  width:
    clamp(
      285px,
      27vw,
      475px
    );

  transform:
    translateY(-50%)
    rotate(1deg);

}


.hero-gif-cats {

  top:
    38%;

  left:
    clamp(
      225px,
      24vw,
      485px
    );

  width:
    clamp(
      215px,
      60vw,
      370px
    );

  transform:
    translateY(-50%)
    rotate(-2deg);

}


.hero-gif-fucking {

  left:
    clamp(
      4px,
      1.5vw,
      28px
    );

  bottom:
    2%;

  width:
    clamp(
      245px,
      90vw,
      420px
    );

  transform:
    translateY(10%)
    rotate(-7deg);

}


/* ==========================================================
   WORK
========================================================== */

.work-section {

  position:
    relative;

  z-index:
    4;

  width:
    100%;

  height:
    100vh;

  min-height:
    100vh;

  background:
    var(--background);

  overflow:
    hidden;

}


.work-stage {

  position:
    relative;

  width:
    100%;

  height:
    100vh;

  overflow:
    hidden;

  cursor:
    grab;

  user-select:
    none;

  touch-action:
    pan-y;

  transition:
    opacity .5s ease,
    filter .55s var(--ease),
    transform .7s var(--ease);

}


.work-stage.is-dragging {

  cursor:
    grabbing;

}


.work-track {

  display:
    flex;

  align-items:
    stretch;

  width:
    max-content;

  height:
    100vh;

  gap:
    0;

  will-change:
    transform;

}


/* ==========================================================
   PROJECT CARDS
========================================================== */

.project-card {

  position:
    relative;

  width:
    50vw;

  height:
    100vh;

  flex:
    0 0
    50vw;

  display:
    block;

  overflow:
    hidden;

  isolation:
    isolate;

  cursor:
    none;

  user-select:
    none;

}


.project-visual-grid {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    grid;

  gap:
    0;

  overflow:
    hidden;

}


.project-media {

  position:
    relative;

  min-width:
    0;

  min-height:
    0;

  overflow:
    hidden;

  background:
    #ddd;

}


.project-media img,
.project-media video {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  pointer-events:
    none;

  transform:
    scale(1.003);

  transition:
    transform .75s var(--ease),
    filter .55s var(--ease);

}


.project-card:hover
.project-media img,

.project-card:hover
.project-media video {

  transform:
    scale(1.055);

  filter:
    contrast(1.035)
    saturate(1.04);

}


.project-info {

  display:
    none;

}


/* ==========================================================
   PROJECT LAYOUTS
========================================================== */

.project-layout-single
.project-visual-grid {

  grid-template-columns:
    1fr;

  grid-template-rows:
    1fr;

}


.project-layout-rows
.project-visual-grid {

  grid-template-columns:
    1fr;

  grid-template-rows:
    1fr
    1fr;

}


.project-layout-columns
.project-visual-grid {

  grid-template-columns:
    1fr
    1fr;

  grid-template-rows:
    1fr;

}


.project-layout-chulapa
.project-visual-grid {

  grid-template-columns:
    1fr;

  grid-template-rows:
    1fr
    2fr;

}


.chulapa-video {

  grid-column:
    1;

  grid-row:
    1;

}


.chulapa-image {

  grid-column:
    1;

  grid-row:
    2;

}


.project-layout-especias
.project-visual-grid {

  grid-template-columns:
    1fr
    1fr;

  grid-template-rows:
    1fr
    1fr;

}


.project-layout-especias
.especias-video {

  grid-column:
    1 / 3;

  grid-row:
    1;

}


.project-layout-especias
.especias-image-left {

  grid-column:
    1;

  grid-row:
    2;

}


.project-layout-especias
.especias-image-right {

  grid-column:
    2;

  grid-row:
    2;

}


.project-layout-grandma
.project-visual-grid {

  grid-template-columns:
    1fr;

  grid-template-rows:
    1fr
    1fr;

}


.grandma-media-top {

  grid-column:
    1;

  grid-row:
    1;

}


.grandma-media-bottom {

  grid-column:
    1;

  grid-row:
    2;

}


.project-action {

  display:
    none;

}


/* ==========================================================
   LIST TRANSITION
========================================================== */

.work-section.is-list-view
.work-stage {

  opacity:
    0;

  filter:
    blur(14px);

  transform:
    scale(.985);

  pointer-events:
    none;

}


/* ==========================================================
   WORK LIST
========================================================== */

.work-list-view {

  position:
    absolute;

  inset:
    0;

  z-index:
    35;

  width:
    100%;

  height:
    100%;

  padding:
    clamp(
      105px,
      14vh,
      150px
    )
    0
    90px;

  background:
    var(--background);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(18px);

  filter:
    blur(8px);

  transition:
    opacity .42s ease,
    transform .62s var(--ease),
    filter .55s ease,
    visibility 0s linear .62s;

}


.work-section.is-list-view
.work-list-view {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0);

  filter:
    blur(0);

  transition:
    opacity .48s .08s ease,
    transform .68s .04s var(--ease),
    filter .55s .04s ease,
    visibility 0s;

}


.work-list-table {

  width:
    100%;

}


.work-list-head,
.work-list-row {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(140px, 1.35fr)
    minmax(110px, .9fr)
    minmax(210px, 1.65fr)
    minmax(150px, 1.15fr)
    52px
    32px;

  align-items:
    center;

  column-gap:
    clamp(
      8px,
      .9vw,
      14px
    );

  padding-left:
    var(--padding);

  padding-right:
    var(--padding);

}


.work-list-head {

  min-height:
    28px;

  color:
    var(--grey);

  border-bottom:
    var(--border);

}


.work-list-row {

  position:
    relative;

  min-height:
    49px;

  border-bottom:
    var(--border);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    color .25s ease;

}


.work-list-row::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  background:
    linear-gradient(
      105deg,
      #ff3cac 0%,
      #784ba0 22%,
      #2b86c5 45%,
      #43e97b 69%,
      #fee140 100%
    );

  opacity:
    0;

  transform:
    scaleX(.99);

  transform-origin:
    center;

  transition:
    opacity .3s ease,
    transform .5s var(--ease);

}


.work-list-row:hover {

  color:
    var(--white);

}


.work-list-row:hover::before {

  opacity:
    1;

  transform:
    scaleX(1);

}


.work-list-arrow {

  justify-self:
    end;

  transition:
    transform .42s var(--ease);

}


.work-list-row:hover
.work-list-arrow {

  transform:
    translateX(5px);

}


/* ==========================================================
   LIST PREVIEW
========================================================== */

.work-list-preview {

  position:
    fixed;

  left:
    0;

  top:
    0;

  z-index:
    1100;

  width:
    clamp(
      190px,
      17vw,
      280px
    );

  aspect-ratio:
    4 / 3;

  opacity:
    0;

  pointer-events:
    none;

  overflow:
    hidden;

  background:
    #ddd;

  transform:
    translate3d(
      var(--preview-x, 0),
      var(--preview-y, 0),
      0
    )
    rotate(-2deg)
    scale(.94);

  box-shadow:
    0
    16px
    42px
    rgba(0, 0, 0, .14);

}


.work-list-preview.is-visible {

  opacity:
    1;

  transform:
    translate3d(
      var(--preview-x, 0),
      var(--preview-y, 0),
      0
    )
    rotate(-2deg)
    scale(1);

}


.work-list-preview img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


/* ==========================================================
   TOGGLE
========================================================== */

.work-view-toggle {

  position:
    absolute;

  left:
    50%;

  bottom:
    22px;

  z-index:
    90;

  width:
    190px;

  height:
    43px;

  padding:
    4px;

  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  border:
    1px solid
    rgba(17, 17, 17, .15);

  border-radius:
    999px;

  background:
    rgba(247, 247, 245, .58);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.15);

  backdrop-filter:
    blur(18px)
    saturate(1.15);

  box-shadow:
    0
    8px
    30px
    rgba(0, 0, 0, .08);

  transform:
    translateX(-50%);

  overflow:
    hidden;

}


.work-view-toggle::before {

  content:
    "";

  position:
    absolute;

  left:
    4px;

  top:
    4px;

  width:
    calc(
      50% -
      4px
    );

  height:
    calc(
      100% -
      8px
    );

  border-radius:
    999px;

  background:
    var(--black);

  transition:
    transform .55s var(--ease);

}


.work-section.is-list-view
.work-view-toggle::before {

  transform:
    translateX(100%);

}


.work-view-toggle-button {

  position:
    relative;

  z-index:
    1;

  appearance:
    none;

  border:
    0;

  background:
    transparent;

  color:
    var(--black);

  cursor:
    pointer;

}


.work-view-toggle-button.is-active {

  color:
    var(--white);

}


/* ==========================================================
   ABOUT DESKTOP
========================================================== */

.about-section {

  position:
    relative;

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items:
    stretch;

  border-top:
    var(--border);

  background:
    var(--background);

}


.about-media-column {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

}


.about-media {

  position:
    sticky;

  top:
    0;

  width:
    100%;

  height:
    100vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

}


.head-gif {

  width:
    94%;

  height:
    94vh;

  object-fit:
    contain;

}


.about-copy {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  padding:
    0
    var(--padding)
    48px;

  border-left:
    var(--border);

}


/* ==========================================================
   ABOUT INTRO DESKTOP
========================================================== */

.about-scene {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


.about-scene-intro {

  min-height:
    155vh;

  overflow:
    visible;

}


.about-heading-reveal {

  position:
    sticky;

  top:
    24vh;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  overflow:
    visible;

}


.about-reveal-line {

  position:
    relative;

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    flex-start;

  flex-wrap:
    nowrap;

  gap:
    .2em;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  padding:
    .05em
    .06em
    .08em
    0;

  margin:
    0;

  color:
    var(--about-grey);

  white-space:
    nowrap;

  overflow:
    visible;

  --line-progress:
    0;

}


.about-reveal-line
+
.about-reveal-line {

  margin-top:
    .01em;

}


.about-word {

  position:
    relative;

  display:
    inline-block;

  flex:
    0
    0
    auto;

  white-space:
    nowrap;

}


.about-word-comic {

  padding:
    .08em
    .035em
    .1em;

  margin:
    -.08em
    -.035em
    -.1em;

  overflow:
    visible;

}


/* ==========================================================
   ABOUT REVEAL OVERLAY
========================================================== */

.about-reveal-overlay {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    flex-start;

  flex-wrap:
    nowrap;

  gap:
    .2em;

  padding:
    .05em
    .06em
    .08em
    0;

  white-space:
    nowrap;

  pointer-events:
    none;

  overflow:
    visible;

  clip-path:
    inset(
      -25%
      calc(
        100% -
        var(--line-progress) * 100%
      )
      -25%
      0
    );

  -webkit-clip-path:
    inset(
      -25%
      calc(
        100% -
        var(--line-progress) * 100%
      )
      -25%
      0
    );

  will-change:
    clip-path;

}


.about-reveal-overlay
.about-word {

  color:
    var(--black);

}


.about-reveal-overlay
.about-word-comic {

  color:
    transparent;

  background:
    linear-gradient(
      90deg,
      #ff3cac 0%,
      #c743b4 18%,
      #8356bc 38%,
      #4d73c8 58%,
      #2c98c5 76%,
      #72b86f 100%
    );

  background-size:
    220% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  animation:
    aboutGradientFlow
    8s
    linear
    infinite;

}


@keyframes aboutGradientFlow {

  from {

    background-position:
      0% 50%;

  }

  to {

    background-position:
      220% 50%;

  }

}


/* ==========================================================
   ABOUT STORY
========================================================== */

.about-scene-story {

  min-height:
    auto;

  padding:
    5vh
    0
    7vh;

}


.about-story {

  width:
    100%;

}


.about-story-block {

  width:
    100%;

  min-width:
    0;

  padding:
    24px
    0;

  display:
    grid;

  grid-template-columns:
    44px
    minmax(0, 1fr);

  gap:
    14px;

  align-items:
    start;

  border-top:
    var(--border);

}


.about-story-block
+
.about-story-block {

  margin-top:
    4vh;

}


.about-number {

  padding-top:
    .45em;

  color:
    var(--grey);

}


.about-medium-copy {

  width:
    100%;

  max-width:
    680px;

  min-width:
    0;

  overflow-wrap:
    break-word;

}


.about-keyword {

  display:
    inline;

  background:
    linear-gradient(
      90deg,
      #ff3cac,
      #784ba0,
      #2b86c5,
      #43e97b,
      #fee140,
      #ff3cac
    );

  background-size:
    300% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  -webkit-text-fill-color:
    transparent;

  animation:
    rainbowFlow
    3.5s
    linear
    infinite;

  font-family: var(--font-sans);
  transition: font-family .2s ease, transform .35s var(--ease);

}

.about-keyword:hover {
  display: inline-block;
  font-family: var(--font-comic);
  animation: rainbowFlow 1.2s linear infinite, keywordComicBounce .65s var(--ease) both;
}

.hero-layer-comic,
.hero-layer-comic h1,
.hero-layer-comic .graphic-word,
.hero-layer-comic .design-word,
.hero-layer-comic .passion-word,
.hero-layer-comic .is-word,
.hero-layer-comic .my-word {
  font-family: var(--font-comic) !important;
}

@media (min-width: 801px) {
  .about-panel-label {
    position: absolute;
    top: var(--padding);
    left: var(--padding);
    margin: 0;
    color: var(--grey);
    font-size: var(--type-meta);
    line-height: var(--leading-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
  }

  .about-heading-reveal::after {
    content: "Things you should know / scroll ↓";
    position: absolute;
    top: 0;
    right: 0;
    color: var(--grey);
    font-size: var(--type-meta);
    line-height: var(--leading-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
  }
}

@keyframes keywordComicBounce {
  0% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-5deg) scale(1.13); }
  68% { transform: rotate(3deg) scale(.98); }
  100% { transform: rotate(-1deg) scale(1.06); }
}

@media (min-width: 801px) {
  .about-heading-reveal {
    top: 50vh;
    transform: translateY(-50%);
  }

  .about-heading-reveal::before {
    content: "— TF / 01";
    display: block;
    margin-bottom: clamp(18px, 3vh, 34px);
    color: var(--grey);
    font-size: var(--type-meta);
    line-height: var(--leading-meta);
    letter-spacing: var(--tracking-meta);
  }

  .about-scene-working {
    height: 100vh;
    min-height: 720px;
    padding: var(--padding) 0;
  }

  .about-work-editorial {
    height: 100%;
    padding-top: 18px;
    display: grid;
    grid-template-rows: auto minmax(0, 1.45fr) minmax(0, .72fr);
  }

  .about-work-heading {
    padding-bottom: 18px;
  }

  .work-scorecard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .work-stat,
  .work-stat:nth-child(odd),
  .work-stat:nth-child(even) {
    min-height: 0;
    padding: 14px;
    border-right: var(--border);
    transition: transform .5s var(--ease), background .5s var(--ease);
  }

  .work-stat:first-child { padding-left: 0; }
  .work-stat:last-child { padding-right: 0; border-right: 0; }
  .work-stat-label { margin-bottom: 12px; }
  .work-stat-caption { padding-top: 10px; }

  .soft-skill {
    min-height: 0;
    padding-top: 12px;
    transition: transform .5s var(--ease), background .5s var(--ease);
  }

  .soft-skill-title { margin-bottom: 14px; }

  .work-stat:hover,
  .soft-skill:hover {
    z-index: 3;
    transform: translateY(-7px);
    background: var(--background);
  }
}


@keyframes rainbowFlow {

  from {

    background-position:
      0% 50%;

  }

  to {

    background-position:
      300% 50%;

  }

}


/* ==========================================================
   WORKING WITH ME
========================================================== */

.about-scene-working {

  padding:
    8vh
    0;

}


.about-work-editorial {

  width:
    100%;

  padding:
    26px
    0
    0;

  border-top:
    var(--border);

}


.about-work-heading {

  width:
    100%;

  padding:
    0
    0
    30px;

}


.about-work-kicker {

  display:
    none;

}


.work-scorecard {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  border-top:
    var(--border);

}


.work-stat {

  min-width:
    0;

  min-height:
    235px;

  padding:
    14px;

  display:
    flex;

  flex-direction:
    column;

  border-bottom:
    var(--border);

  overflow:
    visible;

}


.work-stat:nth-child(odd) {

  padding-left:
    0;

  border-right:
    var(--border);

}


.work-stat:nth-child(even) {

  padding-right:
    0;

}


.work-stat-top {

  display:
    block;

  margin:
    0;

}


.work-stat-index {

  display:
    none;

}


.work-stat-label {

  margin:
    0
    0
    30px;

}


.work-stat-main {

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

}


.work-stat-value {

  display:
    flex;

  align-items:
    flex-start;

  white-space:
    nowrap;

  overflow:
    visible;

}


.counter-number {

  display:
    inline-block;

  min-width:
    1.35em;

  padding:
    .08em
    .12em
    .10em
    .06em;

  margin:
    -.08em
    -.12em
    -.10em
    -.06em;

  overflow:
    visible;

  font-variant-numeric:
    tabular-nums;

  background:
    linear-gradient(
      90deg,
      #ff2da8 0%,
      #ff4c8b 12%,
      #b750d5 28%,
      #7557dd 42%,
      #3485dc 56%,
      #23b8c4 68%,
      #51c56a 80%,
      #f2c94c 91%,
      #ff2da8 100%
    );

  background-size:
    230% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  -webkit-text-fill-color:
    transparent;

  animation:
    counterRainbowFlow
    7s
    linear
    infinite;

}


@keyframes counterRainbowFlow {

  from {

    background-position:
      0% 50%;

  }

  to {

    background-position:
      230% 50%;

  }

}


.work-stat-denominator {

  margin:
    4px
    0
    0
    8px;

  color:
    var(--grey);

}


.work-stat-caption {

  width:
    100%;

  max-width:
    210px;

  margin:
    auto
    0
    0;

  padding-top:
    24px;

}


.work-stat-meter {

  display:
    none;

}


/* ==========================================================
   SOFT SKILLS
========================================================== */

.soft-skills-section {

  width:
    100%;

}


.soft-skills-heading {

  display:
    none;

}


.soft-skills-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

}


.soft-skill {

  min-width:
    0;

  min-height:
    165px;

  padding:
    14px;

  border-right:
    var(--border);

  border-bottom:
    var(--border);

}


.soft-skill:first-child {

  padding-left:
    0;

}


.soft-skill:last-child {

  padding-right:
    0;

  border-right:
    0;

}


.soft-skill-title {

  margin-bottom:
    38px;

}


/* ==========================================================
   ABOUT 03
========================================================== */

.about-story-small {

  margin:
    0;

  padding:
    30px
    0
    32px;

  border-top:
    0;

}


.about-small-copy {

  width:
    100%;

  max-width:
    610px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap:
    28px;

  color:
    var(--grey);

}


.about-links {

  margin-left:
    58px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    24px
    34px;

}


.text-link {

  position:
    relative;

  display:
    inline-flex;

  width:
    fit-content;

  padding-bottom:
    5px;

  border-bottom:
    0;

  transform-origin:
    left center;

  transition:
    transform .55s var(--ease),
    letter-spacing .55s var(--ease);

}

.text-link::before,
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: currentColor;
}

.text-link::before {
  height: 1px;
  opacity: .32;
}

.text-link::after {
  height: 2px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .55s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover {
    transform: translate3d(7px, -2px, 0) rotate(-1deg);
    letter-spacing: -.035em;
  }

  .text-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

}


.about-end-anchor {

  width:
    100%;

  height:
    15vh;

  min-height:
    110px;

}


/* ==========================================================
   ABOUT — RIGHT-COLUMN STICKY CARDS
========================================================== */

.about-panel-nav {
  display: none;
}

@media (min-width: 801px) {
  .about-copy {
    padding: 0;
    overflow: visible;
  }

  .about-panel {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: 100vh;
    padding: var(--padding);
    background: var(--background);
    filter: blur(var(--about-panel-blur, 0px));
    opacity: var(--about-panel-opacity, 1);
    will-change: filter, opacity;
  }

  .about-scene-intro.about-panel {
    z-index: 1;
    min-height: 112vh;
    padding-top: 0;
    padding-bottom: 0;
  }

  .about-scene-story.about-panel {
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: var(--padding);
    padding-bottom: var(--padding);
    box-shadow: 0 -20px 42px rgba(17,17,17,.10);
  }

  .about-copy .about-scene-working {
    height: auto;
    min-height: 200vh;
    padding: 0;
  }

  .about-work-editorial.about-panel {
    z-index: 3;
    height: 100vh;
    padding: var(--padding);
    border-top: 0;
    box-shadow: 0 -20px 42px rgba(17,17,17,.10);
  }

  .about-final-panel {
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 -20px 42px rgba(17,17,17,.10);
  }

  .about-final-panel .about-story-small {
    width: 100%;
    border-top: var(--border);
  }

  .about-final-panel .about-links {
    margin-top: clamp(36px, 7vh, 80px);
  }

  .about-panel-nav {
    position: sticky;
    top: calc(100vh - 48px);
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: 3px;
    width: fit-content;
    height: 0;
    margin: 0 auto;
    transform: translateY(-18px);
  }

  .about-panel-nav button {
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid rgba(17,17,17,.22);
    border-radius: 999px;
    background: rgba(247,247,245,.9);
    color: var(--black);
    backdrop-filter: blur(12px);
    font: inherit;
    font-size: var(--type-meta);
    line-height: var(--leading-meta);
    cursor: pointer;
    transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
  }

  .about-panel-nav button:hover,
  .about-panel-nav button:focus-visible,
  .about-panel-nav button.is-active {
    color: var(--white);
    background: var(--black);
    outline: 0;
    transform: translateY(-1px);
  }
}

.about-project-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0 0 3px;
  border-bottom: 1px solid currentColor;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  transform-origin: left center;
  transition: transform .45s var(--ease), opacity .25s ease;
}

.about-project-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .about-project-link:hover {
    transform: translateY(-2px);
  }

  .about-project-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@media (max-width: 800px) {
  .about-panel {
    filter: none !important;
    opacity: 1 !important;
  }

  .about-final-panel {
    display: block;
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media
(max-width: 800px) {

  :root {

    --padding:
      clamp(
        12px,
        4vw,
        18px
      );

  }


  html,
  body {

    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden;

  }


  .cursor,
  .project-hover-float {

    display:
      none;

  }


  /* ========================================================
     HERO MOBILE
  ======================================================== */

  .hero {

    height:
      112svh;

  }


  .hero-sticky {

    height:
      100svh;

    min-height:
      560px;

    padding:
      78px
      var(--padding)
      12px;

  }


  .hero-top,
  .hero-bottom {

    gap:
      10px;

    align-items:
      flex-start;

  }


  .hero-meta {

    white-space:
      normal;

  }


  .hero-meta-left {

    flex:
      1
      1
      auto;

    max-width:
      70%;

  }


  .hero-meta-right {

    flex:
      0
      0
      auto;

    max-width:
      26%;

  }


  .hero-transform {

    position:
      absolute;

    left:
      var(--padding);

    right:
      var(--padding);

    top:
      47%;

    width:
      auto;

    max-width:
      calc(
        100vw -
        var(--padding) * 2
      );

    transform:
      translateY(-45%);

  }


  .hero-layer,
  .hero-layer h1 {

    width:
      100%;

    max-width:
      100%;

  }


  .graphic-row {

    width:
      100%;

    max-width:
      100%;

    flex-direction:
      column;

  }


  .graphic-dash {

    display:
      none;

  }


  .design-row {

    width:
      100%;

    max-width:
      100%;

    padding-right:
      clamp(
        50px,
        15vw,
        82px
      );

  }


  .passion-row {

    width:
      100%;

    max-width:
      100%;

  }


  .hero-layer-comic
  .passion-row {

    width:
      calc(
        100% -
        clamp(
          38px,
          11vw,
          58px
        )
      );

    transform:
      translateX(
        clamp(
          38px,
          11vw,
          58px
        )
      );

  }


  .hero-gif-figma {

    top:
      11%;

    right:
      -5vw;

    width:
      clamp(
        145px,
        44vw,
        215px
      );

  }


  .hero-gif-cats {

    top:
      39%;

    left:
      2vw;

    width:
      clamp(
        130px,
        39vw,
        185px
      );

  }


  .hero-gif-fucking {

    left:
      -3vw;

    bottom:
      1%;

    width:
      clamp(
        155px,
        47vw,
        220px
      );

  }


  .hero-bottom {

    align-items:
      flex-end;

  }


  .hero-discipline {

    flex:
      1
      1
      auto;

    max-width:
      58%;

    white-space:
      normal;

  }


  .hero-work-link {

    flex:
      0
      0
      auto;

    max-width:
      40%;

    white-space:
      nowrap;

  }


  /* ========================================================
     WORK MOBILE
  ======================================================== */

  .work-section {

    height:
      84svh;

    min-height:
      560px;

  }


  .work-stage,
  .work-track {

    height:
      84svh;

  }


  .project-card {

    width:
      88vw;

    height:
      84svh;

    flex:
      0 0
      88vw;

    display:
      flex;

    flex-direction:
      column;

    cursor:
      grab;

  }


  .project-info {

    order:
      1;

    width:
      100%;

    min-height:
      58px;

    flex:
      0 0
      auto;

    padding:
      9px
      12px
      8px
      var(--padding);

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      2px;

    background:
      var(--background);

  }


  .project-info h2,
  .project-info p {

    width:
      100%;

    max-width:
      100%;

    text-align:
      left;

  }


  .project-visual-grid {

    position:
      relative;

    inset:
      auto;

    order:
      2;

    width:
      100%;

    height:
      calc(
        84svh -
        58px
      );

    flex:
      0 0
      auto;

  }


  .work-list-view {

    padding:
      70px
      0
      70px;

    overflow-y:
      auto;

  }


  .work-list-head {

    display:
      none;

  }


  .work-list-row {

    min-height:
      60px;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    grid-template-areas:
      "name arrow"
      "discipline year";

    row-gap:
      3px;

    column-gap:
      10px;

    padding:
      9px
      var(--padding);

  }


  .work-list-row
  span:nth-child(2),

  .work-list-row
  span:nth-child(4) {

    display:
      none;

  }


  .work-list-name {

    grid-area:
      name;

  }


  .work-list-row
  span:nth-child(3) {

    grid-area:
      discipline;

    color:
      var(--grey);

  }


  .work-list-row
  span:nth-child(5) {

    grid-area:
      year;

    justify-self:
      end;

    color:
      var(--grey);

  }


  .work-list-arrow {

    grid-area:
      arrow;

  }


  .work-list-preview {

    display:
      none;

  }


  .work-view-toggle {

    bottom:
      12px;

    width:
      166px;

    max-width:
      calc(
        100vw -
        var(--padding) * 2
      );

    height:
      39px;

  }


  /* ========================================================
     ABOUT MOBILE — IMPORTANT FIX
  ======================================================== */

  /*
     CRITICAL:
     the whole About section remains the containing block
     for the sticky media column.
  */

  .about-section {

    position:
      relative;

    display:
      block;

    width:
      100%;

    max-width:
      100%;

    border-top:
      var(--border);

    background:
      var(--background);

    overflow:
      visible;

  }


  /*
     THIS element is sticky, not .about-media.

     Because .about-media-column is a direct child of the
     full About section, its sticky lifetime is the entire
     section rather than only the height of the image.
  */

  .about-media-column {

    position:
      sticky;

    top:
      0;

    z-index:
      30;

    width:
      100%;

    height:
      31svh;

    min-height:
      205px;

    max-height:
      320px;

    margin:
      0;

    overflow:
      visible;

    pointer-events:
      none;

  }


  .about-media {

    position:
      relative;

    top:
      auto;

    width:
      100%;

    height:
      100%;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    overflow:
      hidden;

    background:
      rgba(
        247,
        247,
        245,
        .78
      );

    -webkit-backdrop-filter:
      blur(17px)
      saturate(1.08);

    backdrop-filter:
      blur(17px)
      saturate(1.08);

    border-bottom:
      1px solid
      rgba(0,0,0,.10);

  }


  .head-gif {

    width:
      min(
        86vw,
        420px
      );

    max-width:
      calc(
        100vw -
        var(--padding) * 2
      );

    height:
      28svh;

    max-height:
      285px;

    object-fit:
      contain;

  }


  /*
     Pull the copy underneath the sticky media.

     This lets content scroll BEHIND the translucent
     head panel instead of reserving another 31svh
     blank block above the copy.
  */

  .about-copy {

    position:
      relative;

    z-index:
      10;

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      calc(-31svh);

    padding:
      31svh
      var(--padding)
      22px;

    border-left:
      0;

    overflow:
      visible;

  }


  /* ========================================================
     ABOUT INTRO MOBILE
  ======================================================== */

  .about-scene-intro {

    position:
      relative;

    width:
      100%;

    min-height:
      158svh;

    padding:
      0;

    overflow:
      visible;

  }


  /*
     The headline sticks BELOW the head.

     It gets enough vertical runway for the four
     reveal lines to animate before the next content arrives.
  */

  .about-heading-reveal {

    position:
      sticky;

    top:
      calc(
        31svh +
        16px
      );

    z-index:
      15;

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      0;

    overflow:
      visible;

  }


  /*
     KEEP each authored HTML line together.

     The typography in text.css is deliberately sized
     so every line fits the available mobile width.
  */

  .about-reveal-line {

    position:
      relative;

    display:
      flex !important;

    align-items:
      baseline;

    justify-content:
      flex-start;

    flex-wrap:
      nowrap !important;

    gap:
      .18em !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0;

    margin:
      0;

    padding:
      .05em
      .04em
      .08em
      0;

    white-space:
      nowrap !important;

    overflow:
      visible;

    --line-progress:
      0;

  }


  .about-reveal-line
  +
  .about-reveal-line {

    margin-top:
      .02em;

  }


  .about-word {

    display:
      inline-block;

    flex:
      0
      0
      auto;

    max-width:
      none;

    white-space:
      nowrap;

  }


  .about-word-comic {

    flex:
      0
      0
      auto;

    white-space:
      nowrap;

  }


  /* ========================================================
     MOBILE REVEAL OVERLAY
  ======================================================== */

  .about-reveal-overlay {

    position:
      absolute;

    inset:
      0;

    display:
      flex !important;

    align-items:
      baseline;

    justify-content:
      flex-start;

    flex-wrap:
      nowrap !important;

    gap:
      .18em !important;

    width:
      100% !important;

    height:
      100%;

    max-width:
      100% !important;

    padding:
      .05em
      .04em
      .08em
      0;

    white-space:
      nowrap !important;

    pointer-events:
      none;

    overflow:
      visible;

    /*
       The JS changes --line-progress from 0 to 1.

       No overflow:hidden around this element.
       Therefore Safari cannot accidentally crop
       the gradient/text before clip-path runs.
    */

    clip-path:
      inset(
        -30%
        calc(
          100% -
          var(--line-progress) * 100%
        )
        -30%
        0
      );

    -webkit-clip-path:
      inset(
        -30%
        calc(
          100% -
          var(--line-progress) * 100%
        )
        -30%
        0
      );

    will-change:
      clip-path;

  }


  .about-reveal-overlay
  .about-word {

    color:
      var(--black);

  }


  .about-reveal-overlay
  .about-word-comic {

    color:
      transparent;

    background:
      linear-gradient(
        90deg,
        #ff3cac 0%,
        #c743b4 18%,
        #8356bc 38%,
        #4d73c8 58%,
        #2c98c5 76%,
        #72b86f 100%
      );

    background-size:
      220% 100%;

    -webkit-background-clip:
      text;

    background-clip:
      text;

    -webkit-text-fill-color:
      transparent;

  }


  /* ========================================================
     ABOUT STORY MOBILE
  ======================================================== */

  .about-scene-story {

    position:
      relative;

    z-index:
      12;

    padding:
      5vh
      0
      5vh;

  }


  .about-story {

    width:
      100%;

  }


  .about-story-block {

    width:
      100%;

    max-width:
      100%;

    grid-template-columns:
      26px
      minmax(0, 1fr);

    gap:
      10px;

    padding:
      18px
      0;

  }


  .about-story-block
  +
  .about-story-block {

    margin-top:
      3vh;

  }


  .about-medium-copy {

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-wrap:
      break-word;

  }


  /* ========================================================
     WORKING WITH ME MOBILE
  ======================================================== */

  .about-scene-working {

    position:
      relative;

    z-index:
      12;

    padding:
      5vh
      0
      4vh;

  }


  .about-work-editorial {

    width:
      100%;

    padding-top:
      20px;

  }


  .about-work-heading {

    padding-bottom:
      24px;

  }


  .about-work-heading h3 {

    max-width:
      100%;

    white-space:
      normal;

  }


  .work-scorecard {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

  }


  .work-stat {

    min-height:
      205px;

    padding:
      12px;

  }


  .work-stat:nth-child(odd) {

    padding-left:
      0;

  }


  .work-stat:nth-child(even) {

    padding-right:
      0;

  }


  .work-stat-label {

    margin-bottom:
      24px;

  }


  .work-stat-value {

    max-width:
      100%;

  }


  .work-stat-denominator {

    margin-left:
      4px;

  }


  .work-stat-caption {

    max-width:
      100%;

    padding-top:
      18px;

  }


  .soft-skills-grid {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

  }


  .soft-skill {

    min-height:
      145px;

    padding:
      12px;

  }


  .soft-skill:first-child {

    padding-left:
      0;

  }


  .soft-skill:last-child {

    padding-right:
      0;

  }


  .soft-skill-title {

    margin-bottom:
      26px;

  }


  .about-story-small {

    padding:
      22px
      0
      24px;

  }


  .about-small-copy {

    grid-template-columns:
      minmax(0, 1fr);

    gap:
      12px;

  }


  .about-links {

    width:
      calc(
        100% -
        36px
      );

    margin-left:
      36px;

    gap:
      18px;

  }


  .about-end-anchor {

    height:
      10vh;

    min-height:
      70px;

  }


}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media
(max-width: 480px) {

  :root {

    --padding:
      clamp(
        11px,
        3.7vw,
        15px
      );

  }


  .hero-sticky {

    padding-top:
      74px;

  }


  .hero-transform {

    top:
      46%;

  }


  .project-card {

    width:
      91vw;

    flex-basis:
      91vw;

  }


  /*
     Slightly smaller sticky head on short / narrow phones.
  */

  .about-media-column {

    height:
      29svh;

    min-height:
      190px;

    max-height:
      275px;

  }


  .head-gif {

    height:
      26svh;

    max-height:
      245px;

  }


  .about-copy {

    margin-top:
      calc(-29svh);

    padding-top:
      29svh;

  }


  .about-heading-reveal {

    top:
      calc(
        29svh +
        14px
      );

  }


  .about-scene-intro {

    min-height:
      160svh;

  }


  .counter-number {

    max-width:
      100%;

  }


  .soft-skills-grid {

    grid-template-columns:
      minmax(0, 1fr);

  }


  .soft-skill,
  .soft-skill:first-child,
  .soft-skill:last-child {

    width:
      100%;

    min-height:
      auto;

    padding:
      13px
      0;

    border-right:
      0;

    border-bottom:
      var(--border);

  }


  .soft-skill-title {

    margin-bottom:
      15px;

  }


  .about-links {

    width:
      calc(
        100% -
        32px
      );

    margin-left:
      32px;

  }

}


/* ==========================================================
   VERY NARROW MOBILE
========================================================== */

@media
(max-width: 370px) {

  :root {

    --padding:
      11px;

  }


  .hero-sticky {

    padding-top:
      70px;

  }


  .project-card {

    width:
      93vw;

    flex-basis:
      93vw;

  }


  .about-media-column {

    height:
      28svh;

    min-height:
      175px;

    max-height:
      245px;

  }


  .head-gif {

    height:
      25svh;

    max-height:
      220px;

  }


  .about-copy {

    margin-top:
      calc(-28svh);

    padding-top:
      28svh;

  }


  .about-heading-reveal {

    top:
      calc(
        28svh +
        12px
      );

  }


  .work-stat {

    min-height:
      175px;

    padding:
      10px;

  }


  .about-links {

    width:
      calc(
        100% -
        27px
      );

    margin-left:
      27px;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      12px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media
(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* ==========================================================
   REFINEMENT 03 — HERO / WORK HOVER / MOBILE ABOUT
   Layout only. Typography stays in text.css.
========================================================== */


/* ==========================================================
   HERO — SAFE REVEAL
========================================================== */

/*
   The GIF layer is completely absent in the initial Geist state.
   This prevents animated pixels outside their visual box from
   leaking before the Comic reveal begins.
*/

.hero-gif-layer {
  opacity: 0;
  visibility: hidden;
  overflow: visible !important;
}


.hero-transform.is-transforming
.hero-gif-layer,
.hero-transform.is-complete
.hero-gif-layer {
  opacity: 1;
  visibility: visible;
}


/*
   Once the reveal is complete, remove the reveal clipping
   from both the Comic layer and the sticker layer. This is
   what stops Figma / Comic glyphs being cropped above or below.
*/

.hero-transform.is-complete
.hero-layer-comic,
.hero-transform.is-complete
.hero-gif-layer {
  clip-path:
    inset(
      -100vh
      -100vw
      -100vh
      -100vw
    ) !important;

  -webkit-clip-path:
    inset(
      -100vh
      -100vw
      -100vh
      -100vw
    ) !important;
}


.hero-transform,
.hero-layer,
.hero-layer h1,
.hero-row,
.hero-gif-layer,
.hero-gif {
  overflow: visible !important;
}


/* ==========================================================
   HERO STICKERS — DESKTOP

   Figma remains top-right.
   FUCKING and CATS exchange their previous positions.
========================================================== */

@media
(min-width: 801px) {

  .hero-gif-figma {
    top: 10%;
    right: clamp(-22px, -1.2vw, -8px);

    width:
      clamp(
        330px,
        30vw,
        520px
      );

    transform:
      translateY(-50%)
      rotate(1deg);
  }


  /* FUCKING now occupies the former cats position. */

  .hero-gif-fucking {
    top: 43%;
    left: clamp(170px, 20vw, 410px);
    right: auto;
    bottom: auto;

    width:
      clamp(
        250px,
        23vw,
        410px
      );

    transform:
      translateY(-50%)
      rotate(-2deg);
  }


  /* CATS now occupies the former FUCKING position. */

  .hero-gif-cats {
    top: auto;
    left: clamp(-18px, -.8vw, -6px);
    right: auto;
    bottom: -1%;

    width:
      clamp(
        285px,
        26vw,
        455px
      );

    transform:
      translateY(10%)
      rotate(-7deg);
  }

}


/* ==========================================================
   WORK CAROUSEL — HOVER LABEL
========================================================== */

.project-hover-float {
  display: block;
  visibility: hidden;

  opacity: 0;

  transform:
    translate3d(
      18px,
      18px,
      0
    );

  will-change:
    left,
    top,
    opacity;

  transition:
    opacity
    .16s
    ease;
}


.project-hover-float.is-visible {
  visibility: visible;
  opacity: 1;
}


/*
   Hover information belongs to the carousel only.
   The List view remains exactly as designed.
*/

.work-section.is-list-view
.project-hover-float {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media
(max-width: 800px) {

  /*
     Give the Geist → Comic transition more vertical runway.
     The bottom stickers therefore do not appear prematurely.
  */

  .hero {
    height:
      145svh;
  }


  .hero-gif-layer {
    inset:
      -9svh
      -8vw
      -16svh
      -8vw;
  }


  .hero-gif-figma {
    top: 3%;
    right: -2vw;

    width:
      clamp(
        170px,
        48vw,
        235px
      );

    transform:
      rotate(1deg);
  }


  /* FUCKING takes the former cats position. */

  .hero-gif-fucking {
    top: 58%;
    left: 1vw;
    right: auto;
    bottom: auto;

    width:
      clamp(
        155px,
        43vw,
        215px
      );

    transform:
      translateY(-50%)
      rotate(-2deg);
  }


  /* CATS takes the former FUCKING position. */

  .hero-gif-cats {
    top: auto;
    left: auto;
    right: -4vw;
    bottom: -17%;

    width:
      clamp(
        175px,
        48vw,
        235px
      );

    transform:
      rotate(-7deg);
  }


  /*
     The desktop hover follower has no role on touch screens.
  */

  .project-hover-float {
    display:
      none !important;
  }


  /* ========================================================
     ABOUT — HEAD PIN
  ======================================================== */

  .about-media-column.is-mobile-pinned {
    position:
      fixed !important;

    top:
      0 !important;

    left:
      0 !important;

    right:
      0 !important;

    z-index:
      30 !important;
  }


  .about-media-column.is-mobile-after {
    position:
      absolute !important;

    top:
      auto !important;

    bottom:
      0 !important;

    left:
      0 !important;

    right:
      0 !important;
  }


  /* ========================================================
     ABOUT — GOOD DESIGN PIN

     JS adds these classes because Safari can be unreliable
     when a sticky element sits below another pinned element.
  ======================================================== */

  .about-heading-reveal.is-mobile-heading-pinned {
    position:
      fixed !important;

    top:
      calc(
        31svh +
        16px
      ) !important;

    left:
      var(--padding) !important;

    right:
      var(--padding) !important;

    width:
      auto !important;

    z-index:
      24 !important;
  }


  .about-heading-reveal.is-mobile-heading-after {
    position:
      absolute !important;

    top:
      auto !important;

    left:
      0 !important;

    right:
      0 !important;

    bottom:
      0 !important;

    width:
      100% !important;
  }


  /*
     Extra runway ensures the complete grey → black/rainbow
     transition is readable before "When I say..." takes over.
  */

  .about-scene-intro {
    min-height:
      185svh;
  }


  .about-scene-story {
    position:
      relative;

    z-index:
      18;

    padding-top:
      clamp(
        56px,
        9svh,
        92px
      );
  }

}


/* ==========================================================
   VERY SHORT MOBILE
========================================================== */

@media
(max-width: 800px)
and
(max-height: 700px) {

  .about-heading-reveal.is-mobile-heading-pinned {
    top:
      calc(
        29svh +
        14px
      ) !important;
  }

}


@media (min-width: 801px) {
  .about-heading-reveal {
    top: 50vh;
    transform: translateY(-50%);
  }

  .about-scene-working {
    height: 100vh;
    min-height: 720px;
    padding: var(--padding) 0;
  }

  .about-work-editorial {
    height: 100%;
    padding-top: 18px;
    display: grid;
    grid-template-rows: auto minmax(0, 1.45fr) minmax(0, .72fr);
  }

  .about-work-heading { padding-bottom: 18px; }
  .work-scorecard { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .work-stat,
  .work-stat:nth-child(odd),
  .work-stat:nth-child(even) {
    min-height: 0;
    padding: 14px;
    border-right: var(--border);
  }

  .work-stat:first-child { padding-left: 0; }
  .work-stat:last-child { padding-right: 0; border-right: 0; }
  .work-stat-label { margin-bottom: 12px; }
  .work-stat-caption { padding-top: 10px; }
  .soft-skill { min-height: 0; padding-top: 12px; }
  .soft-skill-title { margin-bottom: 14px; }

  .about-work-editorial .counter-number {
    min-width: 0;
    font-size: clamp(54px, 4.8vw, 82px) !important;
    line-height: .78 !important;
  }

  .about-work-editorial .work-stat-caption,
  .about-work-editorial .soft-skill p:not(.soft-skill-title) {
    max-width: 190px;
    font-size: var(--type-small) !important;
    line-height: var(--leading-small) !important;
    letter-spacing: var(--tracking-small) !important;
  }

  .about-work-editorial .work-stat-denominator {
    margin-top: 1px;
  }
}

.about-keyword:hover {
  font-family: var(--font-sans);
  transform: none;
  animation: rainbowFlow 3.5s linear infinite;
}


/* ==========================================================
   ABOUT CARDS — FINAL DESKTOP CALIBRATION
========================================================== */

@media (min-width: 801px) {
  .about-scene-intro.about-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    margin-bottom: 170vh;
  }

  .about-scene-story.about-panel {
    justify-content: center;
    margin-bottom: 92vh;
  }

  .about-scene-story .about-story {
    margin: auto 0;
  }

  .about-scene-story .about-story-block {
    border-top: 0;
  }

  .about-scene-story .about-story-block + .about-story-block {
    margin-top: clamp(24px, 5vh, 54px);
  }

  .about-panel-nav {
    position: fixed;
    left: 25vw;
    top: auto;
    bottom: 22px;
    z-index: 80;
    width: max-content;
    max-width: calc(50vw - var(--padding) * 2);
    height: auto;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 12px, 0);
    transition: opacity .3s var(--ease), transform .45s var(--ease);
  }

  .about-panel-nav.is-about-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
  }

  .about-copy .about-scene-working {
    min-height: 280vh;
  }

  .about-work-editorial.about-panel {
    height: 100vh;
    margin-bottom: 80vh;
    padding: clamp(20px, 2vw, 34px);
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    overflow: hidden;
  }

  .about-work-editorial .about-work-heading {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding-bottom: clamp(12px, 2vh, 20px);
    text-align: center;
  }

  .about-work-editorial .about-work-kicker {
    display: block;
    margin: 0;
    color: var(--grey);
    font-size: var(--type-meta);
    line-height: var(--leading-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
  }

  .about-work-editorial .about-work-heading h3 {
    margin: 0;
    color: var(--black);
    font-size: var(--type-meta) !important;
    line-height: var(--leading-meta) !important;
    letter-spacing: var(--tracking-meta) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
  }

  .about-work-editorial .work-scorecard {
    display: grid;
    height: clamp(320px, 42vh, 410px);
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    border-top: var(--border);
  }

  .about-work-editorial .work-stat,
  .about-work-editorial .work-stat:nth-child(odd),
  .about-work-editorial .work-stat:nth-child(even) {
    position: relative;
    min-height: 0;
    padding: clamp(8px, 1.2vh, 13px) 0;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: 1fr;
    column-gap: 0;
    align-items: start;
    border-right: 0;
    border-bottom: var(--border);
  }

  .about-work-editorial .work-stat-top {
    grid-column: 1;
    align-self: start;
    padding-right: clamp(10px, 1vw, 18px);
  }

  .about-work-editorial .work-stat-label {
    margin: 0 0 3px;
  }

  .about-work-editorial .work-stat-main {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 0;
  }

  .about-work-editorial .work-stat-value {
    align-items: flex-start;
  }

  .about-work-editorial .counter-number {
    min-width: 1.25em;
    font-size: clamp(62px, 5.8vw, 98px) !important;
    line-height: .68 !important;
    text-align: right;
  }

  .about-work-editorial .work-stat-denominator {
    margin: 0 0 2px 4px;
  }

  .about-work-editorial .work-stat-caption {
    display: none;
  }

  .about-work-editorial .work-stat-meter {
    grid-column: 3;
    display: block;
    width: 100%;
    height: clamp(28px, 3.7vh, 38px);
    margin-left: 0;
    overflow: hidden;
    border: 1px solid rgba(17,17,17,.3);
    border-radius: 999px;
  }

  .about-work-editorial .work-stat-meter-fill {
    display: block;
    width: var(--score);
    height: 100%;
    border-radius: inherit;
    background: var(--black);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.15s var(--ease);
  }

  .about-work-editorial.is-panel-active .work-stat-meter-fill {
    transform: scaleX(1);
  }

  .about-work-editorial.is-panel-active .work-stat:nth-child(2) .work-stat-meter-fill {
    transition-delay: .08s;
  }

  .about-work-editorial.is-panel-active .work-stat:nth-child(3) .work-stat-meter-fill {
    transition-delay: .16s;
  }

  .about-work-editorial.is-panel-active .work-stat:nth-child(4) .work-stat-meter-fill {
    transition-delay: .24s;
  }

  .about-work-editorial .soft-skills-section {
    padding-top: 0;
  }

  .about-work-editorial .soft-skills-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 0;
  }

  .about-work-editorial .soft-skill,
  .about-work-editorial .soft-skill:first-child,
  .about-work-editorial .soft-skill:last-child {
    min-height: clamp(96px, 12vh, 126px);
    padding: 10px;
  }

  .about-work-editorial .soft-skill:first-child {
    padding-left: 0;
  }

  .about-work-editorial .soft-skill-title {
    margin-bottom: clamp(12px, 2vh, 22px);
  }

  .about-final-panel .about-links {
    margin-left: 58px;
    margin-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (max-width: 800px) {
  .about-panel-label {
    margin: 0 0 16px;
    color: var(--grey);
    font-size: var(--type-meta);
    line-height: var(--leading-meta);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
  }
}


/* ==========================================================
   2026-08-16 — ABOUT / WORK FINAL GRID
========================================================== */

@media (min-width: 801px) {
  .about-copy {
    overflow: clip;
  }

  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel,
  .about-clients-panel.about-panel {
    box-shadow: inset 0 24px 30px -38px rgba(17, 17, 17, .42);
  }

  .about-work-editorial.about-panel {
    --work-card-pad: clamp(20px, 2vw, 34px);
    padding-inline: var(--work-card-pad);
  }

  .about-work-editorial .about-work-heading {
    justify-content: flex-start;
    text-align: left;
  }

  .about-work-editorial .work-scorecard {
    position: relative;
    width: calc(100% + var(--work-card-pad) * 2);
    height: clamp(360px, 46vh, 450px);
    margin-inline: calc(var(--work-card-pad) * -1);
    border-top: var(--border);
  }

  .about-work-editorial .work-scorecard::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: 1px;
    background: rgba(17, 17, 17, .28);
    pointer-events: none;
  }

  .about-work-editorial .work-stat,
  .about-work-editorial .work-stat:nth-child(odd),
  .about-work-editorial .work-stat:nth-child(even) {
    padding: 0;
    grid-template-columns: 1fr 1fr 2fr;
    align-items: stretch;
    overflow: hidden;
  }

  .about-work-editorial .work-stat-top {
    grid-column: 1;
    padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.5vw, 24px) clamp(10px, 1.2vh, 15px) var(--work-card-pad);
  }

  .about-work-editorial .work-stat-main {
    grid-column: 2;
    align-self: stretch;
    padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.5vw, 24px);
  }

  .about-work-editorial .counter-number {
    font-size: clamp(70px, 6.2vw, 108px) !important;
    line-height: .68 !important;
    text-align: left;
  }

  .about-work-editorial .work-stat-meter {
    grid-column: 3;
    align-self: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .about-work-editorial .work-stat-meter-fill {
    height: 100%;
    border-radius: 0;
  }

  .about-work-editorial .soft-skills-section {
    width: calc(100% + var(--work-card-pad) * 2);
    margin-inline: calc(var(--work-card-pad) * -1);
  }

  .about-work-editorial .soft-skills-heading {
    padding-inline: var(--work-card-pad);
    border-bottom: var(--border);
  }

  .about-work-editorial .soft-skills-grid {
    border-top: 0;
    border-bottom: var(--border);
  }

  .about-work-editorial .soft-skill,
  .about-work-editorial .soft-skill:first-child,
  .about-work-editorial .soft-skill:last-child {
    padding: 12px clamp(12px, 1.25vw, 20px);
    border-right: var(--border);
  }

  .about-work-editorial .soft-skill:first-child {
    padding-left: var(--work-card-pad);
  }

  .about-work-editorial .soft-skill:last-child {
    padding-right: var(--work-card-pad);
    border-right: 0;
  }

  .about-final-panel {
    justify-content: center;
  }

  .about-final-panel .about-links {
    width: calc(100% - clamp(40px, 4vw, 68px));
    margin: 0 auto;
    align-items: flex-start;
  }

  .about-clients-panel {
    position: sticky;
    top: 0;
    z-index: 24;
    min-height: 100vh;
    padding: clamp(20px, 2vw, 34px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
  }
}

.about-clients-panel {
  background: var(--white);
}

.about-clients-list {
  width: 100%;
  border-bottom: var(--border);
}

.about-clients-list > a {
  position: relative;
  z-index: 1;
  min-height: clamp(62px, 8vh, 84px);
  padding: 12px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) 24px;
  align-items: center;
  gap: 12px;
  border-top: var(--border);
  color: inherit;
  background: var(--white);
  transition: transform .45s var(--ease), filter .35s ease;
}

.about-clients-list > a span {
  font-size: clamp(24px, 2.3vw, 40px);
  line-height: .95;
  letter-spacing: -.045em;
}

.about-clients-list > a small {
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
}

.about-clients-list > a b {
  justify-self: end;
  font-weight: 400;
}

.about-clients-list > a::after {
  content: "";
  position: absolute;
  right: 11%;
  bottom: 10%;
  z-index: 3;
  width: clamp(105px, 14vw, 205px);
  aspect-ratio: 4 / 3;
  background: var(--about-client-image) center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(18px, 14px, 0) rotate(3deg) scale(.92);
  transition: opacity .25s ease, transform .48s var(--ease);
}

.about-clients-list > a:hover {
  z-index: 6;
  transform: translate3d(0, -5px, 0) rotate(-.65deg);
}

.about-clients-list > a:hover::after {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
}


/* ==========================================================
   MOBILE — LONGER HERO + STACKED ABOUT CARDS
========================================================== */

@media (max-width: 800px) {
  .hero {
    height: 190svh;
  }

  .hero-transform {
    left: max(12px, calc(var(--padding) * .68));
    right: max(12px, calc(var(--padding) * .68));
  }

  .hero-gif-layer {
    inset: -12svh -14vw -24svh;
  }

  .hero-gif-figma {
    top: 1%;
    right: -8vw;
    width: clamp(190px, 58vw, 290px);
  }

  .hero-gif-fucking {
    top: 54%;
    left: -8vw;
    width: clamp(185px, 54vw, 270px);
  }

  .hero-gif-cats {
    right: -9vw;
    bottom: -22%;
    width: clamp(205px, 59vw, 300px);
  }

  .about-copy {
    overflow: visible;
  }

  .about-panel:not(.about-scene-intro) {
    position: sticky;
    top: 31svh;
    min-height: 69svh;
    padding: clamp(20px, 6vw, 28px) var(--padding);
    overflow: hidden;
    background: var(--white);
    box-shadow: inset 0 24px 30px -38px rgba(17, 17, 17, .45);
  }

  .about-scene-story.about-panel { z-index: 21; margin-bottom: 55svh; }
  .about-work-editorial.about-panel { z-index: 22; margin-bottom: 55svh; }
  .about-final-panel.about-panel { z-index: 23; margin-bottom: 55svh; }
  .about-clients-panel.about-panel { z-index: 24; }

  .about-work-editorial.about-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
  }

  .about-work-editorial .about-work-heading {
    justify-content: flex-start;
    text-align: left;
  }

  .about-work-editorial .work-stat-meter {
    height: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 0;
  }

  .about-work-editorial .work-stat-meter-fill {
    border-radius: 0;
  }

  .about-final-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .about-final-panel .about-links {
    width: 100%;
    margin: 0;
    align-items: flex-start;
  }

  .about-clients-list > a {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .about-clients-list > a span {
    font-size: clamp(21px, 7vw, 31px);
  }

  .about-clients-list > a small {
    display: none;
  }

  .about-clients-list > a::after {
    display: none;
  }
}


/* ==========================================================
   2026-08-16 — RESPONSIVE INTERACTION REFINEMENT
========================================================== */

.about-work-editorial .counter-number {
  background: none;
  color: var(--black);
  -webkit-text-fill-color: currentColor;
  animation: none;
  transition: color .28s ease, transform .45s var(--ease);
}

.about-work-editorial .work-stat {
  transform-origin: center;
  transition: transform .45s var(--ease), background-color .35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .about-work-editorial .work-stat:hover {
    z-index: 4;
    transform: translate3d(0, -4px, 0) rotate(-.35deg);
  }

  .about-work-editorial .work-stat:nth-child(even):hover {
    transform: translate3d(0, -4px, 0) rotate(.35deg);
  }

  .about-work-editorial .work-stat:hover .counter-number {
    background: linear-gradient(90deg, #ff2da8, #7557dd, #3485dc, #23b8c4, #f2c94c, #ff2da8);
    background-size: 230% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: counterRainbowFlow 2.4s linear infinite;
    transform: translateX(3px);
  }

  .about-work-editorial .work-stat:hover .work-stat-meter-fill {
    background: linear-gradient(90deg, #ff2da8, #7557dd, #3485dc, #23b8c4, #f2c94c, #ff2da8);
    background-size: 230% 100%;
    animation: counterRainbowFlow 2.4s linear infinite;
  }
}

@media (min-width: 801px) {
  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel,
  .about-clients-panel.about-panel {
    box-shadow: 0 -20px 38px rgba(17, 17, 17, .11);
  }

  .about-final-panel .about-links {
    width: 100%;
    margin: 0;
  }

  .about-project-link {
    transition: transform .55s var(--ease), letter-spacing .55s var(--ease);
  }

  .about-project-link::after {
    height: 2px;
  }

  .about-project-link:hover {
    transform: translate3d(8px, -3px, 0) rotate(-1.4deg);
    letter-spacing: -.035em;
  }
}

@media (max-width: 800px) {
  .hero {
    height: 165svh;
  }

  .hero-sticky {
    padding-top: clamp(70px, 9svh, 82px);
    padding-bottom: 14px;
  }

  .hero-transform {
    top: 48%;
    left: var(--padding);
    right: var(--padding);
  }

  .hero-gif-layer {
    inset: -8svh -10vw -15svh;
  }

  .hero-gif-figma {
    width: clamp(178px, 54vw, 260px);
  }

  .hero-gif-fucking {
    left: -5vw;
    width: clamp(172px, 50vw, 245px);
  }

  .hero-gif-cats {
    right: -6vw;
    bottom: -14%;
    width: clamp(190px, 55vw, 270px);
  }

  .about-copy {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .about-scene-intro {
    min-height: 142svh;
    padding-inline: var(--padding);
  }

  .about-panel:not(.about-scene-intro) {
    top: 30svh;
    min-height: 70svh;
    padding: clamp(18px, 4.8vw, 24px) var(--padding);
    box-shadow: 0 -18px 34px rgba(17, 17, 17, .13);
  }

  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel {
    margin-bottom: 20svh;
  }

  .about-scene-story {
    padding-top: clamp(22px, 4svh, 38px);
  }

  .about-work-editorial.about-panel {
    justify-content: flex-start;
    padding-top: clamp(18px, 4svh, 30px);
  }

  .about-work-heading {
    padding-bottom: 14px;
  }

  .about-work-editorial .work-scorecard {
    grid-template-columns: 1fr;
  }

  .about-work-editorial .work-stat,
  .about-work-editorial .work-stat:nth-child(odd),
  .about-work-editorial .work-stat:nth-child(even) {
    min-height: 82px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(88px, 34%);
    align-items: stretch;
    border-right: 0;
  }

  .about-work-editorial .work-stat-top,
  .about-work-editorial .work-stat-main {
    align-self: start;
  }

  .about-work-editorial .work-stat-label {
    margin: 0;
  }

  .about-work-editorial .counter-number {
    font-size: clamp(48px, 15vw, 70px) !important;
    line-height: .72 !important;
  }

  .about-work-editorial .work-stat-caption,
  .about-work-editorial .work-stat-denominator {
    display: none;
  }

  .about-work-editorial .work-stat-meter {
    align-self: stretch;
    min-height: 100%;
  }

  .about-work-editorial .soft-skills-heading {
    padding: 10px 0;
  }

  .about-work-editorial .soft-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-work-editorial .soft-skill,
  .about-work-editorial .soft-skill:first-child,
  .about-work-editorial .soft-skill:last-child {
    min-height: 105px;
    padding: 10px;
  }

  .about-work-editorial .soft-skill:nth-child(odd) {
    padding-left: 0;
  }

  .about-final-panel .about-links {
    width: 100%;
    margin-left: 0;
  }
}

/* ==========================================================
   INDEX MOBILE — FINAL HERO + ABOUT CARD RHYTHM
========================================================== */
@media (max-width: 800px) {
  .hero {
    height: 160svh;
  }

  .hero-sticky {
    height: 100svh;
    padding: 112px var(--padding) 8px;
  }

  .hero-top {
    position: relative;
    z-index: 2;
    padding-top: 4px;
  }

  .hero-transform {
    top: 51%;
  }

  .hero-bottom {
    padding-bottom: 0;
  }

  .work-section,
  .work-stage,
  .work-track {
    margin-top: 0;
  }

  .about-copy {
    overflow: visible;
  }

  .about-scene-intro {
    min-height: 176svh;
  }

  .about-scene-working {
    display: contents;
  }

  .about-panel:not(.about-scene-intro) {
    position: sticky;
    top: 31svh;
    width: 100%;
    height: 69svh;
    min-height: 69svh;
    margin-bottom: 38svh;
    padding: clamp(18px, 4.8vw, 24px) var(--padding);
    overflow: hidden;
    background: var(--background);
    box-shadow: 0 -18px 34px rgba(17,17,17,.14);
  }

  .about-scene-story.about-panel { z-index: 21; }
  .about-work-editorial.about-panel { z-index: 22; }
  .about-final-panel.about-panel { z-index: 23; margin-bottom: 34svh; }
  .about-clients-panel.about-panel { z-index: 24; margin-bottom: 0; }

  .about-scene-story {
    padding-top: clamp(18px, 3svh, 28px);
  }

  .about-scene-story .about-panel-label {
    margin-bottom: clamp(16px, 2.5svh, 24px);
  }

  .about-story-block {
    padding-block: 12px;
  }

  .about-story-block + .about-story-block {
    margin-top: clamp(12px, 2.2svh, 20px);
  }

  .about-work-editorial.about-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .about-work-editorial.about-panel::-webkit-scrollbar { display: none; }

  .about-work-heading {
    flex: 0 0 auto;
    padding-bottom: 12px;
  }

  .about-work-editorial .work-stat,
  .about-work-editorial .work-stat:nth-child(odd),
  .about-work-editorial .work-stat:nth-child(even) {
    min-height: 76px;
    padding-block: 8px;
  }

  .about-work-editorial .soft-skill,
  .about-work-editorial .soft-skill:first-child,
  .about-work-editorial .soft-skill:last-child {
    min-height: 92px;
    padding-block: 9px;
  }

  .about-final-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================================
   ABOUT + EXPERIENCE — FINAL COMPOSITION
========================================================== */
@media (min-width: 801px) {
  .about-copy .about-scene-working {
    display: contents;
  }

  .about-work-editorial.about-panel,
  .about-final-panel.about-panel {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: var(--background);
  }

  .about-work-editorial.about-panel {
    margin-bottom: 72vh;
  }

  .about-final-panel.about-panel {
    z-index: 4;
    margin-bottom: 0;
  }
}

.portfolio-experience {
  position: relative;
  z-index: 8;
  min-height: 100vh;
  padding: clamp(72px, 10vh, 130px) var(--padding);
  background: var(--background);
  border-top: var(--border);
}

.portfolio-experience-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter, 18px);
  align-items: start;
  margin-bottom: clamp(56px, 8vh, 96px);
}

.portfolio-experience-index {
  grid-column: 1;
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
}

.portfolio-experience-head h2 {
  grid-column: 2 / 4;
  margin: 0;
  font-size: clamp(48px, 7.2vw, 118px);
  line-height: .86;
  font-weight: 400;
  letter-spacing: -.065em;
}

.portfolio-experience-intro {
  grid-column: 4;
  max-width: 36ch;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.portfolio-experience-list {
  border-top: 1px solid currentColor;
}

.portfolio-experience-row {
  --row-lift: 0px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter, 18px);
  align-items: center;
  min-height: clamp(82px, 10vh, 126px);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  background: var(--background);
  transform: translateY(var(--row-lift));
  transition: transform .42s var(--ease), z-index 0s;
}

.portfolio-experience-row span {
  position: relative;
  z-index: 2;
}

.portfolio-experience-row .portfolio-client-name {
  font-size: clamp(27px, 3.3vw, 56px);
  line-height: .92;
  letter-spacing: -.045em;
}

.portfolio-experience-row span:nth-child(2),
.portfolio-experience-row span:nth-child(3) {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

.portfolio-experience-row span:last-child {
  justify-self: end;
  font-size: clamp(24px, 2.4vw, 42px);
}

.portfolio-experience-row::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: calc(25% + var(--gutter, 18px));
  bottom: 0;
  width: min(23vw, 330px);
  height: 145%;
  background: var(--client-image) center / cover no-repeat;
  opacity: 0;
  transform: translateY(12%) rotate(0deg) scale(.9);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .48s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-experience-row:hover {
    --row-lift: -10px;
    z-index: 5;
    transform: translateY(-10px) rotate(-.35deg);
  }

  .portfolio-experience-row:hover::after {
    opacity: 1;
    transform: translateY(4%) rotate(2deg) scale(1);
  }
}

/* Mobile is deliberately a reading flow: the GIF remains sticky in its
   column, while the copy no longer pretends to be a stack of cards. */
@media (max-width: 800px) {
  .hero {
    height: 138svh;
  }

  .hero-sticky {
    height: 100svh;
    padding: 138px var(--padding) 8px;
  }

  .hero-top {
    padding-top: 0;
  }

  .hero-transform {
    top: 52%;
  }

  .work-section {
    margin-top: 0 !important;
  }

  .about-copy {
    overflow: visible;
  }

  .about-scene-intro {
    min-height: 160svh;
  }

  .about-scene-working {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .about-panel:not(.about-scene-intro),
  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: clamp(54px, 9svh, 82px) var(--padding);
    overflow: visible;
    background: var(--background);
    box-shadow: none;
    filter: none;
  }

  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel {
    border-top: var(--border);
  }

  .about-scene-story .about-panel-label,
  .about-work-heading,
  .about-final-panel .about-panel-label {
    margin: 0 0 clamp(34px, 6svh, 58px);
    padding: 0;
  }

  .about-story-block {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    padding: 0;
  }

  .about-story-block + .about-story-block {
    margin-top: clamp(48px, 8svh, 74px);
  }

  .about-medium-copy {
    font-size: clamp(25px, 7.4vw, 38px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
  }

  .about-work-heading h3 {
    font-size: clamp(42px, 12vw, 62px) !important;
    line-height: .88 !important;
  }

  .about-work-editorial .work-stat,
  .about-work-editorial .work-stat:nth-child(odd),
  .about-work-editorial .work-stat:nth-child(even) {
    min-height: 94px;
    padding: 12px 0;
    grid-template-columns: minmax(0, 1fr) minmax(78px, 24vw) minmax(76px, 28%);
  }

  .about-work-editorial .soft-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-work-editorial .soft-skill,
  .about-work-editorial .soft-skill:first-child,
  .about-work-editorial .soft-skill:last-child {
    min-height: 112px;
  }

  .about-final-panel.about-panel {
    min-height: 52svh;
    justify-content: center;
    padding-bottom: clamp(72px, 12svh, 110px);
  }

  .about-final-panel .about-links {
    margin: 0;
  }

  .about-end-anchor {
    height: 0;
    min-height: 0;
  }

  .portfolio-experience {
    min-height: 0;
    padding: clamp(68px, 10svh, 92px) var(--padding);
  }

  .portfolio-experience-head {
    display: block;
    margin-bottom: 52px;
  }

  .portfolio-experience-index {
    margin-bottom: 34px;
  }

  .portfolio-experience-head h2 {
    margin-bottom: 28px;
    font-size: clamp(48px, 16vw, 74px);
    line-height: .84;
  }

  .portfolio-experience-intro {
    max-width: 30ch;
  }

  .portfolio-experience-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name arrow" "role arrow";
    gap: 8px 16px;
    min-height: 104px;
    padding: 16px 0;
  }

  .portfolio-experience-row .portfolio-client-name {
    grid-area: name;
    font-size: clamp(29px, 9vw, 42px);
  }

  .portfolio-experience-row span:nth-child(2) {
    grid-area: role;
  }

  .portfolio-experience-row span:nth-child(3) {
    display: none;
  }

  .portfolio-experience-row span:last-child {
    grid-area: arrow;
    align-self: center;
  }

  .portfolio-experience-row::after {
    display: none;
  }
}

/* ==========================================================
   INDEX EXPERIENCE — SAME SYSTEM AS RRSS EXPERIENCE
========================================================== */
.portfolio-about-experience.rrss-experience {
  position: relative;
  z-index: 8;
  min-height: 130vh;
  padding: clamp(72px, 10vh, 130px) var(--padding) var(--padding);
  background: var(--background);
  box-shadow: 0 -22px 42px rgba(0,0,0,.10), 0 -2px 9px rgba(0,0,0,.06);
}

.portfolio-about-experience .rrss-experience-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.65vw, 28px);
  align-items: start;
  margin-bottom: 70px;
}

.portfolio-about-experience .rrss-experience-head > span {
  grid-column: 1;
  font-size: var(--type-meta);
}

.portfolio-about-experience .rrss-experience-head > p {
  grid-column: 2 / 5;
  justify-self: start;
  max-width: 760px;
  font-size: var(--type-editorial);
  line-height: var(--leading-editorial);
  letter-spacing: var(--tracking-editorial);
}

.portfolio-about-experience .rrss-experience-directory {
  position: relative;
  margin-inline: calc(var(--padding) * -1);
  padding-top: 8px;
}

.portfolio-about-experience .rrss-experience-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.65vw, 28px);
  align-items: start;
  min-height: 92px;
  margin-top: clamp(7px, .7vw, 11px);
  padding: 12px var(--padding);
  color: inherit;
  text-decoration: none;
  border-top: 1px solid rgba(17,17,17,.18);
  background: var(--background);
  transform-origin: 48% 50%;
  transition: transform .5s var(--ease), background .5s var(--ease);
}

.portfolio-about-experience .rrss-experience-row:first-child { margin-top: 0; }
.portfolio-about-experience .rrss-experience-row:nth-child(1) { z-index: 1; }
.portfolio-about-experience .rrss-experience-row:nth-child(2) { z-index: 2; }
.portfolio-about-experience .rrss-experience-row:nth-child(3) { z-index: 3; }
.portfolio-about-experience .rrss-experience-row:nth-child(4) { z-index: 4; }
.portfolio-about-experience .rrss-experience-row:nth-child(5) { z-index: 5; }
.portfolio-about-experience .rrss-experience-row:nth-child(6) { z-index: 6; }

.portfolio-about-experience .rrss-experience-row > time { grid-column: 1; }
.portfolio-about-experience .rrss-experience-row > div { grid-column: 2; }
.portfolio-about-experience .rrss-experience-row > p { grid-column: 3; }
.portfolio-about-experience .rrss-experience-row > b {
  grid-column: 4;
  justify-self: end;
  font-weight: 400;
  transition: transform .4s var(--ease);
}

.portfolio-about-experience .rrss-experience-row time,
.portfolio-about-experience .rrss-experience-row div p {
  color: var(--grey);
  font-size: 11px;
  line-height: 1.3;
}

.portfolio-about-experience .rrss-experience-row h3 {
  margin: 0 0 5px;
  font-size: clamp(27px, 2.15vw, 38px);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 460;
}

.portfolio-about-experience .rrss-experience-row > p {
  max-width: 620px;
  font-size: 13px;
  line-height: 1.35;
}

.portfolio-about-experience .rrss-experience-row::after {
  content: "";
  position: absolute;
  right: clamp(58px, 7vw, 118px);
  top: 50%;
  z-index: 6;
  width: clamp(150px, 19vw, 310px);
  aspect-ratio: 4 / 3;
  background: var(--client-image) center / cover no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -42%, 0) rotate(1.8deg) scale(.94);
  transition: opacity .32s var(--ease), transform .5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-about-experience .rrss-experience-row:hover {
    transform: translateY(-13px) rotate(-1.35deg) scale(1.012);
  }
  .portfolio-about-experience .rrss-experience-row:nth-child(even):hover {
    transform: translateY(-13px) rotate(1.15deg) scale(1.012);
  }
  .portfolio-about-experience .rrss-experience-row:hover::after {
    opacity: 1;
    transform: translate3d(0, -50%, 0) rotate(-1deg) scale(1);
  }
  .portfolio-about-experience .rrss-experience-row:hover b {
    transform: translate3d(4px, -4px, 0);
  }
}

/* ==========================================================
   MOBILE — FINAL VERTICAL RHYTHM
========================================================== */
@media (max-width: 800px) {
  .hero {
    height: 138svh;
  }

  .hero-sticky {
    padding-top: 116px;
  }

  .work-section,
  .work-stage,
  .work-track {
    height: 82svh;
    min-height: 540px;
  }

  .project-card {
    height: 82svh;
    flex-basis: 91vw;
  }

  .project-visual-grid {
    height: calc(82svh - 58px);
  }

  .about-section,
  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel {
    border-top: 0 !important;
  }

  .about-story-block,
  .about-story-block + .about-story-block,
  .about-work-heading,
  .work-scorecard,
  .soft-skills-section,
  .about-links {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  .about-scene-story .about-panel-label,
  .about-work-heading,
  .about-final-panel .about-panel-label {
    margin-top: 0;
    margin-bottom: clamp(36px, 6svh, 56px);
    padding: 0;
  }

  .about-work-heading {
    display: block;
    text-align: left;
  }

  .about-work-heading h3 {
    display: none;
  }

  .about-work-kicker {
    color: var(--black) !important;
    font-size: var(--type-meta) !important;
    line-height: var(--leading-meta) !important;
    letter-spacing: var(--tracking-meta) !important;
  }

  .about-work-editorial .work-scorecard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .about-work-editorial .work-stat,
  .about-work-editorial .work-stat:nth-child(odd),
  .about-work-editorial .work-stat:nth-child(even) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: clamp(190px, 26svh, 235px);
    padding: 16px 10px 18px 0;
    border: 0 !important;
  }

  .about-work-editorial .work-stat:nth-child(even) {
    padding-right: 0;
    padding-left: 10px;
  }

  .about-work-editorial .work-stat-top,
  .about-work-editorial .work-stat-main {
    width: 100%;
  }

  .about-work-editorial .work-stat-index {
    display: none;
  }

  .about-work-editorial .work-stat-value {
    display: flex;
    align-items: flex-start;
    margin-top: auto;
  }

  .about-work-editorial .counter-number {
    display: inline-block;
    font-size: clamp(80px, 23vw, 118px) !important;
    line-height: .72 !important;
    transform-origin: left bottom;
  }

  .about-work-editorial .work-stat.is-counting .counter-number {
    animation: mobileCounterGrow .9s var(--ease) both;
  }

  .about-work-editorial .work-stat-denominator {
    display: inline-block !important;
    margin: 2px 0 0 3px;
    font-size: 11px !important;
  }

  .about-work-editorial .work-stat-meter {
    width: 100%;
    min-height: 16px;
    height: 16px;
    margin-top: 12px;
    border-radius: 999px;
  }

  .about-work-editorial .soft-skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-work-editorial .soft-skill,
  .about-work-editorial .soft-skill:first-child,
  .about-work-editorial .soft-skill:last-child {
    padding: 16px 10px 16px 0;
    border: 0 !important;
  }

  .about-work-editorial .soft-skill:nth-child(even) {
    padding-right: 0;
    padding-left: 10px;
  }

  .portfolio-about-experience.rrss-experience {
    min-height: auto;
    padding: clamp(74px, 10svh, 94px) var(--padding) var(--padding);
  }

  .portfolio-about-experience .rrss-experience-head {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-bottom: 52px;
  }

  .portfolio-about-experience .rrss-experience-head > span,
  .portfolio-about-experience .rrss-experience-head > p {
    grid-column: 1;
  }

  .portfolio-about-experience .rrss-experience-head > p {
    font-size: clamp(27px, 7.4vw, 39px);
    line-height: .96;
  }

  .portfolio-about-experience .rrss-experience-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    min-height: 126px;
    padding-block: 16px;
  }

  .portfolio-about-experience .rrss-experience-row > time,
  .portfolio-about-experience .rrss-experience-row > div,
  .portfolio-about-experience .rrss-experience-row > p {
    grid-column: 1;
  }

  .portfolio-about-experience .rrss-experience-row > b {
    grid-column: 2;
    grid-row: 1;
  }

  .portfolio-about-experience .rrss-experience-row::after {
    display: none;
  }
}

@keyframes mobileCounterGrow {
  0% { transform: scale(.55); filter: blur(8px); opacity: .25; }
  100% { transform: scale(1); filter: blur(0); opacity: 1; }
}

/* 2026-08-17 — mobile scorecard: label left, score /100 right. */
@media (max-width: 800px) {
  .about-work-editorial {
    --work-rule-soft: rgba(17, 17, 17, .16);
  }

  .about-work-editorial .work-scorecard {
    position: relative;
    display: block;
    border: 0;
  }

  .about-work-editorial .work-scorecard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: var(--work-rule-soft);
    pointer-events: none;
  }

  .about-work-editorial .work-scorecard::after {
    display: none;
  }

  .about-work-editorial .work-stat::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: var(--work-rule-soft);
    pointer-events: none;
  }

  .about-work-editorial .work-stat,
  .about-work-editorial .work-stat:nth-child(odd),
  .about-work-editorial .work-stat:nth-child(even) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(118px, auto) 15px;
    position: relative;
    min-height: 0;
    padding: 0;
    border: 0 !important;
  }

  .about-work-editorial .work-stat:last-child { border-bottom: 0 !important; }

  .about-work-editorial .work-stat-top {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    padding: 14px 14px 16px 0;
  }

  .about-work-editorial .work-stat-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 11px 0 14px 0;
  }

  .about-work-editorial .work-stat-label { margin: 0; max-width: 18ch; }
  .about-work-editorial .work-stat-value { margin: 0; align-items: flex-start; }

  .about-work-editorial .counter-number {
    font-size: clamp(66px, 20vw, 96px) !important;
    line-height: .72 !important;
  }

  .about-work-editorial .work-stat-denominator {
    margin: 2px 0 0 4px;
    font-size: 11px !important;
  }

  .about-work-editorial .work-stat-caption {
    max-width: 24ch;
    margin-top: auto;
    padding-top: 10px;
  }

  .about-work-editorial .work-stat-meter {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-height: 15px;
    height: 15px;
    margin: 0;
    border-top: 1px solid var(--work-rule-soft);
    border-radius: 0;
  }

  .about-work-editorial .work-stat-meter-fill { border-radius: 0; }

  .about-work-editorial .soft-skills-section {
    margin-top: 0;
    border: 0;
  }

  .about-work-editorial .soft-skills-heading {
    padding-block: 12px;
    border: 0;
  }

  .about-work-editorial .soft-skills-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .about-work-editorial .soft-skills-grid::after {
    display: none;
  }

  .about-work-editorial .soft-skills-grid::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: var(--work-rule-soft);
    pointer-events: none;
  }

  .about-work-editorial .soft-skill,
  .about-work-editorial .soft-skill:first-child,
  .about-work-editorial .soft-skill:last-child,
  .about-work-editorial .soft-skill:nth-child(even) {
    min-height: 126px;
    padding: 14px;
    border: 0 !important;
    border: 0 !important;
  }

  .about-work-editorial .soft-skill:nth-child(odd) { padding-left: 0; }
  .about-work-editorial .soft-skill:nth-last-child(-n + 2) { border-bottom: 0 !important; }
}

/* The mobile Hero now ends immediately after its bottom navigation.
   Its shorter extra scroll is used by the type reveal instead of
   becoming an empty pause before Work. */
@media (max-width: 800px) {
  .hero {
    height: 128svh;
  }

  .work-section {
    margin-top: -28svh !important;
  }
}

/* 2026-08-17 — About mobile: a compact sticky portrait leaves
   enough reading height for every card in the stack. */
@media (max-width: 800px) {
  .about-section {
    --about-mobile-head: 33svh;
  }

  .about-media-column,
  .about-media-column.is-mobile-pinned {
    height: var(--about-mobile-head);
    min-height: 0;
    max-height: none;
    border-bottom: 1px solid rgba(17, 17, 17, .14);
  }

  .about-media {
    height: 100%;
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: 42px;
  }

  .head-gif {
    width: min(88vw, 480px);
    height: 26svh;
    max-width: calc(100vw - var(--padding) * 2);
    max-height: none;
    object-fit: contain;
  }

  .about-copy {
    margin-top: calc(-1 * var(--about-mobile-head));
    padding-top: var(--about-mobile-head);
  }

  .about-heading-reveal,
  .about-heading-reveal.is-mobile-heading-pinned {
    top: calc(var(--about-mobile-head) + 12px) !important;
  }

  .about-panel:not(.about-scene-intro) {
    position: sticky !important;
    top: var(--about-mobile-head);
    height: calc(100svh - var(--about-mobile-head));
    min-height: calc(100svh - var(--about-mobile-head));
    overflow: hidden;
    background: var(--background);
  }

  .about-scene-story.about-panel {
    z-index: 21;
    margin-bottom: 42svh;
  }

  .about-work-editorial.about-panel {
    z-index: 22;
    margin-bottom: 42svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .about-work-editorial.about-panel::-webkit-scrollbar {
    display: none;
  }

  .about-final-panel.about-panel {
    z-index: 23;
    margin-bottom: 18svh;
  }

  .about-panel-nav {
    position: fixed;
    z-index: 80;
    top: calc(var(--about-mobile-head) - 39px);
    left: var(--padding);
    right: var(--padding);
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 8px, 0);
    transition: opacity .25s var(--ease), transform .4s var(--ease);
  }

  .about-panel-nav.is-about-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .about-panel-nav button {
    min-width: 0;
    min-height: 28px;
    padding: 5px 3px;
    border: 1px solid rgba(17, 17, 17, .2);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(247, 247, 245, .9);
    color: var(--black);
    font: inherit;
    font-size: clamp(8px, 2.35vw, 10px);
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    backdrop-filter: blur(10px);
  }

  .about-panel-nav button.is-active,
  .about-panel-nav button:focus-visible {
    background: var(--black);
    color: var(--white);
    outline: 0;
  }
}

/* ==========================================================
   ABOUT — DEFINITIVE RESPONSIVE BEHAVIOUR
   Desktop keeps the card stack. Mobile becomes a clean reading
   flow below a half-screen sticky portrait and navigation.
========================================================== */
@media (min-width: 801px) {
  .about-copy .about-scene-working {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  /* The reading pause belongs to the scene, not to the sticky card.
     Keeping it off TF03 prevents the sticky margin-box from being
     pushed upwards before TF04 reaches the top of the viewport. */
  .about-copy .about-scene-working::before {
    content: "";
    order: 2;
    flex: 0 0 72vh;
    width: 100%;
    pointer-events: none;
  }

  .about-work-editorial.about-panel {
    order: 1;
    position: sticky;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    margin-bottom: 0;
    background: var(--background);
  }

  .about-final-panel.about-panel {
    order: 3;
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    margin-bottom: 0;
    background: var(--background);
  }
}

@media (max-width: 800px) {
  .about-section {
    --about-mobile-head: 50svh;
  }

  .about-media-column,
  .about-media-column.is-mobile-pinned {
    height: var(--about-mobile-head);
    min-height: 0;
    max-height: none;
  }

  .about-media {
    height: 100%;
    align-items: flex-start;
    padding: 8px 0 43px;
  }

  .head-gif {
    width: min(90vw, 500px);
    height: 42svh;
    max-width: calc(100vw - var(--padding) * 2);
    max-height: none;
    object-fit: contain;
  }

  .about-copy {
    margin-top: calc(-1 * var(--about-mobile-head));
    padding-top: var(--about-mobile-head);
    overflow: visible;
  }

  .about-heading-reveal,
  .about-heading-reveal.is-mobile-heading-pinned {
    top: calc(var(--about-mobile-head) + 12px) !important;
  }

  .about-copy .about-scene-working {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .about-copy .about-scene-working::before {
    content: none;
  }

  .about-panel:not(.about-scene-intro),
  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel {
    position: relative !important;
    top: auto !important;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    padding: clamp(48px, 8svh, 76px) var(--padding);
    overflow: visible;
    background: var(--background);
    box-shadow: none;
    filter: none;
  }

  .about-scene-story.about-panel,
  .about-work-editorial.about-panel,
  .about-final-panel.about-panel {
    border-top: 1px solid rgba(17, 17, 17, .14);
  }

  .about-work-editorial .about-work-heading {
    display: block;
    margin: 0 0 clamp(30px, 5svh, 46px);
    padding: 0;
    text-align: left;
  }

  .about-work-editorial .about-work-kicker,
  .about-work-editorial .about-work-heading h3 {
    display: block !important;
  }

  .about-work-editorial .about-work-heading h3 {
    margin-top: 8px;
  }

  .about-panel-nav {
    position: absolute;
    top: auto;
    bottom: 10px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}