/* ==========================================================================
   PVZ Studio — core stylesheet (black / white editorial system)
   Extremely minimal, editorial architecture portfolio.
   No gradients, no rounded cards, no shadows, no decorative graphics.
   ========================================================================== */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --fg-soft: #9a9a9a;
  --fg-faint: #6b6b6b;
  --line: rgba(255, 255, 255, 0.16);
  --placeholder: #141414;

  --font: "Helvetica Neue", "Helvetica", "Arial", -apple-system,
    BlinkMacSystemFont, sans-serif;

  --gutter: 6vw;
  --rhythm: 11rem;
  --rhythm-sm: 6rem;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 720px) {
  :root {
    --gutter: 6vw;
    --rhythm: 5rem;
    --rhythm-sm: 3.25rem;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------- */
/* Type scale                                                             */
/* ---------------------------------------------------------------------- */

.meta {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.meta-lg {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg-soft);
}

.title-sm {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fg);
}

.title-md {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}

@media (max-width: 720px) {
  .title-md {
    font-size: 19px;
  }
}

.body-copy {
  font-size: 15px;
  color: var(--fg);
  max-width: 62ch;
}

.body-copy + .body-copy {
  margin-top: 1.4em;
}

.placeholder-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/*                                                                         */
/* Ink colours are custom properties, so one set of rules serves every    */
/* page. Per-page flags on the header element:                            */
/*   home-header / nav-dark   black ink while over a bright hero          */
/*   m-toggle-light / -dark   flip only the phone Menu toggle              */
/* Every ink reverts to the standard white-on-black bar once scrolled or  */
/* while the mobile menu is open. The hero image itself is never touched. */
/* ---------------------------------------------------------------------- */

.site-header {
  --brand-ink: var(--fg);
  --brand-sub-ink: var(--fg-soft);
  --nav-ink: var(--fg-soft);
  --nav-ink-on: var(--fg);
  --toggle-ink: var(--fg);

  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem var(--gutter);
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms var(--ease-ui);
}

.site-header.is-transparent,
.site-header.home-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}

.site-header.is-transparent.is-scrolled,
.site-header.home-header.is-scrolled,
.site-header.is-transparent.is-menu-open,
.site-header.home-header.is-menu-open {
  background-color: var(--bg);
}

/* Over a hero: white ink by default. */
.site-header.is-transparent:not(.is-scrolled):not(.is-menu-open) {
  --brand-ink: #fff;
  --brand-sub-ink: rgba(255, 255, 255, 0.72);
  --nav-ink: rgba(255, 255, 255, 0.72);
  --nav-ink-on: #fff;
  --toggle-ink: #fff;
}

/* Over a bright hero: black ink. */
.site-header.is-transparent.nav-dark:not(.is-scrolled):not(.is-menu-open),
.site-header.home-header:not(.is-scrolled):not(.is-menu-open) {
  --brand-ink: #000;
  --brand-sub-ink: rgba(0, 0, 0, 0.6);
  --nav-ink: rgba(0, 0, 0, 0.72);
  --nav-ink-on: #000;
  --toggle-ink: #000;
}

/* Phones: the Menu toggle can sit over a different part of the hero than
   the brand, so it can be flipped on its own. */
@media (max-width: 720px) {
  .site-header.is-transparent.m-toggle-dark:not(.is-scrolled):not(.is-menu-open) {
    --toggle-ink: #000;
  }
  .site-header.is-transparent.nav-dark.m-toggle-light:not(.is-scrolled):not(.is-menu-open) {
    --toggle-ink: #fff;
  }
}

.brand {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.brand-mark {
  font-weight: 700;
  color: var(--brand-ink);
  transition: color 300ms var(--ease-ui);
}

.brand-full {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  vertical-align: bottom;
  font-weight: 400;
  color: var(--brand-sub-ink);
  transition: max-width 320ms var(--ease), opacity 280ms var(--ease),
    color 300ms var(--ease-ui);
}

.brand:hover .brand-full,
.brand:focus-visible .brand-full {
  max-width: 240px;
  opacity: 1;
}

.brand-full::before {
  content: "\00a0—\00a0";
}

.site-nav {
  display: flex;
  gap: 2.1rem;
}

.site-nav a {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--nav-ink);
  transition: color 300ms var(--ease-ui);
  padding: 0.25rem 0;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--nav-ink-on);
}

.nav-toggle {
  display: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--toggle-ink);
  transition: color 300ms var(--ease-ui);
}

@media (max-width: 720px) {
  .site-header {
    padding: 1.35rem var(--gutter);
  }
  .site-nav {
    position: fixed;
    inset: 0;
    top: var(--header-h, 60px);
    background: var(--bg);
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--gutter);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  }
  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .site-nav a,
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    font-size: 20px;
    color: var(--fg);
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle {
    display: block;
  }
}

/* ---------------------------------------------------------------------- */
/* Image arrival (opacity only, after decode)                             */
/* ---------------------------------------------------------------------- */

/* Photographs simply arrive: opacity only, once, after the image has decoded
   (see whenDecoded in main.js). Hidden only where scripts can run, so the
   page is never blank without JavaScript. No movement, scale or blur. */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transition: opacity 600ms var(--ease-ui);
  }

  .reveal.is-visible {
    opacity: 1;
  }

  .home-hero img,
  .detail-hero img {
    opacity: 0;
    transition: opacity 600ms var(--ease-ui);
  }

  .home-hero img.is-ready,
  .detail-hero img.is-ready {
    opacity: 1;
  }

  /* On a detail page the title belongs to the photograph: same fade, same
     moment, so the two resolve together as one composition. */
  .detail-hero-identity {
    opacity: 0;
    transition: opacity 600ms var(--ease-ui);
  }

  .detail-hero.is-ready .detail-hero-identity {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------- */
/* Media block                                                            */
/* ---------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
  width: 100%;
}

.media picture,
.drawing-viewer-frame picture {
  display: contents;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-ui), opacity 400ms var(--ease-ui);
}

/* Pointer devices only: a barely perceptible settle toward the viewer. The
   image itself is never faded; the darkening lives in the grid overlay. */
@media (any-hover: hover) {
  a.media-link:hover .media img {
    transform: scale(1.015);
  }
}

/* ---------------------------------------------------------------------- */
/* Homepage — Section 01: static full-width hero                          */
/* ---------------------------------------------------------------------- */

.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.home-hero picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  color: #000;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: 0.005em;
}

@media (max-width: 720px) {
  .home-hero {
    height: 100svh;
  }
}

/* ---------------------------------------------------------------------- */
/* Homepage — Section 02: studio introduction                             */
/* ---------------------------------------------------------------------- */

.intro-section {
  padding: var(--rhythm-sm) var(--gutter);
  display: flex;
  justify-content: center;
}

.intro-inner {
  max-width: 1040px;
  width: 100%;
}

.intro-statement {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--fg);
  margin: 0 0 1.5rem;
}

@media (max-width: 720px) {
  .intro-statement {
    font-size: 21px;
  }
}

.intro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.intro-columns .body-copy + .body-copy {
  margin-top: 0;
}

@media (max-width: 720px) {
  .intro-columns {
    grid-template-columns: 1fr;
    gap: 1.4em;
  }
}

.intro-inner .body-copy {
  color: var(--fg-soft);
}

.intro-link {
  display: inline-block;
  margin-top: 2rem;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 240ms var(--ease);
}

.intro-link:hover {
  border-color: var(--fg);
}

/* ---------------------------------------------------------------------- */
/* Homepage — Section 03 / 04: preview grids                              */
/* ---------------------------------------------------------------------- */

.preview-section {
  padding: 0 var(--gutter) var(--rhythm);
}

/* ---------------------------------------------------------------------- */
/* Shared page header — PVZ / Pablo Vázquez Studio / PAGE TITLE            */
/* Used identically across Projects, Store, About and Contact.            */
/* ---------------------------------------------------------------------- */

.page-header {
  text-align: center;
  padding: 3.5rem var(--gutter) 0;
}

.page-header-mark {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);
  margin: 0 0 0.5rem;
}

.page-header-studio {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-soft);
  margin: 0 0 2.5rem;
}

.page-header-title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

@media (max-width: 720px) {
  .page-header {
    padding-top: 2.5rem;
  }
}

.preview-title {
  text-align: center;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 3.25rem;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3.5vw;
  row-gap: 4.5rem;
  max-width: 1180px;
  margin: 0 auto;
}

/* Projects listing page: tighter, more editorial gaps matching the
   spacing used inside individual project galleries. Scoped to this
   page only — the homepage preview grids keep their original gaps. */
.projects-filter-grid {
  column-gap: 1.25rem;
  row-gap: 1.75rem;
}

@media (max-width: 720px) {
  .projects-filter-grid {
    row-gap: 1.5rem;
  }
}

/* A filter that leaves exactly one project centres it in the grid area at
   precisely the normal tile width (same maths as the 3 / 2 / 1 column grid).
   Two or more results keep the ordinary grid. */
.projects-filter-grid.is-single {
  grid-template-columns: minmax(0, calc((100% - 2.5rem) / 3));
  justify-content: center;
}

@media (max-width: 900px) {
  .projects-filter-grid.is-single {
    grid-template-columns: minmax(0, calc((100% - 1.25rem) / 2));
  }
}

@media (max-width: 560px) {
  .projects-filter-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Homepage grids (Projects and Products previews): tight, even contact-sheet
   gutters, matching the Projects page. Detail galleries are not affected. */
.preview-grid:not(.projects-filter-grid):not(.store-grid) {
  column-gap: 1.25rem;
  row-gap: 1.25rem;
}

@media (max-width: 720px) {
  .preview-grid:not(.projects-filter-grid):not(.store-grid) {
    row-gap: 1.5rem;
  }
}

.preview-grid .grid-item {
  position: relative;
  display: block;
  transition: opacity 220ms var(--ease);
}

/* ---------------------------------------------------------------------- */
/* Projects page — category filters                                       */
/* ---------------------------------------------------------------------- */

.filter-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 240ms var(--ease), border-color 240ms var(--ease);
}

.filter-btn:hover,
.filter-btn:focus-visible {
  color: var(--fg-soft);
}

.filter-btn.is-active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

@media (max-width: 560px) {
  .filter-row {
    gap: 1.4rem;
  }
}

.preview-grid .media {
  aspect-ratio: 4 / 5;
}

/* Project and product grids are image-only. A name is secondary
   information and lives in the hover state alone: the image darkens a
   little, then the name appears centred over it. Identical on the
   homepage, Projects and Products. There are no captions below images and
   touch devices never show names; a tap opens the project, and the name
   is carried by each link's aria-label. */
.preview-grid .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 200ms var(--ease-ui);
  pointer-events: none;
}

.preview-grid .grid-item .caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  text-align: center;
  opacity: 0;
  transition: opacity 200ms var(--ease-ui);
  pointer-events: none;
}

/* Keyboard focus shows the name on any device. */
.preview-grid .grid-item:focus-visible .media::after,
.preview-grid .grid-item:focus-visible .caption {
  opacity: 1;
}

/* Hover-capable devices: darken first, then the name arrives a beat later.
   Leaving is quicker than arriving (the base transitions above). Gated on
   any-hover so a touch-capable laptop with a mouse still gets it; phones,
   which cannot hover, keep the touch path below. */
@media (any-hover: hover) {
  .preview-grid .grid-item:hover .media::after {
    opacity: 1;
    transition-duration: 320ms;
  }

  .preview-grid .grid-item:hover .caption {
    opacity: 1;
    transition: opacity 280ms var(--ease-ui) 90ms;
  }
}

/* Touch: no names, only a faint press response so the tap is acknowledged. */
@media (hover: none) {
  .preview-grid .grid-item {
    -webkit-tap-highlight-color: transparent;
  }

  .preview-grid .grid-item:active .media::after {
    opacity: 0.45;
    transition-duration: 80ms;
  }
}

@media (max-width: 900px) {
  .preview-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }
}

.view-all-link {
  display: inline-block;
  margin-top: 2.75rem;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 240ms var(--ease);
}

.view-all-link:hover {
  border-color: var(--fg);
}

