/* Chalk Creative Partners — index-grid portfolio */
:root {
  --bg: #121212;
  --fg: #fff;
  --dim: #6b6b6b;
  --faint: #2a2a2a;
  --accent: #ff5a36;
  --crawl: #ffe81f;
  --pad: 10px;
  --gap: 10px;
  --cols: 7;
  --fs: 12px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 1400px) { :root { --fs: 13px; --pad: 14px; --gap: 14px; } }
@media (max-width: 1000px) { :root { --cols: 4; } }
@media (max-width: 600px)  { :root { --cols: 2; --pad: 16px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs)/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a:hover, button:hover { color: var(--dim); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.arrow { display: inline-block; width: .62em; height: .62em; margin-left: .1em; vertical-align: .02em; fill: currentColor; }

/* ---------- intro (logo animation, doubles as the loader) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50;
  background: #000;
  pointer-events: none;
  transition: opacity .8s var(--ease), visibility 0s .8s;
}
.loader__video { width: 100%; height: 100%; object-fit: cover; }
.loader.is-skipped .loader__video { display: none; }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

.head, .list, .foot { position: relative; z-index: 1; }

/* ---------- header ---------- */
.head {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap);
  padding: var(--pad);
  min-height: 42vh;
  align-items: start;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.head__name { grid-column: 1 / span 2; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.head__mark { width: 18px; height: auto; }
.head__loc { grid-column: 3; }
.head__caps { grid-column: 4; white-space: nowrap; }
.head__press { grid-column: 5; white-space: nowrap; }
.head__media { grid-column: 6; white-space: nowrap; }
.head__list ul { padding-left: 8px; }
.head__profile { grid-column: 7; grid-row: 1; justify-self: start; }
.head__mail { grid-column: 7; grid-row: 1; justify-self: end; }
.head__link { text-align: right; }

@media (max-width: 1000px) {
  .head { row-gap: 22px; min-height: 0; padding-bottom: 16vh; }
  .head__name { grid-column: 1 / span 2; grid-row: 1; }
  .head__profile { grid-column: 3; grid-row: 1; justify-self: end; }
  .head__mail { grid-column: 4; grid-row: 1; }
  .head__loc { grid-column: 1 / -1; grid-row: 2; color: var(--dim); margin-top: -18px; }
  .head__caps { grid-column: 1 / span 2; grid-row: 3; white-space: normal; }
  .head__press { grid-column: 1 / span 2; grid-row: 4; white-space: normal; }
  .head__media { grid-column: 1 / span 2; grid-row: 5; white-space: normal; }
}
@media (max-width: 600px) {
  .head__name { grid-column: 1; }
  .head__profile { grid-column: 2; justify-self: start; }
  .head__mail { grid-column: 2; }
  .head__caps { grid-column: 1; }
  .head__press { grid-column: 1; }
  .head__media { grid-column: 1; }
  .head__list ul { padding-left: 0; }
}

/* ---------- list layout (one row per project) ---------- */
.list { padding: 0 var(--pad) 20vh; }
.row {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap);
  margin-bottom: 20px;
  --reveal: cubic-bezier(.16, 1, .3, 1);
}
.row:hover { color: inherit; }
.row__info {
  grid-column: 1 / span 2;
  position: sticky; top: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  padding-top: 20px;
  font-size: calc(var(--fs) * 1.3);
  line-height: 1.6;
}
/* hairline above the info: draws in from the left */
.row__info::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: #262626;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--reveal);
}
.row:first-child .row__info::before { display: none; }
.row__name { font: inherit; color: var(--fg); }
.row__tag { color: #adadad; }
.row__brief { color: #7a7a7a; max-width: 26em; text-wrap: pretty; }
.row__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.row__chips li {
  font-size: 12px;
  line-height: 1;
  color: #a3a3a3;
  background: #1f1f1f;
  border-radius: 999px;
  padding: 6px 12px 7px;
}
/* info lines rise in one after another */
.row__name, .row__tag, .row__brief, .row__chips {
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--reveal), transform 1s var(--reveal);
}
.row__tag { transition-delay: .08s; }
.row__brief { transition-delay: .16s; }
.row__chips { transition-delay: .24s; }
.row__media {
  grid-column: 3 / -1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--faint);
  aspect-ratio: 16 / 9;
  /* image wipes up from the bottom */
  clip-path: inset(100% 0 0 0 round 4px);
  transition: clip-path 1.3s var(--reveal);
}
.row__media img, .row__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.8s var(--reveal), opacity .4s;
}
.row.is-in .row__info::before { transform: none; }
.row.is-in .row__name, .row.is-in .row__tag, .row.is-in .row__brief, .row.is-in .row__chips { opacity: 1; transform: none; }
.row.is-in .row__media { clip-path: inset(0 0 0 0 round 4px); }
.row.is-in .row__media img, .row.is-in .row__media video { transform: none; }
.row.is-in:hover .row__media img, .row.is-in:hover .row__media video { transform: scale(1.025); transition-duration: 1.2s; }
.row:hover .row__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (max-width: 1000px) {
  .row { display: flex; flex-direction: column-reverse; gap: 16px; margin-bottom: 64px; }
  .row__info { position: static; padding-top: 0; }
  .row__info::before { display: none; }
  .row__media { width: 100%; }
}


