/* ==========================================================================
   FRAME / 01 — sections
   hero · manifesto · featured · archive · about · services · journal · contact · finale · footer
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; background: #000; }
.hero__media { position: absolute; inset: -6% 0; will-change: transform; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; transform: scale(1.14); transition: transform 2.6s var(--ease); }
.is-loaded .hero__img { transform: scale(1); }
@media (min-width: 900px) {
  .hero__img { object-position: 50% 40%; transform-origin: 50% 42%; transform: translate3d(14%, 0, 0) scale(1.46); }
  .is-loaded .hero__img { transform: translate3d(14%, 0, 0) scale(1.3); }
}
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 52%); }

.hero__body { position: relative; z-index: 2; align-self: flex-end; width: 100%; padding: 0 var(--gut) clamp(24px, 4.6vh, 52px); }
.hero__kicker { display: flex; margin-bottom: clamp(1rem, 2.6vh, 1.8rem); color: rgba(255, 255, 255, 0.78); opacity: 0; transition: opacity 1.4s var(--ease) 0.9s; }
.is-loaded .hero__kicker { opacity: 1; }

.hero__title { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(2.7rem, 12.4vw, 5.2rem); line-height: 0.9; letter-spacing: -0.03em; }
@media (min-width: 640px) { .hero__title { font-size: clamp(3.6rem, 10.6vw, 12rem); } }
.ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ln > span { display: block; transform: translateY(108%); transition: transform 1.5s var(--ease); }
.is-loaded .hero__title .ln > span { transform: none; }
.hero__title .ln:nth-child(1) > span { transition-delay: 0.25s; }
.hero__title .ln:nth-child(2) > span { transition-delay: 0.4s; }
.hero__title .ln:nth-child(3) > span { transition-delay: 0.55s; }

.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem 3rem; margin-top: clamp(1.4rem, 4vh, 3rem); opacity: 0; transform: translateY(14px); transition: opacity 1.4s var(--ease) 1.1s, transform 1.4s var(--ease) 1.1s; }
.is-loaded .hero__foot { opacity: 1; transform: none; }
.hero__lede { max-width: 36ch; font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: rgba(255, 255, 255, 0.86); }

.cta-link { display: inline-flex; align-items: center; gap: 1rem; padding-block: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.cta-link svg { width: 54px; height: 54px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; transition: background-color 0.5s var(--ease), color 0.5s var(--ease), transform 0.5s var(--ease); }
.cta-link:hover svg, .cta-link:focus-visible svg { background: #fff; color: #000; transform: translateY(4px); }

.hero__now { position: absolute; z-index: 3; top: calc(var(--hdr-h) + 18px); right: var(--gut); display: grid; gap: 0.25rem; text-align: right; color: rgba(255, 255, 255, 0.78); opacity: 0; transition: opacity 1.4s var(--ease) 1.3s; }
.is-loaded .hero__now { opacity: 1; }
.hero__now strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; color: #fff; }
.hero__now:hover strong { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (max-width: 899px) { .hero__now { display: none; } }

.hero__scroll { position: absolute; z-index: 3; right: var(--gut); bottom: clamp(24px, 4.6vh, 52px); display: none; align-items: center; gap: 0.9rem; writing-mode: vertical-rl; color: rgba(255, 255, 255, 0.7); }
.hero__scroll i { display: block; width: 1px; height: 64px; background: currentColor; transform-origin: top; animation: line 2.6s var(--ease-io) infinite; }
@keyframes line { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 900px) { .hero__scroll { display: flex; bottom: clamp(24px, 4.6vh, 52px); right: calc(var(--gut) + 0px); } .hero__foot { padding-right: 4rem; } }

/* ---------- Manifesto ---------- */
.manifesto { position: relative; padding-block: clamp(6rem, 15vw, 15rem); }
.manifesto__text { font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 5.4rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 19em; }
.js .manifesto__text .w { opacity: 0.16; transition: opacity 0.6s var(--ease); }
.js .manifesto__text .w.is-on { opacity: 1; }

.manifesto__fig { position: relative; margin-top: 3rem; }
.manifesto__fig--a { width: 46%; margin-left: auto; margin-right: var(--gut); aspect-ratio: 3 / 4; }
.manifesto__fig--b { width: 66%; margin-left: var(--gut); aspect-ratio: 3 / 2; margin-top: -1.2rem; }
@media (min-width: 900px) {
  .manifesto { padding-block: clamp(9rem, 18vw, 18rem); }
  .manifesto .wrap { padding-left: calc(24% + var(--gut)); }
  .manifesto__fig { position: absolute; margin: 0; }
  .manifesto__fig--a { top: 2rem; right: var(--gut); width: clamp(120px, 11vw, 220px); }
  .manifesto__fig--b { bottom: clamp(3rem, 7vw, 7rem); left: var(--gut); width: clamp(220px, 22vw, 400px); margin: 0; }
}

