/* ============================================================
   OFFICE SHAWN TANG
   Structure from olivershawoffice.com (theme oso, APN Works):
   corner chrome, numbered plain-scroll feed with small/regular/
   large widths, View all grid, footer Index + Information.
   Visual language from livvaisberg.com (Cargo): black ground,
   white type on a 0.9vw base unit, 12-column grid, chrome in
   mix-blend-mode: difference, images scaling in from 0.875 as
   they enter. Her dotted, underlined caps links are deliberately
   not used: links here are plain text that dims on hover.
   Liv's faces are trial builds (ABC Helveesti, WT Garamono);
   ours is a Helvetica stack until the typography decision:
   swap --font-stack plus the @font-face hook.
   ============================================================ */

/* @font-face {
  font-family: 'OfficeFace';
  src: url('/assets/fonts/officeface.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
} */

:root {
  --bg: #000;
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.55);
  --tile: #111;
  --font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --u: clamp(8px, 0.9vw, 15px);
  --pad: var(--u);
  --t-body: calc(var(--u) * 1.6);
  --t-head: calc(var(--u) * 3);
  --gap: calc(var(--u) * 2.5);
  --cols: repeat(12, minmax(0, 1fr));
  /* from officebenganz.com: tag chips, 4px gutters, slow ease-out */
  --t-tag: max(10.5px, calc(var(--u) * 1.1));
  --tag-bg: rgba(255, 255, 255, 0.12);
  --tag-hover: #e0e0e0;
  --gutter: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  scrollbar-width: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.25 var(--font-stack);
  letter-spacing: -0.01em;
  min-height: 100dvh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { all: unset; cursor: pointer; }
a, button { transition: opacity 0.5s var(--ease); }
a:active, button:active { opacity: 0.7; }
[hidden] { display: none !important; }
ul { list-style: none; }

::selection { background: transparent; color: var(--muted); }
::-webkit-scrollbar { display: none; -webkit-appearance: none; width: 0 !important; }

#top-sentinel { position: absolute; top: 0; width: 1px; height: 1px; }

/* ---------- page transition ---------- */
#content { transition: opacity 0.45s var(--ease); }
body.website_unloading #content { opacity: 0; }

/* ---------- chrome: white + difference, inverts over images ---------- */
.site_header,
#view-all,
.site_footer {
  mix-blend-mode: difference;
  color: #fff;
}

.site_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--cols);
  padding: var(--pad) var(--pad) 0;
  pointer-events: none;
}
.site_header a { pointer-events: auto; }
/* the home page masthead is its h1, for search engines; it looks the same as elsewhere */
.mast { grid-column: 1 / span 4; font: inherit; margin: 0; }
.nav_item { grid-column: span 2; justify-self: start; }

/* text links: plain, dimming on hover */
@media (hover: hover) {
  .mast a:hover,
  .nav_item:hover,
  #view-all:hover,
  .trigger:hover,
  .foot_left > a:hover,
  .foot_right a:hover,
  .foot_right button:hover { opacity: 0.5; }
}

/* sits in column 11 of the header grid */
#view-all {
  position: fixed;
  z-index: 10;
  top: var(--pad);
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * 10 / 12);
}

.site_footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: calc(var(--u) * 8);
  align-items: end;
  padding: 0 var(--pad) var(--pad);
  pointer-events: none;
}
.site_footer a,
.site_footer button { pointer-events: auto; }
.foot_left > .trigger,
.foot_left > a { margin-right: 1.2em; white-space: nowrap; }
.foot_right .toTop { margin-right: 1.2em; }

/* ---------- About pop-up ----------
   Slides up from the footer like Oliver Shaw's Information panel; sits under
   the footer (z 9 vs 10) so the trigger, now "Close", stays on top. */
