/* Xander Estin — editorial layer. Loaded after theme.css on every page template.
   Colours come from tokens.json / tokens.light.json (bone + ink + oxblood). */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../assets/fonts/bodoni-moda-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../assets/fonts/bodoni-moda-var-italic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #15120f;
  --bone: #f3eee5;
  --xe-pad: clamp(1.25rem, 4vw, 3.5rem);
  --xe-max: 1440px;
  --xe-ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

html { scroll-padding-top: 6rem; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--accent-fg); }

.xe-wrap { max-width: var(--xe-max); margin-inline: auto; padding-inline: var(--xe-pad); }
.xe-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.xe-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--bone); padding: .7rem 1rem; font-size: .8rem; }
.xe-skip:focus { top: 1rem; }

:where(.xe-page, .xe-header, .xe-footer) a:focus-visible,
:where(.xe-page, .xe-header, .xe-footer) button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- labels ---------- */
.xe-eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.xe-eyebrow .num { color: var(--accent); margin-right: .9em; font-variant-numeric: tabular-nums; }

/* ---------- header (render/partials/nav.html) ---------- */
.xe-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.xe-header.is-scrolled { border-bottom-color: var(--border); }
.xe-header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}
.xe-wordmark {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.xe-wordmark em { font-style: italic; }
.xe-nav { grid-column: 1; grid-row: 1; display: flex; gap: clamp(1rem, 2vw, 2rem); }
.xe-nav a, .xe-cta {
  position: relative;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  padding-block: .4rem;
}
.xe-nav a::after, .xe-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--xe-ease);
}
.xe-nav a:hover::after, .xe-cta:hover::after,
.xe-nav a:focus-visible::after, .xe-cta:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.xe-cta { color: var(--accent); }
.xe-header-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.xe-icons { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.xe-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fg); text-decoration: none; transition: color .3s, background-color .3s, transform .45s var(--xe-ease); }
.xe-icon svg { display: block; }
.xe-icon:hover, .xe-icon:focus-visible { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-2px); }
.xe-icons--dark .xe-icon { color: var(--bone); }
.xe-icons--dark .xe-icon:hover, .xe-icons--dark .xe-icon:focus-visible { color: #d9a7a3; background: rgb(243 238 229 / .08); }
.xe-icons--lg { margin-top: .4rem; margin-left: -12px; }
.xe-icons--lg .xe-icon { width: 48px; height: 48px; }
.xe-footer .xe-icons { margin-block: -12px; }
@media (prefers-reduced-motion: reduce) { .xe-icon { transition: color .3s, background-color .3s; } .xe-icon:hover, .xe-icon:focus-visible { transform: none; } }

@media (max-width: 760px) {
  .xe-header-row { grid-template-columns: 1fr auto; row-gap: 0; min-height: 0; padding-block: .7rem .55rem; }
  .xe-wordmark { grid-column: 1; grid-row: 1; font-size: 1.2rem; }
  .xe-header-end { grid-column: 2; grid-row: 1; gap: .4rem; }
  .xe-header-end .xe-icon { width: 40px; height: 40px; }
  .xe-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: .5rem; padding-top: .35rem; }
  .xe-nav a { font-size: .66rem; letter-spacing: .16em; }
}

/* ---------- hero ---------- */
.xe-hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 8vw, 7rem); }
.xe-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 36%);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.xe-hero-text { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(0rem, 2vw, 2rem); }
.xe-hero-meta { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border-strong); padding-top: .9rem; }
.xe-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.25rem, 12vw, 12.5rem);
  line-height: .84;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--fg);
}
.xe-name .line { display: block; overflow: hidden; padding: .02em .1em .14em; margin: 0 -.1em -.14em; }
.xe-name .line-2 { font-style: italic; padding-left: .9em; }
.xe-name .line-2 .amp { color: var(--accent); }
.xe-role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  margin: 0;
  color: var(--fg);
}
.xe-role .nw { white-space: nowrap; }
.xe-role .dot { color: var(--accent); font-style: normal; padding-inline: .25em; }
.xe-hero-actions { display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; align-items: center; }
.xe-btn {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
  color: var(--bone); background: var(--ink);
  padding: 1.05rem 1.6rem;
  border: 1px solid var(--ink);
  transition: background-color .35s var(--xe-ease), color .35s var(--xe-ease);
}
.xe-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.xe-btn .arr { transition: transform .35s var(--xe-ease); }
.xe-btn:hover .arr { transform: translateX(4px); }
.xe-link {
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg); text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px;
}
.xe-link:hover { color: var(--accent); }