/* ---------- Featured projects ---------- */
.featured { padding-bottom: clamp(3rem, 8vw, 8rem); }
.proj { margin-bottom: clamp(5.5rem, 13vw, 13rem); }
.proj:last-child { margin-bottom: 0; }
.proj__link { position: relative; display: block; }
.proj__no { display: block; margin-bottom: 0.9rem; font-family: var(--serif); font-size: 0.95rem; font-style: italic; color: var(--mut); }
.proj__media { aspect-ratio: var(--ar, 3 / 2); }
.proj--1 { --ar: 3 / 2; } .proj--2 { --ar: 4 / 5.6; } .proj--3 { --ar: 16 / 10; } .proj--4 { --ar: 4 / 5.6; }
.proj--2 .proj__media, .proj--4 .proj__media { width: 78%; }
.proj--2 .proj__media { margin-left: auto; }

.proj__title { position: relative; z-index: 3; margin-top: -0.38em; padding-inline: 0.06em; font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 17vw, 5.4rem); line-height: 0.88; letter-spacing: -0.03em; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.proj--2 .proj__title, .proj--4 .proj__title { margin-top: -0.9em; }
.proj__meta { display: flex; flex-wrap: wrap; margin-top: 1.4rem; color: var(--mut); }
.proj__desc { margin-top: 0.8rem; max-width: 32ch; font-size: 0.98rem; color: var(--mut); }
.proj__link .ph.is-in img { transition: transform 1.6s var(--ease); }
.proj__link:hover .ph.is-in img, .proj__link:focus-visible .ph.is-in img { transform: scale(1.045); }

@media (min-width: 900px) {
  .proj__no { position: absolute; z-index: 4; }
  .proj__title { position: absolute; margin: 0; font-size: clamp(4.4rem, 10vw, 11.5rem); }
  .proj__meta, .proj__desc { position: absolute; margin: 0; }
  .proj__meta { flex-direction: column; gap: 0.25rem; }
  .proj__meta span + span::before { display: none; }

  /* 01 — wide image left, title bleeding out to the right */
  .proj--1 .proj__media { width: 68%; }
  .proj--1 .proj__no { left: calc(70% + 0.5rem); top: 0; }
  .proj--1 .proj__meta { left: calc(70% + 0.5rem); top: 2.6rem; }
  .proj--1 .proj__desc { left: calc(70% + 0.5rem); bottom: 0; width: 24%; }
  .proj--1 .proj__title { left: 38%; bottom: 7%; }

  /* 02 — tall portrait, image right of centre, title crossing its left edge */
  .proj--2 .proj__media { width: 38%; margin-left: 40%; }
  .proj--2 .proj__no { left: 0; top: 0; }
  .proj--2 .proj__meta { left: 0; top: 2.6rem; }
  .proj--2 .proj__desc { left: 0; bottom: 0; width: 26%; }
  .proj--2 .proj__title { left: 22%; top: 22%; }

  /* 03 — very wide image, pushed right, title anchored bottom-left */
  .proj--3 .proj__media { width: 76%; margin-left: 24%; }
  .proj--3 .proj__no { left: 0; top: 0; }
  .proj--3 .proj__meta { left: 0; top: 2.6rem; }
  .proj--3 .proj__desc { left: 0; top: 9rem; width: 19%; }
  .proj--3 .proj__title { left: 6%; bottom: -5%; }

  /* 04 — tall portrait, left, title to the right */
  .proj--4 .proj__media { width: 36%; margin-left: 8%; }
  .proj--4 .proj__no { left: 0; top: 0; }
  .proj--4 .proj__meta { left: 50%; bottom: 0; }
  .proj--4 .proj__desc { left: 68%; bottom: 0; width: 26%; }
  .proj--4 .proj__title { left: 32%; top: 16%; }
}

