/* ---------------------------------------------------------------
   Steve Jin, Photography — v0.2 "gallery"
   Design read: a classic art-gallery presentation. A warm white
   wall, one print per screen in a thick even white mount, and a
   small label beneath. No captions and no wall quote — the work is
   the argument, and every photograph hangs the same way, the
   opening piece included. Light is
   the default (a gallery is lit); dark is kept as an evening
   viewing room via the toggle.
   Type: Inter (everything primary) + Space Mono (small labels).
   Photos are shown WHOLE — never cropped — so the mount always
   frames the entire image.
   --------------------------------------------------------------- */

:root {
  --wall: #f4f2ee;
  --mat: #ffffff;
  --ink: #1a1a1a;
  --ink-muted: #6b6862;
  --edge: rgba(0, 0, 0, 0.07);
  --rule: rgba(0, 0, 0, 0.1);
  --accent: #2450d9;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 18px 50px rgba(0, 0, 0, 0.08);

  --font-display: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --nav-height: 64px;
  --content-max: 1180px;

  /* One print height for the whole page. Every photograph is set to
     this height and takes its width from its own aspect ratio, so a
     landscape in a pair comes out exactly as wide as a standalone
     landscape, and the portrait beside it matches that height. The
     last term keeps the widest pair (landscape + portrait, ratios
     summing to 2.167) inside the wall; the 600px cap prevents any
     upscaling, since 600px is the shortest source image. */
  --print-h: min(56vh, 600px, calc((100vw - 360px) / 2.167));

  color-scheme: light;
}

:root[data-theme="dark"] {
  --wall: #0d0d0f;
  --mat: #17171a;
  --ink: #f2f1ee;
  --ink-muted: #8c8b89;
  --edge: rgba(255, 255, 255, 0.09);
  --rule: rgba(255, 255, 255, 0.12);
  --accent: #7c9dff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 50px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 40px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------
   Header — kept deliberately quiet so the works carry the page.
   --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--wall) 84%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
}

/* Identity block: the name with the address directly beneath it.
   align-items keeps both at content width, so the email's hover rule
   hugs the text rather than spanning the column. */
.header-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.header-id .wordmark { line-height: 1.15; }

/* The address, quiet, at its natural casing — uppercase would shout a
   URL that reads fine as it is. */
.site-email {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-decoration: none;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease;
}

.site-email:hover,
.site-email:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.theme-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }

.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---------------------------------------------------------------
   Works — one print per screen, centred on the wall, in a thick
   even white mount, with a small label beneath.
   --------------------------------------------------------------- */

.work {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 40px 56px;
  border-bottom: 1px solid var(--rule);
}

/* The mount. Even padding all round, a hairline frame edge, and a
   soft shadow so the print reads as sitting off the wall rather
   than printed onto it. */
.work-plate {
  background: var(--mat);
  padding: clamp(22px, 4vw, 60px);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow);
  display: inline-block;
  max-width: 100%;
}

/* Whole image, never cropped. Height is fixed to the shared print
   height and the width follows the intrinsic ratio, so every print on
   the page is the same height and no two are scaled differently. */
.work-plate img {
  width: auto;
  height: var(--print-h);
  max-width: none;
}

/* The label. Place only — a true gallery placard. */
.work-placard {
  margin-top: 26px;
  text-align: center;
}

.placard-place {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* ---------------------------------------------------------------
   A wall hung with more than one print. The prints carry the shared
   print height and the shared mount size, so paired works line up on
   a common top edge with no per-row sizing. align-content centres the
   row in the wall; align-items pins the prints to one top edge so a
   two-line placard underneath cannot nudge a mount out of line.
   --------------------------------------------------------------- */

.work-row {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 44px);
  padding: 72px 40px 56px;
  border-bottom: 1px solid var(--rule);
}

.work-row .work {
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

.work-row .work-placard {
  /* width:0 + min-width:100% stops a long place name from widening the
     work past its mount, which would break the top-edge alignment. */
  width: 0;
  min-width: 100%;
  margin-top: 20px;
}

@media (max-width: 900px) {
  /* Rows stack on a narrow wall, so a print no longer has to share its
     height with a neighbour — relax the pair constraint and let the
     prints use more of the screen. */
  :root { --print-h: min(52vh, 600px); }

  .work-row {
    display: block;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
  }
  .work-row .work {
    min-height: 100vh;
    padding: 56px 20px 44px;
    border-bottom: 1px solid var(--rule);
  }
  .work-row .work-placard {
    width: auto;
    min-width: 0;
    margin-top: 26px;
  }
}

@media (max-width: 720px) {
  :root { --print-h: min(46vh, 600px); }
  .work { padding: 56px 20px 44px; }
  .work-plate { padding: 20px; }
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 24px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.footer-inner .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.footer-meta .sep { margin: 0 8px; }

/* Space Mono draws © as a small superscript mark — 496 units tall against
   a 728-unit digit, and floating 322 units above the baseline, which reads
   as superscript. Inter draws a full-size © resting on the baseline (1536
   units, 100.4% of a digit). So the symbol comes from the sans while the
   rest of the footer stays mono; at 11px it lands at 8.25px against the
   mono digits' 8.0px. */
.footer-meta .copy { font-family: var(--font-display); }

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .site-email { font-size: 10.5px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}