/* DOPI Design: layout, colours and type follow yao's Figma prototype.
   White page, Poppins throughout, warm earth-tone accents, photos carry the colour.
   Desktop measurements are taken from the 1440px-wide Figma frames. */
:root {
  /* text */
  --ink: #ffffff;          /* titles, active nav (black site, per yao) */
  --text: #e6e6e6;         /* body copy */
  --text-2: #f2f2f2;       /* footer headline */
  --muted: #9b9b9b;        /* locations, labels */
  /* earth-tone palette ("Cozy earth tones" frame) */
  --olive: #4b5136;
  --sage: #8a8f73;
  --walnut: #6b4426;
  --cream: #e8dcc5;
  --taupe: #cbb9a3;
  --accent: #b7886a;       /* header nav text, project title hover (per yao, Nov 2026) */
  --stone: #746e62;        /* progress bar, small print */
  /* surfaces */
  --page: #000000;
  --footer: #111111;
  --line: #2c2c2c;
  --track: #333333;

  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* left edge of the title column: 189px on a 1440px frame, centred on wider screens */
  --gutter: max(13.125vw, calc(50vw - 531px));
  --title-w: 208px;
  --gap: 20px;
  --header-h: 48px;   /* Figma 80px, 40% shorter per yao */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
:focus-visible { outline: 1px solid var(--taupe); outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type roles (Poppins specimen) */
.label { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--muted); }
.desc { font-size: 14px; line-height: 22px; color: var(--muted); }

.sample-banner {
  position: relative; z-index: 60;
  margin-top: var(--header-h);
  background: var(--footer);
  color: var(--stone);
  font-size: 12px; line-height: 18px;
  text-align: center;
  padding: 6px 16px;
}
.sample-banner + .site-header + main { padding-top: 0; }

/* ---------- intro screen (prototype start frame) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  display: grid; place-items: center;
}
.intro.has-bg { background: transparent; }
/* 1. first project's cover fills the screen */
.intro-bg {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  object-fit: cover; max-width: none;
  transition: left 2s cubic-bezier(.65,0,.25,1), top 2s cubic-bezier(.65,0,.25,1),
              width 2s cubic-bezier(.65,0,.25,1), height 2s cubic-bezier(.65,0,.25,1);
}
/* 2. big logo in the middle glides into the header */
.intro-logo {
  position: relative; z-index: 1;
  width: min(940px, 92vw); height: auto;   /* 627px + 50%, per yao */
  transform-origin: 0 0; will-change: transform;
  transition: transform 2s cubic-bezier(.65,0,.25,1);
  opacity: 0;
}
/* The O of DOPI switches on like a lamp: a burst of quick uneven flickers, then steady, with a
   warm glow around it. The other letters stay dim and flicker along with its light; the ones next
   to the O are brighter, the far ones darker. Once steady, site.js slowly brings every letter up
   to pure white and fades the glow, then the logo glides to the header. */
.intro-logo { display: block; overflow: visible; opacity: 1; grid-area: 1 / 1; }
.intro-logo .logo-o, .intro-logo .logo-rest { opacity: 0; }
.intro.lit .logo-o { animation: o-flicker 1.2s linear forwards; }
.intro.lit .logo-rest { animation: rest-flicker 1.2s linear forwards; }
/* The logo artboard has uneven padding (wordmark sits ~1px left and ~3.7px high in the 170x105
   box), so nudge the big logo until the letters themselves are centred on screen. Grid centring
   moves the box by half the margin, hence the doubled values. */
.intro-logo { margin-left: calc(min(940px, 92vw) * 0.0118); margin-top: calc(min(940px, 92vw) * 0.0435); }
@keyframes o-flicker {   /* the lamp: quick hard on/off flickers, steady after ~0.63s (only the fast part, per yao) */
  0% { opacity: 0; }
  0.02% { opacity: 1; }
  7.5% { opacity: 1; }
  7.52% { opacity: 0; }
  15.0% { opacity: 0; }
  15.03% { opacity: 0.8; }
  22.5% { opacity: 0.8; }
  22.53% { opacity: 0; }
  27.5% { opacity: 0; }
  27.53% { opacity: 1; }
  32.5% { opacity: 1; }
  32.53% { opacity: 0; }
  37.5% { opacity: 0; }
  37.53% { opacity: 0.9; }
  42.5% { opacity: 0.9; }
  42.53% { opacity: 0; }
  46.25% { opacity: 0; }
  46.28% { opacity: 1; }
  50.0% { opacity: 1; }
  50.03% { opacity: 0; }
  52.5% { opacity: 0; }
  52.53% { opacity: 1; }
  100.0% { opacity: 1; }
}
@keyframes rest-flicker {   /* the other letters: same rhythm; each is dimmed by its own opacity (GLOW_FALLOFF in build.js) */
  0% { opacity: 0; }
  0.02% { opacity: 1.0; }
  7.5% { opacity: 1.0; }
  7.52% { opacity: 0.0; }
  15.0% { opacity: 0.0; }
  15.03% { opacity: 0.8; }
  22.5% { opacity: 0.8; }
  22.53% { opacity: 0.0; }
  27.5% { opacity: 0.0; }
  27.53% { opacity: 1.0; }
  32.5% { opacity: 1.0; }
  32.53% { opacity: 0.0; }
  37.5% { opacity: 0.0; }
  37.53% { opacity: 0.9; }
  42.5% { opacity: 0.9; }
  42.53% { opacity: 0.0; }
  46.25% { opacity: 0.0; }
  46.28% { opacity: 1.0; }
  50.0% { opacity: 1.0; }
  50.03% { opacity: 0.0; }
  52.5% { opacity: 0.0; }
  52.53% { opacity: 1.0; }
  100.0% { opacity: 1.0; }
}


/* 3. project titles fade in after the picture has settled into the first row */
.project-row .title-block { transition: opacity 1.2s ease; }
.intro-playing .project-row .title-block { opacity: 0; }
.no-intro .intro { display: none; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  overflow: visible;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 85px 0 33px;
  background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.6));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
