/* Shared responsive layer for Cargo-exported pages */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --layout-left-pct: 20;
  --layout-right-pct: 80;
  --layout-left: calc(var(--layout-left-pct) * 1%);
  --layout-right: calc(var(--layout-right-pct) * 1%);
  --layout-breakpoint: 900px;
  --fluid-gap: clamp(12px, 1.8vw, 30px);

  /*
    Proportional scaling model:
    - Design canvas width: 2560px (your 27" design baseline)
    - Non-mobile widths always use proportional downscaling
    - Mobile uses stack layout switch handled by JS/CSS
  */
  --design-canvas-width: 2560;
  --desktop-proportional-base-size: 18.3072005859375px;
}

/*
  Full-page proportional scale for all non-mobile split layout:
  - Active whenever layout is split (>= mobile breakpoint)
  - Scales from design-canvas-width (2560) down as viewport gets narrower
  - Mobile stack mode (<900) does not use this scaling
*/
@media (min-width: 900px) {
  html[data-layout-resolved="split"] {
    --desktop-uniform-scale: min(1, calc(100vw / (var(--design-canvas-width) * 1px)));
    /*
      Compensate height while zooming:
      visual_height = layout_height * scale
      => layout_height should be viewport / scale
    */
    --viewport-height: calc(100vh / var(--desktop-uniform-scale)) !important;
    --min-viewport-height: calc(100vh / var(--desktop-uniform-scale)) !important;
  }

  html[data-layout-resolved="split"] body {
    zoom: var(--desktop-uniform-scale);
    min-height: var(--viewport-height) !important;
  }

  /*
    Critical fix:
    The left column is a fixed page in Cargo.
    If it keeps legacy fixed heights while body is zoomed, visual height shrinks and
    leaves white space at the bottom. Force compensated viewport height here.
  */
  html[data-layout-resolved="split"] [id="Z2290068486"].page.fixed,
  html[data-layout-resolved="split"] [id="Z2290068486"].page.fixed .page-layout,
  html[data-layout-resolved="split"] [id="Z2290068486"].page.fixed.allow-scroll .page-content {
    height: calc(100vh / var(--desktop-uniform-scale)) !important;
    min-height: calc(100vh / var(--desktop-uniform-scale)) !important;
    max-height: calc(100vh / var(--desktop-uniform-scale)) !important;
  }

  @supports not (zoom: 1) {
    html[data-layout-resolved="split"] body {
      transform: scale(var(--desktop-uniform-scale));
      transform-origin: top left;
      width: calc(100% / var(--desktop-uniform-scale));
      min-height: var(--viewport-height) !important;
    }
  }
}

.paired-emoji-heading .heading-emoji {
  font-size: 1em !important;
  line-height: 1 !important;
  display: inline-block;
  vertical-align: -0.08em;
}

/* Desktop split baseline */
html[data-layout-resolved="split"] [id="Z2290068486"] .page-layout {
  width: var(--layout-left) !important;
  max-width: var(--layout-left) !important;
  flex: 0 0 var(--layout-left) !important;
}

html[data-layout-resolved="split"] [id="E2038875726"] .page-layout {
  width: var(--layout-right) !important;
  max-width: var(--layout-right) !important;
  flex: 0 0 var(--layout-right) !important;
}

/* Mobile stack mode */
html[data-layout-resolved="stack"] .content {
  display: block;
}

html[data-layout-resolved="stack"] [id="Z2290068486"].page.pinned,
html[data-layout-resolved="stack"] [id="Z2290068486"].page.fixed,
html[data-layout-resolved="stack"] [id="Z2290068486"].page.pinned.fixed {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: auto !important;
}

html[data-layout-resolved="stack"] [id="Z2290068486"].page.fixed .page-layout,
html[data-layout-resolved="stack"] [id="Z2290068486"].page.fixed .page-content,
html[data-layout-resolved="stack"] [id="Z2290068486"].page.fixed.allow-scroll .page-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html[data-layout-resolved="stack"] [id="Z2290068486"] .page-layout,
html[data-layout-resolved="stack"] [id="E2038875726"] .page-layout {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

html[data-layout-resolved="stack"] [id="Z2290068486"] .page-content,
html[data-layout-resolved="stack"] [id="E2038875726"] .page-content {
  padding: var(--fluid-gap) !important;
}

html[data-layout-resolved="stack"] .pages {
  width: 100% !important;
  margin-top: 0 !important;
}

/* Mobile panel switch: show one column at a time */
html[data-layout-resolved="stack"][data-mobile-panel="work"] [id="E2038875726"].page {
  display: none !important;
}

html[data-layout-resolved="stack"][data-mobile-panel="practice"] [id="Z2290068486"].page {
  display: none !important;
}

html[data-layout-resolved="stack"] column-set > column-unit[slot] {
  --column-width: 100% !important;
  --resize-parent-width: 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
}

/* De-fix common hardcoded Cargo width chains */
[id="Z2290068486"] [style*="--resize-parent-width: 386.8125px"],
[id="Z2290068486"] [style*="--resize-parent-width:386.8125px"],
[id="E2038875726"] [style*="--resize-parent-width: 991.609375px"],
[id="E2038875726"] [style*="--resize-parent-width:991.609375px"],
[style*="--resize-parent-width: 1478.609375px"],
[style*="--resize-parent-width:1478.609375px"] {
  --resize-parent-width: 100% !important;
}

/* Slideshow/Media responsiveness */
gallery-slideshow {
  --slide-height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

gallery-slideshow > media-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  --resize-parent-width: 100% !important;
  --item-width: 100% !important;
  --slide-height: auto !important;
}

gallery-slideshow::part(slide) {
  width: 100% !important;
}

gallery-slideshow::part(slides) {
  --resize-parent-width: 100% !important;
}

media-item {
  max-width: 100% !important;
}

media-item::part(media) {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
}

/* Title icon normalization: enforce equal rendered height */
:root {
  --title-icon-height-base: clamp(2.6*1rem, 5.2*1vw, 4rem);
}

h1 > media-item[hash="R2100346931384200013622930675656"] {
  width: var(--title-icon-height-base) !important;
  max-width: var(--title-icon-height-base) !important;
  --resize-parent-width: var(--title-icon-height-base) !important;
  display: inline-flex !important;
  vertical-align: -0.06em !important;
  margin-left: 0.16em !important;
}

h1 > media-item[hash="V2100346931550220710286316640200"] {
  width: calc(var(--title-icon-height-base) * 0.64) !important;
  max-width: calc(var(--title-icon-height-base) * 0.64) !important;
  --resize-parent-width: calc(var(--title-icon-height-base) * 0.64) !important;
  display: inline-flex !important;
  vertical-align: -0.06em !important;
  margin-left: 0.16em !important;
}

h1 > media-item[hash="R2100346931384200013622930675656"]::part(media),
h1 > media-item[hash="V2100346931550220710286316640200"]::part(media) {
  object-fit: contain !important;
}

/* Hover map wrapper: remove hard cap that blocks responsive growth */
#img_wrapper {
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: 5 / 2;
}

/* Layout toggle button */
#layout-mode-toggle {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10050;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.82);
  font-family: var(--typo-latin-family, "Atkinson Hyperlegible"), sans-serif;
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

#layout-mode-toggle:active {
  opacity: 0.75;
}

/* Project drawer overlay (for the three "see more" links) */
.project-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.project-overlay-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20010;
  width: var(--layout-right, 80vw);
  max-width: 100vw;
  height: 100dvh;
  background: #ffffff;
  box-shadow: -16px 0 42px rgba(0, 0, 0, 0.14);
  transform: translateX(100%);
  transition: transform 260ms ease;
  overflow: visible;
}

.project-overlay-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

.project-overlay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000000;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-overlay-close:active {
  opacity: 0.7;
}

html.project-overlay-open .project-overlay-backdrop {
  opacity: 1;
  pointer-events: auto;
}

html.project-overlay-open .project-overlay-drawer {
  transform: translateX(0);
}

html[data-layout-resolved="stack"] .project-overlay-drawer {
  width: 100vw;
}