/* ---------- Archive ---------- */
.archive { padding-bottom: clamp(5rem, 10vw, 10rem); }
.sec-head--row { align-items: end; }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0.55em 1.2em; border: 1px solid var(--line); border-radius: 999px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease); }
.chip sup { font-size: 0.85em; opacity: 0.6; }
.chip:hover { border-color: var(--fg); }
.chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (max-width: 899px) {
  .filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .filter::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

.mosaic { display: grid; grid-template-columns: 1fr; row-gap: clamp(2.6rem, 8vw, 4rem); transition: height 0.8s var(--ease-io); }
.tile { display: block; width: 86%; }
.tile:nth-child(even) { width: 68%; margin-left: auto; }
.tile__img { display: block; aspect-ratio: 4 / 5; }
.tile[data-r="w"] .tile__img { aspect-ratio: 3 / 2; }
.tile[data-r="w"] { width: 100%; }
.tile__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; color: var(--mut); transition: color 0.4s; }
.tile__cap b { font-weight: 500; color: var(--fg); }
.tile:hover .tile__cap { color: var(--fg); }
.tile .ph.is-in img { transition: transform 1.6s var(--ease); }
.tile:hover .ph.is-in img, .tile:focus-visible .ph.is-in img { transform: scale(1.05); }
.tile.is-out { opacity: 0; transform: translateY(18px); transition: opacity 0.35s ease, transform 0.35s ease; }
.tile.is-hidden { display: none; }
.tile.is-enter { opacity: 0; transform: translateY(40px); }
.tile.is-enter.is-go { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }

@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(12, 1fr); column-gap: clamp(14px, 2vw, 36px); row-gap: clamp(4rem, 8vw, 9rem); align-items: start; }
  .tile, .tile:nth-child(even), .tile[data-r="w"] { width: auto; margin-left: 0; }
  .tile[data-p="0"] { grid-column: 1 / span 5; }
  .tile[data-p="1"] { grid-column: 8 / span 4; margin-top: 9vw; }
  .tile[data-p="2"] { grid-column: 2 / span 7; }
  .tile[data-p="3"] { grid-column: 10 / span 3; align-self: end; }
  .tile[data-p="4"] { grid-column: 1 / span 4; margin-top: 4vw; }
  .tile[data-p="5"] { grid-column: 6 / span 7; align-self: center; }
  .tile[data-p="0"] .tile__img { aspect-ratio: 4 / 5; }
  .tile[data-p="1"] .tile__img { aspect-ratio: 3 / 4; }
  .tile[data-p="2"] .tile__img { aspect-ratio: 3 / 2; }
  .tile[data-p="3"] .tile__img { aspect-ratio: 2 / 3; }
  .tile[data-p="4"] .tile__img { aspect-ratio: 3 / 4; }
  .tile[data-p="5"] .tile__img { aspect-ratio: 16 / 10; }
}
.archive__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; margin-top: clamp(3.5rem, 8vw, 7rem); padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--mut); }
.archive__foot span + span::before { display: none; }
.mosaic__ns { grid-column: 1 / -1; color: var(--mut); }

/* ---------- About ---------- */
.about { padding-block: clamp(5rem, 12vw, 12rem); }
.about__grid { display: grid; gap: clamp(3rem, 8vw, 5rem); align-items: start; }
.about__fig .ph { aspect-ratio: 2 / 3; }
.about__fig figcaption { margin-top: 0.9rem; color: var(--mut); }
.about__lede { margin-top: clamp(2rem, 4vw, 3.4rem); font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.22; letter-spacing: -0.01em; max-width: 24em; }
.about__cols { display: grid; gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3.4rem); color: var(--mut); font-size: 1.02rem; max-width: 60ch; }
.about__cols p:first-child { color: var(--fg); }

.principles { margin-top: clamp(2.6rem, 5vw, 4.4rem); border-top: 1px solid var(--line); }
.principles li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.2rem 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.principles span { grid-row: 1 / span 2; font-family: var(--serif); font-style: italic; color: var(--mut); padding-top: 0.5rem; }
.principles h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -0.01em; line-height: 1.1; }
.principles p { color: var(--mut); max-width: 44ch; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; margin-top: clamp(2rem, 4vw, 3.4rem); }
.facts dt { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); margin-bottom: 0.3rem; }
.facts dd { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: repeat(12, 1fr); column-gap: clamp(14px, 2vw, 36px); }
  .about__fig { grid-column: 1 / span 5; position: sticky; top: 12vh; }
  .about__text { grid-column: 7 / span 6; }
}

/* ---------- Services ---------- */
.services { padding-bottom: clamp(5rem, 12vw, 12rem); position: relative; }
.svc { border-top: 1px solid var(--line); }
.svc__row { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 76px; gap: 0.6rem 1rem; align-items: start; padding-block: clamp(1.6rem, 3.4vw, 3rem); border-bottom: 1px solid var(--line); transition: opacity 0.5s var(--ease); }
.svc__no { padding-top: 0.55em; font-family: var(--serif); font-style: italic; color: var(--mut); }
.svc__name { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 6vw, 6.4rem); line-height: 1; letter-spacing: -0.025em; transition: transform 0.7s var(--ease); }
.svc__name a::after { content: ""; position: absolute; inset: 0; }
.svc__desc { grid-column: 2; max-width: 46ch; color: var(--mut); }
.svc__thumb { grid-column: 3; grid-row: 1 / span 2; width: 76px; aspect-ratio: 3 / 4; }
.svc__thumb::after { display: none; }
.svc__thumb img { transform: none; }
.svc__preview { display: none; }

@media (min-width: 900px) {
  .svc__row { grid-template-columns: 4rem minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
  .svc__name { grid-column: 2; }
  .svc__desc { grid-column: 3; }
  .svc__thumb { display: none; }
  .svc:hover .svc__row { opacity: 0.32; }
  .svc:hover .svc__row:hover { opacity: 1; }
  .svc__row:hover .svc__name { transform: translateX(1.4rem); }
  .svc__row:hover .svc__name a { font-style: italic; }
  .svc__preview { position: fixed; left: 0; top: 0; z-index: 30; display: block; width: clamp(200px, 17vw, 300px); aspect-ratio: 3 / 4; pointer-events: none; overflow: hidden; opacity: 0; transform: translate3d(0, 0, 0) scale(0.86); transition: opacity 0.4s var(--ease); }
  .svc__preview.is-on { opacity: 1; }
  .svc__preview img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Journal ---------- */
.journal { padding-bottom: clamp(5rem, 12vw, 12rem); }
.notes { display: grid; gap: clamp(3.5rem, 9vw, 5rem); }
.note__fig { aspect-ratio: 4 / 5; }
.note__body { padding-top: 1.2rem; }
.note__body .lbl { display: flex; flex-wrap: wrap; color: var(--mut); }
.note__title { margin-top: 0.9rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; }
.note__lede { margin-top: 0.7rem; color: var(--mut); max-width: 34ch; }
.note__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.8s var(--ease); }
.note__more > div { overflow: hidden; display: grid; gap: 1rem; color: var(--mut); font-size: 0.98rem; }
.note__more > div > p:first-child { margin-top: 1.2rem; }
.note.is-open .note__more { grid-template-rows: 1fr; }
.note__btn { display: inline-flex; align-items: center; gap: 0.9rem; min-height: 44px; margin-top: 0.8rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.note__btn i { position: relative; width: 14px; height: 14px; }
.note__btn i::before, .note__btn i::after { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 1px; background: currentColor; transition: transform 0.6s var(--ease); }
.note__btn i::after { transform: rotate(90deg); }
.note.is-open .note__btn i::after { transform: rotate(0); }

@media (min-width: 900px) {
  .notes { grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, 3vw, 56px); align-items: start; }
  .note:nth-child(2) { margin-top: clamp(4rem, 9vw, 9rem); }
  .note:nth-child(3) { margin-top: clamp(1.5rem, 3vw, 3rem); }
  .note:nth-child(2) .note__fig { aspect-ratio: 1 / 1; }
  .note:nth-child(3) .note__fig { aspect-ratio: 3 / 4; }
}

/* ---------- Contact ---------- */
.contact { padding-block: clamp(4rem, 10vw, 10rem); border-top: 1px solid var(--line); }
.contact__grid { display: grid; gap: clamp(3rem, 7vw, 4rem); }
.contact__lede { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 30ch; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.25; }
.contact__list { display: grid; gap: 1.4rem; margin-top: clamp(2rem, 4vw, 3.4rem); }
.contact__list li { display: grid; gap: 0.25rem; }
.contact__list .lbl { color: var(--mut); }
.contact__list a { font-family: var(--serif); font-size: 1.35rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.6s var(--ease); }
.contact__list a:hover { background-size: 0 1px; background-position: 100% 100%; }

.form { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem); }
.field { position: relative; display: grid; gap: 0.2rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); padding: 0; }
.field label em { font-style: normal; opacity: 0.7; text-transform: none; letter-spacing: 0.02em; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; padding: 0.7rem 0 0.9rem; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font: inherit; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.25; transition: border-color 0.5s var(--ease); resize: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--mut); opacity: 0.6; font-style: italic; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--mut); }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--fg); }
.field [aria-invalid="true"] { border-bottom-color: #b5482f; }
.err { min-height: 1.2em; font-size: 0.82rem; color: #b5482f; }
.field--pills legend { margin-bottom: 0.9rem; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pills label { position: relative; text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; color: var(--fg); cursor: pointer; }
.pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pills span { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5em 1.15em; border: 1px solid var(--line); border-radius: 999px; transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
.pills label:hover span { border-color: var(--fg); }
.pills input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pills input:focus-visible + span { outline: 1.5px solid currentColor; outline-offset: 3px; }

.send { display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem; min-height: 60px; padding: 0.9rem 2rem; border: 1px solid var(--fg); border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; justify-self: start; transition: background-color 0.5s var(--ease), color 0.5s var(--ease); }
.send svg { width: 22px; height: 22px; transition: transform 0.5s var(--ease); }
.send:hover, .send:focus-visible { background: var(--fg); color: var(--bg); }
.send:hover svg { transform: translateX(5px); }
.send--light { --c: var(--bone); border-color: var(--bone); color: var(--bone); }
.send--light:hover, .send--light:focus-visible { background: var(--bone); color: var(--ink); }
.send--ghost { margin-top: 1.6rem; }
.form__note { font-size: 0.8rem; color: var(--mut); }
@media (max-width: 599px) { .send { width: 100%; } }

.thanks { padding-block: 1rem 2rem; }
.thanks[hidden] { display: none; }
.thanks:focus { outline: 0; }
.thanks .lbl { color: var(--mut); }
.thanks h3 { margin-top: 1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.025em; }
.thanks h3 span { font-style: italic; }
.thanks p:last-of-type { margin-top: 1.2rem; max-width: 34ch; color: var(--mut); }

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: repeat(12, 1fr); column-gap: clamp(14px, 2vw, 36px); align-items: start; }
  .contact__intro { grid-column: 1 / span 5; }
  .contact__panel { grid-column: 7 / span 6; padding-top: 3.2rem; }
}

/* ---------- Finale ---------- */
.finale { position: relative; display: grid; align-items: end; min-height: 100svh; overflow: hidden; color: var(--bone); background: var(--night); }
.finale__media { position: absolute; inset: -8% 0; }
.finale__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.finale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 11, 10, 0.85), rgba(11, 11, 10, 0.15) 60%, rgba(11, 11, 10, 0.5)); }
.finale__in { position: relative; z-index: 2; padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 7vw, 6rem); }
.finale .lbl { color: rgba(238, 235, 228, 0.7); margin-bottom: 1.8rem; }
.finale__title { margin-bottom: clamp(2rem, 5vw, 3.6rem); font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 11vw, 4.4rem); line-height: 0.92; letter-spacing: -0.03em; }
@media (min-width: 640px) { .finale__title { font-size: clamp(3rem, 9.4vw, 10.6rem); } }
.finale .ln > span { transition-duration: 1.5s; }
.finale.is-in .ln > span { transform: none; }
.finale .ln:nth-child(1) > span { transition-delay: 0.05s; }
.finale .ln:nth-child(2) > span { transition-delay: 0.2s; }
.finale .ln:nth-child(3) > span { transition-delay: 0.35s; }
html:not(.js) .finale .ln > span, html:not(.js) .hero .ln > span { transform: none; }

