/* ==========================================================================
   DP Constructions: the design system's components for WordPress + Elementor (GP DP pack).
   Ported from repo/site/src/styles/global.css at commit 5c68120 (2026-11-09):
   - no Tailwind (A3): @theme became :root, the cascade layers are gone (Elementor's CSS is unlayered and
     would always win over layered rules), Tailwind's radius reset is replaced by the * rule in §3;
   - colour tokens are NOT defined here: GP Kit prints --color-<token>: var(--e-global-color-<id>, #hex) from
     the pack's design, so the Elementor Kit is the source of every colour (A6);
   - Lenis and the reveal styles live in the core (gp-kit/assets/css/kit.css);
   - the /systima component-library styles are left out (D12).
   Class names are unchanged, so the Astro markup and these rules still match one to one. How the classes go
   onto native Elementor widgets: adapter.css and docs/class-map.md.
   ========================================================================== */

/* ──────────── §1 Tokens (colours: see header) ──────────── */
:root {

  /* type */
  --font-display: "Xmind", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Inter", system-ui, sans-serif;   /* no monospace in this system */
  --font-weight-hair:   100;   /* display, numerals */
  --font-weight-thin:   200;   /* headlines */
  --font-weight-light:  300;   /* titles, running text */
  --font-weight-normal: 400;   /* the ceiling: buttons, nav, names, emphasis */

  --text-display:  clamp(3.25rem, 1.2rem + 7.6vw, 8rem);
  --text-h1:       clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
  --text-h2:       clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --text-h3:       clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-title:    clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --text-numeral:  clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  --text-lead:     clamp(1.125rem, 1.02rem + .4vw, 1.3125rem);
  --text-body:     1.0625rem;  /* 17px */
  --text-small:    0.9375rem;  /* 15px, the floor */

  /* space */
  --spacing-frame:   clamp(12px, 1.6vw, 20px);
  --spacing-gutter:  clamp(1.25rem, 3vw, 3rem);
  --spacing-section: clamp(4rem, 2.5rem + 6vw, 6rem);
  --container-site:  90rem;   /* 1440px: every section's content width */

  /* motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);

}

:root {
  /* cuts and tabs */
  --cut-sm: 10px;   /* buttons, fields, tabs */
  --cut-md: 16px;   /* sheets, cards, plates */
  --cut-lg: 24px;   /* panels, decks, photographs */
  --notch-w: 180px;
  --notch-d: 22px;
  --shape-cut-tl:    polygon(var(--cut-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-sm));
  --shape-cut-tr:    polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, 0 100%);
  --shape-cut-tl-br: polygon(var(--cut-lg) 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%, 0 var(--cut-lg));
  --shape-cut-tr-bl: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
  --shape-field:     polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
  --shape-control:   var(--shape-field);   /* buttons and every small control: top-right corner only */
  --shape-photo:     var(--shape-cut-tl-br); /* every photograph: one cut for all, top-left + bottom-right */
  --shape-plate-in:  polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%);
  /* frames (a border around an image): inner cut stays --cut-lg, the outer cut grows by pad·(2−√2) so the two
     diagonals run parallel at the same distance as the straight sides */
  --frame-pad: 10px;
  --folder-w: 132px;  /* folder tab on bordered boxes */
  --folder-d: 14px;
  /* layout aliases (older names some components still read) */
  --gutter: var(--spacing-gutter);
  --container-xl: var(--container-site);
  /* durations */
  --t-press: 140ms; --t-hover: 180ms; --t-reveal: 800ms;
  /* the client's own photos (public/images/gallery/dp/) came out of LightCraft a little dark: one lift for
     all of them, everywhere on the site. 1 = off. Stock photos are untouched. */
}
@media (max-width: 900px) { :root { --notch-w: 110px; } }

/* The outline frame's line colour is a registered colour so it can fade on hover (an unregistered custom
   property would snap, and the 45° corners of the frame are gradients that read it) */
@property --o-stroke { syntax: "<color>"; inherits: false; initial-value: #d9d5cc; }


/* ──────────── §3 Base ──────────── */
/* Scrollbar: a square gold thumb on a track the colour of the page, so the track disappears into the ground.
   Chrome/Edge/Firefox use the standard properties (they then ignore ::-webkit-scrollbar); Safari uses the
   webkit rules below. No radius, no border. */
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--color-gold) var(--color-gesso); }
::-webkit-scrollbar { width: 8px; height: 8px; background: var(--color-gesso); }
::-webkit-scrollbar-track { background: var(--color-gesso); border: 0; }
::-webkit-scrollbar-thumb { background: var(--color-gold); border: 0; border-radius: 0; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--color-gold-deep); }
::-webkit-scrollbar-corner { background: var(--color-gesso); }

*, *::before, *::after { border-radius: 0; }
/* The bits of Tailwind's preflight the components rely on (Hello's reset is layered below everything, see GP Kit) */
a { color: inherit; text-decoration: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background-color: transparent; border: 0; padding: 0; cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
html, body {
  background: var(--color-gesso);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--color-gold); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.dp-deck :focus-visible, .dp-footer :focus-visible { outline-color: var(--color-gold); }
b, strong { font-weight: var(--font-weight-normal); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--font-weight-thin); color: inherit; margin: 0; text-wrap: balance; }
/* Emphasis in a heading is weight, never italic: the light line carries one word at 400 */
em { font-style: normal; font-weight: var(--font-weight-normal); }


/* ──────────── §4 Type ──────────── */
.dp-display-xl { font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.035em; }
.dp-display-lg { font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: var(--text-h1); line-height: 1.06; letter-spacing: -0.03em; }
.dp-display-md { font-family: var(--font-display); font-weight: var(--font-weight-thin); font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.02em; }
/* Home hero: two lines in the 7/12 column at every desktop width */
.dp-hero-title { font-size: clamp(40px, 4.3vw, 72px); line-height: 1.06; letter-spacing: -0.035em; font-weight: var(--font-weight-hair); white-space: nowrap; }
@media (max-width: 960px) { .dp-hero-title { white-space: normal; font-size: clamp(40px, 9vw, 60px); } }
.dp-headline-lg { font-family: var(--font-display); font-weight: var(--font-weight-thin); font-size: var(--text-h3); line-height: 1.18; letter-spacing: -0.015em; }
.dp-headline-md { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.28; }
.dp-body-lg { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink); }
.dp-body-md { font-size: var(--text-body); line-height: 1.6; color: var(--color-ink); }
.dp-body-sm { font-size: var(--text-small); line-height: 1.5; color: var(--color-muted); }
.dp-label, .dp-label-sm, .dp-coord { font-family: var(--font-body); font-weight: var(--font-weight-normal); font-size: var(--text-small); line-height: 1.35; color: var(--color-muted); }
.dp-coord { display: inline-flex; align-items: center; gap: 8px; }
/* an eyebrow is its own line: block-level so its spacing and reveal transform apply */
span.dp-label-sm.reveal, span.dp-label.reveal { display: block; }
.dp-num { font-variant-numeric: tabular-nums; }
.dp-numeral { font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: var(--text-numeral); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dp-muted { color: var(--color-muted); }
.dp-gold-text { color: var(--color-gold-text); }
.dp-deck .dp-label, .dp-deck .dp-label-sm, .dp-deck .dp-coord, .dp-deck .dp-body-sm, .dp-deck .dp-muted { color: var(--color-on-deck-muted); }
.dp-deck .dp-body-lg, .dp-deck .dp-body-md { color: var(--color-on-deck); }
.dp-deck .dp-gold-text { color: var(--color-gold); }

/* ──────────── §5 Layout and surfaces ──────────── */
.dp-container { width: 100%; max-width: calc(var(--container-site) + 2 * var(--spacing-gutter)); margin: 0 auto; padding: 0 var(--spacing-gutter); }
.dp-section { padding-block: var(--spacing-section); }  /* block only: never reset the container gutter */
.dp-frame { padding-inline: var(--spacing-frame); max-width: calc(var(--container-site) + 2 * var(--spacing-gutter)); margin-inline: auto; }

/* rules: dotted ledger lines are the texture; a solid line only where an edge is meant */
.dp-rule { display: block; width: 100%; height: 0; border: 0; border-top: 1px dotted var(--color-ink); margin: 0; }
.dp-rule--soft { border-top-color: var(--color-line); }
.dp-rule--bold { border-top-style: solid; }

/* cuts (never all four corners of one element) */
.dp-cut-tl    { clip-path: var(--shape-control); }
.dp-cut-tr    { clip-path: var(--shape-cut-tr); }
.dp-cut-tl-br { clip-path: var(--shape-photo); }
.dp-cut-tr-bl { clip-path: var(--shape-cut-tr-bl); }

/* §4b Cut strokes. A clip-path removes the border along a 45° cut, so every cut element that has a border
   draws the diagonal itself: a 2px line centred on the cut (half of it survives the clip, so it reads as the
   same 1px as the border) in its own --stroke colour. Rule for new components: give the element
   `--stroke: <its border colour>`, `border: 1px solid var(--stroke)`, set its fill with background-color
   (never the background shorthand, it would wipe the line), and add its selector to the right group below. */
.dp-cut-tr,
.dp-field__input, .dp-field__textarea, .dp-calc__type-box, .dp-btn::before, .dp-badge, .dp-calc__step, .dp-lightbox__nav {
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top right; background-repeat: no-repeat; background-origin: border-box;
  background-size: var(--cut-md) var(--cut-md);
}
.dp-field__input, .dp-field__textarea, .dp-calc__type-box, .dp-btn::before, .dp-badge, .dp-calc__step, .dp-lightbox__nav { background-size: var(--cut-sm) var(--cut-sm); }
.dp-cut-tl {
  background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top left; background-repeat: no-repeat; background-origin: border-box;
  background-size: var(--cut-sm) var(--cut-sm);
}
.dp-field__select {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--stroke) calc(50% - 1px), var(--stroke) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: top right, calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: var(--cut-sm) var(--cut-sm), 5px 5px, 5px 5px;
  background-repeat: no-repeat; background-origin: border-box;
}
/* ── §4c The cut rules (DESIGN.md §5) ──
   1. Photographs in a set (gallery, hero wall, strips, cards, thumbnails): all the same cut, --shape-photo.
   2. Buttons and small controls: top-right corner only, --shape-control.
   3. Plain bordered boxes (cards, sheets, calculator, menus): no corner cut; a folder tab on the top edge.
   4. A border inside a border (plates around animations, drawings, photos): both cut, diagonals parallel.
   5. A photograph standing alone (bands, single photos): an outline frame with the photo cut. */

/* 3 · folder tab: one pseudo-element, its own top border, 45° sides stroked by corner gradients. It reaches
   2px below the box's top edge so its fill fully erases the box's border where the tab joins it (ending
   exactly on the edge left a faint second line at fractional positions). */
.dp-card, .dp-sheet, .dp-calc--card, .dp-menu, .dp-folder { position: relative; }
.dp-card::after, .dp-sheet::after, .dp-calc--card::after, .dp-menu::after, .dp-folder::after {
  --fd: calc(var(--folder-d) + 1px);
  content: ""; position: absolute; pointer-events: none; z-index: 1;
  left: var(--folder-x, 22px); top: calc(var(--folder-d) * -1 - 1px); width: var(--folder-w); height: calc(var(--fd) + 2px);
  box-sizing: border-box; border: 0; border-top: 1px solid var(--stroke, var(--color-line));
  background-color: inherit;
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% - 1px), var(--stroke, var(--color-line)) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: var(--fd) var(--fd); background-repeat: no-repeat; background-position: top left, top right; background-origin: border-box;
  clip-path: polygon(var(--fd) 0, calc(100% - var(--fd)) 0, 100% var(--fd), 100% 100%, 0 100%, 0 var(--fd));
}
.dp-folder--right::after { left: auto; right: var(--folder-x, 22px); }
/* tab on the bottom edge, right corner: the same tab flipped */
.dp-folder--bottom-right::after { left: auto; right: var(--folder-x, 22px); top: auto; bottom: calc(var(--folder-d) * -1 - 1px); transform: scaleY(-1); }
/* the tab sits above the box: keep it clear of whatever is above */
.dp-card, .dp-sheet, .dp-calc--card { margin-top: var(--folder-d); }

/* 4 · plates: outer top-right cut, inner media cut parallel to it */
.dp-image-plate {
  --plate-cut: calc(var(--cut-lg) + var(--frame-pad) * 0.586);
  clip-path: polygon(0 0, calc(100% - var(--plate-cut)) 0, 100% var(--plate-cut), 100% 100%, 0 100%);
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--stroke) calc(50% - 1px), var(--stroke) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top right; background-repeat: no-repeat; background-origin: border-box;
  background-size: var(--plate-cut) var(--plate-cut);
}
.dp-image-plate > div { clip-path: var(--shape-plate-in); }
.dp-image-plate > div.border {
  --stroke: var(--color-line);
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--stroke) calc(50% - 1px), var(--stroke) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top right; background-repeat: no-repeat; background-origin: border-box; background-size: var(--cut-lg) var(--cut-lg);
}

/* 5 · outline frame around a photograph on its own */
.dp-outline {
  --o-cut: calc(var(--cut-lg) + var(--frame-pad) * 0.586);
  --stroke: var(--color-line);
  --o-stroke: var(--stroke);
  display: block; position: relative; padding: var(--frame-pad); border: 1px solid var(--o-stroke);
  clip-path: polygon(var(--o-cut) 0, 100% 0, 100% calc(100% - var(--o-cut)), calc(100% - var(--o-cut)) 100%, 0 100%, 0 var(--o-cut));
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--o-stroke) calc(50% - 1px), var(--o-stroke) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--o-stroke) calc(50% - 1px), var(--o-stroke) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top left, bottom right; background-repeat: no-repeat; background-origin: border-box;
  background-size: var(--o-cut) var(--o-cut);
  transition: --o-stroke 0.5s var(--ease-soft);
}
.dp-outline > * { clip-path: var(--shape-photo); }
.dp-deck .dp-outline { --stroke: var(--color-deck-line); }
/* Photo.astro: the outer element is the frame itself (span, link or lightbox button) */
.dp-pic { display: block; width: 100%; background-color: transparent; color: inherit; text-decoration: none; font: inherit; text-align: left; }
button.dp-pic { cursor: zoom-in; }
/* every photograph in a link or a button (itself, or the card around it): the frame darkens and the photo
   zooms in slowly. One rule for the whole site. */
:is(a, button).dp-outline:hover, :is(a, button):hover .dp-outline { --stroke: var(--color-ink); }
:is(a, button):hover .dp-photo img { transform: scale(1.05); }
/* Photo variant="offset": the photo in its cut, and its outline (the same cut shape, the same size)
   shifted down-right behind it, so frame and picture separate. --po is the shift. The outline's 45° corners
   are drawn by gradients like every cut stroke (§4b); its colour fades on hover (--o-stroke). */
.dp-pic--offset { --po: clamp(12px, 1.4vw, 20px); --stroke: var(--color-ink); --o-stroke: var(--stroke); position: relative; isolation: isolate; margin: 0 var(--po) var(--po) 0; width: auto; transition: --o-stroke 0.5s var(--ease-soft); }
.dp-pic--offset::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: var(--po) var(--po);
  border: 1px solid var(--o-stroke); clip-path: var(--shape-photo);
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--o-stroke) calc(50% - 1px), var(--o-stroke) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--o-stroke) calc(50% - 1px), var(--o-stroke) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top left, bottom right; background-repeat: no-repeat; background-origin: border-box; background-size: var(--cut-lg) var(--cut-lg);
}
:is(a, button).dp-pic--offset:hover, :is(a, button):hover .dp-pic--offset { --stroke: var(--color-gold); }
.dp-deck .dp-pic--offset { --stroke: var(--color-on-deck-muted); }

/* Parallax utility (sections): a layer drifts by --par over its pass through the viewport. Scroll-driven
   CSS only; without scroll timelines or with reduced motion the layout simply stays still. Keep it gentle
   (20–40px). Never put it on an element that also has .reveal (both use transform). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dp-par { animation: dp-par linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes dp-par { from { translate: 0 calc(var(--par, 30px) * 0.5); } to { translate: 0 calc(var(--par, 30px) * -0.5); } }

/* A white text card with the photo cut (top-left + bottom-right 45°) and a hairline, the cut edges stroked */
.dp-cutcard {
  --stroke: var(--color-line);
  position: relative; background-color: var(--color-white); border: 1px solid var(--stroke); clip-path: var(--shape-photo);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--stroke) calc(50% - 1px), var(--stroke) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--stroke) calc(50% - 1px), var(--stroke) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top left, bottom right; background-repeat: no-repeat; background-origin: border-box; background-size: var(--cut-lg) var(--cut-lg);
}

/* Photo variant="folder": no frame, the photograph itself cut to the folder silhouette: a rectangle with a
   folder tab on its top edge (the box reaches up by the tab depth; the image runs into the tab). The
   style for photos inside cards and sheets, where a second border would be one too many. */
.dp-pic--folder { --tx: 16px; --tw: var(--folder-w); --td: var(--folder-d); }
.dp-pic--folder > .dp-photo {
  clip-path: polygon(0 var(--td), var(--tx) var(--td), calc(var(--tx) + var(--td)) 0, calc(var(--tx) + var(--tw) - var(--td)) 0, calc(var(--tx) + var(--tw)) var(--td), 100% var(--td), 100% 100%, 0 100%);
}

/* elements whose border colour comes from a Tailwind utility */
.border-ink { --stroke: var(--color-ink); }

