/* ---- Jack Armstrong font ----
   Drop the font file into  fonts/JackArmstrong.woff2  (or .ttf/.otf)
   and it will be used automatically. */
@font-face {
  font-family: "Jack Armstrong";
  src: url("../fonts/Jack%20Armstrong.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow: #feb800;      /* background — sampled from profile pic */
  --dark-red: #9b0302;    /* accent — hair red from profile pic */
  --dark-blue: #1b3a8f;   /* single blue used across the whole site */
  --uni-blue: #1b3a8f;    /* kept as an alias */
  --ink: #1a1a1a;
  --font: "Jack Armstrong", "Comic Sans MS", cursive, sans-serif;

  /* Hand-drawn arrow cursor (hotspot at the highest point of the arrow) */
  --cursor: url("../images/cursor-cut.png") 3 0;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* offset for sticky nav */
}

html, body {
  height: 100%;
}

html, body {
  background: var(--yellow);
  cursor: var(--cursor), auto;
}

body {
  color: var(--ink);
  font-family: var(--font);
  min-height: 100vh;
}

/* Every element keeps the custom cursor so it never reverts to the default */
* {
  cursor: inherit;
}

/* Blue highlight when selecting text */
::selection {
  background: var(--dark-blue);
  color: #fff;
}
::-moz-selection {
  background: var(--dark-blue);
  color: #fff;
}

/* ---- Navigation ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--yellow);
  padding: 0.6rem 1rem;
}

.nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 4vw, 2.5rem);
}

.nav__list a {
  color: var(--dark-red);
  text-decoration: none;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  padding: 0.2rem 0.4rem 0.55rem;
  /* hand-drawn blue underline, hidden until hover/active (width 0) */
  background: url("../images/blue-line.png") center bottom / 0% 7px no-repeat;
  transition: background-size 0.15s ease;
}

.nav__list a:hover,
.nav__list a.active {
  background-size: 88% 7px;
}

.nav__list a.active {
  font-weight: bold;
}

/* ---- Page switching (hash router) ---- */
/* Force-hide inactive pages even though .hero/.about-section set display:flex. */
.page[hidden] {
  display: none !important;
}

/* ---- Sections ---- */
.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
  text-align: center;
}

.section__title {
  color: var(--dark-red);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: normal;
  margin-bottom: 1rem;
}

.section__text {
  color: var(--ink);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  margin-bottom: 1.75rem;
}

.section__text.about {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ---- Hero (Home) ---- */
.hero {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.swoosh {
  width: 80%;
  max-width: 640px;
  height: auto;
  display: block;
}

.swoosh--top { margin-bottom: -0.5rem; }
.swoosh--bottom { margin-top: -0.5rem; margin-bottom: 1.5rem; }

.name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.star {
  width: 46px;
  height: auto;
  flex-shrink: 0;
}

.name {
  font-family: var(--font);
  color: var(--dark-red);
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1;
  font-weight: normal;
}

.name-title {
  margin: 0 0 -2.5rem; /* pull the text below up closer to the logo */
  line-height: 0;
}

.name-title img {
  display: block;
  width: min(92vw, 760px);
  height: auto;
}

.profile {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--dark-red);
  margin: 0.5rem 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.role {
  color: var(--dark-red);
  font-size: clamp(1.25rem, 4vw, 1.9rem);
  margin-bottom: 0.35rem;
}

.university {
  color: var(--uni-blue);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
}

.showreel-title {
  color: var(--dark-red);
  font-weight: normal;
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 1;
  margin-top: 3.5rem;
}

.showreel-box {
  width: min(90%, 724px);
  aspect-ratio: 16 / 9;
  margin: 1.25rem auto 0;
  border: 13px solid transparent;
  border-image: url("../images/blue-border.png") 40 / 13px stretch;
  background: #000;
  background-clip: padding-box;
}

.showreel-box video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- About page ---- */
.about-section {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
}

/* Character + speech bubble image, with the bio overlaid inside the bubble. */
.about-figure {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  container-type: inline-size; /* lets the bubble text scale with the image */
}

.about-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Positioned over the empty bubble region of the image (percentages of it). */
.bubble-text {
  position: absolute;
  left: 50.5%;
  right: 5%;
  top: 7%;
  bottom: 9.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4em;
  text-align: center;
  color: var(--ink);
  line-height: 1.4;
  font-size: clamp(0.7rem, 3.4cqw, 1.55rem);
}

.bubble-text p {
  margin: 0;
}

/* ---- Project grid (2D / Stop-Motion) ---- */
.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 2.5rem);
  max-width: 760px;
  margin: 0 auto;
}

.project-card {
  position: relative;
  font: inherit;
  color: var(--dark-red);
  background: transparent;
  border: 16px solid transparent;
  border-image: url("../images/red-border.png") 40 / 16px stretch;
  padding: 0.7rem 0.7rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  transition: transform 0.15s ease;
}

.project-card:hover,
.project-card:focus-visible { transform: scale(1.03); }

.project-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  border: 11px solid transparent;
  border-image: url("../images/blue-border.png") 40 / 11px stretch;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: padding-box; /* keep the image inside the border, no side bleed */
}

.project-card__caption {
  display: flex;
  flex-direction: column;
  margin-top: -0.2rem;
  padding-top: 0.95rem;
  background: url("../images/red-line.png") top center / 100% 10px no-repeat;
}

.project-card__title {
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  line-height: 1.05;
}

.project-card__sub {
  color: var(--uni-blue);
  font-size: clamp(0.9rem, 2.6vw, 1.1rem);
  margin-top: 0.3rem;
}

/* An odd last card would sit lopsided in the left column — centre it instead */
#other .projects > .project-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - clamp(1.25rem, 4vw, 2.5rem) / 2);
  justify-self: center;
}

/* ---- Project breakdown overlay ---- */
.breakdown[hidden] {
  display: none;
}

.breakdown {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--yellow);
  overflow-y: auto;
}

.breakdown__backdrop {
  display: none; /* full-page takeover, no dimmed backdrop */
}

.breakdown__panel {
  position: relative;
  width: 100%;
  max-width: 820px;
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 3rem);
  background: transparent;
  border: none;
}

.breakdown__close {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 0;
  line-height: 0;
}

.breakdown__close img {
  width: clamp(4rem, 10vw, 6.5rem);
  height: auto;
  display: block;
  transform-origin: top left;
  animation: arrow-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* clicks go to the button, image can't be dragged out */
}

/* Pops in each time the breakdown opens (parent goes display:none -> shown) */
@keyframes arrow-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.breakdown__close:hover {
  opacity: 0.8;
}

.breakdown__title {
  color: var(--dark-red);
  font-weight: normal;
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.breakdown__meta {
  color: var(--dark-red);
  font-size: clamp(1rem, 3vw, 1.3rem);
  line-height: 1.3;
}

.breakdown__meta--blue {
  color: var(--dark-blue);
}

.breakdown__role {
  color: var(--dark-red);
  font-size: clamp(1rem, 3vw, 1.3rem);
  margin: 0.6rem 0 0.25rem;
}

.breakdown__intro {
  color: var(--dark-blue);
  text-align: center;
  font-size: clamp(1rem, 3vw, 1.3rem);
  margin: 0.6rem 0 0.25rem;
}

.breakdown__synopsis {
  color: var(--ink);
  text-align: center;
  max-width: 620px;
  margin: 1.25rem auto;
  line-height: 1.5;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
}

.breakdown__section {
  color: var(--dark-blue);
  font-weight: normal;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  margin: 1.5rem 0 0.6rem;
}

.breakdown__section--red {
  color: var(--dark-red);
}

.breakdown__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  color: var(--dark-blue);
  font-size: clamp(1.3rem, 5vw, 2rem);
  margin-top: 0.75rem;
  border: 13px solid transparent;
  border-image: url("../images/red-border.png") 40 / 13px stretch;
}

.breakdown__media--blue {
  border-image-source: url("../images/blue-border.png");
}

.breakdown__media--red {
  color: var(--dark-red);
}