/* ---------- footer ---------- */
.foot {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap);
  padding: var(--pad) var(--pad) 64px;
  color: var(--dim);
}
.foot > :nth-child(2) { grid-column: 5; }
.foot > :nth-child(3) { grid-column: 6 / span 2; justify-self: end; }
@media (max-width: 1000px) {
  .foot { row-gap: 4px; }
  .foot > * { grid-column: 1 / -1 !important; justify-self: start !important; }
}

/* ---------- project panel ---------- */
.project, .profile {
  position: fixed; inset: 0; z-index: 30;
  background: var(--bg);
  visibility: hidden; opacity: 0;
  transition: opacity .45s var(--ease), visibility 0s .45s;
}
.project.is-open, .profile.is-open {
  visibility: visible; opacity: 1;
  transition: opacity .45s var(--ease), visibility 0s;
}
.project {
  display: grid;
  grid-template-columns: calc((100% - var(--gap) * 6) / 7 * 2.5 + var(--gap) * 2) 1fr;
  column-gap: var(--gap);
}
.project__side {
  display: flex; flex-direction: column; gap: 22px;
  padding: var(--pad);
  height: 100vh; height: 100dvh;
  overflow: auto;
}
.project__top { display: flex; justify-content: space-between; gap: 12px; }
.project__title { font: inherit; }
.project__brief {
  font-size: calc(var(--fs) * 1.25);
  line-height: 1.22;
  max-width: 34em;
  text-wrap: pretty;
}
.project__meta {
  display: grid;
  grid-template-columns: 1.6em 6.5em 1fr;
  row-gap: 1px;
}
.project__meta dt, .project__meta dd { line-height: 1.25; }
.project__meta .n { color: var(--fg); }
.project__nav { display: flex; justify-content: space-between; color: var(--fg); }
.project__count { color: var(--dim); font-variant-numeric: tabular-nums; }
.project__thumbs {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: start;
}
.project__thumbs button { position: relative; text-align: left; }
.project__thumbs button span { display: block; text-align: right; padding-bottom: 3px; color: var(--dim); }
.project__thumbs button:hover span { color: var(--fg); }
.project__thumbs img { width: 100%; height: auto; opacity: .55; transition: opacity .3s; }
.project__thumbs button:hover img { opacity: 1; }
.project__media {
  height: 100vh; height: 100dvh;
  overflow: auto;
  padding: var(--pad) var(--pad) var(--pad) 0;
  display: flex; flex-direction: column; gap: 4px;
  overscroll-behavior: contain;
}
.project__media img, .project__media video {
  width: 100%; height: auto;
  background: var(--faint);
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.project__media .is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .project { grid-template-columns: 1fr; overflow: auto; }
  .project__side, .project__media { height: auto; overflow: visible; }
  .project__media { padding: 0 var(--pad) var(--pad); }
  .project__thumbs { display: none; }
}

/* ---------- profile panel ---------- */
.profile { overflow: auto; }
.profile__inner { padding: var(--pad); padding-bottom: 12vh; }
.profile__top { display: flex; justify-content: space-between; margin-bottom: 20vh; }
.profile__row {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap);
  padding: 14px 0 60px;
  border-top: 1px solid var(--faint);
}
.profile__label { grid-column: 1 / span 2; color: var(--dim); }
.profile__body { grid-column: 3 / -1; }
.profile__lead {
  font-size: clamp(20px, 2.1vw, 34px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 30em;
}
.profile__lead p + p { margin-top: .8em; }
.profile__points { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: p; }
.profile__points li { counter-increment: p; }
.profile__points span { display: block; margin-bottom: 8px; }
.profile__points span::before { content: counter(p) "  "; color: var(--dim); white-space: pre; }
.profile__points p { color: #bdbdbd; max-width: 24em; }
.profile__caps { columns: 3; column-gap: var(--gap); }
.profile__press { font-size: clamp(16px, 1.4vw, 22px); line-height: 1.2; }
.profile__press span { display: block; color: var(--dim); font-size: var(--fs); margin-bottom: 6px; }
.profile__contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); font-size: clamp(16px, 1.4vw, 22px); line-height: 1.2; }
@media (max-width: 1000px) {
  .profile__label, .profile__body { grid-column: 1 / -1; }
  .profile__label { margin-bottom: 14px; }
  .profile__points { grid-template-columns: 1fr 1fr; row-gap: 24px; }
}
@media (max-width: 600px) {
  .profile__points, .profile__contact { grid-template-columns: 1fr; }
  .profile__caps { columns: 1; }
  .profile__top { margin-bottom: 10vh; }
}

body.panel-open, body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}