/* Anca Marinică · Portofoliu UGC
   Palette: deep navy + blush, hot pink as the single accent (used on navy only).
   Radius system: media 1.25rem, buttons full pill, phones use device radii. */
@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ms-madi-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ms Madi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ms-madi-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --navy: oklch(0.27 0.115 266);
  --navy-deep: oklch(0.21 0.09 266);
  --navy-line: oklch(0.37 0.12 266);
  --blush: oklch(0.87 0.055 357);
  --blush-hi: oklch(0.93 0.035 357);
  --blush-dim: oklch(0.8 0.05 357);
  --pink: oklch(0.72 0.19 358);
  --pink-press: oklch(0.66 0.2 358);
  --bezel: oklch(0.16 0.03 266);
  --on-navy-soft: color-mix(in oklch, var(--blush) 82%, var(--navy));
  --on-blush-soft: color-mix(in oklch, var(--navy) 80%, var(--blush));

  --font-sans: 'Noto Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-script: 'Ms Madi', 'Snell Roundhand', 'Apple Chancery', cursive;

  --radius: 1.25rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--blush);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.55;
  font-variation-settings: 'opsz' 14;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr-only {
  position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 30;
  background: var(--pink); color: var(--navy-deep); padding: 0.75rem 1.25rem;
  border-radius: 62.4375rem; font-weight: 700; text-decoration: none;
  transition: top 200ms var(--ease-out);
}
.skip:focus { top: 1rem; }
:focus-visible { outline: 0.1875rem solid var(--pink); outline-offset: 0.1875rem; }
.about :focus-visible { outline-color: var(--navy); }
.wrap { width: 100%; max-width: 85rem; margin-inline: auto; padding-inline: var(--gutter); }
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  border-radius: 62.4375rem; border: 0;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn .icon { font-size: 1.25rem; }
.btn:active { transform: scale(0.97); }
.btn--pink { background: var(--pink); color: var(--navy-deep); }
@media (hover: hover) and (pointer: fine) {
  .btn--pink:hover { background: var(--blush-hi); }
}
/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; padding-bottom: clamp(3rem, 7vw, 6rem); }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.5rem; gap: 1.5rem;
}
.wordmark {
  font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none;
  font-variation-settings: 'opsz' 32;
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); font-weight: 600; font-size: 1rem; }
.nav-links a { text-decoration: none; padding: 0.5rem 0; }
.nav-links a:not(.nav-contact) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 0.125rem no-repeat; transition: background-size 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.nav-contact):hover { background-size: 100% 0.125rem; }
}
.nav-contact {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.125rem !important;
  border-radius: 62.4375rem; background: var(--blush); color: var(--navy-deep);
  transition: transform 160ms var(--ease-out);
}
.nav-contact:active { transform: scale(0.97); }
/* rectangular frame: blush mat, pink outline frame set behind and slightly turned */
/* ---------- Brand marquee ---------- */
.brands { margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.brands-title {
  font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-navy-soft); margin: 0 0 1rem 0.5rem;
}
.marquee {
  background: var(--blush);
  color: var(--navy);
  border-radius: 62.4375rem;
  overflow: hidden;
  padding-block: 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 51s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track,
.marquee.is-offscreen .marquee-track { animation-play-state: paused; }   /* only moves while it can be seen */
.marquee-group { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); padding-right: clamp(2.5rem, 5vw, 4.5rem); }
.marquee-group li { display: flex; align-items: center; height: 4rem; }
.logo-lockup { display: inline-flex; align-items: center; gap: 0.625rem; }
.logo-text { font-weight: 800; font-size: 1.875rem; letter-spacing: -0.02em; text-transform: uppercase; font-stretch: 85%; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Logos are single-colour masks, tinted with currentColor */
.logo {
  display: block;
  width: var(--w);
  aspect-ratio: var(--r);
  background-color: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;   /* the image itself is set on each logo */
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
}
/* ---------- Section heads ---------- */
.section-head { display: grid; gap: 0.75rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.section-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.12em; line-height: 0.9; }
.head-bold {
  font-weight: 800; font-size: clamp(3.25rem, 10vw, 9.375rem); letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 96;
}
.head-script {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(3.5rem, 8.4vw, 8rem);
  line-height: 0.85;
  padding: 0 0.1em 0.12em 0;
  transform: translateY(0.1em) rotate(-5deg);
}
.section-head p { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); max-width: 52ch; }
.section-head--dark .head-bold, .section-head--dark .head-script { color: var(--navy); }
.section-head--dark p { color: var(--on-blush-soft); }
/* ---------- About ---------- */
.about { background: var(--blush); color: var(--navy); padding-block: var(--section-y); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head head" "side text";
  column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.about-head { grid-area: head; }
.about-side { grid-area: side; position: sticky; top: 2rem; display: grid; gap: 2.5rem; }
.about-text { grid-area: text; }
.about-text p { max-width: 62ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.65; color: var(--on-blush-soft); text-wrap: pretty; }
.about-text p + p { margin-top: 1.125rem; }
.about-text b { color: var(--navy); font-weight: 700; }
.about-text .about-lead {
  max-width: 34ch; margin-bottom: 1.75rem;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em;
  color: var(--navy);
}
.about-text .about-turn { margin-top: 1.75rem; font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 700; color: var(--navy); }
.about-signoff { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.75rem; }
.about-text .about-smile {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1.15; color: var(--navy);
}
.about-signoff .signature { width: 4.5rem; margin: 0 0 0.5rem; }
.about-stats { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.about-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.about-stats dd { font-weight: 800; font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.about-stats dt { font-weight: 600; font-size: 1rem; margin-top: 0.375rem; }
.signature {
  display: block;
  width: 6rem;
  aspect-ratio: 310 / 560;
  margin-top: 2rem;
  background-color: currentColor;
  -webkit-mask: url(../images/anca-marinica-semnatura.png) center / contain no-repeat;
          mask: url(../images/anca-marinica-semnatura.png) center / contain no-repeat;
  rotate: -8deg;
}
.about-photo { position: relative; width: 100%; max-width: 32rem; }
.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius);
}
/* vinyl sticker: die-cut light edge, slight sheen, soft contact shadow */
.sticker {
  position: absolute; top: -1.25rem; right: -1rem;
  padding: 0.5rem 1.25rem 0.625rem;
  border-radius: 999px;
  border: 0.3125rem solid var(--blush-hi);
  background: linear-gradient(160deg, oklch(1 0 0 / 0.3), transparent 45%), var(--pink);
  color: var(--navy-deep);
  font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap;
  font-variation-settings: 'opsz' 24;
  box-shadow: 0 0.125rem 0.25rem oklch(0.2 0.1 266 / 0.22), 0 0.625rem 1.25rem -0.5rem oklch(0.2 0.1 266 / 0.5);
  rotate: 7deg;
}
/* ---------- Phone mockup ---------- */
.phone {
  position: relative;
  padding: 0.5625rem;
  border-radius: 2.875rem;
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 0.0938rem oklch(0.34 0.05 266),
    0 1.875rem 3.75rem -1.875rem oklch(0.12 0.06 266 / 0.85);
}
.phone::after {
  /* side button */
  content: ''; position: absolute; right: -0.1875rem; top: 22%; width: 0.1875rem; height: 11%;
  border-radius: 0 0.1875rem 0.1875rem 0; background: oklch(0.3 0.04 266);
}
.screen {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 2.3125rem;
  overflow: hidden;
  background: #0b0f24;
  isolation: isolate;
}
.screen::before {
  /* dynamic island */
  content: ''; position: absolute; z-index: 4; top: 2.4%; left: 50%;
  width: 30%; height: 3.4%; translate: -50% 0;
  border-radius: 62.4375rem; background: var(--bezel); pointer-events: none;
}
.screen video, .screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* fullscreen: show the whole vertical video instead of the phone-screen crop */
.screen video:fullscreen { object-fit: contain; background: #000; }
.screen video:-webkit-full-screen { object-fit: contain; background: #000; }
.screen-start, .yt-start {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  width: 100%; height: 100%; padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
.screen-start img, .yt-start img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--ease-out), filter 300ms ease;
}
/* pinned to the exact centre of the screen, independent of how a browser lays out <button> */
.play {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 62.4375rem;
  background: var(--pink); color: var(--navy-deep);
  font-size: 1.625rem;
  box-shadow: 0 0.625rem 1.5rem -0.625rem oklch(0.15 0.08 266 / 0.8);
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.play .icon { display: block; }
.screen-start:active .play, .yt-start:active .play { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .screen-start:hover .play, .yt-start:hover .play { transform: scale(1.08); background: var(--blush-hi); }
  .screen-start:hover img, .yt-start:hover img { transform: scale(1.03); }
}
/* Playing state: poster button stays as a transparent resume layer */
.screen.is-started .screen-start img { opacity: 0; }
.screen.is-started .screen-start { background: oklch(0.12 0.05 266 / 0.35); }
.screen.is-playing .screen-start { opacity: 0; pointer-events: none; }
.screen.is-ended .screen-start img { opacity: 1; }
.screen.is-ended .screen-start { background: transparent; }
.screen-start { transition: opacity 200ms ease, background-color 200ms ease; }
.screen.is-loading .play::after {
  content: ''; position: absolute; inset: -0.4375rem; border-radius: 62.4375rem;
  border: 0.1875rem solid transparent; border-top-color: var(--pink);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 0.25rem;
  padding: 2.5rem 0.75rem 1rem;
  background: linear-gradient(to top, oklch(0.1 0.04 266 / 0.8), transparent);
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.screen.is-started .controls { opacity: 1; transform: none; }
.screen.is-playing.is-idle .controls { opacity: 0; transform: translateY(0.5rem); }
.ctrl {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 62.4375rem;
  background: transparent; color: #fff; font-size: 1.25rem; cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.ctrl:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .ctrl:hover { background: oklch(1 0 0 / 0.16); }
}
.seek {
  flex: 1; min-width: 0; height: 1.5rem; margin: 0 0.25rem;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  --p: 0%;
}
.seek::-webkit-slider-runnable-track {
  height: 0.25rem; border-radius: 62.4375rem;
  background: linear-gradient(to right, var(--pink) var(--p), oklch(1 0 0 / 0.3) var(--p));
}
.seek::-moz-range-track { height: 0.25rem; border-radius: 62.4375rem; background: oklch(1 0 0 / 0.3); }
.seek::-moz-range-progress { height: 0.25rem; border-radius: 62.4375rem; background: var(--pink); }
.seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 0.875rem; height: 0.875rem; margin-top: -0.3125rem;
  border-radius: 62.4375rem; background: #fff; border: 0;
}
.seek::-moz-range-thumb { width: 0.875rem; height: 0.875rem; border-radius: 62.4375rem; background: #fff; border: 0; }
.seek:focus-visible { outline-offset: 0; }
.screen-error {
  position: absolute; inset: auto 1rem 50% 1rem; z-index: 5; translate: 0 50%;
  padding: 0.875rem 1rem; border-radius: 0.875rem;
  background: var(--navy-deep); color: var(--blush-hi); font-size: 0.9375rem; line-height: 1.4; text-align: center;
}
/* ---------- Video reel ---------- */
.reel { padding-top: var(--section-y); }
/* each row of three is a full-width band: navy, blush, navy, ... */
.clip { display: grid; justify-items: center; gap: 1.5rem; }
.clip:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.clip .phone { width: 100%; max-width: 17rem; }
@media (hover: hover) and (pointer: fine) {
  .clip .phone { transition: transform 300ms var(--ease-out); }
  .clip .phone:hover { transform: translateY(-0.375rem); }
}
/* ---------- YouTube (Burger Bear) ---------- */
.yt-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.yt-short { display: grid; justify-items: center; gap: 1rem; }
.yt-short .phone { width: 100%; max-width: 18rem; }
.yt-caption, .yt-ep figcaption { font-size: 1.0625rem; line-height: 1.4; color: var(--on-navy-soft); max-width: 32ch; text-align: center; }
.yt-caption { font-weight: 600; color: var(--blush); }
.yt-episodes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
.yt-ep { display: grid; gap: 0.75rem; }
.yt-ep--main { grid-column: 1 / -1; }
.yt-ep figcaption { text-align: left; max-width: none; }
.yt-ep figcaption b { color: var(--blush); font-weight: 700; margin-right: 0.375rem; }
.yt-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: var(--navy-deep);
  box-shadow: 0 1.5rem 3rem -2rem oklch(0.2 0.1 266 / 0.7);
}
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-ep:not(.yt-ep--main) .play { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; }
/* ---------- Gallery ---------- */
/* ---------- Contact ---------- */
.contact { background: var(--navy); color: var(--blush); padding-block: var(--section-y); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; }
/* two lines: "hai să lucrăm" / "împreună"; size follows the column so line one never wraps */
.contact-text { container-type: inline-size; }
.contact-title {
  font-weight: 800; font-size: clamp(2.5rem, 17.8cqi, 9.75rem); line-height: 0.9; letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 96; white-space: nowrap; margin-bottom: 1.75rem;
}
.contact-text > p { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); color: var(--on-navy-soft); max-width: 44ch; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.btn-social {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 1.25rem; border-radius: 62.4375rem;
  border: 0.125rem solid var(--blush); color: var(--blush);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn-social .icon { font-size: 1.375rem; }
.btn-social:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-social:hover { background: var(--blush); color: var(--navy); }
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0 1rem; border-radius: 62.4375rem;
  border: 0.09375rem solid color-mix(in oklch, var(--blush) 55%, transparent);
  background: transparent; color: var(--blush);
  font-weight: 600; font-size: 0.9375rem; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.copy-btn .icon { font-size: 1.125rem; }
.copy-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .copy-btn:hover { border-color: var(--blush); background: color-mix(in oklch, var(--blush) 12%, transparent); }
}
.copy-btn.is-copied { background: var(--pink); border-color: var(--pink); color: var(--navy-deep); }
/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); color: var(--on-navy-soft); font-size: 0.9375rem; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4.5rem; }
.footer a { display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { color: var(--blush-hi); }
}
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes letter-rise { from { opacity: 0; transform: translateY(45%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(1rem); } }

@keyframes photo-in { from { opacity: 0; transform: translateY(3rem); } }
@keyframes reveal { from { opacity: 0; transform: translateY(2.5rem); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-group[aria-hidden] { display: none; }
  .marquee-group { flex-wrap: wrap; justify-content: center; padding-inline: 1.5rem; row-gap: 1rem; }
  .marquee { border-radius: 2rem; -webkit-mask-image: none; mask-image: none; }
  .screen.is-loading .play::after { animation-duration: 1.6s; }
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "text"; row-gap: 3rem; }
  .about-side { position: static; }
  .about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .about-stats dd { font-size: 2.25rem; }
  .about-stats dt { font-size: 0.875rem; line-height: 1.3; }
  .about-photo { max-width: 32.5rem; }
  .yt-grid { grid-template-columns: 1fr; }
  .yt-short .phone { max-width: 17.5rem; }
}
@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .nav-links li:not(:last-child) { display: none; }
  /* each row of three becomes a swipeable strip */
  .clip { flex: 0 0 62%; scroll-snap-align: center; }
  .clip:nth-child(2) { margin-top: 0; }
  .clip .logo { width: calc(var(--w) * 0.85); }
  .yt-episodes { grid-template-columns: 1fr; }
  .head-script { font-size: 3.5rem; padding-bottom: 0.25em; transform: rotate(-5deg); }
  .sticker { right: -0.5rem; font-size: 1.125rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .marquee { padding-block: 1rem; }
  .marquee-group li { height: 3rem; }
  .marquee .logo { width: calc(var(--w) * 0.75); }
  .logo-text { font-size: 1.5rem; }
}
/* ==========================================================================
   Varianta 2 (pastel): off-white #FAF0EA, blue #82B0CE, pink #F7C9D4.
   The three brand colours are all light, so text uses a deep blue (#1B3348)
   taken from the same hue as #82B0CE; the pastels carry the surfaces.
   ========================================================================== */
/* hero */
/* logo strip */
/* about */
/* section headings: ink on every pastel ground */
/* video reel on blue */
/* burger bear on off-white */
/* gallery on pink, contact on blue, footer in ink */
/* ==========================================================================
   Varianta 3 (noir): variant 1 with the navy replaced by a soft, warm
   off-black (never pure #000). Pinks stay exactly as in variant 1.
   ========================================================================== */
/* ==========================================================================
   Varianta 4: colours and type from "Anca_Marinica_Site_Simulation.pdf"
   (cream, burgundy, dark brown, dusty rose; serif headings, sans body; no green).
   The handwritten script (Ms Madi) stays. Adds: În fața camerei, Hosting &
   events, Original project, phone in contact.
   ========================================================================== */
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/noto-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/noto-serif-ro.woff2) format('woff2');
  unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/noto-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/noto-sans-ro.woff2) format('woff2');
  unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B; }
