/* =========================================================
   HOME — hero, about, what I do, selected work (project blocks
   with photography breaks between them), contact.
   ========================================================= */

/* ---------- 7.3 HERO: sky photo → Mega word → cut-out portrait → labels ----------
   Layers (back to front): background photo, scrims, "Portfolio", Paula, text.
   No z-index on the text groups themselves, so the word can sit BEHIND her
   while the small labels stay in FRONT. */
.hero { padding-top: var(--s-4); }
.hero__frame {
  position: relative; isolation: isolate; border-radius: var(--r-lg); overflow: hidden;
  min-height: max(640px, min(860px, calc(100svh - 120px)));
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 3vw, 40px);
  color: var(--paper); background: var(--ink);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: saturate(1.05) brightness(.9); }
.hero__frame::before {   /* scrims: top for the labels, bottom for the pitch */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(48,24,35,.42), rgba(48,24,35,0) 24%),
              linear-gradient(to top, rgba(48,24,35,.55), rgba(48,24,35,0) 30%);
}
.hero__cutout {
  position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 90%; width: auto; max-width: none; pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(48,24,35,.28));
}
.hero__top, .hero__line, .hero__foot { position: relative; z-index: 3; }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); font-size: var(--fs-small); }
.hero__top span { display: block; }
.hero__top span + span { opacity: .85; }
.hero__center { align-self: center; margin-top: -4%; }
.hero__line { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: 15px; font-weight: 500; text-shadow: 0 1px 14px rgba(48,24,35,.35); }
.hero__word {
  position: relative; z-index: 1; text-align: center;
  font-size: clamp(84px, 17.5vw, 248px); line-height: .84; letter-spacing: -0.065em;
  margin: 6px -0.04em 14px; color: var(--paper);
  text-shadow: 0 2px 40px rgba(48,24,35,.18);
}
.hero__line a { color: var(--paper); }
.hero__line a:hover { color: var(--linen); }
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); font-size: var(--fs-small); }
.hero__pitch { max-width: 28ch; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.hero__scroll { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--paper); font-weight: 600; }
.hero__scroll .icon { width: 16px; height: 16px; }