.xe-hero-figure { margin: 0; position: relative; }
.xe-hero-figure .frame { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-2); }
.xe-hero-figure .frame :is(figure, div) { margin: 0; height: 100%; }
.xe-hero-figure .frame img { position: absolute; inset: 0; max-width: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.xe-hero-figure figcaption { display: flex; justify-content: space-between; margin-top: .7rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px) {
  .xe-hero-grid { grid-template-columns: 1fr; }
  .xe-name { font-size: clamp(4rem, 21vw, 9rem); }
  .xe-hero-figure { max-width: 520px; width: 100%; justify-self: end; }
  .xe-hero-figure .frame { aspect-ratio: 4 / 5; }
}

/* ---------- marquee ---------- */
.xe-marquee-band { border-block: 1px solid var(--border-strong); padding-block: clamp(1.4rem, 3vw, 2.2rem); overflow: hidden; }
.xe-marquee-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.xe-marquee { overflow-x: clip; overflow-y: visible; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.xe-marquee-track { display: flex; width: max-content; }
.xe-marquee:hover .xe-marquee-track { animation-play-state: paused !important; }
.xe-marquee-group { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.xe-marquee-group li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  line-height: 1.1;
  padding-block: .08em .2em;
  white-space: nowrap;
  display: flex; align-items: center;
}
.xe-marquee-group li::after {
  content: "";
  width: .18em; height: .18em; border-radius: 50%;
  background: var(--accent);
  margin-inline: .55em;
  flex-shrink: 0;
}
.xe-agencies { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.6rem; margin-top: 1.4rem; }
.xe-agencies ul { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.xe-agencies li { font-size: .82rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .xe-marquee-track { animation: none !important; translate: none !important; flex-wrap: wrap; width: auto; }
  .xe-marquee-group[aria-hidden="true"] { display: none; }
  .xe-marquee-group { flex-wrap: wrap; }
}

/* ---------- sections ---------- */
.xe-section { padding-block: clamp(5rem, 11vw, 10rem); }
.xe-section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.xe-section-head .xe-eyebrow { grid-column: 1 / span 3; padding-bottom: .9em; }
.xe-h2 {
  grid-column: 4 / -1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 0;
}
.xe-h2 em { color: var(--accent); }
@media (max-width: 760px) {
  .xe-section-head { grid-template-columns: 1fr; gap: 1rem; }
  .xe-section-head .xe-eyebrow, .xe-h2 { grid-column: 1; }
}

/* ---------- about ---------- */
.xe-about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
.xe-about-aside { grid-column: 1 / span 4; }
.xe-about-aside .frame { aspect-ratio: 3 / 4; overflow: hidden; overflow: clip; background: var(--surface-2); position: sticky; top: 7rem; }
.xe-about-aside .frame :is(figure, div) { margin: 0; height: 100%; }
.xe-about-aside .frame img { position: absolute; inset: 0; max-width: none; width: 100%; height: 100%; object-fit: cover; display: block; }
.xe-about-body { grid-column: 6 / -1; }
.xe-lede {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0 0 2.5rem;
  color: var(--fg);
}
.xe-about-body p:not(.xe-lede) { font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.75; color: var(--fg); max-width: 38em; margin: 0 0 1.4rem; }
.xe-pull {
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem) clamp(0rem, -6vw, -4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-block: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  position: relative;
}
.xe-pull::before { content: "\201C"; display: block; color: var(--accent); font-size: 2.2em; line-height: .6; height: .45em; font-style: normal; }
.xe-pull cite { display: block; margin-top: 1.4rem; font-family: var(--font-body); font-style: normal; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .xe-about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .xe-about-aside, .xe-about-body { grid-column: 1; }
  .xe-about-aside .frame { position: relative; aspect-ratio: 4 / 5; max-width: 420px; }
  .xe-pull { margin-left: 0; }
}

/* ---------- services ---------- */
.xe-services { background: var(--surface); }
.xe-svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-strong); }
.xe-svc {
  display: grid;
  grid-template-columns: minmax(3rem, 3fr) 9fr auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(1.1rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--border-strong);
  position: relative;
  isolation: isolate;
}
.xe-svc::before {
  content: ""; position: absolute; inset: 0 calc(var(--xe-pad) * -1); z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--xe-ease);
}
.xe-svc-num { font-size: .75rem; font-weight: 500; letter-spacing: .2em; color: var(--accent); font-variant-numeric: tabular-nums; transition: color .4s var(--xe-ease); }
.xe-svc-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  transition: transform .5s var(--xe-ease), color .4s var(--xe-ease);
}
.xe-svc-mark { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2.2rem); opacity: .35; transition: transform .5s var(--xe-ease), opacity .4s, color .4s; }
@media (hover: hover) {
  .xe-svc:hover::before { transform: scaleY(1); transform-origin: top; }
  .xe-svc:hover .xe-svc-title { color: var(--bone); transform: translateX(clamp(.5rem, 2vw, 1.75rem)); font-style: italic; }
  .xe-svc:hover .xe-svc-num { color: #d9a7a3; }
  .xe-svc:hover .xe-svc-mark { color: var(--bone); opacity: 1; transform: rotate(-45deg); }
}
@media (max-width: 600px) {
  .xe-svc { grid-template-columns: 2.6rem 1fr; }
  .xe-svc-mark { display: none; }
}

/* ---------- portfolio ---------- */
.xe-grid { columns: 3; column-gap: clamp(1rem, 2.4vw, 2.25rem); }
.xe-grid-intro { break-inside: avoid; padding: 0 0 clamp(2rem, 6vw, 6rem); }
.xe-grid-intro p:not(.xe-eyebrow) { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.3; margin: 0 0 1.2rem; }
.xe-tile { break-inside: avoid; margin: 0 0 clamp(1rem, 2.4vw, 2.25rem); position: relative; display: block; }
.xe-tile .frame { overflow: hidden; overflow: clip; background: var(--surface-2); position: relative; } /* clip, not hidden: a hidden frame would become the scroll container for the inner view() timeline */
.xe-tile .frame :is(figure, div) { margin: 0; height: 100%; }
/* Absolute fill: the platform gallery wrapper's height:100% chain resolves to 0 for the img,
   and a 0-height lazy image is never fetched. Pin it to the frame (sized by aspect-ratio). */
.xe-tile .frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform 1.1s var(--xe-ease), filter .6s ease; }
.xe-tile figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.xe-tile figcaption .n { color: var(--accent); font-variant-numeric: tabular-nums; }
.xe-open {
  display: none;
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  cursor: zoom-in;
}
.xe-js .xe-open { display: block; }
.xe-open::after {
  content: "View"; position: absolute; right: .8rem; bottom: .8rem;
  font: 500 .64rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: var(--bone); padding: .55rem .7rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--xe-ease), transform .35s var(--xe-ease);
}
@media (hover: hover) {
  .xe-tile:hover img { transform: scale(1.045); }
  .xe-tile:hover .xe-open::after { opacity: 1; transform: none; }
}
.xe-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.xe-open:focus-visible::after { opacity: 1; transform: none; }
@media (max-width: 1000px) { .xe-grid { columns: 2; } }
@media (max-width: 420px) { .xe-grid { column-gap: .75rem; } .xe-tile { margin-bottom: .75rem; } .xe-tile figcaption { font-size: .58rem; letter-spacing: .12em; } }