.logo { display: flex; align-items: center; height: var(--header-h); }
.logo img { width: 170px; height: auto; transform: translateY(4px); pointer-events: none; }   /* artboard has built-in padding; centres the wordmark */
.site-nav {
  display: flex; gap: 64px; align-items: center;
  font-size: 14px; line-height: 21px; text-transform: uppercase;
}
.site-header .site-nav { margin-top: 0; }
.site-nav a { color: var(--accent); transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
/* PROJECTS dropdown: project types */
.nav-drop { position: relative; }
.nav-drop-btn {
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-current="page"], .nav-drop.open .nav-drop-btn { color: var(--ink); }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: -20px; min-width: 210px;
  display: flex; flex-direction: column; padding: 10px 0;
  background: rgba(60,60,60,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);   /* 70% transparent, light blur (per yao) */
  border-radius: 8px;   /* no outline, rounded corners (per yao) */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
/* PROJECTS is plain text (no chevron); the menu opens on hover with a mouse, on tap otherwise.
   The invisible strip above the menu bridges the gap so the pointer can travel down to it. */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-drop.open .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.nav-menu a { padding: 8px 20px; white-space: nowrap; }
.nav-menu a[aria-current="true"] { color: var(--ink); }
.site-footer .nav-drop { display: none; }
.project-row[hidden] { display: none; }
/* A chosen project type shows a grid of smaller thumbnails, name under each picture (per yao) */
.project-list.grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 24px;
  max-width: 1280px; margin: 0 auto; padding: 104px 40px 200px;
}
.type-head { grid-column: 1 / -1; font-size: 24px; line-height: 36px; font-weight: 400; color: var(--ink); margin: 0 0 -24px; }
.project-list.grid .project-row { display: flex; flex-direction: column; gap: 14px; }
.project-list.grid .project-row .title-block { order: 2; text-align: left; justify-self: start; max-width: none; margin-top: 0; gap: 2px; }
.project-list.grid .t-title { font-size: 18px; line-height: 27px; }
.project-list.grid .t-sub { font-size: 13px; line-height: 20px; }
main { padding-top: var(--header-h); }

/* ---------- shared title block ---------- */
.title-block { display: flex; flex-direction: column; gap: 8px; }
.t-title { font-size: 24px; line-height: 36px; color: var(--ink); }
.t-sub { font-size: 16px; line-height: 24px; color: var(--muted); text-transform: uppercase; }

/* ---------- home: project list ---------- */
.project-list {
  display: flex; flex-direction: column; gap: 160px;   /* space between project images (tried 120px, yao preferred 160px) */
  padding: 104px 40px 200px;   /* first row sits 184px from the top */
}
.project-row {
  display: grid;
  /* 856 x 529 cards centred on the page, title to their left (per yao) */
  grid-template-columns: minmax(var(--title-w), 1fr) minmax(0, 856px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.project-row .title-block { text-align: right; justify-self: end; max-width: var(--title-w); margin-top: -8px; }  /* cap height of the title lines up with the image top */
.row-img { aspect-ratio: 856 / 529; overflow: hidden; background: var(--footer); }
.row-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.row-img:hover img { transform: scale(1.12); }   /* clear "this is clickable" zoom, per yao */
.project-row:hover .t-title { color: var(--accent); }

/* ---------- project, about, contact pages ---------- */
.page-head {
  width: min(1000px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 0;
  text-align: center;
  display: flex; flex-direction: column; gap: 8px;
}
.t-page { font-size: 32px; line-height: 48px; color: var(--ink); }
.body-text { text-align: left; color: var(--text); display: grid; gap: 14px; margin-top: 0; }
.photo-stack {
  width: min(1300px, calc(100% - 32px));
  margin: 72px auto 200px;
  display: flex; flex-direction: column; gap: 12px;
}
.photo-stack img { width: 100%; height: auto; background: var(--footer); } /* natural proportions, so portrait shots are not cropped */

/* project facts (location, year, architect, status, press) under the description */
.facts { display: grid; gap: 6px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); text-align: left; font-size: 14px; line-height: 22px; }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--text); }
.facts a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stone); }
.facts a:hover { text-decoration-color: var(--ink); }
.viewer-text .facts { margin-top: 8px; font-size: 13px; line-height: 20px; }
.viewer-text .facts div { grid-template-columns: 80px 1fr; }

