:root{
  --bg: #f7f7f4;
  --bg-alt: #efefea;
  --card: #ffffff;
  --ink: #141412;
  --ink-soft: #5c5c54;
  --ink-faint: #9a9a90;
  --line: #dedad0;
  --accent: #2438a8;
  --header-bg: rgba(247,247,244,0.88);
  --paper: #fbfaf6;
  --paper-line: #e7e2d6;
  --shadow: rgba(20, 20, 16, 0.12);
  --shadow-strong: rgba(20, 20, 16, 0.16);
  --bg-contact: #e4e4de;
  --term-bg: #f5f3ec;
  --term-bar: #e8e4d8;
  --term-text: #191917;
  --term-muted: #7a776d;
  --term-rule: #d8d1c2;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 3px;
  color-scheme: light;
}
html[data-theme="dark"]{
  --bg: #121211;
  --bg-alt: #1c1c18;
  --card: #1a1a17;
  --ink: #f2f2ec;
  --ink-soft: #b4b4aa;
  --ink-faint: #7a7a72;
  --line: #2e2e28;
  --accent: #6b86ff;
  --header-bg: rgba(18,18,17,0.9);
  --paper: #eceadf;
  --paper-line: #d4d0c4;
  --shadow: rgba(0, 0, 0, 0.45);
  --shadow-strong: rgba(0, 0, 0, 0.55);
  --bg-contact: #24241f;
  --term-bg: #11110f;
  --term-bar: #191916;
  --term-text: #ece8dc;
  --term-muted: #8f8b80;
  --term-rule: #2c2b25;
  color-scheme: dark;
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.site-main{
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
::selection{ background: var(--accent); color: #fff; }
a{ color: inherit; }
button{ font-family: inherit; }

.cursor{
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -0.15em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }

header.bar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bar-tools{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.prompt{
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 32px;
  color: var(--ink-soft);
}
.prompt .out{ color: var(--ink-faint); }
.prompt .ac{ color: var(--accent); }
nav.links{
  display: flex;
  align-items: center;
  gap: 28px;
  height: 32px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  margin-left: auto;
  margin-right: 8px;
}
nav.links a{
  text-decoration: none;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  height: 32px;
}
nav.links a:hover, nav.links a.on{ color: var(--ink); }
nav.links a::before{ content: "./"; color: var(--ink-faint); }
nav.links a.on::before{ color: var(--accent); }
.nav-toggle{
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  position: relative;
}
.nav-toggle span{
  position: absolute;
  left: 7px;
  right: 7px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-toggle span:nth-child(1){ top: 10px; }
.nav-toggle span:nth-child(2){ top: 15px; }
.nav-toggle span:nth-child(3){ top: 20px; }
body.nav-open .nav-toggle span:nth-child(1){
  top: 15px;
  transform: rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3){
  top: 15px;
  transform: rotate(-45deg);
}
body.nav-open{
  overflow: hidden;
  overflow-x: hidden;
}
.theme-toggle{
  margin-left: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle:hover{ color: var(--ink); }
.theme-toggle:focus-visible{
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}
.theme-toggle svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}
.theme-toggle .icon-moon{ fill: currentColor; stroke: none; }
html[data-theme="light"] .theme-toggle .icon-moon{ display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display: block; }

.hero{
  max-width: 1180px;
  margin: 0 auto;
  min-height: calc(100vh - 56px);
  padding: 72px 28px 128px;
  display: flex;
  align-items: center;
  opacity: var(--f, 1);
  transform: translate3d(0, calc((1 - var(--f, 1)) * -20px), 0);
  will-change: opacity, transform;
}
.hero-pair{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px 48px;
  align-items: stretch;
  align-self: center;
  width: 100%;
  height: auto;
}
.hero-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 0 24px;
}
.eyebrow{
  font-family: var(--mono);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--accent);
  margin: 0 0 22px;
}
.eyebrow .out, .work-ask .out{ color: var(--ink-soft); }
h1.wordmark{
  font-size: clamp(64px, 12vw, 148px);
  line-height: 0.86;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: inline-block;
  cursor: default;
}
.wordmark .ch,
.hero-copy .ch,
.print-name .ch,
.tile figcaption .ch{
  display: inline-block;
  text-align: center;
}
.tagline{
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-soft);
  max-width: 560px;
  margin: 22px 0 0;
}
.hero-meta{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 40px;
  max-width: 38ch;
  font-family: var(--mono);
  font-size: 17px;
}
.hero-facts{
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
}
.hero-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
}
.hero-meta a.hero-gallery{
  color: var(--accent);
  border-color: var(--accent);
}
.hero-meta a{
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.hero-meta a:hover{ color: var(--accent); border-color: var(--accent); }
.hero-meta a.ig-link{ border-bottom: 0; padding-bottom: 0; }
.hero-meta a.ig-link span{
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.hero-meta a.ig-link:hover span{ border-color: var(--accent); }
.hero-meta a.hero-gallery:hover{ color: var(--ink); border-color: var(--ink); }
.ig-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ig-icon{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.ig-icon .ig-dot{
  fill: currentColor;
  stroke: none;
}
.hero-scroll{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 56px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.hero-scroll:focus-visible{
  outline: 1px solid var(--accent);
  outline-offset: 8px;
}
.hero-scroll svg{
  width: 42px;
  height: 56px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  animation: drop 1.7s ease-in-out infinite;
}
@keyframes drop{
  0%, 100%{ opacity: 0.18; transform: translateY(0); }
  38%{ opacity: 1; transform: translateY(12px); }
  52%{ opacity: 1; transform: translateY(12px); }
}
.hero-shot:empty{ display: none; }
.hero-shot{
  position: relative;
  margin: 0;
  width: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1280 / 1600;
  justify-self: end;
  align-self: stretch;
  overflow: hidden;
  background: var(--bg-alt);
}
.hero-shot img,
.hero-shot canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-shot img{
  object-fit: fill;
}
.hero-shot canvas{
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
.hero-shot canvas.on{ opacity: 1; }

section, .wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 28px;
  scroll-margin-top: 80px;
}
#about,
#contact{
  scroll-margin-top: 80px;
}
.section-head{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
body[data-page="gallery"] .section-head{
  border-top: 0;
  padding-top: 0;
}
.section-head .cmd{
  font-family: var(--mono);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ink-soft);
}
.section-head .cmd .flag{ color: var(--accent); }

.masonry{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 64px 32px;
  align-items: start;
  overflow: visible;
  padding-bottom: 24px;
}
body[data-page="gallery"] .wrap{
  overflow: visible;
  flex: 1 0 auto;
}
.tile{
  min-width: 0;
  cursor: zoom-in;
}
.tile[data-span="4"]{ grid-column: span 4; }
.tile[data-span="5"]{ grid-column: span 5; }
.tile[data-span="6"]{ grid-column: span 6; }
.tile[data-span="7"]{ grid-column: span 7; }
.tile[data-span="8"]{ grid-column: span 8; }
.ggrid .tile{ grid-column: span 4; }
.tile.framed:nth-child(3n+1){ --tilt: -1.2deg; }
.tile.framed:nth-child(3n+2){ --tilt: 0.8deg; }
.tile.framed:nth-child(3n){ --tilt: -0.4deg; }
.tile.framed:nth-child(5n){ --tilt: 1.4deg; }

.sheet{ position: relative; }
.tile.framed .sheet{
  background: var(--paper);
  padding: 12px 12px 38px;
  box-shadow:
    0 0 0 1px var(--paper-line),
    4px 12px 28px var(--shadow);
  transform: rotate(var(--tilt, -0.5deg));
  transform-origin: 50% 60%;
  transition: transform .45s ease, box-shadow .45s ease;
}
.tile.framed:hover .sheet{
  transform: rotate(0deg) translateY(-8px);
  box-shadow:
    0 0 0 1px var(--paper-line),
    8px 22px 40px var(--shadow-strong);
  z-index: 3;
}
.tile.framed .print-name{ color: #141412; }
.print-meta,
.tile > figcaption{
  position: relative;
  z-index: 4;
}
.print-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 0;
  padding-top: 18px;
}
.print-name{
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.stamps{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.stamp{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 7px;
  white-space: nowrap;
}
.tile.framed .print-meta{
  background: transparent;
}

.tile .pic{
  position: relative;
  display: block;
  line-height: 0;
  background: var(--bg-alt);
}
.tile .pic img{
  width: 100%;
  height: auto;
  display: block;
}
.tile .pic canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
.tile .pic canvas.on{ opacity: 1; }
.tile.album-cover{
  overflow: visible;
  /* room for peeks that tuck under caption and stick out below */
  padding-bottom: 10px;
}
.tile.album-cover .sheet{
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  z-index: 0;
}
.tile.album-cover img.peek{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
.tile.album-cover img.peek-0{
  transform: rotate(-7deg) translate(-16px, 1px);
  opacity: 0.95;
}
.tile.album-cover img.peek-1{
  transform: rotate(6deg) translate(18px, 2px);
  opacity: 0.9;
}
.tile.album-cover .pic{
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
    0 10px 24px var(--shadow);
}
.tile.album-cover canvas, .tile.album-cover .badge{ z-index: 2; }
.tile.album-cover .print-meta,
.tile.album-cover > figcaption{
  position: relative;
  z-index: 3;
  background: transparent;
}
.tile.album-cover:hover{ z-index: 6; }
.tile.album-cover:hover img.peek-0{
  transform: rotate(-9deg) translate(-20px, 3px);
}
.tile.album-cover:hover img.peek-1{
  transform: rotate(8deg) translate(22px, 4px);
}
.tile.album-cover .pic,
.tile.album-cover img.peek{
  transition: transform 0.35s ease;
}

body[data-page="home"]{
  scroll-snap-type: y proximity;
}
body[data-page="home"].no-snap{
  scroll-snap-type: none;
}
.hero, #about, #contact, footer{ scroll-snap-align: start; }
#work{
  max-width: none;
  padding: 0;
  position: relative;
  overflow-x: clip;
}
.work-ask{
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  margin: 0;
  width: max-content;
  max-width: min(44rem, calc(100vw - 48px));
  font-family: var(--mono);
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.4;
  color: var(--ink);
  opacity: var(--g, 0);
  transform: translate(calc(var(--ask-full, 0px) * -0.5), -0.7em);
  text-align: left;
  white-space: nowrap;
  transition: none;
}
.work-ask .out{
  color: var(--ink-soft);
  margin-right: 10px;
}
.work-ask .cursor{
  vertical-align: 0;
  height: 0.92em;
  margin-left: 0.12em;
  position: relative;
  top: 0.06em;
}
.show-slide{
  --p: 0;
  --sx: -1;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  scroll-snap-align: center;
  padding: 88px 28px 48px;
}
.show-gap{
  height: 180vh;
  pointer-events: none;
}
.show-slide.alt{ --sx: 1; }
.show-inner{
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px 56px;
  align-items: center;
}
.show-slide.alt .show-inner{
  grid-template-columns: 0.85fr 1.15fr;
}
.show-slide.alt .show-copy{ order: -1; }
.show-pic{
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  line-height: 0;
  cursor: zoom-in;
  clip-path: inset(
    calc((1 - var(--p)) * 46%)
    calc((1 - var(--p)) * 8%)
    calc((1 - var(--p)) * 46%)
    calc((1 - var(--p)) * 8%)
  );
  transform: translate3d(calc((1 - var(--p)) * var(--sx) * 72px), 0, 0) rotate(calc((1 - var(--p)) * var(--sx) * -4.5deg)) scale(calc(0.9 + var(--p) * 0.1));
  opacity: calc(0.18 + var(--p) * 0.82);
  filter: contrast(calc(1.4 - var(--p) * 0.4));
  will-change: transform, opacity, clip-path;
}
.show-pic img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(calc(1.18 - var(--p) * 0.18));
  transform-origin: center;
}
.show-pic canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
  transform: scale(calc(1.18 - var(--p) * 0.18));
  transform-origin: center;
}
.show-pic canvas.on{ opacity: 1; }
.show-slide.framed .show-pic{
  background: var(--paper);
  padding: 14px 14px 42px;
  box-shadow: 0 0 0 1px var(--paper-line), 4px 18px 36px color-mix(in srgb, var(--shadow) calc(var(--p) * 100%), transparent);
}
.show-copy{ min-width: 0; }
.show-copy h2{
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0 0 16px;
  transform: translate3d(calc((1 - var(--p)) * var(--sx) * -56px), calc((1 - var(--p)) * 8px), 0);
  opacity: clamp(0, calc((var(--p) - 0.06) / 0.52), 1);
  will-change: transform, opacity;
}
.show-copy .word{ white-space: nowrap; }
.show-copy .ch{
  display: inline-block;
  text-align: center;
}
.show-copy .stamps{
  justify-content: flex-start;
  margin-bottom: 18px;
  opacity: clamp(0, calc((var(--p) - 0.22) / 0.48), 1);
}
.show-note, .show-copy .text-link{
  transform: translate3d(calc((1 - var(--p)) * var(--sx) * -32px), calc((1 - var(--p)) * 14px), 0);
  opacity: clamp(0, calc((var(--p) - 0.34) / 0.5), 1);
}
.show-note{
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0 0 22px;
}

.badge{
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--ink);
  color: var(--bg);
  padding: 6px 9px;
}
.tile figcaption{ padding: 6px 6px 0; }
.tile h3{
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
}
.tile p{
  margin: 0;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 42ch;
}

@keyframes rise{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}
.tile{
  animation: rise .9s ease both;
}
.tile:nth-child(1){ animation-delay: .04s; }
.tile:nth-child(2){ animation-delay: .1s; }
.tile:nth-child(3){ animation-delay: .16s; }
.tile:nth-child(4){ animation-delay: .22s; }
.tile:nth-child(5){ animation-delay: .28s; }
.tile:nth-child(6){ animation-delay: .34s; }
.tile:nth-child(7){ animation-delay: .4s; }
.tile:nth-child(8){ animation-delay: .46s; }

.filters{
  margin: 0 0 36px;
  position: sticky;
  top: 52px;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--line);
}
.filters-line{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.filters-prompt .out{ color: var(--ink-faint); margin-right: 8px; }
.filters-prompt .flag{ color: var(--accent); }
.filters-opts{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 4px;
}
.filters-sep{
  color: var(--ink-faint);
  padding: 0 4px;
  user-select: none;
}
.filters button{
  font-family: var(--mono);
  font-size: 15px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-soft);
  padding: 2px 0;
  cursor: pointer;
  line-height: 1.3;
}
.filters button:hover{
  color: var(--ink);
}
.filters button.on{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.filters button:focus-visible{
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.about-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.about-grid .term-win{
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 520px;
}
.about-grid > div:first-child p{
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 54ch;
}
.about-grid > div:first-child p strong{ color: var(--ink); font-weight: 600; }
.term-win{
  border: 1px solid var(--term-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--term-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--term-text) 4%, transparent);
}
.term-win-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--term-rule);
  background: var(--term-bar);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
}
.term-win-dots{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.term-win-dots i{
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  opacity: 1;
}
.term-win-dots i:nth-child(1){
  background: #ff5f57;
  border-color: #e0443e;
}
.term-win-dots i:nth-child(2){
  background: #ffbd2f;
  border-color: #dea123;
}
.term-win-dots i:nth-child(3){
  background: #28c840;
  border-color: #1dad2f;
}
.meta-card{
  margin: 0;
  padding: 24px 22px 26px;
  display: grid;
  gap: 20px;
}
.term-body{
  padding: 22px 24px 24px;
  background: var(--term-bg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--term-text);
}
.term-line{
  margin: 0 0 8px;
  word-break: break-word;
}
.term-line:last-child{ margin-bottom: 0; }
.term-pair{
  margin-bottom: 12px;
}
.term-pair:last-child{
  margin-bottom: 0;
}
.term-pair .term-line{
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: nowrap;
}
.term-path-line{
  margin-bottom: 14px;
  font-size: 18px;
  line-height: 1.4;
}
.term-path{
  color: var(--accent);
  font-size: inherit;
}
.env-k{
  flex: 0 0 128px;
  color: var(--term-muted);
}
.env-v{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--term-text);
  white-space: nowrap;
}
.env-link{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.env-link:hover{ color: var(--term-text); }

#contact{
  max-width: none;
  width: 100%;
  background: var(--bg-contact);
  padding: 72px 0;
}
#contact .section-head,
#contact .about-grid{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}
#contact .about-grid > div:first-child > p:first-child{
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
  line-height: 1.3;
  max-width: 22ch;
}
.text-link{
  font-family: var(--mono);
  font-size: 16px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.text-link:hover{ color: var(--accent); border-color: var(--accent); }
.text-link.ig-link{
  border-bottom: 0;
  padding-bottom: 0;
}

footer{
  flex: 0 0 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 28px;
  min-height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}

.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(10,10,8,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 220;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox.open{ opacity: 1; pointer-events: auto; }
.lightbox img{
  max-width: 100%;
  max-height: 88vh;
  border-radius: 2px;
}
.lb-btn{
  position: absolute;
  font-family: var(--mono);
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
.lb-btn.close{ top: 24px; right: 28px; }
.lb-btn.prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.lb-btn.next{ right: 24px; top: 50%; transform: translateY(-50%); }
.lb-cap{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 14px;
  color: #bbb;
  white-space: nowrap;
}

.album{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow: hidden;
  display: none;
}
.album.open{
  display: flex;
  flex-direction: column;
}
.album-bar{
  flex: 0 0 auto;
  z-index: 2;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  font-family: var(--mono);
  font-size: 14px;
}
.album-bar button{
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-soft);
}
.album-bar button:hover{ color: var(--ink); }
.album-inner{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 20px 12px;
}
.album-head{
  flex: 0 0 auto;
  margin: 0 0 8px;
  text-align: center;
}
.album-head h2{
  font-size: clamp(22px, 3.2vw, 34px);
  margin: 0 0 4px;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.album-inner .lead{
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 42ch;
  font-size: 14px;
}
.album-stage{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
}
.album-stage-frame{
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.album-stage-frame img{
  max-width: min(100%, 980px);
  max-height: min(82vh, calc(100% - 12px));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
.album-stage-cap{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48ch;
}
.album-stage-name{ color: var(--ink); }
.album-stage-note{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
}
.album-nav{
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--radius);
  flex: 0 0 auto;
}
.album-nav:hover{
  border-color: var(--ink);
  color: var(--accent);
}
.album-strip{
  flex: 0 0 auto;
  display: flex;
  justify-content: safe center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 2px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.album-thumb{
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--bg-alt);
  cursor: pointer;
  scroll-snap-align: center;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity .2s ease, border-color .2s ease;
}
.album-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.album-thumb:hover{ opacity: 0.85; }
.album-thumb.on{
  opacity: 1;
  border-color: var(--accent);
}

body[data-page="gallery"] .piece-page{
  position: static;
  inset: auto;
  z-index: auto;
  overflow: visible;
  display: none;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 32px;
}
body[data-page="gallery"] .piece-page.open{
  display: block;
  flex: 1 0 auto;
}
body[data-page="gallery"] .gallery-browse[hidden]{
  display: none;
}
@media (min-width: 801px){
  body[data-page="gallery"].gallery-piece-open{
    overflow: hidden;
    height: 100dvh;
  }
  body[data-page="gallery"].gallery-piece-open .site-main{
    overflow: hidden;
    min-height: 0;
  }
}
body[data-page="gallery"] .piece-top{
  padding: 8px 0 12px;
}
body[data-page="gallery"] .piece-back{
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-soft);
  padding: 0;
}
body[data-page="gallery"] .piece-back:hover{
  color: var(--accent);
}
body[data-page="gallery"] .piece-body{
  padding: 0;
}
body[data-page="gallery"] .piece-layout{
  display: grid;
  grid-template-columns: minmax(180px, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: min(1040px, 100%);
  margin: 0 auto;
  min-height: calc(100dvh - 56px - 52px);
}
body[data-page="gallery"] .piece-view--set .piece-layout{
  align-items: center;
}
body[data-page="gallery"] .piece-view--set .piece-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 0;
  min-height: min(60vh, calc(100dvh - 260px));
}
body[data-page="gallery"] .piece-view--set .piece-desc,
body[data-page="gallery"] .piece-view--set .piece-slide-desc{
  margin-inline: auto;
}
body[data-page="gallery"] .piece-view--set .piece-desc.is-empty{
  display: none;
}
body[data-page="gallery"] .piece-view--set .piece-count{
  text-align: center;
  flex: 0 0 auto;
}
body[data-page="gallery"] .piece-copy{
  min-width: 0;
  padding: 4px 0;
}
body[data-page="gallery"] .piece-name{
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 12px;
}
body[data-page="gallery"] .piece-desc{
  margin: 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
body[data-page="gallery"] .piece-slide-slot{
  margin-top: 16px;
  width: 100%;
  max-width: 34ch;
  min-height: 1.2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
body[data-page="gallery"] .piece-slide-name{
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  width: 100%;
  min-height: 1.2em;
  transition: opacity 0.2s ease;
}
body[data-page="gallery"] .piece-slide-name.is-empty{
  opacity: 0;
}
body[data-page="gallery"] .piece-slide-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
  width: 100%;
  transition: opacity 0.2s ease;
}
body[data-page="gallery"] .piece-slide-desc.is-empty{
  display: none;
}
body[data-page="gallery"] .piece-count{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  margin: 14px 0 0;
}
body[data-page="gallery"] .piece-figure{
  margin: 0;
  min-width: 0;
  min-height: calc(100dvh - 56px - 52px);
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page="gallery"] .piece-figure img{
  max-width: min(100%, 800px);
  max-height: min(74vh, calc(100dvh - 170px));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
body[data-page="gallery"] .piece-stage-col{
  min-width: 0;
  min-height: calc(100dvh - 56px - 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
body[data-page="gallery"] .piece-stage{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}
body[data-page="gallery"] .piece-stage-frame{
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page="gallery"] .piece-stage-frame img{
  max-width: min(100%, 800px);
  max-height: min(66vh, calc(100dvh - 230px));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
body[data-page="gallery"] .piece-nav{
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--radius);
  flex: 0 0 auto;
}
body[data-page="gallery"] .piece-nav:hover{
  border-color: var(--ink);
  color: var(--accent);
}
body[data-page="gallery"] .piece-strip{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 2px;
  max-width: 100%;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
body[data-page="gallery"] .piece-thumb{
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  padding: 2px;
  border: 1px solid transparent;
  background: var(--bg-alt);
  cursor: pointer;
  scroll-snap-align: center;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity .2s ease, border-color .2s ease;
}
body[data-page="gallery"] .piece-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
body[data-page="gallery"] .piece-thumb:hover{ opacity: 0.82; }
body[data-page="gallery"] .piece-thumb.on{
  opacity: 1;
  border-color: var(--accent);
}

@media (max-width: 980px){
  .about-grid{
    gap: 40px;
  }
  .about-grid .term-win{
    max-width: 100%;
  }
  .hero-pair{
    gap: 40px 32px;
  }
  .show-inner{
    gap: 36px 40px;
  }
}

/* Tablets (e.g. iPad Pro): keep 2-column layout, but use iPad-mini-like vertical spacing. */
@media (min-width: 801px) and (max-width: 1180px){
  .hero{
    min-height: auto;
    align-items: flex-start;
    padding: 48px 28px 72px;
  }
  .hero-pair{
    align-self: flex-start;
    align-items: start;
    gap: 40px 40px;
  }
  .hero-copy{
    padding: 0;
  }
  .hero-shot{
    align-self: start;
    justify-self: end;
    width: min(36vw, 320px);
    height: auto;
    aspect-ratio: 1280 / 1600;
  }
}

@media (max-width: 800px){
  body[data-page="home"]{
    scroll-snap-type: none;
  }
  .hero,
  section,
  .wrap,
  footer,
  .bar-inner{
    max-width: 100%;
  }
  .show-slide{
    overflow-x: clip;
  }
  .show-pic{
    transform: translate3d(calc((1 - var(--p)) * var(--sx) * 28px), 0, 0) rotate(calc((1 - var(--p)) * var(--sx) * -2.5deg)) scale(calc(0.94 + var(--p) * 0.06));
  }
  .show-copy h2{
    transform: translate3d(calc((1 - var(--p)) * var(--sx) * -20px), calc((1 - var(--p)) * 6px), 0);
  }
  .show-note,
  .show-copy .text-link,
  .show-copy .stamps{
    transform: translate3d(calc((1 - var(--p)) * var(--sx) * -12px), calc((1 - var(--p)) * 8px), 0);
  }
  .show-copy .word{
    white-space: normal;
  }
  .about-grid{
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .about-grid .term-win{
    justify-self: stretch;
    max-width: none;
  }
  .hero{
    min-height: auto;
    padding: 48px 28px 72px;
    align-items: flex-start;
  }
  .hero-pair{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-copy{ padding: 0; }
  .hero-shot{
    width: min(72vw, 300px);
    height: auto;
    aspect-ratio: 1280 / 1600;
    justify-self: center;
    align-self: center;
    margin: 28px auto 8px;
  }
  .hero-meta{
    max-width: none;
    width: 100%;
    font-size: 16px;
  }
  .hero-scroll{ margin-top: 36px; }
  h1.wordmark{
    font-size: clamp(56px, 18vw, 110px);
  }
  .nav-toggle{ display: inline-block; }
  .bar-tools{ margin-left: auto; }
  nav.links{
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    height: auto;
    padding: 18px 28px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  body.nav-open nav.links{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  nav.links a{
    height: 48px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  nav.links a:last-child{ border-bottom: 0; }
  .work-ask,
  .work-ask.ask-center{
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 18px;
    padding: 0;
    font-size: clamp(17px, 4.6vw, 28px);
    text-align: center !important;
    white-space: normal !important;
    transform: translateY(-50%) !important;
    overflow-wrap: anywhere;
  }
  .masonry{ grid-template-columns: repeat(6, 1fr); }
  .tile[data-span], .ggrid .tile{ grid-column: span 6; }
  .tile.framed, .tile.framed:nth-child(n){ --tilt: 0deg; }
  .tile.framed .sheet, .tile.framed:hover .sheet{ transform: none; }
  .tile.album-cover img.peek{ display: block; }
  .tile.album-cover .sheet{
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .tile.album-cover{
    padding-bottom: 8px;
  }
  .tile.album-cover img.peek-0{
    transform: rotate(-6deg) translate(-10px, 1px);
  }
  .tile.album-cover img.peek-1{
    transform: rotate(5deg) translate(12px, 2px);
  }
  .show-inner{ grid-template-columns: 1fr; gap: 24px; }
  .show-slide.alt .show-inner{ grid-template-columns: 1fr; }
  .show-slide.alt .show-copy{ order: 0; }
  .show-slide{
    min-height: auto;
    padding: 64px 28px 48px;
  }
  .show-gap{ height: 100vh; }
  .term-body{
    padding: 18px 16px 20px;
    font-size: 14px;
  }
  .term-path-line{ font-size: 16px; }
  .env-k{ flex: 0 0 108px; }
  .env-v,
  .env-link{
    white-space: normal;
  }
  .filters{
    top: 48px;
    padding-top: 8px;
    padding-bottom: 12px;
  }
  .filters-line{
    font-size: 14px;
    gap: 8px 10px;
  }
  .filters button{
    font-size: 14px;
  }
  footer{
    min-height: auto;
    padding: 28px;
  }
  .lightbox{ padding: 20px; }
  .lb-btn.close{ top: 14px; right: 14px; }
  .lb-btn.prev{ left: 12px; }
  .lb-btn.next{ right: 12px; }
  .album-bar{
    padding-left: 16px;
    padding-right: 16px;
  }
  .album-inner{
    padding: 8px 12px 10px;
  }
  .album-head{ margin-bottom: 6px; }
  .album-stage{
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 6px;
  }
  .album-stage-frame img{
    max-height: min(76vh, calc(100% - 8px));
  }
  .album-nav{
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
  .album-thumb{
    width: 44px;
    height: 44px;
  }
  .album-strip{ gap: 6px; padding-top: 6px; }
  body[data-page="gallery"] .piece-page{
    padding-left: 12px;
    padding-right: 12px;
  }
  body[data-page="gallery"] .piece-layout{
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: auto;
  }
  body[data-page="gallery"] .piece-figure,
  body[data-page="gallery"] .piece-stage-col{
    min-height: auto;
  }
  body[data-page="gallery"] .piece-figure img{
    max-height: min(64vh, calc(100dvh - 190px));
  }
  body[data-page="gallery"] .piece-stage-frame img{
    max-height: min(58vh, calc(100dvh - 250px));
  }
  body[data-page="gallery"] .piece-stage{
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }
  body[data-page="gallery"] .piece-thumb{
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 560px){
  .bar-inner{
    padding: 10px 16px;
    min-height: 52px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .bar-inner, .hero, section, .wrap, footer{
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero{ padding-top: 36px; padding-bottom: 56px; }
  #contact .section-head,
  #contact .about-grid{
    padding-left: 16px;
    padding-right: 16px;
  }
  nav.links{
    top: 52px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .prompt{
    height: 28px;
    font-size: 13px;
  }
  .theme-toggle,
  .nav-toggle{
    width: 28px;
    height: 28px;
  }
  .nav-toggle span:nth-child(1){ top: 8px; }
  .nav-toggle span:nth-child(2){ top: 13px; }
  .nav-toggle span:nth-child(3){ top: 18px; }
  body.nav-open .nav-toggle span:nth-child(1),
  body.nav-open .nav-toggle span:nth-child(3){ top: 13px; }
  .hero-shot{
    width: min(68vw, 240px);
  }
  .hero-meta{
    font-size: 15px;
  }
  .hero-actions{
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .eyebrow{
    font-size: clamp(16px, 4.5vw, 22px);
    margin-bottom: 16px;
  }
  .tagline{
    font-size: clamp(15px, 4vw, 18px);
  }
  .section-head .cmd{
    font-size: clamp(17px, 4.5vw, 22px);
  }
  .about-grid > div:first-child p{
    font-size: 16px;
  }
  #contact .about-grid > div:first-child > p:first-child{
    font-size: clamp(20px, 6vw, 26px);
  }
  .masonry, .ggrid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tile[data-span], .ggrid .tile{ grid-column: 1 / -1; }
  .show-slide{ padding: 48px 16px 40px; }
  .show-gap{ height: 80vh; }
  .show-copy h2{
    font-size: clamp(28px, 9vw, 42px);
  }
  .work-ask{
    margin: 0 14px;
    font-size: clamp(15px, 4.4vw, 22px);
    transform: translateY(-50%) !important;
  }
  .work-ask .out{ margin-right: 6px; }
  .term-pair .term-line{
    gap: 8px 12px;
  }
  .env-k{
    flex: 0 0 auto;
    min-width: 6.8em;
  }
  .term-path-line{ font-size: 15px; margin-bottom: 12px; }
  footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 24px;
    padding-bottom: 36px;
  }
  .lb-cap{
    left: 50%;
    right: auto;
    bottom: 16px;
    max-width: calc(100% - 32px);
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 400px){
  .filters-line{
    font-size: 13px;
  }
  .filters button{
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce){
  .cursor, .tile, .show-copy{ animation: none; }
  .tile.framed .sheet, .tile.framed:hover .sheet{ transition: none; }
  .show-pic, .show-copy, .show-copy h2, .show-note, .show-copy .text-link, .show-copy .stamps, .show-pic img, .show-pic canvas{
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
  }
  .work-ask{
    transform: translate(calc(var(--ask-full, 0px) * -0.5), -0.7em) !important;
  }
  @media (max-width: 800px){
    .work-ask{
      transform: translateY(-50%) !important;
    }
  }
  .hero{
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-scroll svg, .work-ask .cursor{ animation: none; }
  body[data-page="home"]{ scroll-snap-type: none; }
}