/* 'iti Architects, version 2. Loaded after site.css; only the differences live here.
   Ideas: coconut husk ground, a central spine (the stem of the T) joining the sections,
   symmetrical sets of three, symbols spread across the header, sketch portraits with a popup. */

:root {
  --husk: #93765a;
  --husk-dark: rgba(38, 30, 22, .26);
  --char-soft: #3b342d;
}

body.v2 {
  background: var(--husk) url("../assets/img/texture/husk.jpg") 0 0 / 900px auto repeat;
}
@supports (background-image: url("a.webp")) {
  body.v2 { background-image: url("../assets/img/texture/husk.webp"); }
}

/* ---------- Header: mark left, sound right, symbols spread with Collaboration centred ---------- */
.v2 .site-head { justify-content: space-between; }
.v2 .symnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--gutter) + 64px); right: calc(var(--gutter) + 64px);
  pointer-events: none;
}
.v2 .symnav ul { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
.v2 .symnav li { pointer-events: auto; }
.v2 .symnav li:nth-child(1) { justify-self: center; }
.v2 .symnav li:nth-child(3) { justify-self: center; }
.v2 .symnav li:nth-child(2) { justify-self: center; }
@media (min-width: 761px) {
  .v2 .symnav { left: calc(var(--gutter) + 110px); right: calc(var(--gutter) + 110px); }
  .v2 .symnav a svg { width: 34px; height: 34px; }
}

/* ---------- Opening: two halves joined by the T ---------- */
.v2 .duo { color: #fff; }

/* Services sit left, centre and right, the centre one on the spine. */
.v2 .hero__services { display: grid; grid-template-columns: 1fr auto 1fr; }
.v2 .hero__services li:first-child { justify-self: start; }
.v2 .hero__services li:nth-child(2) { justify-self: center; }
.v2 .hero__services li:last-child { justify-self: end; }
@media (max-width: 640px) {
  .v2 .hero__services { display: flex; }
}

/* ---------- The spine: one fine line on the centre of the page joining section to section ---------- */
.spine {
  position: absolute; left: 50%; top: 0; width: 1px; height: 9vh;
  transform: translateX(-50%); background: rgba(255,255,255,.22); pointer-events: none;
}
.spine span { display: block; width: 100%; height: 100%; background: #fff; transform-origin: top; }
html.anim .spine span { transform: scaleY(0); }
.v2 .values, .v2 .collective, .v2 .work, .v2 .foot { position: relative; }

/* Alternating ground: the husk, then a darker husk, around the pale meaning section. */
.v2 .values, .v2 .work { background: var(--husk-dark); }

/* ---------- Symmetry: sets of three centre on the spine ---------- */
.v2 .values__list, .v2 .people { margin-inline: auto; }
.v2 .value { text-align: center; }
.v2 .value p { margin-inline: auto; }
.v2 .collective__head, .v2 .work__head { text-align: center; margin-inline: auto; }
.v2 .collective__head .section-sym, .v2 .work__head .section-sym { margin-inline: auto; }
.v2 .collective__head h2, .v2 .work__head h2 { margin-inline: auto; }
.v2 .work__head .dev-note { margin-inline: auto; text-align: left; }
.v2 .person figcaption { text-align: center; }

/* ---------- People: sketches, mono until hovered or focused, then colour ---------- */
.v2 .person__img {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; cursor: pointer;
  background: #f4f1ea; overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(20, 14, 8, .55);
}
.v2 .person__img picture, .v2 .person__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2 .person__img img { object-fit: cover; object-position: center top; filter: none; }
.v2 .person__colour { opacity: 0; transition: opacity .7s var(--ease); }
.v2 .person__img:hover .person__colour, .v2 .person__img:focus-visible .person__colour { opacity: 1; }
.v2 .person__img:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* A small plus at the corner says there is more: drawn as two hairlines. */
.person__more-cue {
  position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(43, 40, 37, .78); transition: transform .5s var(--ease), background .3s;
}
.person__more-cue::before, .person__more-cue::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: #fff;
  transform: translate(-50%, -50%);
}
.person__more-cue::after { transform: translate(-50%, -50%) rotate(90deg); }
.v2 .person__img:hover .person__more-cue, .v2 .person__img:focus-visible .person__more-cue { transform: rotate(90deg); background: #2b2825; }
.v2 .person figure { cursor: pointer; }
@media (max-width: 760px) {
  .v2 .people { grid-template-columns: 1fr; max-width: 420px; }
  .v2 .person__img { aspect-ratio: 1; }
}

/* ---------- Person popup ---------- */
.pop {
  padding: 0; border: 0; background: transparent; color: #fff;
  width: min(920px, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: calc(100svh - 48px);
  overflow: visible;
}
.pop::backdrop { background: rgba(26, 21, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pop__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--husk) url("../assets/img/texture/husk.webp") 0 0 / 900px auto repeat;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
  max-height: calc(100svh - 48px); overflow: auto;
}
.pop__img { position: relative; background: #f4f1ea; aspect-ratio: 1; overflow: hidden; }
.pop__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pop__body { position: relative; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
/* The T: a fine stem down the join between picture and words. */
.pop__body::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(255,255,255,.45); }
.pop__name { font-size: clamp(30px, 3vw + 10px, 52px); line-height: 1; letter-spacing: -.02em; font-weight: 700; font-stretch: 88%; margin-bottom: .8rem; }
.pop__cred { font-size: 15px; line-height: 1.5; letter-spacing: .02em; opacity: .92; margin-bottom: 1.8rem; }
.pop__details div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem; padding: .65rem 0; border-top: 1px solid rgba(255,255,255,.4); align-items: baseline; }
.pop__details dt { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.pop__details dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.pop__details a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6); }
.pop__details a:hover { border-bottom-color: #fff; }
.pop__details .dev-tag { margin-left: 0; }
.pop__details a + .dev-tag { margin-left: 6px; }
.pop__close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; padding: 0; cursor: pointer;
  background: rgba(43, 40, 37, .55); border-radius: 50%; transition: background .3s, transform .5s var(--ease);
}
.pop__close span { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.pop__close span + span { transform: translate(-50%, -50%) rotate(-45deg); }
.pop__close:hover { background: #2b2825; transform: rotate(90deg); }
.pop[open] .pop__panel { animation: popIn .7s var(--ease) both; }
.pop[open] .pop__img img { animation: popImg 1.1s var(--ease) both; }
.pop[open] .pop__body > * { animation: popUp .7s var(--ease) both; }
.pop[open] .pop__body > :nth-child(2) { animation-delay: .06s; }
.pop[open] .pop__body > :nth-child(3) { animation-delay: .12s; }
.pop[open] .pop__body > :nth-child(4) { animation-delay: .18s; }
.pop[open]::backdrop { animation: fadeIn .45s ease both; }
.pop.is-closing .pop__panel { animation: popOut .35s ease both; }
.pop.is-closing::backdrop { animation: fadeIn .35s ease reverse both; }
@keyframes popIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes popOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } }
@keyframes popImg { from { transform: scale(1.18); } to { transform: none; } }
@keyframes popUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .pop { width: calc(100vw - 24px); }
  .pop__panel { grid-template-columns: 1fr; }
  .pop__img { aspect-ratio: 4 / 3; }
  .pop__body::before { left: 14%; right: 14%; top: 0; bottom: auto; width: auto; height: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop[open] .pop__panel, .pop[open] .pop__img img, .pop[open] .pop__body > *, .pop[open]::backdrop, .pop.is-closing .pop__panel { animation: none; }
}

/* ---------- Meaning: the edge as a boundary between light and dark ---------- */
.m-edge-fill { opacity: 0; transition: opacity .8s var(--ease); }
.m-edge-fill.is-on { opacity: 1; }
html:not(.anim) .m-edge-fill { opacity: 1; }

/* ---------- Contact: the bird that carries the message ---------- */
.bird { position: fixed; left: 0; top: 0; width: clamp(84px, 8vw, 120px); height: auto; z-index: 80; pointer-events: none; opacity: 0; overflow: visible; }
.bird__note { opacity: 0; }
.dev-btn {
  font: inherit; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.75); padding: 4px 8px; margin-left: 6px;
}
.dev-btn:hover { background: rgba(255,255,255,.14); }

/* ---------- Collaboration: kinds of project, shown until photographs arrive ---------- */
.v2 .project__art { border: 1px solid rgba(255,255,255,.32); background: rgba(0,0,0,.1); padding: 8%; }
.v2 .project__art svg { width: 100%; height: 100%; max-width: 340px; overflow: visible; }
.v2 .project--type h3 { font-size: clamp(18px, 1vw + 10px, 24px); letter-spacing: -.01em; }
.v2 .project--type p { font-size: 14px; letter-spacing: .01em; line-height: 1.5; max-width: 34ch; opacity: .9; }