/* ===== Pesto's Pandora — shared stylesheet ===== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Montserrat:wght@400;500;600;700;800&family=Give+You+Glory&display=swap');

:root {
  --primary: #000;
  --secondary: #ededed;
  --accent-blue: #60a5fa;
  --accent-red: #fb2c36;
  --font-sans: 'Montserrat', sans-serif;
  --font-display: 'Playfair Display', serif;
  --font-script: 'Give You Glory', cursive;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--primary);
  color: var(--secondary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

b,
strong {
  color: var(--accent-red);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Nav ---- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.navbar .brand {
  letter-spacing: 0.15em;
  font-size: 1.4rem;
}

.navbar nav {
  display: flex;
  gap: 48px;
}

.navbar nav a {
  font-size: 0.95rem;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.navbar nav a:hover {
  opacity: 1;
  color: var(--accent-blue);
}

/* ---- Eyebrow / label (existing site language, reused sparingly) ---- */
.label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-blue);
}

/* ---- Section heading (matches existing h2 site style) ---- */
h2,
.h2 {
  font-family: var(--font-display);
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transform: scaleY(1.15);
  width: max-content;
  margin: 0 auto;
}

/* ================= PROJECT PAGE ================= */

.project-hero {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.project-hero img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  border-radius: 20px;
}

.project-heading {
  margin-top: 36px;
  text-align: center;
}

.project-heading .label {
  display: block;
  margin-bottom: 8px;
}

.project-heading h1 {
  font-family: var(--font-display);
  font-size: 3.5rem;
  margin: 0;
  line-height: 1.05;
}

.project-heading p {
  max-width: 62ch;
  margin: 20px auto 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(237, 237, 237, 0.8);
}

/* meta facts row */
.meta-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  margin: 56px auto 0;
  padding: 28px 0;
  border-top: 1px solid rgba(237, 237, 237, 0.15);
  border-bottom: 1px solid rgba(237, 237, 237, 0.15);
  max-width: 900px;
}

.meta-fact {
  min-width: 140px;
}

.meta-fact .label {
  margin-bottom: 6px;
}

.meta-fact .value {
  font-size: 1rem;
  line-height: 1.5;
}

/* stat strip */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px;
  margin: 32px auto 0;
  text-align: center;
}

.stat-strip .stat-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--accent-red);
  display: block;
}

.stat-strip .stat-label {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 4px;
}

/* narrative sections */
.story-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin: 140px auto 0;
  max-width: 1300px;
}

.story-section.reverse .story-media {
  order: 2;
}

.story-section.reverse .story-text {
  order: 1;
}

.story-text .label {
  margin-bottom: 14px;
}

.story-text h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0 0 18px;
  line-height: 1.2;
}

.story-text p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(237, 237, 237, 0.85);
  max-width: 52ch;
}

.story-media img {
  border-radius: 18px;
  width: 100%;
}

.story-media.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* tweets */
.social-proof {
  margin: 140px auto 0;
  text-align: center;
}

.social-proof .label {
  display: block;
  margin-bottom: 28px;
}

.tweet-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

/* back link */
.back-link {
  display: block;
  text-align: center;
  margin: 140px auto 60px;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border: 1px solid rgba(237, 237, 237, 0.3);
  border-radius: 100px;
  width: max-content;
}

.back-link:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

@media (max-width: 800px) {
  .story-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .story-section.reverse .story-media {
    order: 1;
  }

  .story-section.reverse .story-text {
    order: 2;
  }

  .project-heading h1 {
    font-size: 2.4rem;
  }

  h2,
  .h2 {
    font-size: 2.2rem;
  }

  .navbar {
    padding: 20px;
  }

  .navbar nav {
    gap: 24px;
  }
}

/* ================= HOMEPAGE: BANNER ================= */

.banner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: visible;
  aspect-ratio: 1422 / 790;
}

/* Must match MOBILE_BP in app.js (768). Below this the JS uses the mobile
   trinket coordinates, which only make sense on the portrait banner. */
