/* =====================================================================
   Subham Das — The Editor’s · portfolio styles
   ---------------------------------------------------------------------
   The page HTML is generated by src/render.mjs. Class names follow a
   simple BEM-ish pattern: .block, .block__part, .block--variant.

   CONTENTS
     1.  Design tokens (colours, fonts, sizes)      — change the look here
     2.  Base & reset
     3.  Top bar (logo, section links, timecode)
     4.  Shared pieces (torn paper, buttons, titles, colour squares)
     5.  Hero (name, title, like button, camera viewfinder)
     6.  Services strip
     7.  Testimonials
     8.  Video cards (thumbnails, play buttons, Instagram chips, stickers)
     9.  My Works (parts and grid layouts)
     10. Contact
     11. Footer
     12. Cartoon mascot (paint, poses, animations)
     13. Speech bubble & flying-kiss effects
     14. Scroll-reveal animation
     15. Responsive: tablet · phone · small phone · touch · landscape phone
     16. Reduced motion

   SCREEN SIZES (see section 15)
     Desktop       1024px and wider   (default styles)
     Tablet        700px – 1023px
     Phone         699px and narrower
     Small phone   379px and narrower (e.g. 360px Android phones)
   ===================================================================== */


/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
  /* paper & ink */
  --paper: #F3EADA;       /* main cream background */
  --paper-hi: #FBF5EA;    /* lighter cream for notes and cards */
  --cream: #F6EEDF;       /* text on dark sections */
  --ink: #1D1B19;         /* main text and outlines */
  --ink-2: #5A5249;       /* secondary text */
  --char: #252525;        /* charcoal sections (hero, testimonials, footer) */

  /* accent colours */
  --violet: #A27BFF;
  --violet-d: #6B41D6;
  --cobalt: #2F4BFF;
  --coral: #EC5A3D;
  --mustard: #F4B43A;
  --grass: #1F9E57;
  --pink: #F59BBE;
  --kiss: #E5243F;

  /* fonts (loaded from Google Fonts in the page <head>) */
  --f-display: "Lilita One", "Arial Black", system-ui, sans-serif;  /* chunky headings */
  --f-hand: "Caveat", "Comic Sans MS", "Segoe Print", cursive;       /* handwritten accents */
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: Georgia, "Times New Roman", serif;                      /* testimonial quotes */

  /* layout */
  --wrap: 1040px;   /* max content width */
  --gutter: 20px;   /* left/right page padding */

  /* subtle paper grain, drawn by an inline SVG noise filter (no image download) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}


/* =====================================================================
   2. BASE & RESET
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* no grey flash on Android taps */
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* centred content column */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* "Skip to my works" link for keyboard users (visible only when focused) */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: .6em 1em;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--cream);
}
.skip:focus {
  top: 12px;
}

/* blinking red "recording" dot */
.rec {
  display: inline-block;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #FF4B3A;
  box-shadow: 0 0 0 3px rgba(255, 75, 58, .18);
  animation: blink 1.2s steps(2, jump-none) infinite;
}
@keyframes blink {
  50% { opacity: .25; }
}


/* =====================================================================
   3. TOP BAR — floating pill: logo · section links · timecode
   (the timecode and progress line follow the scroll, see app.js)
   ===================================================================== */
.bar {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 6px 6px 8px 16px;
  border: 1.5px solid rgba(246, 238, 223, .14);
  border-radius: 999px;
  background: rgba(29, 27, 25, .92);
  color: var(--cream);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.bar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  font: 400 1.05rem/1 var(--f-display);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}

.bar__icon {
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: -8px;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}

.bar__links {
  display: flex;
}

.bar__links a {
  padding: .7em .9em;
  border-radius: 999px;
  font: 600 .88rem/1 var(--f-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}

.bar__tc {
  display: flex;
  align-items: center;
  gap: .55em;
  margin-left: 6px;
  padding: .55em .85em;
  border-radius: 999px;
  background: #0E0D0C;
  color: #FFD5CC;
  font: 600 .78rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}

/* thin progress line under the bar (scaled by app.js as you scroll) */
.bar__track {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 3px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(246, 238, 223, .12);
}
.bar__track i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--violet), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
}


/* =====================================================================
   4. SHARED PIECES
   ===================================================================== */

/* charcoal sections */
.dark {
  position: relative;
  background: var(--char) var(--grain);
  color: var(--cream);
}

/* torn-paper edges (SVG shapes defined in src/sprite.mjs) */
.torn {
  position: absolute;
  left: 0;
  width: 100%;
  height: 44px;
  fill: var(--paper);
  pointer-events: none;
}
.torn--under {            /* lighter paper layer peeking out under the edge */
  bottom: 5px;
  fill: #FFFAF1;
}
.hero .torn:not(.torn--under) {
  bottom: -1px;
}
.torn--top {              /* edge flipped to sit on top of a section */
  top: -1px;
  transform: scaleY(-1);
}
.torn--bottom-in {
  bottom: -1px;
}