/* Global scrollbar style: match namecard-back minimal look */
html,
body,
.page.fixed.allow-scroll .page-content,
.overlay-content,
.project-overlay-drawer {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page.fixed.allow-scroll .page-content::-webkit-scrollbar,
.overlay-content::-webkit-scrollbar,
.project-overlay-drawer::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ==========================================
   Typography Control Center (single source)
   3 levels + 1 caption for all non-main-title text.
   Main titles (My Path / My Practice) are excluded.
   ========================================== */
:root {
  --typo-latin-family: "Atkinson Hyperlegible";
  --typo-uyghur-family: "Noto Sans Old Turkic";

  --typo-h1-size: 4rem;
  --typo-h1-size-mobile: 3.6rem;
  --typo-h1-weight: 400;
  --typo-h1-line: 1;
  --typo-h1-color: rgba(0, 0, 0, 0.75);

  --text-l1-size: 1.55rem;
  --text-l1-weight: 600;
  --text-l1-line: 1.25;
  --text-l1-color: rgba(0, 0, 0, 0.75);

  --text-l2-size: 1.15rem;
  --text-l2-weight: 450;
  --text-l2-line: 1.4;
  --text-l2-color: rgba(0, 0, 0, 0.75);

  --text-l3-size: 1rem;
  --text-l3-weight: 400;
  --text-l3-line: 1.5;
  --text-l3-color: rgba(0, 0, 0, 0.75);

  /* Large body copy: for long-form readable text blocks (esp. project overlays) */
  --text-body-lg-size: 2.66rem;
  --text-body-lg-weight: 430;
  --text-body-lg-line: 1.56;
  --text-body-lg-color: rgba(0, 0, 0, 0.78);

  --text-caption-size: 0.82rem;
  --text-caption-weight: 400;
  --text-caption-line: 1.35;
  --text-caption-color: rgba(0, 0, 0, 0.46);

  --typo-button-size: 1.4rem;
  --typo-button-weight: 540;
  --typo-button-line: 1.15;

  --typo-shop-size: 1.2rem;
  --typo-shop-weight: 400;

  --typo-audio-size: 1.2rem;
  --typo-audio-weight: 400;
}

body,
bodycopy,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9,
a,
button,
input,
textarea,
select,
.text-l1,
.text-l2,
.text-l3,
.text-caption {
  font-family: var(--typo-latin-family) !important;
}

.name-uyghur {
  font-family: var(--typo-uyghur-family), "Noto Sans Arabic" !important;
  font-variation-settings: normal !important;
}

/* Default body text => L3 */
bodycopy,
bodycopy p,
bodycopy li,
bodycopy span,
bodycopy a {
  font-size: var(--text-l3-size) !important;
  font-weight: var(--text-l3-weight) !important;
  line-height: var(--text-l3-line) !important;
  color: var(--text-l3-color) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

/* New unified classes */
.text-l1,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9 {
  font-size: var(--text-l1-size) !important;
  font-weight: var(--text-l1-weight) !important;
  line-height: var(--text-l1-line) !important;
  color: var(--text-l1-color) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

.text-l2 {
  font-size: var(--text-l2-size) !important;
  font-weight: var(--text-l2-weight) !important;
  line-height: var(--text-l2-line) !important;
  color: var(--text-l2-color) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

.text-l3 {
  font-size: var(--text-l3-size) !important;
  font-weight: var(--text-l3-weight) !important;
  line-height: var(--text-l3-line) !important;
  color: var(--text-l3-color) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

.text-body-lg {
  font-size: var(--text-body-lg-size) !important;
  font-weight: var(--text-body-lg-weight) !important;
  line-height: var(--text-body-lg-line) !important;
  color: var(--text-body-lg-color) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

.text-caption {
  font-size: var(--text-caption-size) !important;
  font-weight: var(--text-caption-weight) !important;
  line-height: var(--text-caption-line) !important;
  color: var(--text-caption-color) !important;
  letter-spacing: 0 !important;
  display: block !important;
  font-variation-settings: "slnt" 0, "MONO" 1 !important;
}

/* Namecard back text follows gan3042-subtitle typography, keeps white color */
.namecard-back-text {
  margin: 0;
  font-family: var(--typo-latin-family) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

.namecard-back-text * {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Auto-apply large body copy to drawer-loaded project overlay documents only */
html.project-overlay-frame-doc bodycopy,
html.project-overlay-frame-doc bodycopy p,
html.project-overlay-frame-doc bodycopy li,
html.project-overlay-frame-doc bodycopy span,
html.project-overlay-frame-doc bodycopy a,
html.project-overlay-frame-doc .text-l3 {
  font-size: var(--text-body-lg-size) !important;
  font-weight: var(--text-body-lg-weight) !important;
  line-height: var(--text-body-lg-line) !important;
  color: var(--text-body-lg-color) !important;
}

/* Keep homepage two main titles unchanged */
#Z2290068486 h1[data-copy-key="shared.home.left.title"],
#E2038875726 h1[data-copy-key="shared.home.right.title"] {
  margin: 0 !important;
  font-size: var(--typo-h1-size) !important;
  font-weight: var(--typo-h1-weight) !important;
  line-height: var(--typo-h1-line) !important;
  color: var(--typo-h1-color) !important;
}

.mobile #Z2290068486 h1[data-copy-key="shared.home.left.title"],
.mobile #E2038875726 h1[data-copy-key="shared.home.right.title"] {
  font-size: var(--typo-h1-size-mobile) !important;
}

bodycopy a {
  text-decoration: underline !important;
}

h1 a,
h2 a,
.text-caption a {
  color: inherit !important;
  text-decoration: none !important;
}

.name-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: clamp(0.2rem, 0.8vw, 0.8rem);
}

.name-row .name-item {
  white-space: nowrap;
  min-width: 0;
}

/* Home-left specific: keep these two headings at same level as "gan studio" h2 */
#Z2290068486 h2.home-left-writing-heading,
#Z2290068486 h2.home-left-gan-project-heading {
  font-size: var(--text-l1-size) !important;
  font-weight: var(--text-l1-weight) !important;
  line-height: var(--text-l1-line) !important;
  color: var(--text-l1-color) !important;
}

#Z2290068486 h2.home-left-writing-heading *,
#Z2290068486 h2.home-left-gan-project-heading * {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.button-1,
.button-1-1 {
  font-size: var(--typo-button-size) !important;
  font-weight: var(--typo-button-weight) !important;
  line-height: var(--typo-button-line) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

shop-product {
  font-family: var(--typo-latin-family), sans-serif !important;
  font-size: var(--typo-shop-size) !important;
  font-weight: var(--typo-shop-weight) !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}

audio-player {
  font-family: var(--typo-latin-family), sans-serif !important;
  font-size: var(--typo-audio-size) !important;
  font-weight: var(--typo-audio-weight) !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  font-variation-settings: "slnt" 0, "MONO" 0 !important;
}
/* ===== merged-from-index-page ===== */
/* ===== static-css ===== */
html:has(body.editing)::-webkit-scrollbar{display:none !important}body.editing::-webkit-scrollbar{display:none !important}html:has(body.editing){-ms-overflow-style:none;scrollbar-width:none}body.editing{-ms-overflow-style:none;scrollbar-width:none}body.wf-initial-load *,html.wf-initial-load *{color:transparent !important;-webkit-text-stroke:0px transparent;text-shadow:0 0 transparent}html.wf-initial-load hr{background:none !important}body{--baseColor-accent: #FF0000;--baseColor-accent-rgb: 255, 0, 0;--baseColor-accent-reverse-rgb: 255, 255, 255}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:focus{outline:0}select,select *{text-rendering:auto !important}html,body{min-height:var(--viewport-height, 100vh);margin:0;padding:0}html{--mobile-scale: 1;font-size:var(--base-size);touch-action:manipulation;position:relative}html.mobile{font-size:calc(var(--base-size)*var(--mobile-scale))}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;display:flex;flex-direction:column;width:100%;min-height:var(--viewport-height, 100vh);justify-content:flex-start;margin:0;padding:0;background-color:#fff}body.no-scroll{overflow:hidden}customhtml>*{position:relative;z-index:10}.page a.active,bodycopy * a{text-decoration-color:unset;-webkit-text-decoration-color:unset}.content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:100%;position:relative;flex-grow:1;border-color:transparent;border-width:0}.pages{width:100%;flex:1 0 auto}@supports(height: 100svh){.page.stacked-page:not(.fixed){--viewport-height: 100svh}.page.stacked-page+.page.stacked-page:not(.fixed){--viewport-height: 100vh}body.mobile .content:has(.stacked-page) .page.pinned.overlay:not(.fixed){--viewport-height: 100svh}}.overlay-content{mix-blend-mode:var(--overlay-mix, normal)}.page{--split-backdrop-height: calc(var(--min-viewport-height) / 2);--split-content-height: calc(var(--viewport-height) - var(--split-backdrop-height));position:relative;display:flex;justify-content:center;flex-wrap:nowrap;flex-direction:row;max-width:100%;width:100%;flex:0;mix-blend-mode:var(--page-mix, normal)}.page.has-backdrop-filter{background-color:rgba(0, 0, 0, 0.01);backdrop-filter:var(--page-backdrop-filter, none);-webkit-backdrop-filter:var(--page-backdrop-filter, none)}.overlay-content .page{mix-blend-mode:unset}.overlay-content .page::after{content:" ";display:block;position:fixed;width:100dvw;height:100dvh;top:0;left:0;z-index:-1}.overlay-content.is-passthrough-overlay .page::after{display:none}.mobile .page{flex-wrap:wrap}.page.overlay{position:absolute}.page.pinned-top,.page.pinned-bottom{flex:0;z-index:2;left:0;right:0}.page.pinned-bottom{transform:unset}.page.pinned-bottom.loading{will-change:transform;transform:translate(0, 0, 0)}.page.pinned-top{top:0}.page.pinned-bottom{bottom:0}.page.fixed{position:fixed;max-height:var(--viewport-height, 100vh)}.page.fixed .page-layout{max-height:var(--viewport-height, 100vh)}.page.fixed.allow-scroll .page-content{max-height:var(--viewport-height, 100vh);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden}.page.fixed.allow-scroll .page-content{pointer-events:auto}.page.fixed.allow-scroll .page-content::-webkit-scrollbar{width:0;background:0 0;display:none}.page.overlay{position:absolute}.page.overlay,.page.overlay .page-layout,.page.fixed,.page.fixed .page-layout{pointer-events:none}body.editing .page.overlay .page-content,body.editing .page.overlay .page-content *,body.editing .page.fixed .page-content,body.editing .page.fixed .page-content *,body.editing .page.fixed.allow-scroll .page-content,body.editing .page.fixed.allow-scroll .page-content *,body.editing .page:not([editing=true]){-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}body.editing .page.overlay[editing=true] .page-content,body.editing .page.overlay[editing=true] .page-content *,body.editing .page.fixed[editing=true] .page-content,body.editing .page.fixed[editing=true] .page-content *,body.editing .page.fixed.allow-scroll[editing=true] .page-content,body.editing .page.fixed.allow-scroll[editing=true] .page-content *{pointer-events:auto;-moz-user-select:auto;-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}.page.fixed .page-content bodycopy a,.page.overlay .page-content bodycopy a,.page.fixed .page-content bodycopy img,.page.overlay .page-content bodycopy img,.page.fixed .page-content bodycopy iframe,.page.overlay .page-content bodycopy iframe,.page.fixed .page-content bodycopy video,.page.overlay .page-content bodycopy video,.page.fixed .page-content bodycopy audio,.page.overlay .page-content bodycopy audio,.page.fixed .page-content bodycopy input,.page.overlay .page-content bodycopy input,.page.fixed .page-content bodycopy button,.page.overlay .page-content bodycopy button,.page.fixed .page-content bodycopy audio-player,.page.overlay .page-content bodycopy audio-player,.page.fixed .page-content bodycopy shop-product,.page.overlay .page-content bodycopy shop-product,.page.fixed .page-content bodycopy details,.page.overlay .page-content bodycopy details,.page.overlay .page-content bodycopy .linked,.page.overlay .page-content bodycopy .zoomable,.page.fixed .page-content bodycopy .linked,.page.fixed .page-content bodycopy .zoomable,.page.fixed .page-content bodycopy gallery-slideshow,.page.overlay .page-content bodycopy gallery-slideshow{pointer-events:auto}.page-layout{flex-grow:1;position:relative;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:0%;mix-blend-mode:var(--page-layout-mix, normal)}.page-content{display:flex;flex-direction:row;height:100%;align-items:flex-start;border-color:transparent;border-width:0;width:100%;filter:var(--page-content-filter, none);-webkit-filter:var(--page-content-filter, none)}.page-content.has-content-backdrop-filter{backdrop-filter:var(--page-content-backdrop-filter, none);-webkit-backdrop-filter:var(--page-content-backdrop-filter, none)}.page-content.has-content-backdrop-filter:has(.empty-editor)::before{content:" ";display:block;height:1px;width:1px;overflow:hidden;position:absolute;top:0;left:0;background:rgba(0, 0, 0, 0.01)}.page.accepts-pointer-events *,.page-content.accepts-pointer-events,.page-content.accepts-pointer-events *{pointer-events:auto}[position=fixed]{position:fixed;overflow-y:auto;overflow-x:hidden;max-height:100vh;pointer-events:none}[position=fixed] bodycopy{pointer-events:auto}[position=absolute]{position:absolute}[position=relative]{position:relative}.top-pins [position=fixed],.top-pins [position=absolute]{top:0;left:0;right:0;z-index:999}.bottom-pins [position=fixed],.bottom-pins [position=absolute]{bottom:0;left:0;right:0;z-index:999}h1,h2,h3,h4,h5,h6,h7,h8,h9{contain:layout}.caption-background h1,.caption-background h2,.caption-background h3,.caption-background h4,.caption-background h5,.caption-background h6,.caption-background h7,.caption-background h8,.caption-background h9{contain:none}.overlay-content{position:fixed;inset:0;pointer-events:none;max-height:100dvh;--viewport-height: 100dvh;overflow:auto;--elastic-scroll: true}body.has-scrollable-overlay .content media-item::part(iframe),body.has-scrollable-overlay .content .behind-top-scrollable-overlay media-item::part(iframe){pointer-events:none;z-index:-1000}body.has-scrollable-overlay .overlay-content.top-overlay media-item::part(iframe){pointer-events:auto;z-index:unset}.overlay-content::-webkit-scrollbar{display:none}.overlay-content .page-layout{min-height:fit-content}.overlay-content .page,.overlay-content .page-content,.overlay-content .page-layout{pointer-events:auto}.overlay-content.is-passthrough-overlay .page,.overlay-content.is-passthrough-overlay .page-layout{pointer-events:none}.overlay-content.is-passthrough-overlay .page-content{pointer-events:auto}.overlay-content.is-content-passthrough-overlay .page,.overlay-content.is-content-passthrough-overlay .page-layout,.overlay-content.is-content-passthrough-overlay .page-content,.overlay-content.is-content-passthrough-overlay .page-content bodycopy{pointer-events:none}.overlay-content.is-content-passthrough-overlay .page-content bodycopy>*:not(column-set),.overlay-content.is-content-passthrough-overlay .page-content bodycopy column-unit *{pointer-events:auto}body.editing .overlay-content .page[editing=true] bodycopy,body.editing .overlay-content .page[editing=true] bodycopy>*{pointer-events:auto}.overlay-content.overlay-animating{--scroll-transition: unset!important;overflow:hidden}.overlay-content.overlay-open.overlay-animating .page{will-change:opacity,background-color;animation:overlayOpen var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-open .page:has(.has-content-backdrop-filter):not(:has(.backdrop)){will-change:background-color;animation:overlayOpenWithoutOpacity var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-close.overlay-animating .page{will-change:opacity,background-color;animation:overlayClose var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.overlay-close .page:has(.has-content-backdrop-filter):not(:has(.backdrop)){will-change:background-color;animation:overlayCloseWithoutOpacity var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.overlay-open.overlay-animating .page-content{will-change:transform,clip-path;animation:overlayOpenContent var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-open.overlay-animating .page-content.has-content-backdrop-filter{will-change:transform,clip-path,opacity;animation:overlayOpenContent var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out"),overlayOpenOpacity var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-close.overlay-animating .page-content{will-change:transform,clip-path;animation:overlayCloseContent var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.overlay-close.overlay-animating .page-content.has-content-backdrop-filter{will-change:transform,clip-path,opacity;animation:overlayCloseContent var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out"),overlayCloseOpacity var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.touch-overscroll-transform .page-content{transform:var(--touch-overscroll-transform, translate(0px, 0px)) !important}@keyframes scrollAnimationFadeIn-1{0%{opacity:0}15%{opacity:1}}@keyframes scrollAnimationFadeIn-2{0%{opacity:0}22.5%{opacity:1}100%{opacity:1}}@keyframes scrollAnimationFadeIn-3{0%{opacity:0}38%{opacity:1}100%{opacity:1}}@keyframes scrollAnimationFadeOut-1{85%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeOut-2{0%{opacity:1}77.5%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeOut-3{0%{opacity:1}65%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeInOut-1{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeInOut-2{0%{opacity:0}20%{opacity:1}82.5%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeInOut-3{0%{opacity:0}30%{opacity:1}75%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFlyIn-1{0%{transform:translateY(5vh)}15%{transform:scale(1)}85%{transform:scale(1)}100%{transform:scale(1)}}@keyframes scrollAnimationFlyIn-2{0%{transform:translateY(10vh)}30%{transform:scale(1)}70%{transform:scale(1)}100%{transform:scale(1)}}@keyframes scrollAnimationFlyIn-3{0%{transform:translateY(20vh)}35%{transform:scale(1)}65%{transform:scale(1)}100%{transform:scale(1)}}@keyframes scrollAnimationFlyInFadeIn-1{0%{opacity:.4;transform:translateY(25px)}50%{opacity:1;transform:translateY(0px)}}@keyframes scrollAnimationFlyInFadeIn-2{0%{opacity:0;transform:translateY(50px)}50%{opacity:1;transform:translateY(0vh)}}@keyframes scrollAnimationFlyInFadeIn-3{0%{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0vh)}}@keyframes scrollAnimationFlyOut-1{35%{transform:scale(1)}85%{transform:scale(1)}100%{transform:translateY(-5vh)}}@keyframes scrollAnimationFlyOut-2{35%{transform:scale(1)}70%{transform:scale(1)}100%{transform:translateY(-10vh)}}@keyframes scrollAnimationFlyOut-3{35%{transform:scale(1)}65%{transform:scale(1)}100%{transform:translateY(-20vh)}}@keyframes scrollAnimationFlyInOut-1{0%{transform:translateY(5vh)}35%{transform:scale(1)}85%{transform:scale(1)}100%{transform:translateY(-5vh)}}@keyframes scrollAnimationFlyInOut-2{0%{transform:translateY(10vh)}35%{transform:scale(1)}70%{transform:scale(1)}100%{transform:translateY(-10vh)}}@keyframes scrollAnimationFlyInOut-3{0%{transform:translateY(20vh)}35%{transform:scale(1)}65%{transform:scale(1)}100%{transform:translateY(-20vh)}}@keyframes scrollAnimationBlurIn-1{0%{filter:blur(5px)}10%{filter:blur(5px)}30%{filter:blur(0px)}}@keyframes scrollAnimationBlurIn-2{0%{filter:blur(8px)}12.5%{filter:blur(8px)}35%{filter:blur(0px)}}@keyframes scrollAnimationBlurIn-3{0%{filter:blur(13px)}15%{filter:blur(13px)}40%{filter:blur(0px)}}@keyframes scrollAnimationScaleInOut-1{0%{transform:scale(0.875);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 50%}100%{transform:scale(0.875);transform-origin:50% 100%}}@keyframes scrollAnimationScaleInOut-2{0%{transform:scale(0.6);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 50%}100%{transform:scale(0.6);transform-origin:50% 100%}}@keyframes scrollAnimationScaleInOut-3{0%{transform:scale(0.4);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 50%}100%{transform:scale(0.4);transform-origin:50% 100%}}@keyframes scrollAnimationScaleIn-1{0%{transform:scale(0.875);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 0%}100%{transform:scale(1);transform-origin:50% 0%}}@keyframes scrollAnimationScaleIn-2{0%{transform:scale(0.6);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 0%}100%{transform:scale(1);transform-origin:50% 0%}}@keyframes scrollAnimationScaleIn-3{0%{transform:scale(0.4);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 0%}100%{transform:scale(1);transform-origin:50% 0%}}@keyframes scrollAnimationScaleOut-1{0%{transform:scale(1);transform-origin:50% 100%}50%{transform:scale(1);transform-origin:50% 100%}100%{transform:scale(0.875);transform-origin:50% 100%}}@keyframes scrollAnimationScaleOut-2{0%{transform:scale(1);transform-origin:50% 100%}50%{transform:scale(1);transform-origin:50% 100%}100%{transform:scale(0.6);transform-origin:50% 100%}}@keyframes scrollAnimationScaleOut-3{0%{transform:scale(1);transform-origin:50% 100%}50%{transform:scale(1);transform-origin:50% 100%}100%{transform:scale(0.4);transform-origin:50% 100%}}@keyframes scrollAnimationHelix-1{0%{transform:perspective(4000px) rotatey(35deg) rotatez(1.5deg)}100%{transform:perspective(4000px) rotatey(-35deg) rotatez(-1.5deg)}}@keyframes scrollAnimationHelix-2{0%{transform:perspective(3000px) rotatey(60deg) rotatez(2deg)}100%{transform:perspective(3000px) rotatey(-60deg) rotatez(-2deg)}}@keyframes scrollAnimationHelix-3{0%{transform:perspective(2000px) rotatey(90deg) rotatez(3deg)}100%{transform:perspective(2000px) rotatey(-90deg) rotatez(-3deg)}}@keyframes scrollAnimationConveyor-1{0%{transform:perspective(2500px) translateZ(25em) rotateX(45deg)}40%{transform:perspective(2500px) rotateX(0deg)}100%{transform:perspective(2500px) rotateX(0deg)}}@keyframes scrollAnimationConveyor-2{0%{transform:perspective(2400px) translateZ(30em) rotateX(60deg)}50%{transform:perspective(2400px) rotateX(0deg)}100%{transform:perspective(2400px) rotateX(0deg)}}@keyframes scrollAnimationConveyor-3{0%{transform:perspective(2300px) translateZ(45em) rotateX(85deg)}60%{transform:perspective(2300px) rotateX(0deg)}100%{transform:perspective(2300px) rotateX(0deg)}}@keyframes scrollAnimationRebound-1{0%{transform:perspective(2100px) translateZ(-30em) rotateX(50deg);transform-origin:50% 100%}47%{transform:perspective(2100px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(2100px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(2100px) translateZ(-30em) rotateX(-50deg);transform-origin:50% 0%}}@keyframes scrollAnimationRebound-2{0%{transform:perspective(1800px) translateZ(-50em) rotateX(70deg);transform-origin:50% 100%}47%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1800px) translateZ(-50em) rotateX(-70deg);transform-origin:50% 0%}}@keyframes scrollAnimationRebound-3{0%{transform:perspective(1300px) translateZ(-70em) rotateX(90deg);transform-origin:50% 100%}47%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1300px) translateZ(-70em) rotateX(-90deg);transform-origin:50% 0%}}@keyframes scrollTransitionFadeUp-1{0%{opacity:0;transform:translateY(25px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionFadeUp-2{0%{opacity:0;transform:translateY(40px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionFadeUp-3{0%{opacity:0;transform:translateY(50px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionScaleUp-1{0%{opacity:0;transform:scale(0.95)}25%{opacity:1;transform:scale(1)}}@keyframes scrollTransitionScaleUp-2{0%{opacity:0;transform:scale(0.875)}25%{opacity:1;transform:scale(1)}}@keyframes scrollTransitionScaleUp-3{0%{opacity:0;transform:scale(0.75)}25%{opacity:1;transform:scale(1)}}@keyframes scrollAnimationTwistUp-1{0%{opacity:0;transform:translateY(25px) rotateY(27deg) rotateZ(1.5deg) perspective(4000px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollAnimationTwistUp-2{0%{opacity:0;transform:translateY(40px) rotateY(35deg) rotateZ(2deg) perspective(3000px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollAnimationTwistUp-3{0%{opacity:0;transform:translateY(65px) rotateY(40deg) rotateZ(3deg) perspective(2000px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionBlurIn-1{0%{filter:blur(5px);transform:scale(0.992)}25%{filter:blur(0px);transform:scale(1)}}@keyframes scrollTransitionBlurIn-2{0%{filter:blur(8px);transform:scale(0.992)}25%{filter:blur(0px);transform:scale(1)}}@keyframes scrollTransitionBlurIn-3{0%{filter:blur(13px);transform:scale(0.992)}25%{filter:blur(0px);transform:scale(1)}}@keyframes scrollTransitionColorIn-1{0%{filter:saturate(50%)}32%{filter:saturate(100%)}}@keyframes scrollTransitionColorIn-2{0%{filter:saturate(25%)}32%{filter:saturate(100%)}}@keyframes scrollTransitionColorIn-3{0%{filter:saturate(0%)}32%{filter:saturate(100%)}}@keyframes scrollTransitionRebound-1{0%{transform:perspective(1500px) translateZ(0em) rotateX(30deg);transform-origin:50% 100%;opacity:0}25%{transform:perspective(1500px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%;opacity:1}}@keyframes scrollTransitionRebound-2{0%{transform:perspective(1800px) translateZ(-50em) rotateX(70deg);transform-origin:50% 100%}47%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1800px) translateZ(-50em) rotateX(-70deg);transform-origin:50% 0%}}@keyframes scrollTransitionRebound-3{0%{transform:perspective(1300px) translateZ(-70em) rotateX(90deg);transform-origin:50% 100%}47%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1300px) translateZ(-70em) rotateX(-90deg);transform-origin:50% 0%}}@keyframes LooseHinge-1{0%{transform:rotate(5deg);transform-origin:0% 0%}50%{transform:rotate(0deg);transform-origin:50% 50%}100%{transform:rotate(5deg);transform-origin:100% 100%}}@keyframes LooseHinge-2{0%{transform:rotate(10deg);transform-origin:0% 0%}50%{transform:rotate(0deg);transform-origin:50% 50%}100%{transform:rotate(10deg);transform-origin:100% 100%}}@keyframes LooseHinge-3{0%{transform:rotate(30deg);transform-origin:0% 0%}50%{transform:rotate(0deg);transform-origin:50% 50%}100%{transform:rotate(30deg);transform-origin:100% 100%}}@keyframes overlayOpen{from{opacity:var(--overlay-open-from-opacity, 1);background-color:var(--overlay-open-from-background-color, transparent)}to{opacity:1}}@keyframes overlayOpenWithoutOpacity{from{background-color:var(--overlay-open-from-background-color, transparent)}}@keyframes overlayOpenOpacity{from{opacity:var(--overlay-open-from-opacity, 1)}to{opacity:1}}@keyframes overlayOpenContent{from{transform:var(--overlay-open-content-from-transform, translate3d(0, 0, 0));clip-path:var(--overlay-open-content-from-clip-mask, inset(0% 0% 0% 0%))}to{transform:translate3d(0, 0, 0);clip-path:var(--overlay-open-content-to-clip-mask, inset(0% 0% 0% 0%))}}@keyframes overlayClose{to{opacity:var(--overlay-close-to-opacity, 1);background-color:var(--overlay-close-to-background-color, transparent)}}@keyframes overlayCloseWithoutOpacity{to{background-color:var(--overlay-close-to-background-color, transparent)}}@keyframes overlayCloseOpacity{to{opacity:var(--overlay-close-to-opacity, 1)}}@keyframes overlayCloseContent{from{transform:translate3d(0, 0, 0);clip-path:var(--overlay-close-content-from-clip-mask, inset(0% 0% 0% 0%))}to{transform:var(--overlay-close-content-to-transform, translate3d(0, 0, 0));clip-path:var(--overlay-close-content-to-clip-mask, inset(0% 0% 0% 0%))}}.backdrop{contain:layout}.has-backdrop-filter .backdrop-contents::after{backdrop-filter:var(--page-backdrop-filter, none);-webkit-backdrop-filter:var(--page-backdrop-filter, none);position:absolute;width:100%;height:100%;content:"";inset:0;z-index:1;pointer-events:none}.backdrop:not(.clip){-webkit-transform:translate(0px, 0px)}.backdrop>.backdrop-contents{transition:opacity .5s ease-in-out;opacity:0;top:0;bottom:0;width:100%;position:sticky;height:100%;max-height:100vh;overflow:hidden}.backdrop-contents.loaded{opacity:1}.backdrop.clip .backdrop-contents.above,.backdrop.clip .backdrop-contents.below{display:none}.backdrop.clip .backdrop-contents{will-change:display,opacity,transform,clip-path}.backdrop>.backdrop-contents [data-backdrop]{height:100%}.backdrop.clip{contain:none;overflow:hidden;clip-path:inset(0% 0% 0% 0%)}.clip>.backdrop-contents{height:calc(100vh + .5px);width:var(--backdrop-width, 100%);position:fixed}.backdrop{flex-shrink:0;width:100%;order:1;position:absolute;top:0;left:0;right:0;bottom:0}.wallpaper-navigation{position:absolute;inset:var(--pin-padding-top, 0) 0 var(--pin-padding-bottom, 0) 0;z-index:10;pointer-events:none !important;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;max-width:100%;width:100%;flex:0}.wallpaper-navigation .page-content,.wallpaper-navigation .page-layout{background:none;background-color:transparent;visibility:hidden}.wallpaper-navigation .backdrop.clip{contain:none;overflow:hidden;clip-path:inset(0% 0% 0% 0%)}.wallpaper-navigation .backdrop.clip>.wallpaper-slideshow{position:fixed}.wallpaper-navigation .wallpaper-slideshow{top:0;bottom:0;position:sticky;transform:translate3d(0, 0, 0);height:calc(100% + .5px);max-height:calc(var(--viewport-height, 100vh) + .5px)}::part(slideshow-nav){transition:opacity 222ms ease-in-out;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;--button-size: 30px;--button-inset: 20px;--button-icon-color: rgba(255, 255, 255, 0.9);--button-icon-scale: 1;--button-icon-stroke-width: 1.5px;--button-icon-stroke-linecap: butt;--button-background-color: rgba(87, 87, 87, 0.35);--button-background-radius: 50%;--button-active-opacity: 0.7}::part(slideshow-nav-previous-button){pointer-events:auto;cursor:pointer;position:absolute;top:0;left:0;bottom:0}::part(slideshow-nav-next-button){pointer-events:auto;cursor:pointer;position:absolute;top:0;right:0;bottom:0}::part(slideshow-nav-close-button){pointer-events:auto;cursor:pointer;position:absolute;top:0;right:0}::part(slideshow-nav-prev){position:absolute;top:0;bottom:0;left:var(--button-inset, 0px);margin:auto;width:36px;height:36px}::part(slideshow-nav-next){position:absolute;top:0;bottom:0;right:var(--button-inset, 0px);margin:auto;width:36px;height:36px;transform:scaleX(-1)}::part(slideshow-nav-close){position:absolute;top:var(--button-inset, 0px);right:var(--button-inset, 0px);margin:auto;width:36px;height:36px}::part(slideshow-nav-prev),::part(slideshow-nav-next),::part(slideshow-nav-close){height:var(--button-size);width:var(--button-size)}::part(slideshow-nav-previous-button):active,::part(slideshow-nav-next-button):active,::part(slideshow-nav-close-button):active{opacity:var(--button-active-opacity, 0.7)}::part(slideshow-nav-background){stroke:none !important;fill:var(--button-background-color);rx:var(--button-background-radius)}::part(slideshow-nav-arrow),::part(slideshow-nav-x){fill:none !important;stroke:var(--button-icon-color);stroke-width:var(--button-icon-stroke-width);stroke-linecap:var(--button-icon-stroke-linecap);transform:scale(var(--button-icon-scale));transform-origin:center}bodycopy{display:block;contain:layout;word-wrap:break-word;position:relative;max-width:100%;width:100%;-webkit-nbsp-mode:normal;--font-scale: 1}bodycopy *{border-width:0}a{color:inherit}a.image-link,a.image-link:hover,a.image-link:active,a.icon-link,a.icon-link:hover,a.icon-link:active{border-bottom:none;text-decoration:none}[contenteditable=true] a:active,[contenteditable=true] .linked:active,[contenteditable=true] .zoomable:active{opacity:1}s *{text-transform:inherit}small{max-width:100%;text-decoration:inherit}b,strong{font-weight:bolder}.small-caps{font-variant:small-caps;text-transform:lowercase}.no-wrap{white-space:nowrap}.page_background{position:absolute;top:0;left:0;width:100%;height:100%}media-item::part(placeholder){border:1px solid rgba(0, 0, 0, 0.15) !important;overflow:hidden}media-item::part(placeholder-svg){background:#fff;display:block;width:100%;height:100%}media-item::part(placeholder-line){stroke:rgba(0, 0, 0, 0.1) !important}media-item::part(placeholder-rect){fill:rgba(0, 0, 0, 0.05);height:100%;width:100%}media-item .caption.empty{display:none}.tag-separator:before{content:", "}media-item[drag=true]::part(media),[contenteditable=true] iframe{pointer-events:none}column-set+*{--gutter-expand: 1}gallery-grid+*{--gutter-expand: 1}gallery-columnized+*{--gutter-expand: 1}gallery-justify+*{--gutter-expand: 1}media-item+*{--gutter-expand: 1}column-unit>*:first-child{--gutter-expand: 0}marquee-set h1,marquee-set h2,marquee-set h3,marquee-set h4,marquee-set h5,marquee-set h6,marquee-set h7,marquee-set h8,marquee-set h9{vertical-align:text-bottom;display:inline-block}marquee-set{pointer-events:auto}gallery-slideshow media-item figcaption.caption{display:var(--display-slideshow-captions, none);transform:var(--slideshow-caption-transform, translateX(0px));opacity:var(--slideshow-caption-opacity, 0);text-align:var(--slideshow-caption-align);transition-property:opacity;transition-duration:var(--slideshow-caption-transition-duration, 0.1s);will-change:opacity,transform;position:relative}gallery-slideshow media-item::part(sizing-frame){margin:auto 0;flex-grow:0}gallery-slideshow media-item::part(frame){display:flex;flex-wrap:wrap;width:var(--item-width);height:var(--slide-height);align-content:var(--slideshow-vertical-align);align-self:var(--slideshow-horizontal-align)}body>media-item[no-component]{all:unset !important;border:none !important;padding:0 !important;position:fixed !important;z-index:5000 !important;pointer-events:none !important;background:none !important;inset:0 !important;overflow:hidden !important}body.slideshow-scrub-dragging *{cursor:ew-resize !important}button#edit.edit{appearance:none;-webkit-appearance:none;border:none;cursor:pointer;font-size:var(--fontSize-default);font-family:var(--fontFamily-default);padding:0;text-align:left;white-space:nowrap;background:transparent;display:flex;margin:0;border-radius:3px 0 0 3px;pointer-events:auto;position:fixed;top:50%;transform:translate(0, -50%);right:400px;height:36px;width:12px;z-index:999;cursor:pointer;background-color:rgba(140, 140, 140, 0.4);padding-left:2px;margin-right:5px;width:20px;cursor:pointer;margin:0;right:0}button#edit.edit:active{opacity:.7;user-select:none}button#edit.edit svg{padding:0;width:16px;height:36px;margin-left:2px;opacity:1}button#edit.edit svg path{fill:#fff}.quick-view{--font-scale: 1;--resize-parent-width: unset;width:80%;height:80%;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;padding:5rem;padding-top:5rem;padding-right:5rem;padding-bottom:5rem;padding-left:5rem;display:flex;z-index:5001;transform:translateZ(999px);position:fixed;top:0;left:0;right:0;bottom:0;-webkit-text-size-adjust:100%;-ms-touch-action:none;touch-action:none;line-height:initial;letter-spacing:initial}.quick-view .caption{font-size:clamp(14.5px,var(--font-scale, 1)*var(--font-size, 14.5px),2.4rem)}.quick-view-frame{position:relative;display:flex;height:100%;width:100%}.quick-view-content{height:100%;width:auto}.quick-view-background{backdrop-filter:var(--quick-view-backdrop-filter, none);-webkit-backdrop-filter:var(--quick-view-backdrop-filter, none);transition:backdrop-filter .2s ease}.quick-view.quick-view-navigation{display:block;z-index:5002;position:fixed;inset:0;pointer-events:none;transform:translateZ(999px)}.quick-view::part(slideshow-nav){transition:opacity 222ms ease-in-out;position:absolute;z-index:99;inset:0;pointer-events:none}.pagination-watcher{pointer-events:none;height:1px;margin-top:-1px;width:100%}html,body{overflow-anchor:none}.colorfilter-color,.colorfilter-base{position:absolute;inset:0;pointer-events:none}.colorfilter-color{z-index:9995;display:block;background-color:var(--colorfilter-color, #FF0000);mix-blend-mode:var(--colorfilter-mix, lighten);opacity:var(--colorfilter-color-opacity, 0)}.colorfilter-base{display:block;backdrop-filter:grayscale(clamp(0, var(--colorfilter-grayscale, 0), var(--colorfilter-color-opacity, 0))) brightness(var(--colorfilter-brightness, 1)) contrast(var(--colorfilter-contrast, 1)) invert(var(--colorfilter-invert, 0));-webkit-backdrop-filter:grayscale(clamp(0, var(--colorfilter-grayscale, 0), var(--colorfilter-color-opacity, 0))) brightness(var(--colorfilter-brightness, 1)) contrast(var(--colorfilter-contrast, 1)) invert(var(--colorfilter-invert, 0));z-index:9994}#editor-overlay.safari,.colorfilter-base.safari,.colorfilter-color.safari,#cargo-dotsite.safari{transform:translateZ(0px);animation:loopTranslate .5s steps(2, end) infinite}@keyframes loopTranslate{0%{transform:translateZ(0px)}50%{transform:translateZ(1px)}100%{transform:translateZ(0px)}}.flying-object{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;overflow:hidden}.flying-object media-item{position:fixed;top:0;left:0}.flying-object,.flying-object *{user-select:none;pointer-events:none !important}body.audio-player-dragging,body.audio-player-dragging audio-player,body.audio-player-dragging *{cursor:ew-resize}audio-player[browser-default=true]{padding:unset;margin:unset;outline:unset;background:unset;border:unset;transform:unset;height:unset;position:relative;display:inline-block}audio-player::part(button){background:transparent;cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;display:inline-flex;width:.7em;contain:layout}audio-player::part(separator){height:100%}audio-player::part(buffer){height:100%}audio-player::part(time-bar){height:100%;display:flex;justify-content:space-between;align-content:center;margin:auto 0;width:0%;flex-grow:1;height:100%}audio-player::part(progress){background:transparent;height:100%}audio-player::part(play-icon),audio-player::part(pause-icon){fill:currentColor;cursor:pointer;width:100%;height:auto}audio-player::part(label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;user-select:none;margin:auto auto auto 0;flex:0 3 auto;min-width:0;width:100%}audio-player::part(total-time){flex:0 1 auto;margin:auto 0}audio-player::part(current-time),audio-player::part(play-text){flex:0 1 auto;margin:auto 0}audio-player::part(stream-anim):before{content:"Streaming"}audio-player::part(stream-anim){user-select:none;margin:auto auto auto 0}audio-player::part(buffer),audio-player::part(current-time),audio-player::part(note-svg),audio-player::part(play-text),audio-player::part(separator),audio-player::part(total-time){user-select:none;pointer-events:none}audio-player::part(buffer),audio-player::part(play-text),audio-player::part(progress){position:absolute}audio-player::part(time-bar),audio-player::part(button),audio-player::part(current-time),audio-player::part(note-icon),audio-player::part(pause),audio-player::part(play),audio-player::part(total-time){position:relative}audio-player::part(progress-indicator){border:1px solid currentColor;cursor:ew-resize;height:100%;right:0;position:absolute}audio-player{border:var(--border-lines);margin-bottom:.5em;overflow:hidden}audio-player::part(time-bar){background:var(--background-color)}audio-player::part(label),audio-player::part(current-time),audio-player::part(total-time){color:var(--text-color)}audio-player::part(play-icon),audio-player::part(pause-icon){fill:var(--icon-color, currentColor)}audio-player::part(separator){width:0px;background:none}audio-player::part(buffer){background:var(--buffer-background-color)}audio-player::part(progress){background:var(--progress-background-color)}audio-player::part(progress-indicator){border-top:0;border-bottom:0;border-left:0;border-right-width:2px}audio-player::part(button){height:100%;display:inline-flex;align-self:center;background:var(--background-color)}audio-player::part(button):after{color:var(--text-color)}audio-player[status=stopped]::part(button):after,audio-player:not([status])::part(button):after{content:var(--play-text)}audio-player[status=playing]::part(button):after{content:var(--pause-text)}audio-player::part(play-icon),audio-player::part(pause-icon){height:var(--icon-size, 1em);width:auto}audio-player::part(label),audio-player::part(stream-anim),audio-player::part(current-time),audio-player::part(total-time){padding:var(--text-padding)}shop-product{font-size:1.2rem;max-width:22rem;width:100%;position:relative;display:block}shop-product::part(price){line-height:1.1;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit}shop-product::part(dropdown){width:100%;background:transparent;line-height:normal;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;display:inline-block;-webkit-appearance:none;border:0;outline:0}shop-product::part(button){line-height:normal;cursor:pointer;display:inline-block;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}shop-product::part(button):active{opacity:.7}a[rel=show-cart][show-count]:after{counter-reset:variable var(--cart-item-count);content:" (" counter(variable) ")";display:var(--cart-item-count-display, none)}.cargodotsite{position:fixed;bottom:1rem;right:1.4rem;mix-blend-mode:difference;z-index:9999;opacity:.2;cursor:pointer}.mobile .cargodotsite{bottom:.4rem;right:1rem}.cargodotsite:active{opacity:.14}.dl-duplicate{position:fixed;bottom:1rem;right:1.4rem;z-index:9999;cursor:pointer}.mobile .dl-duplicate{bottom:.4rem;right:1rem}.dl-duplicate:active{opacity:.7}

/* ===== customhtml-inline-style ===== */
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-style: normal;
  src: url("https://freight.cargo.site/m/I2100363636276017819076425783240/ZenMaruGothic-Black.woff") format("woff");
}

html {
	--mobile-scale: 1.22;
	--mobile-padding-offset: 0.29;
}

body {
	--swatch-1: rgba(0, 0, 0, 0.85);
	--swatch-2: rgba(0, 0, 0, 0.75);
	--swatch-3: rgba(0, 0, 0, 0.6);
	--swatch-4: rgba(0, 0, 0, 0.4);
    --swatch-5: rgba(0, 0, 0, 0.25);
	--swatch-6: #000000;
	--swatch-7: #a7b748;
}


a:active,
.linked:active,
.zoomable::part(media):active {
	opacity: 0.7;
}

.page a.active {
	color: rgba(0, 0, 0, 0.4);
}

sub {
	position: relative;
	vertical-align: baseline;
	top: 0.3em;
}

sup {
	position: relative;
	vertical-align: baseline;
	top: -0.4em;
}

.small-caps {
	font-variant: small-caps;
    text-transform: lowercase;
}

ol {
	margin: 0;
	padding: 0 0 0 2.5em;
	list-style-type: decimal-leading-zero;
}

ul {
	margin: 0;
	padding: 0 0 0 2.0em;
}

ul.lineated {
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin: 0 0 0 3em;
	text-indent: -3em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.6) !important;
	border: 0 !important;
	height: 1px !important;
	display: block !important;
}

.content {
	border-color: rgba(0,0,0,.85);
}


media-item .caption {
	margin-top: .5em;
}

gallery-grid .caption,
gallery-columnized .caption,
gallery-justify .caption {
	margin-bottom: 2em;
}


[thumbnail-index] .caption .tags {
	margin-top: 0.25em;
}

.page {
	justify-content: flex-start;
}

.page-content {
	padding: 3rem;
	text-align: left;
}

.mobile [id] .page-layout {
	max-width: 100%;
}

.page-layout {
	align-items: flex-start;
	max-width: 100%;
}

media-item::part(media) {
	border: 0;
	padding: 0;
}

.quick-view {
	height: 100%;
	width: 100%;
	padding: 3rem;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}

.quick-view-background {
	background-color: #ffffff;
}

.quick-view .caption {
	color: rgba(255, 255, 255, 1.0);
	padding: 20px 0;
	text-align: center;
	transition: 100ms opacity ease-in-out;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.quick-view .caption-background {
	padding: 0.5rem 1rem;
	display: inline-block;
	background: rgba(0, 0, 0, 0.5);
	border-radius: .5rem;
	text-align: left;
	max-width: 50rem;
}

.mobile .quick-view {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 10px;
}

.mobile .quick-view .caption {
	padding: 10px 0;
}

.bottom {
	--text-style: "bottom";
	font-size: 1.60rem;
	font-weight: 200;
	color: rgba(255, 255, 255, 0.75);
	font-style: normal;
	line-height: 0.5;
	letter-spacing: 0.025em;
	display: inline-block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.bottom a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}


.button-1 {
	--text-style: "button 1";
	font-size: 1.4rem;
	font-weight: 540;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0em;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	color: rgb(255, 255, 255);
	background: #027aff;
	display: inline-block;
	border-color: rgba(0, 0, 0, 0.1);
	border-style: solid;
	border-width: 0.1rem;
	border-radius: 0.6rem;
	padding-top: 0.6rem;
	padding-right: 1.2rem;
	padding-bottom: 0.6rem;
	padding-left: 1.2rem;
	filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15));
	will-change: filter;
}

.button-1 a {
	color: #ffffff;
	text-decoration: none;
}


.button-1 a.active {
	color: #ffffff;
	text-decoration: none;
}

.button-1-1 {
	--text-style: "button 1-1";
	font-size: 1.4rem;
	font-weight: 540;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0em;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	color: rgb(255, 255, 255);
	background: #027aff;
	display: inline-block;
	border-color: rgba(0, 0, 0, 0.1);
	border-style: solid;
	border-width: 0.1rem;
	border-radius: 0.6rem;
	padding-top: 0.6rem;
	padding-right: 1.2rem;
	padding-bottom: 0.6rem;
	padding-left: 1.2rem;
	filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15));
	will-change: filter;
}

.button-1-1 a {
	color: #ffffff;
	text-decoration: none;
}


.button-1-1 a.active {
	color: #ffffff;
	text-decoration: none;
}

.button-10 a.active {
	color: #ffffff;
	text-decoration: none;
}

.button-11 a.active {
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
}

.button-12 a.active {
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
}

.button-13 a.active {
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
}

.button-14 a.active {
	color: #ffffff;
	text-decoration: none;
}

.button-15 a.active {
	color: #ffffff;
	text-decoration: none;
}

.body-light {
	--text-style: "body light";
	font-size: 1.10rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0em;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.body-light a {
	color: rgba(0, 0, 0, 0.75);
	text-decoration: none;
}


.head1 {
	--text-style: "head1";
	font-size: 4.80rem;
	font-weight: 900;
	color: rgba(0, 0, 0, 0.75);
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0;
	display: block;
}

.head1 a {
	color: rgba(0, 0, 0, 0.75);
	text-decoration: underline;
}


.captionwork {
	--text-style: "Caption_work";
	font-size: 1.10rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.42);
	font-style: normal;
	line-height: 1.3;
	letter-spacing: 0;
	display: block;
	font-variation-settings: 'slnt' 0;
}

.captionwork a {
	color: rgba(0, 0, 0, 0.42);
	text-decoration: underline;
}


.bodywork {
	--text-style: "body_work";
	font-size: 1.4rem;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.75);
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0.010em;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.bodywork a {
	color: rgba(0, 0, 0, 0.75);
	text-decoration: underline;
}


.ccc {
	--text-style: "ccc";
	font-size: 1.4rem;
	font-weight: 540;
	color: rgba(0, 0, 0, 0.42);
	font-style: normal;
	line-height: 1.15;
	letter-spacing: -0.023em;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.ccc a {
	color: rgba(0, 0, 0, 0.42);
	text-decoration: underline;
}


.bbb {
	--text-style: "bbb";
	font-size: 1.4rem;
	font-weight: 300;
	color: #000000;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0em;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.bbb a {
	color: #000000;
	text-decoration: underline;
}


.captionr {
	--text-style: "captionr";
	font-size: 1.4rem;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.75);
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.captionr a {
	color: rgba(0, 0, 0, 0.75);
	text-decoration: underline;
}


.bodyminimove {
	--text-style: "bodyminimove";
	font-size: 1.4rem;
	font-weight: 540;
	color: rgba(0, 0, 0, 0.75);
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0em;
	display: block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.bodyminimove a {
	color: rgba(0, 0, 0, 0.75);
	text-decoration: underline;
}


.r1 {
	--text-style: "r1";
	font-size: 1.4rem;
	font-weight: 540;
	color: #000000;
	font-style: normal;
	line-height: 2.25;
	letter-spacing: 0em;
	display: inline-block;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.r1 a {
	color: #000000;
	text-decoration: underline;
	text-decoration-color: #5151f6;
}


.mobile .quick-view .caption-background {
	max-width: 100vw;
}

::part(slideshow-nav) {
	--button-size: 30px;
	--button-inset: 20px;
	--button-icon-color: rgba(255, 255, 255, 0.9);
	--button-icon-stroke-width: 1.5px;
	--button-icon-stroke-linecap: none;
	--button-background-color: rgba(87, 87, 87, 0.35);
	--button-background-radius: 50%;
	--button-active-opacity: 0.7;
}

gallery-slideshow::part(slideshow-nav) {
	--button-inset: 15px;
}



.mobile ::part(slideshow-nav) {
	--button-inset: 10px;
}

.mobile .quick-view::part(slideshow-nav) {
	--button-inset: 25px;
}

shop-product {
	font-size: 1.2rem;
	max-width: 22rem;
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	letter-spacing: 0em;
	margin-bottom: 1em;
}

shop-product::part(price) {
	color: rgba(0, 0, 0, 0.75);
	line-height: 1.1;
	margin-bottom: 0.5em;
}

shop-product::part(dropdown) {
	width: 100%;
	color: rgba(0, 0, 0, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: rgba(255, 255, 255, 0.0);
	background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);
	background-repeat: no-repeat;
	background-position: top 0em right .1em;
	line-height: 1.2;
	padding: 0.58em 2em 0.55em 0.9em;
	border-radius: 10em;
	margin-bottom: 0.5em;
}

shop-product::part(button) {
	background: rgba(0, 0, 0, 0.15);
	color: rgba(0, 0, 0, 0.75);
	text-align: left;
	line-height: normal;
	padding: 0.5em 1em;
	cursor: pointer;
	border-radius: 10em;
}

shop-product::part(button):active {
	opacity: .7;
}

audio-player {
	--text-color: rgba(0, 0, 0, 0.85);
	--text-padding: 0 1.2em 0 1.0em;
	--background-color: rgba(255, 255, 255, 0);
	--buffer-background-color: rgba(0, 0, 0, 0.03);
	--progress-background-color: rgba(0, 0, 0, 0.075);
	--border-lines: 1px solid rgba(0, 0, 0, 0.2);
	font-size: 1.2rem;
	width: 32rem;
	height: 2.75em;
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	line-height: normal;
	letter-spacing: 0em;
	margin-bottom: 0.5em;
	border-radius: 10em;
}

audio-player::part(button) {
	--icon-color: rgba(0, 0, 0, 0.85);
	--icon-size: 32%;
	--play-text: '';
	--pause-text: '';
	width: 3.15em;
	display: inline-flex;
	justify-content: center;
	cursor: pointer;
}

audio-player::part(play-icon) {
	padding-left: 0.6em;
}

audio-player::part(pause-icon) {
	padding-left: 0.4em;
}

audio-player::part(progress-indicator) {
	border-right: 1px solid rgba(0, 0, 0, 0);
	height: 100%;
	cursor: ew-resize;
}

audio-player::part(separator) {
	border-right: var(--border-lines);
}

body.mobile audio-player {
	max-width: 100%;
}

/* 默认光标 */
:root {
  --cursor-open-url: url('./assets/eye.svg');
  --cursor-closed-url: url('./assets/eyeclosed.svg');
  --cursor-pointer-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ctext x='2' y='27' font-size='26'%3E%F0%9F%91%88%3C/text%3E%3C/svg%3E");
  --cursor-progress-url: url('https://freight.cargo.site/t/original/i/A2103424951318756654295118354376/.png');
  --cursor-current-url: var(--cursor-open-url);
}

body {
  cursor: var(--cursor-current-url) 16 16, default !important;
}

/* 可点击元素的光标 */
a, button {
  cursor: var(--cursor-pointer-url) 16 16, pointer;
}

/* 加载中状态的光标 */
body.loading {
  cursor: var(--cursor-progress-url) 16 16, progress;
}

/* 自定义组件光标 */
media-item {
  cursor: var(--cursor-current-url) 16 16, default;
}

/* 如果元素具有 "linked" ?,??? pointer 光标 */
media-item.linked {
  cursor: var(--cursor-pointer-url) 16 16, pointer;
}

/* ===== link-styles ===== */
a.caption { color: rgba(0, 0, 0, 0.4); text-decoration: none; }
a.bottom { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
a.button-1,
a.button-1-1 { color: rgb(255, 255, 255); text-decoration: none; }
a.active.button-1,
a.active.button-1-1,
a.active.button-10,
a.active.button-14,
a.active.button-15 { color: rgb(255, 255, 255); text-decoration: none; }
a.active.button-11,
a.active.button-12,
a.active.button-13 { color: rgba(0, 0, 0, 0.85); text-decoration: none; }
a.body-light { color: rgba(0, 0, 0, 0.75); text-decoration: none; }
a.head1 { color: rgba(0, 0, 0, 0.75); text-decoration: underline; }
a.captionwork { color: rgba(0, 0, 0, 0.42); text-decoration: underline; }
a.bodywork { color: rgba(0, 0, 0, 0.75); text-decoration: underline; }
a.ccc { color: rgba(0, 0, 0, 0.42); text-decoration: underline; }
a.bbb { color: rgb(0, 0, 0); text-decoration: underline; }
a.captionr { color: rgba(0, 0, 0, 0.75); text-decoration: underline; }
a.bodyminimove { color: rgba(0, 0, 0, 0.75); text-decoration: underline; }
a.r1 { color: rgb(0, 0, 0); text-decoration: underline rgb(81, 81, 246); }

/* ===== page-Z2290068486 ===== */
[id="Z2290068486"] .page-layout {
	max-width: var(--layout-left);
	align-items: flex-end;
	padding: 0.0rem;
}

[id="Z2290068486"].page {
    
/* 图片容器 */
#img_wrapper {
  position: relative;
  width: 100%;
  max-height: 500px;;
  overflow: hidden;
}

/* 默认图片样式 */
#default {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 悬浮区域 */
.hover_area {
  position: absolute;
  width: 30%; /* 定义悬浮区域宽度 */
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(237, 191, 191, 0.1); /* 半透明背景辅助定位 */
  z-index: 3;
  transition: background-color 0.3s ease;
}

.hover_area:hover {
  background-color: rgba(237, 191, 191, 0.3);
}

#popup_container {
  position: fixed;
  top: 0;
  right: 0;
  width: 0; /* 默认隐藏 */
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  z-index: 5;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row; /* 垂直排列图片 */
  justify-content: space-evenly;
  align-items: center;
  transition: width 0.4s ease; /* 弹出动画 */
}

/* 弹出图片样式 */
#popup_container img {
  width: auto;
  height: 10%; /* 确保九张图片均分高度 */
  animation: float 2s infinite ease-in-out alternate; /* 上下浮动效果 */
}

/* 上下浮动关键帧动画 */
@keyframes float {
  0% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(5px);
  }
}
}

[id="Z2290068486"] .page-content {
	background-color: #f2f2f2;
}

/* Home-left "gan studio" block: merge original two columns into one vertical flow */
[id="Z2290068486"] column-set:has(h2[data-copy-key="shared.home.left.gan.heading"]) {
  --columns-gutter: 0px !important;
}

[id="Z2290068486"] column-set:has(h2[data-copy-key="shared.home.left.gan.heading"]) > column-unit[slot] {
  --column-width: 100% !important;
  --resize-parent-width: 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}
#mini_moves {
  position: relative;
  width: 100%;
  overflow: visible;
}