/* ---------- 7.7 ABOUT ---------- */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-7); align-items: start; }
.about__portrait { position: relative; }
.about__portrait .media { aspect-ratio: 4/5; border-radius: var(--r-lg); }
.about__body { display: flex; flex-direction: column; gap: 28px; }
.about__hello { font-size: clamp(44px, 6vw, 80px); line-height: .92; letter-spacing: -0.055em; }
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.proof div { border-top: 2px solid var(--ink); padding-top: var(--s-2); }
.proof strong { display: block; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.proof span { display: block; margin-top: var(--s-1); font-size: var(--fs-label); color: var(--ink-2); line-height: 1.4; }

/* ---------- 7.8 WHAT I DO ---------- */
.services__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.services__head p { max-width: 46ch; }
.skills { justify-content: center; max-width: 720px; gap: 10px; }
.skills .tag { padding: 11px 22px; font-size: 15px; font-weight: 600; background: var(--ink); color: var(--paper); transition: background var(--t-base) var(--ease); }
.skills .tag:hover { background: var(--clay); border-color: var(--clay); }
.svc { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.svc li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: var(--s-5) var(--s-3); border-top: 1px solid var(--rule);
  transition: background var(--t-base) var(--ease), border-radius var(--t-base) var(--ease);
}
.svc li:hover { background: var(--linen); border-radius: 12px; }
.svc__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.svc__name { display: block; font-size: clamp(24px, 3vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.svc__desc { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.svc__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--t-base) var(--ease); }
.svc li:hover .svc__icon { background: var(--clay); color: var(--paper); transform: rotate(45deg); }
.marquee--services { margin-top: var(--s-8); }

/* ---------- SELECTED WORK: index + project blocks ---------- */
.work-head__title { font-size: var(--fs-display); line-height: .92; letter-spacing: -0.055em; }
.project { padding-block: var(--s-9); border-top: 1px solid var(--rule); }
.project__head { margin-bottom: var(--s-7); }
.project__name { margin-top: var(--s-4); }
.project__tags { margin-top: var(--s-5); }
.project__side { display: flex; flex-direction: column; gap: var(--s-5); }
/* mosaic: 7 + 5 (stacked) */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
.mosaic__main { grid-column: span 7; aspect-ratio: 4/3; }
.mosaic__side { grid-column: span 5; display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-4); }
.mosaic__side .media { min-height: 0; }
.mosaic--flip .mosaic__main { order: 2; }
.credit { margin-top: var(--s-3); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* ---------- PHOTO BREAKS ---------- */
.break { padding-block: var(--s-4) var(--s-9); }
/* Movement carousel: auto-scroll, drag / swipe */
.carousel {
  overflow-x: auto; overflow-y: hidden; cursor: grab; touch-action: pan-x; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.dragging { cursor: grabbing; }
.carousel__track { display: flex; gap: var(--s-4); width: max-content; }
.carousel__track img { height: clamp(260px, 46vh, 460px); width: auto; border-radius: var(--r-md); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.break__caption { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-3); }

/* Visuals: four tiles cross-fading through every photo */
.swapgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.swapgrid .tile { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-md); background: var(--linen); }
.swapgrid .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s var(--ease); }

/* ---------- 7.9 CONTACT ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-7); }
.contact__intro { display: flex; flex-direction: column; gap: var(--s-5); }
.contact__word { font-size: clamp(56px, 8vw, 112px); line-height: .88; letter-spacing: -0.06em; }
.contact__mail { align-self: flex-start; font-size: clamp(18px, 2vw, 24px); font-weight: 600; letter-spacing: -0.02em; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.form { display: flex; flex-direction: column; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; }
.field > span, .field legend { font-size: var(--fs-label); font-weight: 700; padding: 0; }
.field input, .field textarea {
  font: inherit; font-size: 18px; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; outline: none; resize: vertical;
  transition: border-color var(--t-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-2); opacity: .7; }
.field input:focus, .field textarea:focus { border-bottom: 2px solid var(--clay); padding-bottom: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--ink); font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: all .3s var(--ease); }
.chips input:checked + span { background: var(--ink); color: var(--paper); }
.chips input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 2px; }
.form .btn { align-self: flex-start; padding: 16px 26px; }
.form-thanks { border: 1px solid var(--ink); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); justify-content: center; }
.form-thanks::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--clay); }
.form-thanks strong { font-size: 32px; letter-spacing: -0.04em; line-height: 1.1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1023px) {
  .mosaic__main, .mosaic__side { grid-column: 1 / -1; }
  .mosaic__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .mosaic__side .media { aspect-ratio: 4/5; }
  .mosaic--flip .mosaic__main { order: 0; }
  .swapgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .hero__frame { min-height: 82svh; }
    .hero__cutout { height: 64%; }
  .hero__center { align-self: start; margin-top: var(--s-7); }
  .hero__center .hero__line:last-child { display: none; }   /* email lives in Contact on phones */
  .hero__word { font-size: 18vw; margin-bottom: 0; }
  .hero__line { font-size: 13px; }
  .hero__pitch { font-size: 16px; max-width: 18ch; }
  .hero__scroll span { display: none; }
  .proof { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
    .svc li { grid-template-columns: 32px minmax(0, 1fr); }
  .svc__icon { display: none; }
}

/* ---------- WHAT I DO on a plum panel (kit: plum ≈ 18% of a page) ---------- */
.services-panel { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: clamp(40px, 7vw, 96px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 64px); overflow: hidden; }
.services-panel a { color: var(--paper); }
.services-panel .services__head p { color: rgba(230,224,208,.82); }
.services-panel .skills .tag { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.services-panel .skills .tag:hover { background: var(--clay); border-color: var(--clay); color: var(--paper); }
.services-panel .svc { border-bottom-color: rgba(230,224,208,.2); }
.services-panel .svc li { border-top-color: rgba(230,224,208,.2); }
.services-panel .svc li:hover { background: rgba(230,224,208,.08); }
.services-panel .svc__num, .services-panel .svc__desc { color: rgba(230,224,208,.68); }

/* ---------- PAST WORK: two project cards (kit 7.4) ---------- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-7) var(--s-4); }
.card { display: flex; flex-direction: column; gap: var(--s-3); color: var(--ink); }
.card:hover { color: var(--ink); }
.card__media { aspect-ratio: 4 / 5; }
.card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: var(--s-2); }
.card__name { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.card .link-arrow { align-self: flex-start; }
.card:hover .link-arrow { color: var(--clay); }
.card__media .device-stage--fill .phone { height: auto; width: 40%; }   /* 4:5 card: size by width so two phones fit */

/* ---------- PAST WORK frames → pop-up ---------- */
.frame { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--s-3); cursor: pointer; color: var(--ink); }
.frame:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; border-radius: var(--r-lg); }
.frame__media { display: block; aspect-ratio: 4 / 5; }
.frame:hover .card__name { color: var(--clay); }
.card__name { transition: color var(--t-fast) var(--ease); }

/* ---------- FULL-BLEED: hero and video breaks run edge to edge,
   on the same line as the Movement strip; text keeps the page margin ---------- */
.hero--bleed { padding-top: var(--s-4); }
.hero--bleed .hero__frame { border-radius: 0; padding-inline: var(--margin); }
.break--bleed .video-block { border-radius: 0; aspect-ratio: auto; height: min(56.25vw, 88svh); }
.break--bleed .video-block__caption { left: var(--margin); }
.break--bleed .video-block__toggle { right: var(--margin); }

/* the hero photo runs up behind the transparent header */
.hero--bleed { padding-top: 0; margin-top: calc(-1 * var(--head-h)); }
.hero--bleed .hero__frame { padding-top: calc(var(--head-h) + clamp(16px, 2vw, 28px)); min-height: max(680px, min(940px, 100svh)); }
@media (max-width: 639px) { .hero--bleed .hero__frame { min-height: 92svh; } }

/* near-full-bleed with rounded ends: a slim edge gutter so the corners show */
:root { --edge: clamp(8px, 1vw, 16px); }
.hero--bleed { padding-inline: var(--edge); }
.hero--bleed .hero__frame { border-radius: var(--r-lg); padding-inline: calc(var(--margin) - var(--edge)); }
.break--bleed { padding-inline: var(--edge); }
.break--bleed .video-block { border-radius: var(--r-lg); }
.break--bleed .video-block__caption { left: calc(var(--margin) - var(--edge)); }
.break--bleed .video-block__toggle { right: calc(var(--margin) - var(--edge)); }

/* ---------- WHAT I DO, inside About ---------- */
.about__do { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); scroll-margin-top: 120px; }
.about__do .tags { margin-top: var(--s-2); }
.about__do .tag { background: var(--ink); color: var(--paper); padding: 9px 18px; font-size: var(--fs-small); font-weight: 600; transition: background var(--t-base) var(--ease); }
.about__do .tag:hover { background: var(--clay); border-color: var(--clay); }

/* ---------- CONTACT: an email template instead of a form ---------- */
.mail-card { background: var(--linen); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--s-4); }
.mail-card__subject { font-weight: 600; }
.mail-card__body { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--ink); background: var(--paper); border-radius: var(--r-md); padding: var(--s-5); }
.mail-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* hero background is now the camera video */
.hero__bg .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }

/* bigger project links ("See the full series", "Read case study") */
.project__side .link-arrow { font-size: clamp(18px, 1.6vw, 22px); gap: 12px; padding-bottom: 8px; border-bottom-width: 2px; }
.project__side .link-arrow .icon { width: 22px; height: 22px; }
/* the video is brighter than the old photo: a touch more shade so labels and menu stay legible */
.hero__frame::before {
  background: linear-gradient(to bottom, rgba(48,24,35,.58), rgba(48,24,35,0) 30%),
              linear-gradient(to top, rgba(48,24,35,.6), rgba(48,24,35,0) 34%),
              rgba(48,24,35,.12);
}

/* About portrait: as tall as the text beside it (Paula, 2026-10-13) */
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: stretch; gap: var(--s-8); }
  .about__portrait, .about__portrait .media { height: 100%; }
  .about__portrait .media { aspect-ratio: auto; min-height: 360px; }
  .about__portrait .media img { object-position: 50% 30%; }
  .about__body { align-self: center; }
}
@media (max-width: 899px) { .about__portrait { max-width: 340px; } }

/* In the studio: wide like the walking video, turned right way up (Paula, 2026-10-13) */
.studio { padding-block: var(--s-9) var(--s-4); }
.studio__head { margin-bottom: var(--s-6); }
.studio__bleed .video-block video { transform: rotate(180deg); object-position: 50% 33%; } /* right way up, framed on the hand and the sun (Paula, 2026-10-14) */

/* mosaic side photos fill their cell instead of stretching the row with their own height */
@media (min-width: 1024px) {
  .mosaic__side .media > img { position: absolute; inset: 0; }
}
.mosaic__main > img { position: absolute; inset: 0; }

/* the hero starts below the header again: clean top (Paula, 2026-10-14) */
.hero--bleed { margin-top: 0; padding-top: var(--s-4); }
.hero--bleed .hero__frame { padding-top: clamp(20px, 3vw, 40px); min-height: max(620px, min(860px, calc(100svh - 120px))); }

/* project calls to action: solid plum pill buttons (Paula, 2026-10-14) */
.project__side .link-arrow {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper); border: 0; border-radius: var(--r-pill);
  padding: 16px 26px; font-size: clamp(17px, 1.4vw, 19px); font-weight: 700; letter-spacing: -0.01em;
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.project__side .link-arrow .icon { width: 22px; height: 22px; stroke-width: 2; }
.project__side .link-arrow:hover { background: var(--clay); color: var(--paper); transform: translateY(-1px); }
.project__side .link-arrow:hover .icon { transform: translateX(4px); }

/* Past work: name and role sit on the photo itself (Paula, 2026-10-14) */
.frame__media { position: relative; overflow: hidden; }
.frame__over { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(20px, 3vw, 36px); padding-top: 120px; color: #fff;
  background: linear-gradient(to top, rgba(20, 10, 15, .62), rgba(20, 10, 15, 0)); pointer-events: none; }
.frame__name { font-size: var(--fs-display); font-weight: 700; line-height: .92; letter-spacing: -0.055em; }
.frame__role { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.01em; opacity: .92; }
/* flipped (Paula, 2026-10-14): the brand small, what she did big */
.frame__brand { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.01em; opacity: .92; }
.frame__topic { font-size: var(--fs-h1); font-weight: 700; line-height: 1; letter-spacing: -0.045em; max-width: 12ch; text-wrap: balance; }

/* a video as the big mosaic picture (shorts by the sea, Paula 2026-10-14) */
.mosaic__main > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }