/* Portfolio — scattered layout. Stage (inner) is the only positioning context. */
/* Fonts loaded via <link> in HTML: Fraunces 300/400, Inter 400/500 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Theme: single source of truth (body class sets --bg, --fg) */
:root {
  --bg: #ffffff;
  --fg: #000000;
  --font-serif: 'Fraunces', Palatino, 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --brand-serif: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --nav-sans: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body.theme-white     { --bg: #ffffff; --fg: #000000; }
body.theme-sand      { --bg: #f6e2b8; --fg: #7d1802; }
body.theme-lightblue { --bg: #b2d3e2; --fg: #000000; }
body.theme-red       { --bg: #7d1802; --fg: #f6e2b8; }
body.theme-darkblue  { --bg: #0a0d28; --fg: #ffffff; }
body.theme-black     { --bg: #000000; --fg: #ffffff; }

html {
  height: 100%;
  background: var(--bg, #ffffff);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg, #ffffff);
  color: var(--fg);
}

header,
main,
.page-content,
footer {
  color: var(--fg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--fg);
}

/* NAME / LOGO — uppercase, elegant tracking */
.site-title,
.site-name,
header h1 {
  font-family: var(--brand-serif);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 500;
}

/* NAV — clean sans, small-caps feel, restrained */
.site-nav a,
nav a {
  font-family: var(--nav-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

a,
.site-nav a {
  color: inherit;
  text-decoration: none;
}

/* Global hover color across all themes/pages */
a:hover,
a:focus-visible {
  color: #7d1802;
}

/* On sand + red themes, hover text should be black (not red). */
body.theme-sand a:hover,
body.theme-sand a:focus-visible,
body.theme-red a:hover,
body.theme-red a:focus-visible {
  color: #000000;
}

:root {
  --hairline: color-mix(in srgb, var(--fg) 18%, transparent);
  /* Home slideshow transition (used only when .crossfade is present) */
  --slide-fade-ms: 2000ms;
  --slide-ease: cubic-bezier(0.28, 0.05, 0.22, 1); /* fog receding: gentle in and out */
}
hr,
.rule,
.divider {
  border-color: var(--hairline);
}

/* Theme switcher: dots above title, centred */
.theme-switcher {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.theme-switcher button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
}

body.theme-white .theme-switcher button[data-theme="white"],
body.theme-sand .theme-switcher button[data-theme="sand"],
body.theme-lightblue .theme-switcher button[data-theme="lightblue"],
body.theme-red .theme-switcher button[data-theme="red"],
body.theme-darkblue .theme-switcher button[data-theme="darkblue"],
body.theme-black .theme-switcher button[data-theme="black"] {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* ----- Header: gallery feel — reduced height ----- */
.site-header,
header {
  text-align: center;
  padding-top: 2.5rem;
  padding-bottom: 12px;
  padding-inline: 1rem;
}

.site-nav,
nav {
  margin-top: 10px;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.site-nav a:hover {
  opacity: 0.8;
}


.project-title {
  text-align: center;
  font-family: var(--brand-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--fg);
}

/* ----- Home slideshow: single img in fixed gallery window, calm fade ----- */
.home-slideshow {
  margin-top: 0;
  margin-bottom: 3rem;
  background: transparent;
}

.home-coming-soon {
  width: min(935px, 78.2vw);
  margin: 1.1rem auto 0;
  text-align: center;
  font-family: var(--brand-serif);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
}

.home-slideshow__frame {
  position: relative;
  width: min(935px, 78.2vw);
  height: min(62.9vh, 646px);
  margin-inline: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: none;
  outline: none;
  box-shadow: none;
}

.home-slideshow__img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 2800ms cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  outline: none;
  box-shadow: none;
}

.home-slideshow__img.is-visible {
  opacity: 1;
}

/* Home slideshow hover cursor: red "explosive" burst icon */
.page-home .home-slideshow__frame:hover,
.page-home .home-slideshow__frame:hover * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%237d1802' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6 L18 18'/%3E%3Cpath d='M18 6 L6 18'/%3E%3C/g%3E%3C/svg%3E") 12 12, pointer;
}

@media (prefers-reduced-motion: reduce) {
  .home-slideshow__img {
    transition: none;
  }
}

/* ----- Breakout: full viewport width, centered ----- */
.thumbnail-field-breakout {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 24px; /* close under menu */
}

.thumbnail-field-breakout__inner {
  width: 96vw;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;  /* containing block for scattered items */
  padding: 0 0 4rem;
}

/* Grid is flow-only; items positioned via transform (avoids hover subpixel jitter) */
.thumbnail-grid--scattered {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: block;
}

.thumbnail-grid--scattered .thumbnail-grid__item {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
}

.thumbnail-grid--scattered .thumbnail-grid__link {
  position: static;
  display: inline-block;
}

.thumbnail-grid--scattered .thumbnail-grid__link img {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.thumbnail-grid--scattered .thumbnail-grid__item:hover img {
  transform: translateZ(0) scale(1.01);
}

/* Narrow: stack vertically */
@media (max-width: 36em) {
  .home-slideshow__img {
    transition: opacity 1800ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .archive-thumb-b {
    display: none !important;
  }

  .archive-thumb-wrap {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .thumbnail-grid--scattered {
    min-height: 0;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 2rem !important;
    align-items: center;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .thumbnail-grid--scattered .thumbnail-grid__item {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 20rem;
    transform: none;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
  .thumbnail-grid--scattered .thumbnail-grid__link {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .thumbnail-grid--scattered .thumbnail-grid__link img {
    max-height: 50vh !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .thumbnail-grid--scattered .thumbnail-grid__link--captioned {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .thumbnail-grid--scattered .thumbnail-grid__link--captioned > span {
    position: static !important;
    display: block !important;
    text-align: center;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    padding: 0;
    /* Override desktop absolute-position caption transforms (archive page) */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    white-space: normal;
    pointer-events: auto !important;
    font-family: var(--nav-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .thumbnail-grid--scattered .thumbnail-grid__link--captioned img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 50vh !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .thumbnail-grid--scattered .thumbnail-grid__item:hover {
    transform: translateY(-2px) scale(1.02);
  }
  .thumbnail-grid--scattered .thumbnail-grid__item:hover img {
    transform: none;
  }

  .page-home.home-scatter-open .home-scatter__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
  }
  .page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item {
    position: static !important;
    transform: none !important;
    width: 85% !important;
    max-width: 400px !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
  }
  .page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .page-home.home-scatter-open .home-slideshow {
    display: none;
  }
}

/* Promote scattered thumb elements to compositor layer (item uses translate3d for position) */
.thumbnail-grid--scattered .thumbnail-grid__link,
.thumbnail-grid--scattered .thumbnail-grid__link img,
.thumbnail-grid--scattered .thumbnail-grid__label {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Global scattered hover — same lift/bring-forward as Home (uses --tx/--ty) */
.thumbnail-grid--scattered .thumbnail-grid__link {
  cursor: pointer;
}
.thumbnail-grid--scattered .thumbnail-grid__item {
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}
.thumbnail-grid--scattered .thumbnail-grid__item:hover {
  z-index: 5;
  filter: none;
  transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 2px), 0) scale(1.02);
}

/* Hide scatter grid until layout has settled, then fade in (clear, noticeable).
   pointer-events: none until revealed so nothing blocks clicks when hidden/laying out. */
.thumbnail-grid--scattered {
  opacity: 0;
  pointer-events: none;
  transition: opacity 880ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.thumbnail-grid--scattered.is-laidout.is-settled,
.thumbnail-grid--scattered.is-revealed {
  opacity: 1;
  pointer-events: auto;
}
.thumbnail-grid--scattered .thumbnail-grid__item,
.thumbnail-grid--scattered .thumbnail-grid__link,
.thumbnail-grid--scattered img {
  pointer-events: auto;
}

/* ----- Home / Contact ----- */
.page-content {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.page-content h1 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 1rem;
}

/* ----- Layout wrapper (constrains header/main width; breakout escapes) ----- */
.layout,
main {
  min-height: 100vh;
  background: transparent;
}

.layout {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

main {
  padding-block: 2rem 3rem;
}

.page-content,
.page,
.content,
.container,
footer {
  background: transparent;
}

/* =========================================================
   FLUID MODE (REVERSIBLE)
   Toggle with: body.fx-fluid
   Remove this whole block to revert.
========================================================= */

body.fx-fluid .thumbnail-grid--scattered .thumbnail-grid__item {
  left: 0;
  top: 0;
  transform: translate3d(
    calc(var(--tx, 0px) + var(--fxX, 0px)),
    calc(var(--ty, 0px) + var(--fxY, 0px)),
    0
  );
  transition: filter 200ms ease, opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  body.fx-fluid .thumbnail-grid--scattered .thumbnail-grid__item {
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  }
}

body.fx-fluid header,
body.fx-fluid .site-header,
body.fx-fluid nav {
  transition: opacity 200ms ease;
}

/* Archive: captioned link + span uses same pattern as .thumbnail-grid__label */
main.archive-page a.thumbnail-grid__link--captioned {
  text-decoration: none;
  color: inherit;
}

main.archive-page a.thumbnail-grid__link--captioned > span {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  color: var(--fg);
  font-family: var(--nav-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .thumbnail-grid__item img,
  .thumbnail-grid__label,
  main.archive-page a.thumbnail-grid__link--captioned > span {
    transition: none;
  }
}

/* =========================================================
   Archive — hide cursor on thumb hover (no wildcards)
========================================================= */

.page-archive .thumbnail-grid__item:hover img {
  cursor: none;
}

/* Archive thumbs: fixed size so all tiles keep same footprint (no overlap when image rotates) */
.page-archive .thumbnail-grid__item {
  width: 200px;
  max-width: 200px;
}

/* Crossfade: two layers so next image fades in as current fades out (no gap) */
.page-archive .thumbnail-grid__link .archive-thumb-wrap {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
}
.page-archive .thumbnail-grid__link .archive-thumb-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.5s ease;
}
.page-archive .thumbnail-grid__link .archive-thumb-wrap .archive-thumb-b {
  pointer-events: none;
}

/* =========================================================
   Global Social (Instagram) — reversible
========================================================= */

.site-social {
  margin: 120px 0 80px;
  text-align: center;
}

.site-social a {
  color: var(--fg);
  opacity: 0.9;              /* stronger default */
  transition: opacity 0.2s ease;
}

.site-social a:hover {
  opacity: 1;
}

.site-social svg {
  width: 24px;               /* larger icon */
  height: 24px;
  stroke-width: 2;           /* slightly stronger line */
}

/* =========================================================
   LIGHTBOX — reversible (remove block + js/lightbox.js to revert)
========================================================= */

body.lightbox-open {
  overflow: hidden;
  cursor: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.lightbox__veil {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.88;
  pointer-events: none;
}

.lightbox__img {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10001;
  pointer-events: auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none !important;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--fg);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 200ms ease;
  border-radius: 0.25rem;
}

.lightbox__close:hover {
  opacity: 1;
}

.lightbox__close:focus,
.lightbox__close:focus-visible {
  outline: none;
  box-shadow: none;
}

.lightbox__cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  pointer-events: none;
  font-family: var(--nav-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.85;
  white-space: nowrap;
}

.lightbox--touch .lightbox__cursor {
  display: none;
}

body.lightbox-open.lightbox-touch {
  cursor: default;
}

/* =========================================================
   Contact Page — Typography refinement (reversible)
========================================================= */

.contact-page p {
  line-height: 1.7; /* slightly more breathing room */
}

/* =========================================================
   Home explode-to-scatter (reversible)
   Only fades .home-slideshow and .home-scatter. Never hide .layout or .site-header.
========================================================= */

.page-home .home-scatter[hidden] {
  display: none;
}

.page-home .home-slideshow,
.page-home .home-scatter {
  transition: opacity 320ms ease-out;
}

.page-home .home-scatter {
  position: relative;
  opacity: 0;
  pointer-events: none;
}

.page-home .home-slideshow {
  opacity: 1;
}

.page-home.home-scatter-open .home-slideshow {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.page-home.home-scatter-open .home-slideshow__frame {
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.page-home.home-scatter-open .home-scatter {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.page-home.home-scatter-open main {
  position: relative;
  min-height: 100vh;
}

.page-home .home-scatter .thumbnail-field-breakout__inner {
  position: relative;
}

.page-home .home-scatter__grid {
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.page-home.home-scatter-ready .home-scatter__grid {
  opacity: 1;
}

.page-home.home-scatter-open .home-scatter__grid {
  position: relative;
  width: 100%;
  min-height: 900px;
  padding-bottom: 200px;
}

.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.page-home.home-scatter-open .home-scatter__grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* Home scatter: prevent any placeholder “tile box” feel before pixels arrive */
.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item img[src] {
  background: transparent;
}
.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item img {
  transition: opacity 180ms ease-out, transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Home Scatter hover — calm (scoped; does not affect Archive/Nyasa/projects) */
.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item img {
  transition:
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 320ms ease-out;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item:hover img {
  transform: scale(1.045);
}

/* Default: keep normal cursor in scatter empty space */
.page-home.home-scatter-open .home-scatter__grid {
  cursor: auto;
}

/* Hide cursor ONLY while hovering a thumb (link or item) */
.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item:hover,
.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__link:hover,
.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item:hover *,
.page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__link:hover * {
  cursor: none !important;
}

/* Ensure the floating label never blocks hover/click */
.home-cursor-label {
  pointer-events: none;
}

/* Home scatter cursor label (reversible: remove this block + JS that creates .home-cursor-label) */
.page-home.home-scatter-open .home-cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  /* Above scatter thumbs (inline z-index = 1..N from layoutScatter), below lightbox (.lightbox = 9999) */
  z-index: 9998;
  font-family: var(--nav-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d1802;
  opacity: 0;
  transition: opacity 180ms ease;
}
.page-home.home-scatter-open .home-cursor-label.is-visible {
  opacity: 1;
}

/* =========================================================
   Mobile panel — "All Projects" grid overlay (home, touch only). Reversible.
========================================================= */

.page-home .home-mobile-panel[hidden] {
  display: none;
}

body.home-mobile-panel-open {
  overflow: hidden;
}

.page-home .home-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.page-home .home-mobile-panel__veil {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.92;
  cursor: pointer;
}

.page-home .home-mobile-panel__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 3.5rem 1rem 2rem;
  box-sizing: border-box;
}

.page-home .home-mobile-panel__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 8001;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 200ms ease;
  border-radius: 0.25rem;
}

.page-home .home-mobile-panel__close:hover,
.page-home .home-mobile-panel__close:focus {
  opacity: 1;
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.page-home .home-mobile-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}

.page-home .home-mobile-panel__tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

.page-home .home-mobile-panel__tile img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.page-home .home-mobile-panel__title {
  display: block;
  margin-top: 0.35em;
  font-family: var(--nav-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Captions: on touch devices show by default (no hover reliance) */
@media (hover: none) and (pointer: coarse) {
  main.archive-page a.thumbnail-grid__link--captioned > span,
  .thumbnail-grid__caption,
  .thumbnail-grid__label {
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-slideshow,
  .page-home .home-scatter,
  .page-home .home-scatter__grid {
    transition: none;
  }
  .page-home.home-scatter-open .home-scatter__grid .thumbnail-grid__item img {
    transition: none;
  }
  .page-home.home-scatter-open .home-cursor-label {
    transition: none;
  }
  .page-home .home-mobile-panel__close,
  .page-home .home-mobile-panel__sheet {
    transition: none;
  }
  .lightbox__close {
    transition: none;
  }
}

/* ----- Project page: stable grid (e.g. Mental Notes) ----- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.project-grid .project-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-grid .project-tile img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

/* View Transitions API: crossfade between same-origin navigations (no white flash) */
@view-transition {
  navigation: auto;
}
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: ease-out;
    background: var(--bg, #ffffff);
  }
}