/* Bruno Zabala, rebuild of the "Works," index layout. Clean-room: every rule written here. */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  --bg: #ffffff;
  --ink: #242424;        /* headings, chrome */
  --black: #000000;      /* list, body copy */
  --dim: 0.32;           /* inactive links and labels */
  --ph: #e6e6e6;         /* placeholder box */
  --ph-text: #8d8d8d;

  --m: 20px;             /* page margin */
  --g: 10px;             /* column gap */
  --cw: calc((100vw - 2 * var(--m) - 15 * var(--g)) / 16);   /* 16-column grid */
  --tw: calc(2 * var(--cw) + var(--g));                        /* one tile = two columns */
  --c3: calc(var(--m) + 2 * (var(--cw) + var(--g)));
  --c6: calc(var(--m) + 5 * (var(--cw) + var(--g)));
  --c9: calc(var(--m) + 8 * (var(--cw) + var(--g)));
  --rowh: calc(var(--tw) * 1.3158);                             /* tallest tile in a row */
  --top: 45vh;                                                  /* the reading line */

  --big: 9.139vw;        /* 131.6px at 1440 */
  --ease: cubic-bezier(.19, 1, .22, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
ul { list-style: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ---------- big page word ---------- */
.bigwords { position: fixed; inset: 0; pointer-events: none; z-index: 22; }
.bigword {
  position: absolute; top: -10px; left: var(--m);
  font-size: var(--big); line-height: 1.14; letter-spacing: 0.026em;
  color: var(--ink); white-space: nowrap;
  visibility: hidden;
}
.bigword[data-word="about"] { left: var(--c6); }
.bw-in { display: inline-block; transform-origin: 0 0; }
.bw-in .ch { display: inline-block; }
.bw-mask { display: inline-block; overflow: hidden; vertical-align: top; }
body[data-route="home"] .bigword[data-word="home"],
body[data-route="about"] .bigword[data-word="about"],
.bigword.is-flying { visibility: visible; }

/* ---------- header ---------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 30; pointer-events: none; }
.hd a { pointer-events: auto; }
.hd-links { position: fixed; left: var(--c6); top: 15px; display: flex; white-space: nowrap; }
.hl { display: inline-block; opacity: var(--dim); transition: opacity .35s ease; }
.hl { margin-right: 4px; }
.hl:hover { opacity: 1; }
.hl.is-hidden-fly { visibility: hidden; }
body[data-route="home"] .hl-works { display: none; }
body[data-route="about"] .hl-works { position: absolute; right: calc(100% + 10px); }
body[data-route="about"] .hl-about { display: none; }
body[data-route="about"] .hl-contact { margin-left: var(--aw, 420px); }
body[data-route="focus"] .hl-works { opacity: 1; }

.hd-name { display: none; }
.hd-index, .hd-meta, .hd-visit, .hd-mail { position: fixed; top: 15px; display: none; }
.hd-index { left: var(--m); }
.hd-meta { right: calc(var(--m) + 2 * var(--cw) + 2 * var(--g)); white-space: nowrap; color: var(--black); }
.hd-meta-in { display: inline-block; }
.hd-visit { right: var(--m); color: var(--black); align-items: center; gap: 4px; }
.hd-visit svg { display: inline-block; transition: transform .45s var(--ease); }
.hd-visit:hover svg { transform: translate(2px, -2px); }
.hd-mail { right: var(--m); }
body[data-route="focus"] .hd-index,
body[data-route="focus"] .hd-meta,
body[data-route="about"] .hd-mail { display: block; }
body[data-route="focus"] .hd-visit.has-link { display: inline-flex; }

/* ---------- footer ---------- */
.ft { position: fixed; inset: auto 0 0 0; z-index: 30; pointer-events: none; }
.ft > * { pointer-events: auto; position: fixed; bottom: 15px; }
.ft-name { left: var(--c6); }
.ft-social { left: calc(var(--c6) + var(--tw)); transform: translateX(-100%); opacity: var(--dim); transition: opacity .35s ease; display: none; }
.ft-social:hover { opacity: 1; }
.ft-left { left: var(--m); color: var(--black); display: none; }
.ft-right { right: var(--m); color: var(--black); display: none; }
body[data-route="about"] .ft-social,
body[data-route="about"] .ft-left,
body[data-route="about"] .ft-right { display: block; }

/* ---------- project list ---------- */
.plist { position: fixed; left: var(--c6); top: var(--top); min-width: var(--tw); z-index: 25; }
.plist-in { padding-right: 22px; }
.plist-in { position: relative; }
.plist-ul li {
  font-size: 12px; line-height: 18px; text-transform: uppercase; color: var(--black);
  opacity: var(--dim); cursor: pointer; transition: opacity .3s ease; white-space: nowrap;
}
.plist-ul li .pl-t { display: inline-block; }
.plist-ul li:hover, .plist-ul li.is-active { opacity: 1; }
.plist-arrow { position: absolute; right: 0; top: 4px; fill: var(--black); transition: transform .6s var(--ease); }
body[data-route="about"] .plist { visibility: hidden; }

/* ---------- scroll bar ---------- */
.scrollbar { position: fixed; right: 0; top: 0; width: 4px; height: 0; background: var(--ink); z-index: 26; }

/* ---------- views ---------- */
main { position: relative; z-index: 1; }
.view { display: none; }
body[data-route="home"] .view-home,
body[data-route="focus"] .view-focus,
body[data-route="about"] .view-about { display: block; }

/* placeholder in the reference's own frame */
.ph { position: absolute; inset: 0; background: var(--ph); overflow: hidden; }
.ph-cap {
  position: absolute; left: 6px; right: 6px; bottom: 5px;
  font-size: 9px; line-height: 11px; font-weight: 500; color: var(--ph-text);
  text-transform: none; letter-spacing: 0;
}
.ph-cap b { display: block; font-weight: 600; }

/* ---------- home: works index ---------- */
.home-rows { padding-top: var(--top); padding-bottom: calc(55vh - var(--rowh)); }
.row {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--g);
  padding: 0 var(--m); height: var(--rowh); margin-bottom: 100px;
}
.row:last-child { margin-bottom: 0; }
.cell { grid-column: span 2; position: relative; height: var(--rowh); }
.cell:nth-child(1) { grid-column: 1 / span 2; }
.cell:nth-child(2) { grid-column: 3 / span 2; }
.cell:nth-child(3) { grid-column: 9 / span 2; }
.cell:nth-child(4) { grid-column: 11 / span 2; }
.cell:nth-child(5) { grid-column: 13 / span 2; }
.cell:nth-child(6) { grid-column: 15 / span 2; }
.tile { display: block; position: relative; width: 100%; cursor: pointer; }
.L { aspect-ratio: 16 / 10; }
.S { aspect-ratio: 1 / 1; }
.P { aspect-ratio: 0.76 / 1; }
.idx {
  position: absolute; left: 0; top: calc(var(--rowh) - 45px);
  font-size: 50px; line-height: 50px; color: var(--black); letter-spacing: -0.01em;
}
.idx.r { left: auto; right: 0; }

/* ---------- focus: one project open ---------- */
.view-focus { padding-top: var(--top); }
.focus-thumbs { margin-left: var(--c3); width: var(--tw); }
.fblock + .fblock { margin-top: 90px; }
.fthumb { position: relative; width: 100%; cursor: pointer; display: block; }
.fthumb + .fthumb { margin-top: 10px; }
.focus-num {
  position: fixed; left: var(--m); top: var(--top); display: flex;
  font-size: 50px; line-height: 50px; color: var(--black); letter-spacing: -0.01em;
}
.fn-d { display: block; overflow: hidden; height: 50px; }
.fn-roll { display: block; }
.fn-roll span { display: block; height: 50px; }
.focus-right {
  position: fixed; left: var(--c9); right: var(--m); top: 65px; bottom: 20px;
  display: flex; flex-direction: column;
}
.focus-text {
  height: calc(100vh - 105px - (8 * var(--cw) + 7 * var(--g)) / 1.6); /* leaves a full-width 16:10 frame below */
  min-height: 120px; margin-bottom: 20px; overflow-y: auto; scrollbar-width: none;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--g) * 3);
  font-size: 12px; line-height: 18px; color: var(--black); align-content: start;
}
.focus-text::-webkit-scrollbar { display: none; }
.ft-col > * + * { margin-top: 18px; }
.ft-label { text-transform: uppercase; opacity: var(--dim); margin-bottom: -12px; }
.ft-list li + li { margin-top: 0; }
.ft-list.num { counter-reset: s; }
.ft-list.num li::before { counter-increment: s; content: "(" counter(s, decimal-leading-zero) ") "; }
.focus-frame { position: relative; flex: 1 1 auto; min-height: 0; }
.focus-big { position: absolute; inset: 0; }
.fb-item { position: absolute; right: 0; bottom: 0; opacity: 0; }
.fb-item.is-on { opacity: 1; }
.fb-item .ph-cap { font-size: 11px; line-height: 14px; left: 10px; bottom: 8px; }
.focus-mobile { display: none; }

