@charset "UTF-8";
:root {
  --ink: #050607;
  --sheet: #0d0d0f;
  --frame: #0d0d0f;
  --panel: #0d0d0f;
  --ph: #191c23;
  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.30);
  --line2: rgba(255, 255, 255, 0.30);
  --dim: #7a7a80;
  --soft: #ffffff;
  --hi: #f2f2ef;
  --accent: #F9A12D;
  --fd: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, system-ui, sans-serif;
  --fm: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fm-weight: 300;
  --ease: cubic-bezier(0.62, 0, 0.14, 1);
}

body.d2g-homepage-active {
  background: var(--ink);
  color: var(--soft);
  font-family: var(--fd);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.d2g-homepage-active .site-header:not(:has(.d2g-site-chrome)):not(:has([class*=wp-block-acf-d2g-header])),
body.d2g-homepage-active .site-footer:not(:has(.foot)),
body.d2g-homepage-active .site-title-area,
body.d2g-homepage-active .site-title-area.wp-block-template-part,
body.d2g-homepage-active .wp-block-post-title,
body.d2g-homepage-active header.wp-block-template-part:not(:has(.d2g-site-chrome)):not(:has([class*=wp-block-acf-d2g-header])),
body.d2g-homepage-active footer.wp-block-template-part:not(:has(.foot)) {
  display: none !important;
}
body.d2g-homepage-active main.site-content,
body.d2g-homepage-active .site-content.wp-block-group,
body.d2g-homepage-active .entry-content,
body.d2g-homepage-active .wp-block-post-content,
body.d2g-homepage-active .wp-block-post-content.is-layout-constrained,
body.d2g-homepage-active .is-layout-constrained,
body.d2g-homepage-active .is-layout-flow {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.d2g-homepage-active .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.d2g-homepage-active.has-global-padding,
body.d2g-homepage-active .has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.d2g-homepage-active [class*=wp-block-acf-d2g-]:not([class*=wp-block-acf-d2g-header]) {
  display: contents;
}

/* D2G header in site header template part — fixed chrome, no theme header bar */
header.site-header:has(.d2g-site-chrome),
header.site-header:has([class*=wp-block-acf-d2g-header]),
header.wp-block-template-part:has([class*=wp-block-acf-d2g-header]),
header.wp-block-template-part:has(.d2g-site-chrome) {
  display: block !important;
  position: relative;
  z-index: 100;
  height: 0;
  min-height: 0;
  overflow: visible;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* D2G footer in site footer template part — global footer, renders in normal flow */
footer.site-footer:has(.foot),
footer.wp-block-template-part:has(.foot) {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[class*=wp-block-acf-d2g-header],
.d2g-site-chrome {
  display: block !important;
  position: relative;
  min-height: 0;
  height: 0;
  overflow: visible;
  background: transparent !important;
}

body.d2g-chrome-active:not(.d2g-homepage-active) .pgmark,
body.d2g-chrome-active:not(.d2g-homepage-active) .topcta,
body.d2g-chrome-active:not(.d2g-homepage-active) .burger {
  opacity: 1;
}
body.d2g-chrome-active:not(.d2g-homepage-active) .pgmark.in,
body.d2g-chrome-active:not(.d2g-homepage-active) .topcta.in,
body.d2g-chrome-active:not(.d2g-homepage-active) .burger.in {
  opacity: 1;
}

ddg-site,
d2g-gallery,
d2g-craft {
  display: block;
  width: 100%;
  min-height: 100vh;
  background: var(--ink);
  color: var(--soft);
  font-family: var(--fd);
  font-weight: 300;
}

d2g-craft {
  position: relative;
}

ddg-site p,
ddg-site .lede,
ddg-site .sublede,
d2g-gallery p,
d2g-gallery .lede,
d2g-gallery .sublede,
d2g-craft p,
d2g-craft .lede,
d2g-craft .sublede {
  letter-spacing: 0.012em;
}

body.d2g-homepage-active .eyebrow,
ddg-site .eyebrow,
d2g-gallery .eyebrow,
d2g-craft .eyebrow {
  font-family: "Work Sans", var(--fd);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
}
body.d2g-homepage-active h1,
body.d2g-homepage-active h2,
body.d2g-homepage-active h3,
ddg-site h1,
ddg-site h2,
ddg-site h3,
d2g-gallery h1,
d2g-gallery h2,
d2g-gallery h3,
d2g-craft h1,
d2g-craft h2,
d2g-craft h3 {
  font-weight: 200;
  letter-spacing: 1px;
  line-height: 1.04;
  color: var(--hi);
  text-wrap: balance;
}
body.d2g-homepage-active .lede,
ddg-site .lede,
d2g-gallery .lede,
d2g-craft .lede {
  font-weight: 300;
  color: var(--soft);
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.55;
  letter-spacing: 0.012em;
  max-width: 46ch;
}
body.d2g-homepage-active .fx,
ddg-site .fx,
d2g-gallery .fx,
d2g-craft .fx {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
body.d2g-homepage-active .fx.in,
ddg-site .fx.in,
d2g-gallery .fx.in,
d2g-craft .fx.in {
  opacity: 1;
  transform: none;
}
body.d2g-homepage-active a,
ddg-site a,
d2g-gallery a,
d2g-craft a {
  color: var(--soft);
  text-decoration: none;
}
body.d2g-homepage-active a:hover,
ddg-site a:hover,
d2g-gallery a:hover,
d2g-craft a:hover {
  color: var(--hi);
}

/* Block editor preview — never run the full-screen hero loader overlay */
.editor-styles-wrapper,
.block-editor-writing-flow {
  background: var(--ink);
  color: var(--soft);
  font-family: var(--fd);
  /* Combined block CSS hides .fx until JS runs; keep copy visible while editing */
}
.editor-styles-wrapper .fx,
.block-editor-writing-flow .fx {
  opacity: 1 !important;
  transform: none !important;
}
.editor-styles-wrapper [class*=wp-block-acf-d2g-],
.block-editor-writing-flow [class*=wp-block-acf-d2g-] {
  display: block !important;
  max-width: none !important;
  margin: 0 0 1.5rem !important;
}
.editor-styles-wrapper:has(.wp-block-acf-d2g-gallery-wall.is-selected) .wp-block-acf-d2g-discover-work, .editor-styles-wrapper:has(.wp-block-acf-d2g-gallery-wall.is-selected) [class*=wp-block-acf-d2g-clubs], .editor-styles-wrapper:has(.wp-block-acf-d2g-triptych.is-selected) [class*=wp-block-acf-d2g-gallery-wall], .editor-styles-wrapper:has(.wp-block-acf-d2g-triptych.is-selected) .wp-block-acf-d2g-discover-work, .editor-styles-wrapper:has(.wp-block-acf-d2g-triptych.is-selected) [class*=wp-block-acf-d2g-clubs], .editor-styles-wrapper:has(.wp-block-acf-d2g-triptych.is-selected) [class*=wp-block-acf-d2g-hero], .editor-styles-wrapper:has(.wp-block-acf-d2g-discover-work.is-selected) [class*=wp-block-acf-d2g-gallery-wall], .editor-styles-wrapper:has(.wp-block-acf-d2g-discover-work.is-selected) [class*=wp-block-acf-d2g-clubs], .editor-styles-wrapper:has(.wp-block-acf-d2g-clubs.is-selected) [class*=wp-block-acf-d2g-gallery-wall], .editor-styles-wrapper:has(.wp-block-acf-d2g-clubs.is-selected) .wp-block-acf-d2g-discover-work,
.block-editor-writing-flow:has(.wp-block-acf-d2g-gallery-wall.is-selected) .wp-block-acf-d2g-discover-work,
.block-editor-writing-flow:has(.wp-block-acf-d2g-gallery-wall.is-selected) [class*=wp-block-acf-d2g-clubs],
.block-editor-writing-flow:has(.wp-block-acf-d2g-triptych.is-selected) [class*=wp-block-acf-d2g-gallery-wall],
.block-editor-writing-flow:has(.wp-block-acf-d2g-triptych.is-selected) .wp-block-acf-d2g-discover-work,
.block-editor-writing-flow:has(.wp-block-acf-d2g-triptych.is-selected) [class*=wp-block-acf-d2g-clubs],
.block-editor-writing-flow:has(.wp-block-acf-d2g-triptych.is-selected) [class*=wp-block-acf-d2g-hero],
.block-editor-writing-flow:has(.wp-block-acf-d2g-discover-work.is-selected) [class*=wp-block-acf-d2g-gallery-wall],
.block-editor-writing-flow:has(.wp-block-acf-d2g-discover-work.is-selected) [class*=wp-block-acf-d2g-clubs],
.block-editor-writing-flow:has(.wp-block-acf-d2g-clubs.is-selected) [class*=wp-block-acf-d2g-gallery-wall],
.block-editor-writing-flow:has(.wp-block-acf-d2g-clubs.is-selected) .wp-block-acf-d2g-discover-work {
  display: none !important;
}
.editor-styles-wrapper .hz,
.block-editor-writing-flow .hz {
  position: relative !important;
  height: min(70vh, 640px);
  z-index: 1 !important;
}
.editor-styles-wrapper .hz.done,
.block-editor-writing-flow .hz.done {
  display: block !important;
}
.editor-styles-wrapper .hz-shot,
.editor-styles-wrapper .hz-shot-img,
.block-editor-writing-flow .hz-shot,
.block-editor-writing-flow .hz-shot-img {
  opacity: 1 !important;
}
.editor-styles-wrapper .hz-count,
.editor-styles-wrapper .hz-cue,
.block-editor-writing-flow .hz-count,
.block-editor-writing-flow .hz-cue {
  display: none !important;
}
.editor-styles-wrapper .hz-logo,
.block-editor-writing-flow .hz-logo {
  opacity: 1 !important;
}
.editor-styles-wrapper .tri-pin,
.block-editor-writing-flow .tri-pin {
  height: auto !important;
  min-height: 70vh;
}
.editor-styles-wrapper .tri-pin.sliding .panel:first-child,
.editor-styles-wrapper .tri-pin.sliding .panel:nth-child(n+2),
.block-editor-writing-flow .tri-pin.sliding .panel:first-child,
.block-editor-writing-flow .tri-pin.sliding .panel:nth-child(n+2) {
  opacity: 1 !important;
  transform: none !important;
}
.editor-styles-wrapper .tri-bar,
.block-editor-writing-flow .tri-bar {
  display: none !important;
}
.editor-styles-wrapper .tri-wrap,
.block-editor-writing-flow .tri-wrap {
  position: relative;
  height: auto;
  min-height: 70vh;
}
.editor-styles-wrapper .tri,
.block-editor-writing-flow .tri {
  display: flex !important;
  min-height: 70vh;
}
.editor-styles-wrapper .tri .panel,
.block-editor-writing-flow .tri .panel {
  flex: 1 !important;
  min-width: 0;
  transform: none !important;
}
.editor-styles-wrapper .tri .panel .tri-art,
.block-editor-writing-flow .tri .panel .tri-art {
  opacity: 0.45 !important;
}
.editor-styles-wrapper .panel .rest,
.block-editor-writing-flow .panel .rest {
  opacity: 1 !important;
  transform: none !important;
}
.editor-styles-wrapper .panel .full,
.block-editor-writing-flow .panel .full {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  pointer-events: none !important;
}
.editor-styles-wrapper .panel .spine,
.block-editor-writing-flow .panel .spine {
  display: none;
}
.editor-styles-wrapper .tri-bar,
.block-editor-writing-flow .tri-bar {
  display: none !important;
}
.editor-styles-wrapper [class*=wp-block-acf-d2g-gallery-wall],
.editor-styles-wrapper [class*=wp-block-acf-d2g-discover-work],
.editor-styles-wrapper [class*=wp-block-acf-d2g-clubs],
.editor-styles-wrapper [class*=wp-block-acf-d2g-invite],
.block-editor-writing-flow [class*=wp-block-acf-d2g-gallery-wall],
.block-editor-writing-flow [class*=wp-block-acf-d2g-discover-work],
.block-editor-writing-flow [class*=wp-block-acf-d2g-clubs],
.block-editor-writing-flow [class*=wp-block-acf-d2g-invite] {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
}
.editor-styles-wrapper #wall,
.editor-styles-wrapper #stage,
.editor-styles-wrapper .cl-hero,
.editor-styles-wrapper .invite,
.block-editor-writing-flow #wall,
.block-editor-writing-flow #stage,
.block-editor-writing-flow .cl-hero,
.block-editor-writing-flow .invite {
  position: relative !important;
  min-height: min(72vh, 720px);
  overflow: hidden;
}
.editor-styles-wrapper #track,
.editor-styles-wrapper .track,
.block-editor-writing-flow #track,
.block-editor-writing-flow .track {
  display: block !important;
  position: relative !important;
  height: auto !important;
  min-height: 520px;
  margin-bottom: 2rem;
}
.editor-styles-wrapper #stage,
.editor-styles-wrapper .stage,
.block-editor-writing-flow #stage,
.block-editor-writing-flow .stage {
  position: relative !important;
  height: auto !important;
  min-height: 520px;
  overflow: visible !important;
}
.editor-styles-wrapper .wall,
.block-editor-writing-flow .wall {
  position: relative !important;
  inset: auto !important;
  min-height: 420px;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.editor-styles-wrapper .stmt,
.editor-styles-wrapper .gallery,
.editor-styles-wrapper .scrim,
.block-editor-writing-flow .stmt,
.block-editor-writing-flow .gallery,
.block-editor-writing-flow .scrim {
  opacity: 1 !important;
  transform: none !important;
}
.editor-styles-wrapper .stmt,
.block-editor-writing-flow .stmt {
  position: relative !important;
  inset: auto !important;
  padding: 4vh 6vw;
  min-height: auto;
}
.editor-styles-wrapper .d2g-discover-work,
.block-editor-writing-flow .d2g-discover-work {
  display: block !important;
  position: relative !important;
  min-height: 360px;
  padding: 4vh 4vw 6vh;
  margin-bottom: 2rem;
  background: var(--ink);
}
.editor-styles-wrapper .d2g-discover-work .fork,
.editor-styles-wrapper #d2gDiscoverFork,
.block-editor-writing-flow .d2g-discover-work .fork,
.block-editor-writing-flow #d2gDiscoverFork {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none;
  opacity: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px;
  min-height: 280px;
}
.editor-styles-wrapper .d2g-discover-work .door,
.block-editor-writing-flow .d2g-discover-work .door {
  min-height: 200px;
  border: 1px solid var(--line);
}
.editor-styles-wrapper .cl-trusted,
.editor-styles-wrapper .logoloop,
.block-editor-writing-flow .cl-trusted,
.block-editor-writing-flow .logoloop {
  position: relative !important;
  opacity: 1 !important;
}
.editor-styles-wrapper .marquee,
.block-editor-writing-flow .marquee {
  transform: none !important;
  flex-wrap: wrap;
  justify-content: center;
}
.editor-styles-wrapper [class*=wp-block-acf-d2g-gallery-wall] .gtrack .install,
.block-editor-writing-flow [class*=wp-block-acf-d2g-gallery-wall] .gtrack .install {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 640px;
  margin: 12px auto;
  opacity: 1 !important;
  pointer-events: none !important;
}
.editor-styles-wrapper [class*=wp-block-acf-d2g-gallery-wall]:not(.is-selected) .gtrack .install,
.block-editor-writing-flow [class*=wp-block-acf-d2g-gallery-wall]:not(.is-selected) .gtrack .install {
  display: none !important;
}
.editor-styles-wrapper [class*=wp-block-acf-d2g-gallery-wall]:not(.is-selected) .gtrack .install:first-child,
.block-editor-writing-flow [class*=wp-block-acf-d2g-gallery-wall]:not(.is-selected) .gtrack .install:first-child {
  display: block !important;
}
.editor-styles-wrapper [class*=wp-block-acf-d2g-gallery-wall].is-selected .gtrack .install,
.block-editor-writing-flow [class*=wp-block-acf-d2g-gallery-wall].is-selected .gtrack .install {
  display: block !important;
}
.editor-styles-wrapper .cl-hero .copy,
.block-editor-writing-flow .cl-hero .copy {
  position: relative;
  z-index: 2;
  padding: 8vh 6vw;
}
.editor-styles-wrapper #dock,
.block-editor-writing-flow #dock {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  flex-direction: row !important;
  justify-content: flex-start;
  padding: 0 6vw 4vh;
  gap: 10px;
}
.editor-styles-wrapper .invite .inv-inner,
.block-editor-writing-flow .invite .inv-inner {
  position: relative;
  z-index: 2;
  padding: 10vh 6vw;
  text-align: center;
}
.editor-styles-wrapper .invite .ghost,
.block-editor-writing-flow .invite .ghost {
  position: absolute;
  inset: 0;
  opacity: 0.35;
}

/* Craftsmanship's generic scroll-reveal fade-up, ported verbatim from the
   Figma prototype's own ".rv"/".rv.in" rules — shared because more than one
   Craftsmanship block uses it (the divider and closing sections so far). */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.rv.in {
  opacity: 1;
  transform: none;
}

.specular-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #f5f5f5;
  font-family: var(--fm);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.specular-button:active {
  transform: scale(0.97);
}
.specular-button__fx {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 1;
}
.specular-button__label {
  position: relative;
  z-index: 2;
}

.cta,
.topcta,
.inv-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #f5f5f5;
  font-family: var(--fm);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  padding: 21px 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.cta:active,
.topcta:active,
.inv-cta:active {
  transform: scale(0.97);
}

.back,
.fback {
  all: unset;
  position: fixed;
  z-index: 97;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 5px;
  background: transparent;
  color: #f5f5f5;
  font-family: var(--fm);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.back:active,
.fback:active {
  transform: scale(0.97);
}

.back {
  top: 26px;
  left: 6vw;
}

.fback {
  top: 24px;
  left: 26px;
}

/* D2G — shared project modal. Used by the homepage gallery wall and by the gallery page.
   Any change here lands on every image that opens a project. */
.gs-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease);
  z-index: 90;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gs-scrim.on {
  opacity: 1;
  pointer-events: auto;
}

/* dims the page content behind the open popup — every host tag a D2G page
   can be wrapped in needs covering here, or that page's popup opens "flat" */
ddg-site,
d2g-gallery,
d2g-craft {
  transition: filter 0.55s var(--ease);
}

body.sheet-open ddg-site,
body.sheet-open d2g-gallery,
body.sheet-open d2g-craft {
  filter: grayscale(1);
}

/* The page behind the open popup is still scrollable without this — the
   popup itself is `position:fixed`, so nothing else stops the body
   scrolling underneath it. */
body.sheet-open {
  overflow: hidden;
}

.sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(2200px, 97vw);
  height: 96vh;
  max-height: 96vh;
  border: none;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.006) 42%, rgba(255, 255, 255, 0.03) 100%), rgba(2, 3, 5, 0.1);
  backdrop-filter: blur(8px) saturate(185%) brightness(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(185%) brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.14), inset -1px 0 0 rgba(255, 255, 255, 0.14), inset 0 0 40px rgba(255, 255, 255, 0.035), 0 60px 170px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -46%) scale(0.985);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 91;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease), visibility 0s linear 0.55s;
}

/* the glossy corner glint — a soft diagonal sheen plus an edge-lit vignette,
   both additive (screen) so they only ever brighten, never muddy the photo
   behind the glass */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.05) 31%, transparent 42%), radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(255, 255, 255, 0.05) 92%, rgba(255, 255, 255, 0.09) 100%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.sheet > * {
  position: relative;
  z-index: 1;
}

.sheet.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.6s var(--ease), opacity 0.45s var(--ease), visibility 0s;
}

@media (max-width: 820px) {
  .sheet {
    width: 97vw;
    height: 95vh;
    max-height: 95vh;
  }
}
.sheet-head {
  flex: 0 0 auto;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
}

.sheet-body {
  flex: 1;
  position: relative;
  min-height: 0;
}

.sheet-foot {
  flex: 0 0 auto;
}

/* assembly — the clicked photo flies in (as the .gs-flier element, positioned
   entirely inline by project-modal.js) while this chrome fades in a beat
   behind it; each panel staggers slightly later than the last */
.sheet-head,
#gInfo,
.sheet-foot {
  transition: opacity 0.4s var(--ease) 0.1s, transform 0.4s var(--ease) 0.1s;
}

#gInfo {
  transition-delay: 0.16s;
}

.sheet-foot {
  transition-delay: 0.22s;
}