#su {
  position: relative;
  width: 100%;
  overflow: visible;
}

#sss {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* Keep source preview content in DOM but hidden from flow; shown via floating hover panel in JS */
#mi_content,
#su_content,
#sss_content {
  display: none !important;
}

#project-hover-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: min(36rem, 46vw);
  max-height: min(74vh, 44rem);
  overflow: auto;
  box-sizing: border-box;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  z-index: 12020;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 120ms ease;
}

#project-hover-preview.is-visible {
  opacity: 1;
}

#project-hover-preview .project-hover-body > :first-child {
  margin-top: 0 !important;
}

#project-hover-preview .project-hover-body {
  display: grid;
  gap: 0.6rem;
}

#project-hover-preview .project-hover-image,
#project-hover-preview img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

#project-hover-preview::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ===== page-A2913784058 ===== */
[id="A2913784058"].page {
	justify-content: flex-start;
	min-height: var(--viewport-height);
    --page-backdrop-filter: blur(0.1rem);
}

[id="A2913784058"] .page-content {
	text-align: left;
	padding: 3rem;
	align-items: center;
	padding-left: 0rem;
}

[id="A2913784058"] .page-layout {
	max-width: 100%;
	align-items: center;
}

/* ===== page-E2038875726 ===== */
[id="E2038875726"] .page-content {
	background-color: #ffffff;
	align-items: flex-start;
}

