/* Portfolio responsive system
 * Three rules: desktop (>=992px, original webflow layout) | ONE tablet
 * adaptation (768-991px, both orientations: the desktop composition scaled
 * proportionally through the root font-size) | phone (<=767px, portrait).
 *
 * ── 断点体系（2026-08-13 梳理）────────────────────────────────────
 * 标准 Webflow 断点：
 *   max-width: 47.9375rem  (767px)   手机（纵向，含横屏手机的高度修正）
 *   max-width: 29.9375rem  (479px)   小手机（窄屏列数收敛）
 *   min-width: 48rem / max-width: 61.9375rem  (768–991px)  平板
 *   min-width: 62rem        (992px)  桌面（原始 Webflow 布局）
 *   min-width: 120.0625rem  (1921px) 大屏（出血宽度放宽）
 * 精细调优（有意保留，非笔误）：
 *   min/max-width: 48–53.99rem       窄平板（768–863px）列表降为 2 列
 *   orientation: portrait, max-width: 22.5rem (360px)  极小竖屏导航缩放
 *   orientation: landscape          横屏（高度受限时的导航/布局修正）
 * 非尺寸条件（保留，不参与尺寸归并）：
 *   (hover: hover) and (pointer: fine)   精确指针设备
 *   (prefers-reduced-motion: reduce)     无障碍降级
 * ────────────────────────────────────────────────────────────────
 */

:root {
  --page-gutter: 3rem;
  --section-gap: 3rem;
  --content-max-width: none;
  --touch-target: 2.75rem;
  --site-nav-home-offset: 50px;
  --viewport-edge-start: max(1rem, env(safe-area-inset-left));
  --viewport-edge-end: max(1rem, env(safe-area-inset-right));
}

/* Card shadows follow the viewport: once the grid gap shrinks below the
 * shadow reach on phone widths, the neumorphic offset and blur
 * scale down so adjacent cards never cast shadows onto one another.
 * Tablets keep the full desktop shadow, matching the PC interface. */
@media screen and (max-width: 47.9375rem) {
  :root {
    --card-shadow-offset: .5rem;
    --card-shadow-blur: .75rem;
  }
}

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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-about .about-hero-card__name > img {
  flex: 0 0 auto;
  width: 1.4375rem;
  max-width: 1.4375rem;
  height: auto;
}

iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

.home-layout,
.portfolio-index-layout,
.content-layout,
.photography-index-layout,
.about-layout,
.portfolio-detail-layout,
.photography-detail-layout {
  width: 100%;
  max-width: var(--content-max-width);
  margin-right: 0;
  margin-left: 0;
}

.portfolio-index-layout,
.content-layout,
.photography-index-layout,
.about-layout,
.portfolio-detail-layout,
.photography-detail-layout {
  padding-right: var(--viewport-edge-end);
  padding-left: var(--viewport-edge-start);
}

/* The nav rail never shrinks below its control width: on viewports without a
 * dedicated rule (e.g. tablets, which now fall back to the desktop layout)
 * the flex parents must not squeeze the rail into a sliver. */
.home-layout > .site-nav-region,
.portfolio-index-layout > .site-nav-region-wide,
.content-layout > .site-nav-region-wide,
.about-layout > .site-nav-region,
.photography-index-layout > .site-nav,
.portfolio-detail-layout > .site-nav,
.photography-detail-layout > .site-nav {
  flex-shrink: 0;
}

.card-action-bar__icon,
.card-action-bar__icon--compact,
.home-mini-card__icon,
.photography-card__media {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

/* Nav controls stay perfect circles at every viewport: the touch-target
 * minimum and the fluid control size agree (max of the two), and the button
 * fills its link exactly so width never drifts from height. */
.site-nav a {
  min-width: max(var(--touch-target), var(--nav-control-size));
  min-height: max(var(--touch-target), var(--nav-control-size));
}

.site-nav__button {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.site-nav__icon,
.site-nav__about-button {
  border-radius: 100px;
}

/* The "About me" section: its own container so the navigation is two
 * explicit sections inside the .site-nav__inner shell — the five primary
 * links (.site-nav__links, top) and the about control (.site-nav__about,
 * bottom). The wrapper is a flex cell that centres the link/button and
 * never grows on the cross axis. */
.site-nav__about {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

/* Icon boxes must match the real control size. The links' touch minimum can
 * exceed the fluid --nav-control-size (e.g. a 42.7px control under the 44px
 * touch target at 1242x712), which used to leave every icon ~0.65px off
 * centre; sizing the boxes to the same max() keeps icons perfectly centred. */
.site-nav__icon,
.site-nav__about-button {
  width: max(var(--touch-target), var(--nav-control-size));
  height: max(var(--touch-target), var(--nav-control-size));
}

.site-nav__inner {
  width: max(var(--touch-target), var(--nav-control-size));
}

.site-nav.site-nav--home-position {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  transform: none !important;
}

.site-nav.site-nav--home-position > .site-nav__inner {
  flex-direction: column;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
}

.site-nav.site-nav--home-position .site-nav__links {
  flex-direction: column;
  align-items: center;
}

.site-nav.site-nav--home-position .site-nav__links > *,
.site-nav.site-nav--home-position > .site-nav__inner > * {
  align-self: center;
}

/* Every page uses the same navigation slot as the Home page. This block is
 * the original PC rule set and starts at the PC breakpoint (62rem = 992px).
 * Tablets (48-61.9375rem) get their own single proportional-scale adaptation
 * at the end of this file instead of inheriting this block. */
@media screen and (min-width: 62rem) {
  .page-photography-detail .detail-toolbar,
  .page-snack-detail .detail-toolbar {
    margin-left: 5vw;
  }

  .page-photography-detail .detail-toolbar {
    margin-top: 48px;
  }

  .page-snack-detail .detail-toolbar {
    margin-top: 23px;
  }

  .home-layout,
  .portfolio-index-layout,
  .content-layout,
  .photography-index-layout,
  .about-layout,
  .portfolio-detail-layout,
  .photography-detail-layout {
    padding-left: var(--site-nav-home-offset);
  }

  .home-layout > .site-nav-region,
  .portfolio-index-layout > .site-nav-region-wide,
  .content-layout > .site-nav-region-wide,
  .about-layout > .site-nav-region {
    flex: 0 0 calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    width: calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    height: 80vh;
    margin: 0 0 3.125rem;
  }

  .home-layout > .site-nav-region > .site-nav,
  .portfolio-index-layout > .site-nav-region-wide > .site-nav,
  .content-layout > .site-nav-region-wide > .site-nav,
  .about-layout > .site-nav-region > .site-nav,
  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    align-self: center;
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    height: 80vh;
    margin: 0;
  }

  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    flex: 0 0 calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    margin-bottom: 3.125rem;
  }
}

/* Shared collection grids: the original desktop density (4 columns, 3 for
 * projects). The single tablet adaptation keeps these same numbers and lets
 * the proportional root scale handle the visual size at 768-991px. */

.snacks-list__items,
.projects-list__items,
.photography-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--collection-item-gap-inline);
  row-gap: var(--collection-item-gap-block);
  width: 100%;
  padding-right: var(--viewport-edge-end);
  padding-left: var(--viewport-edge-start);
  overflow: visible;
}

/* Webflow's .w-row float-clear pseudo elements become phantom items and
 * disturb the first row; drop them in grid layouts. */
.snacks-list__items::before,
.snacks-list__items::after,
.projects-list__items::before,
.projects-list__items::after,
.photography-list::before,
.photography-list::after {
  display: none;
}

/* Collection cards use deterministic grid rows. Every card fills its grid
 * cell: the row height follows the tallest item and each card stretches to
 * it, so all cards in a row share the same x/y grid position and end on the
 * same baseline. Column counts: desktop 4 (3 for projects), tablet-wide 4
 * (3 for projects), tablet-narrow 2, phone 2, compact phone 1. */
.snacks-list__items > .listing-card__item,
.projects-list__items > .listing-card__item,
.photography-list > .photography-list__item {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  align-self: stretch;
}

.snacks-list__items,
.projects-list__items,
.photography-list {
  align-items: stretch;
}

.projects-list__items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photography-card__link,
.snack-card,
.project-card {
  width: 100%;
  max-width: none;
}

.snack-detail__content,
.photography-gallery,
.collection-scroll-container,
.projects-grid__section,
.about-scroll-container {
  max-width: 100%;
}

.page-snack-detail iframe {
  aspect-ratio: 16 / 9;
  min-height: 22rem;
}

.project-embed iframe,
.document-embed iframe {
  min-height: 65dvh;
}

/* Snacks item toolbar: the menu opens directly below its own toggle. */
.page-snack-detail .detail-toolbar {
  position: relative;
  z-index: 20;
  column-gap: 1rem;
  align-items: center;
}

.page-snack-detail .detail-toolbar__back-icon {
  margin-bottom: 0;
}

.page-snack-detail .detail-dropdown {
  position: relative;
  z-index: 21;
  margin-right: 0;
  margin-left: 0;
}

.page-snack-detail .detail-dropdown::after,
.page-photography-detail .detail-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 0;
  display: none;
  height: .75rem;
  pointer-events: auto;
}

.page-snack-detail .detail-dropdown:has(.snack-dropdown.w--open)::after,
.page-photography-detail .detail-dropdown:has(.photography-dropdown.w--open)::after {
  display: block;
  right: -1.25%;
  left: -1.25%;
}

.page-snack-detail .detail-dropdown__toggle {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  min-height: 3rem;
  margin-bottom: 0;
  padding-top: .5rem;
  padding-bottom: .5rem;
  color: #3d3d3d;
  font-family: Exo, "HarmonyOS Sans", sans-serif;
  font-size: var(--font-size-supporting);
  font-weight: 500;
  line-height: var(--line-height-compact);
  letter-spacing: 0;
}

.page-snack-detail .detail-dropdown__toggle > :first-child,
.page-photography-detail .detail-dropdown__toggle > :first-child {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: var(--line-height-compact);
}

.page-snack-detail .snack-dropdown.w--open {
  top: calc(100% + .75rem);
  right: auto;
  bottom: auto;
  left: -1.25%;
  width: 102.5%;
  max-height: none;
  padding-top: 0;
  overflow: visible;
  pointer-events: auto;
  box-shadow: -.375rem -.375rem .875rem #fffffff2,
    .375rem .375rem .875rem #0000002b;
  transform-origin: top center;
  animation: dropdown-card-reveal 180ms ease-out both;
}

.page-snack-detail .snack-dropdown .snack-dropdown__list {
  height: auto;
  max-height: min(60dvh, 36rem);
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-snack-detail .snack-dropdown .snack-dropdown__list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.page-snack-detail .snack-dropdown .snack-dropdown__link {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}

.page-snack-detail .snack-dropdown .detail-dropdown__item:first-child {
  border-top: 0;
}

.page-snack-detail .detail-dropdown .icon-2,
.page-photography-detail .detail-dropdown .icon-2 {
  transform: rotate(-90deg) !important;
  transition: transform 180ms ease;
}

.page-snack-detail .detail-dropdown:has(.snack-dropdown.w--open) .icon-2,
.page-photography-detail .detail-dropdown:has(.photography-dropdown.w--open) .icon-2 {
  transform: rotate(0deg) !important;
}

.page-snack-detail .snack-dropdown .detail-dropdown__item,
.page-photography-detail .photography-dropdown .detail-dropdown__item {
  box-sizing: border-box;
  width: 100%;
  border-radius: 0;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.page-snack-detail .snack-dropdown .detail-dropdown__item:hover,
.page-snack-detail .snack-dropdown .detail-dropdown__item:focus-within,
.page-photography-detail .photography-dropdown .detail-dropdown__item:hover,
.page-photography-detail .photography-dropdown .detail-dropdown__item:focus-within {
  background-color: #ffffff73;
  box-shadow: inset 0 0 .75rem #ffffff8c;
  transform: none;
}

.page-snack-detail .snack-dropdown .snack-dropdown__link,
.page-photography-detail .photography-dropdown .photography-dropdown__link {
  display: block;
  width: 100%;
}

.page-snack-detail .snack-dropdown .w-dyn-items,
.page-photography-detail .photography-dropdown .w-dyn-items {
  width: 100%;
}

.page-snack-detail .snack-dropdown .detail-dropdown__item:first-child,
.page-photography-detail .photography-dropdown .detail-dropdown__item:first-child {
  border-radius: 1rem 1rem 0 0;
  corner-shape: squircle;
}

.page-snack-detail .snack-dropdown .detail-dropdown__item:last-child,
.page-photography-detail .photography-dropdown .detail-dropdown__item:last-child {
  border-radius: 0 0 1rem 1rem;
  corner-shape: squircle;
}

.page-snack-detail .snack-dropdown .detail-dropdown__item:only-child,
.page-photography-detail .photography-dropdown .detail-dropdown__item:only-child {
  border-radius: 1rem;
  corner-shape: squircle;
}

/* Photograph item menus share the Snacks item menu design and alignment. */
.page-photography-detail .detail-toolbar {
  position: relative;
  z-index: 20;
  column-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
}

.page-photography-detail .detail-toolbar__back,
.page-photography-detail .detail-toolbar__back-icon {
  flex: 0 0 auto;
}

.page-photography-detail .detail-toolbar__back-icon {
  margin-bottom: 0;
}

.page-photography-detail .detail-dropdown {
  position: relative;
  z-index: 21;
  margin-right: 0;
  margin-left: 0;
}

.page-photography-detail .detail-dropdown__toggle {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  min-height: 3rem;
  margin-bottom: 0;
  padding-top: .5rem;
  padding-bottom: .5rem;
  color: #3d3d3d;
  font-family: Exo, "HarmonyOS Sans", sans-serif;
  font-size: var(--font-size-supporting);
  font-weight: 500;
  line-height: var(--line-height-compact);
  letter-spacing: 0;
}

.page-snack-detail .detail-dropdown__toggle > :first-child,
.page-photography-detail .detail-dropdown__current-label {
  font-weight: 600;
}

.page-snack-detail .snack-dropdown .supporting-text,
.page-photography-detail .photography-dropdown .dropdown-item-label {
  display: inline-block;
  max-width: 100%;
  font-size: clamp(.95rem, calc(.925rem + .12vw), 1.025rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  transform-origin: left center;
  transition:
    color 160ms ease,
    letter-spacing 160ms ease,
    transform var(--motion-hover-duration, 320ms)
      var(--motion-hover-easing, cubic-bezier(.34, 1.35, .64, 1));
}

.page-snack-detail .snack-dropdown .detail-dropdown__item:hover .supporting-text,
.page-snack-detail .snack-dropdown .detail-dropdown__item:focus-within .supporting-text,
.page-photography-detail .photography-dropdown .detail-dropdown__item:hover .dropdown-item-label,
.page-photography-detail .photography-dropdown .detail-dropdown__item:focus-within .dropdown-item-label {
  color: #2f2f2f;
  font-weight: 600;
  letter-spacing: .005em;
  transform: translateX(clamp(.1rem, .2vw, .2rem)) scale(1.012);
}

.page-snack-detail .detail-dropdown__toggle,
.page-photography-detail .detail-dropdown__toggle {
  transform-origin: center;
  transition:
    transform var(--motion-hover-duration, 320ms)
      var(--motion-hover-easing, cubic-bezier(.34, 1.35, .64, 1)),
    background-color 180ms ease,
    box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page-snack-detail .detail-dropdown:not(:has(.snack-dropdown.w--open)) .detail-dropdown__toggle:hover,
  .page-photography-detail .detail-dropdown:not(:has(.photography-dropdown.w--open)) .detail-dropdown__toggle:hover {
    background-color: #e7e7e7;
    box-shadow: var(--shadow-raised);
    transform: translateY(-.125rem) scale(1.025);
  }
}

.page-snack-detail .detail-dropdown:has(.snack-dropdown.w--open) .detail-dropdown__toggle,
.page-photography-detail .detail-dropdown:has(.photography-dropdown.w--open) .detail-dropdown__toggle {
  background-color: #e7e7e7;
  box-shadow: var(--shadow-raised);
  transform: translateY(-.125rem) scale(1.025);
}

.page-snack-detail .detail-dropdown__toggle:focus-visible,
.page-photography-detail .detail-dropdown__toggle:focus-visible {
  outline: .125rem solid #3d3d3d4d;
  outline-offset: .1875rem;
  box-shadow: var(--shadow-raised);
}

.page-snack-detail .detail-dropdown__toggle:active,
.page-photography-detail .detail-dropdown__toggle:active {
  background-color: #dedede !important;
  box-shadow: var(--shadow-inset) !important;
  transform: translateY(0) scale(.985) !important;
}

.page-photography-detail .photography-dropdown.w--open {
  top: calc(100% + .75rem);
  right: auto;
  bottom: auto;
  left: -1.25%;
  width: 102.5%;
  max-height: none;
  margin-top: 0;
  padding-top: 0;
  background-color: var(--maincolor);
  border-radius: 1rem;
  corner-shape: squircle;
  overflow: visible;
  pointer-events: auto;
  box-shadow: -.375rem -.375rem .875rem #fffffff2,
    .375rem .375rem .875rem #0000002b;
  transform-origin: top center;
  animation: dropdown-card-reveal 180ms ease-out both;
}

@keyframes dropdown-card-reveal {
  from {
    opacity: 0;
    transform: translateY(-.25rem) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-photography-detail .photography-dropdown .photography-dropdown__list {
  height: auto;
  max-height: min(60dvh, 36rem);
  margin-top: 0;
  border-radius: 1rem;
  corner-shape: squircle;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-photography-detail .photography-dropdown .photography-dropdown__list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.page-photography-detail .photography-dropdown .photography-dropdown__link {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}

.page-photography-detail .photography-dropdown .detail-dropdown__item:first-child {
  border-top: 0;
}

.page-photography-detail .photography-gallery .photography-gallery__list {
  --photography-grid-gap: 1rem;
  display: flex;
  flex-flow: row wrap;
  gap: var(--photography-grid-gap);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  padding-right: var(--photography-grid-gap);
  padding-left: var(--photography-grid-gap);
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.page-photography-detail .photography-gallery .photography-gallery__item {
  padding: 0;
}

.page-photography-detail .photography-gallery,
.page-photography-detail .photography-detail__gallery-region {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

.page-photography-detail .photography-detail__gallery-region {
  padding-right: 0;
}

.page-photography-detail .photography-gallery {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-photography-detail .photography-gallery::-webkit-scrollbar:horizontal,
.page-photography-detail .photography-gallery .photography-gallery__list::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}

.page-photography-detail .photography-gallery .photography-gallery__item.is-landscape {
  flex: 0 0 100%;
  width: 100% !important;
  max-width: 100%;
}

.page-photography-detail .photography-gallery .photography-gallery__item.is-portrait {
  flex: 0 0 calc((100% - var(--photography-grid-gap)) / 2);
  width: calc((100% - var(--photography-grid-gap)) / 2) !important;
  max-width: calc((100% - var(--photography-grid-gap)) / 2);
}

.page-photography-detail .photography-gallery .photography-gallery__item > a,
.page-photography-detail .photography-gallery .photography-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  object-position: center;
}

@media screen and (min-width: 120.0625rem) {
  :root {
    --page-gutter: 4rem;
    --section-gap: 4rem;
    --content-max-width: none;
    --touch-target: 3rem;
    --viewport-edge-start: max(2rem, env(safe-area-inset-left));
    --viewport-edge-end: max(2rem, env(safe-area-inset-right));
  }
}

@media screen and (max-width: 47.9375rem) {
  :root {
    --page-gutter: 2rem;
    --section-gap: 2.5rem;
  }

  body {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
  }

  .home-layout,
  .portfolio-index-layout,
  .page-projects-index > .content-layout,
  .page-snacks-index > .content-layout,
  .photography-index-layout,
  .about-layout,
  .portfolio-detail-layout,
  .photography-detail-layout {
    height: auto;
    min-height: 100dvh;
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
    overflow: visible;
  }

  .home-layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--section-gap);
    padding-top: 2rem;
    padding-bottom: 4rem;
  }

  .portfolio-index-layout,
  .page-projects-index > .content-layout,
  .page-snacks-index > .content-layout,
  .photography-index-layout,
  .about-layout,
  .portfolio-detail-layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--section-gap);
    padding-top: 2rem;
    padding-bottom: 4rem;
  }

  .home-layout > .site-nav-region,
  .portfolio-index-layout > .site-nav-region-wide,
  .content-layout > .site-nav-region-wide,
  .about-layout > .site-nav-region,
  .home-layout > .home-hero,
  .home-layout > .home-card-grid {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .portfolio-index-layout > .site-nav-region-wide,
  .content-layout > .site-nav-region-wide,
  .about-layout > .site-nav-region {
    flex: 0 0 auto;
    padding: 0;
  }

  .site-nav {
    z-index: 50;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  .page-snack-detail > .content-layout {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding-top: 3.125rem;
    padding-bottom: 0;
  }

  .collection-scroll-container,
  .projects-grid__section,
  .about-scroll-container,
  .snack-detail__content,
  .photography-gallery {
    height: auto;
    min-height: 0;
    padding-right: 0;
    overflow: visible;
  }

  .snacks-list__items > .listing-card__item,
  .projects-list__items > .listing-card__item,
  .photography-list > .photography-list__item {
    width: 50%;
  }

  .photography-card__link,
  .snack-card,
  .project-card {
    max-width: none;
  }

  .photography-list {
    height: auto;
    padding-right: 0;
  }

  .page-snack-detail iframe {
    min-height: 20rem;
  }
}

@media screen and (max-width: 47.9375rem) {
  :root {
    --page-gutter: 1rem;
    --section-gap: 2rem;
    --touch-target: 2.75rem;
  }

  .home-layout,
  .portfolio-index-layout,
  .content-layout,
  .photography-index-layout,
  .about-layout,
  .portfolio-detail-layout,
  .photography-detail-layout {
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

  .site-nav {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .site-nav__inner,
  .site-nav__links {
    max-width: 100%;
  }

  .snacks-list__items,
  .projects-list__items,
  .photography-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding-right: 0;
    padding-left: 0;
  }

  .snacks-list__items > .listing-card__item,
  .projects-list__items > .listing-card__item,
  .photography-list > .photography-list__item {
    width: 100%;
    max-width: none;
  }

  .photography-card__link,
  .snack-card,
  .project-card,
  .home-portfolio-link,
  .home-card-link,
  .home-mini-card-link {
    width: 100%;
    max-width: none;
  }

  .snack-detail__title,
  .photography-detail__title-region,
  .collection-page__header {
    width: 100%;
    padding-right: 0;
  }

  .page-snack-detail iframe {
    min-height: 0;
  }

  .project-embed iframe,
  .document-embed iframe {
    min-height: 70dvh;
  }

}

@media screen and (max-width: 29.9375rem) {
  :root {
    --page-gutter: .75rem;
    --section-gap: 1.5rem;
  }

  .site-nav {
    border-radius: 1.5rem;
}

  .site-nav__links {
    gap: .375rem;
  }

  .site-nav__button,
  .site-nav__about-button {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
  }

  .page-title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .detail-dropdown__toggle {
    width: 100%;
    padding-right: 3rem;
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .page-snack-detail .snack-dropdown.w--open,
  .page-photography-detail .photography-dropdown.w--open {
    animation: none;
  }

  .page-snack-detail .snack-dropdown .supporting-text,
  .page-photography-detail .photography-dropdown .dropdown-item-label {
    transition: none;
  }

  .page-snack-detail .snack-dropdown .detail-dropdown__item:hover .supporting-text,
  .page-snack-detail .snack-dropdown .detail-dropdown__item:focus-within .supporting-text,
  .page-photography-detail .photography-dropdown .detail-dropdown__item:hover .dropdown-item-label,
  .page-photography-detail .photography-dropdown .detail-dropdown__item:focus-within .dropdown-item-label {
    transform: none;
  }
}

/* Keep the Photograph item scroller flush with the viewport's right edge. */
.page-photography-detail > .photography-detail-layout {
  padding-right: 0;
}

/* A single Snack image fits the available page height and never scrolls. */
.page-snack-detail .snack-detail__content:has(.snack-gallery-primary__list > .snack-gallery-primary__item:only-child) {
  flex: 0 0 100vh;
  width: 50vw;
  height: 100vh;
  min-height: 0;
  max-width: 50vw;
  max-height: 100vh;
  padding-bottom: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.page-snack-detail .snack-detail__content:has(.snack-gallery-primary__list > .snack-gallery-primary__item:only-child) .snack-gallery-primary,
.page-snack-detail .snack-detail__content:has(.snack-gallery-primary__list > .snack-gallery-primary__item:only-child) .snack-gallery-primary__list {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.page-snack-detail .snack-gallery-primary__list > .snack-gallery-primary__item:only-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

.page-snack-detail .snack-gallery-primary__list > .snack-gallery-primary__item:only-child > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.page-snack-detail .snack-gallery-primary__list > .snack-gallery-primary__item:only-child img {
  display: block;
  width: auto;
  height: 100vh;
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
  object-position: center;
}

/* Runtime fallback: close every possible scroll owner on true single-image pages. */
.page-snack-detail.has-single-snack-image {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(> body.page-snack-detail.has-single-snack-image) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.page-snack-detail.has-single-snack-image > .content-layout,
.page-snack-detail.has-single-snack-image .snack-detail__header,
.page-snack-detail.has-single-snack-image .snack-detail__main,
.page-snack-detail.has-single-snack-image .snack-detail__layout,
.page-snack-detail.has-single-snack-image .snack-detail__content,
.page-snack-detail.has-single-snack-image .snack-gallery-primary,
.page-snack-detail.has-single-snack-image .snack-gallery-primary__list {
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.page-snack-detail.has-single-snack-image > .content-layout {
  height: 100dvh;
  max-height: 100dvh;
}

.page-snack-detail.has-single-snack-image .snack-detail__content {
  flex: 0 0 100vh;
  height: 100vh;
  max-height: 100vh;
  padding-bottom: 0;
  touch-action: none;
}

.page-snack-detail.has-single-snack-image .snack-gallery-primary,
.page-snack-detail.has-single-snack-image .snack-gallery-primary__list {
  height: 100vh;
  max-height: 100vh;
}

.page-snack-detail.has-single-snack-image .snack-gallery-primary__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
}

.page-snack-detail.has-single-snack-image .snack-gallery-primary__item > a,
.page-snack-detail.has-single-snack-image .snack-gallery-primary__item {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.page-snack-detail.has-single-snack-image .snack-gallery-primary__item > a {
  width: 100%;
  height: 100%;
}

.page-snack-detail.has-single-snack-image .snack-gallery-primary__item img {
  width: auto;
  height: 100vh;
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
  object-position: center;
}

.page-snack-detail .w-lightbox-backdrop,
.page-snack-detail .w-lightbox-container,
.page-snack-detail .w-lightbox-content,
.page-snack-detail .w-lightbox-view,
.page-snack-detail .w-lightbox-figure {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.page-snack-detail .w-lightbox-figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-snack-detail .w-lightbox-image {
  width: auto;
  min-width: 0;
  max-width: 100vw;
  height: auto;
  min-height: 0;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

/* Only the right-side viewer is orientation-driven; left collections stay original. */
.page-snack-detail .w-lightbox-image.is-portrait-image {
  width: auto;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
}

.page-snack-detail
  .w-lightbox-content:not(.w-lightbox-group)
  .w-lightbox-image.is-landscape-image {
  width: 50vw;
  min-width: 0;
  max-width: 50vw;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* P5.js embeds hug the sketch viewport instead of inheriting video min-heights. */
.page-snack-detail .snack-embed:has(.p5js-viewer) {
  align-items: center;
}

.page-snack-detail .p5js-viewer {
  flex: 0 0 auto;
  width: min(65rem, calc(100% - 2rem));
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
}

.page-snack-detail .p5js-viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

@media screen and (max-width: 47.9375rem) {
  .page-snack-detail .p5js-viewer {
    width: calc(100vw - 2rem);
  }
}

/* ==========================================================================
 * V1.2 responsive modes
 *
 * Portrait: one document scroller, a compact horizontal navigation dock, and
 * content that grows naturally with the page.
 * Landscape: a compact version of the desktop composition with the navigation
 * returned to the left rail and long content scrolling inside its main region.
 * ========================================================================== */

:root {
  --v12-safe-top: max(.75rem, env(safe-area-inset-top));
  --v12-safe-right: max(.75rem, env(safe-area-inset-right));
  --v12-safe-bottom: max(.75rem, env(safe-area-inset-bottom));
  --v12-safe-left: max(.75rem, env(safe-area-inset-left));
}

html,
body {
  min-width: 0;
}

.site-record-footer {
  box-sizing: border-box;
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - (var(--v12-safe-left) + var(--v12-safe-right)));
  margin: 0;
  padding: 0 .5rem max(.25rem, env(safe-area-inset-bottom));
  background: transparent;
  border-radius: 0;
  transform: translateX(-50%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-layout > *,
.portfolio-index-layout > *,
.content-layout > *,
.photography-index-layout > *,
.about-layout > *,
.portfolio-detail-layout > *,
.photography-detail-layout > * {
  min-width: 0;
}

.card-title {
  height: auto;
  min-height: 0;
}

/* The desktop scroll cue ships with a 100px entrance translation. Between
 * 1200px and 2000px that translated edge expands the mobile layout viewport
 * before the Webflow animation settles, so remove only that decorative shift. */
.page-portfolio-index .portfolio-scroll-indicator {
  transform: none !important;
}

/* Portrait phones use the mobile document flow and bottom navigation dock.
 * Tablets (>=768px) use the desktop-style rail; see the single tablet
 * adaptation at the end of this file. */
@media screen and (orientation: portrait) and (max-width: 47.9375rem) {
  :root {
    --page-gutter: clamp(1.25rem, 4vw, 2rem);
    --section-gap: clamp(1.25rem, 4vw, 2.5rem);
    --portrait-nav-control: 2.75rem;
    --nav-control-size: 2.75rem;
    --portrait-nav-height: 3.5rem;
    --portrait-card-radius: clamp(1.5rem, 7vw, 3rem);
    --portrait-content-top-offset: 5vh;
  }

  html {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
  }

  body,
  .page-home,
  .page-portfolio-index,
  .page-projects-index,
  .page-snacks-index,
  .page-photography-index,
  .page-about,
  .page-portfolio-detail,
  .page-photography-detail,
  .page-snack-detail {
    width: 100%;
    height: auto !important;
    min-height: 100dvh;
    max-height: none !important;
    overflow-x: clip;
    overflow-y: visible !important;
    overscroll-behavior-y: auto;
  }

  .page-home,
  .page-portfolio-index,
  .page-projects-index,
  .page-snacks-index,
  .page-photography-index,
  .page-about {
    padding-bottom:
      calc(var(--portrait-nav-height) + var(--v12-safe-bottom) + 1rem);
  }

  /* Match the fixed bottom-nav reserve to each page's canvas instead of
   * exposing the browser's default white body background. */
  .page-home,
  .page-about {
    background-color: var(--maincolor);
  }

  .page-portfolio-index,
  .page-projects-index,
  .page-snacks-index,
  .page-photography-index {
    background-color: #e1e1e1;
  }

  .home-layout,
  .portfolio-index-layout,
  .page-projects-index > .content-layout,
  .page-snacks-index > .content-layout,
  .photography-index-layout,
  .about-layout,
  .portfolio-detail-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--section-gap);
    width: 100%;
    height: auto;
    min-height: 100dvh;
    padding:
      var(--v12-safe-top)
      var(--page-gutter)
      2rem;
    overflow: visible;
  }

  /* Portfolio detail canvases have per-project inline colors. Keep their
   * navigation reserve inside the canvas so the correct theme fills it. */
  .page-portfolio-detail > .portfolio-detail-layout {
    padding-bottom:
      calc(
        2rem +
        var(--portrait-nav-height) +
        var(--v12-safe-bottom) +
        1rem
      );
  }

  /* Webflow entrance transforms start far outside the viewport. On touch
   * portrait layouts, content must remain available even before the runtime
   * finishes (or when reduced-motion/browser policies skip the animation). */
  .home-hero,
  .home-card-grid,
  .collection-page__header,
  .collection-scroll-container,
  .projects-grid__section,
  .about-hero-card,
  .about-biography,
  .portfolio-scroll-indicator,
  .page-title,
  .page-subtitle,
  .supporting-text,
  .supporting-text-muted,
  .photography-meta,
  .photography-list,
  .photography-gallery__list {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Bottom navigation dock. The content layouts reserve the same height so
   * their last controls never disappear behind this fixed bar. */
  .home-layout > .site-nav-region,
  .portfolio-index-layout > .site-nav-region-wide,
  .content-layout > .site-nav-region-wide,
  .about-layout > .site-nav-region {
    z-index: 100;
    flex: 0 0 auto;
    position: fixed;
    top: auto;
    right: max(var(--page-gutter), env(safe-area-inset-right));
    bottom: var(--v12-safe-bottom);
    left: max(var(--page-gutter), env(safe-area-inset-left));
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    flex: 0 0 auto;
    z-index: 100;
    position: fixed;
    top: auto;
    right: max(var(--page-gutter), env(safe-area-inset-right));
    bottom: var(--v12-safe-bottom);
    left: max(var(--page-gutter), env(safe-area-inset-left));
    width: auto;
    max-width: none;
  }

  .site-nav,
  .site-nav.site-nav--home-position {
    z-index: 100;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--portrait-nav-height);
    margin: 0;
    padding: .375rem;
    border-radius: 999rem;
overflow: visible;
    transform: none !important;
    backdrop-filter: blur(.75rem);
    -webkit-backdrop-filter: blur(.75rem);
  }

  .home-layout > .site-nav-region > .site-nav,
  .portfolio-index-layout > .site-nav-region-wide > .site-nav,
  .content-layout > .site-nav-region-wide > .site-nav,
  .about-layout > .site-nav-region > .site-nav {
    flex: 0 0 auto;
    align-self: stretch;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--portrait-nav-height);
    margin: 0;
  }

  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    z-index: 100;
    position: fixed;
    top: auto;
    right: max(var(--page-gutter), env(safe-area-inset-right));
    bottom: var(--v12-safe-bottom);
    left: max(var(--page-gutter), env(safe-area-inset-left));
    width: auto;
    max-width: none;
    height: auto;
    min-height: var(--portrait-nav-height);
    margin: 0;
  }

  .site-nav.site-nav--home-position > .site-nav__inner,
  .site-nav__inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .25rem;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  .site-nav.site-nav--home-position .site-nav__links,
  .site-nav__links {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: .25rem;
    width: auto;
    max-width: none;
  }

  .site-nav__links > *,
  .site-nav.site-nav--home-position .site-nav__links > *,
  .site-nav.site-nav--home-position > .site-nav__inner > * {
    align-self: center;
    min-width: 0;
  }

  .site-nav__link,
  .site-nav__inner > a,
  .site-nav__about > a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-nav__button,
  .site-nav__icon,
  .site-nav__about-button,
  .site-nav__about-button.site-nav__about-button--home {
    flex: 0 0 var(--portrait-nav-control);
    width: var(--portrait-nav-control);
    min-width: var(--portrait-nav-control);
    max-width: var(--portrait-nav-control);
    height: var(--portrait-nav-control);
    min-height: var(--portrait-nav-control);
    max-height: var(--portrait-nav-control);
    padding: 0;
  }

  .site-nav__icon img {
    width: 1.65rem;
    height: 1.65rem;
  }

  /* 详情页返回箭头在竖屏导航中保持 11:23 比例 */
  .site-nav__link--back .site-nav__icon img {
    width: auto;
    height: 1.65rem;
  }

  .site-nav__about-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Home */
  .home-layout > .home-hero,
  .home-layout > .home-card-grid {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .home-hero {
    gap: 1.25rem;
    justify-content: flex-start;
  }

  .home-intro {
    gap: .75rem;
    width: 100%;
    height: auto;
    min-height: 4.5rem;
  }

  .home-brand {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    height: 4.5rem;
    min-height: 4.5rem;
    max-height: 4.5rem;
    padding: .875rem;
  }

  .home-intro__copy {
    flex: 1 1 auto;
    width: auto;
    height: 4.5rem;
    padding: .5rem;
  }

  .home-intro__text {
    min-height: 3.5rem;
    padding: .625rem 1rem;
  }

  .page-home .home-profile-name {
    font-size: clamp(1rem, 5vw, 1.35rem);
  }

  .home-portfolio-link {
    width: 100%;
    height: auto;
    min-height: 24rem;
    padding: clamp(1rem, 5vw, 2rem);
    border-radius: var(--portrait-card-radius);
  corner-shape: squircle;
  }

  .home-portfolio-card,
  .home-portfolio-card__content {
    width: 100%;
    height: auto;
  }

  .home-portfolio-card__content {
    gap: 1rem;
  }

  .home-portfolio-card__copy {
    padding: .5rem;
  }

  .home-portfolio-card__media {
    width: 100%;
  }

  .home-portfolio-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .home-card-grid {
    gap: 1rem;
    align-items: stretch;
    padding: clamp(1rem, 4vw, 1.5rem);
    border-radius: var(--portrait-card-radius);
  corner-shape: squircle;
  }.home-mini-card-link {

    width: 100%;
    height: auto;
    padding: 1rem;
    border-radius: clamp(1.25rem, 5vw, 2rem);

}
.home-card-link{
    width: 100%;
    height: auto;
    padding: 1rem;
    border-radius: clamp(1.25rem, 5vw, 2rem);
  corner-shape: squircle;
  }

  .home-card,
  .home-mini-card {
    gap: 1rem;
    height: auto;
  }

  .home-card__copy,
  .home-portfolio-card__copy {
    padding-right: 0;
    padding-left: 0;
  }

  /* Index pages and natural document scrolling. */
  .collection-scroll-container,
  .about-scroll-container,
  .photography-page__content,
  .collection-page,
  .projects-grid__section,
  .projects-grid,
  .snacks-list,
  .projects-list,
  .photography-list-wrapper,
  .photography-list {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    overflow: visible;
  }

  .collection-scroll-container,
  .about-scroll-container {
    flex: 1 1 auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .collection-page__header {
    width: 100%;
    margin: 0;
    padding: 0 0 1rem;
  }

  .snacks-list__items,
  .projects-list__items,
  .photography-list {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 1rem 0 0;
  }

  .snacks-list__items > .listing-card__item,
  .projects-list__items > .listing-card__item,
  .photography-list > .photography-list__item {
    width: 50%;
    max-width: none;
    padding-right: clamp(.75rem, 2.5vw, 1.5rem);
    padding-bottom: clamp(1.25rem, 4vw, 2rem);
  }

  .photography-card__link,
  .snack-card,
  .project-card,
  .portfolio-card,
  .listing-card__link {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .portfolio-list__item {
    padding: 1rem 0 2rem;
  }

  .portfolio-card {
    width: 100%;
  }

  .portfolio-card-grid,
  .portfolio-list,
  .portfolio-list__items {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 0 2rem;
  }

  .page-portfolio-index .portfolio-card-grid,
  .page-portfolio-index .portfolio-list,
  .page-portfolio-index .portfolio-list__items,
  .page-portfolio-index .portfolio-list__item,
  .page-portfolio-index .portfolio-card__link,
  .page-portfolio-index .portfolio-card__shell,
  .page-portfolio-index .portfolio-card {
    align-self: stretch;
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
  }

  .page-portfolio-index .portfolio-card__media,
  .page-portfolio-index .portfolio-card__image {
    width: 100%;
    max-width: 100%;
  }

  .portfolio-scroll-indicator {
    display: none;
  }

  /* About */
  .about-content {
    gap: clamp(1.25rem, 4vw, 2.5rem);
    width: 100%;
  }

  .about-hero-card {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    padding: clamp(1.25rem, 5vw, 2.5rem);
    border-radius: var(--portrait-card-radius);
  corner-shape: squircle;
  }

  .page-about .about-hero-card__content,
  .page-about .about-biography__intro {
    gap: 1.25rem;
    padding: clamp(1.25rem, 5vw, 2rem);
  }

  .page-about .about-introduction {
    width: 100%;
    padding: 0;
  }

  .page-about .about-biography__intro {
    flex-direction: column;
    align-items: stretch;
    border-radius: clamp(1.25rem, 6vw, 2.5rem);
  corner-shape: squircle;
  }

  .page-about .about-resource-card {
    gap: 1rem;
    padding: clamp(1.125rem, 4vw, 1.75rem);
  }

  .page-about .supporting-text-muted,
  .page-about .supporting-text-summary {
    font-size: clamp(.95rem, 4vw, 1.0625rem);
    line-height: 1.75;
  }

  .about-hero-card__header,
  .about-hero-card__content,
  .about-hero-card__name,
  .about-biography__section,
  .about-biography__copy,
  .about-summary {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .about-biography {
    gap: clamp(1.5rem, 5vw, 3rem);
    width: 100%;
    padding: clamp(1.25rem, 5vw, 2.5rem);
    border-radius: var(--portrait-card-radius);
  corner-shape: squircle;
  }

  .about-biography__section {
    flex-direction: column;
    gap: .75rem;
    padding-right: .25rem;
    padding-left: .25rem;
  }

  .about-resource-cards {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .about-resource-cards > .about-resource-card {
    flex: 1 1 calc(50% - .5rem);
    min-width: min(100%, 16rem);
  }

  /* Portfolio detail */
  .page-portfolio-detail {
    height: auto;
  }

  .portfolio-detail-layout .collection-scroll-container {
    padding: 0 0 2rem;
  }

  .portfolio-detail__image {
    width: 100%;
    height: auto;
    margin-top: 1rem;
    border-radius: clamp(1rem, 4vw, 2rem);
  corner-shape: squircle;
  }

  /* Snack detail: title, tools, primary media and secondary media all take
   * part in the same vertical document flow. */
  .page-snack-detail > .content-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    height: auto;
    min-height: 0;
    padding:
      var(--v12-safe-top)
      var(--page-gutter)
      0;
    overflow: visible;
  }

  .page-snack-detail .snack-detail__header,
  .page-snack-detail .snack-detail__main,
  .page-snack-detail .snack-detail__layout,
  .page-snack-detail .snack-detail__content {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    overflow: visible;
  }

  .page-snack-detail .snack-detail__main {
    margin-bottom: 0;
  }

  .page-snack-detail .detail-toolbar,
  .page-photography-detail .detail-toolbar {
    z-index: 80;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0 0 1rem;
  }

  .page-snack-detail .detail-toolbar__back-icon,
  .page-photography-detail .detail-toolbar__back-icon {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
  }

  .page-snack-detail .detail-dropdown,
  .page-photography-detail .detail-dropdown {
    flex: 1 1 auto;
    min-width: 0;
  }

  .page-snack-detail .detail-dropdown__toggle,
  .page-photography-detail .detail-dropdown__toggle {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 3rem;
    margin: 0;
    padding: .625rem 3rem .625rem 1rem;
  }

  .detail-dropdown__current-label,
  .page-snack-detail .detail-dropdown__toggle > :first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-snack-detail .snack-detail__title {
    width: 100%;
    padding: 0 0 1rem;
  }

  .page-snack-detail .snack-gallery-primary,
  .page-snack-detail .snack-gallery-primary__list,
  .page-snack-detail .snack-gallery-secondary,
  .page-snack-detail .snack-gallery-secondary__list {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: visible;
  }

  .page-snack-detail .snack-gallery-primary__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .page-snack-detail .snack-gallery-primary__item,
  .page-snack-detail .snack-gallery-secondary__item {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  .page-snack-detail .snack-gallery-primary__item > a,
  .page-snack-detail .snack-gallery-secondary__item > a,
  .page-snack-detail .snack-gallery-primary__item img,
  .page-snack-detail .snack-gallery-secondary__item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .page-snack-detail > .content-layout > div:has(> .snack-gallery-secondary) {
    width: 100%;
    max-width: 100%;
    padding: 1rem 0 calc(2rem + var(--v12-safe-bottom));
  }

  /* Elegy: video column stacks below the content column in portrait. */
  .page-snack-detail > .content-layout > .snack-video-aside {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 1rem 0 calc(2rem + var(--v12-safe-bottom));
    overflow: visible;
  }

  /* Undo the desktop single-image viewport lock in portrait. */
  html:has(> body.page-snack-detail.has-single-snack-image),
  .page-snack-detail.has-single-snack-image {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  .page-snack-detail .snack-detail__content:has(.snack-gallery-primary__list > .snack-gallery-primary__item:only-child),
  .page-snack-detail.has-single-snack-image > .content-layout,
  .page-snack-detail.has-single-snack-image .snack-detail__header,
  .page-snack-detail.has-single-snack-image .snack-detail__main,
  .page-snack-detail.has-single-snack-image .snack-detail__layout,
  .page-snack-detail.has-single-snack-image .snack-detail__content,
  .page-snack-detail.has-single-snack-image .snack-gallery-primary,
  .page-snack-detail.has-single-snack-image .snack-gallery-primary__list,
  .page-snack-detail.has-single-snack-image .snack-gallery-primary__item,
  .page-snack-detail.has-single-snack-image .snack-gallery-primary__item > a {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }

  .page-snack-detail .snack-gallery-primary__list > .snack-gallery-primary__item:only-child img,
  .page-snack-detail.has-single-snack-image .snack-gallery-primary__item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
  }

  /* Full-width mobile lightbox. */
  .page-snack-detail .w-lightbox-backdrop,
  .page-snack-detail .w-lightbox-container,
  .page-snack-detail .w-lightbox-content,
  .page-snack-detail .w-lightbox-view,
  .page-snack-detail .w-lightbox-figure {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .page-snack-detail .w-lightbox-image,
  .page-snack-detail .w-lightbox-image.is-portrait-image,
  .page-snack-detail
    .w-lightbox-content:not(.w-lightbox-group)
    .w-lightbox-image.is-landscape-image {
    width: auto;
    min-width: 0;
    max-width: 100vw;
    height: auto;
    min-height: 0;
    max-height: 100dvh;
    object-fit: contain;
  }

  .page-snack-detail .p5js-viewer {
    width: 100%;
    max-width: 100%;
  }

  /* Photography detail */
  .photography-detail-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    padding:
      var(--v12-safe-top)
      var(--page-gutter)
      calc(2rem + var(--v12-safe-bottom));
    overflow: visible;
  }

  .page-photography-detail > .photography-detail-layout {
    padding-right: var(--page-gutter);
  }

  .photography-detail__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .photography-detail__title-region,
  .photography-detail__summary,
  .photography-detail__byline {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .photography-detail__title-region {
    padding-bottom: 0;
  }

  .photography-detail__byline {
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: .5rem 1.5rem;
  }

  .photography-detail__byline .photography-meta {
    padding-bottom: 0;
  }

  .photography-detail__gallery-region,
  .page-photography-detail .photography-gallery {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    box-shadow: none;
    touch-action: pan-y;
  }

  .page-photography-detail .photography-gallery .photography-gallery__list {
    padding: 0;
    overflow: visible;
  }

  /* Use the core collection-page title line as the shared portrait baseline:
   * safe-area top from the canvas plus the existing 5vh content inset. */
  .collection-page {
    padding-top: var(--portrait-content-top-offset);
  }

  .home-layout > .home-hero {
    margin-top: var(--portrait-content-top-offset);
  }

  .about-layout > .about-scroll-container {
    padding-top: var(--portrait-content-top-offset);
  }

  .page-portfolio-detail
    .w-dyn-items
    > .w-dyn-item:first-child
    .portfolio-detail__image {
    margin-top: var(--portrait-content-top-offset);
  }

  .page-snack-detail > .content-layout > .snack-detail__header,
  .page-photography-detail .photography-detail__header {
    margin-top: var(--portrait-content-top-offset);
  }

  /* Full-viewport Figma/PDF pages have no site chrome, so make the embed the
   * stable viewport owner in both orientations. */
  .page-project-detail,
  .page-document {
    width: 100%;
    height: 100dvh !important;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden !important;
  }

  .page-project-detail .project-embed,
  .page-project-detail .project-embed iframe,
  .page-document .document-embed,
  .page-document .document-embed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    border: 0;
  }

  .site-record-footer {
    bottom: calc(
      var(--portrait-nav-height) + var(--v12-safe-bottom) + .5rem
    );
    padding: 0 .5rem;
  }
}

/* Narrow portrait phones use one content column and slightly tighter cards. */
@media screen and (orientation: portrait) and (max-width: 47.9375rem) {
  .snacks-list__items,
  .projects-list__items,
  .photography-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .snacks-list__items > .listing-card__item,
  .projects-list__items > .listing-card__item,
  .photography-list > .photography-list__item {
    width: 100%;
    padding-right: 0;
  }

  .page-snack-detail .snack-gallery-primary__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-photography-detail .photography-gallery .photography-gallery__item,
  .page-photography-detail .photography-gallery .photography-gallery__item.is-landscape,
  .page-photography-detail .photography-gallery .photography-gallery__item.is-portrait {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100%;
  }

  .about-resource-cards > .about-resource-card {
    flex-basis: 100%;
    min-width: 100%;
  }

  .about-resource-cards {
    flex-direction: column;
  }

  .home-portfolio-link {
    min-height: 21rem;
  }

  .project-bottom {
    margin-top: 3rem;
    padding: 2rem 1rem;
  }

  .project-bottom-title {
    font-size: clamp(1.75rem, 9vw, 3rem);
  }

  .project-bottom-smile {
    min-width: 0;
    font-size: clamp(3rem, 18vw, 5rem);
  }
}

@media screen and (orientation: portrait) and (max-width: 22.5rem) {
  :root {
    --portrait-nav-control: 2.375rem;
    --nav-control-size: 2.375rem;
    --portrait-nav-height: 3rem;
  }

  .site-nav,
  .site-nav.site-nav--home-position {
    min-height: var(--portrait-nav-height);
    padding: .25rem;
  }

  .site-nav.site-nav--home-position > .site-nav__inner,
  .site-nav__inner,
  .site-nav.site-nav--home-position .site-nav__links,
  .site-nav__links {
    gap: .125rem;
  }

  .site-nav__icon img {
    width: 1.4rem;
    height: 1.4rem;
  }
}

/* Landscape viewports keep the desktop visual grammar: a left rail,
 * parallel panels, and an internal content scroller. Tablets 768-991px
 * use the single proportional-scale adaptation at the end of this file;
 * tablets >=992px hit the original PC rules. */

/* Scroll remains available on collection pages, while the browser scrollbar
 * chrome stays out of the visual system. Portrait layouts scroll the document;
 * landscape layouts scroll their existing content pane. */
html:has(
  > body:is(
    .page-portfolio-index,
    .page-projects-index,
    .page-snacks-index,
    .page-photography-index,
    .page-about
  )
),
body:is(
  .page-portfolio-index,
  .page-projects-index,
  .page-snacks-index,
  .page-photography-index,
  .page-about
),
.page-portfolio-index .collection-scroll-container,
.page-projects-index .collection-scroll-container,
.page-snacks-index .collection-scroll-container,
.page-photography-index .collection-scroll-container,
.page-about .about-scroll-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html:has(
  > body:is(
    .page-portfolio-index,
    .page-projects-index,
    .page-snacks-index,
    .page-photography-index,
    .page-about
  )
)::-webkit-scrollbar,
body:is(
  .page-portfolio-index,
  .page-projects-index,
  .page-snacks-index,
  .page-photography-index,
  .page-about
)::-webkit-scrollbar,
.page-portfolio-index .collection-scroll-container::-webkit-scrollbar,
.page-projects-index .collection-scroll-container::-webkit-scrollbar,
.page-snacks-index .collection-scroll-container::-webkit-scrollbar,
.page-photography-index .collection-scroll-container::-webkit-scrollbar,
.page-about .about-scroll-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Landscape screens and portrait tablets share the desktop-like Home and
 * detail-page composition. */

/* Keep card elevation proportional on narrow portrait and compact landscape
 * viewports. Fixed desktop offsets otherwise make the painted shadow box much
 * larger than the card itself. */
@media screen and (max-width: 47.9375rem) {
  :root {
    --compact-shadow-offset: clamp(.1875rem, 1vmin, .5rem);
    --compact-shadow-blur: clamp(.3125rem, 1.5vmin, .75rem);
    --compact-shadow-soft-offset: clamp(.125rem, .7vmin, .3rem);
    --compact-shadow-soft-blur: clamp(.25rem, 1vmin, .625rem);
    --shadow-subtle:
      0 var(--compact-shadow-soft-offset) var(--compact-shadow-soft-blur)
      rgba(0, 0, 0, .06);
    --shadow-raised:
      calc(-1 * var(--compact-shadow-soft-offset))
      calc(-1 * var(--compact-shadow-soft-offset))
      var(--compact-shadow-soft-blur)
      rgba(255, 255, 255, .55),
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-blur)
      rgba(0, 0, 0, .08);
    --shadow-raised-inset:
      inset .0625rem .0625rem 0 rgba(255, 255, 255, .55),
      calc(-1 * var(--compact-shadow-soft-offset))
      calc(-1 * var(--compact-shadow-soft-offset))
      var(--compact-shadow-soft-blur)
      rgba(255, 255, 255, .55),
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-blur)
      rgba(0, 0, 0, .08);
    --shadow-overlay:
      0 var(--compact-shadow-soft-offset) var(--compact-shadow-blur)
      #00000033;
    --shadow-card-raised:
      inset .0625rem .0625rem 0 rgba(255, 255, 255, .55),
      calc(-1 * var(--compact-shadow-offset))
      calc(-1 * var(--compact-shadow-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      var(--compact-shadow-offset)
      var(--compact-shadow-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .12);
    --shadow-card-snack:
      var(--compact-shadow-offset)
      var(--compact-shadow-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .12),
      calc(-1 * var(--compact-shadow-offset))
      calc(-1 * var(--compact-shadow-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      inset .0625rem .0625rem 0 rgba(255, 255, 255, .55);
    --shadow-card-home-inset:
      inset calc(-1 * var(--compact-shadow-offset))
      calc(-1 * var(--compact-shadow-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      inset var(--compact-shadow-offset)
      var(--compact-shadow-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .08);
  }

  .page-home .home-card-grid {
    box-shadow:
      calc(-1 * var(--compact-shadow-offset))
      calc(-1 * var(--compact-shadow-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      var(--compact-shadow-offset)
      var(--compact-shadow-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .12);
  }

  .page-home .home-card-link {
    box-shadow: var(--shadow-raised-inset);
  }

  .page-home .home-intro__copy {
    box-shadow:
      inset calc(-1 * var(--compact-shadow-soft-offset))
      calc(-1 * var(--compact-shadow-soft-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      inset var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .08),
      inset .0625rem .0625rem .125rem rgba(255, 255, 255, .45),
      calc(-1 * var(--compact-shadow-offset))
      calc(-1 * var(--compact-shadow-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      var(--compact-shadow-offset)
      var(--compact-shadow-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .12);
  }

  .page-home .home-brand {
    box-shadow:
      inset var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .08),
      inset calc(-1 * var(--compact-shadow-soft-offset))
      calc(-1 * var(--compact-shadow-soft-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      calc(-1 * var(--compact-shadow-offset))
      calc(-1 * var(--compact-shadow-offset))
      var(--compact-shadow-blur)
      rgba(255, 255, 255, .55),
      var(--compact-shadow-offset)
      var(--compact-shadow-offset)
      var(--compact-shadow-blur)
      rgba(0, 0, 0, .12);
  }

  .page-about .about-hero-card__content {
    box-shadow:
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-offset)
      var(--compact-shadow-soft-blur)
      rgba(0, 0, 0, .18),
      calc(-1 * var(--compact-shadow-soft-offset))
      calc(-1 * var(--compact-shadow-soft-offset))
      var(--compact-shadow-soft-blur)
      rgba(255, 255, 255, .55),
      inset .0625rem .0625rem 0 rgba(255, 255, 255, .55);
  }

  /* 列表卡片 hover（窄屏）：跟随 compact 阴影尺寸加深 */
  .portfolio-card__link:hover .portfolio-card,
  .listing-card__link:hover .snack-card,
  .photography-card__link:hover {
    box-shadow:
      inset .0625rem .0625rem 0 rgba(255, 255, 255, .70),
      calc(-1 * var(--compact-shadow-offset))
      calc(-1 * var(--compact-shadow-offset))
      calc(var(--compact-shadow-blur) * 1.15)
      rgba(255, 255, 255, .70),
      var(--compact-shadow-offset)
      var(--compact-shadow-offset)
      calc(var(--compact-shadow-blur) * 1.15)
      rgba(0, 0, 0, .16);
  }

  /* 列表卡片 active（窄屏）：按压凹陷（须放在 hover 之后加载） */
  .portfolio-card__link:active .portfolio-card,
  .listing-card__link:active .snack-card,
  .photography-card__link:active {
    box-shadow: var(--shadow-inset);
  }
}

/* Phone landscape viewports (width <= 767px, or any landscape shorter than
 * 30rem) retain the desktop-sized navigation controls. If the screen is
 * unusually short, the rail itself scrolls without showing scrollbar chrome
 * instead of squeezing or removing destinations. Landscape tablets skip this
 * branch and use the desktop navigation. */


/* In portrait, the registration number belongs to the end of the document
 * instead of floating over the content. */
@media screen and (orientation: portrait) and (max-width: 47.9375rem) {
  body.page-home {
    display: block;
    height: auto !important;
    min-height: 100dvh;
    max-height: none !important;
    padding-bottom: 0;
    overflow-x: clip;
    overflow-y: auto !important;
  }

  .site-record-footer {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: .5rem var(--v12-safe-right) .5rem var(--v12-safe-left);
    transform: none;
  }
}

@media screen and (orientation: portrait) and (max-width: 47.9375rem) {
  .site-record-footer {
    padding-bottom: calc(
      var(--portrait-nav-height) + var(--v12-safe-bottom) + 1rem
    );
  }
}


/* Stable Home discovery panel. Content sizing is independent from the native
 * entrance motion, so animation never becomes part of the final layout. */
.page-home .home-hero,
.page-home .home-card-grid {
  opacity: 1 !important;
}

.page-home.home-entry-running .site-nav-region,
.page-home.home-entry-running .home-hero,
.page-home.home-entry-running .home-card-grid {
  will-change: translate;
}

.page-home .home-card-grid,
.page-home .home-card-grid * {
  box-sizing: border-box;
}

.page-home .home-card-grid,
.page-home .home-card-grid > *,
.page-home .home-card,
.page-home .home-card__copy,
.page-home .home-mini-card,
.page-home .home-mini-card__content,
.page-home .card-action-bar,
.page-home .card-action-bar__content {
  min-width: 0;
  max-width: 100%;
}

.page-home .home-card-grid > .home-card-link,
.page-home .home-card-grid > .home-mini-card-link {
  position: relative;
  overflow: visible;
}

.page-home .home-card-grid > .home-card-link:hover,
.page-home .home-card-grid > .home-card-link:focus-visible,
.page-home .home-card-grid > .home-mini-card-link:hover,
.page-home .home-card-grid > .home-mini-card-link:focus-visible {
  z-index: 2;
}

.page-home .home-card {
  min-height: 0;
  overflow: visible;
}

.page-home .home-card__copy {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page-home .home-card .card-action-bar {
  flex: 0 0 auto;
}

.page-home .home-mini-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(.625rem, 1.25vw, 1rem);
  overflow: hidden;
}

.page-home .home-mini-card__content {
  width: auto;
  overflow: hidden;
}

.page-home .home-mini-card__icon,
.page-home .card-action-bar__icon,
.page-home .card-action-bar__icon--compact {
  flex: 0 0 var(--home-jump-control-size);
}

.page-home .home-projects-title,
.page-home .home-snacks-title,
.page-home .home-photography-title,
.page-home .home-projects-description,
.page-home .home-snacks-description,
.page-home .home-photography-description,
.page-home .card-action-label--learn {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.page-home .home-projects-title,
.page-home .home-snacks-title,
.page-home .home-photography-title,
.page-home .card-action-label--learn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .home-card__copy .home-projects-description,
.page-home .home-card__copy .home-snacks-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.page-home .home-mini-card__content .home-photography-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Landscape tablets follow the desktop three-zone composition. The grid owns
 * every available pixel, so the hero and discovery panel no longer shrink or
 * push one another outside the viewport. */


/* Landscape home composition: every landscape viewport (desktop included)
 * keeps the full-height hero/card grid. Portrait tablets used to share this
 * branch; V1.4 removes that sharing, landscape-only remains. */
@media screen and (orientation: landscape) {
  .page-home {
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    overflow: hidden;
  }

  .page-home > .home-layout {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .page-home > .home-layout::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Keep the right-hand Home panel deterministic at every landscape width.
   * The former content-sized flex rows became uneven on short desktop screens. */
  .page-home .home-card-grid {
    display: grid;
    grid-template-rows:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(3.5rem, 9vh)
      minmax(3.5rem, 9vh);
    gap: clamp(.35rem, 1.2vh, .75rem);
    align-items: stretch;
    justify-content: stretch;
    padding: clamp(.625rem, 2vh, 1.875rem);
  }

  .page-home .home-card-link {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(.5rem, 1.5vh, 1rem) clamp(.625rem, 1.25vw, 1.5rem);
    overflow: hidden;
  }

  .page-home .home-mini-card-link {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(.4rem, 1.2vh, .75rem) clamp(.625rem, 1.5vw, 1.5rem);
  }

  .page-home .home-card {
    min-height: 0;
    gap: clamp(.35rem, 1vh, .625rem);
  }

  /* One width source keeps the closed Photograph selector and its expanded
   * panel aligned. The gallery gives back a small amount of right-side space. */
  .page-photography-detail .detail-toolbar {
    --photography-detail-menu-width: clamp(12.5rem, 15vw, 18rem);
  }

  .page-photography-detail .detail-dropdown {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: var(--photography-detail-menu-width);
  }

  .page-photography-detail .detail-dropdown__toggle,
  .page-photography-detail .photography-dropdown.w--open {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .page-photography-detail .photography-dropdown.w--open {
    right: 0;
    left: 0;
  }

  .page-photography-detail .detail-dropdown:has(.photography-dropdown.w--open)::after {
    right: 0;
    left: 0;
  }

  .page-photography-detail .detail-dropdown:has(.photography-dropdown.w--open) .detail-dropdown__toggle {
    transform: translateY(-.125rem);
  }

  .page-photography-detail .photography-detail__gallery-region {
    margin-right: clamp(1.5rem, 2vw, 2.5rem);
  }

  .page-photography-detail .photography-detail__header {
    flex: 0 0 clamp(18rem, 24vw, 36rem);
  }

  /* Landscape always keeps the desktop navigation rail. */
  .page-portfolio-index .site-nav-region-wide,
  .page-projects-index .site-nav-region-wide,
  .page-snacks-index .site-nav-region-wide,
  .page-about .site-nav-region {
    display: block !important;
  }

  .page-photography-index .photography-index-layout > .site-nav,
  .page-photography-detail .photography-detail-layout > .site-nav,
  .page-portfolio-detail .portfolio-detail-layout > .site-nav {
    display: flex !important;
  }
}

@media screen and (orientation: landscape) {
  .page-home .home-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      minmax(0, 2fr)
      minmax(0, 2fr)
      minmax(0, 1fr)
      minmax(0, 1fr);
    gap: clamp(.5rem, 1.2vh, .875rem);
    align-items: stretch;
    justify-items: stretch;
    min-height: 0;
  }

  .page-home .home-card-grid > .home-card-link {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .page-home .home-card-grid > .home-mini-card-link {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}



/* Every label in the discovery panel uses one horizontal origin. The primary
 * cards keep their action bars inset while their labels align with the two
 * compact cards below. */
.page-home .home-card-grid {
  --home-panel-spacing: clamp(.625rem, 2vh, 1.875rem);
  --home-panel-card-gutter: clamp(.625rem, 1.25vw, 1.5rem);
  --home-panel-text-inset: clamp(1rem, 2.75vw, 3rem);
  --home-panel-card-radius: clamp(1.5rem, 3vw, 3rem);
  gap: var(--home-panel-spacing);
  padding: var(--home-panel-spacing);
}

.page-home {
  --home-jump-control-size: clamp(44px, 4.5vh, 52px);
  --home-jump-icon-size: clamp(16px, 1.8vh, 20px);
}

.page-home .home-portfolio-title,
.page-home .home-projects-title,
.page-home .home-snacks-title,
.page-home .home-photography-title {
  font-family: Exo, "HarmonyOS Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}.page-home .home-card-grid > .home-mini-card-link {

  border-radius: var(--home-panel-card-radius);

}
.page-home .home-card-grid > .home-card-link{
  border-radius: var(--home-panel-card-radius);
  corner-shape: squircle;
}

.page-home .home-card-grid > .home-mini-card-link {
  border-radius: 999rem;
}

.page-home .home-card-grid > .home-card-link {
  padding-right: var(--home-panel-card-gutter);
  padding-left: var(--home-panel-card-gutter);
}

.page-home .home-card__copy {
  padding-top: clamp(.35rem, 1.2vh, .75rem);
  padding-right: 0;
  padding-left: calc(
    var(--home-panel-text-inset) - var(--home-panel-card-gutter)
  );
}

.page-home .home-card .card-action-bar {
  padding-left: 0;
  overflow: visible;
}

.page-home .home-card .card-action-bar__content {
  padding-left: calc(
    var(--home-panel-text-inset) - var(--home-panel-card-gutter)
  );
}

.page-home .home-card-grid > .home-mini-card-link {
  padding-right: var(--home-panel-card-gutter);
  padding-left: var(--home-panel-text-inset);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .site-nav-region,
  .page-home .home-hero,
  .page-home .home-card-grid {
    translate: none !important;
  }
}

@media screen and (orientation: portrait) and (max-width: 47.9375rem) {
  .page-home .home-card-grid {
    --home-panel-card-radius: clamp(1.25rem, 5vw, 2rem);
  }
}


/* Above Full HD, compact rows keep the height they have at 1920px instead of
 * following the taller 2K canvas. The two primary rows absorb the remainder. */
@media screen and (orientation: landscape) and (min-width: 120.0625rem) {
  .page-home .home-card-grid {
    grid-template-rows:
      minmax(0, 1fr)
      minmax(0, 1fr)
      128px
      128px;
  }
}

/* Navbar pages do not create a second bottom canvas. On mobile portrait the
 * dock owns its safe-area offset; the document and its outer layout end at
 * their real content boundary. */
.page-home > .home-layout,
.page-portfolio-index > .portfolio-index-layout,
.page-projects-index > .content-layout,
.page-snacks-index > .content-layout,
.page-photography-index > .photography-index-layout,
.page-about > .about-layout,
.page-portfolio-detail > .portfolio-detail-layout {
  margin-bottom: 0;
}

@media screen and (orientation: portrait) and (max-width: 47.9375rem) {
  :root {
    --portrait-nav-bottom-gap: max(.75rem, var(--v12-safe-bottom));
  }

  .page-home,
  .page-portfolio-index,
  .page-projects-index,
  .page-snacks-index,
  .page-photography-index,
  .page-about,
  .page-portfolio-detail {
    padding-bottom: 0;
  }

  .page-home > .home-layout,
  .page-portfolio-index > .portfolio-index-layout,
  .page-projects-index > .content-layout,
  .page-snacks-index > .content-layout,
  .page-photography-index > .photography-index-layout,
  .page-about > .about-layout,
  .page-portfolio-detail > .portfolio-detail-layout {
    padding-bottom: 0;
  }

  .home-layout > .site-nav-region,
  .portfolio-index-layout > .site-nav-region-wide,
  .content-layout > .site-nav-region-wide,
  .about-layout > .site-nav-region,
  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    bottom: var(--portrait-nav-bottom-gap);
  }
}

/* Keep the Photograph gallery flush with the viewport edge while restoring
 * the original depth treatment around the scrolling region. */
.page-photography-detail .photography-detail__gallery-region {
  margin-right: 0;
  box-shadow: var(--shadow-overlay);
}

/* Portfolio owns one explicit transparent end spacer. Remove the historical
 * padding and nested margins so the gap is revealed only at the scroll end. */
.page-portfolio-index .collection-scroll-container {
  padding-bottom: 0;
}

.page-portfolio-index .portfolio-card-grid,
.page-portfolio-index .portfolio-list,
.page-portfolio-index .portfolio-list__items {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* The grid must follow the list's real content height. A fixed 90vh flex box
 * places the end spacer at the nominal box edge while the cards overflow past
 * it, so the spacer is no longer the final scroll item. */
.page-portfolio-index .portfolio-card-grid {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

.page-portfolio-index .portfolio-scroll-spacer {
  flex: 0 0 10vh;
  align-self: stretch;
  width: 100%;
  height: 10vh;
  min-height: 10vh;
  background: transparent;
  pointer-events: none;
}

/* Tall landscape tablets reuse the desktop photography split view. The open
 * dropdown must shrink to its toolbar instead of keeping the desktop clamp
 * width (3108), otherwise the panel leaks into the gallery on narrower
 * landscape tablets (e.g. 1180x820). The title region has to stay inside the
 * header and the toolbar has to drop its desktop home-nav offset (62px via
 * --site-nav-home-offset), or the panel crosses the gallery edge. */

/* Collection card rows — placed last so they override any earlier block
 * that sets item width. Column counts: desktop 4 (3 for projects), phone 2,
 * compact phone 1. Tablets keep the desktop counts — the single tablet
 * adaptation scales them proportionally instead of re-flowing. Cards stretch
 * to the tallest item in their row; each page's list computes its own row
 * height. */
.snacks-list__items > .listing-card__item,
.projects-list__items > .listing-card__item,
.photography-list > .photography-list__item {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  align-self: stretch;
}

.snacks-list__items > .listing-card__item > .snack-card,
.projects-list__items > .listing-card__item > .project-card,
.photography-list > .photography-list__item > .photography-card__link {
  height: 100%;
}



@media screen and (max-width: 47.9375rem) {
  .snacks-list__items,
  .projects-list__items,
  .photography-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 29.9375rem) {
  .snacks-list__items,
  .projects-list__items,
  .photography-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
 * V1.4 tablet adaptation — ONE rule for 768-991px, both orientations.
 *
 * The tablet is not a new page: it is the original PC composition scaled
 * proportionally. The root font-size follows the viewport width (16px at the
 * 992px PC breakpoint, so the boundary is continuous and resizing stays
 * smooth), which scales every rem-based dimension of the desktop layout;
 * vw/vh units keep their own fluid behaviour. The nav rail keeps the exact
 * desktop slot on every page (same x / vertical-centre position), the
 * collection grids keep the desktop column counts, and the item spacing
 * stays the same single numbers as PC (2rem inline / 2.5rem block) — their
 * visual size follows the root scale, i.e. exactly the PC spacing scaled.
 * ========================================================================== */
@media screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  /* Proportional scale: 100% at 992px (PC entry), ~77% at 768px. */
  html {
    font-size: calc(16px * (100vw / 992px));
  }

  /* ---- Desktop composition (mirrors the >=62rem block so the tablet is
   * the PC page scaled, not a different page). ---- */
  .page-photography-detail .detail-toolbar,
  .page-snack-detail .detail-toolbar {
    margin-left: 5vw;
  }

  .page-photography-detail .detail-toolbar {
    margin-top: 25px;
  }

  /* Photography detail at tablet widths: the desktop toolbar offset and the
   * clamp-width dropdown would push the open panel past the gallery edge;
   * the toolbar sizes to the header and the panel matches its toggle,
   * exactly like the desktop landscape behaviour. */
  .page-photography-detail .photography-detail__title-region {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
  }

  .page-photography-detail .detail-toolbar {
    margin-left: 0;
  }

  /* The toolbar and its wrapper fill the title region so the flex dropdown
   * ends exactly at the header edge and the open panel never bleeds into
   * the gallery. */
  .page-photography-detail .photography-detail__title-region > div,
  .page-photography-detail .detail-toolbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page-photography-detail .detail-dropdown {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .page-photography-detail .detail-dropdown__toggle,
  .page-photography-detail .photography-dropdown.w--open {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .page-photography-detail .photography-dropdown.w--open {
    right: 0;
    left: 0;
  }

  /* Title text aligns with the toolbar, which starts at the header edge. */
  .page-photography-detail .photography-detail__summary {
    margin-left: 0;
  }

  .home-layout,
  .portfolio-index-layout,
  .content-layout,
  .photography-index-layout,
  .about-layout,
  .portfolio-detail-layout,
  .photography-detail-layout {
    padding-left: var(--site-nav-home-offset);
  }

  .home-layout > .site-nav-region,
  .portfolio-index-layout > .site-nav-region-wide,
  .content-layout > .site-nav-region-wide,
  .about-layout > .site-nav-region {
    flex: 0 0 calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    width: calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    height: 80vh;
    margin: 0 0 3.125rem;
  }

  .home-layout > .site-nav-region > .site-nav,
  .portfolio-index-layout > .site-nav-region-wide > .site-nav,
  .content-layout > .site-nav-region-wide > .site-nav,
  .about-layout > .site-nav-region > .site-nav,
  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    align-self: center;
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    height: 80vh;
    margin: 0;
  }

  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    flex: 0 0 calc(var(--nav-control-size) + (2 * var(--nav-bar-pad-x)));
    margin-bottom: 3.125rem;
  }

  /* The rail keeps its desktop width at every tablet resolution; the flex
   * parents must never squeeze it into a sliver. */
  .home-layout > .site-nav-region,
  .portfolio-index-layout > .site-nav-region-wide,
  .content-layout > .site-nav-region-wide,
  .about-layout > .site-nav-region,
  .photography-index-layout > .site-nav,
  .photography-detail-layout > .site-nav,
  .portfolio-detail-layout > .site-nav {
    flex-shrink: 0;
  }

  /* ---- Navigation guarantees (every resolution inside the range):
   * the five links stack top-to-bottom, "About me" pins to the container
   * bottom, and the whole column stays x-centered on the outer container.
   * Spacing uses rem so it scales with the root (2.5rem = the 40px base). */
  .site-nav,
  .site-nav.site-nav--home-position {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--nav-bar-pad-y) var(--nav-bar-pad-x);
  }

  .site-nav.site-nav--home-position > .site-nav__inner,
  .site-nav__inner {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: var(--nav-control-size);
    height: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .site-nav.site-nav--home-position .site-nav__links,
  .site-nav__links {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5rem;
    width: 100%;
  }

  .site-nav.site-nav--home-position .site-nav__links > *,
  .site-nav.site-nav--home-position > .site-nav__inner > *,
  .site-nav__links > *,
  .site-nav__inner > * {
    align-self: center;
  }

  /* Icons follow the scaled control size. The About icon uses the same 62%
   * of the control as the primary icons, so every icon in the rail has the
   * same visual size and sits perfectly centred in its control. */
  .site-nav__about-icon {
    width: calc(var(--nav-control-size) * .62);
    height: calc(var(--nav-control-size) * .62);
    min-width: calc(var(--nav-control-size) * .62);
    min-height: calc(var(--nav-control-size) * .62);
  }

  .site-nav__about-icon img {
    width: 100%;
    height: 100%;
  }

  /* ---- ONE item-spacing number: the same constants as PC. Their visual
   * size follows the root scale, so the spacing looks exactly like the PC
   * spacing scaled proportionally (2rem = 32px at 992px down to ~24.8px at
   * 768px, matching the page's own scale). ---- */
  :root {
    --collection-item-gap-inline: 2rem;
    --collection-item-gap-block: 2.5rem;
    /* The touch minimum must not exceed the scaled nav control, or the
     * buttons would widen past the rail centre. */
    --touch-target: 2.5rem;
  }

  /* ---- Portrait tablets keep the landscape home exactly like PC: the
   * viewport owns the canvas and the layout scrolls internally. ---- */
  .page-home {
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    overflow: hidden;
  }

  .page-home > .home-layout {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .page-home > .home-layout::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* ---- Snacks details with a right-side hero image: the desktop 100vh
   * figure overflows the tablet viewport (weapon / oil-painting pages), so
   * the right column takes a fixed 40% and the image scales to fit. The
   * 40% goes on the layout-level wrapper so the header keeps the rest. ---- */
  .page-snack-detail:has(.snack-gallery-secondary) .content-layout > div:has(> .snack-gallery-secondary) {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
  }

  .page-snack-detail:has(.snack-gallery-secondary) .snack-gallery-secondary {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  .page-snack-detail:has(.snack-gallery-secondary) .snack-gallery-secondary img {
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
  }

  /* The left column fills the remaining header width; its wrapper must
   * stretch instead of collapsing to the image width (the content column
   * uses align-items: flex-start). */
  .page-snack-detail:has(.snack-gallery-secondary) .snack-detail__content > div {
    flex: 1 1 auto;
    width: 100%;
  }

  .page-snack-detail:has(.snack-gallery-secondary) .snack-gallery-primary {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .page-snack-detail:has(.snack-gallery-secondary) .snack-gallery-primary__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
  }

  .page-snack-detail:has(.snack-gallery-secondary) .snack-gallery-primary__item {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* ---- Pure image-set pages (sketch / arduino-pandora) on tablets:
   * two-to-three column grid so 21 sketches don't become a single-column
   * long list; elegy (video aside) stays on its own single column. ---- */
  .page-snack-detail:not(:has(.snack-gallery-secondary)):not(:has(.snack-video-aside)) .snack-detail__content > div,
  .page-snack-detail:not(:has(.snack-gallery-secondary)):not(:has(.snack-video-aside)) .snack-gallery-primary {
    flex-flow: wrap;
    width: 100%;
  }

  .page-snack-detail:not(:has(.snack-gallery-secondary)):not(:has(.snack-video-aside)) .snack-gallery-primary__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1vh 1vw;
    width: 100%;
  }

  .page-snack-detail:not(:has(.snack-gallery-secondary)):not(:has(.snack-video-aside)) .snack-gallery-primary__item {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* ---- Snacks and photography index grids on tablets: three cards per
   * row (overrides the desktop four-column photography row). ---- */
  .page-snacks-index .snacks-list__items,
  .page-photography-index .photography-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* ---- ICP registration number ---- */
/* On every page with a navbar, the registration number sits at the very end
 * of the page's scroll container, after the last item, so it only appears
 * once the user scrolls to the bottom. The Home page keeps the fixed
 * bottom-centre chip instead. */
body:not(.page-home) .site-record-footer {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: .625rem 1rem 1.5rem;
  transform: none;
  pointer-events: none;
  text-align: center;
}

body:not(.page-home) .site-record-link {
  pointer-events: auto;
}

/* Link spacing follows the available rail height (vh-driven) so the six
 * controls always stay inside the desktop 80vh rail at ANY tablet height:
 * at normal heights the gap resolves to the same 2.5rem number, on short
 * landscape screens (e.g. 908x482, 968x462) it shrinks just enough. The
 * Home zones use the same trick for their desktop bottom margins so they
 * never push past the canvas. No height thresholds involved. */
@media screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .site-nav.site-nav--home-position .site-nav__links,
  .site-nav__links {
    gap: min(2.5rem, 4.5vh);
  }

  .page-home .home-hero,
  .page-home .home-card-grid {
    margin-bottom: min(50px, 8vh);
  }

  .page-home .site-nav-region {
    margin-bottom: min(3.125rem, 8vh);
  }
}

/* Narrow tablets (768-863px): one fewer item per row so cards keep a
 * readable size. Snacks and photography hold three per row per the tablet
 * grid above; projects keeps two. */
@media screen and (min-width: 48rem) and (max-width: 53.99rem) {
  .snacks-list__items,
  .photography-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .projects-list__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stable collection-card proportions.
 * A fixed media ratio and a two-line title slot prevent unusually tall
 * covers or long project names from changing an individual card's height. */
.page-projects-index .projects-list__items > .listing-card__item > .listing-card__link,
.page-snacks-index .snacks-list__items > .listing-card__item > .listing-card__link {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.page-projects-index .project-card,
.page-projects-index .project-card__content,
.page-snacks-index .snack-card,
.page-snacks-index .snack-card__inner {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}

.page-projects-index .project-card__media,
.page-snacks-index .snack-card__media {
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.page-projects-index .project-card__image,
.page-snacks-index .snack-card__image {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  display: block;
}

.page-projects-index .card-title,
.page-snacks-index .card-title {
  display: -webkit-box;
  width: 100%;
  height: 2.5em;
  min-height: 2.5em;
  max-height: 2.5em;
  margin-bottom: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.page-projects-index .snack-card__header,
.page-snacks-index .snack-card__header {
  box-sizing: border-box;
  width: 100%;
}

@media screen and (max-width: 29.9375rem) {
  .page-projects-index .project-bottom {
    flex-wrap: wrap;
  }

  .page-projects-index .project-bottom-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .page-projects-index .project-bottom-smile {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ============================================================
 * Language toggle in the bottom dock（2026-08-07 V4 定稿：纯文字
 * 方案）：dock 为横向布局，文字按钮改放 About 左侧，取消桌面
 * 纵向的 40px 下边距；文字尺寸略缩。
 */
@media screen and (max-width: 47.9375rem) {
  .site-nav__about {
    flex-direction: row;
    gap: .25rem;
  }

  .site-nav__lang-button {
    margin-bottom: 0;
    padding: .375rem .125rem;
  }

  .site-nav__lang-opt {
    font-size: .6875rem;
  }

  .site-nav__lang-sep {
    font-size: .625rem;
  }
}

/* ---- Short landscape screens (e.g. 820x371, 873x400): the 80vh rail
 * cannot fit five links plus the language toggle plus the About control,
 * so About spills past the rail bottom. Squeeze internal spacing here —
 * after the tablet block so these values win the cascade. ---- */
@media screen and (orientation: landscape) and (max-height: 480px) {
  .site-nav.site-nav--home-position .site-nav__links,
  .site-nav__links {
    gap: min(1.5rem, 2vh);
  }

  .site-nav__lang-button {
    margin-bottom: min(1.25rem, 2vh);
  }

  .site-nav {
    margin-bottom: 0;
  }
}

/* V2.1-corner-compensation : 半径×2.0 补偿 corner-shape 视觉差（仅支持 corner-shape 的浏览器生效） */
@supports (corner-shape: squircle) {
  @media screen and (orientation: portrait) and (max-width: 47.9375rem) {
    :root { --portrait-card-radius: clamp(3rem, 14vw, 6rem); }
  }
  .page-home .home-card-grid { --home-panel-card-radius: clamp(3rem, 6vw, 6rem); }
  @media screen and (orientation: portrait) and (max-width: 47.9375rem) {
    .page-home .home-card-grid { --home-panel-card-radius: clamp(2.5rem, 10vw, 4rem); }
  }

  .page-snack-detail .snack-dropdown .detail-dropdown__item:first-child,
.page-photography-detail .photography-dropdown .detail-dropdown__item:first-child { border-radius: 2rem 2rem 0 0; }
  .page-snack-detail .snack-dropdown .detail-dropdown__item:last-child,
.page-photography-detail .photography-dropdown .detail-dropdown__item:last-child { border-radius: 0 0 2rem 2rem; }
  .page-snack-detail .snack-dropdown .detail-dropdown__item:only-child,
.page-photography-detail .photography-dropdown .detail-dropdown__item:only-child { border-radius: 2rem; }
  .page-photography-detail .photography-dropdown.w--open { border-radius: 2rem; }
  .page-photography-detail .photography-dropdown .photography-dropdown__list { border-radius: 2rem; }
  @media screen and (max-width: 29.9375rem) {
  }
  @media screen and (orientation: portrait) and (max-width: 47.9375rem) {
    .home-card-link,
    .page-about .about-biography__intro { border-radius: clamp(2.5rem, 12vw, 5rem); }
    .portfolio-detail__image { border-radius: clamp(2rem, 8vw, 4rem); }
  }
}