/* about: big lead line, then label | statement + text blocks divided by thin rules */
.about-head { gap: 24px; }
.about-head .t-sub { font-size: 14px; letter-spacing: .12em; }
.about-lead { font-size: 40px; line-height: 1.3; color: var(--ink); font-weight: 300; }
.about-head .body-text { max-width: 720px; margin: 0 auto; text-align: center; }
.about { width: min(1000px, calc(100% - 32px)); margin: 120px auto 200px; }
.about-block {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px;
  padding: 56px 0; border-top: 1px solid var(--line);
}
.about-label { font-size: 13px; line-height: 32px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.about-title { font-size: 24px; line-height: 32px; color: var(--ink); margin-bottom: 20px; }
.about-items { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
.about-items h3 { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.about-items p { color: var(--muted); font-size: 14px; line-height: 22px; }
.about-num { display: block; font-size: 13px; color: var(--stone); margin-bottom: 6px; letter-spacing: .08em; }
.about-cta { margin-top: 28px; }

/* ---------- contact ---------- */
.contact-layout {
  width: min(1000px, calc(100% - 32px));
  margin: 72px auto 200px;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 80px;
  align-items: start;
}
.inquiry { display: grid; gap: 28px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--muted); padding: 0; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink);
  width: 100%;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 0;
  border-radius: 0;
}
.field textarea { resize: vertical; border: 1px solid var(--line); padding: 10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--taupe); }
.field [aria-invalid="true"] { border-color: var(--walnut); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; }
.field .chip-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.chip-check span {
  display: inline-block; cursor: pointer;
  font-size: 14px; line-height: 22px;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 100px; color: var(--text);
  transition: background .2s, border-color .2s, color .2s;
}
.chip-check input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--page); }
.chip-check input:focus-visible + span { outline: 1px solid var(--taupe); outline-offset: 2px; }
.btn {
  justify-self: start;
  font: 400 14px/21px var(--font); text-transform: uppercase; letter-spacing: .04em;
  background: var(--ink); color: var(--page); border: 1px solid var(--ink);
  padding: 14px 36px; cursor: pointer; transition: background .2s, color .2s;
}
.btn:hover { background: var(--page); color: var(--ink); }
.form-status { font-size: 14px; line-height: 22px; min-height: 22px; color: var(--muted); }
.form-status.ok { color: var(--olive); }
.form-status.err { color: var(--walnut); }
.contact-side { display: grid; gap: 28px; }
.contact-side a:hover { color: var(--taupe); }
.text-link { font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
/* warm glow rising from the bottom (ref: 108 Supply via yao): black -> deep brown -> rust ->
   light warm beige at the very bottom, with a fine film-grain noise on top */
.site-footer {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #000 0%, #0d0b0a 14%, #2a1a12 30%, #5e3520 46%, #94562f 62%, #aa7552 76%, #bb9478 90%, #c4a58e 100%);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: overlay;
}
.site-footer .label, .site-footer .desc { color: rgba(255,255,255,.72); }
.site-footer .divider { background: rgba(255,255,255,.22); }
.footer-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 220px 120px 56px;
  display: flex; flex-direction: column; gap: 48px;
}
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-logo img { width: 209px; height: auto; margin: -45px 0 0 -14px; } /* artboard has built-in padding */
.footer-top .site-nav { margin-top: 0; }
.divider { border: 0; height: 1px; background: var(--line); margin: 0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 32px; }
.footer-contact, .footer-legal { width: 360px; display: flex; flex-direction: column; gap: 12px; }
.footer-legal { align-items: flex-end; text-align: right; }
.footer-cta { font-size: 16px; line-height: 28px; color: var(--text-2); }
.footer-cta a:hover, .footer-contact .desc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .site-header { padding-right: 32px; }
  .site-nav { gap: 40px; }
  .footer-inner { padding: 200px 40px 48px; }
}
@media (max-width: 860px) {
  :root { --gutter: 16px; --header-h: 40px; }
  .site-header { padding: 0 16px 0 4px; }
  .logo img { width: 130px; transform: translateY(3px); }
  .site-header .site-nav { margin-top: 0; }
  .site-nav { gap: 20px; font-size: 13px; }
  .nav-menu { left: auto; right: -60px; min-width: 190px; }
  .project-list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 12px; padding: 40px 16px 120px; }
  .type-head { font-size: 20px; line-height: 30px; margin-bottom: -8px; }


  .project-list { padding: 40px 16px 120px; gap: 72px; }
  .project-row { grid-template-columns: 1fr; gap: 12px; }
  .project-row .title-block { text-align: left; order: 2; gap: 2px; justify-self: start; max-width: none; margin-top: 0; }
  .t-title { font-size: 20px; line-height: 30px; }
  .t-sub { font-size: 13px; line-height: 20px; }

  .t-page { font-size: 26px; line-height: 38px; }
  .photo-stack { margin: 40px auto 120px; gap: 8px; }
  .about-lead { font-size: 28px; }
  .about { margin: 72px auto 120px; }
  .about-block { grid-template-columns: 1fr; gap: 8px; padding: 40px 0; }
  .about-items { grid-template-columns: 1fr; gap: 24px; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; margin: 48px auto 120px; }
  .field-row { grid-template-columns: 1fr; }

  .footer-inner { padding: 160px 16px 40px; gap: 32px; }
  .footer-top { flex-direction: column; gap: 24px; }
  .footer-logo img { width: 170px; margin: -36px 0 -36px -12px; }
  .footer-bottom { flex-direction: column; }
  .footer-contact, .footer-legal { width: auto; }
  .footer-legal { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- full-screen project viewer (opens from a home-page row) ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--page);
  display: grid; grid-template-rows: auto 1fr;
  padding-bottom: 40px;
  opacity: 0; transition: opacity .35s ease;
}
.viewer.open { opacity: 1; }
.viewer-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 40px 16px 40px;   /* title sits at the left edge, same inset as the close button */
}
.viewer-head { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.viewer-head .t-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.viewer-count { font-size: 14px; line-height: 20px; color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
/* icon-only controls (no ring, per yao); SVG icons so all three share one optical centre with the count */
.viewer-btn {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink); cursor: pointer;
  opacity: .8; transition: opacity .2s;
}
.viewer-btn svg { display: block; }
.viewer-btn:hover { opacity: 1; }
.viewer-btn:disabled { opacity: .3; cursor: default; }
.viewer-close { margin-left: 4px; }
.viewer-track {
  display: flex; gap: 12px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 40px 0 var(--gutter);
  scroll-padding-left: var(--gutter);
  min-height: 0;
}
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track:focus { outline: none; }
.viewer-slide { flex: none; height: 100%; scroll-snap-align: start; }
.viewer-slide img { height: 100%; width: auto; max-width: none; display: block; background: var(--footer); }
.viewer-text {
  flex: none; width: 440px; height: 100%; overflow-y: auto;   /* wider since the full descriptions + facts went in (Nov 2026) */
  padding: 0 28px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px; color: var(--text);
}
.viewer-text p:first-child { color: var(--ink); }
/* long descriptions scroll inside the panel (text stays top-aligned with the images); only the
   scrollbar is restyled: slim, quiet, and its track 80% of the panel height, centred (per yao) */
.viewer-text::-webkit-scrollbar { width: 5px; }
.viewer-text::-webkit-scrollbar-track { background: transparent; margin: calc((100vh - 120px) * .1) 0; }
.viewer-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 5px; }
.viewer-text::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.5); }
@supports not selector(::-webkit-scrollbar) {
  .viewer-text { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
}
.viewer-text .text-link { margin-top: 8px; align-self: start; }
.viewer-fly-text { position: fixed; z-index: 91; margin: 0; pointer-events: none; transform-origin: 0 0; will-change: transform; transition: transform .8s cubic-bezier(.45,0,.2,1); }
.viewer-fly { position: fixed; z-index: 90; object-fit: cover; pointer-events: none; transition: all .8s cubic-bezier(.45,0,.2,1); }
body.viewer-lock { overflow: hidden; }
@media (max-width: 860px) {
  .viewer-bar { padding: 12px 12px 12px 16px; }
  .viewer-head { flex-direction: column; gap: 0; }
  .viewer-count, #viewer-prev, #viewer-next { display: none; }
  .viewer-track { padding: 0 16px; scroll-padding-left: 16px; align-items: center; }
  .viewer-slide { height: auto; max-height: 100%; }
  .viewer-slide img { height: auto; width: 88vw; max-height: 70vh; object-fit: cover; }
  .viewer-text { width: 80vw; height: auto; max-height: 100%; padding: 0 8px; }
}
@media (max-width: 520px) {
  .project-list.grid { grid-template-columns: 1fr; }
}