.store-preview-grid {
  grid-template-columns: 1fr;
  max-width: 320px;
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Homepage — Section 05: information footer                              */
/* ---------------------------------------------------------------------- */

.home-footer {
  border-top: 1px solid var(--line);
  padding: var(--rhythm-sm) var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 3vw;
}

.home-footer h3 {
  margin: 0 0 1.1rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.home-footer .footer-block + .footer-block {
  margin-top: 2.2rem;
}

.home-footer .city-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 0.4rem;
}

.home-footer .footer-location + .footer-location {
  margin-top: 2.4rem;
}

.home-footer .office-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 0.3rem;
}

.home-footer p {
  font-size: 13px;
  color: var(--fg-soft);
  line-height: 1.6;
}

.home-footer a:hover {
  color: var(--fg);
}

@media (max-width: 900px) {
  .home-footer {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Projects index / Store index — editorial grid                          */
/* ---------------------------------------------------------------------- */

.page-intro {
  padding: 3.5rem var(--gutter) var(--rhythm-sm);
  max-width: 640px;
}

@media (max-width: 720px) {
  .page-intro {
    padding-top: 2.5rem;
  }
}

.projects-grid {
  padding: 0 var(--gutter) var(--rhythm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.5vw;
  row-gap: 5.5rem;
}

.projects-grid .media {
  aspect-ratio: 4 / 5;
}

/* Store grid: same tile dimensions/scale as a Projects page tile
   (matches .preview-grid sizing exactly, same wrapper structure) and the
   same image-only, hover-reveal naming as every other grid. */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3.5vw;
  row-gap: 5.5rem;
  max-width: 1180px;
  margin: 0 auto;
}

.store-grid .media {
  aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .store-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .projects-grid {
    grid-template-columns: 1fr;
    row-gap: 3rem;
    padding-bottom: var(--rhythm-sm);
  }
}

/* ---------------------------------------------------------------------- */
/* Project / Store detail — full-bleed hero                                */
/* ---------------------------------------------------------------------- */

.detail-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.detail-hero-identity {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 2.6rem;
  z-index: 2;
  color: #fff;
}

.detail-hero-identity .category {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 0.6rem;
}

.detail-hero-identity h1 {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 0.7rem;
  color: #fff;
}

.detail-hero-identity .location {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 720px) {
  .detail-hero {
    height: 100svh;
  }
}

/* ---------------------------------------------------------------------- */
/* Project / Store detail — intro + metadata                              */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Project / Store detail — metadata table                                 */
/* ---------------------------------------------------------------------- */

.meta-section {
  padding: var(--rhythm-sm) var(--gutter) 0;
  display: flex;
  justify-content: flex-end;
}

.meta-table {
  width: 100%;
  max-width: 640px;
  border-top: 1px solid var(--line);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.meta-row .meta-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  flex: 0 0 auto;
}

.meta-row .meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  text-align: right;
}

@media (max-width: 720px) {
  .meta-section {
    justify-content: stretch;
  }
  .meta-table {
    max-width: none;
  }
  .meta-row {
    gap: 1rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Project / Store detail — description                                    */
/* ---------------------------------------------------------------------- */

.description-section {
  padding: var(--rhythm-sm) var(--gutter);
}

.description-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  max-width: 1100px;
}

.description-cols.is-single {
  grid-template-columns: 1fr;
  max-width: 720px;
}

.description-cols .body-copy {
  color: var(--fg-soft);
  font-size: 16px;
}

.description-cols .detail-statement {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
}

@media (max-width: 720px) {
  .description-cols {
    grid-template-columns: 1fr;
    gap: 1.6em;
  }
}

/* ---------------------------------------------------------------------- */
/* Project / Store detail — curated render sequence (tight editorial gaps) */
/* ---------------------------------------------------------------------- */

.render-sequence {
  margin-top: var(--rhythm-sm);
}

.render-sequence .gallery-figure,
.render-sequence .gallery-pair,
.render-sequence .gallery-narrow {
  margin-top: 0.85rem;
}

.render-sequence .gallery-figure:first-child,
.render-sequence .gallery-pair:first-child,
.render-sequence .gallery-narrow:first-child {
  margin-top: 0;
}

.render-sequence .gallery-pair {
  gap: 0.85rem;
}

@media (max-width: 720px) {
  .render-sequence .gallery-pair {
    gap: 0.85rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Project / Store detail — drawings & process (horizontal viewer)         */
/* ---------------------------------------------------------------------- */

.drawings-section {
  margin-top: var(--rhythm);
  padding: 0 var(--gutter) var(--rhythm);
}

.drawings-heading {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-align: center;
  margin: 0 0 2.5rem;
}

.drawing-viewer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 980px;
  margin: 0 auto;
}

.drawing-viewer-frame {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  max-height: 72vh;
  max-width: 72vh;
  margin: 0 auto;
  background: #f4f2ee;
  overflow: hidden;
  /* Vertical scrolling stays native; a horizontal swipe changes the drawing. */
  touch-action: pan-y;
}

/* Slides are stacked. The incoming drawing fades in over the outgoing one,
   which stays fully opaque beneath until the fade ends, so the frame never
   dips toward its paper-coloured background. */
.drawing-slide {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  -webkit-user-drag: none;
  user-select: none;
}

.drawing-slide.is-entering,
.drawing-slide.is-leaving,
.drawing-slide.is-active {
  display: block;
}

.drawing-slide.is-leaving {
  z-index: 1;
  opacity: 1;
}

.drawing-slide.is-active {
  z-index: 2;
  opacity: 1;
  transition: opacity 220ms var(--ease-ui);
}

.drawing-nav {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--fg-soft);
  font-size: 14px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 240ms var(--ease), border-color 240ms var(--ease);
}

.drawing-nav:focus-visible {
  color: var(--fg);
  border-color: var(--fg);
}

/* Hover only where there is a pointer; on touch it would stay lit after a tap. */
@media (hover: hover) and (pointer: fine) {
  .drawing-nav:hover {
    color: var(--fg);
    border-color: var(--fg);
  }
}

.drawing-caption {
  text-align: center;
  margin-top: 1.2rem;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  /* The viewer dissolves into the section grid so the drawing can use the
     full content width, with the arrows and counter sharing one row below
     it and 44px touch targets. */
  .drawings-section {
    display: grid;
    grid-template-columns: 2.75rem 1fr 2.75rem;
    grid-template-areas:
      "heading heading heading"
      "frame frame frame"
      "prev count next";
    align-items: center;
  }
  .drawings-heading {
    grid-area: heading;
  }
  .drawing-viewer {
    display: contents;
  }
  .drawing-viewer-frame {
    grid-area: frame;
    width: 100%;
    max-height: none;
    max-width: 100%;
    margin: 0 0 1rem;
  }
  .drawing-nav {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 14px;
  }
  .drawing-nav.prev {
    grid-area: prev;
  }
  .drawing-nav.next {
    grid-area: next;
  }
  .drawing-caption {
    grid-area: count;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------- */
/* Project / Store detail — editorial gallery                              */
/* ---------------------------------------------------------------------- */

.gallery-figure {
  padding: 0 var(--gutter);
  margin-top: var(--rhythm-sm);
}

.gallery-figure .media {
  aspect-ratio: 16 / 9;
}

.gallery-pair {
  padding: 0 var(--gutter);
  margin-top: var(--rhythm-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5vw;
}

.gallery-pair .media {
  aspect-ratio: 3 / 4;
}

.gallery-narrow {
  padding: 0 var(--gutter);
  margin-top: var(--rhythm-sm);
  display: flex;
  justify-content: center;
}

.gallery-narrow .media {
  width: 58%;
  aspect-ratio: 3 / 4;
}

@media (max-width: 720px) {
  .gallery-pair {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .gallery-narrow .media {
    width: 100%;
  }
}

.project-nav-footer {
  margin-top: var(--rhythm);
  padding: 2.2rem var(--gutter);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-soft);
}

.project-nav-footer a:hover {
  color: var(--fg);
}

/* ---------------------------------------------------------------------- */
/* About                                                                   */
/* ---------------------------------------------------------------------- */

.about-page {
  padding: var(--rhythm-sm) var(--gutter) var(--rhythm);
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 7vw;
  align-items: start;
}

.about-text {
  max-width: 560px;
  padding-top: 0.4rem;
}

.about-text .body-copy {
  color: var(--fg-soft);
  font-size: 16px;
}

.about-text .body-copy + .body-copy {
  margin-top: 1.6em;
}

.about-text .meta {
  display: block;
  margin-top: 3rem;
}

.about-portrait .media {
  aspect-ratio: 2 / 3;
}

@media (max-width: 900px) {
  .about-page {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .about-portrait {
    order: -1;
    max-width: 420px;
  }

  .about-text {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Contact                                                                 */
/* ---------------------------------------------------------------------- */

.contact-hero {
  padding: 4rem var(--gutter) 1.5rem;
}

.contact-hero h1 {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--fg);
}

.contact-form-wrap {
  padding: 1rem var(--gutter) var(--rhythm-sm);
  display: flex;
  justify-content: center;
}

.contact-form {
  width: 100%;
  max-width: 640px;
}

.form-row {
  margin-bottom: 1.8rem;
}

.form-row label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 0.6rem;
}

.form-row input,
.form-row textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  padding: 0.6rem 0.1rem;
  transition: border-color 240ms var(--ease);
}

.form-row textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--fg);
  outline: none;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--fg-faint);
}

.form-submit {
  margin-top: 0.5rem;
  padding: 0.85rem 2.2rem;
  border: 1px solid var(--fg);
  color: var(--fg);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 240ms var(--ease), color 240ms var(--ease);
}

.form-submit:hover {
  background: var(--fg);
  color: var(--bg);
}

.form-success {
  display: none;
  font-size: 16px;
  color: var(--fg);
  padding: 2rem 0;
}

.form-success.is-visible {
  display: block;
}

.form-success.is-visible + .contact-form {
  display: none;
}

.contact-image {
  padding: 0 var(--gutter);
  margin-bottom: var(--rhythm-sm);
}

.contact-image .media {
  aspect-ratio: 2.75 / 1;
}

@media (max-width: 720px) {
  .contact-image .media {
    aspect-ratio: 4 / 3;
  }
}

.contact-info {
  padding: 0 var(--gutter) var(--rhythm);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
}

.contact-info .info-block h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 1rem;
}

.contact-info .info-block .field {
  margin-bottom: 0.9rem;
}

.contact-info .info-block .field-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 0.2rem;
}