/* ---------- about ---------- */
.view-about { position: relative; min-height: 100vh; }
.about-grid { position: relative; min-height: 100vh; }
.ab-label { font-size: 12px; line-height: 14px; text-transform: uppercase; opacity: var(--dim); color: var(--black); margin-bottom: 20px; }
.ab-text { font-size: 12px; line-height: 18px; color: var(--black); }
.ab-text p + p { margin-top: 18px; }
.ab-bio { position: absolute; left: var(--m); top: calc(var(--top) - 34px); width: calc(3 * var(--cw) + 2 * var(--g)); }
.ab-based { display: none; }
.ab-work { position: absolute; left: var(--c6); top: calc(var(--top) - 34px); width: calc(6 * var(--cw) + 5 * var(--g)); }
.ab-name { text-transform: uppercase; display: inline-block; }
.ab-col { position: absolute; top: calc(var(--top) - 34px); width: var(--cw); font-size: 12px; line-height: 18px; color: var(--black); }
.ab-c1 { left: calc(var(--m) + 13 * (var(--cw) + var(--g))); }
.ab-c2 { left: calc(var(--m) + 14 * (var(--cw) + var(--g))); text-align: right; }
.ab-c3 { left: calc(var(--m) + 15 * (var(--cw) + var(--g))); text-align: right; }
.ab-rows div { white-space: nowrap; }
.ab-facts { display: none; }
.line-w { display: block; overflow: hidden; }
.line { display: block; }

/* ---------- transitions ---------- */
.fade { position: fixed; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; z-index: 15; }
.flyer { position: fixed; z-index: 40; font-size: 12px; line-height: 18px; text-transform: uppercase; color: var(--black); pointer-events: none; white-space: nowrap; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 60; background: var(--bg); pointer-events: none; }
.loader-no { position: absolute; left: var(--m); top: 0; overflow: hidden; font-size: var(--big); line-height: 1; color: var(--black); letter-spacing: -0.01em; }
.loader-n { display: block; }
.loader-line { position: absolute; right: 0; bottom: 0; width: 4px; height: 0; background: var(--ink); }
body.is-loaded .loader { display: none; }

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root {
    --mtw: calc((100vw - 2 * var(--m) - var(--g)) / 2);
  }
  .bigwords { display: none; }
  .hd-name { display: block; position: fixed; left: var(--m); top: 20px; }
  .hd-links { left: calc(50% + 18px); top: 20px; }
  body[data-route="about"] .hl-works { right: calc(100% + 5px); }
  body[data-route="about"] .hl-contact { display: none; }
  body[data-route="focus"] .hd-links,
  body[data-route="focus"] .hd-name,
  body[data-route="focus"] .hd-meta { display: none; }
  .hd-index { top: 20px; }
  .hd-visit { top: 20px; }
  .hd-mail { top: auto; bottom: 15px; }
  .ft-name, .ft-left, .ft-right { display: none !important; }
  .ft-social { left: var(--m); transform: none; opacity: 1; }

  .plist { left: calc(var(--m) + var(--mtw) + var(--g)); right: var(--m); min-width: 0; top: auto; bottom: 20px; }
  .plist-in { padding-right: 0; padding-left: 16px; }
  .plist-ul li { line-height: 14px; padding: 4px 0; text-align: right; white-space: normal; }
  .plist-ul li.is-active { opacity: var(--dim); }
  .plist-ul li:hover { opacity: 1; }
  .plist-arrow { left: 0; right: auto; top: 6px; transform-origin: 50% 50%; }
  body[data-route="focus"] .plist { display: none; }
  .scrollbar { left: 0; right: auto; width: 5px; }

  .home-rows { padding-top: var(--top); padding-bottom: 40px; }
  .row { display: flex; flex-direction: column; gap: var(--g); height: auto; width: calc(var(--mtw) + var(--m)); }
  .cell { height: auto; width: var(--mtw); }
  .idx { display: none; }

  .view-focus { padding: 0; }
  .focus-thumbs, .focus-num, .focus-right { display: none; }
  .focus-mobile {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: fixed; left: var(--m); right: var(--m); top: 65px; bottom: 20px;
  }
  .fm-head { display: flex; flex-direction: column; gap: 5px; color: var(--black); }
  .fm-title { text-transform: uppercase; }
  .fm-meta { font-weight: 500; }
  .fm-text {
    margin-top: 14px; min-height: 0; flex: 0 1 auto; overflow-y: auto; scrollbar-width: none;
    font-size: 12px; line-height: 16px; color: var(--black);
  }
  .fm-text::-webkit-scrollbar { display: none; }
  .fm-text .ft-col > * + * { margin-top: 14px; }
  .fm-text .ft-col + .ft-col { margin-top: 14px; }
  .fm-text .ft-label { margin-bottom: -10px; }
  .fm-frame { display: block; position: relative; width: 100%; margin-top: 20px; flex: 0 0 auto; cursor: pointer; }
  .fm-big { position: relative; width: 100%; }
  .fm-big .ph { position: relative; inset: auto; width: 100%; }
  .fm-foot { display: flex; justify-content: space-between; margin-top: 20px; opacity: var(--dim); color: var(--black); }

  .view-about { min-height: 0; }
  .about-grid { padding: 111px var(--m) 120px; min-height: 100vh; }
  .ab-bio, .ab-work { position: static; width: auto; }
  .ab-label { margin-bottom: 16px; }
  .ab-text { line-height: 14px; }
  .ab-text p + p { margin-top: 14px; }
  .ab-based { display: block; margin-top: 15px; font-size: 12px; line-height: 14px; color: var(--black); }
  .ab-work { margin-top: 40px; }
  .ab-col { display: none; }
  .ab-facts { display: grid; grid-template-columns: 120px 1fr; row-gap: 8px; margin-top: 60px; font-size: 12px; line-height: 14px; color: var(--black); }
  .ab-facts .k { text-transform: uppercase; opacity: var(--dim); }
  .ab-facts .v { text-transform: uppercase; }

  .loader-no { left: auto; right: var(--m); top: 10px; font-size: 50px; }
  .loader-line { left: 0; right: auto; top: 0; bottom: auto; width: 5px; }
}

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