/* surfaces: gold panel, black deck, white sheet */
.dp-panel { position: relative; background: var(--color-gold); color: var(--color-ink); }
.dp-deck  { position: relative; background: var(--color-ink); color: var(--color-on-deck); }
.dp-sheet { position: relative; --stroke: var(--color-line); background-color: var(--color-white); color: var(--color-ink); border: 1px solid var(--stroke); padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
/* tab notch: a trapezoid sticking up from a panel/deck so it slots into the section above.
   A tabbed element must not carry a clip-path itself (it would clip its own tab). */
.dp-tab::before { content: ""; position: absolute; top: calc(var(--notch-d) * -1 + 1px); left: max(var(--spacing-gutter), calc(50% - var(--container-site) / 2)); width: var(--notch-w); height: var(--notch-d); background: inherit; clip-path: polygon(var(--notch-d) 0, calc(100% - var(--notch-d)) 0, 100% 100%, 0 100%); }
.dp-tab--right::before { left: auto; right: max(var(--spacing-gutter), calc(50% - var(--container-site) / 2)); }
/* tucks: a sheet pulled over the edge of the panel behind it */
.dp-tuck-up { position: relative; z-index: 2; margin-top: -7rem; }
@media (max-width: 900px) { .dp-tuck-up { margin-top: -4.5rem; } }

/* ──────────── §6 Buttons ──────────── */
/* The fill and the cut live on ::before, the hard press shadow on ::after, so the button itself is never
   clipped and its shadow can show. Markup stays <a class="dp-btn">Label <span class="dp-btn__arrow">→</span></a>. */
.dp-btn {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-white);
  --btn-border: var(--color-ink);
  --btn-shadow: var(--color-ink);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 1.4rem;
  background: none;
  border: 0;
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-small);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out);
}
.dp-btn::before, .dp-btn::after { content: ""; position: absolute; inset: 0; clip-path: var(--shape-control); }
.dp-btn::before { z-index: -1; --stroke: var(--btn-border); background-color: var(--btn-bg); box-shadow: inset 0 0 0 1px var(--btn-border); transition: background-color var(--t-hover); }
.dp-btn::after { z-index: -2; background: var(--btn-shadow); opacity: 0; transition: transform var(--t-press) var(--ease-out), opacity var(--t-press); }
.dp-btn:hover { transform: translate(-2px, -2px); }
.dp-btn:hover::after { opacity: 1; transform: translate(4px, 4px); }
.dp-btn:active { transform: none; } .dp-btn:active::after { opacity: 0; transform: none; }
.dp-btn--gold { --btn-bg: var(--color-gold); --btn-fg: var(--color-ink); --btn-border: var(--color-gold); }
.dp-btn--secondary { --btn-bg: var(--color-white); --btn-fg: var(--color-ink); }
.dp-btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-border: transparent; padding: 0 2px; min-height: 40px; }
.dp-btn--ghost::after { display: none; }
.dp-btn--ghost:hover { transform: none; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* the arrow is positioned out of flow, so the hover underline stops at the words (decorations never reach
   absolutely positioned descendants) */
.dp-btn--ghost:has(.dp-btn__arrow) { padding-right: 1.6em; }
.dp-btn--ghost .dp-btn__arrow { position: absolute; right: 2px; top: 50%; translate: 0 -50%; line-height: 1; }
.dp-btn--sm { min-height: 40px; padding: 0 1rem; }
.dp-btn--lg { min-height: 56px; padding: 0 1.75rem; font-size: var(--text-body); }
/* on the black deck the default button turns white with a gold press; on the gold panel it stays ink */
.dp-deck .dp-btn { --btn-shadow: var(--color-gold); }
.dp-deck .dp-btn:not(.dp-btn--gold):not(.dp-btn--secondary):not(.dp-btn--ghost) { --btn-bg: var(--color-white); --btn-fg: var(--color-ink); --btn-border: var(--color-white); }
.dp-deck .dp-btn--ghost { --btn-fg: var(--color-on-deck); }
.dp-btn__arrow { display: inline-block; transition: transform var(--t-hover) var(--ease-out); }
.dp-btn:hover .dp-btn__arrow { transform: translateX(4px); }

/* ──────────── §7 Cards, chips, ledgers, rows ──────────── */
.dp-card { position: relative; --stroke: var(--color-line); background-color: var(--color-white); border: 1px solid var(--stroke); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color var(--t-hover), transform var(--t-press) var(--ease-out); }
.dp-card--ghost { background-color: transparent; }
a.dp-card { color: inherit; text-decoration: none; }
a.dp-card:hover { --stroke: var(--color-ink); transform: translateY(-2px); }
.dp-card__tag, .dp-card__coord { position: absolute; font-size: var(--text-small); font-weight: var(--font-weight-normal); color: var(--color-muted); }
.dp-card__tag { top: 1.25rem; right: 1.5rem; }
.dp-card__coord { bottom: 1.25rem; left: 1.5rem; }
.dp-card__title { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.2; margin: 0; }
.dp-card__body { font-size: var(--text-body); line-height: 1.6; margin: 0; }
@media (max-width: 640px) { .dp-card { padding: 1.5rem; } }

/* Triptych: separate sheets with a small gap (physical stock, not a hairline table) */
.dp-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dp-triptych--4 { grid-template-columns: repeat(4, 1fr); }
.dp-triptych > .dp-card { padding: 2.25rem 1.75rem 3rem; }
/* a card that opens with a folder photo: the photo's tab sits just under the card's tab */
.dp-triptych > .dp-card:has(> .dp-pic--folder:first-child) { padding-top: .75rem; --folder-x: calc(1.75rem + 16px); }
@media (max-width: 960px) { .dp-triptych { grid-template-columns: 1fr; } .dp-triptych--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dp-triptych--4 { grid-template-columns: 1fr; } }

/* No step chips and no step numbers: nothing round, lists carry their titles alone (client, 2026-11-03) */

/* Ledger: figures over a dotted rule */
.dp-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px dotted currentColor; margin: 0; }
.dp-ledger > div { padding: 1.5rem 1rem 0 0; }
.dp-ledger dd { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: var(--text-numeral); line-height: 1; letter-spacing: -0.03em; }
.dp-ledger dt { margin-top: .5rem; font-size: var(--text-small); color: var(--color-muted); }
.dp-ledger > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
@media (max-width: 900px) { .dp-ledger { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; } }

/* Data rows (projects, services): dotted ledger lines */
.dp-rows { border-top: 1px solid var(--color-ink); }
.dp-row { display: grid; grid-template-columns: 4rem 1fr auto auto; gap: 1.5rem; align-items: baseline; padding: 1.4rem .75rem 1.4rem 0; border-bottom: 1px dotted var(--color-line); color: inherit; text-decoration: none; transition: background-color var(--t-hover), padding var(--t-hover) var(--ease-out); }
a.dp-row:hover { background: var(--color-white); padding-left: .75rem; }
.dp-row__name { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.15; }
.dp-row__fig { font-size: var(--text-small); text-align: right; color: var(--color-muted); white-space: nowrap; }
@media (max-width: 640px) { .dp-row { grid-template-columns: 3rem 1fr; } .dp-row__fig { grid-column: 2; text-align: left; } }

/* Badge: square, gold for live */
.dp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; --stroke: var(--color-ink); border: 1px solid var(--stroke); font-size: var(--text-small); font-weight: var(--font-weight-normal); line-height: 1.2; color: var(--color-ink); background-color: var(--color-white); clip-path: var(--shape-control); }
.dp-badge--live { background-color: var(--color-gold); --stroke: var(--color-gold); }
.dp-badge--live::before { content: ""; width: 6px; height: 6px; background: var(--color-ink); }

/* ──────────── §8 Forms: boxed fields with a top-right cut, labels above ──────────── */
.dp-field { display: flex; flex-direction: column; gap: 8px; }
.dp-field__label { font-size: var(--text-small); font-weight: var(--font-weight-normal); color: var(--color-ink); }
.dp-field__input, .dp-field__textarea, .dp-field__select {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  --stroke: var(--color-ink); background-color: var(--color-white); border: 1px solid var(--stroke);
  color: var(--color-ink); font-family: var(--font-body); font-weight: var(--font-weight-light); font-size: 1rem; line-height: 1.4;
  outline: none; appearance: none; clip-path: var(--shape-field);
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
}
.dp-field__select { padding-right: 2.5rem; } /* arrow + cut stroke: see §4b */
.dp-field__textarea { min-height: 140px; resize: vertical; }
.dp-field__input::placeholder, .dp-field__textarea::placeholder { color: var(--color-muted); }
.dp-field__input:focus, .dp-field__textarea:focus, .dp-field__select:focus { --stroke: var(--color-gold); box-shadow: inset 0 0 0 1px var(--color-gold); }

/* ──────────── §9 Cost calculator (CostCalculator.astro) ──────────── */
.dp-calc { position: relative; display: flex; flex-direction: column; gap: 24px; }
.dp-calc--card { --stroke: var(--color-line); background-color: var(--color-white); border: 1px solid var(--stroke); padding: 2rem; }
.dp-calc--band { padding: 40px 0; border-top: 1px dotted var(--color-ink); border-bottom: 1px dotted var(--color-ink); }
.dp-calc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dp-calc__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 0; padding: 0; margin: 0; }
.dp-calc__types legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dp-calc__type { display: block; cursor: pointer; }
.dp-calc__type input { position: absolute; opacity: 0; pointer-events: none; }
.dp-calc__type-box { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-height: 100%; --stroke: var(--color-line); border: 1px solid var(--stroke); background-color: var(--color-gesso); clip-path: var(--shape-field); transition: background-color var(--t-hover), border-color var(--t-hover); }
.dp-calc__type:hover .dp-calc__type-box { --stroke: var(--color-ink); }
.dp-calc__type input:checked + .dp-calc__type-box { background-color: var(--color-ink); --stroke: var(--color-ink); color: var(--color-on-deck); }
.dp-calc__type input:focus-visible + .dp-calc__type-box { box-shadow: inset 0 0 0 2px var(--color-gold); }
.dp-calc__type-label { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.1; }
.dp-calc__type-hint { font-size: var(--text-small); color: var(--color-muted); }
.dp-calc__type input:checked + .dp-calc__type-box .dp-calc__type-hint { color: var(--color-on-deck-muted); }
.dp-calc__type-price { font-size: var(--text-small); font-weight: var(--font-weight-normal); margin-top: 6px; }
.dp-calc__type input:checked + .dp-calc__type-box .dp-calc__type-price { color: var(--color-gold); }
.dp-calc__row { display: grid; grid-template-columns: minmax(200px, 1fr) 1.4fr; gap: 32px; align-items: end; }
.dp-calc__stepper { display: grid; grid-template-columns: 44px 1fr auto 44px; align-items: center; gap: 8px; }
.dp-calc__input { text-align: center; font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: 2rem; height: 52px; -moz-appearance: textfield; }
.dp-calc__input::-webkit-outer-spin-button, .dp-calc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-calc__unit { font-size: var(--text-small); color: var(--color-muted); }
.dp-calc__step { height: 44px; width: 44px; --stroke: var(--color-ink); border: 1px solid var(--stroke); background-color: var(--color-white); color: var(--color-ink); font-size: 1.125rem; cursor: pointer; clip-path: var(--shape-control); transition: background-color var(--t-hover), color var(--t-hover); }
.dp-calc__step:hover { background-color: var(--color-ink); color: var(--color-white); }
.dp-calc__result { display: flex; flex-direction: column; gap: 6px; padding-left: 24px; border-left: 1px dotted var(--color-ink); }
.dp-calc__range { font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-ink); white-space: nowrap; }
.dp-calc__to { font-size: 0.6em; color: var(--color-muted); margin: 0 0.2em; }
.dp-calc__note { font-size: var(--text-small); line-height: 1.5; color: var(--color-muted); margin: 0; padding-top: 16px; border-top: 1px dotted var(--color-line); }
.dp-calc__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 960px) {
  .dp-calc__types { grid-template-columns: 1fr; }
  .dp-calc__row { grid-template-columns: 1fr; }
  .dp-calc__result { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px dotted var(--color-ink); }
}
@media (max-width: 640px) { .dp-calc--card { padding: 1.5rem; } }

/* ──────────── §10 Plates and photographs ──────────── */
/* Plate: a white sheet with a top-right cut holding a drawing, a model or a photograph */
.dp-image-plate { position: relative; --stroke: var(--color-line); border: 1px solid var(--stroke); background-color: var(--color-white); padding: var(--frame-pad); }
.dp-image-plate__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.dp-image-plate__coord, .dp-image-plate__tag { position: absolute; font-size: var(--text-small); font-weight: var(--font-weight-normal); line-height: 1.2; color: var(--color-ink); background: var(--color-white); padding: 4px 8px; z-index: 4; }
.dp-image-plate__coord { left: 22px; bottom: 20px; }
.dp-image-plate__tag { top: 20px; right: 44px; }

.dp-photo { position: relative; display: block; overflow: hidden; background-color: var(--color-line); clip-path: var(--shape-photo); }
.dp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-soft); }

.dp-lightbox { border: 1px solid var(--color-ink); background: var(--color-gesso); padding: 16px; max-width: min(92vw, 1400px); max-height: 92vh; width: auto; }
.dp-lightbox::backdrop { background: rgba(11, 11, 11, 0.8); }
.dp-lightbox__fig { display: flex; flex-direction: column; gap: 10px; }
.dp-lightbox__fig img { display: block; max-width: calc(92vw - 32px); max-height: calc(92vh - 110px); width: auto; height: auto; }
.dp-lightbox__cap { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.dp-lightbox__close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.dp-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; --stroke: var(--color-ink); border: 1px solid var(--stroke); background-color: var(--color-white); cursor: pointer; z-index: 2; clip-path: var(--shape-control); }
.dp-lightbox__nav:hover { background-color: var(--color-ink); color: var(--color-white); }
.dp-lightbox__nav--prev { left: 16px; }
.dp-lightbox__nav--next { right: 16px; }

/* Home hero (index.astro): a wall of project photos in five masonry columns that drift in opposite
   directions, the logo card in the middle. Each track holds its photos twice and travels -50%, so the
   loop has no seam. The wall enters photo by photo when the page is uncovered (.reveal → .is-visible). */
.dp-hero { position: relative; height: clamp(640px, 88svh, 920px); overflow: hidden; display: grid; place-items: center; }
.dp-hero__wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
html.js-loaded .dp-hero__wall.reveal { opacity: 1; transform: none; } /* the photos animate, not the wall */
.dp-hero__col { overflow: hidden; }
.dp-hero__track { display: flex; flex-direction: column; gap: 12px; animation: dp-wall-up var(--dur, 70s) linear infinite; }
.dp-hero__col--down .dp-hero__track { animation-name: dp-wall-down; }
.dp-hero__col:nth-child(2) .dp-hero__track, .dp-hero__col:nth-child(4) .dp-hero__track { margin-top: -18%; }
@keyframes dp-wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
@keyframes dp-wall-down { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(0); } }
.dp-hero__ph { margin: 0; overflow: hidden; clip-path: var(--shape-photo); background-color: var(--color-line); }
.dp-hero__ph img { display: block; width: 100%; height: auto; }
html.js-loaded .dp-hero__ph { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
html.js-loaded .dp-hero__wall.is-visible .dp-hero__ph { opacity: 1; transform: none; }
/* the wall keeps drifting under the pointer (no hover pause); photographs only, no drawings or model stills */

.dp-hero__card { position: relative; z-index: 2; width: min(560px, calc(100% - 2 * var(--spacing-gutter))); text-align: center; padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.dp-hero__logo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dp-hero__mono { display: block; width: 96px; color: var(--color-ink); }
.dp-hero__mono svg { display: block; width: 100%; height: auto; overflow: visible; }
/* CONSTRUCTIONS and the tagline are the logo's own outlines (assets/art/wordmark.svg, tagline.svg); the tagline
   keeps its width in the logo, 0.787 of the wordmark */
.dp-hero__logo { --wm: clamp(220px, 190px + 9vw, 330px); }
.dp-hero__word, .dp-hero__tag { display: block; }
.dp-hero__word { width: var(--wm); color: var(--color-ink); }
.dp-hero__tag { width: calc(var(--wm) * .787); color: var(--color-muted); }
.dp-hero__word svg, .dp-hero__tag svg { display: block; width: 100%; height: auto; }
/* the monogram draws itself, D then P then the gold bar */
html.js-loaded .dp-hero__mono path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out); }
html.js-loaded .dp-hero__mono path:nth-of-type(2) { transition-delay: .35s; }
html.js-loaded .dp-hero__mono path.accent { transition-delay: .9s; transition-duration: .6s; }
html.js-loaded .dp-hero__card.is-visible .dp-hero__mono path { stroke-dashoffset: 0; }

@media (max-width: 900px) {
  .dp-hero { height: clamp(620px, 92svh, 820px); }
  .dp-hero__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dp-hero__col:nth-child(n+4) { display: none; }
  .dp-hero__track { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-hero__track { animation: none; }
  html.js-loaded .dp-hero__ph { transition: opacity .4s; transform: none; }
  html.js-loaded .dp-hero__mono path { transition: none; stroke-dashoffset: 0; }
}

/* Photo band (PhotoBand.astro): one wide photograph in a 24px opposite-corner cut, drifting with the scroll */
.dp-band { margin: 0; }
.dp-band__media { position: relative; overflow: hidden; aspect-ratio: var(--band-aspect, 21 / 9); clip-path: var(--shape-photo); background-color: var(--color-line); }
.dp-band__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
/* the optional text card over the band: a small white sheet (folder tab) on the photo's square bottom-left
   corner; one short title and the caption as a muted line. Phones: it tucks over the photo's bottom edge. */
.dp-band__media--zoom { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.dp-band__media--zoom img { transition: transform 1.6s var(--ease-soft); }
.dp-band__media--zoom:hover img { transform: scale(1.03); }
.dp-band__frame { position: relative; }
.dp-band__card { position: absolute; z-index: 3; left: calc(var(--frame-pad) + clamp(1rem, 2.5vw, 2.5rem)); bottom: calc(var(--frame-pad) + clamp(1rem, 2.5vw, 2.5rem)); margin: 0; max-width: min(400px, 60%); padding: 1.25rem 1.6rem 1.35rem; display: flex; flex-direction: column; gap: .4rem; }
.dp-band__title { font-family: var(--font-display); font-weight: var(--font-weight-thin); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ink); text-wrap: balance; }
.dp-band__note { font-size: var(--text-small); line-height: 1.4; color: var(--color-muted); }
/* slider: the photos stack and cross-fade; the caption lines stack in one grid cell and fade with them */
.dp-band__media img.dp-band__slide { opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.dp-band__media img.dp-band__slide.is-on { opacity: 1; }
.dp-band__lines { display: grid; }
.dp-band__lines > span { grid-area: 1 / 1; opacity: 0; transition: opacity .9s var(--ease-soft); }
.dp-band__lines > span.is-on { opacity: 1; }
/* three short square bars: which photo is on, and a way to pick one (hit area larger than the bar) */
.dp-band__bars { display: flex; gap: 6px; margin-top: .55rem; }
.dp-band__bars button { position: relative; width: 22px; height: 2px; padding: 0; border: 0; background-color: var(--color-line); cursor: pointer; transition: background-color .6s var(--ease-soft), width .6s var(--ease-soft); }
.dp-band__bars button::before { content: ""; position: absolute; inset: -10px -3px; }
.dp-band__bars button:hover { background-color: var(--color-muted); }
.dp-band__bars button.is-on { width: 34px; background-color: var(--color-gold); }
@media (prefers-reduced-motion: reduce) { .dp-band__media img.dp-band__slide, .dp-band__lines > span { transition: none; } }
@media (max-width: 760px) { .dp-band__card { position: relative; left: auto; bottom: auto; max-width: none; margin: -2.5rem .75rem 0; } }
@media (max-width: 760px) { .dp-band__media { aspect-ratio: 4 / 3; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .dp-band__media img { animation: dp-band-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes dp-band-drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
}}

/* (row thumbnails retired: photos are Photo.astro everywhere) */

/* Home selected projects: four covers in outline frames stepping down, the name and kind under each */
.dp-works { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 3rem 20px; }
.dp-work { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.dp-works--stepped > .dp-work:nth-child(even) { margin-top: 3rem; }
.dp-work__name { margin-top: 8px; font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.2; }
.dp-work__meta { display: flex; align-items: center; gap: 10px; font-size: var(--text-small); color: var(--color-muted); }
@media (max-width: 960px) { .dp-works { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .dp-works { grid-template-columns: 1fr; } .dp-works--stepped > .dp-work:nth-child(even) { margin-top: 0; } }

/* Home showcase (ModelShowcase.astro): one plate cycling through the four models, the service list beside it.
   On desktop both sides share one fixed height: the plate fills it, the list sits at the top of the side and
   the active service's text is pinned to its bottom, so switching never moves anything. */
.dp-showcase { display: grid; grid-template-columns: 7fr 5fr; gap: 40px 56px; align-items: stretch; height: clamp(560px, 42vw, 680px); }
.dp-showcase__plate { position: relative; display: flex; flex-direction: column; height: 100%; }
.dp-showcase__stage { flex: 1; min-height: 0; }
.dp-showcase__bar { position: absolute; left: calc(var(--frame-pad) + 1px); right: calc(var(--frame-pad) + 1px); bottom: calc(var(--frame-pad) + 1px); height: 2px; background-color: var(--color-line); z-index: 5; }
.dp-showcase__bar b { position: absolute; inset: 0; background-color: var(--color-gold); transform: scaleX(0); transform-origin: left; }
.dp-showcase:not(.is-3d) .dp-showcase__bar { display: none; }
.dp-showcase__side { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dp-showcase__list { border-top: 1px solid var(--color-ink); }
.dp-showcase__row {
  display: block; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px dotted var(--color-line);
  background: transparent; color: var(--color-muted); text-align: left; cursor: pointer;
  transition: color 0.35s var(--ease-soft), padding-left 0.45s var(--ease-out), border-color 0.35s var(--ease-soft);
}
.dp-showcase__row:hover { color: var(--color-ink); }
.dp-showcase__row.is-active { color: var(--color-ink); padding-left: 16px; border-bottom: 1px solid var(--color-ink); }
.dp-showcase__name { font-family: var(--font-display); font-weight: var(--font-weight-thin); font-size: var(--text-h3); line-height: 1.15; letter-spacing: -0.015em; }
.dp-showcase__details { margin-top: auto; padding-top: 28px; }
.dp-showcase__detail { display: none; }
.dp-showcase__detail.is-active { display: block; animation: dp-fade-up 0.5s var(--ease-out); }
/* Word build-up: the active name, text and button come in word by word as --build (0..1, set by the
   showcase script in step with the model) passes each word's --k; they take themselves apart with it.
   Unset (no WebGL, reduced motion) = 1: everything whole. */
.dp-showcase { --build: 1; }
.dp-showcase .dp-w:not(.dp-btn) { display: inline-block; }
.dp-showcase .is-active .dp-w {
  --o: clamp(0.08, (var(--build) - var(--k) * 0.82) / 0.18, 1);
  opacity: var(--o); translate: 0 calc((1 - var(--o)) * 0.35em);
}
.dp-showcase.is-3d .dp-showcase__detail.is-active { animation: none; }
@keyframes dp-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .dp-showcase { grid-template-columns: 1fr; gap: 28px; height: auto; }
  .dp-showcase__stage { flex: none; aspect-ratio: 4 / 3; }
}

/* Home presentation rows: model plate beside the text, alternating sides */
.dp-show { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px 48px; align-items: center; padding: 56px 0; border-bottom: 1px dotted var(--color-line); }
.dp-show:first-child { border-top: 1px solid var(--color-ink); }
.dp-show:last-child { border-bottom: 0; }
.dp-show__stage { grid-column: span 7; }
.dp-show__text { grid-column: span 5; }
.dp-show--flip .dp-show__stage { grid-column: 6 / span 7; order: 2; }
.dp-show--flip .dp-show__text { grid-column: 1 / span 5; order: 1; }
@media (max-width: 960px) {
  .dp-show { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .dp-show__stage, .dp-show__text, .dp-show--flip .dp-show__stage, .dp-show--flip .dp-show__text { grid-column: 1 / -1; order: initial; }
}

/* ──────────── §11 Navigation, wordmark, monogram ──────────── */
.dp-nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 76px; border-bottom: 1px dotted var(--color-ink); }
.dp-nav__link { white-space: nowrap; font-family: var(--font-display); font-size: 1rem; letter-spacing: .01em; font-weight: var(--font-weight-normal); color: var(--color-muted); text-decoration: none; transition: color var(--t-hover); }
.dp-nav__link:hover, .dp-nav__link.is-active { color: var(--color-ink); }
.dp-nav__link.is-active { text-decoration: underline; text-decoration-color: var(--color-gold); text-underline-offset: 10px; text-decoration-thickness: 2px; }
.dp-nav__item { position: relative; display: flex; align-items: center; height: 100%; }
.dp-nav__link--menu { display: inline-flex; align-items: center; gap: 6px; }
.dp-nav__chevron { transition: transform var(--t-hover) var(--ease-out); }
.dp-nav__item--has-menu:hover .dp-nav__chevron, .dp-nav__item--has-menu:focus-within .dp-nav__chevron { transform: rotate(180deg); }

/* Dropdown: a white sheet with a top-right cut, rows on dotted lines. Opens on hover and keyboard focus;
   the ::before bridge keeps it open while the pointer crosses the gap below the link. */
.dp-menu { position: absolute; top: 100%; left: -20px; min-width: 320px; padding: 8px 0; --stroke: var(--color-ink); background-color: var(--color-white); border: 1px solid var(--stroke); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms; z-index: 50; }
.dp-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.dp-nav__item--has-menu:hover .dp-menu, .dp-nav__item--has-menu:focus-within .dp-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dp-menu__row { display: block; padding: 12px 20px; color: var(--color-ink); text-decoration: none; border-bottom: 1px dotted var(--color-line); transition: background-color var(--t-hover); }
.dp-menu__row:last-child { border-bottom: 0; }
.dp-menu__row:hover, .dp-menu__row.is-active { background: var(--color-gesso); }
.dp-menu__title { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: 1.25rem; line-height: 1.1; white-space: nowrap; }

/* The mark: the logo artwork itself (assets/art/logo.svg, monogram + CONSTRUCTIONS as outlines), ink in the
   current colour, the bar in gold */
.dp-mark { display: inline-flex; align-items: center; color: var(--color-ink); text-decoration: none; }
.dp-mark__logo { display: block; height: 38px; }
.dp-mark__logo svg { display: block; height: 100%; width: auto; }
.dp-logo .accent { fill: var(--color-gold); }
@media (max-width: 420px) { .dp-mark__logo { height: 30px; } }

/* DP monogram (src/art/monogram.svg): the logo's proportions, strokes in the current colour + the gold bar */
.dp-mono path { fill: none; stroke: currentColor; stroke-width: 11; stroke-linecap: butt; stroke-linejoin: miter; }
.dp-mono path.accent { stroke: var(--color-gold); stroke-width: 31; }
.dp-panel .dp-mono path.accent { stroke: var(--color-ink); }

/* Footer (Footer.astro, after the "Monument" exploration): a tall black sheet (white text), four quiet columns, open
   space, the name in hairline capitals across the full container width, one legal line */
.dp-footer { background-color: var(--color-ink); color: var(--color-on-deck); }
.dp-footer__inner { min-height: clamp(460px, 68svh, 760px); display: grid; grid-template-rows: auto 1fr auto auto; padding-top: 2.5rem; padding-bottom: 1.25rem; }
.dp-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-gutter); grid-row: 1; }
.dp-footer__cols > * { display: flex; flex-direction: column; gap: .2rem; font-size: 1rem; line-height: 1.5; color: var(--color-on-deck-muted); }
.dp-footer__cols b { display: block; color: var(--color-white); font-weight: var(--font-weight-normal); }
.dp-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.dp-footer__social { margin-top: .8rem !important; }
.dp-footer__social a { color: var(--color-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Social links in running content (contact page): one row, underlined, the arrow marks an external link */
.dp-social { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: 15px; }
.dp-social a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dp-social a::after, .dp-footer__social a::after { content: " ↗"; text-decoration: none; display: inline-block; margin-left: .25em; }
.dp-footer a { color: inherit; text-decoration: none; transition: color .35s var(--ease-soft); }
.dp-footer a:hover { color: var(--color-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dp-footer__big { grid-row: 3; }
/* The logo across the full width (assets/art/logo-draw.svg, centre-line strokes): white on the black sheet, the
   tagline muted, the bar gold. It draws itself when the footer comes into view: every stroke runs from 0 to its
   full length (pathLength 1), its delay (--d) and length of time (--t) set per stroke in the SVG, so the monogram
   draws first and the letters follow in a wave from left to right. The block itself doesn't fade up. */
.dp-footer__big svg { display: block; width: 100%; height: auto; overflow: visible; }
.dp-logo-draw .ink { stroke: var(--color-white); }
.dp-logo-draw .tag { stroke: var(--color-on-deck-muted); }
.dp-logo-draw .gold { stroke: var(--color-gold); }
html.js-loaded .dp-footer__big.reveal { opacity: 1; transform: none; }
html.js-loaded:not(.gp-editor) .dp-logo-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t, 1.1s) cubic-bezier(.65, 0, .35, 1) var(--d, 0s); }
html.js-loaded .dp-footer__big.is-visible .dp-logo-draw path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js-loaded:not(.gp-editor) .dp-logo-draw path { transition: none; stroke-dashoffset: 0; }
}
.dp-footer__legal { grid-row: 4; margin-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: var(--text-small); color: var(--color-on-deck-muted); padding-top: 1.25rem; border-top: 1px solid var(--color-deck-line); }
@media (max-width: 760px) {
  .dp-footer__inner { min-height: 0; row-gap: 3.5rem; }
  .dp-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
}


/* ──────────── §12 Page intro (Preloader.astro) ──────────── */
.dp-intro { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr auto; row-gap: 1.25rem; padding: 1.5rem var(--spacing-gutter); background: var(--color-gesso); clip-path: inset(0 0 0 0); transition: clip-path 0.95s cubic-bezier(0.87, 0, 0.13, 1); }
.dp-intro[hidden], html.dp-intro-skip .dp-intro { display: none; }
/* No overflow: hidden while the cover is up (it would drop the scrollbar and shift the layout on lift);
   the cover itself swallows touch panning, Lenis.stop() swallows the wheel on desktop. */
.dp-intro { touch-action: none; overscroll-behavior: contain; }
html.dp-intro-open { scrollbar-gutter: stable; }
.dp-intro.is-lifting { clip-path: inset(0 0 100% 0); }
.dp-intro__label { justify-self: start; }
.dp-intro__mark { align-self: center; justify-self: center; width: min(30vw, 38vh); color: var(--color-ink); transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out); }
.dp-intro__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.dp-intro__mark path { visibility: hidden; } /* until Vivus has set the dash: no flash of the finished mark */
.dp-intro__mark.is-ready path { visibility: visible; }
.dp-intro__foot { display: flex; align-items: center; gap: 1.5rem; transition: opacity 0.25s; }
.dp-intro__num { font-size: var(--text-small); font-variant-numeric: tabular-nums; color: var(--color-muted); min-width: 3ch; }
.dp-intro__foot i { position: relative; flex: 1; height: 1px; background: var(--color-line); }
.dp-intro__foot b { position: absolute; inset: 0; background: var(--color-gold); transform: scaleX(0); transform-origin: left; }
.dp-intro.is-leaving [data-fade] { opacity: 0; }
.dp-intro.is-leaving .dp-intro__mark { opacity: 0; transform: translateY(-18px); }

/* ──────────── §13 Page cover (PageCover.astro): the sheet with the monogram and the destination name ──────────── */
.dp-cover { position: fixed; inset: 0; z-index: 190; background: var(--color-gesso); clip-path: inset(100% 0 0 0); pointer-events: none; visibility: hidden; }
.dp-cover.is-down { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); transition: clip-path 0.52s var(--ease-wipe); }
.dp-cover.is-up { visibility: visible; clip-path: inset(0 0 100% 0); transition: clip-path 0.68s var(--ease-wipe); }
.dp-cover.is-gone { visibility: hidden; clip-path: inset(100% 0 0 0); transition: none; }
.dp-cover__inner { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 0 var(--spacing-gutter); }
.dp-cover__mono { display: block; width: clamp(130px, 17vw, 240px); color: var(--color-ink); transform: scale(0.94); transition: transform 0.7s var(--ease-out) 0.1s, opacity 0.35s var(--ease-out); }
.dp-cover__mono svg { display: block; width: 100%; height: auto; overflow: visible; }
.dp-cover__mono path { visibility: hidden; }
.dp-cover__mono.is-ready path { visibility: visible; }
.dp-cover.is-down .dp-cover__mono { transform: none; }
.dp-cover.is-up .dp-cover__mono { opacity: 0; transform: translateY(-16px); transition-delay: 0s; }
.dp-cover__rule { display: block; width: min(52vw, 520px); height: 2px; background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out) 0.2s; }
.dp-cover.is-down .dp-cover__rule { transform: scaleX(1); }
.dp-cover.is-up .dp-cover__rule { transform: scaleX(0); transform-origin: right; transition-delay: 0s; transition-duration: 0.4s; }
.dp-cover__label { font-family: var(--font-display); font-weight: var(--font-weight-hair); font-size: clamp(34px, 6.4vw, 84px); line-height: 1.08; letter-spacing: -0.03em; color: var(--color-ink); text-align: center; overflow: hidden; padding: 0.04em 0.1em; white-space: nowrap; }
.dp-cover__label span { display: inline-block; transform: translateY(112%); opacity: 0; transition: transform 0.55s var(--ease-out), opacity 0.3s var(--ease-out); }
.dp-cover.is-down .dp-cover__label span { transform: none; opacity: 1; }
.dp-cover.is-up .dp-cover__label span { transform: translateY(-112%); opacity: 0; transition-delay: 0s !important; transition-duration: 0.35s; }
.dp-cover__coord { opacity: 0; transition: opacity 0.4s var(--ease-out) 0.5s; }
.dp-cover.is-down .dp-cover__coord { opacity: 0.8; }
.dp-cover.is-up .dp-cover__coord { opacity: 0; transition-delay: 0s; }

/* ──────────── §14 Model stage (ModelStage.astro): a 3D model that builds itself in a plate ──────────── */
.dp-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.dp-stage.is-3d .dp-stage__canvas, .dp-showcase.is-3d .dp-stage__canvas { opacity: 1; }
.dp-stage__fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.dp-stage.is-3d .dp-stage__fallback { display: none; }
/* the browser's own cross-fade is off; the sheet is the transition */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ──────────── §15 Sections (src/sections/*.astro) ──────────── */
/* the split every quiet section shares: picture and text, text on the bottom line */
.dp-sx-split { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem clamp(2.5rem, 1rem + 5vw, 6rem); align-items: end; }
.dp-sx-split--flip { grid-template-columns: 5fr 7fr; }
.dp-sx-split--flip > :first-child { order: 2; }
.dp-sx-split__text { padding-bottom: .5rem; }
@media (max-width: 900px) { .dp-sx-split, .dp-sx-split--flip { grid-template-columns: 1fr; } .dp-sx-split--flip > :first-child { order: 0; } }

/* SplitGold: the photo (offset outline) and a small gold field out of its bottom-left corner */
.dp-sx-gold { position: relative; isolation: isolate; margin: 0 0 2rem 2rem; max-width: 36rem; }
.dp-sx-split--flip .dp-sx-gold { justify-self: end; width: 100%; }
.dp-sx-gold__field { position: absolute; z-index: -1; left: -2rem; bottom: -2rem; width: 38%; height: 30%; background-color: var(--color-gold); }

/* EdgeCard: the card covers the photo's last columns and hangs below it */
.dp-sx-edge { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); padding-bottom: 3.5rem; }
.dp-sx-edge__photo { grid-column: 1 / 11; grid-row: 1; }
.dp-sx-edge__card { grid-column: 8 / 13; grid-row: 1; align-self: end; margin-bottom: -3.5rem; z-index: 1; }
.dp-sx-edge--left .dp-sx-edge__photo { grid-column: 3 / 13; }
.dp-sx-edge--left .dp-sx-edge__card { grid-column: 1 / 6; }
@media (max-width: 900px) {
  .dp-sx-edge { padding-bottom: 0; }
  .dp-sx-edge__photo, .dp-sx-edge--left .dp-sx-edge__photo { grid-column: 1 / 13; }
  .dp-sx-edge__card, .dp-sx-edge--left .dp-sx-edge__card { grid-column: 2 / 13; grid-row: 2; margin: -2.5rem 0 0; }
}

/* TwoSizes: the small photo, a third of the big one, over its bottom-right corner */
.dp-sx-two { position: relative; padding-bottom: 3rem; }
.dp-sx-two__big { width: 86%; }
.dp-sx-two__small { position: absolute; right: 0; bottom: 0; width: 32%; z-index: 1; }