.sheet.assembling {
  transition: opacity 0.42s var(--ease) 0.04s, visibility 0s;
}

.sheet.assembling .gs-gallery {
  opacity: 0;
}

.sheet.preassemble .sheet-head {
  opacity: 0;
  transform: translateY(-10px);
  transition-duration: 0s;
  transition-delay: 0s;
}

.sheet.preassemble #gInfo {
  opacity: 0;
  transform: translateX(20px);
  transition-duration: 0s;
  transition-delay: 0s;
}

.sheet.preassemble .sheet-foot {
  opacity: 0;
  transform: translateY(16px);
  transition-duration: 0s;
  transition-delay: 0s;
}

.gs-gallery {
  transition: opacity 0.34s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .sheet-head,
  #gInfo,
  .sheet-foot,
  .gs-gallery {
    transition: none;
  }
}
.head-g {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 16px;
}

.hbtn {
  all: unset;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #f5f5f5;
  font-family: var(--fm);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.hbtn:active {
  transform: scale(0.97);
}

.hbtn:hover {
  color: #f5f5f5;
}

.hbtn .specular-button__fx {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 1;
}

.hbtn .specular-button__label {
  position: relative;
  z-index: 2;
}

/* ---- body: info column + vertical shot scroller ---- */
.gview {
  position: absolute;
  inset: 0;
  display: flex;
}

.g-info {
  position: relative;
  flex: 0 0 clamp(300px, 32%, 460px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.gi-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 28px 3.4vw 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.gi-scroll::-webkit-scrollbar {
  width: 3px;
}

.gi-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
}

.gi-scroll > .gi-loc {
  margin-top: auto;
}

.gi-scroll > .gi-body {
  margin-bottom: auto;
}

.gi-loc {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--soft, #fff);
  text-transform: uppercase;
}

.gi-title {
  font-weight: 200;
  font-size: clamp(28px, 3vw, 46px);
  color: var(--accent, #F9A12D);
  letter-spacing: 1px;
  line-height: 1.06;
  margin: 16px 0 22px;
}

.gi-specs {
  margin: 6px 0 26px;
  display: flex;
  flex-direction: column;
}

.gi-specs .spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.13));
}

.gi-specs .spec:last-child {
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.13));
}

.gi-specs .sk {
  font-family: "Work Sans", var(--fd);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim, #7a7a80);
  white-space: nowrap;
}

.gi-specs .sv {
  font-family: var(--fm);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--soft, #fff);
  text-align: right;
}

.gi-body p {
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.75;
  color: var(--soft, #fff);
  margin-bottom: 18px;
  max-width: 46ch;
}

.gi-tags {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 3.4vw 24px;
}

.gi-tags .tag {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim, #7a7a80);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.13));
  padding: 5px 9px;
  border-radius: 2px;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .gview {
    flex-direction: column;
  }
  .g-info {
    flex: 0 0 auto;
    max-height: 46%;
    border-right: none;
  }
  .gi-scroll {
    padding: 22px 6vw 8px;
  }
  .gi-tags {
    padding: 12px 6vw 18px;
  }
  .gi-title {
    margin: 12px 0 16px;
  }
}
.gs-gallery {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.gs-gallery::-webkit-scrollbar {
  display: none;
}

.slide {
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame {
  position: relative;
  width: min(88%, 1560px);
  height: 80%;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  transform: scale(0.85);
  opacity: 0.3;
  will-change: transform, opacity, filter;
}

.frame .shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.frame .grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 8, 10, 0.9), transparent 48%);
}

.gs-cap {
  position: absolute;
  left: 28px;
  bottom: 26px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease) 0.14s, transform 0.55s var(--ease) 0.14s;
}

.slide.infocus .gs-cap {
  opacity: 1;
  transform: none;
}

.gs-cap .cn {
  font-weight: 200;
  font-size: clamp(18px, 2vw, 28px);
  color: #fff;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.75);
}

/* ---- footer: project stepper + shot thumbs ---- */
.foot-g {
  height: 106px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
}

.thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  padding: 6px 0;
}

.thumbs::-webkit-scrollbar {
  display: none;
}

.thumb {
  all: unset;
  cursor: pointer;
  flex: 0 0 auto;
  width: 98px;
  height: 66px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background: #111;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  filter: saturate(0.4);
  transform: translateY(0);
  transition: opacity 0.35s, filter 0.35s, transform 0.35s, box-shadow 0.35s;
}

.thumb.on {
  opacity: 1;
  filter: none;
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--hi, #f2f2ef);
}

.pnav {
  all: unset;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 5px;
  color: #f5f5f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, opacity 0.3s;
}

.pnav:active {
  transform: scale(0.97);
}

.pnav[disabled] {
  opacity: 0.28;
  pointer-events: none;
}

.pnav .specular-button__fx {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 1;
}

.pnav .pn-k {
  position: relative;
  z-index: 2;
  font-family: var(--fm);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f5f5f5;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .pnav {
    padding: 14px 14px;
  }
}
@media (max-width: 820px) {
  .foot-g {
    height: 92px;
    gap: 10px;
    padding: 0 12px;
  }
  .thumb {
    width: 78px;
    height: 54px;
  }
}