/* ============================================================
   Imagify — visual studio
   Swiss-editorial system: Times New Roman display, Geist Mono
   labels, white/black/grey palette, 17px frame grid.
   ============================================================ */

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #000000;
  --ink-2: #4f4f4f;
  --line: #dedede;
  --veil: rgba(0, 0, 0, 0.3);
  --veil-strong: rgba(0, 0, 0, 0.45);
  --gap: 17px;
  --serif: "Times New Roman", Times, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --big: clamp(27px, 3.32vw, 46px);      /* ~42px @1280 */
  --big-lh: 1.03;
  --ease-appear: cubic-bezier(0.11, 0.68, 0.17, 0.99);
  --col-w: calc((100vw - 5 * var(--gap)) / 4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }
html.snap { scroll-snap-type: y mandatory; }

body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--bg);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  animation: page-in 0.45s ease both;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.serif-big {
  font-family: var(--serif);
  font-size: var(--big);
  line-height: var(--big-lh);
  letter-spacing: -0.02em;
  font-weight: 400;
}

/* ---------- appear animations ---------- */

.appear-rise, .appear-sink, .appear-fade {
  opacity: 0.001;
  animation-fill-mode: both;
  animation-timing-function: var(--ease-appear);
}
.appear-sink { animation-name: sink; animation-duration: 2.25s; animation-delay: 0.6s; }
.appear-rise { animation-name: rise; animation-duration: 2.5s;  animation-delay: 0.8s; }
.appear-fade { animation-name: fade; animation-duration: 1.6s;  animation-delay: 0.3s; }
@keyframes sink { from { opacity: 0.001; transform: translateY(-110px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0.001; transform: translateY(200px); }  to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0.001; } to { opacity: 1; } }
/* centered fixed elements need translateX preserved through the animation */
.pill-nav.appear-rise { animation-name: rise-centered; }
@keyframes rise-centered {
  from { opacity: 0.001; transform: translateX(-50%) translateY(200px); }
  to   { opacity: 1;     transform: translateX(-50%); }
}
/* staggered children (list rows, journal cards) */
.stagger > * { opacity: 0.001; animation: fade 1.2s var(--ease-appear) both; }
.stagger > *:nth-child(1)  { animation-delay: 0.25s; }
.stagger > *:nth-child(2)  { animation-delay: 0.31s; }
.stagger > *:nth-child(3)  { animation-delay: 0.37s; }
.stagger > *:nth-child(4)  { animation-delay: 0.43s; }
.stagger > *:nth-child(5)  { animation-delay: 0.49s; }
.stagger > *:nth-child(6)  { animation-delay: 0.55s; }
.stagger > *:nth-child(7)  { animation-delay: 0.61s; }
.stagger > *:nth-child(8)  { animation-delay: 0.67s; }
.stagger > *:nth-child(9)  { animation-delay: 0.73s; }
.stagger > *:nth-child(10) { animation-delay: 0.79s; }
.stagger > *:nth-child(11) { animation-delay: 0.85s; }
.stagger > *:nth-child(12) { animation-delay: 0.91s; }
.stagger > *:nth-child(13) { animation-delay: 0.97s; }
.stagger > *:nth-child(14) { animation-delay: 1.03s; }
.stagger > *:nth-child(15) { animation-delay: 1.09s; }
.stagger > *:nth-child(16) { animation-delay: 1.15s; }
.stagger > *:nth-child(17) { animation-delay: 1.21s; }
.stagger > *:nth-child(18) { animation-delay: 1.27s; }
.stagger > *:nth-child(19) { animation-delay: 1.33s; }
.stagger > *:nth-child(20) { animation-delay: 1.39s; }
.stagger > *:nth-child(n+21) { animation-delay: 1.45s; }

@media (prefers-reduced-motion: reduce) {
  .appear-rise, .appear-sink, .appear-fade, .stagger > * { animation: none; opacity: 1; }
}

/* ---------- pill navigation ---------- */

.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }

.pill-nav {
  position: fixed;
  top: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  width: min(365px, calc(100vw - 2 * var(--gap)));
  z-index: 60;
  border-radius: 26px;
  background: var(--veil);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  overflow: hidden;
  transition: border-radius 0.45s var(--ease-appear);
}
.pill-nav .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 26px;
}
.pill-nav .brand { color: #fff; }
.burger {
  display: grid;
  gap: 4px;
  cursor: pointer;
  padding: 8px 0 8px 16px;
}
.burger i {
  display: block;
  width: 14px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.35s var(--ease-appear), opacity 0.35s;
}
.pill-nav .menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-appear);
}
.pill-nav .menu > div { overflow: hidden; }
.pill-nav .menu ul {
  padding: 56px 0 72px;
  text-align: center;
}
.pill-nav .menu a {
  display: inline-block;
  color: #fff;
  font-size: 40px;
  line-height: 1.1;
  transition: opacity 0.25s ease;
}
.pill-nav .menu a:hover { opacity: 0.55; }
.pill-nav .menu a[aria-current="page"] { opacity: 0.4; }

.nav-toggle-input:checked ~ .pill-nav { border-radius: 22px; }
.nav-toggle-input:checked ~ .pill-nav .menu { grid-template-rows: 1fr; }
.nav-toggle-input:checked ~ .pill-nav .burger i:nth-child(1) { transform: translateY(2.75px) rotate(45deg); }
.nav-toggle-input:checked ~ .pill-nav .burger i:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); }

/* ---------- view toggle pill ---------- */