.contact-info .info-block .field-value {
  font-size: 13px;
  color: var(--fg-soft);
}

.contact-info .info-block .field-value a:hover {
  color: var(--fg);
}

.contact-footnote {
  padding: 0 var(--gutter) var(--rhythm-sm);
  font-size: 12px;
  color: var(--fg-faint);
}

@media (max-width: 900px) {
  .contact-info {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ---------------------------------------------------------------------- */
/* Footer (standard, all inner pages)                                     */
/* ---------------------------------------------------------------------- */

.site-footer {
  padding: 2.4rem var(--gutter) 3rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer .meta a {
  transition: color 240ms var(--ease);
}

.site-footer .meta a:hover {
  color: var(--fg);
}

.footer-links {
  display: flex;
  gap: 1.6rem;
}

/* ---------------------------------------------------------------------- */
/* Shared caption styles                                                  */
/* ---------------------------------------------------------------------- */

.caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.1rem;
  gap: 1rem;
}

.caption-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* Gentler, not zero: short opacity and colour fades stay because they    */
/* aid comprehension; anything that travels or scales is removed.         */
/* Kept last in the file so it can override without !important.           */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    transform: none;
    transition: opacity 400ms var(--ease-ui);
  }

  .media img,
  a.media-link:hover .media img,
  a.media-link:focus-visible .media img {
    transform: none;
    transition: opacity 400ms var(--ease-ui);
  }

  .brand-full {
    transition: opacity 280ms var(--ease-ui), color 300ms var(--ease-ui);
  }

  .site-nav,
  .site-nav.is-open {
    transform: none;
    transition: opacity 200ms var(--ease-ui);
  }
}