.about {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--bg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: var(--gap) var(--pad) calc(var(--u) * 6);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.about.open {
  transform: none;
  visibility: visible;
  transition: transform 0.7s var(--ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .about, .about.open { transition: none; }
}
/* while About is open the footer turns solid (Oliver's "whity" footer),
   so panel text scrolling beneath it never collides with the links */
body:has(.about.open) .site_footer {
  mix-blend-mode: normal;
  background: var(--bg);
  padding-top: var(--pad);
}

.about_inner {
  display: grid;
  grid-template-columns: var(--cols);
  row-gap: calc(var(--gap) * 1.4);
  align-items: start;
}
.about_statement {
  grid-column: 1 / span 9;
  font-size: calc(var(--u) * 2.4);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.about_text { grid-column: 1 / span 6; padding-right: 2em; }
.about_text p { max-width: 44em; }
.about_text p + p { margin-top: 1em; }
.about_text .about_clients { margin-top: 2em; }

/* Mouthwash-style labelled columns: white heading, grey items */
.about_cols {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap) var(--pad);
  font-size: calc(var(--u) * 1.25);
  line-height: 1.3;
}
.about_col {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 0.6em;
}
.about_col h2 { font: inherit; font-weight: 500; margin-bottom: 0.7em; }
.about_col li { color: var(--muted); }
.about_col li + li { margin-top: 0.15em; }
.about_col .k { display: block; color: var(--ink); }
.about_col .v { display: block; margin-bottom: 0.6em; }
.about a { transition: color 0.5s var(--ease); }
@media (hover: hover) {
  .about a:hover { color: var(--ink); }
}

/* ---------- feed ---------- */
.feed {
  padding: calc(var(--chrome-h, 60px) + var(--gap)) var(--pad) calc(var(--u) * 8);
}
.slide {
  display: block;
  margin-bottom: calc(var(--u) * 4);
}
/* width comes from srcset's sizes slot; max-height keeps a portrait image
   (and its caption) within one screen instead of running 2000px tall */
.slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - var(--chrome-h, 60px) - var(--gap) - 5em);
  background: var(--tile);
}
.slide.small img   { max-width: calc(100% * 5 / 12); }
.slide.regular img { max-width: calc(100% * 8 / 12); }
.slide.large img   { max-width: 100%; }

img.lazy { filter: blur(10px); }
img { transition: filter 0.7s var(--ease); }

/* captions: number | title over grey credit, year | scope chips */
.cap {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: start;
  margin-top: 0.6em;
  line-height: 1.1;
}
.cap .pag {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cap .who { grid-column: 2 / span 3; grid-row: 1; padding-right: 1em; }
.cap .tags { grid-column: 5 / -1; grid-row: 1; }

.t { display: block; font-weight: 500; }
.sub { display: block; color: var(--muted); }

/* ---------- tag chips (Office Ben Ganz) ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-content: flex-start;
}
.tag {
  font-size: var(--t-tag);
  line-height: 1.09;
  letter-spacing: 0.02em;
  padding: 0.6em 0.8em;
  background: var(--tag-bg);
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
@media (hover: hover) {
  .slide:hover .tag,
  .card:hover .tag { background: var(--tag-hover); color: #000; }
}

/* Liv's scrollAnimationScaleIn: 0.875 -> 1 while the image enters */
@keyframes scale_in {
  from { transform: scale(0.875); }
  to   { transform: scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .slide img,
    .project_images img {
      transform-origin: 50% 0%;
      animation: scale_in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

/* ---------- overlays: view all + index ---------- */
#view-all-container,
#index-container {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: var(--bg);
  overflow-y: auto;
  padding: calc(var(--chrome-h, 60px) + var(--gap)) var(--pad) calc(var(--u) * 8);
}

/* View all, Office Ben Ganz project grid: edge to edge, 4px gutters,
   equal-height 4:5 frames (a wide card keeps the row height) */
#view-all-container { padding-left: 0; padding-right: 0; }
#view-all-grid {
  --n: 3;
  --colw: calc((100vw - (var(--n) - 1) * var(--gutter)) / var(--n));
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: calc(var(--u) * 3.5);
}
.card { display: block; }
.card.d-wide { grid-column: span 2; }
.frame {
  display: block;
  height: calc(var(--colw) * 1.25);
  overflow: hidden;
  background: var(--tile);
}
.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card_cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1em;
  padding: 0.6em 0.5em 0;
  line-height: 1.1;
}

.row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: baseline;
  padding: 0.15em 0;
}
.row .year   { grid-column: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.row .title  { grid-column: 2 / span 3; font-weight: 500; padding-right: 1em; }
.row .scope  { grid-column: 5 / span 4; color: var(--muted); padding-right: 1em; }
.row .credit { grid-column: 9 / span 4; color: var(--muted); }
.row span { transition: color 0.5s var(--ease); }
@media (hover: hover) {
  .row:hover span { color: var(--ink); }
}

/* ---------- hover preview (index rows) ---------- */
.preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: min(300px, 24vw);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: transform;
}
.preview.visible { opacity: 1; }
.preview img { display: block; width: 100%; height: auto; }
.is_touch .preview { display: none; }
@media (prefers-reduced-motion: reduce) {
  .preview { display: none; }
}

/* ---------- project page ---------- */
.project {
  padding: calc(var(--chrome-h, 60px) + var(--gap)) var(--pad) calc(var(--u) * 8);
}
.project_meta {
  display: grid;
  grid-template-columns: var(--cols);
  row-gap: var(--gap);
  align-items: start;
}
.project_meta h1 {
  grid-column: 1 / -1;
  font-size: var(--t-head);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.facts { grid-column: 1 / span 4; }
/* the chips stop short of the description by at least the width of the word
   "Styling" (3.2 em of chip type, plus a little for fallback fonts), so a
   chip that would end up against it wraps to the next row instead */
.facts .tags { margin-top: 0.8em; padding-right: calc(var(--t-tag) * 3.4); }
.project_meta .line { grid-column: 5 / span 6; max-width: 40em; }

/* names under the description (the sheet's Collaborators column):
   a grey label, then the names in columns */
.credits { margin-top: calc(var(--u) * 2.5); }
.credits ul {
  list-style: none;
  columns: 3;
  column-gap: calc(var(--u) * 2);
  margin-top: 0.3em;
}
.credits li { break-inside: avoid; }

.project_images {
  margin-top: calc(var(--gap) * 1.5);
  display: flex;
  flex-direction: column;
  gap: var(--pad);
}
/* Row types from build.js (imageRows): columns on the 12-column grid. */
.pi_row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
  align-items: start;
}
.pi_row figure { margin: 0; }
.pi_full figure { grid-column: 1 / -1; }
.pi_pair figure:nth-child(1) { grid-column: 1 / 7; }
.pi_pair figure:nth-child(2) { grid-column: 7 / 13; }
.pi_trio figure:nth-child(1) { grid-column: 1 / 5; }
.pi_trio figure:nth-child(2) { grid-column: 5 / 9; }
.pi_trio figure:nth-child(3) { grid-column: 9 / 13; }
.pi_right figure { grid-column: 7 / 13; }
.pi_left figure { grid-column: 2 / 7; }
.pi_center figure { grid-column: 4 / 10; }
.pi_uneven figure:nth-child(1) { grid-column: 1 / 8; }
.pi_uneven figure:nth-child(2) { grid-column: 9 / 13; align-self: end; }
.project_images img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tile);
}

#strip-mobile { display: none; }

/* ---------- mobile (<= 800px) ---------- */
@media only screen and (max-width: 800px) {
  :root { --u: 8.5px; }

  .site_header {
    display: block;
    padding-right: calc(var(--pad) + 6em);
  }
  .nav_item { display: inline-block; margin-right: 1em; }
  #view-all { left: auto; right: var(--pad); }

  #strip-mobile {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--chrome-h, 60px) + var(--pad));
    background: var(--bg);
    z-index: 9;
  }

  .slide { margin-bottom: calc(var(--u) * 5); }
  .slide.small img,
  .slide.regular img { max-width: 100%; }

  .cap { grid-template-columns: 1fr auto; column-gap: 1em; }
  .cap .pag { grid-column: 2; grid-row: 1; }
  .cap .who { grid-column: 1; grid-row: 1; padding-right: 0; }
  .cap .tags { grid-column: 1 / -1; grid-row: 2; margin-top: 0.6em; }

  #view-all-grid { --n: 2; }
  .card.d-wide { grid-column: auto; }
  .card.m-wide { grid-column: span 2; }
  .card_cap { grid-template-columns: 1fr; }
  .card_cap .tags { display: none; }

  .row { grid-template-columns: 5em 1fr; padding: 0.45em 0; }
  .row .year { grid-column: 1; grid-row: 1 / span 3; }
  .row .title, .row .scope, .row .credit { grid-column: 2; padding-right: 0; }

  .project_meta .facts,
  .project_meta .line { grid-column: 1 / -1; }
  .facts .tags { padding-right: 0; }
  .credits ul { columns: 2; }
  .pi_row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project_images .pi_row figure:nth-child(n) { grid-column: auto; }
  .project_images .pi_row figure:only-child,
  .project_images .pi_trio figure:first-child { grid-column: 1 / -1; }

  .about { max-height: 85dvh; padding-top: calc(var(--gap) * 1.2); }
  .about_statement { grid-column: 1 / -1; font-size: calc(var(--u) * 2.2); }
  .about_text { grid-column: 1 / -1; padding-right: 0; }
  .about_cols { grid-column: 1 / -1; font-size: calc(var(--u) * 1.5); }

  .site_footer .toTop { display: none !important; }
  .site_footer { column-gap: 1em; }
  .foot_left > .trigger,
  .foot_left > a { margin-right: 0.8em; }
  .nav_item { margin-right: 0.8em; }
}