/* ---------- lightbox ---------- */
dialog.xe-lb { display: none; }
dialog.xe-lb[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(.75rem, 2vw, 1.5rem);
  border: 0;
  background: rgb(18 15 12 / .96);
  color: var(--bone);
  overscroll-behavior: contain;
}
dialog.xe-lb::backdrop { background: transparent; }
.xe-lb-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; }
.xe-lb-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; min-height: 0; }
.xe-lb-stage figure { margin: 0; display: grid; place-items: center; height: 100%; min-height: 0; }
.xe-lb-img { max-width: 100%; max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); object-fit: contain; display: block; }
.xe-lb-cap { text-align: center; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgb(243 238 229 / .7); padding-top: .75rem; }
.xe-lb button {
  font: 500 .7rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone); background: transparent; border: 1px solid rgb(243 238 229 / .35);
  min-width: 44px; min-height: 44px; padding: .8rem 1rem; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.xe-lb button:hover { background: var(--bone); color: var(--ink); }
.xe-lb button:focus-visible { outline: 2px solid #d9a7a3; outline-offset: 3px; }
.xe-lb-nav { font-family: var(--font-display) !important; font-size: 1.4rem !important; letter-spacing: 0 !important; border: 0 !important; }
@media (max-width: 600px) {
  .xe-lb-stage { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "fig fig" "prev next"; grid-template-columns: 1fr 1fr; }
  .xe-lb-stage figure { grid-area: fig; }
  .xe-lb-prev { grid-area: prev; justify-self: start; }
  .xe-lb-next { grid-area: next; justify-self: end; }
}
html.xe-lb-lock { overflow: hidden; }

/* ---------- contact + footer (ink) ---------- */
.xe-contact { background: var(--ink); color: var(--bone); padding-block: clamp(5rem, 12vw, 11rem) clamp(3rem, 6vw, 5rem); }
.xe-contact .xe-eyebrow { color: rgb(243 238 229 / .62); }
.xe-contact .xe-eyebrow .num { color: #d9a7a3; }
.xe-cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 11rem);
  line-height: .9;
  letter-spacing: -.035em;
  margin: 1.5rem 0 clamp(2.5rem, 5vw, 4rem);
}
.xe-cta-title em { color: #d9a7a3; }
.xe-email {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 3.6vw, 3rem);
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgb(243 238 229 / .4);
  padding-bottom: .2em;
  word-break: break-word;
  transition: color .3s, border-color .3s;
}
.xe-email:hover { color: #d9a7a3; border-color: #d9a7a3; }
.xe-contact-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 7vw, 6rem); padding-top: 1.5rem; border-top: 1px solid rgb(243 238 229 / .22); }
.xe-contact-row > div { grid-column: span 4; }
.xe-contact-row p { margin: .6rem 0 0; line-height: 1.6; color: rgb(243 238 229 / .82); max-width: 30em; }
.xe-social, .xe-social nav { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: .6rem; }
.xe-social a, .xe-footer a {
  color: var(--bone); text-decoration: none;
  font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid transparent; padding-bottom: .2rem;
  transition: border-color .3s, color .3s;
}
.xe-social a:hover, .xe-footer a:hover { color: #d9a7a3; border-color: currentColor; }
.xe-contact :is(a, button):focus-visible, .xe-footer a:focus-visible { outline-color: #d9a7a3; }
@media (max-width: 760px) { .xe-contact-row > div { grid-column: 1 / -1; } }

.xe-footer { background: var(--ink); color: rgb(243 238 229 / .66); padding-block: 2rem 2.5rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.xe-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid rgb(243 238 229 / .22); padding-top: 1.5rem; }
.xe-footer .xe-footer-name { font-family: var(--font-display); text-transform: none; letter-spacing: .01em; font-size: 1.1rem; color: var(--bone); }
.xe-footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* ---------- film strip (between About and Services) ----------
   Default = native horizontal swipe with snap (JS off, reduced motion).
   With motion allowed kUInetic's horizontal-scroll pins .xe-strip-pin (inline position:sticky)
   at every width and translates the track with vertical scroll; the [style*=sticky] rules below
   switch the viewport from swipe to that pinned travel. --xe-strip-distance is the vertical
   scroll the travel takes (about the track's sideways travel, so it feels like a 1:1 drag).
   The pin sits below the sticky header; Tovu's theme-preview bar pushes the header down by
   --tovu-theme-preview-height, so the pin offset adds it too. */
.xe-strip { --kui-pin-offset: calc(68px + var(--tovu-theme-preview-height, 0px)); --xe-strip-distance: 220vh; background: var(--ink); color: var(--bone); }
.xe-strip-pin { padding-block: clamp(3rem, 6vw, 5rem); grid-template-columns: minmax(0, 1fr); }
.xe-strip-pin > * { min-width: 0; }
.xe-strip-head { box-sizing: border-box; width: min(100%, var(--xe-max)); display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.xe-strip .xe-eyebrow { color: rgb(243 238 229 / .62); }
.xe-strip .xe-eyebrow .num { color: #d9a7a3; }
.xe-strip-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: .92; letter-spacing: -.03em; margin: .7rem 0 0; }
.xe-strip-title em { color: #d9a7a3; }
.xe-strip-count { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xe-strip-now { display: inline-block; min-width: 2ch; color: #d9a7a3; }
.xe-strip-count .of { color: rgb(243 238 229 / .5); }
.xe-strip-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.xe-strip-viewport::-webkit-scrollbar { display: none; }
.xe-strip-viewport:focus-visible { outline: 2px solid #d9a7a3; outline-offset: -2px; }
.xe-strip-track { display: flex; gap: clamp(1rem, 2vw, 2rem); width: max-content; list-style: none; margin: 0; padding: 0 var(--xe-pad); }
.xe-strip-item { flex: none; scroll-snap-align: center; }
.xe-strip-item figure { margin: 0; }
.xe-strip-item .frame { --h: min(56vh, 560px); height: var(--h); width: calc(var(--h) * var(--r, .6667)); overflow: hidden; background: #2a2521; }
.xe-strip-item .frame :is(figure, div) { margin: 0; height: 100%; }
.xe-strip-item .frame figure { position: relative; }
.xe-strip-item .frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.xe-strip-item figcaption { display: flex; gap: .9rem; margin-top: .65rem; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgb(243 238 229 / .62); }
.xe-strip-item figcaption .n { color: #d9a7a3; font-variant-numeric: tabular-nums; }
.xe-strip-bar { position: relative; height: 1px; margin: clamp(1.25rem, 2.5vw, 2rem) var(--xe-pad) 0; background: rgb(243 238 229 / .2); }
.xe-strip-bar span { position: absolute; inset: 0; background: #d9a7a3; transform-origin: left center; scale: var(--xe-strip-p, 0) 1; }
.xe-strip-pin[style*="sticky"] { padding-block: 0; }
.xe-strip-pin[style*="sticky"] .xe-strip-viewport { overflow: visible; scroll-snap-type: none; }
/* Short windows (e.g. under the theme-preview bar): shrink the frames so the pinned strip fits. */
.xe-strip-pin[style*="sticky"] .xe-strip-item .frame { --h: min(56vh, 560px, calc(100vh - var(--kui-pin-offset) - 13rem)); }
@media (max-width: 47.99rem) {
  .xe-strip-item .frame { --h: min(54vh, 420px); max-width: 80vw; }
  .xe-strip-item { scroll-snap-align: start; }
  .xe-strip-viewport { scroll-padding-inline: var(--xe-pad); }
  .xe-strip-head { align-items: start; }
  .xe-strip { --xe-strip-distance: 260vh; }
  /* Pinned on phones: fit the visible screen (svh, not the URL-bar-hidden vh) below the bars. */
  .xe-strip-pin[style*="sticky"] { height: calc(100vh - var(--kui-pin-offset)) !important; height: calc(100svh - var(--kui-pin-offset)) !important; }
  .xe-strip-pin[style*="sticky"] .xe-strip-item .frame { --h: min(420px, calc(100svh - var(--kui-pin-offset) - 14rem)); }
}
/* Two-row phone header (see .xe-header-row at 760px) is taller. */
@media (max-width: 760px) { .xe-strip { --kui-pin-offset: calc(96px + var(--tovu-theme-preview-height, 0px)); } }

/* ---------- scroll-linked image motion ----------
   kUInetic's scroll-progress (on .xe-hero and .xe-about-grid) writes --kui-progress 0..1 as
   each block scrolls past the top of the viewport; these rules map it to transform/opacity.
   At progress 0 (page load, JS off, reduced motion: the effect never starts) every value is
   at rest. Gated on .xe-js + no-preference so the static page is untouched otherwise. */
.xe-marquee-band { position: relative; z-index: 1; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .xe-js .xe-hero { overflow-x: clip; }
  .xe-js .xe-hero .xe-name .line { translate: calc(var(--kui-progress, 0) * -8vw) 0; opacity: calc(1 - var(--kui-progress, 0) * .8); }
  .xe-js .xe-hero .xe-name .line-2 { translate: calc(var(--kui-progress, 0) * 8vw) 0; }
  .xe-js .xe-hero-figure { translate: 0 calc(var(--kui-progress, 0) * 12%); }
  .xe-js .xe-hero-figure img { scale: calc(1 + var(--kui-progress, 0) * .14); transform-origin: 50% 30%; }
  .xe-js .xe-about-aside img { scale: 1.12; translate: 0 calc(var(--kui-progress, 0) * -5%); }
}

/* Non-home templates (blog, privacy) keep the starter layout under this palette. */
main:not(.xe-page) h1, main:not(.xe-page) h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }