/* MO ATELIER SZETO — site styles */

html { background: #0A0A0A; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { margin: 0; font-family: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgba(255,255,255,0.92); }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; transition: color 320ms cubic-bezier(0.2,0.6,0.2,1); }
a:hover { color: #E55A11; }
::selection { background: #E55A11; color: #0A0A0A; }
.zh { font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", sans-serif; }

.page { background: #0A0A0A; overflow-x: clip; }
.w7 { font-weight: 700; }
.accent { color: #E55A11; }

/* ── Header ── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; align-items: baseline; padding: 28px; pointer-events: none; }

/* One wordmark for the whole site. It sits over the opening, above the
   circle, and travels up into the header as the photograph opens —
   main.js drives the Y. There is no second copy anywhere.

   align-items: baseline is load-bearing. The three words are separate
   flex items, and light and bold resolve to different fallback faces, so
   without it each word's box sets its own baseline and ATELIER sits off
   the line from MO and SZETO. One word, too — the weight change does the
   separating, so there is no gap. */
.brand { display: inline-flex; align-items: baseline; color: #E55A11; font-size: clamp(12px, 1.25vw, 16px); font-weight: 300; letter-spacing: 0.1em; opacity: 0; pointer-events: auto; will-change: transform; }

/* ── Hero ── */
.hero { position: relative; height: 230vh; }
.hero-frame { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden; background: #0A0A0A; }
.hero-window { position: absolute; inset: 0; clip-path: circle(24vmin at 50% 50%); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(0.5); transform-origin: center; filter: saturate(0); }
.hero-intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.hero-tag { position: absolute; top: calc(50% + 29vmin); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tag-line { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.tag-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #E55A11; }
.hero-cap { position: absolute; left: 28px; bottom: 28px; right: 28px; display: flex; justify-content: flex-end; align-items: flex-end; gap: 32px; opacity: 0; mix-blend-mode: difference; color: #fff; }
.cap-text { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.8; letter-spacing: 0.22em; text-transform: uppercase; text-align: right; }

/* ── About ── */
.about { background: #0A0A0A; color: rgba(255,255,255,0.92); padding: 440px 28px; }
.about-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 96px; align-items: start; }
.about-lead { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.55; letter-spacing: -0.01em; text-wrap: pretty; }
.about-body { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,0.72); }

/* ── Project index ──
   A twelve-column grid: each project occupies four columns on desktop,
   six on tablet, and the full grid on a phone. All gutters use --inset. */
.works { position: relative; }
.works-frame { --inset: 28px; padding: calc(var(--inset) * 3) var(--inset) var(--inset); }
.project-heading, .project-meta, .viewer-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.6; }
.project-heading h3, .viewer-heading h2 { font: inherit; margin: 0; }
.project-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: calc(var(--inset) * 2) var(--inset); }
.project-card { grid-column: span 4; min-width: 0; }
.project-cover { width: 100%; aspect-ratio: 8 / 5; position: relative; display: block; padding: 0; border: 0; border-radius: 0; background: #0A0A0A; overflow: hidden; }
.project-cover img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 400ms ease; }
.project-cover:hover img, .project-cover:focus-visible img { filter: grayscale(0); }
.project-heading { margin-top: var(--inset); min-height: 36px; }
.project-meta { margin-top: 8px; color: #E55A11; }
.project-cover:focus-visible, .project-viewer button:focus-visible { outline: 1px solid #E55A11; outline-offset: 5px; }
.project-cover { cursor: pointer; }

/* ── One-up viewer ──
   One inset around the frame, between image and caption, and between columns.
   The image gets all remaining height; navigation sits in the side margins. */
.project-viewer { --inset: 28px; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; padding: 0; margin: 0; border: 0; background: #0A0A0A; color: rgba(255,255,255,0.92); overflow: auto; cursor: auto; }
.project-viewer::backdrop { background: #0A0A0A; }
.project-viewer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: rgba(255,255,255,0.48); background: transparent; border: 0; border-radius: 0; cursor: pointer; transition: color 180ms ease; }
.project-viewer button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.project-viewer button:hover, .project-viewer button:focus-visible { color: #E55A11; }
.project-viewer button:disabled { visibility: hidden; pointer-events: none; }
.viewer-layout { position: relative; height: 100%; min-height: 440px; padding: var(--inset); display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--photo-height, minmax(0,1fr)) auto; align-content: center; gap: var(--inset); }
.viewer-close { position: absolute; top: var(--inset); right: var(--inset); z-index: 2; }
.viewer-stage { min-width: 0; min-height: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: var(--inset); align-items: center; }
.viewer-photo { height: 100%; min-height: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pinch-zoom; scrollbar-width: none; }
.viewer-track { position: relative; display: flex; gap: var(--inset); width: max-content; height: 100%; }
.viewer-image { display: block; flex: none; width: auto; height: 100%; max-width: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer-footer { margin-inline: calc(44px + var(--inset)); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--inset); align-items: start; }
.viewer-heading { min-width: 0; }
.viewer-location { display: block; margin-top: 8px; color: #E55A11; }
.viewer-description { margin: 0; max-width: 104ch; font-size: 12.5px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,0.72); }
.viewer-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.viewer-open { overflow: hidden; }
html.viewer-open .cursor { visibility: hidden; }
@media (min-width: 601px) and (max-width: 1024px) {
  .project-card { grid-column: span 6; }
}
@media (max-width: 600px) {
  .project-card { grid-column: span 12; }
  .project-heading { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .project-cover img { transition: none; }
}

/* ── Spacer ── */
.spacer { height: 55vh; background: #0A0A0A; }

/* ── Close ── */
.close { position: relative; height: 200vh; }
.close-frame { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #0A0A0A; }
.close-window { position: absolute; inset: 0; clip-path: circle(150% at 50% 50%); }
.close-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: center; filter: saturate(0); }
.close-mark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
.close-tag { position: absolute; top: calc(50% + 29vmin); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.close-byline { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.48); }
.close-cap { position: absolute; left: 28px; bottom: 28px; right: 28px; display: flex; justify-content: flex-end; gap: 32px; mix-blend-mode: difference; color: #fff; }

/* ── Cursor ── */
@media (pointer: fine) {
  html, body, a, button { cursor: none; }
  .cursor { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 300ms ease; will-change: transform; }
  .cursor.on { opacity: 1; }
  /* Solid over the page, hairline outline over a photograph — so the mark
     never sits as a blob on the work. */
  .cursor span { display: block; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1px solid #E55A11; background: #E55A11; transition: background-color 280ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1); }
  .cursor.hollow span { background: rgba(229, 90, 17, 0); }
  .cursor.fill span { transform: scale(0.7); }
  .cursor.down span { background: #E55A11; transform: scale(0.4); }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .site-header { padding: 22px; }

  .hero-frame { min-height: 0; }
  .brand-lg { top: calc(50% - 38vmin); }
  .hero-tag { top: calc(50% + 32vmin); padding: 0 22px; }
  .hero-cap { left: 22px; right: 22px; bottom: 22px; }

  .about { padding: 180px 22px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }

  .works-frame, .project-viewer { --inset: 22px; }
  .viewer-layout { padding-top: calc(var(--inset) + 44px + var(--inset)); min-height: 560px; }
  .viewer-stage { grid-template-columns: minmax(0,1fr); gap: 0; position: relative; }
  .viewer-photo { grid-column: 1; grid-row: 1; }
  .viewer-prev, .viewer-next { position: absolute; z-index: 1; top: calc(50% - 22px); }
  .viewer-prev { left: calc(-1 * var(--inset)); }
  .viewer-next { right: calc(-1 * var(--inset)); }
  .project-viewer .viewer-prev, .project-viewer .viewer-next { color: rgba(255,255,255,0.92); mix-blend-mode: difference; }
  .viewer-footer { margin-inline: 0; grid-template-columns: minmax(0,1fr); gap: var(--inset); }

  .close-cap { left: 22px; right: 22px; bottom: 22px; }
}