/* tarenwang.work */

@view-transition { navigation: auto; }

:root {
  --bg: #eef4fc;
  --fg: #234461;
  --muted: #313445;
  --line: rgba(35, 68, 97, 0.14);
  --font: "Jost", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --nav-w: 170px;
  --edge: clamp(24px, 4vw, 64px);
  --gut: 16px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}
body { margin: 0; min-height: 100svh; background: var(--bg); }
img { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, figure { margin: 0; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.photo-img { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ── nav ── */
/* view-transition-name makes .nav its own stacking context, so the whole nav needs the z-index */
.nav { view-transition-name: nav; position: relative; z-index: 40; }
.nav a {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.nav a:hover { opacity: 0.55; }
.nav a[aria-current="page"] { opacity: 1; }
.page-home .nav .nav-name { opacity: 1; }
.nav-name { position: fixed; left: 21px; top: 19px; z-index: 40; }
.nav-links {
  position: fixed; z-index: 40;
  left: 23px; top: clamp(200px, 41vh, 440px);
  display: flex; flex-direction: column; gap: 17px;
}

/* ── slideshow (home, commissions) ── */
.stage {
  position: fixed; inset: 0;
  container-type: size;
  overflow: hidden;
}
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s 0.7s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity 0.7s ease, visibility 0s; }
.item {
  --u: min(100cqw / 1200, 100cqh / 675);
  position: absolute;
  left: calc((100cqw - 1200 * var(--u)) / 2 + var(--x) * var(--u));
  top: calc((100cqh - 675 * var(--u)) / 2 + var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  aspect-ratio: var(--a);
  background: var(--avg, transparent);
  cursor: pointer;
}
.item img { width: 100%; height: 100%; }
.page-home .item { cursor: url("ladybug.svg") 8 8, pointer; }
.bar {
  position: fixed; left: 0; bottom: 0; z-index: 30;
  height: 1px; width: 100%;
  background: var(--fg); opacity: 0.2;
  transform-origin: 0 50%; transform: scaleX(0);
}
.bar.run { animation: bar var(--dur, 3s) linear forwards; }
@keyframes bar { to { transform: scaleX(1); } }
.ss-nav {
  position: fixed; z-index: 35; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; gap: 34px;
}
.ss-nav button { font-size: 15px; line-height: 1; padding: 8px 6px; opacity: 0.4; transition: opacity 0.2s; }
.ss-nav button:hover { opacity: 1; }

/* ── solo date ── */
.solo { padding: 0 var(--edge) 0 var(--nav-w); }
.views {
  position: fixed; z-index: 40; top: 19px; right: var(--edge);
  display: flex; gap: 18px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: lowercase; line-height: 1;
}
.views a { opacity: 0.35; transition: opacity 0.2s; }
.views a:hover { opacity: 0.6; }
.views a[aria-current="page"] { opacity: 1; }

.spread {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 72px);
  align-items: center;
  min-height: 100svh;
  padding-block: 7svh;
}
.pg {
  --h: min(72svh, 80cqi);
  container-type: inline-size;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.frame, .arc-wrap { display: block; width: calc(var(--h) * min(1.25, var(--a))); }
.frame { aspect-ratio: var(--a); position: relative; }
.arc-wrap .frame { width: 100%; }
.frame img { width: 100%; height: 100%; }
.pg-photo .frame { background: var(--avg); cursor: zoom-in; }
.pg-arc .frame { cursor: zoom-in; }
.pg-arc img { mix-blend-mode: multiply; opacity: 0.62; transition: opacity 0.3s; }
.pg-arc .frame:hover img { opacity: 0.85; }
.label {
  width: 100%;
  margin-top: 14px;
  display: grid; gap: 4px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em; line-height: 1.4;
  color: var(--fg);
}
.label span:first-child { opacity: 0.62; }
.label span + span { opacity: 0.38; }
.pg-text { align-items: flex-start; }
.statement { max-width: 27em; }
.statement h1 {
  font-size: 14px; font-weight: 400; letter-spacing: 0.14em; text-transform: lowercase;
  margin-bottom: 2.6em;
}
.statement p {
  font-size: 12px; line-height: 2.1; color: var(--muted);
  margin-bottom: 1.15em; text-wrap: pretty;
}
.statement p:last-child { margin-top: 2em; color: var(--fg); }

.index {
  display: grid;
  padding: 120px 0 80px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
  align-items: center;
}
.cell { aspect-ratio: 1; display: grid; place-items: center; cursor: zoom-in; }
.cell img { width: auto; height: auto; max-width: 100%; max-height: 100%; background: var(--avg); }
.cell:hover img { opacity: 0.86; }

.foot {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 18svh 0 26px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.foot a { opacity: 0.7; } .foot a:hover { opacity: 1; }

@supports (animation-timeline: scroll()) {
  .scrollbar {
    position: fixed; left: 0; bottom: 0; z-index: 30; height: 1px; width: 100%;
    background: var(--fg); opacity: 0.2; transform-origin: 0 50%;
    animation: grow linear both; animation-timeline: scroll(root);
  }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@supports (animation-timeline: view()) {
  .spread .frame { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes rise { from { opacity: 0; } to { opacity: 1; } }
}

/* ── lightbox ── */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--fg);
  overflow: hidden;
}
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; place-items: center; animation: lbin 0.35s ease; }
@keyframes lbin { from { opacity: 0; } }
.lb-card {
  position: relative;
  width: var(--cw); height: var(--ch);
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.25, 0.7, 0.2, 1);
}
.lb.turned .lb-card { transform: rotateY(180deg); }
.lb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lb-front { background: var(--avg); }
.lb-face img { width: 100%; height: 100%; }
.lb-back { transform: rotateY(180deg); background: #fbfcfe; }
.lb-back img { mix-blend-mode: multiply; opacity: 0.8; }
.lb-back .label { position: absolute; top: 100%; left: 0; }
.lb-ui {
  display: contents;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg);
}
.lb-ui button, .lb-count { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.lb-ui button { opacity: 0.55; padding: 10px 4px; transition: opacity 0.2s; }
.lb-ui button:hover { opacity: 1; }
.lb-close { position: absolute; top: 10px; right: calc(var(--edge) - 4px); }
.lb-nav {
  position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: center; gap: 30px;
}
.lb-count { opacity: 0.35; font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: center; }
.lb-turn { position: absolute; left: calc(var(--edge) - 4px); bottom: max(14px, env(safe-area-inset-bottom)); }
.lb-turn[hidden] { display: none; }
.lb-ui .lb-side {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 20px; letter-spacing: 0; padding: 24px 16px; opacity: 0.35;
}
.lb-ui .lb-side:hover { opacity: 1; }
.lb-left { left: calc(var(--edge) - 16px); }
.lb-right { right: calc(var(--edge) - 16px); }

/* ── info ── */
.info {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 80px var(--edge) 80px var(--nav-w);
}
.info-in { max-width: 400px; display: grid; gap: 3.2rem; }
.bio p { font-size: 11.5px; line-height: 2.3; color: var(--muted); }
.contact { display: grid; gap: 0.7rem; }
.contact div { display: flex; gap: 1.5rem; align-items: baseline; }
.contact dt { width: 52px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); opacity: 0.6; }
.contact dd { margin: 0; font-size: 11.5px; }
.contact a:hover { opacity: 0.5; }
.contact dl { margin: 0; }

/* ── 404 ── */
.lost { min-height: 100svh; display: grid; place-items: center; font-size: 12px; letter-spacing: 0.14em; text-transform: lowercase; }
.lost a { opacity: 0.5; } .lost a:hover { opacity: 1; }

/* ── phones and narrow windows ── */
@media (max-width: 760px) {
  :root { --edge: var(--gut); }
  .nav {
    position: sticky; top: 0; z-index: 40;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
    gap: 8px 18px;
    padding: max(16px, env(safe-area-inset-top)) var(--gut) 14px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .nav a { font-size: 13px; letter-spacing: 0.12em; }
  .nav-name, .nav-links { position: static; }
  .nav-links { flex-direction: row; gap: 16px; }

  body.page-home, body.page-commissions { display: flex; flex-direction: column; height: 100svh; overflow: hidden; }
  .stage { position: relative; inset: auto; flex: 1; }
  .item {
    --u: min(100cqw / 360, 100cqh / 640);
    left: calc((100cqw - 360 * var(--u)) / 2 + var(--mx) * var(--u));
    top: calc((100cqh - 640 * var(--u)) / 2 + var(--my) * var(--u));
    width: calc(var(--mw) * var(--u));
  }

  .solo { padding: 0 var(--gut); }
  .views {
    top: auto; bottom: max(12px, env(safe-area-inset-bottom)); right: var(--gut);
    padding: 9px 12px; margin-right: -12px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .spread { display: block; min-height: 0; padding-block: 11svh 0; }
  .spread:first-child { padding-top: 5svh; }
  .pg-blank { display: none; }
  .pg + .pg { margin-top: 16px; }
  .pg-text { margin-bottom: 11svh; }
  .pg { --h: min(64svh, 80cqi); }
  .index { padding: 32px 0 80px; grid-template-columns: repeat(3, 1fr); gap: 22px 14px; }
  .foot { padding-bottom: 70px; }

  .info { place-items: start; padding: 18svh var(--gut) 60px; }

  .lb-close { right: 8px; }
  .lb-ui .lb-side { display: none; }
  .lb-turn { left: 12px; top: 10px; bottom: auto; }
  .lb-nav { gap: 16px; }
}

/* landscape phones: use the desktop slideshow canvas */
@media (max-width: 760px) and (orientation: landscape) {
  .item {
    --u: min(100cqw / 1200, 100cqh / 675);
    left: calc((100cqw - 1200 * var(--u)) / 2 + var(--x) * var(--u));
    top: calc((100cqh - 675 * var(--u)) / 2 + var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
  }
}

/* reduced motion: keep the fades (they don't move anything), drop the 3D flip and the scroll-linked fade */
@media (prefers-reduced-motion: reduce) {
  .lb-card, .lb.turned .lb-card { transition: none; transform: none; }
  .lb-face { transition: opacity 0.45s ease; }
  .lb-back { transform: none; opacity: 0; }
  .lb.turned .lb-back { opacity: 1; }
  .lb.turned .lb-front { opacity: 0; }
  .spread .frame { animation: none; }
}