@media (max-width: 767px) {
  .banner {
    aspect-ratio: 640 / 760;
  }

  /* the trinket bands leave 38-52% clear for the heading */
  .banner-heading {
    top: 45%;
    left: 50%;
    width: 84%;
  }
}

.trinkets {
  position: relative;
  width: 100%;
  height: 100%;
}

.trinket {
  position: absolute;
  will-change: transform;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}

.trinket:active {
  cursor: grabbing;
  z-index: 100;
}

.banner-heading {
  position: absolute;
  top: 45.6%;
  left: 50%;
  width: 45%;
  max-width: 640px;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.banner-heading h1 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 3.5rem;
  /* fallback only - JS sets this from banner width */
  line-height: 0.82;
  margin: 0;
  letter-spacing: 0.01em;
}

.banner-heading .subline {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  /* fallback only - JS sets this from banner width */
  line-height: 1.5;
  color: rgba(237, 237, 237, 0.85);
}

/* ================= HOMEPAGE: STRIP ================= */

.strip {
  position: relative;
  width: 100%;
  max-width: 2400px;
  margin: 0 auto;
  overflow-x: clip;
  background: var(--secondary);
}

.strip-track {
  display: flex;
  align-items: center;
  /* max-content makes the track as wide as the full tag run. Without this the
     track is only viewport-wide, so most tags get clipped and the translateX
     percentage measures the wrong thing. */
  width: max-content;
  will-change: transform;
  white-space: nowrap;
}

.strip-item {
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: 13.9px;
  /* 17.4px - 20% */
  font-weight: 600;
  text-transform: uppercase;
  padding: 9.2px 0;
  /* 11.5px - 20% */
  margin: 0;
}

@media (min-width: 768px) {
  .strip-item {
    font-size: 19.0px;
  }
}

/* 23.8px - 20% */
@media (min-width: 1024px) {
  .strip-item {
    font-size: 24.2px;
  }
}

/* 30.2px - 20% */

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

.about {
  width: 90vw;
  max-width: 1000px;
  margin: 120px auto 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
}

.about-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.about-portrait {
  width: 260px;
  height: auto;
  flex-shrink: 0;
}

.about-copy {
  color: rgba(237, 237, 237, 0.8);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
}

.about-copy p {
  margin: 0 0 1.1em;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

/* "about me" in the same script face as the banner heading */
.about-heading {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--secondary);
  text-transform: lowercase;
  margin: auto;
}

/* Camera trinket over the photo. The original renders a 500px-wide image
   scaled by 0.35 on desktop and 0.25 on mobile, rotated -20deg, anchored
   by its centre. */
.about-trinket {
  position: absolute;
  width: 125px;
  /* 500 * 0.25 */
  top: 70%;
  left: 15%;
  transform: translate(-50%, -50%) rotate(-20deg);
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* ---- Brands grid ---- */
.brands {
  width: 100%;
}

/* same face as the banner subline */
.brands-label {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: rgba(237, 237, 237, 0.85);
  text-align: center;
  margin: 0 0 28px;
}

.brand-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* No tile/background - logos sit directly on the black page, as in the
   original carousel. Every logo in the set is either light-inked or a
   coloured block, so all of them read on black without any filter. */
.brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
}

.brand-tile img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (min-width: 640px) {
  .brand-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .brand-tile {
    min-height: 104px;
  }

  .brand-tile img {
    max-height: 84px;
  }

  /* DG3 is a wide mark, so it fills the tile width and reads larger than the
     rest. Cap its height to bring it down 5px. */
  .brand-tile img[alt="DG3"] {
    max-height: 69px;
  }
}