.view-toggle {
  position: fixed;
  top: var(--gap);
  left: var(--gap);
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 50px;
  padding: 0 22px 0 26px;
  border: 0;
  border-radius: 26px;
  background: var(--veil);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
}
.view-toggle .labels {
  position: relative;
  height: 16px;
  overflow: hidden;
  min-width: 72px;
  text-align: left;
}
.view-toggle .labels span {
  display: block;
  height: 16px;
  transition: transform 0.4s var(--ease-appear);
}
.view-toggle[data-mode="list"] .labels span { transform: translateY(-16px); }
.view-toggle .ico { display: grid; gap: 2px; }
.view-toggle .ico i { display: block; width: 12px; height: 1.5px; background: #fff; }
.view-toggle .ico.grid { grid-template-columns: 5px 5px; gap: 2px; }
.view-toggle .ico.grid i { width: 5px; height: 5px; }

/* ---------- home hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
}
.hero .wordmark {
  font-size: 26.5vw;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  will-change: transform;
}
.hero .scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
}

/* ---------- project browser (grid + list) ---------- */

.browser {
  position: relative;
  scroll-snap-align: start;
}
.browser[data-mode="grid"] {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.browser[data-mode="list"] {
  height: auto;
  min-height: 100svh;
  overflow: visible;
}

/* grid mode: 4 ticker columns */
.ticker-wrap {
  position: absolute;
  inset: 0;
  padding: 0 var(--gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  overflow: hidden; /* keeps the tall belts from inflating page height in list mode */
  transition: opacity 0.4s ease, transform 0.4s var(--ease-appear);
}
.browser[data-mode="list"] .ticker-wrap {
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}
.ticker-col { position: relative; overflow: visible; }
.ticker-col .belt { will-change: transform; }
.pcard {
  display: block;
  padding-bottom: 41px;
}
.pcard .ph {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 299 / 310;
  background: #f2f2f2;
}
.pcard .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-appear);
}
.pcard:hover .ph img { transform: scale(1.045); }
.pcard h2 {
  font-size: var(--big);
  line-height: var(--big-lh);
  font-weight: 400;
  padding: 6px 5px 0;
}
.pcard .svc { display: block; color: var(--ink-2); padding: 2px 5px 0; }

/* list mode: table */
.list-table {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 160px var(--gap) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.browser[data-mode="list"] .list-table {
  position: static;
  overflow: visible;
  padding-top: 160px;
  opacity: 1;
  pointer-events: auto;
}

.trow, .thead {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.thead { color: var(--ink-2); padding-bottom: 26px; }
.trow {
  font-size: var(--big);
  line-height: var(--big-lh);
  position: relative;
  z-index: 2;
}
.trow span { display: block; }
.trow:hover { color: var(--ink-2); }
.row-img {
  position: fixed;
  left: calc(37.5vw + 2 * var(--gap));
  top: 0;
  width: 320px;
  height: 400px;
  border-radius: 5px;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.row-img.show { opacity: 1; }

/* ---------- static footer ---------- */

.site-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: 120px var(--gap) var(--gap);
}
.site-footer a:hover { color: var(--ink-2); }

/* ---------- project detail ---------- */

.detail-intro {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  padding: var(--gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.detail-copy { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 2 * var(--gap)); }
.detail-copy h1 {
  font-size: var(--big);
  font-weight: 400;
  line-height: var(--big-lh);
}
.detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: auto;
  padding-bottom: 96px;
}
.detail-desc {
  font-size: var(--big);
  line-height: var(--big-lh);
  text-indent: calc(25vw - 60px);
  padding-right: 6px;
}
.detail-pagenav {
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
}
.detail-pagenav a:hover { opacity: 0.6; }
.next-teaser {
  display: block;
  width: 296px;
  margin: 90px auto 0;
}
.next-teaser .tz {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 296 / 320;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.next-teaser:hover .tz { opacity: 1; }
.next-teaser img { width: 100%; height: 100%; object-fit: cover; }
.next-teaser .nx {
  display: block;
  font-size: var(--big);
  line-height: 1.6;
  text-align: center;
}
.detail-hero {
  position: sticky;
  top: var(--gap);
  align-self: start;
  border-radius: 5px;
  overflow: hidden;
  height: calc(100svh - 2 * var(--gap));
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }

.detail-duo {
  height: 100svh;
  scroll-snap-align: start;
  padding: var(--gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.detail-duo figure, .detail-solo figure {
  border-radius: 5px;
  overflow: hidden;
  height: calc(100svh - 2 * var(--gap));
}
.detail-duo img, .detail-solo img { width: 100%; height: 100%; object-fit: cover; }
.detail-solo {
  height: 100svh;
  scroll-snap-align: start;
  padding: var(--gap);
}
.detail-footer { scroll-snap-align: end; }

/* ---------- studio ---------- */

.studio-statement {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 var(--gap);
}
.studio-statement h1 {
  font-weight: 400;
  font-size: var(--big);
  line-height: var(--big-lh);
  margin-bottom: 78px;
}
.studio-statement p {
  font-size: var(--big);
  line-height: var(--big-lh);
  max-width: calc(2 * var(--col-w) + var(--gap));
}
.team-belt-section {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.tcard { padding-bottom: 41px; display: block; }
.tcard .ph {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 299 / 330;
  background: #f2f2f2;
}
.tcard .ph img { width: 100%; height: 100%; object-fit: cover; }
.tcard .ph h2 {
  position: absolute;
  left: 15px;
  bottom: 8px;
  color: #fff;
  font-weight: 400;
  font-size: var(--big);
  line-height: 1;
}
.tcard .who { padding: 10px 5px 0; display: flex; gap: 10px; }
.tcard .who .role { color: var(--ink-2); }

.studio-cta-block {
  position: relative;
  margin: var(--gap);
  border-radius: 5px;
  overflow: hidden;
  min-height: 160svh;
  display: grid;
  place-items: center;
}
.studio-cta-block > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.studio-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 120px;
  padding: 120px 0;
}
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 0 60px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 30px;
  letter-spacing: -0.02em;
  transition: background 0.3s ease;
}
.btn-pill:hover { background: rgba(255, 255, 255, 0.4); }
.tag-stack { display: grid; justify-items: center; gap: 12px; }
.tag-stack span {
  display: inline-block;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 2px 26px 6px;
  font-size: 32px;
  line-height: 1.2;
}

/* ---------- journal ---------- */

.journal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px var(--gap);
  padding: 172px var(--gap) 0;
}
.jcard .ph {
  border-radius: 5px;
  overflow: hidden;
  background: #f2f2f2;
}
.jcard .ph img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-appear);
}
.jcard:hover .ph img { transform: scale(1.04); }
.jcard[data-h="tall"] .ph { aspect-ratio: 299/397; }
.jcard[data-h="mid"]  .ph { aspect-ratio: 299/339; }
.jcard[data-h="sq"]   .ph { aspect-ratio: 299/299; }
.jcard .ph img { height: 100%; }
.jcard .cat { color: var(--ink-2); padding: 14px 0 6px; }
.jcard h2 {
  font-weight: 400;
  font-size: calc(var(--big) * 0.94);
  line-height: var(--big-lh);
  color: #b9b9b9;
  transition: color 0.35s ease;
}
.jcard:hover h2 { color: var(--ink); }

/* ---------- contact ---------- */

.contact-hero {
  position: relative;
  height: 100svh;
  padding: var(--gap);
}
.contact-hero .frame {
  position: relative;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.contact-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-card {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
.contact-card .lines {
  font-size: var(--big);
  line-height: 1.25;
}
.contact-card a:hover { opacity: 0.65; }
.contact-card .socials {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 46px;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- generic page top pad for chrome ---------- */
.page-pad { padding-top: 160px; }

/* ============================================================
   Tablet  (810–1199)
   ============================================================ */
@media (max-width: 1199.98px) {
  :root { --big: clamp(26px, 3.4vw, 40px); }
  .row-img { width: 260px; height: 325px; }
  .detail-desc { text-indent: 18vw; }
}

/* ============================================================
   Phone (<810)
   ============================================================ */
@media (max-width: 809.98px) {
  :root { --big: 27px; --col-w: calc((100vw - 3 * var(--gap)) / 2); }

  .pill-nav {
    top: auto;
    bottom: var(--gap);
    width: calc(100vw - 2 * var(--gap) - 74px);
    left: auto;
    right: var(--gap);
    transform: none;
  }
  .pill-nav.appear-rise { animation-name: rise; }
  .pill-nav .menu ul { padding: 44px 0 56px; }
  .pill-nav .menu a { font-size: 32px; }
  .view-toggle {
    top: auto;
    bottom: var(--gap);
    left: var(--gap);
    padding: 0 18px;
    gap: 14px;
  }
  .view-toggle .labels { display: none; }

  .hero .wordmark { font-size: 24vw; }

  .ticker-wrap { grid-template-columns: repeat(2, 1fr); }
  .ticker-col:nth-child(3), .ticker-col:nth-child(4) { display: none; }

  .list-table,
  .browser[data-mode="list"] .list-table { padding-top: 120px; }
  .thead { grid-template-columns: 1fr auto; }
  .thead .h-project, .thead .h-services { display: none; }
  .trow { grid-template-columns: 1fr auto; }
  .trow .c-title, .trow .c-svc { display: none; }
  .row-img { left: auto; right: var(--gap); width: 180px; height: 225px; }

  .site-footer { grid-template-columns: 1fr 1fr; row-gap: 14px; }

  .detail-intro { grid-template-columns: 1fr; }
  .detail-copy { min-height: 72svh; }
  .detail-hero { height: 80svh; }
  .detail-duo { grid-template-columns: 1fr; height: auto; }
  .detail-duo figure { height: 60svh; }
  .detail-solo figure { height: 60svh; }
  .detail-desc { text-indent: 90px; }
  .detail-pagenav { margin-top: 40px; }
  .next-teaser { width: 100%; margin-top: 50px; }
  .detail-hero { position: relative; top: 0; }
  html.snap { scroll-snap-type: none; }

  .journal-grid { grid-template-columns: repeat(2, 1fr); padding-top: 120px; }

  .studio-statement p { max-width: 100%; }
  .tag-stack span { font-size: 24px; }

  .contact-card .lines { font-size: 24px; }
  .contact-card .socials { flex-wrap: wrap; gap: 14px 20px; }
}