[id="E2038875726"] .page-layout {
	--page-layout-mix: normal;
	max-width: var(--layout-right);
}

[id="E2038875726"].page {
	min-height: var(--viewport-height);
	justify-content: flex-end;
	background-color: #ffffff;
}

/* ===== codex-overrides ===== */
[id="E2038875726"] .page-layout {
  width: var(--layout-right);
  max-width: var(--layout-right);
  flex: 0 0 var(--layout-right);
}

[id="Z2290068486"] .page-layout {
  width: var(--layout-left);
  max-width: var(--layout-left);
  flex: 0 0 var(--layout-left);
}

[id="Z2290068486"] [style*="--resize-parent-width: 386.8125px"],
[id="Z2290068486"] [style*="--resize-parent-width:386.8125px"],
[id="E2038875726"] [style*="--resize-parent-width: 991.609375px"],
[id="E2038875726"] [style*="--resize-parent-width:991.609375px"] {
  --resize-parent-width: 100% !important;
}

[id="Z2290068486"].page.fixed,
[id="Z2290068486"].page.fixed .page-layout,
[id="Z2290068486"].page.fixed.allow-scroll .page-content {
  height: 100dvh;
  max-height: 100dvh;
}

@supports not (height: 100dvh) {
  [id="Z2290068486"].page.fixed,
  [id="Z2290068486"].page.fixed .page-layout,
  [id="Z2290068486"].page.fixed.allow-scroll .page-content {
    height: 100vh;
    max-height: 100vh;
  }
}

/* Force all GAN slideshow images to fill their slot consistently */
media-item[hash="B2107712428874112825114675746760"],
media-item[hash="S2107712428984793289556933056456"],
media-item[hash="K2107712429021686777704352159688"],
media-item[hash="W2107712429003240033630642608072"] {
  width: 75% !important;
  min-width: 75% !important;
  max-width: 75% !important;
  flex-basis: 75% !important;
  --resize-parent-width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

media-item[hash="B2107712428874112825114675746760"]::part(media),
media-item[hash="S2107712428984793289556933056456"]::part(media),
media-item[hash="K2107712429021686777704352159688"]::part(media),
media-item[hash="W2107712429003240033630642608072"]::part(media) {
  width: 75% !important;
  height: 75% !important;
  min-width: 75% !important;
  min-height: 75% !important;
  max-width: 75% !important;
  max-height: 75% !important;
  inset: 0 !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.namecard-flip {
  width: 100%;
  cursor: var(--cursor-pointer-url) 16 16, pointer;
  perspective: 1600px;
  touch-action: manipulation;
  border-radius: clamp(7px, 2.1vw, 19px);
  overflow: hidden;
  background: #f9f9f9;
}

.namecard-flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 632 / 1024;
  transform-style: preserve-3d;
  border-radius: inherit;
  overflow: hidden;
}

.namecard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.namecard-front {
  background: #e7e5e4;
  transform: rotateY(0deg) translateZ(0.01px);
  z-index: 2;
}

.namecard-back {
  background: #2f2f2f;
  transform: rotateY(180deg) translateZ(0.01px);
  z-index: 1;
}

.namecard-flip.is-flipped .namecard-front {
  transform: rotateY(-180deg) translateZ(0.01px);
}

.namecard-flip.is-flipped .namecard-back {
  transform: rotateY(0deg) translateZ(0.01px);
}

.namecard-face > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.namecard-back-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) clamp(20px, 2.8vw, 30px);
}

.namecard-back-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.namecard-back-content {
  display: grid;
  align-content:  center;
  gap: clamp(14px, 1.8vw, 22px);
  padding-right: clamp(10px, 1.5vw, 16px);
}

.namecard-back-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.1vw, 14px);
}

.namecard-back-media-item {
  margin: 0;
  border-radius: clamp(8px, 1vw, 12px);
  overflow: hidden;
  background: #2f2f2f;
}

.namecard-back-media-single {
  width: 100%;
}

.namecard-back-media-item img {
  display: block;
  width: 100%;
  height: auto;
}

.namecard-scroll-track {
  position: absolute;
  top: clamp(14px, 2vw, 20px);
  right: clamp(7px, 1vw, 10px);
  bottom: clamp(14px, 2vw, 20px);
  width: 3px;
  pointer-events: none;
}

.namecard-scroll-pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: clamp(26px, 4.2vw, 40px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  transform: translateY(var(--namecard-pill-y, 0px));
  transition: transform 80ms linear, opacity 180ms ease;
}

.namecard-back.no-scroll .namecard-scroll-track {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .namecard-face {
    transition: none;
  }
  .namecard-scroll-pill {
    transition: none;
  }
}

/* Only Mini Moves overlay two-column ratio (left 7 / right 3)
   Note: component has fixed 22.5px gutter; split remaining width to avoid overflow. */
[id="T0573975817"] {
  --mm-two-col-gutter: 22.5px;
}

[id="T0573975817"] .header1 > h1,
[id="D2580399572"] .header1 > h1,
[id="M2671306917"] .header1 > h1,
[id="T0573975817"] .mm-overlay-title {
  margin: 0 !important;
  font-size: var(--typo-h1-size) !important;
  font-weight: var(--typo-h1-weight) !important;
  line-height: var(--typo-h1-line) !important;
  color: var(--typo-h1-color) !important;
}

.mobile [id="T0573975817"] .header1 > h1,
.mobile [id="D2580399572"] .header1 > h1,
.mobile [id="M2671306917"] .header1 > h1,
.mobile [id="T0573975817"] .mm-overlay-title {
  font-size: var(--typo-h1-size-mobile) !important;
}

/* Strong fallback: all project overlay opening h1 titles match My Practice title sizing */
html.project-overlay-frame-doc .header1 > h1 {
  margin: 0 !important;
  font-size: var(--typo-h1-size) !important;
  font-weight: var(--typo-h1-weight) !important;
  line-height: var(--typo-h1-line) !important;
  color: var(--typo-h1-color) !important;
}

/* Prevent global bodycopy span scaling from overriding overlay h1 title text */
html.project-overlay-frame-doc .header1 > h1 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

html.project-overlay-frame-doc.mobile .header1 > h1,
.mobile html.project-overlay-frame-doc .header1 > h1 {
  font-size: var(--typo-h1-size-mobile) !important;
}

[id="T0573975817"] .mm-overlay-contrib,
[id="T0573975817"] .overlay-contrib,
[id="D2580399572"] .overlay-contrib,
[id="M2671306917"] .overlay-contrib,
[id="M2671306917"] .overlay-implement-design {
  font-size: var(--text-body-lg-size) !important;
  font-weight: var(--text-body-lg-weight) !important;
  line-height: var(--text-body-lg-line) !important;
  color: var(--text-body-lg-color) !important;
}

[id="T0573975817"] column-set.mm-two-col > column-unit[slot="0"] {
  --column-width: calc((100% - var(--mm-two-col-gutter)) * 0.7) !important;
  width: calc((100% - var(--mm-two-col-gutter)) * 0.7) !important;
  flex-basis: calc((100% - var(--mm-two-col-gutter)) * 0.7) !important;
}

[id="T0573975817"] column-set.mm-two-col > column-unit[slot="1"] {
  --column-width: calc((100% - var(--mm-two-col-gutter)) * 0.3) !important;
  width: calc((100% - var(--mm-two-col-gutter)) * 0.3) !important;
  flex-basis: calc((100% - var(--mm-two-col-gutter)) * 0.3) !important;
}

/* Mini Moves overlay: control first image size only */
[id="T0573975817"] media-item[hash="P2109056708379344572925327284168"] {
  width: 100% !important;
  max-width: 520px !important;
  --resize-parent-width: 100% !important;
}

[id="T0573975817"] media-item[hash="P2109056708379344572925327284168"]::part(media) {
  object-fit: contain !important;
}

/* Mini Moves overlay: height follows content, but not shorter than viewport */
[id="T0573975817"].page {
  min-height: 100dvh !important;
  height: auto !important;
}

@supports not (height: 100dvh) {
  [id="T0573975817"].page {
    min-height: 100vh !important;
  }
}

[id="T0573975817"] .page-layout,
[id="T0573975817"] .page-content,
[id="T0573975817"] .page-content > bodycopy {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Keep Mini Moves content layer white down to viewport bottom */
[id="T0573975817"] .page-content {
  min-height: 100dvh !important;
}

@supports not (height: 100dvh) {
  [id="T0573975817"] .page-content {
    min-height: 100vh !important;
  }
}

/* Sustainable Waves overlay two-column ratio (left 7 / right 3)
   Scoped only to Sustainable overlay page id to avoid global side effects. */
[id="D2580399572"] {
  --sw-two-col-gutter: 22.5px;
}

[id="D2580399572"] .clm > column-set > column-unit[slot="0"] {
  --column-width: calc((100% - var(--sw-two-col-gutter)) * 0.7) !important;
  width: calc((100% - var(--sw-two-col-gutter)) * 0.7) !important;
  flex-basis: calc((100% - var(--sw-two-col-gutter)) * 0.7) !important;
}

[id="D2580399572"] .clm > column-set > column-unit[slot="1"] {
  --column-width: calc((100% - var(--sw-two-col-gutter)) * 0.3) !important;
  width: calc((100% - var(--sw-two-col-gutter)) * 0.3) !important;
  flex-basis: calc((100% - var(--sw-two-col-gutter)) * 0.3) !important;
}




/* My Practice: embedded Figma block below title */
#E2038875726 .mypractice-figma-embed-wrap {
  width: 100%;
  margin: 0 0 1.2rem 0;
}

#E2038875726 .mypractice-grid-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 0;
  background: transparent;
}

/* ===== figma-node-3042-793 desktop rebuild (strict spacing from Figma auto layout) ===== */
:root {
  --global-page-gutter: 34px;
}

html[data-site-mode="figma3042"] {
  --home-bg-3042: #f2f2f2;
  --home-ink-3042: #1b1b1b;
  --home-slot-3042: #d9d9d9;
  --home-bodycopy-w-3042: 3112.838px;
  --home-top-3042: 12px;
  --home-hero-offset-y-3042: 23px;
  --home-col-left-3042: 668px;
  --home-col-mid-3042: 706px;
  --home-col-right-3042: 673px;
  --home-col-gap-3042: 204px;
  --home-hero-w-3042: calc(
    var(--home-col-left-3042) +
    var(--home-col-mid-3042) +
    var(--home-col-right-3042) +
    (var(--home-col-gap-3042) * 2)
  );
  --home-content-w-3042: var(--home-hero-w-3042);
  --home-mid-card-w-3042: 682.613px;
}

html[data-site-mode="figma3042"],
html[data-site-mode="figma3042"] body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--home-bg-3042) !important;
  color: var(--home-ink-3042) !important;
  min-height: var(--viewport-height, 100vh) !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

html[data-site-mode="figma3042"] body {
  min-width: 0;
  font-family: "Atkinson Hyperlegible", sans-serif;
}

html[data-site-mode="figma3042"] .home3042 {
  width: 100%;
  position: relative;
}

/* Project overlay in figma3042 mode: centered floating modal */
html[data-site-mode="figma3042"] .project-overlay-backdrop[hidden] {
  display: none !important;
}

html[data-site-mode="figma3042"] .project-overlay-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 36px);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

html[data-site-mode="figma3042"] .project-overlay-drawer {
  position: relative;
  top: auto;
  right: auto;
  width: min(calc(var(--home-content-w-3042) * 0.9), calc(100vw - 80px));
  height: min(calc(var(--viewport-height, 100vh) * 0.9), calc(100vh - 80px));
  max-width: 100%;
  max-height: 100%;
  background: #ffffff;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.14);
  transform: translateY(14px) scale(0.985);
  border-radius: 0;
  overflow: hidden;
}

html[data-site-mode="figma3042"] .project-overlay-close {
  top: 12px;
  right: 14px;
}

html[data-site-mode="figma3042"] .project-overlay-frame {
  width: 100%;
  height: 100%;
}

html[data-site-mode="figma3042"].project-overlay-open .project-overlay-backdrop {
  opacity: 1;
  pointer-events: auto;
}

html[data-site-mode="figma3042"].project-overlay-open .project-overlay-drawer {
  transform: translateY(0) scale(1);
}

html[data-site-mode="figma3042"].project-overlay-open,
html[data-site-mode="figma3042"].project-overlay-open body {
  overflow: hidden !important;
}

/* Hover preview for project links */
html[data-site-mode="figma3042"] #project-hover-preview {
  width: min(28rem, 34vw);
  max-height: min(68vh, 42rem);
  z-index: 21050;
}

html[data-site-mode="figma3042"] #project-hover-preview .project-hover-body {
  gap: 0;
}

html[data-site-mode="figma3042"] #project-hover-preview .project-hover-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
}

html[data-site-mode="figma3042"] .hero3042 {
  position: relative;
  min-height: var(--viewport-height, 100vh);
  box-sizing: border-box;
  background: var(--home-bg-3042);
  padding: var(--home-top-3042) var(--global-page-gutter) 56px;
}

html[data-site-mode="figma3042"] .hero3042-canvas {
  width: min(calc(100vw - (var(--global-page-gutter) * 2)), var(--home-hero-w-3042));
  margin: var(--home-hero-offset-y-3042) auto 0;
  display: grid;
  grid-template-columns: var(--home-col-left-3042) var(--home-col-mid-3042) var(--home-col-right-3042);
  column-gap: var(--home-col-gap-3042);
  align-items: end;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* Arrow layer: anchored to landing section, independent from column layout shifts */
html[data-site-mode="figma3042"] .hero3042-arrow-global {
  --arrow-base-w-3042: 214px;
  --arrow-w-3042: var(--arrow-base-w-3042);
  --arrow-line-h-3042: calc(var(--arrow-w-3042) * 123 / 212);
  /* Match Figma node 3059:1244 exact stack proportion: 208 x 245.5947418 */
  --arrow-stack-h-3042: calc(var(--arrow-w-3042) * 245.59474182128906 / 208.00003051757812);
  --arrow-gap-3042: calc((var(--arrow-stack-h-3042) - (var(--arrow-line-h-3042) * 3)) / 2);
  position: absolute;
  left: 50%;
  bottom: -66px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

html[data-site-mode="figma3042"] .hero3042-arrow-stack {
  width: var(--arrow-w-3042);
  animation: hero3042ArrowBreath 4.6s ease-in-out infinite;
  will-change: transform, opacity;
}

html[data-site-mode="figma3042"] .hero3042-arrow-line {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 212 / 123;
}

html[data-site-mode="figma3042"] .hero3042-arrow-line + .hero3042-arrow-line {
  margin-top: var(--arrow-gap-3042);
}

html[data-site-mode="figma3042"] .hero3042-col {
  min-width: 0;
}

html[data-site-mode="figma3042"] .hero3042-left {
  width: var(--home-col-left-3042);
  display: flex;
  flex-direction: column;
}

html[data-site-mode="figma3042"] .hero3042-mid {
  width: var(--home-col-mid-3042);
  display: flex;
  flex-direction: column;
}

html[data-site-mode="figma3042"] .hero3042-right {
  width: var(--home-col-right-3042);
  display: flex;
  flex-direction: column;
  min-height: 1421.4557px;
}

html[data-site-mode="figma3042"] .hero3042-title {
  margin: 0 !important;
  font-size: 73.229px !important;
  line-height: 73.229px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #1b1b1b !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
}

/* Left column spacings from Figma: heading group + gap(5) + stack gap(30) */
html[data-site-mode="figma3042"] .hero3042-left .hero3042-title {
  margin-bottom: 54px !important;
}

html[data-site-mode="figma3042"] .persona3042 {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

html[data-site-mode="figma3042"] .persona3042-image {
  display: block;
  width: 100%;
  height: auto;
}

html[data-site-mode="figma3042"] .model-slot3042 {
  background: var(--home-slot-3042);
  width: 100%;
}

html[data-site-mode="figma3042"] .model-viewer3042-host {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

html[data-site-mode="figma3042"] .model-viewer3042-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  touch-action: none;
  cursor: grab;
}

html[data-site-mode="figma3042"] .model-viewer3042-canvas:active {
  cursor: grabbing;
}

html[data-site-mode="figma3042"] .model-viewer3042-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.8rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.55);
  user-select: none;
  pointer-events: none;
}

html[data-site-mode="figma3042"] .model-viewer3042-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  transition: opacity 220ms ease;
  pointer-events: none;
}

html[data-site-mode="figma3042"] .model-viewer3042-placeholder.is-hidden {
  opacity: 0;
}

html[data-site-mode="figma3042"] .model-viewer3042-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(0.95) brightness(0.95);
}

html[data-site-mode="figma3042"] .model-viewer3042-shimmer {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(0, 0, 0, 0.05) 8%, rgba(255, 255, 255, 0.45) 18%, rgba(0, 0, 0, 0.05) 33%),
    rgba(0, 0, 0, 0.08);
  background-size: 240% 100%;
  animation: model3042Shimmer 1.2s linear infinite;
}

html[data-site-mode="figma3042"] .model-viewer3042-loading {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 12px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.62);
  letter-spacing: 0.01em;
  font-family: "Atkinson Hyperlegible", sans-serif;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 8px;
  border-radius: 999px;
}

@keyframes model3042Shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

html[data-site-mode="figma3042"] .model-slot3042-left-top {
  height: 417px;
  margin-bottom: 30px;
}

html[data-site-mode="figma3042"] .model-slot3042-left-bottom {
  height: 453px;
}

/* Middle column spacings from Figma: card->heading gap 29, heading->margins gap 45 */
html[data-site-mode="figma3042"] .namecard3042-wrap {
  width: var(--home-mid-card-w-3042);
  margin-bottom: 29px;
}

html[data-site-mode="figma3042"] .namecard3042-wrap .namecard-flip {
  width: var(--home-mid-card-w-3042);
  max-width: var(--home-mid-card-w-3042);
  border-radius: 18.013px;
}

html[data-site-mode="figma3042"] .namecard3042-wrap .namecard-flip-inner {
  aspect-ratio: 682.613 / 1106.402;
}

html[data-site-mode="figma3042"] .exclusion3042-title {
  margin: 0 0 45px 0 !important;
  font-size: 26px !important;
  line-height: normal !important;
  font-weight: 400 !important;
  display: block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  color: #1b1b1b !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
}

/* Keep the existing HTML, but lock the visual proportion to Figma */
html[data-site-mode="figma3042"] .margins3042 {
  width: var(--home-mid-card-w-3042);
  max-width: 100%;
  align-self: flex-start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: max-content max-content;
  column-gap: 182px;
  row-gap: 21px;
  align-items: start;
}

html[data-site-mode="figma3042"] .margins3042-word {
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  font-size: 73.229px !important;
  line-height: 73.229px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #1b1b1b !important;
  max-width: 100%;
  white-space: nowrap;
  --word-breath-x: 0px;
  animation: hero3042WordBreath 5.2s ease-in-out infinite;
  will-change: transform, opacity;
}

html[data-site-mode="figma3042"] .margins3042-word-left-top,
html[data-site-mode="figma3042"] .margins3042-word-left-bottom {
  text-align: left;
  justify-self: start;
  --word-breath-x: -4px;
}

html[data-site-mode="figma3042"] .margins3042-word-right-top,
html[data-site-mode="figma3042"] .margins3042-word-right-bottom {
  text-align: right;
  justify-self: end;
  --word-breath-x: 4px;
}

html[data-site-mode="figma3042"] .margins3042-word-left-top {
  animation-delay: 0s;
}

html[data-site-mode="figma3042"] .margins3042-word-right-top {
  animation-delay: 0.9s;
}

html[data-site-mode="figma3042"] .margins3042-word-left-bottom {
  animation-delay: 1.6s;
}

html[data-site-mode="figma3042"] .margins3042-word-right-bottom {
  animation-delay: 2.3s;
}

@keyframes hero3042ArrowBreath {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.95;
  }
  50% {
    transform: translate3d(0, -5px, 0);
    opacity: 1;
  }
}

@keyframes hero3042WordBreath {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  50% {
    transform: translate3d(var(--word-breath-x), 0, 0);
    opacity: 0.96;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-mode="figma3042"] .hero3042-arrow-stack,
  html[data-site-mode="figma3042"] .margins3042-word {
    animation: none !important;
    transform: none !important;
  }
  html[data-site-mode="figma3042"] .gan3042-logo-slide {
    animation: none !important;
  }
  html[data-site-mode="figma3042"] .gan3042-logo-slide-1 {
    opacity: 1 !important;
  }
}

/* Right column spacings from Figma: top stack gap 30, then gap 83, then lower stack gap 33 */
html[data-site-mode="figma3042"] .gan3042-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 30px;
}

html[data-site-mode="figma3042"] .gan3042-logo-carousel {
  position: relative;
  width: 100%;
  height: 686px;
  margin-bottom: 0px;
  overflow: hidden;
}

html[data-site-mode="figma3042"] .gan3042-logo-slide {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 75%;
  height: 75%;
  min-width: 75%;
  min-height: 75%;
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  animation: gan3042LogoFlash 3.2s steps(1, end) infinite;
}

html[data-site-mode="figma3042"] .gan3042-logo-slide-1 {
  animation-delay: 0s;
}

html[data-site-mode="figma3042"] .gan3042-logo-slide-2 {
  animation-delay: 0.8s;
}

html[data-site-mode="figma3042"] .gan3042-logo-slide-3 {
  animation-delay: 1.6s;
}

html[data-site-mode="figma3042"] .gan3042-logo-slide-4 {
  animation-delay: 2.4s;
}

@keyframes gan3042LogoFlash {
  0%,
  24.99% {
    opacity: 1;
  }
  25%,
  100% {
    opacity: 0;
  }
}

html[data-site-mode="figma3042"] .gan3042-subtitle {
  margin: 0 0 83px 0;
  display: block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  font-size: 26px;
  line-height: normal;
  font-weight: 400;
  color: #1b1b1b;
  opacity: 0.72;
}

html[data-site-mode="figma3042"] .gan3042-project-title {
  margin: 0 0 33px 0 !important;
  font-size: 48px !important;
  line-height: 35.47px !important;
  font-weight: 400 !important;
  color: #1b1b1b !important;
}

html[data-site-mode="figma3042"] .gan3042-project-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: baseline;
  column-gap: 24px;
  margin-bottom: 0;
}

html[data-site-mode="figma3042"] .gan3042-project-row:last-of-type {
  margin-bottom: 33px;
}

html[data-site-mode="figma3042"] .gan3042-project-link,
html[data-site-mode="figma3042"] .gan3042-project-more,
html[data-site-mode="figma3042"] .gan3042-writing a {
  color: #1b1b1b !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
}

html[data-site-mode="figma3042"] .gan3042-project-link,
html[data-site-mode="figma3042"] .gan3042-project-more {
  font-size: 36px;
  line-height: 81px;
  font-weight: 400;
}

html[data-site-mode="figma3042"] .gan3042-writing {
  margin: 0 !important;
  margin-top: auto !important;
  transform: translateY(-4px);
  font-size: 48px !important;
  line-height: 35.47px !important;
  font-weight: 400 !important;
}

html[data-site-mode="figma3042"] .practice3042 {
  background: #ffffff;
  padding: 44px var(--global-page-gutter) 80px;
}

html[data-site-mode="figma3042"] .practice3042-canvas {
  width: min(calc(100vw - (var(--global-page-gutter) * 2)), var(--home-content-w-3042));
  margin: 0 auto;
}

html[data-site-mode="figma3042"] .practice3042-title {
  margin: 0 0 20px 0 !important;
  font-size: 73.229px !important;
  line-height: 73.229px !important;
  font-weight: 400 !important;
  color: #1b1b1b !important;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

html[data-site-mode="figma3042"] .practice3042-title-icon {
  width: 36px;
  height: auto;
  margin-top: 8px;
}

html[data-site-mode="figma3042"] .practice3042-grid-wrap {
  width: 100%;
}

html[data-site-mode="figma3042"] .mypractice-grid-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

html[data-site-mode="figma3042"] .practice3042-open-traces {
  width: 100%;
  margin-top: 28px;
  background: #1b1b1b;
  color: #efefef;
  border-radius: 10px;
  padding: 30px 30px 0;
  overflow: hidden;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-desc {
  margin: 0;
  max-width: 818px;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: -0.022em;
  color: #efefef;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-brand-mark {
  width: 78px;
  height: 103px;
  display: block;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-brand-text {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  color: #efefef;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-media {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1860 / 823;
  border-radius: 10px;
  overflow: visible;
  background: #111111;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #111111;
  border-radius: 10px;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-overlay {
  position: absolute;
  left: -1.5914%;
  top: -27.8797%;
  z-index: 20;
  width: 102.2043%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-meta {
  margin-top: 0;
  padding: 12px 0 8px;
  position: relative;
  z-index: 30;
  background: #1b1b1b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #efefef;
}

html[data-site-mode="figma3042"] .practice3042-open-traces-credit,
html[data-site-mode="figma3042"] .practice3042-open-traces-year {
  margin: 0;
  font-family: "Inter", "Atkinson Hyperlegible", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: #efefef;
}

html[data-site-mode="figma3042"] .practice3042-ending {
  margin: 16px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.5);
}

html[data-site-mode="figma3042"] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Desktop stage A: >=1600, scale-only (no responsive reflow) */
@media (min-width: 1600px) {
  html[data-site-mode="figma3042"] {
    /* Keep visible side margins on all wide screens */
    --global-page-gutter: clamp(34px, calc(34px + ((100vw - 1600px) * 0.06)), 72px);
    --hero-design-h-3042: 1453px;
    --hero-bottom-pad-3042: 40px;
    --hero-usable-w-3042: calc(100vw - (var(--global-page-gutter) * 2));
    --hero-usable-h-3042: calc(var(--viewport-height, 100vh) - var(--home-top-3042) - var(--hero-bottom-pad-3042));
    --hero-scale-3042: min(
      1,
      calc(var(--hero-usable-w-3042) / var(--home-content-w-3042)),
      calc(var(--hero-usable-h-3042) / var(--hero-design-h-3042))
    );
  }

  html[data-site-mode="figma3042"] .home3042 {
    zoom: 1;
    width: 100%;
    transform: none;
  }

  html[data-site-mode="figma3042"] .hero3042,
  html[data-site-mode="figma3042"] .practice3042 {
    padding-left: var(--global-page-gutter);
    padding-right: var(--global-page-gutter);
  }

  html[data-site-mode="figma3042"] .hero3042 {
    height: var(--viewport-height, 100vh);
    min-height: var(--viewport-height, 100vh);
    padding-top: var(--home-top-3042);
    padding-bottom: var(--hero-bottom-pad-3042);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  html[data-site-mode="figma3042"] .hero3042-canvas {
    width: var(--home-content-w-3042);
    min-height: var(--hero-design-h-3042);
    margin: 0;
    flex-shrink: 0;
    transform: scale(var(--hero-scale-3042));
    transform-origin: top center;
  }

  html[data-site-mode="figma3042"] .practice3042-canvas {
    width: min(calc(100vw - (var(--global-page-gutter) * 2)), var(--home-content-w-3042));
  }

  html[data-site-mode="figma3042"] .practice3042 {
    padding-top: 56px;
  }
}

/* Desktop stage B: 900-1599.98, keep one-screen hero; fit by width + height */
@media (max-width: 1599.98px) and (min-width: 900px) {
  html[data-site-mode="figma3042"] {
    /* linear: 900 -> 20px, 1600 -> 34px */
    --global-page-gutter: clamp(20px, calc(20px + ((100vw - 900px) * 0.02)), 34px);
    --hero-design-h-3042: 1453px;
    --hero-bottom-pad-3042: 40px;
    --hero-usable-w-3042: calc(100vw - (var(--global-page-gutter) * 2));
    --hero-usable-h-3042: calc(var(--viewport-height, 100vh) - var(--home-top-3042) - var(--hero-bottom-pad-3042));
    --hero-scale-3042: min(
      1,
      calc(var(--hero-usable-w-3042) / var(--home-content-w-3042)),
      calc(var(--hero-usable-h-3042) / var(--hero-design-h-3042))
    );
  }

  html[data-site-mode="figma3042"] body {
    overflow-x: hidden !important;
  }

  html[data-site-mode="figma3042"] .home3042 {
    zoom: 1;
    width: 100%;
    transform: none;
  }

  html[data-site-mode="figma3042"] .hero3042 {
    height: var(--viewport-height, 100vh);
    min-height: var(--viewport-height, 100vh);
    padding-top: var(--home-top-3042);
    padding-bottom: var(--hero-bottom-pad-3042);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  html[data-site-mode="figma3042"] .hero3042-canvas {
    width: var(--home-content-w-3042);
    min-height: var(--hero-design-h-3042);
    margin: 0;
    flex-shrink: 0;
    transform: scale(var(--hero-scale-3042));
    transform-origin: top center;
  }

  html[data-site-mode="figma3042"] .practice3042 {
    padding-top: 56px;
  }

  html[data-site-mode="figma3042"] .practice3042-canvas {
    width: min(calc(100vw - (var(--global-page-gutter) * 2)), var(--home-content-w-3042));
  }
}

/* Mobile stage: <900, switch to single-column layout */
@media (max-width: 899.98px) {
  html[data-site-mode="figma3042"] {
    --global-page-gutter: 20px;
  }

  html[data-site-mode="figma3042"] body {
    overflow-x: hidden !important;
  }

  html[data-site-mode="figma3042"] .home3042 {
    zoom: 1;
    width: 100%;
    transform: none;
  }

  html[data-site-mode="figma3042"] .hero3042 {
    display: block !important;
    padding-top: clamp(22px, 5vw, 36px);
    padding-bottom: clamp(28px, 6vw, 44px);
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  html[data-site-mode="figma3042"] .hero3042-canvas {
    width: calc(100vw - (var(--global-page-gutter) * 2));
    grid-template-columns: 1fr;
    row-gap: clamp(26px, 5.5vw, 42px);
    column-gap: 0;
    margin-top: 0;
    transform: none;
    min-height: 0;
    align-items: start;
  }

  html[data-site-mode="figma3042"] .hero3042-left,
  html[data-site-mode="figma3042"] .hero3042-mid,
  html[data-site-mode="figma3042"] .hero3042-right {
    width: 100%;
    min-height: 0;
  }

  html[data-site-mode="figma3042"] .hero3042-title {
    font-size: clamp(38px, 10vw, 58px) !important;
    line-height: 1.04 !important;
  }

  html[data-site-mode="figma3042"] .hero3042-left .hero3042-title {
    margin-bottom: clamp(16px, 3vw, 24px) !important;
  }

  html[data-site-mode="figma3042"] .model-slot3042-left-top {
    height: auto;
    aspect-ratio: 668 / 417;
  }

  html[data-site-mode="figma3042"] .model-slot3042-left-bottom {
    height: auto;
    aspect-ratio: 668 / 453;
  }

  html[data-site-mode="figma3042"] .gan3042-logo-carousel {
    height: auto;
    aspect-ratio: 673 / 686;
  }

  html[data-site-mode="figma3042"] .namecard3042-wrap,
  html[data-site-mode="figma3042"] .namecard3042-wrap .namecard-flip {
    width: 100%;
    max-width: 100%;
  }

  html[data-site-mode="figma3042"] .exclusion3042-title {
    margin-bottom: clamp(16px, 3.2vw, 24px) !important;
    font-size: 26px !important;
  }

  html[data-site-mode="figma3042"] .margins3042 {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(14px, 5vw, 48px);
    row-gap: clamp(8px, 2vw, 16px);
  }

  html[data-site-mode="figma3042"] .margins3042-word {
    font-size: clamp(30px, 8vw, 50px) !important;
    line-height: 1.06 !important;
  }

  html[data-site-mode="figma3042"] .gan3042-project-title,
  html[data-site-mode="figma3042"] .gan3042-writing {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.1 !important;
  }

  html[data-site-mode="figma3042"] .gan3042-writing {
    margin-top: 0 !important;
    transform: none;
  }

  html[data-site-mode="figma3042"] .gan3042-project-link,
  html[data-site-mode="figma3042"] .gan3042-project-more {
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.45;
  }

  html[data-site-mode="figma3042"] .gan3042-subtitle {
    font-size: 26px;
    margin-bottom: clamp(18px, 4vw, 32px);
  }

  html[data-site-mode="figma3042"] .gan3042-project-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
    margin-bottom: 10px;
  }

  html[data-site-mode="figma3042"] .gan3042-project-more {
    justify-self: start;
  }

  html[data-site-mode="figma3042"] .practice3042-canvas {
    width: calc(100vw - (var(--global-page-gutter) * 2));
  }

  html[data-site-mode="figma3042"] .practice3042-title {
    font-size: clamp(42px, 4.7vw, 73.229px) !important;
    line-height: 1.02 !important;
  }
}

/* Apply the same horizontal gutter to all Cargo-style pages/overlays */
html:not([data-site-mode="figma3042"]) .page-content {
  padding-left: var(--global-page-gutter) !important;
  padding-right: var(--global-page-gutter) !important;
  box-sizing: border-box !important;
}

html:not([data-site-mode="figma3042"]) .page-content > bodycopy {
  width: 100% !important;
  max-width: calc(100vw - (var(--global-page-gutter) * 2)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Only Summer School project line: custom line-height */
html[data-site-mode="figma3042"] .gan3042-project-link[data-copy-key="shared.home.left.projects.summerschool"] {
  line-height: 1.2 !important;
}