/* pill button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .85em 1.35em;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font: 700 1rem/1 var(--f-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.btn svg {
  width: 1.15em;
  height: 1.15em;
}
.btn--cream {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--violet);
}

/* big section headings ("TESTIMONIALS", "MY WORKS"...) */
.sec-title {
  margin: 0 0 46px;
  color: var(--cream);
  font: 400 clamp(3rem, 9vw, 6.6rem)/.88 var(--f-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.sec-title--ink {
  color: var(--ink);
}

/* handwritten text */
.hand {
  font: 700 clamp(1.5rem, 3vw, 2.15rem)/1 var(--f-hand);
}

/* small coloured squares next to part headings */
.sq            { display: block; flex: none; width: 36px; height: 22px; }
.sq--blue      { background: var(--cobalt); }
.sq--green     { background: var(--grass); }
.sq--mustard   { background: var(--mustard); }
.sq--coral     { background: var(--coral); }
.sq--violet    { background: var(--violet); }


/* =====================================================================
   5. HERO
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 118px 0 104px;
  background: var(--char) var(--grain);
  color: var(--cream);
}

/* two columns: text on the left, camera viewfinder (with the cartoon) on the right */
.hero__in {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 20px;
}

.hero__name {
  margin: 0;
  color: var(--cream);
  font: 400 clamp(4.3rem, 12.4vw, 10.4rem)/.84 var(--f-display);
  letter-spacing: .012em;
  text-transform: uppercase;
}
.hero__name span {
  display: block;            /* one word per line */
}
.hero__name span + span {
  padding-left: .55em;       /* second word is indented */
}

/* "Video Editor & Colorist" in handwriting, with a scribbled underline */
.hero__role {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: .05em 0 1.05em .3em;
  color: var(--violet);
  font: 700 clamp(2.1rem, 5.4vw, 3.9rem)/1 var(--f-hand);
  transform: rotate(-4deg);
  transform-origin: left;
}
.hero__role span {
  color: var(--mustard);     /* the "&" */
}
.hero__role::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;
  bottom: -.12em;
  height: .16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c40-6 90-7 196-2' fill='none' stroke='%23A27BFF' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: .7;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ---- like button ("43 people like this"), used in the hero and footer ---- */
.like {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .62em 1.15em .62em .75em;
  border: 2px dashed rgba(246, 238, 223, .42);
  border-radius: 999px;
  background: rgba(246, 238, 223, .06);
  color: var(--cream);
  font: 500 .95rem/1 var(--f-body);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .18s;
}
.like b {
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.like__heart {
  width: 1.55em;
  height: 1.55em;
  fill: transparent;
  stroke: var(--pink);
  stroke-width: 2.2;
  transition: fill .2s;
}
.like.is-liked {                       /* after this visitor has liked */
  border-style: solid;
  border-color: var(--pink);
  background: rgba(245, 155, 190, .14);
}
.like.is-liked .like__heart {
  fill: var(--pink);
}
.like.pop .like__heart {               /* little pop when clicked */
  animation: pop .45s cubic-bezier(.3, 1.8, .5, 1);
}
.like--big {
  padding: .85em 1.5em .85em 1em;
  font-size: 1.08rem;
}
@keyframes beat {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.18); }
  60%      { transform: scale(.96); }
}
@keyframes pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ---- camera viewfinder around the cartoon ---- */
.hero__stage {
  position: relative;
}
.vf {
  position: relative;
  width: 100%;
  max-width: 390px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}
.vf::before {                          /* violet spotlight blob */
  content: "";
  position: absolute;
  inset: 14% 12% 12%;
  border-radius: 54% 46% 50% 50% / 46% 52% 48% 54%;
  background: var(--violet-d) var(--grain);
  opacity: .9;
  transform: rotate(-5deg);
}
.vf__c {                               /* the four corner brackets */
  position: absolute;
  width: 38px;
  height: 38px;
  border: 3px solid rgba(246, 238, 223, .85);
}
.vf__c--tl { left: 0;  top: 0;    border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.vf__c--tr { right: 0; top: 0;    border-left: 0;  border-bottom: 0; border-top-right-radius: 10px; }
.vf__c--bl { left: 0;  bottom: 0; border-right: 0; border-top: 0;    border-bottom-left-radius: 10px; }
.vf__c--br { right: 0; bottom: 0; border-left: 0;  border-top: 0;    border-bottom-right-radius: 10px; }
.vf__rec {
  position: absolute;
  left: 22px;
  top: 22px;
  font-size: .8rem;
}
.vf__bat {                             /* battery icon */
  position: absolute;
  right: 22px;
  top: 19px;
  width: 24px;
  height: 12px;
  border: 2px solid rgba(246, 238, 223, .8);
  border-radius: 3px;
}
.vf__bat::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 2px;
  width: 3px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: rgba(246, 238, 223, .8);
}
.vf__bat i {
  position: absolute;
  inset: 1.5px 5px 1.5px 1.5px;
  border-radius: 1px;
  background: #7EE08A;
}

/* Invisible box where the cartoon stands at the top of the page.
   app.js measures it and moves the (fixed-position) cartoon onto it. */
.buddy-home {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 5%;
  aspect-ratio: 220 / 320;
}

/* decorative sparkles and colour wheel */
.doodle        { position: absolute; fill: var(--mustard); }
.doodle--s1    { left: -4%; top: 14%;    width: 30px; height: 30px; animation: twinkle 2.4s ease-in-out infinite; }
.doodle--s2    { right: -2%; top: 42%;   width: 18px; height: 18px; fill: var(--pink);   animation: twinkle 2s .6s ease-in-out infinite; }
.doodle--s3    { left: 6%; bottom: 28%;  width: 22px; height: 22px; fill: var(--violet); animation: twinkle 2.8s 1s ease-in-out infinite; }
.doodle--wheel {
  right: -8%;
  bottom: 6%;
  width: 58px;
  height: 58px;
  fill: none;
  stroke: rgba(246, 238, 223, .5);
  stroke-width: 3;
  stroke-linecap: round;
  animation: spin 14s linear infinite;
}
@keyframes twinkle {
  50% { transform: scale(.6) rotate(20deg); opacity: .6; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =====================================================================
   6. SERVICES STRIP — "Podcasts · Event Recaps · ..." under the hero
   ===================================================================== */
.services {
  padding: 30px 0 6px;
}
.services__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 26px;
  margin: 0 auto;
  list-style: none;
  color: var(--coral);
  font: 500 1.04rem/1.2 var(--f-body);
}
.services b {
  font-weight: 800;
}


/* =====================================================================
   7. TESTIMONIALS — video review + taped paper notes
   ===================================================================== */
.tm {
  margin-top: 70px;
  padding: 118px 0 124px;
}
.tm__grid {
  display: grid;
  grid-template-columns: 290px 1fr;   /* video | notes */
  align-items: start;
  gap: 44px;
}
.tm__grid--solo {                     /* when there is no video testimonial */
  grid-template-columns: 1fr;
}
.tm__notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 26px;
}

.note {
  position: relative;
  margin: 0;
  padding: 30px 24px 20px;
  border-radius: 4px;
  background: var(--paper-hi) var(--grain);
  color: var(--ink);
  box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .75);
}
/* each note is tilted a little differently */
.note:nth-child(1) { rotate: -1.3deg; }
.note:nth-child(2) { rotate: 1.1deg; }
.note:nth-child(3) { rotate: .8deg; }
.note:nth-child(4) { rotate: -1deg; }

/* strip of coloured tape on top of each note */
.note::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  background: rgba(244, 180, 58, .78);
  transform: translateX(-50%) rotate(-3deg);
}
.note:nth-child(2)::before { background: rgba(162, 123, 255, .78); transform: translateX(-50%) rotate(4deg); }
.note:nth-child(3)::before { background: rgba(245, 155, 190, .8); }
.note:nth-child(4)::before { background: rgba(31, 158, 87, .62);  transform: translateX(-50%) rotate(2deg); }

.note blockquote {
  margin: 0 0 18px;
  font: 400 1rem/1.58 var(--f-serif);
}
.note blockquote::before {            /* big coral quote mark */
  content: "“";
  display: block;
  height: .42em;
  margin-bottom: .12em;
  color: var(--coral);
  font: 400 3.2rem/1 var(--f-display);
}
.note figcaption b {
  display: block;
  font: 800 .95rem/1.25 var(--f-body);
}
.note figcaption span {
  color: var(--ink-2);
  font-size: .78rem;
}

/* "And many more…" with a hand-drawn arrow */
.more {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 40px 0 0;
  color: var(--cream);
}
.more svg {
  width: 80px;
  height: 30px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =====================================================================
   8. VIDEO CARDS
   A card is <article class="clip clip--v|h|sq" data-embed="yt:ID|ig:ID">.
   app.js swaps the thumbnail for the real player inside the card.
     .clip--v   tall 9:16 (reels, shorts)
     .clip--h   wide 16:9 (YouTube videos)
     .clip--sq  almost square 5:4
   States added by app.js:
     .is-on       the video is playing in this card
     .is-ig-on    an Instagram post is open in this card (needs more width)
     .is-pointed  the cartoon is pointing at this card
   ===================================================================== */
.clip {
  position: relative;
  display: block;
}

.clip__media {
  position: relative;
  display: block;
  overflow: hidden;
  container-type: inline-size;        /* lets small cards use compact buttons (see below) */
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--char);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), box-shadow .28s;
}
.dark .clip__media {
  border-color: var(--cream);
  box-shadow: 6px 6px 0 var(--violet);
}
.clip--v  .clip__media { aspect-ratio: 9 / 16; }
.clip--h  .clip__media { aspect-ratio: 16 / 9; }
.clip--sq .clip__media { aspect-ratio: 5 / 4; }

.clip__media > img {                  /* thumbnail */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .4s;
}

.clip__title {
  margin: .72em 0 0;
  font: 400 clamp(1.12rem, 1.9vw, 1.42rem)/1.1 var(--f-display);
  letter-spacing: .012em;
}

/* round play button in the middle of the card */
.clip__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .2s;
}
.clip__play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
  fill: currentColor;
}

/* reels with licensed music can only play on Instagram: "Watch on Instagram ↗" pill */
.clip__play--ig {
  top: auto;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  width: auto;
  height: auto;
  margin: 0;
  padding: .6em .95em .6em .7em;
  border-radius: 999px;
  font: 700 .8rem/1 var(--f-body);
  white-space: nowrap;
  transform: translateX(-50%);
}
.clip__play--ig svg  { width: 16px; height: 16px; margin: 0; }
.clip__play--ig .arr { width: 14px; height: 14px; }

/* the client's Instagram account chip (top-left of reel cards) */
.clip__ig {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  max-width: calc(100% - 20px);
  padding: .38em .7em .38em .45em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 .72rem/1 var(--f-body);
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.clip__ig svg {                        /* Instagram-gradient logo */
  flex: none;
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 5px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
}
.clip__ig span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* long / short button labels: the short one shows on narrow cards (container query below) */
.label-short {
  display: none;
}

/* ---- playing state ---- */
.clip__frame {                         /* the YouTube / Instagram player */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  opacity: 0;
  transition: opacity .45s;
}
.clip__frame.ready {
  opacity: 1;
}
.clip.is-on .clip__play {
  opacity: 0;
  pointer-events: none;
}
.clip.is-on .clip__media > img {
  opacity: .35;
}
.clip.is-on .clip__ig {
  display: none;
}

/* an Instagram post grows to the height Instagram reports (app.js sets --igh) */
.clip__media.is-ig {
  aspect-ratio: auto !important;
  background: #fff;
}
.clip__media.is-ig .clip__frame {
  position: relative;
  inset: auto;
  display: block;
  height: var(--igh, 620px);
}

/* "Tap to unmute" button over a playing YouTube video */
.clip__sound {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .55em .95em .55em .75em;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--mustard);
  color: var(--ink);
  font: 700 .82rem/1 var(--f-body);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translateX(-50%);
  animation: nudge 1.6s ease-in-out infinite;
}
.clip__sound svg {
  width: 18px;
  height: 18px;
}
.clip__sound[aria-pressed="true"] {    /* sound is on: small speaker in the corner */
  left: auto;
  right: 10px;
  padding: .5em;
  background: var(--cream);
  transform: none;
  animation: none;
}
@keyframes nudge {
  0%, 100% { transform: translateX(-50%); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* narrow cards (phones, 4-across rows): compact labels so nothing gets cut off */
@container (max-width: 210px) {
  .clip__sound .label-long,
  .clip__play--ig .label-long { display: none; }
  .clip__sound .label-short,
  .clip__play--ig .label-short { display: inline; }
  .clip__play--ig .arr { display: none; }
  .clip__ig { font-size: .66rem; }
}

/* ---- illustrated poster (used when a reel has no thumbnail) ---- */
.poster .clip__media {
  background: var(--c) var(--grain);           /* --c is set per card in render.mjs */
  color: var(--on, var(--cream));
}
.poster .clip__media::before,
.poster .clip__media::after {                  /* film sprocket holes */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(20, 18, 16, .26) 8px 17px);
}
.poster .clip__media::before { left: 7px; }
.poster .clip__media::after  { right: 7px; }
.poster .clip__media.is-ig::before,
.poster .clip__media.is-ig::after,
.clip__media.is-ig .poster__art { display: none; }
.poster__art {                                 /* hand-drawn doodle in the middle */
  position: absolute;
  left: 50%;
  top: 44%;
  width: 52%;
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-50%, -50%) rotate(-6deg);
  transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.clip--sq .poster__art { width: 36%; }
.poster .clip__play {
  top: auto;
  bottom: 16px;
  margin-top: 0;
}

/* ---- "★ best work" sticker (cards marked best in the editor) ---- */
.clip[data-best]::after {
  content: "★ best work";
  position: absolute;
  z-index: 4;
  top: -15px;
  right: -12px;
  padding: .3em .7em .36em;
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  background: var(--mustard);
  color: var(--ink);
  font: 700 1.22rem/1 var(--f-hand);
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(7deg);
  pointer-events: none;
}
.clip.is-pointed::after {
  animation: wiggle .7s ease-in-out 2;
}
.clip.is-pointed .clip__media {
  box-shadow: 5px 5px 0 var(--ink), 0 0 0 7px rgba(244, 180, 58, .5);
}
@keyframes wiggle {
  0%, 100% { transform: rotate(7deg) scale(1); }
  25%      { transform: rotate(-4deg) scale(1.12); }
  50%      { transform: rotate(10deg) scale(1.06); }
  75%      { transform: rotate(2deg) scale(1.1); }
}


/* =====================================================================
   9. MY WORKS — "Part. 01 REELS" headings and card grids
   Layouts are chosen per part in the editor:
     .grid-row  cards in a row, any number (wide cards take 2 columns)
     .grid-p2   "feature 5": two wide · one tall · two wide
     .grid-p3   "feature 4": two stacked · two tall
   (grid-area letters a/b/s/c/d are set on each card by render.mjs)
   ===================================================================== */
.works {
  padding: 96px 0 40px;
}
.part {
  margin-bottom: 96px;
}
.part__head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 34px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.part__no {                            /* "Part. 01" */
  display: flex;
  align-items: baseline;
  margin: 0;
  font: 800 clamp(3.4rem, 8vw, 5.4rem)/.78 var(--f-body);
  letter-spacing: -.05em;
}
.part__no span {
  margin-right: .14em;
  font-size: .25em;
  letter-spacing: 0;
}
.part__name {
  margin: 0 0 .1em;
  font: 400 clamp(1.35rem, 3vw, 2rem)/1 var(--f-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.part__head .sq {
  align-self: center;
  margin-left: auto;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
  align-items: start;
  gap: 30px 24px;
}
.grid-row > .clip--h,
.grid-row > .clip--sq {
  grid-column: span 2;
}

.grid-p2 {
  display: grid;
  grid-template-columns: 1fr .56fr 1fr;
  grid-template-areas:
    "a s c"
    "b s d";
  align-items: center;
  gap: 30px 24px;
}

.grid-p3 {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-areas:
    "a c d"
    "b c d";
  align-items: start;
  gap: 30px 24px;
}


/* =====================================================================
   10. CONTACT — thank-you note, big social buttons, "Book a Meet" card
   ===================================================================== */
.contact {
  padding: 40px 0 132px;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
  gap: 52px;
}
.contact__grid--solo {                 /* no "Book a Meet" card */
  grid-template-columns: minmax(0, 640px);
}
.contact__thanks {
  margin: 0 0 .5em;
  font: 500 clamp(1.2rem, 2.3vw, 1.55rem)/1.45 var(--f-body);
}
.contact__below {
  margin: 0;
  color: var(--coral);
  font: 700 1.7rem/1 var(--f-hand);
}

.socials {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.social {                              /* big coloured button: icon · label · small text */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  color: var(--cream);
  font: 400 1.45rem/1 var(--f-display);
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s;
}
.social svg   { width: 30px; height: 30px; }
.social small { font: 600 .8rem/1 var(--f-body); opacity: .92; }
.social--blue    { background: var(--cobalt); }
.social--green   { background: var(--grass); }
.social--coral   { background: var(--coral); }
.social--violet  { background: var(--violet-d); }
.social--mustard { background: var(--mustard); color: var(--ink); }

.meet {
  position: relative;
  padding: 36px 28px 28px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper-hi) var(--grain);
  box-shadow: 8px 8px 0 var(--violet);
}
.tape {                                /* violet tape on the card */
  position: absolute;
  top: -14px;
  left: 30px;
  width: 112px;
  height: 28px;
  background: rgba(162, 123, 255, .72);
  transform: rotate(-4deg);
}
.meet__title {
  margin: 0 0 .45em;
  font: 400 clamp(1.8rem, 3.4vw, 2.35rem)/1 var(--f-display);
  text-transform: uppercase;
}
.meet__title span {                    /* "(It’s Free)" */
  display: block;
  margin-top: .15em;
  color: var(--coral);
  font: 700 1.7rem/1 var(--f-hand);
  text-transform: none;
}
.meet p {
  margin: 0 0 18px;
  color: var(--ink-2);
}
.meet__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.meet__link svg   { width: 26px; height: 26px; }
.meet__link b     { display: block; font: 400 1.2rem/1.1 var(--f-display); letter-spacing: .01em; }
.meet__link small { color: var(--ink-2); font-size: .8rem; word-break: break-all; }
.meet__link .arr  { width: 20px; height: 20px; }


/* =====================================================================
   11. FOOTER
   ===================================================================== */
.foot {
  padding: 96px 0 46px;
  text-align: center;
}
.foot__in {
  display: grid;
  justify-items: center;
  gap: 30px;
}
.foot__brand {
  display: grid;
  justify-items: center;
}
.foot__brand p {
  margin: .15em 0 0;
  font: 400 clamp(2.8rem, 10vw, 6.6rem)/.9 var(--f-display);
  text-transform: uppercase;
}
.foot__icon {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
  animation: floaty 3.2s ease-in-out infinite;
}
.foot__copy {
  margin: 10px 0 0;
  font-size: .84rem;
  opacity: .65;
}
@keyframes floaty {
  50% { transform: translateY(-8px) rotate(-4deg); }
}


/* =====================================================================
   12. CARTOON MASCOT
   The SVG lives in src/mascot.mjs. app.js moves the .buddy box around and
   sets data-pose on the <svg class="b"> to one of:
     idle · walk · wave · happy · peek · point · ears · listen · kiss · love · sad
   Each pose below = arm angles (CSS variables) + which face parts are visible.

   Arm rig: each arm has a shoulder joint (.arm-u) and an elbow joint (.arm-f).
     --l1 / --l2  left arm  (viewer's left):  shoulder / elbow angle
     --r1 / --r2  right arm (viewer's right): shoulder / elbow angle
   0deg = hanging straight down; positive angles swing the arm to the
   viewer's left. Changing a pose's angles moves the arms smoothly.
   ===================================================================== */
.buddy {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: 200px;                        /* app.js changes width and position */
  aspect-ratio: 220 / 320;
  opacity: 0;                          /* fades in once app.js has placed it */
  pointer-events: none;
  transition: opacity .5s;
}
.buddy.ready {
  opacity: 1;
}

/* cream "sticker" outline so the cartoon stands out on dark sections */
.b {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(2.5px 0 0 var(--cream))
    drop-shadow(-2.5px 0 0 var(--cream))
    drop-shadow(0 2.5px 0 var(--cream))
    drop-shadow(0 -2.5px 0 var(--cream));
}
.b .b-all {
  cursor: pointer;
  pointer-events: auto;                /* tap the cartoon for a reaction */
}

/* ---- paint: colours of each body part ---- */
.b .skin      { fill: #C27A4F; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.b .tee       { fill: #272B36; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.b .jeans     { fill: #37508C; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.b .shoe      { fill: #FBF6EC; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.b .seam      { fill: none; stroke: #535B70; stroke-width: 2; stroke-linecap: round; }
.b .btn-dot   { fill: #9AA0B0; }
.b .tee-logo  { fill: none; stroke: #D2BE8C; stroke-width: 1.8; }
.b .lanyard   { fill: none; stroke: #3F9C4E; stroke-width: 5; stroke-linecap: round; }
.b .idcard    { fill: #F4C542; stroke: var(--ink); stroke-width: 2.5; }
.b .idphoto   { fill: #FFF8E6; }
.b .idline    { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.b .crease    { fill: none; stroke: #8B4A2B; stroke-width: 2; stroke-linecap: round; }
.b .cap-ink   { fill: none; stroke: var(--ink); stroke-width: 22; stroke-linecap: round; }  /* crossed-arm outlines */
.b .cap-skin  { fill: none; stroke: #C27A4F; stroke-width: 16; stroke-linecap: round; }
.b .watchband { fill: none; stroke: #16161A; stroke-width: 6; stroke-linecap: round; }
.b .watch     { fill: #16161A; }
.b .hair      { fill: #1C1612; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.b .hair-hi   { fill: none; stroke: #4A3C33; stroke-width: 2.6; stroke-linecap: round; }
.b .brow      { fill: none; stroke: #1C1612; stroke-width: 5; stroke-linecap: round; }
.b .pupil     { fill: #1C1612; }
.b .glint     { fill: #fff; }
.b .blush     { fill: #F27D7D; opacity: .35; transition: opacity .3s; }
.b .stache    { fill: #2A1E18; opacity: .85; }
.b .mline     { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.b .mouth     { fill: #6E1F2B; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.b .tongue    { fill: #F27C8D; }
.b .lips      { fill: #D8434F; stroke: var(--ink); stroke-width: 2.2; }
.b .eyes-happy path,
.b .eyes-squeeze path,
.b .eye-wink  { fill: none; stroke: #1C1612; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.b .eyes-love path { fill: #E8344E; stroke: var(--ink); stroke-width: 1.5; }
.b .b-shadow  { fill: rgba(0, 0, 0, .2); }
.b .b-sparks  { fill: var(--mustard); }
.b .b-notes text { fill: var(--violet); font: 700 24px/1 system-ui, sans-serif; }

/* ---- default look: arms crossed, open eyes, small smile ---- */
.b .eyes-happy,
.b .eyes-squeeze,
.b .eyes-love,
.b .eye-wink,
.b .m-open,
.b .m-o,
.b .m-kiss,
.b .m-wavy,
.b .m-sad,
.b .finger,
.b .arm {
  display: none;
}
/* every pose except idle/listen uses the movable arms instead of crossed arms */
.b:not([data-pose="idle"]):not([data-pose="listen"]) .arm       { display: inline; }
.b:not([data-pose="idle"]):not([data-pose="listen"]) .b-crossed { display: none; }

/* sparkles and music notes start hidden */
.b .b-sparks use,
.b .b-notes text {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.3, 1.8, .5, 1), opacity .2s;
}

/* ---- the rig ---- */
.b {
  --l1: 10deg;  --l2: -4deg;            /* arms hang relaxed */
  --r1: -10deg; --r2: 4deg;
  --lean: 0deg;                         /* whole-body lean (peeking), set by app.js */
  --tilt: 0deg;                         /* head tilt toward the cursor, set by app.js */
}
.b .arm-u,
.b .arm-f {
  transition: transform .42s cubic-bezier(.3, 1.3, .5, 1);
}
.b .arm--l .arm-u { transform: rotate(var(--l1)); }
.b .arm--l .arm-f { transform: translate(0px, 34px) rotate(var(--l2)); }   /* 34 = upper-arm length */
.b .arm--r .arm-u { transform: rotate(var(--r1)); }
.b .arm--r .arm-f { transform: translate(0px, 34px) rotate(var(--r2)); }

.b .b-lean {
  transform: rotate(var(--lean));
  transform-box: view-box;
  transform-origin: 110px 312px;        /* between the feet */
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1);
}
.b .b-all {
  transform-box: view-box;
  transform-origin: 110px 310px;
  animation: bob 2.8s ease-in-out infinite;   /* gentle breathing */
}
.b .b-head {
  transform: rotate(var(--tilt));
  transform-box: view-box;
  transform-origin: 110px 150px;        /* neck */
  transition: transform .35s ease;
}
.b .b-leg {
  transform-box: fill-box;
  transform-origin: 50% 0;              /* hip */
}
.b .eyes-open {
  transform-box: fill-box;
  transform-origin: center;
  animation: blinkEye 4.6s infinite;
}
.b .iris-g {                            /* pupils follow the cursor (--px/--py set by app.js) */
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform .18s ease-out;
}
.b .brows {
  transition: transform .25s;
}
@keyframes bob {
  50% { transform: translateY(-3px); }
}
@keyframes blinkEye {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5%         { transform: scaleY(.08); }
}

/* ---- POSE: walk (moving around the page) ---- */
.b[data-pose="walk"] .b-all          { animation: walkbob .3s ease-in-out infinite alternate; }
.b[data-pose="walk"] .b-leg--l       { animation: step .3s ease-in-out infinite alternate; }
.b[data-pose="walk"] .b-leg--r       { animation: step .3s ease-in-out infinite alternate-reverse; }
.b[data-pose="walk"] .arm--l .arm-u  { animation: swing .3s ease-in-out infinite alternate; }
.b[data-pose="walk"] .arm--r .arm-u  { animation: swing .3s ease-in-out infinite alternate-reverse; }
@keyframes walkbob {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px) rotate(1.5deg); }
}
@keyframes step {
  from { transform: rotate(14deg); }
  to   { transform: rotate(-14deg); }
}
@keyframes swing {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(16deg); }
}

/* ---- POSE: wave (says hi when the page opens) ---- */
.b[data-pose="wave"]                  { --r1: -150deg; --r2: -20deg; }
.b[data-pose="wave"] .arm--r .arm-f   { animation: wave .4s ease-in-out infinite alternate; }
.b[data-pose="wave"] .m-smile         { display: none; }
.b[data-pose="wave"] .m-open          { display: inline; }
@keyframes wave {
  from { transform: translate(0px, 34px) rotate(-38deg); }
  to   { transform: translate(0px, 34px) rotate(12deg); }
}

/* ---- POSE: happy (cursor on a button) — arms up, closed happy eyes, sparkles ---- */
.b[data-pose="happy"] { --l1: 152deg; --l2: 12deg; --r1: -152deg; --r2: -12deg; }
.b[data-pose="happy"] .b-all,
.b[data-pose="love"] .b-all {
  animation: hop .5s cubic-bezier(.3, 1.4, .5, 1), bounce .9s .5s ease-in-out infinite;
}
.b[data-pose="happy"] .eyes-open,
.b[data-pose="love"] .eyes-open,
.b[data-pose="listen"] .eyes-open,
.b[data-pose="ears"] .eyes-open       { display: none; }
.b[data-pose="happy"] .eyes-happy,
.b[data-pose="listen"] .eyes-happy    { display: inline; }
.b[data-pose="happy"] .m-smile,
.b[data-pose="love"] .m-smile         { display: none; }
.b[data-pose="happy"] .m-open,
.b[data-pose="love"] .m-open          { display: inline; }
.b[data-pose="happy"] .blush,
.b[data-pose="love"] .blush,
.b[data-pose="kiss"] .blush,
.b[data-pose="peek"] .blush           { opacity: .85; }
.b[data-pose="happy"] .brows,
.b[data-pose="love"] .brows,
.b[data-pose="peek"] .brows           { transform: translateY(-4px); }
.b[data-pose="happy"] .b-sparks use,
.b[data-pose="love"] .b-sparks use    { opacity: 1; transform: scale(1); }
@keyframes hop {
  0%   { transform: none; }
  30%  { transform: scale(1.05, .94); }
  62%  { transform: translateY(-16px) scale(.97, 1.04); }
  100% { transform: none; }
}
@keyframes bounce {
  50% { transform: translateY(-6px); }
}

/* ---- POSE: peek (cursor near the like button) — hands clasped, "ooh" mouth ---- */
.b[data-pose="peek"]          { --l1: 6deg; --l2: -118deg; --r1: -6deg; --r2: 118deg; }
.b[data-pose="peek"] .m-smile { display: none; }
.b[data-pose="peek"] .m-o     { display: inline; }
.b[data-pose="peek"] .b-all   { animation: bob 1s ease-in-out infinite; }

/* ---- POSE: love (after a like) — namaste hands + heart eyes ---- */
.b[data-pose="love"]            { --l1: 6deg; --l2: -118deg; --r1: -6deg; --r2: 118deg; }
.b[data-pose="love"] .eyes-love { display: inline; }

/* ---- POSE: kiss — hand to mouth, wink; .throw flings the hand out ---- */
.b[data-pose="kiss"]          { --l1: 170deg; --l2: 96deg; --r1: -10deg; --r2: 6deg; }
.b[data-pose="kiss"].throw    { --l1: 118deg; --l2: -50deg; }
.b[data-pose="kiss"] .eye--l  { display: none; }
.b[data-pose="kiss"] .eye-wink,
.b[data-pose="kiss"] .m-kiss  { display: inline; }
.b[data-pose="kiss"] .m-smile { display: none; }
.b[data-pose="kiss"] .b-head  { transform: rotate(-5deg); }

/* ---- POSE: point (at a best work) — one arm points (--pa from app.js), other hand cupped: "psst!" ---- */
.b[data-pose="point"][data-side="r"] { --r1: var(--pa, -90deg); --r2: 0deg; --l1: 146deg; --l2: 109deg; }
.b[data-pose="point"][data-side="l"] { --l1: var(--pa, 90deg); --l2: 0deg; --r1: -146deg; --r2: -109deg; }
.b[data-pose="point"][data-side="r"] .arm--r .finger,
.b[data-pose="point"][data-side="l"] .arm--l .finger { display: inline; }
.b[data-pose="point"] .m-smile { display: none; }
.b[data-pose="point"] .m-open  { display: inline; }

/* ---- POSE: ears (a video plays muted) — covers ears, peeks out, covers again ---- */
.b[data-pose="ears"]                { --l1: 145deg; --l2: 33deg; --r1: -145deg; --r2: -33deg; }
.b[data-pose="ears"] .eyes-squeeze,
.b[data-pose="ears"] .m-wavy        { display: inline; }
.b[data-pose="ears"] .m-smile       { display: none; }
.b[data-pose="ears"] .arm--l .arm-f { animation: earL 1.8s ease-in-out infinite; }
.b[data-pose="ears"] .arm--r .arm-f { animation: earR 1.8s ease-in-out infinite; }
.b[data-pose="ears"] .b-head        { animation: shake 1.8s ease-in-out infinite; }
@keyframes earL {
  0%, 55%, 100% { transform: translate(0px, 34px) rotate(33deg); }
  70%, 85%      { transform: translate(0px, 34px) rotate(6deg); }
}
@keyframes earR {
  0%, 55%, 100% { transform: translate(0px, 34px) rotate(-33deg); }
  70%, 85%      { transform: translate(0px, 34px) rotate(-6deg); }
}
@keyframes shake {
  0%, 50%, 100% { transform: rotate(0); }
  10%, 30%      { transform: rotate(-3deg); }
  20%, 40%      { transform: rotate(3deg); }
}

/* ---- POSE: listen (a video plays with sound) — nodding with music notes ---- */
.b[data-pose="listen"] .b-head                 { animation: nod .45s ease-in-out infinite alternate; }
.b[data-pose="listen"] .b-notes text           { opacity: 1; animation: note 1.4s ease-in-out infinite; }
.b[data-pose="listen"] .b-notes text:nth-child(2) { animation-delay: .45s; }
.b[data-pose="listen"] .b-notes text:nth-child(3) { animation-delay: .9s; }
@keyframes nod {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg) translateY(2px); }
}
@keyframes note {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px) scale(1.1); }
}

/* ---- POSE: sad (cursor left the like button without clicking) ---- */
.b[data-pose="sad"] .m-smile { display: none; }
.b[data-pose="sad"] .m-sad   { display: inline; }
.b[data-pose="sad"] .brow--l { transform: rotate(-12deg); transform-box: fill-box; transform-origin: right center; }
.b[data-pose="sad"] .brow--r { transform: rotate(12deg);  transform-box: fill-box; transform-origin: left center; }


/* =====================================================================
   13. SPEECH BUBBLE & FLYING-KISS EFFECTS (positioned by app.js)
   ===================================================================== */
.say {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 41;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.say.show {
  opacity: 1;
}
.say span {
  position: relative;
  display: block;
  padding: .42em .85em .5em;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: 700 1.25rem/1.05 var(--f-hand);
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
}
.say.show span {
  animation: pop .32s cubic-bezier(.3, 1.7, .5, 1);
}
.say span::after {                     /* bubble tail, kept pointing at the cartoon (--tail) */
  content: "";
  position: absolute;
  left: calc(50% + var(--tail, 0px));
  bottom: -8px;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  background: #fff;
  transform: rotate(45deg);
}

/* layer for the flying heart, lipstick mark and mini hearts */
.fx {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}
.fk {                                  /* the flying heart */
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  height: 70px;
  color: #E8344E;
}
.fk svg,
.mini svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.fk svg {
  filter: drop-shadow(0 6px 12px rgba(232, 52, 78, .4));
}
.kissmark {                            /* lipstick "mwah!" stamped on the screen */
  position: absolute;
  left: 0;
  top: 0;
  width: min(52vw, 300px);
  color: var(--kiss);
  text-align: center;
}
.kissmark svg {
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 80;
  fill: currentColor;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 10px 22px rgba(215, 38, 61, .45));
}
.kissmark span {
  display: block;
  margin-top: -.05em;
  font: 700 clamp(2.4rem, 7vw, 3.6rem)/1 var(--f-hand);
  text-shadow: 0 2px 0 #fff, 0 0 18px #fff;
  transform: rotate(-6deg);
}
.mini {                                /* small hearts bursting out */
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  color: #F2577A;
}


/* =====================================================================
   14. SCROLL REVEAL — elements with .reveal fade up as they come into view
   (only when JavaScript runs: the <html> element gets the "js" class)
   ===================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}


/* =====================================================================
   15. RESPONSIVE
   ===================================================================== */

/* ---- Hover effects: only on devices with a real mouse/trackpad, so cards
        don't stay "stuck" in their hover state after a tap on Android ---- */
@media (hover: hover) {
  .bar__links a:hover                       { background: rgba(246, 238, 223, .13); }
  .bar__logo:hover .bar__icon               { transform: rotate(-10deg) scale(1.12); }
  .btn--cream:hover                         { box-shadow: 6px 6px 0 var(--violet); transform: translate(-2px, -2px); }
  .like:hover                               { border-color: var(--pink); background: rgba(245, 155, 190, .12); transform: translateY(-2px); }
  .like:hover .like__heart                  { animation: beat .7s ease-in-out infinite; }
  .clip:not(.is-on):hover .clip__media      { box-shadow: 8px 8px 0 var(--ink); transform: translate(-3px, -3px) rotate(-.6deg); }
  .dark .clip:not(.is-on):hover .clip__media{ box-shadow: 9px 9px 0 var(--violet); }
  .clip:not(.is-on):hover .clip__media > img{ transform: scale(1.05); }
  .clip:hover .clip__play                   { transform: scale(1.14); }
  .clip:hover .clip__play--ig               { transform: translateX(-50%) scale(1.06); }
  .clip__ig:hover                           { transform: translateY(-2px) rotate(-2deg); }
  .poster:hover .poster__art                { transform: translate(-50%, -54%) rotate(4deg) scale(1.06); }
  .social:hover                             { box-shadow: 8px 8px 0 var(--ink); transform: translate(-3px, -3px) rotate(-.6deg); }
  .meet__link:hover                         { background: #fff; transform: translateX(4px); }
}

/* ---- TABLET: 1023px and narrower ---- */
@media (max-width: 1023px) {
  .hero {
    padding: 104px 0 96px;
  }
  .hero__in {
    grid-template-columns: 1fr .85fr;
  }
  .vf {
    max-width: 320px;
  }

  .tm__grid {
    grid-template-columns: 240px 1fr;
    gap: 32px;
  }

  .grid-row {
    grid-template-columns: repeat(3, 1fr);   /* 3 reels per row */
  }
  .grid-row > .clip.is-ig-on {
    grid-column: span 2;                     /* room for Instagram's player */
  }
}

/* ---- narrow tablets: notes in one column, contact stacked ---- */
@media (max-width: 899px) {
  .tm__notes {
    grid-template-columns: 1fr;
  }
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* ---- PHONE: 699px and narrower ---- */
@media (max-width: 699px) {
  /* top bar: icon + links only */
  .bar {
    padding: 5px 5px 7px 12px;
  }
  .bar__name,
  .bar__tc {
    display: none;
  }
  .bar__logo {
    margin-right: 2px;
  }
  .bar__links a {
    padding: .75em .62em;
    font-size: .8rem;
  }

  /* hero: one column, cartoon below the text */
  .hero__in {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hero__name span + span {
    padding-left: .3em;
  }
  .vf {
    max-width: 300px;
  }

  .services__row {
    justify-content: center;
    font-size: .95rem;
  }

  .sec-title {
    margin-bottom: 34px;
  }

  /* testimonials: video on top, then the notes */
  .tm {
    padding: 100px 0 108px;
  }
  .tm__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .tm__video {
    width: min(100%, 280px);
  }

  /* works: every layout becomes a simple 2-column grid */
  .works {
    padding: 80px 0 30px;
  }
  .part {
    margin-bottom: 72px;
  }
  .part__head {
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .grid-row,
  .grid-p2,
  .grid-p3 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: none;
    grid-auto-flow: row dense;
    align-items: start;
    gap: 26px 16px;
  }
  .grid-p2 > .clip,
  .grid-p3 > .clip {
    grid-area: auto !important;              /* ignore the desktop positions */
  }
  .grid-p2 > .clip--h,
  .grid-p2 > .clip--sq,
  .grid-p3 > .clip--h,
  .grid-p3 > .clip--sq,
  .clip.is-ig-on {
    grid-column: 1 / -1;                     /* wide cards and open Instagram posts: full width */
  }

  .clip__play:not(.clip__play--ig) {
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
  }
  .clip__sound {
    font-size: .74rem;
  }
  .clip[data-best]::after {
    right: -6px;
    font-size: 1.05rem;
  }

  .contact {
    padding-bottom: 110px;
  }
  .social {
    padding: 14px 16px;
    font-size: 1.25rem;
  }

  .say span {
    font-size: 1.1rem;
  }
}

/* ---- SMALL PHONE: 379px and narrower (e.g. 360px-wide Android phones) ---- */
@media (max-width: 379px) {
  :root {
    --gutter: 14px;
  }
  .bar__links a {
    padding-inline: .5em;
    font-size: .76rem;
  }
  .like {
    font-size: .9rem;
  }
  .grid-row,
  .grid-p2,
  .grid-p3 {
    gap: 22px 12px;
  }
  .clip__title {
    font-size: 1.02rem;
  }
  .note {
    padding: 26px 18px 18px;
  }
  .social {
    gap: 10px;
    padding: 12px 14px;
    font-size: 1.12rem;
  }
  .social svg {
    width: 26px;
    height: 26px;
  }
  .meet {
    padding: 30px 20px 22px;
  }
  .meet__title span,
  .contact__below {
    font-size: 1.5rem;
  }
}

/* ---- TOUCH SCREENS: bigger tap targets (at least ~44px) ---- */
@media (pointer: coarse) {
  .bar__links a {
    padding-block: .95em;
  }
  .clip__ig {
    padding-block: .55em;
  }
  .clip__sound {
    padding-block: .7em;
  }
}

/* ---- PHONE IN LANDSCAPE (short screens): keep the hero compact ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .bar {
    top: 8px;
  }
  .hero {
    padding: 80px 0 84px;
  }
  .hero__in {
    grid-template-columns: 1fr .7fr;
  }
  .vf {
    max-width: 230px;
  }
}


/* =====================================================================
   16. REDUCED MOTION — respect the visitor's system setting
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}