@media (min-width: 1024px) {
  .about-inner {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .about-copy {
    text-align: left;
    font-size: 1.15rem;
  }

  .about-portrait {
    width: 340px;
  }

  .about-heading {
    font-size: 5.5rem;
  }

  .brands-label {
    font-size: 1.05rem;
    margin-bottom: 32px;
  }

  .about-trinket {
    width: 175px;
    top: 10%;
    left: 5%;
  }

  /* 500 * 0.35 */
}

@media (min-width: 1536px) {
  .about-trinket {
    width: 227px;
  }

  /* 650 * 0.35 */
}

/* ================= WORK (index card) ================= */

/* Section heading in the same script face as "Pesto's Pandora" and
   "about me". Replaces the small uppercase WORK label. */
.showcase-heading {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--secondary);
  margin: 0 0 44px;
}

.work {
  width: 90vw;
  max-width: 1000px;
  margin: 0 auto 140px;
}

.section-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(237, 237, 237, 0.5);
  font-weight: 600;
  margin: 0 0 28px;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.work-card-media {
  border-radius: 14px;
  overflow: hidden;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 16 / 9;
}

.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}

.work-card:hover .work-card-media img {
  transform: scale(1.02);
}

.work-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 2px 0;
}

.work-card-title {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--secondary);
  margin: 0;
}

.work-card-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.work-card-tags li {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 237, 237, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .work-card-title {
    font-size: 1.6rem;
  }
}

/* ================= CASE STUDY PAGE ================= */

.case {
  padding-bottom: 120px;
}

/* Hero is capped so the headline stays in the first view. Without this a
   1.53-ratio image renders ~705px tall and pushes the title below the fold
   on a laptop. Cropped rather than letterboxed - the hero is a banner, not
   a screenshot with text to preserve. */
.case-hero {
  margin: 0 0 48px;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 52vh;
  border-radius: 12px;
  overflow: hidden;
}

.case-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Single container: text and image grids share the same left/right edge,
   so nothing overhangs the text column. Paragraphs get a readable measure
   inside it but stay flush left with the images. */
.case-inner {
  width: 90vw;
  max-width: 1080px;
  margin: 0 auto;
}

.case-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.25;
  color: var(--secondary);
  margin: 0 0 40px;
}

/* ---- meta ---- */
.case-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0 0 72px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.case-meta dt {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 237, 237, 0.45);
  margin-bottom: 10px;
}

.case-meta dd {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: rgba(237, 237, 237, 0.9);
  margin: 0 0 4px;
}

.case-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- body sections ---- */
.case-section {
  margin: 0 0 64px;
}

.case-section h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(237, 237, 237, 0.55);
  margin: 0 0 20px;
}

.case-section p {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(237, 237, 237, 0.82);
  margin: 0 0 1.1em;
  /* No max-width: paragraphs span the same width as the image grids so the
     left AND right edges line up down the page. */
}

.case-section p:last-child {
  margin-bottom: 0;
}

/* ---- image grids ----
   Every cell in a row is the same size, so the grids read as tidy blocks.
   --cell sets the cell aspect ratio per group (picked near the median of
   that group's images). Images are contained, never cropped, so no text
   inside a screenshot is ever cut off; the card background matches the
   page so any letterboxing is invisible. */
.shots {
  margin: 40px 0 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.shots figure {
  margin: 0;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: var(--cell, auto);
}

.shots img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* full-bleed single image keeps its own proportions */
.shots.cols-1 figure {
  aspect-ratio: auto;
}

.shots.cols-1 img {
  height: auto;
}

/* a lone portrait image would be enormous at full width - cap and centre it */
.shots.cols-1.portrait figure {
  max-width: 560px;
  margin: 0 auto;
}

/* ---- results ---- */
.case-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.case-results li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.case-results .num {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--secondary);
  line-height: 1;
}

.case-results .lbl {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(237, 237, 237, 0.6);
}

.case-back {
  display: inline-block;
  margin-top: 64px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: rgba(237, 237, 237, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
}

.case-back:hover {
  color: var(--secondary);
}

@media (min-width: 640px) {
  .shots.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .shots.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-results {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 40px;
  }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  /* Feature modifier: makes a card run full width. Unused at six cards
     (they divide evenly into 2x3) - add the class back to work-card if the
     count ever goes odd again. */
  .work-card--featured {
    grid-column: 1 / -1;
  }

  .work-card--featured .work-card-media {
    aspect-ratio: 21 / 9;
  }

  .work-card--featured .work-card-title {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .case-hero {
    margin-bottom: 88px;
  }

  .case-title {
    font-size: 2.6rem;
    margin-bottom: 56px;
  }

  .case-meta {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 96px;
  }

  .case-section {
    margin-bottom: 88px;
  }

  .case-section p {
    font-size: 1.1rem;
  }

  .shots {
    margin-top: 48px;
    gap: 16px;
  }

  .shots.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .case-results {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================= DESIGN GALLERY ================= */

.gallery {
  width: 92vw;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 0 120px;
}


/* Scattered explorations. A 12-column grid with each item given its own
   span, vertical offset and slight rotation, so the page reads as a
   pinboard rather than a uniform gallery. */
.scatter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px 28px;
  align-items: start;
}

.s-item {
  grid-column: var(--col);
  margin: var(--off, 0) 0 0;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.35s ease;
}

.s-item:hover {
  transform: rotate(0deg) scale(1.015);
}

.s-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media (max-width: 820px) {

  /* single column on small screens - the scatter offsets and rotations
     stop reading as intentional once items stack */
  .scatter {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .s-item {
    grid-column: 1 / -1 !important;
    margin-top: 0;
    transform: none;
  }
}


/* ================= CONTACT ================= */

.contact {
  position: relative;
  width: 90vw;
  max-width: 1000px;
  margin: 0 auto;
  padding: 120px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
}

.contact-avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

.contact-heading {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 5rem;
  line-height: 1;
  color: var(--secondary);
  margin: 0 0 40px;
  position: relative;
  z-index: 2;
}

.contact-links {
  list-style: none;
  margin: 0 0 80px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  position: relative;
  z-index: 2;
}

.contact-links a {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 237, 237, 0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-links a:hover {
  color: var(--secondary);
  border-color: var(--secondary);
}

.contact-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 237, 237, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  position: relative;
  z-index: 2;
}

/* Trinkets pulled from the banner, scattered behind the contact block.
   --col places them across five evenly spaced tracks. */
.c-trinket {
  position: absolute;
  top: var(--top);
  left: calc((var(--col) - 1) * 22% + 4%);
  width: var(--w);
  transform: rotate(var(--rot, 0deg));
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
  z-index: 1;
}

@media (max-width: 820px) {
  .showcase-heading {
    font-size: 3.2rem;
  }

  .contact {
    padding: 80px 0 56px;
  }

  .contact-heading {
    font-size: 3.4rem;
  }

  .contact-foot {
    justify-content: center;
    text-align: center;
  }

  /* the scatter crowds the text on narrow screens */
  .c-trinket {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE — tablet and mobile
   Appended last so these rules win. Desktop is unchanged.
   ========================================================= */

/* Rotated and absolutely-positioned pieces can push past the viewport and
   create a sideways scroll. Nothing on this site scrolls horizontally. */
html,
body {
  overflow-x: hidden;
}

/* ---- Script headings ----
   Give You Glory is a wide handwriting face, so a fixed rem size runs off
   the screen on a phone. These scale with the viewport and cap at the
   desktop size, so the word always fits its line. */
.about-heading {
  font-size: clamp(2.6rem, 17vw, 4.5rem);
}

.contact-heading {
  font-size: clamp(2rem, 10vw, 5rem);
}

.showcase-heading {
  font-size: clamp(2.4rem, 15vw, 4.5rem);
}

@media (min-width: 1024px) {
  .about-heading {
    font-size: 5.5rem;
    margin: 0 0 24px;
  }

  .contact-heading {
    font-size: 5rem;
  }
}

/* ---- Navbar ----
   Brand plus four links overflows below ~700px. Let the bar wrap onto two
   centred rows and tighten the type instead of clipping. */
@media (max-width: 720px) {
  .navbar {
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
  }

  .navbar .brand {
    font-size: 1.15rem;
  }

  .navbar nav {
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .navbar nav a {
    font-size: 0.85rem;
  }
}

/* ---- About ---- */
@media (max-width: 1023px) {
  .about {
    margin: 72px auto 96px;
    gap: 64px;
  }

  /* The camera sits over the bio copy once the layout stacks. */
  .about-trinket {
    display: none;
  }

  .about-copy {
    font-size: 1rem;
  }
}

/* ---- Work cards ----
   Two cards side by side get cramped on a tablet in portrait. */
@media (max-width: 860px) {
  .work-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .work-card-title {
    font-size: 1.2rem;
  }

  .work-card-tags li {
    font-size: 0.62rem;
    padding: 5px 10px;
  }
}

/* ---- Case study pages ---- */
@media (max-width: 1023px) {
  .case-title {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }

  .case-hero {
    max-height: 42vh;
  }

  .case-section {
    margin-bottom: 56px;
  }

  .case-section p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .shots {
    margin-top: 32px;
  }
}

@media (max-width: 640px) {

  /* One screenshot per row - two columns of UI shots are unreadable. */
  .shots.cols-2,
  .shots.cols-3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .case-meta {
    gap: 20px;
    margin-bottom: 56px;
    padding-bottom: 32px;
  }

  .case-results {
    gap: 18px;
  }

  .case-results .num {
    font-size: 1.4rem;
  }
}

/* ---- Contact ---- */
@media (max-width: 720px) {
  .contact {
    padding: 72px 0 48px;
  }

  .contact-avatar {
    width: 104px;
    height: 104px;
  }

  .contact-heading {
    padding: 0 14px;
    margin: 0 0 48px;
  }

  .contact-links {
    gap: 12px 22px;
    margin-bottom: 56px;
  }

  .contact-links a {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .contact-foot {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
}

/* ---- Brands grid ---- */
@media (max-width: 520px) {
  .brand-grid {
    gap: 10px;
  }

  .brand-tile {
    min-height: 70px;
  }

  .brand-tile img {
    max-height: 56px;
  }
}

/* Tools section reuses the brands grid; it just needs its own spacing
   since it is not nested inside the about block. */
.tools-section {
  width: 100%;
  max-width: 2400px;
  margin: 0 auto 40px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Running logo strip, same idea as the keyword strip under the banner.
   Two identical tracks sit side by side and both slide left by exactly
   one track width, so the loop is seamless. Every logo is set to the
   same HEIGHT - that is what reads as "same size" across marks whose
   aspect ratios differ. */
.tools-marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.tools-row {
  list-style: none;
  margin: 0;
  padding: 0 28px 0 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 56px;
  animation: tools-scroll 38s linear infinite;
}

.tools-row li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.tools-row img {
  height: clamp(38px, 4vw, 68px);
  width: auto;
  object-fit: contain;
  display: block;
}

@keyframes tools-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.tools-marquee:hover .tools-row {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .tools-row {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .tools-section {
    padding: 0;
  }

  .tools-row {
    gap: 40px;
    animation-duration: 30s;
  }

  .tools-row img {
    height: 34px;
  }
}

@media (max-width: 520px) {
  .tools-row {
    gap: 30px;
    animation-duration: 24s;
  }

  .tools-row img {
    height: 28px;
  }
}

/* Tools label in the script face, but deliberately smaller than the
   section headlines (Showcase, about me, Get in Touch) - 20% up on the
   sans label it replaces, not headline scale. */
.tools-label {
  font-family: var(--font-script);
  font-size: 1.8rem;
  /* was 1rem */
  color: var(--secondary);
}

@media (min-width: 1024px) {
  .tools-label {
    font-size: 2.6rem;
  }

  /* was 1.05rem */
}