/* Subtitle under a section heading (e.g. the year) */
.breakdown__subheading {
  color: var(--dark-blue);
  text-align: center;
  font-size: clamp(1rem, 3vw, 1.3rem);
  margin: 0.1rem 0 0.2rem;
}

/* Rows of empty placeholder boxes, waiting for real images */
.breakdown__phrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.breakdown__ph {
  display: block;
  aspect-ratio: 4 / 3;
  border: 12px solid transparent;
  border-image: url("../images/red-border.png") 40 / 12px stretch;
  background: rgba(255, 255, 255, 0.35);
  background-clip: padding-box;
}

.breakdown__phrow--portrait {
  grid-template-columns: repeat(4, 1fr);
}

.breakdown__phrow--portrait .breakdown__ph {
  aspect-ratio: 3 / 4;
}

.breakdown__phrow--landscape {
  grid-template-columns: repeat(2, 1fr);
}

.breakdown__phrow--landscape .breakdown__ph {
  aspect-ratio: 3 / 2;
}

.breakdown__phrow--single {
  grid-template-columns: 1fr;
  justify-items: center;
}

.breakdown__phrow--single .breakdown__ph {
  width: min(100%, 420px);
}

@media (max-width: 620px) {
  .breakdown__phrow,
  .breakdown__phrow--portrait {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Framed animation video (hand-drawn blue border) */
.breakdown__videoframe {
  margin-top: 0.75rem;
  border: 13px solid transparent;
  border-image: url("../images/blue-border.png") 40 / 13px stretch;
}

.breakdown__videoframe video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.breakdown__videoframe--red {
  border-image: url("../images/red-border.png") 40 / 13px stretch;
}

/* Role breakdown — four red-bordered boxes of bullet points */
.breakdown__roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.75rem;
  align-items: start;
}

.breakdown__role-box {
  border: 14px solid transparent;
  border-image: url("../images/red-border.png") 40 / 14px stretch;
  padding: 0.4rem 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.35);
  background-clip: padding-box;
}

.breakdown__role-title {
  color: var(--dark-red);
  font-weight: normal;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.1;
  margin: 0.2rem 0 0.5rem;
}

.breakdown__role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.breakdown__role-list li {
  color: var(--dark-blue);
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  line-height: 1.35;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.breakdown__role-list li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: var(--dark-red);
}

@media (max-width: 620px) {
  .breakdown__roles {
    grid-template-columns: 1fr;
  }
}

/* Framed image inside a breakdown (hand-drawn red border) */
.breakdown__frame {
  display: block;
  margin-top: 0.75rem;
  border: 12px solid transparent;
  border-image: url("../images/red-border.png") 40 / 12px stretch;
}

.breakdown__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Frames whose red border is swapped for the blue one */
.breakdown__blueframes .breakdown__frame {
  border-image: url("../images/blue-border.png") 40 / 12px stretch;
}

/* Hint that framed photos are clickable */
.breakdown__frame img {
  transition: filter 0.15s ease;
}
.breakdown__frame img:hover {
  filter: brightness(1.07);
}

/* Lightbox for enlarged photos */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5vh 2.5vw;
  background: rgba(0, 0, 0, 0.85);
}

.lightbox[hidden] {
  display: none;
}

.lightbox img,
.lightbox video {
  max-width: 96%;
  max-height: 82vh;
  width: auto;
  height: auto;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}

.lightbox img[hidden],
.lightbox video[hidden] {
  display: none;
}

.lightbox__caption {
  max-width: 90%;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.3;
}

.lightbox__caption[hidden] {
  display: none;
}

/* Prev / next arrows for paging through a row of photos */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  border: none;
  background: var(--dark-blue);
  color: var(--yellow);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: inherit;
  opacity: 0.9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.lightbox__nav:hover {
  opacity: 1;
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__prev {
  left: 3vw;
}

.lightbox__next {
  right: 3vw;
}

/* Row of framed photos (e.g. puppet shots) */
.breakdown__row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.breakdown__row .breakdown__frame {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

/* 2x2 grid of framed images with captions (e.g. concept art) */
.breakdown__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.75rem;
  align-items: start;
}

/* Vertically centre each image against its row neighbour (shorter ones centre) */
.breakdown__grid--vcenter {
  align-items: center;
}

/* Frames placed directly in a grid (no figure wrapper) shouldn't add top margin */
.breakdown__grid > .breakdown__frame {
  margin-top: 0;
}

/* Force a pair of images to the same size (crops to a shared aspect ratio) */
.breakdown__frame--match {
  aspect-ratio: 71 / 100;
}

.breakdown__frame--match img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-width image spanning both grid columns */
.breakdown__figure--full {
  grid-column: 1 / -1;
}

/* A row that fills the full width, each box fitting its own image (no crop, no
   gaps). Widths grow in proportion to each image's aspect ratio (w/h) so the
   rendered heights come out close and the row justifies edge to edge. */
.breakdown__row--align {
  align-items: flex-start;
}

.breakdown__row--align .breakdown__frame {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

.breakdown__row--align .breakdown__frame img {
  width: 100%;
  height: auto;
}

.breakdown__row--align .is-portrait {
  flex-grow: 100; /* widened so puppet 1 renders bigger */
}

.breakdown__row--align .is-landscape {
  flex-grow: 133; /* aspect ratio 1.33 */
}

/* Single-column stack (each image on its own line) */
.breakdown__grid--stack {
  grid-template-columns: 1fr;
}

/* Frame that hugs its image and centres instead of filling the column */
.breakdown__frame--fit-img {
  justify-self: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

.breakdown__frame--fit-img img {
  width: auto;
  max-width: 100%;
  max-height: 60vh;
}

.breakdown__figure {
  margin: 0;
}

.breakdown__figure .breakdown__frame {
  margin-top: 0;
}

.breakdown__caption {
  margin-top: 0.45rem;
  text-align: center;
  color: #000;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  line-height: 1.25;
}

/* "Fit" figures hug their image and centre within the cell + row */
.breakdown__figure--fit {
  align-self: center;
}

.breakdown__figure--fit .breakdown__frame {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.breakdown__figure--fit .breakdown__frame img {
  width: auto;
  max-width: 100%;
  max-height: 340px;
}

@media (max-width: 520px) {
  .breakdown__grid {
    grid-template-columns: 1fr;
  }
}

/* Grid of looping "gif" clips (e.g. the rigged animations) */
.breakdown__gifs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.breakdown__gif {
  display: block;
  border: 12px solid transparent;
  border-image: url("../images/blue-border.png") 40 / 12px stretch;
  background: #fff;
  background-clip: padding-box;
}

.breakdown__gif video {
  display: block;
  width: 100%;
  height: auto;
}

/* A gif clip that spans both columns of the grid */
.breakdown__gif--full {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .breakdown__gifs {
    grid-template-columns: 1fr;
  }
}

.breakdown__note {
  color: var(--dark-red);
  opacity: 0.7;
  font-size: 0.95rem;
  margin-top: 1.5rem;
  text-align: center;
}

/* Previous / Next navigation between projects */
.breakdown__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.breakdown__navbtn {
  background: var(--dark-blue);
  color: var(--yellow);
  border: none;
  font: inherit;
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
}

.breakdown__navbtn[hidden] {
  display: none;
}

/* keep Next on the right even when Previous is hidden */
.breakdown__next {
  margin-left: auto;
}

/* ---- Contact footer (on every page) ---- */
.contact {
  text-align: center;
  padding: 1.75rem 1rem 2.5rem;
  margin-top: 0;
}

/* Divider line — a hand-drawn stroke sliced from the blue border */
.contact::before {
  content: "";
  display: block;
  width: min(80%, 360px);
  height: 12px;
  margin: 0 auto 1.75rem;
  background: url("../images/blue-line.png") center / 100% 100% no-repeat;
}

.contact__title {
  color: var(--dark-red);
  font-weight: normal;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin-bottom: 0.4rem;
}

.contact__email {
  color: var(--dark-red);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  text-decoration: none;
}

.contact__email:hover {
  text-decoration: underline;
}

.contact__socials {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 0.9rem;
}

.contact__socials a {
  color: var(--dark-red);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
}

.contact__socials svg {
  width: 100%;
  height: 100%;
}

.contact__socials a:hover {
  color: var(--dark-blue);
}

/* ---- Skills ---- */
.skills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.skills-subtitle {
  color: var(--dark-blue);
  font-weight: normal;
  font-size: clamp(1.4rem, 5vw, 2rem);
  margin: 2.25rem 0 1rem;
}

.skills-subtitle--first {
  margin-top: 0.75rem;
}

.skills-subtitle--red {
  color: var(--dark-red);
}

/* Software sits in one panel above the red skills panels */
.skills.software {
  border: 14px solid transparent;
  border-image: url("../images/blue-border.png") 40 / 14px stretch;
  padding: 1rem 1rem 1.1rem;
  max-width: 820px;
  margin: 0 auto;
}

/* Skills split into pipeline stages, two panels per row */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 820px;
  margin: 0 auto;
  align-items: stretch; /* panels in a row match height */
}

.skills-group {
  border: 14px solid transparent;
  border-image: url("../images/red-border.png") 40 / 14px stretch;
  padding: 0.5rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skills-group__title {
  color: var(--dark-blue);
  font-weight: normal;
  font-size: clamp(1.15rem, 3.5vw, 1.55rem);
  line-height: 1.1;
  margin: 0 0 0.85rem;
  text-align: center;
}

/* Pills fill the panel and sit tight to the title */
.skills-group .skills {
  gap: 0.55rem;
  margin: 0;
}

@media (max-width: 560px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
}

/* Tighten the gap between the CV/Download and the contact footer */
#skills {
  padding-bottom: 0;
}

/* CV preview */
.cv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.cv__frame {
  display: block;
  width: min(96%, 680px);
  border: 12px solid transparent;
  border-image: url("../images/blue-border.png") 40 / 12px stretch;
  line-height: 0;
}

.cv__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.cv__link {
  background: var(--dark-blue);
  color: var(--yellow);
  padding: 0.5rem 1.6rem;
  border-radius: 999px;
  font-size: clamp(1.4rem, 5vw, 2rem);
  text-decoration: none;
}

.skills li {
  background: var(--dark-red);
  color: var(--yellow);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: clamp(1rem, 3vw, 1.3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Software logo inside a pill — simplified marks in the site yellow (matching
   the pill's text), sitting straight on the pill with no backing. The Adobe
   badges use the pill's red for their letterforms so they read as knocked out.
   width: auto keeps each mark's own proportions: the ToonBoom wordmark is
   wide, the others are square. */
.skills__icon {
  height: 1.4em;
  width: auto;
  max-width: 3.4em;
  flex: 0 0 auto;
  margin-left: -0.35rem; /* pull back into the pill's padding a little */
}

/* ---- Click star pop ---- */
.click-star {
  position: fixed;
  width: 42px;
  height: auto;
  margin: -21px 0 0 -21px; /* centre on the click point */
  pointer-events: none;
  z-index: 9999;
  animation: star-pop 0.5s ease-out forwards;
}

@keyframes star-pop {
  0%   { transform: scale(0) rotate(0deg);   opacity: 1; }
  60%  { transform: scale(1.3) rotate(25deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(45deg); opacity: 0; }
}

/* ---- Star trail while dragging ---- */
.trail-star {
  position: fixed;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px; /* centre on the pointer */
  pointer-events: none;
  z-index: 9998;
  animation: trail-fade 0.65s ease-out forwards;
}

@keyframes trail-fade {
  0% {
    transform: translate(0, 0) scale(0.95) rotate(var(--rot0, 0deg));
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--dx, 0), var(--dy, 16px))
               scale(0.2) rotate(var(--rot, 35deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .click-star,
  .trail-star { animation-duration: 0.001s; }
}

@media (max-width: 480px) {
  .star { width: 34px; }
  .name-row { gap: 0.75rem; }
}