/* HERO */

.hero {
    height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 100px;
    flex-direction: column;
    gap: 4px;
}

.hero-row {
  --gap: clamp(6px, 0.8vw, 10px);
  --row-height: clamp(
    120px,
    calc((100vw - 200px - 2 * var(--gap)) / 6.84),
    253px
  );
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  width: 100%;
  height: var(--row-height);
}

.main-logo {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
}

.hero-s {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 216 / 253;
  border-radius: var(--radio-s);
  overflow: hidden;
}

/* Row 1 has no flexible image, so it fell ~14px short of rows 2 and 3:
   its two images share whatever space is left so all rows end together */
.hero-row:first-child > .hero-s {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: auto;
}

.hero-s video,
.hero-s img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-row-text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 300px;
    padding-left: 10px;
}

/* The flag sits on the text's baseline (its bottom level with the letters) */
.hero-row-text-down {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.hero-m {
  flex: 1 1 0;   
  min-width: 0; 
  height: 100%;
  border-radius: var(--radio-s);
  overflow: hidden;
}

.hero-m video,
.hero-m img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}

.main-logo-conk {
    flex: 0 0 auto;
    width: auto;
}

.hero-s,
.hero-m {
  align-self: center;
  margin: 4px 0;
  height: calc(100% - 8px);
}


/* BUTTONS */

.filters-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 12px;
  border: 2.25px solid var(--blackish);
  border-radius: 999px; 
  background: var(--white);
}

/* Mobile-only parts of the filters (shown in the mobile media query below):
   the "Filter +" button, the dimmed background and the sheet's header */
.filter-toggle-wrap,
.filters-backdrop,
.filters-sheet-header {
  display: none;
}

/* Drawn "+" next to FILTER, the same stroke as the sheet's "×" */
.filter-toggle-plus {
  width: 12px;
  height: 12px;
  margin-left: 10px;
}

/* PROJECTS */

.projects-container {
    padding-top: 64px;
    padding-bottom: 128px;
    display: flex;
    flex-direction: column;
    gap: 164px;
}

.project-ind {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Projects hidden by the filters */
.project-ind[hidden] {
  display: none;
}

/* Choosing a filter fades all the projects out and back in */
.projects-container {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.projects-container.is-fading {
  opacity: 0;
  transform: translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
  .projects-container {
    transition: none;
  }
}


.project-ind-top {
  display: block;
  position: relative;
  width: 100%;
  height: 70vh;
  border-radius: var(--radio-l);
  overflow: hidden;
  background: var(--blackish);
}

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

.project-badge {
  position: absolute;
  top: -1px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 150px;
}

.project-badge-sub {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--blackish);
  border-top: 2px solid var(--blackish);
  padding-top: 4px;
}

.project-ind-bottom {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.project-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
}

.project-tags {
  display: flex;
  gap: 8px;
}

.project-title {
  margin: 0 0 -24px;
}

.project-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-info-middle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
}

.project-description {
  max-width: 400px;
  margin: 0;
}

.project-thumbs {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.project-thumb {
  width: clamp(100px, 10vw, 160px);
  border-radius: var(--radio-s);
  overflow: hidden;
}

.project-thumb img,
.project-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.title-crisis {
  font-size: 80px;
  line-height: 0.9;
  margin: 0 0 -8px;
}

/* RESPONSIVE: MOBILE (≤ 768px) */

@media (max-width: 768px) {
  /* Hero: one grid with the mobile composition. It fills the first screen
     below the header with the content centred vertically; the Filter
     button comes after it, when you scroll.
     12 columns so rows can split in halves */
  .hero {
    --mobile-header: 47px; /* height of .top-bar on mobile */
    --hero-gap: 12px;     /* every gap between images and the logo */
    /* Image rows: half the width (minus one gap) at a 1.46 : 1 landscape shape */
    --hero-img-row: calc((100vw - 32px - var(--hero-gap)) / 2 / 1.46);
    height: auto;
    min-height: calc(100svh - var(--mobile-header));
    padding: 24px 16px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: var(--hero-img-row) auto auto var(--hero-img-row) var(--hero-img-row);
    grid-template-areas:
      "a a a a a a b b b b b b"
      "k k k k k k k k k k k k"
      "c c c c c c c c c c c c"
      "t t t t t t m m m m m m"
      "p p p p p p q q q q q q";
    align-content: center;
    gap: var(--hero-gap);
  }

  /* The rows become invisible so their items sit directly in the grid */
  .hero-row {
    display: contents;
  }

  /* Row 1: KAROLINA + the illustration video (lurk is hidden on mobile) */
  .hero-row:nth-child(1) > :nth-child(1) { grid-area: k; }
  .hero-row:nth-child(1) > :nth-child(2) { grid-area: a; }
  /* Row 2: CON K + text (the cua image is hidden on mobile) */
  .hero-row:nth-child(2) > :nth-child(1) { grid-area: c; }
  .hero-row:nth-child(2) > :nth-child(2) { grid-area: t; }
  /* Row 3: the retrato goes top right (in lurk's place),
     kos beside the text, hypha + buggies below */
  .hero-row:nth-child(3) > :nth-child(3) { grid-area: b; }
  .hero-row:nth-child(3) > :nth-child(2) { grid-area: p; }
  .hero-row:nth-child(3) > :nth-child(4) { grid-area: m; }
  .hero-row:nth-child(3) > :nth-child(5) { grid-area: q; }

  /* Retrato: frame the upper part so her eyes show in the landscape cell */
  .hero-row:nth-child(3) > :nth-child(3) img {
    object-position: center 15%;
  }

  /* Not part of the mobile composition: lurk, cua, bonacara */
  .hero-row:nth-child(1) > :nth-child(3),
  .hero-row:nth-child(2) > :nth-child(3),
  .hero-row:nth-child(3) > :nth-child(1) {
    display: none;
  }

  /* Logos span the full width at their own proportions.
     Round letters (O, C) overshoot: the straight letters start 9 units
     (of 271) inside the SVG's top and bottom edges. Pulling each logo in by
     that amount makes the 12px gaps measure from the straight letters,
     which is the edge the eye sees. A % margin is a % of the width, so
     9 / viewBox width gives exactly 9 units at any screen size */
  .main-logo {
    width: 100%;
    height: auto;
    margin-block: calc(-100% * 9 / 1391); /* KAROLINA: viewBox 1391 × 271 */
  }

  .main-logo-conk {
    margin-block: calc(-100% * 9 / 885);  /* CON K: viewBox 885 × 271 */
  }

  /* Images fill their grid cell */
  .hero-s,
  .hero-m {
    width: auto;
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    min-height: 0;
    align-self: stretch;
  }

  /* Text fills the row's height: first line at the image's top edge,
     "Find me at Barcelona" at its bottom edge */
  .hero-row-text {
    width: auto;
    padding: 0;
    align-self: stretch;
    justify-content: space-between;
  }

  /* Keeps the hero's own size and spacing */
  .hero-row-text h2 {
    font-size: 20px;
    line-height: 1.1;
  }

  .hero-row-text-down {
    gap: 4px;
  }

  .hero-row-text-down p {
    font-size: 15px;
    white-space: nowrap;
  }

  .hero-icon {
    height: 14px;
    width: auto;
  }

  /* Filters: "Filter +" button in the page; tapping it dims the page and
     slides the categories up from the bottom as a sheet */
  .filters-container {
    padding: 16px 16px 0;
  }

  /* "Filter +" in the same outlined white pill as the desktop bar */
  .filter-toggle-wrap {
    display: block;
    padding: 8px;
    border: 2.25px solid var(--blackish);
    border-radius: 999px;
    background: var(--white);
  }

  .filter-toggle {
    display: flex;
    align-items: center;
  }

  /* Dimmed page behind the sheet */
  .filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(36, 34, 32, 0.4); /* --blackish at 40% */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .filters-container.is-open .filters-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* The sheet: hidden below the screen until opened */
  .filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    width: auto;
    max-height: 85svh;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px 8px;
    padding: 0 24px calc(32px + env(safe-area-inset-bottom));
    background: var(--white);
    border: 2.25px solid var(--blackish);
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0s 0.4s;
  }

  .filters-container.is-open .filters {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  /* "FILTER  ×" with a line underneath across the whole sheet */
  .filters-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Full sheet width: the content width plus the 24px side paddings */
    flex-basis: calc(100% + 48px);
    margin: 0 -24px 12px;
    padding: 20px 24px;
    border-bottom: 2.25px solid var(--blackish);
  }

  .filters-sheet-header .button-l {
    font-size: 20px;
  }

  .filters-close {
    display: block;
    width: 32px;
    height: 32px;
    padding: 8px;
    margin-right: -8px;
    background: none;
    border: 0;
    color: var(--blackish);
    cursor: pointer;
  }

  .filters-close svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* No page scrolling behind the open sheet */
  html.filters-open {
    overflow: hidden;
  }

  /* Keep each button its full width; rows wrap */
  .filter-category {
    flex: 0 0 auto;
  }

  /* Projects */
  .projects-container {
    padding-top: 40px;
    padding-bottom: 80px;
    gap: 80px;
  }

  /* Square cover */
  .project-ind-top {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .project-badge {
    height: 90px;
    left: 12px;
  }

  /* Thumbnails sit close under the cover */
  .project-ind {
    gap: 8px;
  }

  /* Card below the cover, as one grid:
       thumbnails
       title button
       description
       tags
     .project-info and .project-info-middle become invisible so the title
     (in one) and the button (in the other) can share a row */
  .project-ind-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "thumbs thumbs"
      "title  cta"
      "desc   desc"
      "tags   tags";
    align-items: center;
    column-gap: 16px;
    row-gap: 16px;
  }

  .project-info,
  .project-info-middle {
    display: contents;
  }

  .project-tags {
    grid-area: tags;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .project-title-link {
    grid-area: title;
  }

  .project-title {
    margin: 0;
  }

  .title-crisis {
    font-size: 44px;
    margin: 0;
  }

  /* "Want more?" becomes a compact lime pill with just the arrow */
  .project-info-middle .project-cta-btn {
    grid-area: cta;
    width: auto;
    padding: 8px 18px;
  }

  .project-info-middle .project-cta-left {
    display: none;
  }

  /* Pulled up under the title (the title's line box leaves extra space) */
  .project-description {
    grid-area: desc;
    max-width: none;
    margin-top: -16px;
  }

  .project-thumbs {
    grid-area: thumbs;
    gap: 8px;
    margin-bottom: 8px;
  }

  .project-thumb {
    flex: 1 1 0;
    width: auto;
    aspect-ratio: 1 / 1;
  }
}


/* INTRO ANIMATION (home only, every time the page loads)

   Based on wearetheromans.com's "bye bye boring" intro:
   1. 0–1.2s    KAROLINA rises letter by letter from below its own box
   2. ~0.6s     then CON K, the same way
   3. ~1.3s     the images open from their centre and straighten up,
                and the text rises in
   4. ~2.1s     the top bar slides down and the filter bar rises up,
                at the same time

   "Reduce motion" turns it off, and so does the .no-intro class, which
   index.html's <head> adds when you come back from one of your own pages */

html.no-intro .hero .logo-letter,
html.no-intro .hero-s,
html.no-intro .hero-m,
html.no-intro .hero-row-text,
html.no-intro .top-bar,
html.no-intro .filters-container {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --intro-ease-out: cubic-bezier(0.14, 1, 0.34, 1);
    --intro-ease-in-out: cubic-bezier(0.9, 0, 0.1, 1);
  }

  /* 1–2. Logo, letter by letter. Each letter starts one logo-height
     below its place; the logo's box hides it until it rises in */
  .hero .main-logo {
    overflow: hidden;
    --logo-start: 0.1s;
  }

  .hero .main-logo-conk {
    --logo-start: 0.6s;
  }

  .hero .logo-letter {
    animation: intro-letter 0.7s var(--intro-ease-out) both;
    animation-delay: calc(var(--logo-start) + var(--i) * 0.06s);
  }

  /* 2. Images and text, row by row */
  .hero-s,
  .hero-m {
    animation: intro-image 1s var(--intro-ease-in-out) both;
    animation-delay: calc(1.3s + var(--intro-step, 0) * 0.08s);
  }

  .hero-row-text {
    animation: intro-text 0.8s var(--intro-ease-out) both;
    animation-delay: 1.6s;
  }

  .hero-row:nth-child(2) > * { --intro-step: 1; }
  .hero-row:nth-child(3) > :nth-child(1) { --intro-step: 2; }
  .hero-row:nth-child(3) > :nth-child(2) { --intro-step: 3; }
  .hero-row:nth-child(3) > :nth-child(3) { --intro-step: 4; }
  .hero-row:nth-child(3) > :nth-child(4) { --intro-step: 5; }
  .hero-row:nth-child(3) > :nth-child(5) { --intro-step: 6; }

  /* 4. Top bar from above and filter bar from below, together.
     "backwards" (not "both"): once finished, the animation lets go of the
     element. Holding its last step would make the filter bar the frame of
     reference for the mobile filter sheet and its dimmed background, so
     they'd open inside the bar instead of over the whole screen */
  .top-bar {
    animation: intro-from-above 0.9s var(--intro-ease-out) 2.1s backwards;
  }

  .filters-container {
    animation: intro-from-below 0.9s var(--intro-ease-out) 2.1s backwards;
  }
}

@keyframes intro-letter {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@keyframes intro-image {
  from {
    clip-path: inset(50% 50% round var(--radio-s));
    transform: skewX(10deg);
  }
  to {
    clip-path: inset(0 round var(--radio-s));
    transform: none;
  }
}

@keyframes intro-text {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes intro-from-above {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

@keyframes intro-from-below {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}