/* ---------- Footer ---------- */
.foot { padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; color: var(--bone); background: var(--night); border-top: 1px solid rgba(238, 235, 228, 0.14); }
.foot__top { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.foot__logo { font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: 1; letter-spacing: -0.03em; }
.foot__logo i { font-style: italic; font-weight: 400; opacity: 0.6; margin-inline: 0.05em; }
.foot__up { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; color: rgba(238, 235, 228, 0.7); }
.foot__up svg { width: 20px; height: 20px; transition: transform 0.5s var(--ease); }
.foot__up:hover svg { transform: translateY(-4px); }
.foot__cols { display: grid; gap: 2.2rem; margin-top: clamp(2.6rem, 6vw, 5rem); }
.foot__cols .lbl { color: rgba(238, 235, 228, 0.55); margin-bottom: 0.7rem; }
.foot__cols a, .foot__cols address { font-size: 1.05rem; line-height: 1.6; }
.foot__cols a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease); padding-bottom: 2px; }
.foot__cols a:hover { background-size: 100% 1px; }
.foot__social { display: grid; gap: 0.2rem; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: 1.4rem; border-top: 1px solid rgba(238, 235, 228, 0.14); color: rgba(238, 235, 228, 0.55); font-size: 0.66rem; }
.foot__base span + span::before { display: none; }
@media (min-width: 720px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } }

/* Wrapped meta lines: use spacing instead of slashes */
.proj__meta, .note__body .lbl, .pv__kicker { column-gap: 1.5rem; row-gap: 0.15rem; }
.proj__meta span + span::before, .note__body .lbl span + span::before, .pv__kicker span + span::before { display: none; }