.v4 {
  --v4-cream: #F6EEE5;
  --v4-cream-2: #FBF7F1;
  --v4-burgundy: #5A262F;
  --v4-burgundy-hover: #6E3039;
  --v4-brown: #2F2725;
  --v4-brown-deep: #241D1B;
  --v4-rose: #C99AA2;
  --v4-rose-text: #A85F66;      /* rose dark enough for large text on cream */
  --v4-rose-light: #F0CBD1;     /* rose light enough to stand out on burgundy (8:1) */
  --v4-ink: #2B2320;
  --v4-taupe: #6E5A4E;

  --navy: var(--v4-brown);
  --navy-deep: var(--v4-brown-deep);
  --blush: var(--v4-cream);
  --blush-hi: #FFFCF8;
  --pink: var(--v4-rose);
  --bezel: #1B1514;
  --font-sans: 'Noto Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
.v4 body { background: var(--v4-cream); color: var(--v4-ink); font-variation-settings: normal; }
.v4 :focus-visible { outline-color: var(--v4-burgundy); }
.v4 .oncam :focus-visible, .v4 .contact-text :focus-visible { outline-color: var(--v4-rose); }
/* serif for the main texts */
.v4 .wordmark,
.v4 .brands-title,
.v4 .head-bold,
.v4 .contact-title,
.v4 .about-stats dd,
.v4 .about-text .about-lead {
  font-family: var(--font-display);
  font-variation-settings: normal;
}
.v4 .wordmark { text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; font-size: 1.125rem; }
.v4 .head-bold { font-weight: 700; letter-spacing: -0.02em; }
.v4 .section-kicker, .section-kicker {
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 0.25rem;
}
/* hero */
.v4 .nav-contact { background: var(--v4-burgundy); color: var(--v4-cream); }
/* the nav stays at the top of the screen: it slides away while scrolling down and comes back when scrolling up */
.topbar-bar {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  transition: transform 320ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.v4 .hero { padding-top: 4.5rem; }   /* the space the fixed bar sits in at the top of the page */
.v4 { scroll-padding-top: 5rem; }     /* anchor jumps land below the bar */
.topbar-bar.is-scrolled { background: var(--v4-cream); box-shadow: 0 0.0625rem 0 rgb(90 38 47 / 0.12), 0 0.75rem 1.5rem -1rem rgb(47 39 37 / 0.35); }
.topbar-bar.is-hidden { transform: translateY(-100%); box-shadow: none; }
.topbar-bar:focus-within { transform: none; }   /* tabbing into the menu always shows it */
@media (prefers-reduced-motion: reduce) { .topbar-bar { transition: none; } }
.v4 .btn--pink { background: var(--v4-burgundy); color: var(--v4-cream); }
/* hero: her name, a handwritten "portofoliu", and a silent showreel of her on camera */
.h4 {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding-top: clamp(1.5rem, 3.5vw, 3rem);
}
.h4-title { display: grid; justify-items: start; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.h4-port {   /* "portofoliu" in the serif, now at a size that sits under the name instead of taking over */
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 8.5vw, 7rem);
  line-height: 0.92; letter-spacing: -0.025em; color: var(--v4-burgundy);
}
.h4-name {   /* her name handwritten just under it: no halo, no overlap, strokes thickened a touch so the script stays crisp */
  margin: 0.02em 0 0 clamp(1.25rem, 6vw, 5rem); padding: 0 0.1em 0.12em;
  font-family: var(--font-script); font-weight: 400; font-size: clamp(3rem, 6.4vw, 5.5rem); line-height: 1;
  color: var(--v4-rose-text); -webkit-text-stroke: 0.014em currentColor; paint-order: stroke fill;
  white-space: nowrap; rotate: -4deg; transform-origin: 0 60%;
}
.h4-desc { max-width: 36ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; color: var(--v4-taupe); }
.h4-desc .sep { color: var(--v4-rose-text); }
.h4-reel { position: relative; justify-self: center; width: clamp(16rem, 25vw, 22rem); margin: 0; }
/* the carousel film: poster with a big play button, plays with sound in the page's own player */
.h4-screen { aspect-ratio: 9 / 16; border-radius: var(--radius); box-shadow: 0 2rem 3.5rem -2rem rgb(47 39 37 / 0.55); }
.h4-screen::before { display: none; }
.h4-screen .play { top: 50%; width: 5rem; height: 5rem; font-size: 2rem; background: var(--v4-rose-light); color: var(--v4-burgundy); }
.h4-screen .play::before {   /* a soft ring that breathes out from the button until the film is started */
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 0.125rem solid var(--v4-rose-light); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .h4-screen:not(.is-started) .play::before { animation: play-ring 2.4s var(--ease-out) 1.6s infinite; }
}
@keyframes play-ring { 0% { opacity: 0.8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
/* two strips of burgundy tape hold the film: one across the top-left, one diagonally over the bottom-right corner */
.h4-reel::before, .h4-reel::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  background: url(../images/decor/banda-bordo.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 0.25rem 0.375rem rgb(47 39 37 / 0.25));
}
.h4-reel::before { top: -1.125rem; left: -1.375rem; width: 8.25rem; height: 2.375rem; rotate: -9deg; }
.h4-reel::after { right: -2.5rem; bottom: -0.15rem; width: 7rem; height: 2.25rem; rotate: -40deg; transform: scaleX(-1); }
.h4-screen .controls { padding-right: 2.25rem; }   /* keeps the fullscreen button clear of the corner tape */

/* muted autoplay: a clear "turn the sound on" button in the corner of the film */
.h4-unmute {
  position: absolute; z-index: 4; top: 0.875rem; right: 0.875rem;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem 0 0.875rem;
  border: 0; border-radius: 62.4375rem; background: var(--v4-rose-light); color: var(--v4-burgundy);
  font: inherit; font-weight: 700; font-size: 0.875rem; cursor: pointer;
  box-shadow: 0 0.5rem 1rem -0.5rem rgb(20 8 11 / 0.6);
  transition: opacity 200ms ease, visibility 0s linear 200ms, transform 160ms var(--ease-out);
}
.h4-unmute .icon { font-size: 1.125rem; }
.h4-unmute:active { transform: scale(0.97); }
.h4-unmute:focus-visible { outline: 0.1875rem solid var(--v4-cream); outline-offset: 0.1875rem; }
.h4-screen.is-muted-preview .h4-unmute { transition: opacity 200ms ease, transform 160ms var(--ease-out); }
.h4-screen:not(.is-muted-preview) .h4-unmute { opacity: 0; visibility: hidden; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .h4-unmute:hover { background: var(--v4-cream); } }
@media (prefers-reduced-motion: no-preference) {
  .h4-port { animation: letter-rise 900ms var(--ease-expo) 120ms both; }
  .h4-name { animation: h4-write 1300ms var(--ease-out) 600ms both; }
  .h4-desc, .h4-cta { animation: fade-up 700ms var(--ease-expo) 800ms both; }
  .h4-reel { animation: photo-in 1000ms var(--ease-expo) 300ms both; }
}
@keyframes h4-write { from { clip-path: inset(-35% 105% -35% -10%); } to { clip-path: inset(-35% -10% -35% -10%); } }
/* the logo ticker, kept quiet: no band, smaller logos in a softened burgundy, the label beside it */
.v4 .brands { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.v4 .brands-title { flex: none; margin: 0; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--v4-brown); }   /* set like the wordmark */
.v4 .marquee {
  flex: 1; min-width: 0; padding-block: 0.5rem; border-radius: 0; background: none;
  color: var(--v4-burgundy); opacity: 0.55; transition: opacity 300ms ease;
}
.v4 .marquee-group li { height: 2.75rem; }
.v4 .marquee .logo { width: calc(var(--w) * 0.58); }
.v4 .marquee .logo-text { font-size: 1.125rem; }
@media (hover: hover) and (pointer: fine) {
  .v4 .marquee:hover { opacity: 0.85; }
}
/* section headings on light / dark grounds */
.v4 .section-head--dark .head-bold { color: var(--v4-burgundy); }
.v4 .section-head--dark .head-script { color: var(--v4-rose-text); }
.v4 .section-head--dark p, .v4 .section-head--dark .section-kicker { color: var(--v4-taupe); }
.v4 .head-bold { font-size: clamp(3rem, 8vw, 7rem); }
.v4 .joaca-head .head-bold { font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.05; }
.v4 .joaca-head .head-script { font-size: clamp(2.75rem, 5.6vw, 5.25rem); }
/* about */
.v4 .about { background: var(--v4-cream-2); color: var(--v4-ink); }
.v4 .about-text p { color: var(--v4-taupe); }
.v4 .about-text .about-lead { color: var(--v4-burgundy); font-weight: 500; letter-spacing: 0; }
.v4 .about-text .about-turn, .v4 .about-text .about-smile, .v4 .about-text b { color: var(--v4-burgundy); }
.v4 .about .signature { color: var(--v4-burgundy); }
/* sign-off: a slightly bigger, straighter signature; the line and the signature write themselves in, pen-style */
.v4 .about-signoff .signature { width: 6rem; rotate: -2deg; }
@media (prefers-reduced-motion: no-preference) {
  .v4 .about-signoff.will-write .about-smile,
  .v4 .about-signoff.will-write .signature { clip-path: inset(-25% 100% -25% -10%); }
  .v4 .about-signoff.is-writing .about-smile { animation: pen-write 2s cubic-bezier(0.45, 0.05, 0.35, 1) both; }
  .v4 .about-signoff.is-writing .signature { animation: pen-write 1.2s cubic-bezier(0.45, 0.05, 0.35, 1) 1.85s both; }
}
@keyframes pen-write {
  from { clip-path: inset(-25% 100% -25% -10%); }
  to { clip-path: inset(-25% -10% -25% -10%); }
}
/* the label is written on a strip of the same tape as the folder notes, holding the photo's corner */
.v4 .sticker {
  top: -1.125rem; right: -1.5rem;
  padding: 0.875rem 2.125rem 0.9375rem 1.875rem;
  border: 0; border-radius: 0; box-shadow: none;
  background: url(../images/decor/banda-roz.webp) center / 100% 100% no-repeat;
  color: var(--v4-burgundy);
  filter: drop-shadow(0 0.25rem 0.375rem rgb(47 39 37 / 0.25));
  rotate: 6deg;
}
@media (max-width: 760px) {
  .v4 .sticker { right: -0.375rem; padding: 0.75rem 1.75rem 0.8125rem 1.5rem; }
}
.v4 .about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.v4 .about-stats div { padding: 1.25rem 1.125rem 1.25rem; border-radius: 0.875rem; }
.v4 .about-stats div:nth-child(1) { background: var(--v4-rose); color: var(--v4-burgundy); }
.v4 .about-stats div:nth-child(2) { background: var(--v4-brown); color: var(--v4-cream); }
.v4 .about-stats div:nth-child(3) { background: var(--v4-burgundy); color: var(--v4-cream); }
.v4 .about-stats dd { font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; }
.v4 .about-stats dt { font-size: 0.875rem; line-height: 1.3; }
/* În fața camerei: the three words, and the section seen through a camera viewfinder */
.oncam { padding-block: var(--section-y); overflow: clip; }
.oncam-stage { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.oncam-words { position: relative; z-index: 2; }
.oncam-title {
  display: grid; justify-items: start; margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3.25rem, 7.2vw, 6rem); line-height: 1; letter-spacing: -0.02em;
}
.oncam-line { display: block; }
.oncam-line:nth-child(2) { margin-left: 0.7em; }
.oncam-line--tape {   /* "Voce." written on a strip of light pink tape, torn at both ends */
  margin-block: 0.06em 0.02em; padding: 0.02em 0.3em 0.1em; rotate: -2.5deg;
  background: var(--v4-rose-light, #F0CBD1); color: var(--v4-burgundy, #5A262F);
  clip-path: polygon(0 5%, 2% 0, 98% 3%, 100% 0, 99% 22%, 100% 45%, 98.5% 68%, 100% 100%, 3% 97%, 0 100%, 1.5% 74%, 0 50%, 1.5% 26%);
}
.oncam-line--script {
  margin: -0.02em 0 0 1.05em; padding: 0 0.1em 0.12em; font-family: var(--font-script); font-weight: 400;
  font-size: 1.32em; line-height: 0.95; letter-spacing: 0; rotate: -5deg; transform-origin: 0 60%;
}
.oncam-lead { max-width: 30ch; font-size: clamp(1.25rem, 1.75vw, 1.5625rem); line-height: 1.5; text-wrap: pretty; }
.oncam-cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); background: var(--v4-rose-light, #F0CBD1); color: var(--v4-burgundy, #5A262F); }
@media (hover: hover) and (pointer: fine) {
  .oncam-cta:hover { background: var(--v4-cream, #F6EEE5); }
}
.viewfinder { position: relative; justify-self: end; width: min(100%, 30rem); margin: 0; }
.vf-screen {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius);
  background: #2A1116; box-shadow: 0 2.5rem 4rem -2rem rgb(20 8 11 / 0.7);
}
.vf-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter 900ms var(--ease-expo), transform 1200ms var(--ease-expo);
}
.vf-screen::after {   /* darker top and bottom so the readout and the subtitles stay legible on any photo */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(28 10 14 / 0.62), transparent 24%, transparent 56%, rgb(28 10 14 / 0.74));
}
.vf-frame {   /* the four corner marks of the viewfinder */
  position: absolute; z-index: 2; inset: clamp(0.75rem, 1.6vw, 1.125rem); pointer-events: none;
  --c: rgb(246 238 229 / 0.92); --l: clamp(1.25rem, 2.4vw, 2rem); --t: 0.1875rem;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left bottom / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right bottom / var(--t) var(--l);
  background-repeat: no-repeat;
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-expo);
}
.vf-focus {
  position: absolute; z-index: 2; left: 58%; top: 42%; width: 24%; aspect-ratio: 1; translate: -50% -50%;   /* on her face in the opening shot */
  border: 0.125rem solid var(--v4-rose-light, #F0CBD1); border-radius: 0.25rem; opacity: 0; pointer-events: none;
}
.vf-hud {
  position: absolute; z-index: 3; top: clamp(1.5rem, 3vw, 2.125rem); left: clamp(1.75rem, 3.4vw, 2.5rem); right: clamp(1.75rem, 3.4vw, 2.5rem);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v4-cream, #F6EEE5);
}
.vf-rec { display: inline-flex; align-items: center; gap: 0.5rem; }
.vf-rec::before { content: ''; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--v4-rose-light, #F0CBD1); }
.vf-cam { margin-left: 0.5rem; opacity: 0.75; }
.vf-time { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.vf-subs {
  position: absolute; z-index: 3; left: 18%; right: 7%; bottom: clamp(1.75rem, 3.6vw, 2.75rem);
  text-align: center; font-size: clamp(0.9375rem, 1.25vw, 1.0625rem); font-weight: 600; line-height: 1.35; color: var(--v4-cream, #F6EEE5);
}
.vf-subs span { display: table; margin: 0.3rem auto 0; padding: 0.2em 0.55em; border-radius: 0.25rem; background: rgb(22 8 11 / 0.72); }
/* second camera: a picture-in-picture that swaps places with the main shot */
.vf-pip {
  position: absolute; z-index: 4; left: -22%; bottom: 12%; width: 36%; padding: 0; cursor: pointer;
  border: 0.375rem solid var(--v4-cream, #F6EEE5); border-radius: 0.875rem; background: var(--v4-cream, #F6EEE5);
  box-shadow: 0 1.25rem 2rem -1rem rgb(20 8 11 / 0.8);
  transition: transform 200ms var(--ease-out);
}
.vf-pip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0.5rem; }
.vf-pip-tag {
  position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 62.4375rem;
  background: var(--v4-rose-light, #F0CBD1); color: var(--v4-burgundy, #5A262F);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.vf-pip:active { transform: scale(0.97); }
.vf-pip:focus-visible { outline: 0.1875rem solid var(--v4-rose-light, #F0CBD1); outline-offset: 0.25rem; }
@media (hover: hover) and (pointer: fine) {
  .vf-pip:hover { transform: translateY(-0.25rem) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  /* the camera finds focus once, when the viewfinder comes into view */
  .viewfinder.is-armed .vf-shot { filter: blur(0.5rem); transform: scale(1.06); }
  .viewfinder.is-armed .vf-frame { opacity: 0; transform: scale(1.08); }
  .viewfinder.is-live .vf-focus { animation: vf-focus 1500ms var(--ease-out) 150ms both; }
  .viewfinder.is-onscreen .vf-rec::before { animation: vf-blink 1.2s steps(1, end) infinite; }
  @supports (animation-timeline: view()) {
    .oncam-line { animation: line-in linear both; animation-timeline: view(); animation-range: entry 10% entry 75%; }
  }
}
@keyframes vf-focus {
  0% { opacity: 0; transform: scale(1.45); }
  35% { opacity: 1; transform: scale(1); }
  55% { opacity: 0.35; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes vf-blink { 50% { opacity: 0.15; } }
@keyframes line-in { from { opacity: 0; transform: translateX(-0.4em); } }
/* portofoliu bands: cream / rose */
.v4 .reel { background: var(--v4-cream); }
.v4 .phone { box-shadow: inset 0 0 0 0.0938rem #3A302D, 0 1.875rem 3.75rem -1.875rem rgb(36 29 27 / 0.7); }
.v4 .phone::after { background: #3A302D; }
.v4 .screen { background: #120E0D; }
.v4 .play { box-shadow: 0 0.625rem 1.5rem -0.625rem rgb(36 29 27 / 0.7); }
.v4 .screen.is-started .screen-start { background: rgb(18 14 13 / 0.35); }
.v4 .controls { background: linear-gradient(to top, rgb(18 14 13 / 0.8), transparent); }
.v4 .yt-frame { box-shadow: 0 1.5rem 3rem -2rem rgb(18 14 13 / 0.7); }
/* Hai cu noi la joacă! (Anca's kids' events business): the text, and a board of taped polaroids with the logo stuck on */
.joaca { padding-block: var(--section-y); color: var(--v4-burgundy); overflow: clip; }
.joaca-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; }
.joaca-head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.joaca-copy p { max-width: 52ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.65; color: var(--v4-taupe); }
.joaca-copy .joaca-lead { font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.35; margin-bottom: 1rem; color: var(--v4-burgundy); }
.joaca-copy b { color: var(--v4-burgundy); }
.joaca-services { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: clamp(1.5rem, 3vw, 2rem) 0; padding: 0; list-style: none; }
.joaca-services li { padding: 0.5rem 1rem; border-radius: 62.4375rem; background: var(--v4-rose-light); color: var(--v4-burgundy); font-weight: 700; font-size: 0.9375rem; }
/* 8:1 */
.joaca-services li:nth-child(1) { rotate: -2deg; }
.joaca-services li:nth-child(2) { rotate: 1.5deg; }
.joaca-services li:nth-child(3) { rotate: -1deg; }
/* the board: positions in % of a square, so the cluster keeps its shape at every width */
.joaca-board { position: relative; aspect-ratio: 1 / 1; }
.joaca-board > * { position: absolute; margin: 0; }
.joaca-snap {
  padding: 0.625rem 0.625rem 2.25rem; border-radius: 0.25rem; background: #FFFDF9;
  box-shadow: 0 0.125rem 0.25rem rgb(47 39 37 / 0.12), 0 1.5rem 2.5rem -1.25rem rgb(47 39 37 / 0.45);
}
.joaca-snap img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.125rem; }
.joaca-snap::before {
  content: ''; position: absolute; z-index: 1; top: -0.875rem; left: 50%; width: 38%; height: 1.625rem;
  translate: -50% 0; rotate: var(--tape-r, -3deg); background: var(--tape, url(../images/decor/banda-roz.webp)) center / 100% 100% no-repeat;
}
.joaca-snap--1 { left: 55%; top: 2%; width: 45%; rotate: 3deg; z-index: 1; --tape: url(../images/decor/banda-dungi.webp); --tape-r: 4deg; }
.joaca-snap--paint { left: 12%; top: 10%; width: 44%; rotate: -2.5deg; z-index: 2; }
.joaca-snap--paint img { aspect-ratio: 900 / 1046; object-position: 50% 30%; }
.joaca-snap--2 { left: 52%; top: 40%; width: 46%; rotate: -2deg; z-index: 3; }
.joaca-snap--3 { left: 3%; top: 63%; width: 44%; rotate: 2.5deg; z-index: 4; --tape: url(../images/decor/banda-dungi.webp); --tape-r: -4deg; }
.joaca-logo { left: 57%; top: 74%; width: 37%; height: auto; rotate: 7deg; z-index: 5; filter: drop-shadow(0 0.5rem 0.875rem rgb(47 39 37 / 0.25)); }
/* Original project: a slim, centred band; "Something new is coming" on one line, the handwritten "new" as the only big element */
.original { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.original-inner { display: grid; justify-items: center; text-align: center; }
.original-label { margin-bottom: clamp(0.75rem, 1.5vw, 1rem); font-size: 0.9375rem; letter-spacing: 0.04em; }
.original-coming { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.35em; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.oc-small { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: 0.01em; }
.original-new {
  display: inline-block; padding: 0 0.1em; font-family: var(--font-script); font-weight: 400;
  font-size: clamp(6.5rem, 12vw, 11rem); line-height: 0.75; rotate: -6deg;
}
.original-title { margin-bottom: 0.75rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.3; text-wrap: balance; }
.original-desc { max-width: 62ch; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.7; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* the word writes itself in, left to right, as it scrolls into view */
    .original-new { animation: write-in linear both; animation-timeline: view(); animation-range: entry 60% cover 32%; }
  }
}
/* the three dots after "is coming" light up one after another, only while the band is on screen */
.oc-dots { display: inline-flex; margin-left: 0.04em; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: no-preference) {
  .original.is-onscreen .oc-dots span { animation: oc-dot 1.5s ease-in-out infinite both; }
  .original.is-onscreen .oc-dots span:nth-child(2) { animation-delay: 0.2s; }
  .original.is-onscreen .oc-dots span:nth-child(3) { animation-delay: 0.4s; }
}
@keyframes oc-dot {
  0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.12em); }
}
@keyframes write-in {
  from { clip-path: inset(-25% 105% -25% -10%); }
  to { clip-path: inset(-25% -10% -25% -10%); }
}
/* contact with card */
.v4 .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.v4 .contact .btn--pink { background: var(--v4-rose); color: var(--v4-brown-deep); }
/* right side: the contact lines in large type, a copy button on each, and her signature to close */
.contact-details { width: 100%; max-width: 30rem; justify-self: end; }
.contact-line { position: relative; padding-block: 1.25rem 1.5rem; border-top: 0.0625rem solid rgb(90 38 47 / 0.18); }
.contact-line:last-child { border-bottom: 0.0625rem solid rgb(90 38 47 / 0.18); }
.contact-line dt { margin-bottom: 0.375rem; font-size: 0.9375rem; color: var(--v4-taupe, #6E5A4E); }
.contact-line dd a {
  font-family: var(--font-display); font-size: clamp(1.375rem, 2.1vw, 1.875rem); line-height: 1.2; color: var(--v4-burgundy, #5A262F);
  text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.22em; text-decoration-color: rgb(90 38 47 / 0.35);
  transition: text-decoration-color 200ms ease;
  overflow-wrap: anywhere;
}
.contact-line .copy-btn { position: absolute; top: 0.875rem; right: 0; }
.v4 .contact-line .copy-btn { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.875rem; border-color: rgb(90 38 47 / 0.35); color: var(--v4-burgundy); }
.v4 .contact-line .copy-btn.is-copied { background: var(--v4-burgundy); border-color: var(--v4-burgundy); color: var(--v4-cream); }
.contact-signoff { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.contact-signoff .contact-sign { width: 3.25rem; margin: 0; rotate: -6deg; color: var(--v4-burgundy, #5A262F); }
.contact-signoff p { font-size: 0.9375rem; color: var(--v4-taupe, #6E5A4E); }
@media (hover: hover) and (pointer: fine) {
  .v4 .btn--pink:hover { background: var(--v4-burgundy-hover); }
  .v4 .contact .btn--pink:hover { background: var(--v4-cream); }
  .v4 .contact-line .copy-btn:hover { border-color: var(--v4-burgundy); background: rgb(90 38 47 / 0.08); }
  .contact-line dd a:hover { text-decoration-color: var(--v4-rose, #C99AA2); }
  .v4 .contact-list dd a:hover { color: var(--v4-brown-deep); }
}
@media (max-width: 960px) {
  .v4 .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-details { justify-self: start; max-width: 34rem; margin-top: 0.5rem; }
  .joaca-grid { grid-template-columns: minmax(0, 1fr); }
  .joaca-board { width: min(100%, 36rem); justify-self: center; }
}
@media (max-width: 760px) {
  .v4 .nav-links li:not(:last-child) { display: none; }
  .oncam-stage { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
  .oncam-words { display: grid; justify-items: center; text-align: center; }   /* phones: the three words and the text sit centred */
  .oncam-title { justify-items: center; }
  .oncam-line:nth-child(2) { margin-left: 0; }
  .oncam-line--script { margin-left: 0; transform-origin: 50% 60%; }
  .oncam-lead { margin-inline: auto; }
  .viewfinder { justify-self: center; width: 100%; max-width: 26rem; margin-bottom: 2rem; }
  .vf-pip { left: auto; right: -0.25rem; bottom: -2rem; width: 36%; border-width: 0.3125rem; }
  .vf-subs { left: 6%; right: 40%; bottom: 1.5rem; text-align: left; font-size: 0.875rem; }
  .vf-subs span { margin-left: 0; }
  .vf-hud { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .joaca-snap { padding: 0.3125rem 0.3125rem 1.125rem; }
  .h4 { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; padding-top: 1rem; }
  .h4-reel { justify-self: center; width: min(72%, 17rem); }
  .h4-screen .play { top: 50%; width: 4rem; height: 4rem; font-size: 1.625rem; }
  .h4-desc { font-size: 1rem; }
  /* phones: Hai la joacă text centred, the headline broken evenly, "de peste 12 ani." tucked under it */
  .joaca-text { text-align: center; }
  .joaca-head { justify-items: center; }
  .joaca-head h2 { justify-content: center; }
  .v4 .joaca-head .head-bold { text-wrap: balance; }
  .joaca-head .head-script { transform: rotate(-3deg); margin-top: 0.08em; }
  .joaca-copy p { margin-inline: auto; }
  .joaca-services { justify-content: center; }
  /* phones: tighter space around the "despre mine" heading */
  .v4 .about { padding-top: 3rem; }
  .about-head { margin-bottom: 0; justify-items: center; text-align: center; }
  .about-head h2 { justify-content: center; }
  .about-grid { row-gap: 2.5rem; }
  .h4-copy { display: grid; justify-items: center; text-align: center; }   /* phones: the hero text sits centred */
  .h4-title { justify-items: center; }
  .h4-name { margin-left: 0; transform-origin: 50% 60%; }
  .h4-desc { margin-inline: auto; }
  .v4 .brands { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .v4 .brands-title { text-align: center; }
  .v4 .marquee .logo { width: calc(var(--w) * 0.5); }
  .original-coming { flex-direction: column; align-items: center; row-gap: 0.25rem; }
  /* phones: the board uses the full width, two photos per row, overlapping a little, the logo sticker at the bottom right */
  .joaca-board { aspect-ratio: 1 / 1.1; }
  .joaca-snap--1 { left: 50%; top: 0; width: 50%; }
  .joaca-snap--paint { left: 0; top: 4.5%; width: 52%; }
  .joaca-snap--2 { left: 47%; top: 36%; width: 53%; }
  .joaca-snap--3 { left: 1%; top: 63%; width: 50%; }
  .joaca-logo { left: 55%; top: 72%; width: 42%; }
  .joaca-snap::before { height: 0.875rem; top: -0.5rem; }
  .v4 .about-stats { gap: 0.5rem; }
  .v4 .about-stats div { padding: 0.875rem 0.75rem 1rem; }
  .v4 .about-stats dd { font-size: 2.25rem; }
  .v4 .about-stats dt { font-size: 0.8125rem; }
}
/* ---------- Varianta 4: client folders (pile -> grid) + pop-up panels ---------- */
.v4 {
  --fold-back: #47202A;
  --fold-front: var(--v4-burgundy);
  --fold-paper: #FBF7F1;
  --fold-note: #F6EEE5;
  --fold-ink: var(--v4-burgundy);
  --fold-tape: rgb(201 154 162 / 0.8);
}
.v4 .folders-section { background: var(--v4-cream); padding-bottom: 0; }
.folders-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.folders-intro .section-head { margin-bottom: 0; }
.folder-pile { display: none; height: clamp(20rem, 30vw, 28rem); }
.js-fly .folder-pile { display: block; }
.folders-band { margin-top: clamp(3rem, 6vw, 5rem); padding-block: clamp(3.5rem, 7vw, 6rem); }
.v4 .folders-band { background: var(--v4-rose); }
.folders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3.4vw, 3.25rem) clamp(1rem, 2.4vw, 2.25rem); }
.folder-item { position: relative; display: grid; align-content: start; gap: 0.875rem; will-change: transform; }   /* a longer name in the same row never stretches the folder */
.folder-name { text-align: center; font-weight: 700; font-size: 1rem; transition: opacity 300ms ease; }
.v4 .folder-name { color: var(--v4-burgundy); }
.folder-item.is-piled .folder-name { opacity: 0; }
/* the folder itself: back with tab, a sheet, a polaroid of one clip, front flap, taped note with the logo */
.folder {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 4;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0.75rem;
  transition: transform 300ms var(--ease-out);
}
.folder-back { position: absolute; inset: 9% 0 0; border-radius: 0.75rem; background: var(--fold-back); }
.folder-back::before {
  content: ''; position: absolute; left: 7%; top: -9%; width: 38%; height: 11%;
  border-radius: 0.625rem 0.625rem 0 0; background: inherit;
}
.folder-paper {
  position: absolute; left: 5%; right: 5%; top: 14%; height: 46%;
  border-radius: 0.375rem; background: var(--fold-paper);
  transition: transform 400ms var(--ease-out);
}
.folder-photo {
  position: absolute; left: 10%; top: 5%; width: 26%; aspect-ratio: 3 / 4; height: auto;
  object-fit: cover; object-position: 50% 25%;
  border: 0.3125rem solid #fff; border-bottom-width: 0.875rem; border-radius: 0.125rem;
  rotate: -6deg; box-shadow: 0 0.375rem 0.875rem -0.375rem rgb(36 29 27 / 0.5);
  transition: transform 450ms var(--ease-out);
}
.folder-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  border-radius: 0.75rem; background: var(--fold-front);
  box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 0.14), 0 1.125rem 1.75rem -1.125rem rgb(36 29 27 / 0.75);
  transform-origin: 50% 100%;
  transition: transform 450ms var(--ease-out);
}
.folder-note {
  position: absolute; right: 9%; bottom: 13%; width: 50%; height: 45%;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 8% 9%;
  background: var(--fold-note); color: var(--fold-ink); border-radius: 0.25rem;
  rotate: 3deg; box-shadow: 0 0.375rem 0.75rem -0.375rem rgb(36 29 27 / 0.55);
  transition: transform 450ms var(--ease-out);
}
.folder-note::before {
  content: ''; position: absolute; left: 50%; top: -0.5rem; width: 42%; height: 1.125rem;
  translate: -50% 0; rotate: -4deg; background: var(--fold-tape); border-radius: 0.125rem;
}
.folder-note .logo { max-width: 100%; height: auto; min-width: 0; }
.folder-note--multi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; }
.folder-note .logo-text { width: 100%; white-space: normal; font-family: var(--font-display, inherit); font-weight: 800; font-size: clamp(0.875rem, 1.4vw, 1.1875rem); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; line-height: 1.05; }
.folder-count {
  position: absolute; left: 7%; bottom: 9%;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgb(246 238 229 / 0.9);
}
.folder:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .folder:hover .folder-front, .folder:focus-visible .folder-front { transform: perspective(40rem) rotateX(-14deg); }
  .folder:hover .folder-photo, .folder:focus-visible .folder-photo { transform: translateY(-18%) rotate(-3deg); }
  .folder:hover .folder-paper, .folder:focus-visible .folder-paper { transform: translateY(-7%); }
  .folder:hover .folder-note, .folder:focus-visible .folder-note { transform: translateY(0.25rem); }
}
/* pop-up panel with the client's clips */
html.modal-open { overflow: hidden; }
.folder-modal {
  width: min(72rem, 100% - 2rem); max-width: none; max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: 1.25rem; overflow: hidden;
  box-shadow: 0 2rem 5rem -1.5rem rgb(18 14 13 / 0.6);
}
.v4 .folder-modal { background: var(--v4-cream-2); color: var(--v4-ink); }
.folder-modal::backdrop { background: rgb(36 29 27 / 0.72); backdrop-filter: blur(0.25rem); }
.folder-modal[open]::backdrop { animation: fm-fade 300ms ease both; }
@keyframes fm-fade { from { opacity: 0; } }
.fm-inner { --fm-pad: clamp(1.25rem, 3vw, 2.5rem); max-height: calc(100dvh - 2rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--fm-pad) clamp(1.5rem, 3vw, 2.5rem); }
.fm-head {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 1rem 1.5rem;
  padding-block: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.v4 .fm-head { background: var(--v4-cream-2); border-bottom: 0.0625rem solid rgb(90 38 47 / 0.15); color: var(--v4-burgundy); }
.fm-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.fm-logos .logo { width: calc(var(--w) * 0.9); }
.fm-logos .logo-text { font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }
.fm-title h3 { font-family: var(--font-display, inherit); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.1; }
.fm-title p { font-size: 0.9375rem; }
.v4 .fm-title p { color: var(--v4-taupe); }
.fm-close {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 62.4375rem;
  font-size: 1.125rem; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.v4 .fm-close { background: var(--v4-burgundy); color: var(--v4-cream); }
.fm-close:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .v4 .fm-close:hover { background: var(--v4-brown); }
}
.fm-clips { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 15rem)); justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); justify-items: center; align-items: start; }
.fm-clips .clip { width: 100%; justify-items: center; gap: 1rem; }
.fm-clips .clip:nth-child(2) { margin-top: 0; }
.fm-clips .phone { max-width: 15rem; }
.v4 .folder-modal .yt-caption, .v4 .folder-modal .yt-ep figcaption b { color: var(--v4-burgundy); }
.v4 .folder-modal .yt-ep figcaption { color: var(--v4-taupe); }
.v4 .folder-modal :focus-visible { outline-color: var(--v4-burgundy); }
@media (max-width: 960px) {
  .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .folders-intro { grid-template-columns: minmax(0, 1fr); }
  /* phones: the pile sits over the top of the grid, so once the folders land the grid starts right under the text */
  .folder-pile { height: 19rem; margin-top: 3rem; margin-bottom: -19rem; }
  .folders-band { margin-top: 0; padding-top: 0; }
  .folders-intro .section-head { justify-items: center; text-align: center; }
  .folders-intro .section-head h2 { justify-content: center; }
  .folders-intro .section-head p { margin-inline: auto; }
  .folders { gap: 1.75rem 1rem; }
  .folder-count { font-size: 0.625rem; letter-spacing: 0.08em; }
  .folder-note::before { height: 0.75rem; top: -0.375rem; }
  .folder-note { right: 6%; width: 46%; padding: 9% 8% 7%; }
  .folder-note--multi { gap: 0.25rem; }
  .folder-note--multi .logo { width: calc(var(--w) * 0.72); }
  .folder-name { font-size: 0.875rem; }
  .folder-modal { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .fm-inner { max-height: calc(100dvh - 1rem); }
  .folder-modal[open] { max-height: calc(100dvh - 1rem - var(--fm-tab-h)); }
  .folder-modal .fm-inner { max-height: none; }
  .fm-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; }
  .fm-logos .logo { width: calc(var(--w) * 0.7); }
}
/* ---------- Folder panels: clips in polaroid frames (varianta 4) ---------- */
.v4 { --paper: #FFFDF9; }
.snap, .polaroid {
  position: relative; background: var(--paper, #fff); border-radius: 0.25rem;
  padding: 0.625rem 0.625rem 0;
  box-shadow: 0 0.125rem 0.25rem rgb(36 29 27 / 0.1), 0 1rem 2rem -1rem rgb(36 29 27 / 0.45);
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
.snap { width: 100%; max-width: 15rem; }
.snap .screen { aspect-ratio: 9 / 16; border-radius: 0.125rem; }
.snap .screen::before { display: none; }
.snap-caption, .polaroid figcaption {
  font-family: var(--font-script); font-weight: 400; line-height: 1; text-align: center;
  padding: 0.75rem 0.25rem 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snap-caption { font-size: clamp(1.5rem, 2vw, 1.875rem); }
.v4 .snap-caption, .v4 .folder-modal .polaroid figcaption, .v4 .folder-modal .polaroid figcaption b { color: var(--v4-burgundy); }
.polaroid figcaption { font-size: clamp(1.375rem, 1.8vw, 1.75rem); max-width: none; }
.polaroid figcaption b { font-weight: 400; margin-right: 0.35em; }
.polaroid figcaption { white-space: normal; text-wrap: balance; line-height: 1.1; }
.yt-ep:not(.yt-ep--main) figcaption { font-size: clamp(1.125rem, 1.4vw, 1.375rem); }
.polaroid .yt-frame { border-radius: 0.125rem; box-shadow: none; }
.yt-short .snap { max-width: 18rem; }
.v4 .fm-head { background: #F3E9E0; }
.v4 .folder-modal { background: #F3E9E0; }
/* the folder's tab sticks up from the panel's top-left edge, so the panel reads as the folder, opened */
.folder-modal {
  --fm-tab-h: clamp(1.5rem, 2.6vw, 2.25rem);
  overflow: visible;
  max-height: calc(100dvh - 2rem - var(--fm-tab-h));
  translate: 0 calc(var(--fm-tab-h) / 2);
}
.folder-modal[open] { display: flex; flex-direction: column; }
.folder-modal .fm-inner { flex: 1 1 auto; min-height: 0; max-height: none; border-radius: 1.25rem; }
.fm-tab {
  position: absolute; left: clamp(1.25rem, 6%, 4rem); bottom: calc(100% - 0.0625rem);
  width: clamp(7rem, 24%, 15rem); height: var(--fm-tab-h);
  border-radius: 0.875rem 0.875rem 0 0; background: #F3E9E0;
}
.fm-head { z-index: 10; margin-inline: calc(-1 * var(--fm-pad)); padding-inline: var(--fm-pad); }   /* the sticky header covers the full width, so clips never show beside it */
@media (hover: hover) and (pointer: fine) {
  .snap:hover, .polaroid:hover { transform: translateY(-0.25rem) rotate(-1deg); box-shadow: 0 0.125rem 0.25rem rgb(36 29 27 / 0.1), 0 1.5rem 2.5rem -1rem rgb(36 29 27 / 0.5); }
  .fm-clips .clip:nth-child(even) .snap:hover, .yt-ep:nth-child(even):hover { transform: translateY(-0.25rem) rotate(1deg); }
}
.folder-modal .fm-clips { row-gap: clamp(1.75rem, 3vw, 2.5rem); }
/* real tape on the folder notes, a different piece on each folder */
.folder-note::before { background: url(../images/decor/banda-zmeura.webp) center / 100% 100% no-repeat; border-radius: 0; height: 1.25rem; width: 46%; }
.folder-item:nth-child(4n+2) .folder-note::before { background-image: url(../images/decor/banda-corai.webp); rotate: 3deg; }
.folder-item:nth-child(4n+3) .folder-note::before { background-image: url(../images/decor/banda-dungi.webp); rotate: -2deg; }
.folder-item:nth-child(4n+4) .folder-note::before { background-image: url(../images/decor/banda-caramiziu.webp); rotate: 5deg; }
@media (max-width: 760px) {
  .snap, .polaroid { padding: 0.4375rem 0.4375rem 0; }
  .snap-caption { font-size: 1.25rem; padding: 0.5rem 0.125rem 0.625rem; }
  .polaroid figcaption { font-size: 1.25rem; }
  .folder-note::before { height: 0.875rem; }
}
/* ---------- Varianta 4: three grounds taking turns: cream, white cream, burgundy (rose only as an accent) ---------- */
.v4 .about, .v4 .joaca { background: var(--v4-cream-2); }
.v4 .oncam, .v4 .original { background: var(--v4-burgundy); }
.v4 .folders-section, .v4 .contact { background: var(--v4-cream); }
.v4 .folders-band { background: none; }
/* white cream grounds keep the page's usual text colours; the stats use burgundy with one rose accent */
.v4 .about-stats div:nth-child(odd) { background: var(--v4-burgundy); color: var(--v4-cream); }
.v4 .about-stats div:nth-child(2) { background: var(--v4-rose); color: var(--v4-burgundy); }
/* burgundy grounds: cream text, accents in the light rose so they stand out */
.v4 .oncam { color: var(--v4-cream); }
.v4 .oncam-line--script { color: var(--v4-rose-light); }
.v4 .oncam-lead { color: rgb(246 238 229 / 0.84); }
.v4 .original { color: var(--v4-cream); }
.v4 .original-new, .v4 .original-label { color: var(--v4-rose-light); }
.v4 .original-desc { color: rgb(246 238 229 / 0.86); }
.v4 .oncam :focus-visible, .v4 .original :focus-visible { outline-color: var(--v4-rose-light); }
/* contact back on cream, the footer continues it */
.v4 .contact { color: var(--v4-burgundy); }
.v4 .contact-text > p { color: var(--v4-taupe); }
.v4 .contact .btn--pink { background: var(--v4-burgundy); color: var(--v4-cream); }
.v4 .btn-social { border-color: var(--v4-burgundy); color: var(--v4-burgundy); }
.v4 .contact-text :focus-visible { outline-color: var(--v4-burgundy); }
.v4 .footer { background: var(--v4-cream); color: var(--v4-taupe); border-top: 0.0625rem solid rgb(90 38 47 / 0.15); }
@media (hover: hover) and (pointer: fine) {
  .v4 .contact .btn--pink:hover { background: var(--v4-burgundy-hover); }
  .v4 .btn-social:hover { background: var(--v4-burgundy); color: var(--v4-cream); }
  .v4 .footer a:hover { color: var(--v4-burgundy); }
}

/* the smallest phones: the roles line stays on one line instead of leaving "Host" alone */
@media (max-width: 370px) { .h4-desc { font-size: 0.875rem; } }

/* Burger Bear folder: YouTube and TikTok sections */
.fm-sub {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem); text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 2.2vw, 1.75rem); color: var(--v4-burgundy);
}
.fm-sub:first-child { margin-top: 0; }
.fm-clips--tt { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); }
.fm-clips--tt .clip { flex: 0 0 auto; width: min(100%, 15rem); display: grid; justify-items: center; }
@media (max-width: 760px) {
  .fm-clips--tt { gap: 1.25rem; }
  .fm-clips--tt .clip { width: calc(50% - 0.625rem); }
}

/* the two spots after the last folder: an empty "folder slot" asking the next brand to get in touch */
.folders-cta {
  grid-column: span 2; align-self: start; aspect-ratio: 8 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 1.5rem; text-align: center;
  border: 0.125rem dashed rgb(90 38 47 / 0.35); border-radius: 0.75rem; background: rgb(255 253 249 / 0.6);
}
@media (max-width: 960px) {   /* full width, and as tall as its content with even room above and below */
  .folders-cta { grid-column: 1 / -1; aspect-ratio: auto; padding: 2.25rem 1.25rem; }
}
.folders-cta-kicker { font-family: var(--font-script); font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1.2; color: var(--v4-rose-text); }
.folders-cta-text { margin-bottom: 0.875rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.25; color: var(--v4-burgundy); text-wrap: balance; }
.js-fly .folders-cta { opacity: 0; transform: translateY(1rem); transition: opacity 400ms ease, transform 500ms var(--ease-out); }
.js-fly .folders.is-landed .folders-cta { opacity: 1; transform: none; }

/* Hai cu noi la joacă folder: the colour logo, a wide clip, and the photo gallery */
.folder-note-img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.fm-logos .fm-logo-img { display: block; width: clamp(5rem, 9vw, 7rem); height: auto; }
.fm-clips--tt .clip--wide { width: min(100%, 32rem); }
.clip--wide .snap { max-width: none; }
.clip--wide .snap .screen { aspect-ratio: 16 / 9; }
.fm-gallery { columns: 3 12rem; column-gap: clamp(0.75rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.fm-gallery li { break-inside: avoid; margin-bottom: clamp(0.75rem, 2vw, 1.25rem); }
.gal-item {
  display: block; width: 100%; padding: 0.375rem; border: 0; border-radius: 0.25rem; background: #FFFDF9; cursor: zoom-in;
  box-shadow: 0 0.125rem 0.25rem rgb(36 29 27 / 0.1), 0 1rem 2rem -1rem rgb(36 29 27 / 0.45);
  transition: transform 250ms var(--ease-out);
}
.gal-item img { display: block; width: 100%; height: auto; border-radius: 0.125rem; }
.gal-item:active { transform: scale(0.98); }
.gal-item:focus-visible { outline: 0.1875rem solid var(--v4-burgundy); outline-offset: 0.1875rem; }
@media (hover: hover) and (pointer: fine) { .gal-item:hover { transform: translateY(-0.25rem) rotate(-0.75deg); } }
@media (max-width: 760px) {
  .fm-clips--tt .clip--wide { width: 100%; }
  .fm-gallery { columns: 2; }
}

/* photo viewer */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(3.5rem, 6vw, 4.5rem) clamp(1rem, 6vw, 5rem); border: 0; background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(20 8 11 / 0.92); }
.lb-figure { margin: 0; display: grid; justify-items: center; gap: 0.75rem; }
.lb-img { display: block; width: auto; height: auto; max-width: min(100%, 64rem); max-height: calc(100dvh - 9rem); border-radius: 0.25rem; box-shadow: 0 2rem 4rem -2rem rgb(0 0 0 / 0.8); }
.lb-cap { color: var(--v4-cream); font-size: 0.9375rem; text-align: center; }
.lb-count { opacity: 0.7; margin-left: 0.5rem; font-variant-numeric: tabular-nums; }
.lb-btn {
  position: fixed; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 62.4375rem; cursor: pointer;
  background: var(--v4-rose-light); color: var(--v4-burgundy); font-size: 1.25rem; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.lb-btn:active { transform: scale(0.94); }
.lb-btn:focus-visible { outline: 0.1875rem solid var(--v4-cream); outline-offset: 0.1875rem; }
.lb-prev { left: clamp(0.5rem, 2.5vw, 2rem); top: 50%; translate: 0 -50%; }
.lb-next { right: clamp(0.5rem, 2.5vw, 2rem); top: 50%; translate: 0 -50%; }
.lb-prev .icon { rotate: 135deg; }
.lb-next .icon { rotate: -45deg; }
.lb-close { top: clamp(0.75rem, 2.5vw, 1.5rem); right: clamp(0.75rem, 2.5vw, 1.5rem); }
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: var(--v4-cream); } }
@media (max-width: 760px) {
  .lb-prev, .lb-next { top: auto; bottom: 1rem; translate: none; }
  .lb-img { max-height: calc(100dvh - 11rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lb-img { animation: lb-in 260ms var(--ease-out); }
}
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } }