:root {
  --bg: #f4f4f4;
  --ink: #111;
  --blue: #8db4dc;
  --yellow: #e2c14e;
  --pink: #ec8fb4;
  --gutter: clamp(16px, 3.4vw, 68px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); color: var(--ink); }

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(18px, 3.2vw, 64px) var(--gutter) clamp(14px, 1.6vw, 28px);
}

.hero__top,
.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.corner,
.services li {
  font-weight: 500;
  font-size: clamp(14px, 1.75vw, 34px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: uppercase;
}

.services { list-style: none; }

/* ---------- Stage ---------- */
.stage {
  position: relative;
  align-self: center;
  width: 100%;
  margin: clamp(40px, 8vh, 140px) 0 clamp(30px, 6vh, 110px);
}

/* ---------- Big mixed-type word ---------- */
.word {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  font-weight: 400;
  font-size: 19vw;           /* fine-tuned by main.js to fit width */
  line-height: 0.74;
  white-space: nowrap;
  user-select: none;
}

.word__br { display: none; }   /* line break used on phones: PORT / FOLI* */
.ch {
  flex-shrink: 0;
  display: inline-block;
  transform: translateY(40%);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(.2,.9,.2,1.15), opacity 0.6s ease;
}
.is-ready .ch { transform: none; opacity: 1; }

.ch--p    { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: -0.06em; }
.ch--o1   { width: 0.68em; height: 0.74em; }
.ch--o1 svg { width: 100%; height: 100%; overflow: visible; }
.ch--r    { font-family: "Silkscreen", monospace; font-weight: 700; font-size: 0.9em; }
.ch--t    { font-family: "Archivo Black", sans-serif; font-size: 1.04em; }
.ch--f    { font-family: "Barriecito", cursive; font-size: 1.08em; }
.ch--o2   { font-family: "Silkscreen", monospace; font-weight: 700; font-size: 0.9em; }
.ch--l    { font-family: "Nothing You Could Do", cursive; font-size: 0.92em; transform-origin: bottom; }
.ch--i    { font-family: "Gloria Hallelujah", cursive; font-size: 0.95em; }
.ch--star { width: 0.66em; height: 0.66em; color: var(--ink); }
.ch--star svg { width: 100%; height: 100%; }
.is-ready .ch--star { animation: spin 24s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Photo reel ---------- */
.hero { overflow: hidden; }
.hero__top, .hero__bottom { position: relative; z-index: 3; }
.word { position: relative; z-index: 1; }

.reel {
  --card-h: 19vw;
  position: relative;
  z-index: 2;
  height: var(--card-h);
  margin-left: calc(-1 * var(--gutter));    /* run edge to edge so photos slide fully off screen */
  margin-right: calc(-1 * var(--gutter));
  perspective: 1400px;
  opacity: 0;
  transition: opacity 1.2s ease .4s;
}
.is-ready .reel { opacity: 1; }
.reel { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.reel.is-dragging, .reel.is-dragging .reel__card { cursor: grabbing; }
.reel__card img { -webkit-user-drag: none; pointer-events: none; }

.reel__card {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--card-h);                    /* width is set per photo from its ratio */
  margin: 0;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 14px 30px -14px rgba(0,0,0,.35);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  backface-visibility: hidden;
}
.reel__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Clients strip ---------- */
.clients {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 40px);
  margin-top: clamp(26px, 3.4vw, 64px);
  padding: clamp(10px, 1vw, 18px) 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  opacity: 0;
  transition: opacity 1s ease .9s;
}
.is-ready .clients { opacity: 1; }
.clients[hidden] { display: none; }

.clients__label {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: clamp(12px, 1vw, 18px);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.clients__label::after { content: " ✱"; color: var(--pink); }

.clients__view {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clients-scroll var(--dur, 30s) linear infinite;
}
.clients:hover .clients__track { animation-play-state: paused; }
@keyframes clients-scroll { to { transform: translateX(-50%); } }

.client {
  display: flex;
  align-items: center;
  gap: clamp(8px, .8vw, 14px);
  padding: 0 clamp(16px, 2.2vw, 44px);
  font-weight: 600;
  font-size: clamp(14px, 1.3vw, 24px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}
.client + .client { border-left: 1.5px solid rgba(17,17,17,.18); }   /* thin divider between clients */
.client img {
  height: clamp(34px, 3.5vw, 64px);
  width: auto;
  border-radius: 6px;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.client:hover img { transform: scale(1.12) rotate(-4deg); }
.client:hover { color: var(--blue); }

/* ---------- Lightbox (click a hero photo to see it whole) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 14px;
  padding: clamp(16px, 4vw, 60px);
  background: rgba(17,17,17,.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img,
.lightbox video {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  transform: scale(.94);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox.is-open img, .lightbox.is-open video { transform: none; }
.lightbox [hidden] { display: none; }
.lightbox__frame {
  width: min(1280px, 100%);
  height: calc(100vh - 140px);
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lightbox.is-site .lightbox__prev, .lightbox.is-site .lightbox__next { display: none; }
.lightbox__open { color: #f4f4f4; margin-left: 10px; text-decoration: underline; text-underline-offset: 3px; }
.lightbox__open:hover { color: var(--blue); }
.lightbox__cap { color: #f4f4f4; font-size: clamp(14px, 1.2vw, 20px); letter-spacing: -0.02em; text-align: center; }
.lightbox button {
  position: absolute;
  border: 0;
  background: #f4f4f4;
  color: #111;
  width: 44px; height: 44px;
  border-radius: 50%;
  font: 600 20px/1 "Inter", sans-serif;
  cursor: pointer;
}
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev  { left: 16px;  top: 50%; translate: 0 -50%; }
.lightbox__next  { right: 16px; top: 50%; translate: 0 -50%; }

/* Corner text intro */
.hero__top, .hero__bottom {
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}
.is-ready .hero__top, .is-ready .hero__bottom { opacity: 1; }

/* ---------- About ---------- */
.about {
  padding: clamp(60px, 9vw, 160px) var(--gutter) clamp(60px, 8vw, 140px);
}

.about__title {
  font-weight: 500;
  font-size: clamp(56px, 8.6vw, 170px);
  letter-spacing: -0.06em;
  line-height: 0.85;
  margin-left: 12%;
  margin-bottom: clamp(50px, 8vw, 150px);
}

.about__text {
  font-weight: 500;
  font-size: clamp(25px, 3.7vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: left;
  text-indent: 11%;
}
.about__text em { font-style: italic; }
.hl-blue   { color: var(--blue); }
.hl-yellow { color: var(--yellow); }
.hl-pink   { color: var(--pink); }

.about__media {
  position: relative;
  width: 36%;
  margin: clamp(14px, 1.4vw, 28px) 0 clamp(30px, 3.4vw, 64px) 20.5%;
  padding-top: 11.5%;             /* room for the head above the card (% of the section width) */
}

.about__panel {
  position: relative;
  aspect-ratio: 680 / 360;
}
/* coloured halftone card behind the cut-out */
.about__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(17,17,17,.16) 1.4px, transparent 1.6px) 0 0 / 14px 14px,
    var(--panel, var(--blue));
  border: 2px solid var(--ink);
  rotate: -2.5deg;
  transition: rotate .6s cubic-bezier(.2,.8,.2,1);
}

.about__cut {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  height: 152%;
  clip-path: inset(-40% -40% 0 -40%);    /* legs end at the panel edge */
}
.about__me,
.about__echo {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  width: auto;
  translate: -38% 0;
  transform-origin: 50% 100%;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.about__me   { filter: url(#sticker); }
.about__echo { filter: url(#echoLine); transform: translate(5%, -3%) rotate(4deg); opacity: .9; }

.about__media:hover .about__me   { transform: scale(1.04) rotate(-1.5deg); }
.about__media:hover .about__echo { transform: translate(9%, -5%) rotate(7deg); }
.about__media:hover .about__panel::before { rotate: 1.5deg; }

.about__tag {
  position: absolute;
  z-index: 4;
  right: -24%;
  top: -34%;
  font-family: "Gloria Hallelujah", cursive;
  font-size: clamp(14px, 1.7vw, 32px);
  line-height: 1;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: .35em .7em .25em;
  border-radius: 999px;
  rotate: 7deg;
  white-space: nowrap;
}
.about__arrow {
  position: absolute;
  z-index: 4;
  right: -10%;
  top: -18%;
  width: 18%;
  color: var(--ink);
  scale: -1 1;
}

.about__star {
  position: absolute;
  z-index: 2;
  width: 37%;
  left: -26%;
  top: 50%;
  translate: 0 -50%;
  color: var(--ink);
  background: transparent;
  animation: spin 30s linear infinite;
}
.about__star path { fill: var(--bg); }

/* ---------- Contact / Experience / Degrees ---------- */
.info {
  --indent: 10.6vw;
  padding: clamp(40px, 5vw, 90px) var(--gutter) clamp(70px, 9vw, 160px);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.info__row { position: relative; padding-left: var(--indent); }
.info__row--right { padding-left: 0; }

.info__head {
  font-weight: 600;
  font-size: clamp(30px, 3.35vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.info__star {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: clamp(22px, 2.4vw, 46px);
  aspect-ratio: 1;
  animation: spin 18s linear infinite;
}
.info__star--blue   { color: var(--blue); }
.info__star--pink   { color: var(--pink); }
.info__star--yellow { color: var(--yellow); }

/* two columns: left starts after the indent, right at ~54% */
.info__grid {
  display: grid;
  grid-template-columns: 42% 1fr;
  column-gap: 3%;
  padding-left: var(--indent);
}
.info__grid--heads .info__row { padding-left: 0; }
.info__grid--heads .info__row > .info__star { left: calc(-1 * var(--indent)); }
.info__grid--heads .info__row--right > .info__star { left: -7vw; }

.info__col,
.info__social {
  font-size: clamp(17px, 2.2vw, 42px);
  line-height: 1.12;
}
.info__grid--contact { margin-top: clamp(40px, 5.5vw, 105px); }
.info__social { padding-top: 0.6em; }
.info__social p { display: grid; grid-template-columns: max-content 1fr; column-gap: 0.6em; }

.info a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s ease; }
.info a:hover { background-size: 100% 1.5px; }

.info__rule {
  border: 0;
  height: 3px;
  margin: clamp(40px, 5vw, 96px) 0 clamp(36px, 4.4vw, 84px);
  background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 28px);
}

.info__grid--lists { margin-top: clamp(50px, 6.5vw, 125px); }
.info__item { margin-bottom: 1.25em; line-height: 1.04; }
.info__item .sep {
  display: inline-block;
  width: 2px;
  height: 0.5em;
  margin: 0 0.55em;
  background: currentColor;
  vertical-align: 0.02em;
}
.ph { color: #9a9a9a; }
   /* placeholder text still to fill in */

/* ---------- Skills + CONTENTS ---------- */
.skills {
  padding: clamp(20px, 3vw, 60px) var(--gutter) clamp(30px, 4vw, 80px);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.skills__grid {
  display: grid;
  grid-template-columns: 32% 31% 1fr;
  padding-left: 3.5%;
}
.skills__head {
  display: flex;
  align-items: flex-start;
  gap: 1.2vw;
}
.pix {
  flex: 0 0 auto;
  width: var(--iw);
  height: auto;
  margin-top: 0.3vw;
  color: var(--ink);
  shape-rendering: crispEdges;
}
.skills__list {
  list-style: none;
  margin-top: clamp(30px, 3.9vw, 76px);
  padding-left: calc(var(--iw) + 1.2vw);
  font-size: clamp(17px, 2.05vw, 40px);
  line-height: 1.1;
}
.skills__list li { white-space: nowrap; }
.skills__col--lang .skills__list { margin-top: calc(clamp(30px, 3.9vw, 76px) + 1.1em); }   /* sits lower, like the reference */
.skills__head .info__head { white-space: nowrap; }

.skills__corners {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(24px, 2.8vw, 54px);
}
.skills__corners span {
  width: clamp(10px, 0.9vw, 16px);
  height: clamp(10px, 0.9vw, 16px);
  border-bottom: 3px solid var(--ink);
}
.skills__corners span:first-child { border-left: 3px solid var(--ink); }
.skills__corners span:last-child  { border-right: 3px solid var(--ink); }

.word2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: clamp(60px, 10vw, 200px);
  font-weight: 400;
  font-size: 16vw;            /* fine-tuned by main.js to fit width */
  line-height: 0.74;
  white-space: nowrap;
  letter-spacing: 0;
  user-select: none;
}
.ch2 { display: inline-block; flex-shrink: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.word2:hover .ch2:nth-child(odd)  { transform: translateY(-4%) rotate(-3deg); }
.word2:hover .ch2:nth-child(even) { transform: translateY(3%) rotate(3deg); }
.ch2--pix   { font-family: "Silkscreen", monospace; font-weight: 700; font-size: 0.92em; }
.ch2--blk   { font-family: "Archivo Black", sans-serif; font-size: 1.04em; }
.ch2--hand  { font-family: "Nothing You Could Do", cursive; font-size: 0.95em; }
.ch2--wet   { font-family: "Rubik Wet Paint", sans-serif; font-size: 1.04em; }
.ch2--brush { font-family: "Barriecito", cursive; font-size: 1.1em; }
.ch2--o     { width: 0.8em; height: 0.74em; }
.ch2--o svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- Work: Mac-style Finder window ---------- */
.work { padding: clamp(10px, 2vw, 40px) var(--gutter) clamp(70px, 9vw, 160px); }

.finder {
  --side: #f2f2f3;
  --pane: #e6e6e7;
  --accent: #4fb6f2;
  display: grid;
  grid-template-columns: minmax(170px, 23%) 1fr;
  width: min(100%, 1180px);
  min-height: clamp(460px, 44vw, 680px);
  margin: 0 auto;
  border-radius: clamp(18px, 2.2vw, 34px);
  overflow: hidden;
  background: var(--pane);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 40px 80px -30px rgba(0,0,0,.35);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.01em;
}

.finder__side {
  position: relative;
  z-index: 1;
  padding: clamp(18px, 1.8vw, 28px) clamp(16px, 1.6vw, 26px);
  background: var(--side);
  box-shadow: 6px 0 18px -10px rgba(0,0,0,.25);
}
.finder__lights { display: flex; gap: 8px; margin-bottom: clamp(30px, 3.4vw, 54px); }
.light {
  display: grid;
  place-items: center;
  width: 13px; height: 13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18);
  color: rgba(0,0,0,.6);
  cursor: pointer;
}
.light--min { background: #febc2e; }
.light--max { background: #28c840; }
.light svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity .15s ease; }
.finder__lights:hover .light svg, .light:focus-visible svg { opacity: 1; }   /* symbols appear on hover, like macOS */
.light:active { filter: brightness(.85); }

/* close / minimise / reopen animations */
.finder { transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .38s ease, border-radius .3s ease; }
.finder.is-closing { transform: scale(.9); opacity: 0; }
.finder.is-minimising { transform: translateY(40%) scale(.12); opacity: 0; transform-origin: 50% 100%; }
.finder.is-opening { animation: finder-open .4s cubic-bezier(.2,.8,.2,1); }
@keyframes finder-open { from { transform: translateY(12%) scale(.85); opacity: 0; } }

/* full screen (green) */
.finder.is-full {
  position: fixed;
  inset: clamp(8px, 1.6vw, 24px);
  z-index: 40;
  width: auto;
  min-height: 0;
  margin: 0;
  animation: finder-open .35s cubic-bezier(.2,.8,.2,1);
}
.finder.is-full .finder__body { max-height: none; }
html.finder-full { overflow: hidden; }
html.finder-full body::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(17,17,17,.45); }

/* dock pill that brings the window back */
.finder-dock {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(10px, 2vw, 30px) auto 0;
  padding: 12px 22px 12px 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 20px 40px -20px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.finder-dock.is-in { opacity: 1; transform: none; }
.finder-dock:hover { transform: translateY(-3px); }
.finder-dock b { display: block; font-size: 17px; letter-spacing: -0.02em; }
.finder-dock small { color: #8a8a8e; font-size: 13px; }
.finder-dock__ico { width: 64px; }
.finder-dock__ico .fico { width: 100%; }

.finder__nav { display: flex; flex-direction: column; gap: 2px; }
.finder__nav button {
  text-align: left;
  border: 0;
  background: none;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  font: 500 clamp(14px, 1.15vw, 17px)/1.2 inherit;
  font-family: inherit;
  color: #111;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.finder__nav button:hover { background: rgba(0,0,0,.05); }
.finder__nav button.is-on { color: var(--accent); }

.finder__main { display: flex; flex-direction: column; min-width: 0; }
.finder__bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(18px, 2vw, 32px) clamp(18px, 2.2vw, 36px) clamp(10px, 1vw, 16px);
}
.finder__crumb { color: #8a8a8e; font-size: clamp(13px, 1.05vw, 16px); margin-bottom: 2px; }
.finder__crumb button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.finder__crumb button:hover { color: var(--accent); text-decoration: underline; }
.finder__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.finder__back {
  display: none;
  flex: 0 0 auto;
  width: clamp(32px, 2.8vw, 44px);
  height: clamp(32px, 2.8vw, 44px);
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  color: #111;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.finder__back svg { width: 58%; height: 58%; }
.finder__back:hover { background: rgba(0,0,0,.14); transform: translateX(-2px); }
.finder.is-open .finder__back { display: inline-grid; place-items: center; }
.finder__views { display: flex; gap: 4px; }
.finder__views button {
  width: 34px; height: 30px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #555;
  cursor: pointer;
}
.finder__views button svg { width: 22px; height: 22px; }
.finder__views button.is-on { background: rgba(0,0,0,.07); color: #111; }

.finder__body {
  flex: 1;
  padding: clamp(8px, 1vw, 16px) clamp(18px, 2.2vw, 36px) clamp(22px, 2.4vw, 40px);
  overflow-y: auto;
  max-height: clamp(380px, 38vw, 580px);
}

/* icon grid */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 10.5vw, 150px), 1fr));
  gap: clamp(18px, 2vw, 30px) clamp(12px, 1.6vw, 24px);
  animation: finder-in .35s ease;
}
@keyframes finder-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.fitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 8px 6px;
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s ease;
}
.fitem:hover, .fitem:focus-visible { background: rgba(0,0,0,.05); outline: none; }
.fitem__name {
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 500;
  color: #111;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fitem__meta { font-size: 12px; color: #8a8a8e; margin-top: -4px; }
/* frosted-glass folder icon */
.fico {
  position: relative;
  display: block;
  width: 82%;
  max-width: 124px;
  aspect-ratio: 100 / 82;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.18));
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.fitem:hover .fico { transform: translateY(-3px) scale(1.04); }
.fico__back {
  position: absolute;
  left: 9%; right: 9%; top: 6%; height: 66%;
  border-radius: 9% / 12%;
  background: linear-gradient(#3a3a3c, #1f1f21);
}
.fico__paper {
  position: absolute;
  top: 0; height: 58%;
  border-radius: 7% / 8%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  padding: 9% 8%;
  display: flex;
  flex-direction: column;
  gap: 9%;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.fico__paper i { display: block; height: 5%; min-height: 2px; border-radius: 4px; background: #d6d6d8; }
.fico__paper.has-img { padding: 0; background-color: #fff; background-size: cover; background-position: center 25%; border: 2px solid #fff; }
.fico__paper i:nth-child(2) { width: 70%; }
.fico__paper i:nth-child(3) { width: 85%; }
.fico__paper:nth-of-type(2) { left: 15%; width: 52%; transform: rotate(-4deg); z-index: 3; }
.fico__paper:nth-of-type(3) { left: 50%; width: 24%; top: 3%; transform: rotate(2deg); z-index: 2; }
.fico__paper:nth-of-type(4) { left: 64%; width: 22%; top: 8%; transform: rotate(5deg); z-index: 1; }
.fitem:hover .fico__paper:nth-of-type(2) { transform: translateY(-8%) rotate(-6deg); }
.fitem:hover .fico__paper:nth-of-type(3) { transform: translateY(-6%) rotate(3deg); }
.fitem:hover .fico__paper:nth-of-type(4) { transform: translateY(-4%) rotate(7deg); }
.fico__front {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; top: 23%; bottom: 0;
  border-radius: 8% / 10%;
  /* tab on the left, slanting down to a lower edge on the right */
  clip-path: polygon(0 0, 38% 0, 48% 20%, 100% 20%, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(40,40,42,.35), rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(40,40,42,.35)),
    linear-gradient(180deg, rgba(200,200,204,.55), rgba(120,120,124,.6) 60%, rgba(60,60,64,.85));
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
          backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.25);
}
.fthumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;                       /* portrait tile — most of the work is portrait */
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  overflow: hidden;
}
/* photo fills the whole tile edge to edge, slightly zoomed in (full photo opens on click) */
.fthumb img, .fthumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.06);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.fitem:hover .fthumb img, .fitem:hover .fthumb video { transform: scale(1.12); }
/* wide screenshots + PDFs: tile takes the item's own shape, whole image visible, no zoom/crop */
.fitem.is-wide { grid-column: span 2; }
.fthumb.is-full { background: transparent; }
.fthumb.is-full img { transform: none; object-position: center; }
.fitem:hover .fthumb.is-full img { transform: scale(1.03); }
.fbadge {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17,17,17,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.flist .fitem.is-wide { grid-column: auto; }
.flist .fthumb.is-full { aspect-ratio: 4 / 5 !important; }
.flist .fthumb.is-full img { object-fit: cover; }
.flist .fbadge { display: none; }
.fbadge--live { background: #1f9d55; }
.fthumb { position: relative; }
.fplay {
  position: absolute;
  right: 8px; bottom: 8px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(17,17,17,.7);
  color: #fff;
  font-size: 10px;
  padding-left: 2px;
}
.flist .fplay { display: none; }

/* list view */
.flist { display: flex; flex-direction: column; animation: finder-in .35s ease; }
.flist .fitem {
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 8px;
}
.flist .fitem:nth-child(odd) { background: rgba(255,255,255,.55); }
.flist .fitem:hover { background: rgba(79,182,242,.14); }
.flist .fico { width: 38px; }
.flist .fthumb { width: 40px; flex: 0 0 auto; border-radius: 6px; }
.flist .fthumb img, .flist .fthumb video { inset: 0; width: 100%; height: 100%; }
.flist .fitem__name { text-align: left; -webkit-line-clamp: 1; flex: 1; }
.flist .fitem__meta { margin: 0; }

.fempty { display: grid; place-items: center; gap: 10px; padding: 50px 0; color: #8a8a8e; text-align: center; animation: finder-in .35s ease; }
.fempty .fico { width: 96px; opacity: .7; }

/* handwritten touches */
.about__note {
  position: absolute;
  z-index: 4;
  left: 112%;
  bottom: 14%;
  width: 90%;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(16px, 1.9vw, 36px);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: pre-line;
  rotate: -3deg;
}
.about__sign {
  margin-top: clamp(14px, 1.6vw, 30px);
  text-align: right;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(34px, 4.4vw, 84px);
  line-height: 1;
  rotate: -4deg;
  transform-origin: right;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .stage { margin: 8vh 0 5vh; }
  .word { flex-wrap: wrap; row-gap: .07em; }
  .word__br { display: block; flex-basis: 100%; height: 0; }
  .reel { --card-h: 54vw; }
  .clients { flex-direction: column; align-items: stretch; gap: 8px; }
  .client img { height: 30px; }
  .about__title { margin-left: 0; }
  .about__text { text-align: left; text-indent: 0; }
  .about__media { margin-bottom: 76px; }
  .about__note { left: 0; right: 0; bottom: -62px; width: 100%; text-align: center; font-size: 17px; }
  .about__media { width: 74%; margin-left: 18%; padding-top: 23%; }
  .about__tag { right: -14%; top: -40%; }
  .info { --indent: 38px; }
  .info__grid { grid-template-columns: 1fr; row-gap: 0; }
  .skills__grid { grid-template-columns: 1fr; padding-left: 0; row-gap: 40px; }
  .skills__col { --iw: 30px !important; }
  .skills__col--lang { --iw: 58px !important; }
  .skills__list, .skills__col--lang .skills__list { margin-top: 16px; }
  .skills__head { gap: 12px; }
  .word2 { margin-top: 60px; }
  .finder { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .finder__side, .finder__nav { min-width: 0; }
  .finder__side { padding: 14px 14px 10px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.25); }
  .finder__lights { margin-bottom: 12px; }
  .finder__nav { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .finder__nav button { flex-shrink: 0; margin: 0; white-space: nowrap; background: rgba(0,0,0,.05); border-radius: 999px; padding: 6px 12px; }
  .finder__nav button.is-on { background: var(--accent); color: #fff; }
  .finder__body { max-height: none; }
  /* stack as: Experiences heading → list → Degrees heading → list */
  .info { display: flex; flex-direction: column; padding-bottom: 36px; }
  .skills { padding-top: 10px; }

  /* viewer: arrows move below the image, swipe to change */
  .lightbox { padding: 56px 12px 76px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; translate: none; }
  .lightbox__cap { padding: 0 52px; font-size: 13px; }
  .lightbox img, .lightbox video { max-height: calc(100svh - 150px); }
  .lightbox__frame { height: calc(100svh - 150px); border-radius: 8px; }
  .info__grid--heads, .info__grid--lists { display: contents; }
  .info__grid--heads > .info__row:first-child { order: 1; margin-bottom: 1.4em; }
  #experiences { order: 2; padding-left: var(--indent); }
  .info__grid--heads .info__row--right { order: 3; margin-top: 1.4em; padding-left: var(--indent); margin-bottom: 1.4em; }
  #degrees { order: 4; padding-left: var(--indent); }
  .info__grid--heads > .info__row:first-child { padding-left: var(--indent); }
  /* headings sit in rows that carry their own indent on phones, so the star goes at the row's left edge */
  .info__grid--heads .info__row > .info__star,
  .info__grid--heads .info__row--right > .info__star { left: 0; }
  #degrees { margin-top: 0; }
  .info__social { padding-top: 0.8em; }
  .about__star { width: 30%; left: -20%; }
}

@media (prefers-reduced-motion: reduce) {
  .ch, .ch2, .reel, .clients, .clients__track, .hero__top, .hero__bottom, .reveal, .about__star, .info__star { transition: none !important; animation: none !important; opacity: 1 !important; }
}

/* CONTENTS word sits on top of the work window */
.work .word2 { margin: clamp(30px, 4vw, 80px) 0 clamp(36px, 5vw, 90px); }

/* ---------- Phones held sideways (short landscape screens) ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: 12px; padding-bottom: 10px; }
  .stage { margin: 4px 0; }
  .reel { --card-h: 13vw; }
  .clients { margin-top: 8px; padding: 5px 0; }
  .client img { height: 24px; }
  .corner, .services li { font-size: 12px; }
  .about__title { margin-bottom: 30px; }
  .finder { min-height: 0; }
  .finder__body { max-height: 72vh; }
  .finder.is-full .finder__body { max-height: none; }
  .lightbox { padding: 10px 64px 40px; }
  .lightbox img, .lightbox video { max-height: calc(100svh - 70px); }
  .lightbox__frame { height: calc(100svh - 60px); }
  .lightbox__close { top: 8px; right: 8px; }
}

/* ---------- Tablets held upright: same two-line hero as phones ---------- */
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1100px) {
  .word { flex-wrap: wrap; row-gap: .07em; }
  .word__br { display: block; flex-basis: 100%; height: 0; }
  .stage { margin: 6vh 0 4vh; }
  .reel { --card-h: 36vw; }
}