/* Art Design — full-viewport horizontal project slider.
   The slider is driven by assets/hero.js. Everything here is front-end only. */

.artd-hero {
  --ink: var(--wp--preset--color--ink, #131110);
  --bone: var(--wp--preset--color--bone, #EDE8E0);
  --mute: var(--wp--preset--color--mute, #9A9289);
  --dim: #6E675F;
  --oxide: var(--wp--preset--color--oxide, #B04A31);
  --oxide-lift: var(--wp--preset--color--oxide-lift, #CC5C3D);
  --display: var(--wp--preset--font-family--display, Italiana, serif);
  --mono: var(--wp--preset--font-family--mono, monospace);
  --gut: var(--wp--preset--spacing--gutter, clamp(1.25rem, 4.2vw, 5rem));

  position: relative;

  /* Break out of whatever column the theme drops this into, and fill the
     viewport below wherever it starts. JS measures both and sets the two
     custom properties; the fallbacks below are what a no-JS visitor gets. */
  /* !important is deliberate: the block editor's constrained-layout rule sets
     margin-left/right to auto !important, and the theme's own alignfull rule
     applies its own negative margins. JS measures the real offset, so this
     needs to be the last word. */
  width: var(--adh-vw, 100vw) !important;
  max-width: var(--adh-vw, 100vw) !important;
  margin-left: var(--adh-pull, calc(50% - 50vw)) !important;
  margin-right: var(--adh-pull, calc(50% - 50vw)) !important;
  height: var(--adh-h, 100vh);
  height: var(--adh-h, 100svh);

  min-height: 26rem;
  overflow: hidden;
  isolation: isolate;
  background: #100E0D;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.artd-hero.is-dragging { cursor: grabbing; }

/* the light lives behind every bay and is panned by the same scroll position */
.artd-hero__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.artd-hero__track {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
  will-change: transform;
}
.artd-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.artd-slide__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.artd-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(rgba(19, 17, 16, .52) 0%, rgba(19, 17, 16, .08) 26%, transparent 46%),
    linear-gradient(0deg, var(--ink) 1%, rgba(19, 17, 16, .8) 27%, transparent 60%),
    radial-gradient(125% 92% at 50% 48%, transparent 36%, rgba(10, 9, 8, .58) 100%);
}

/* caption sits still while the bays travel under it */
.artd-hero__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 0 var(--gut) clamp(1.6rem, 3.6vw, 2.6rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  pointer-events: none;
}
.artd-hero__caption a,
.artd-hero__caption button { pointer-events: auto; }

.artd-hero__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: .98;
  font-size: clamp(2.7rem, 9vw, 6rem);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #F6F2EC;
  text-shadow: 0 3px 46px rgba(10, 9, 8, .66);
  white-space: nowrap;
}
.artd-hero__under {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: clamp(.85rem, 2vw, 1.3rem);
}
.artd-hero__meta {
  margin: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  color: var(--mute);
}
.artd-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .68rem 1.2rem;
  border-radius: 2px;
  background: var(--oxide);
  color: #fff;
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .4s cubic-bezier(.16, 1, .3, 1), gap .4s cubic-bezier(.16, 1, .3, 1);
}
.artd-hero__cta:hover { background: var(--oxide-lift); gap: 1.15rem; color: #fff; }
.artd-hero__cta svg { width: 1.1rem; height: .6rem; flex: none; }

.artd-hero__ctrl { display: flex; align-items: center; gap: 1.1rem; }
.artd-hero__count {
  margin: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.artd-hero__count i { color: var(--dim); font-style: normal; }
.artd-hero__arrows { display: flex; gap: 1px; }
.artd-hero__arrows button {
  width: 2.9rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: rgba(237, 232, 224, .1);
  color: var(--bone);
  backdrop-filter: blur(6px);
  transition: background .35s, color .35s;
}
.artd-hero__arrows button:hover { background: var(--oxide); color: #fff; }
.artd-hero__arrows button:focus-visible { outline: 1px solid var(--oxide-lift); outline-offset: 3px; }
.artd-hero__arrows svg { width: 1.15rem; height: .62rem; }

/* progress rail — how far along the facade you are */
.artd-hero__rail {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: 0;
  height: 1px;
  z-index: 3;
  background: rgba(237, 232, 224, .12);
}
.artd-hero__rail span {
  display: block;
  height: 100%;
  background: var(--oxide-lift);
  transform-origin: 0 50%;
  will-change: transform;
}

@media (max-width: 760px) {
  .artd-hero__name { white-space: normal; font-size: clamp(2.1rem, 10vw, 3.2rem); line-height: 1.02; }
  .artd-hero__caption { gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .artd-hero { cursor: default; }
  .artd-hero__track, .artd-slide__media { transition: none !important; }
}

/* static stand-in when WebGL2 is unavailable or motion is reduced */
.artd-hero[data-gl="0"] .artd-hero__light { display: none; }
.artd-hero[data-gl="0"] {
  background:
    linear-gradient(104deg, transparent 22%, rgba(246,242,236,.12) 30%, rgba(246,242,236,.03) 48%, transparent 58%),
    linear-gradient(104deg, transparent 58%, rgba(204,92,61,.13) 65%, transparent 74%),
    linear-gradient(#231E1A, #17140F 62%, #0E0C0B);
}

/* announced to screen readers, invisible to everyone else */
.artd-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the carousel is a focusable widget, so it needs a focus ring of its own */
.artd-hero:focus-visible {
  outline: 2px solid var(--oxide-lift);
  outline-offset: -6px;
}

/* the caption is driven frame by frame from the pan position, so it must not
   also carry a CSS transition or the two fight each other */
.artd-hero__name, .artd-hero__under { will-change: transform, opacity, filter; }

/* one hairline per project: where you are along the facade, and a way to jump */
.artd-hero__ticks { display: flex; align-items: center; gap: 2px; margin-right: .35rem; }
.artd-hero__ticks button {
  background: none; border: 0; cursor: pointer;
  padding: .75rem .3rem; line-height: 0;
}
.artd-hero__ticks span {
  display: block; width: 1.35rem; height: 2px;
  background: rgba(237, 232, 224, .28);
  transition: background .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1);
}
.artd-hero__ticks button:hover span { background: rgba(237, 232, 224, .6); }
.artd-hero__ticks button[aria-selected="true"] span {
  background: var(--oxide-lift); height: 4px;
}
.artd-hero__ticks button:focus-visible { outline: 1px solid var(--oxide-lift); outline-offset: 2px; }
@media (max-width: 560px) { .artd-hero__ticks span { width: .9rem; } }

/* ── the page's own chrome ───────────────────────────────────────────
   The theme header is hidden on hero pages and the hero carries its own bar.
   Patching the theme's header was the source of the white band above the
   hero; removing it from these pages removes the problem at the root.
   Deactivating the plugin restores the theme header untouched. */
.artd-has-hero .wp-site-blocks > header,
.artd-has-hero header.wp-block-template-part { display: none !important; }

.artd-has-hero .wp-site-blocks { padding-top: 0 !important; margin-top: 0 !important; }
.artd-has-hero .wp-site-blocks > main { padding-top: 0 !important; margin-top: 0 !important; }
.artd-has-hero .wp-site-blocks > main > :first-child,
.artd-has-hero .entry-content > :first-child,
.artd-has-hero .wp-block-post-content > :first-child { margin-top: 0 !important; }

/* The white band above the hero: the theme's template opens <main> with a
   group holding two spacers (spacing--50 + spacing--30). It is the first
   child of <main> and contains nothing else, so on hero pages it goes.
   Every other page keeps it. */
.artd-has-hero .wp-site-blocks > main > .wp-block-group:first-child { display: none !important; }

/* Hiding that group leaves it in the DOM, so it still matches :first-child and
   the flow layout hands .entry-content a block-gap margin instead. That margin
   is the last sliver of white above the hero. */
.artd-has-hero .wp-site-blocks > main > .entry-content,
.artd-has-hero .wp-site-blocks > main > .wp-block-post-content { margin-top: 0 !important; }


/* ── bar: menu upper left, wordmark upper right ─────────────────────── */
.artd-bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gut);
  pointer-events: none;
}
.artd-bar > * { pointer-events: auto; }

.artd-burger {
  display: grid;
  gap: 6px;
  width: 2rem;
  padding: .5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.artd-burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--bone);
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.artd-burger:hover span { background: var(--oxide-lift); }
.artd-burger:focus-visible { outline: 1px solid var(--oxide-lift); outline-offset: 6px; }
.artd-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.artd-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.artd-wordmark {
  font-family: var(--display);
  font-size: 1.24rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
}
.artd-wordmark:hover { color: var(--bone); }

/* ── overlay menu ───────────────────────────────────────────────────── */
.artd-menu {
  position: absolute;
  inset: 0;
  z-index: 19;
  display: grid;
  place-items: center;
  background: rgba(15, 13, 12, .94);
  backdrop-filter: blur(18px);
}
.artd-menu[hidden] { display: none; }
.artd-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.artd-menu li { margin: 0 0 .35rem; }
.artd-menu a {
  font-family: var(--display);
  font-size: clamp(1.6rem, 5vw, 3rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  transition: color .35s;
}
.artd-menu a:hover { color: var(--oxide-lift); }
@media (max-width: 560px) { .artd-wordmark { font-size: 1rem; letter-spacing: .26em; } }


/* ── centred editorial layout ────────────────────────────────────────
   Title sits on the vertical centre, controls move to the edges so the
   image is never crowded. Overrides the earlier bottom-left arrangement. */
.artd-hero__caption {
  inset: 0;
  display: block;
  padding: 0 var(--gut);
}
.artd-hero__caption > div:first-child {
  position: absolute;
  top: 50%;
  left: var(--gut);
  right: var(--gut);
  transform: translateY(-50%);
  max-width: 46rem;
}
.artd-hero__name {
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  letter-spacing: .14em;
  line-height: 1.16;
  white-space: normal;
  text-shadow: 0 2px 40px rgba(10, 9, 8, .5);
}
.artd-hero__under { margin-top: clamp(1.4rem, 3vw, 2.4rem); }

/* the call to action reads as a link here, not a filled button */
.artd-hero__cta {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--bone);
  letter-spacing: .28em;
  font-size: .6875rem;
}
.artd-hero__cta:hover { background: none; color: var(--oxide-lift); gap: 1.2rem; }

/* controls leave the caption flow entirely */
.artd-hero__ctrl {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.artd-hero__ctrl > * { pointer-events: auto; }

/* prev and next ride the left and right edges, vertically centred */
.artd-hero__arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding: 0 clamp(.35rem, 1.4vw, 1rem);
  pointer-events: none;
}
.artd-hero__arrows button {
  pointer-events: auto;
  width: 3rem;
  height: 3rem;
  background: none;
  backdrop-filter: none;
  color: rgba(237, 232, 224, .62);
  transition: color .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.artd-hero__arrows button:hover { background: none; color: var(--bone); }
.artd-hero__arrows button:first-child:hover { transform: translateX(-4px); }
.artd-hero__arrows button:last-child:hover { transform: translateX(4px); }
.artd-hero__arrows svg { width: 1.4rem; height: .75rem; }

/* dots centred along the bottom edge */
.artd-hero__ticks {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 3vw, 2.2rem);
  transform: translateX(-50%);
  margin: 0;
  gap: 4px;
}
.artd-hero__ticks button { padding: .6rem .25rem; }
.artd-hero__ticks span { width: 1.6rem; }

/* the counter keeps to the bottom left, quietly */
.artd-hero__count {
  position: absolute;
  left: var(--gut);
  bottom: clamp(1.5rem, 3vw, 2.3rem);
  margin: 0;
  color: var(--mute);
}
.artd-hero__count i { color: var(--dim); }

@media (max-width: 620px) {
  .artd-hero__count { display: none; }
  .artd-hero__arrows button { width: 2.4rem; height: 2.4rem; }
}


/* ── load sequence ───────────────────────────────────────────────────
   The name resolves first, then the light arrives behind it. Every hidden
   state below is gated on .is-intro, which only JavaScript ever adds — so
   if the script fails the hero simply renders, fully visible, at rest. */
.artd-hero.is-intro .artd-hero__light,
.artd-hero.is-intro .artd-hero__track { opacity: 0; }
.artd-hero.is-intro .artd-hero__under,
.artd-hero.is-intro .artd-bar,
.artd-hero.is-intro .artd-hero__ctrl { opacity: 0; }
.artd-hero.is-intro .artd-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  filter: blur(8px);
}

.artd-hero.is-playing .artd-word {
  animation: artd-word-in .85s cubic-bezier(.16, 1, .3, 1) forwards;
}
.artd-hero.is-playing .artd-hero__under {
  animation: artd-rise-in .7s cubic-bezier(.16, 1, .3, 1) .42s forwards;
}
.artd-hero.is-playing .artd-hero__light,
.artd-hero.is-playing .artd-hero__track {
  animation: artd-light-in 1.5s cubic-bezier(.16, 1, .3, 1) .5s forwards;
}
.artd-hero.is-playing .artd-bar {
  animation: artd-fade-in .8s cubic-bezier(.16, 1, .3, 1) .95s forwards;
}
.artd-hero.is-playing .artd-hero__ctrl {
  animation: artd-fade-in .8s cubic-bezier(.16, 1, .3, 1) 1.15s forwards;
}

@keyframes artd-word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes artd-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes artd-fade-in {
  to { opacity: 1; }
}
/* the light blooms rather than cuts: it brightens and settles out of a slow push in */
@keyframes artd-light-in {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: none; }
}

/* nothing is ever hidden for someone who asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .artd-hero.is-intro .artd-hero__light,
  .artd-hero.is-intro .artd-hero__track,
  .artd-hero.is-intro .artd-hero__under,
  .artd-hero.is-intro .artd-bar,
  .artd-hero.is-intro .artd-hero__ctrl,
  .artd-hero.is-intro .artd-word { opacity: 1; transform: none; filter: none; }
}


/* ── title scale and the space beneath it ────────────────────────────
   Smaller and much more widely tracked, with the link sitting well clear
   of it rather than tucked underneath. */
.artd-hero__name {
  font-size: clamp(1.8rem, 3.9vw, 3.4rem);
  letter-spacing: .26em;
  line-height: 1.28;
}
.artd-hero__under {
  margin-top: clamp(2.4rem, 6.5vw, 6rem);
  gap: 2.2rem;
}

@media (max-width: 760px) {
  .artd-hero__name { font-size: clamp(1.6rem, 6.4vw, 2.2rem); letter-spacing: .2em; }
  .artd-hero__under { margin-top: clamp(1.8rem, 6vw, 3rem); gap: 1.2rem; }
}


/* ── arrows: legible over a bright photo ─────────────────────────────
   A bare chevron disappeared against pale skies. A dark blurred disc with a
   hairline ring keeps them readable over any image without weighing down
   the composition. */
.artd-hero__arrows button {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: rgba(18, 16, 15, .38);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(237, 232, 224, .24);
  color: var(--bone);
  box-shadow: 0 2px 20px rgba(10, 9, 8, .3);
}
.artd-hero__arrows button:hover {
  background: rgba(18, 16, 15, .62);
  border-color: var(--oxide-lift);
  color: #fff;
}
.artd-hero__arrows svg { width: 1.25rem; height: .7rem; }

@media (max-width: 620px) {
  .artd-hero__arrows button { width: 2.6rem; height: 2.6rem; }
  .artd-hero__arrows svg { width: 1.05rem; height: .6rem; }
}


/* ── arrows to the bottom left ───────────────────────────────────────
   Off the vertical centre so they never sit on the title, with the
   counter reading alongside them. Dots stay centred on the bottom edge. */
.artd-hero__arrows {
  top: auto;
  left: var(--gut);
  right: auto;
  bottom: clamp(1.3rem, 2.8vw, 2rem);
  transform: none;
  width: auto;
  padding: 0;
  gap: .5rem;
}
.artd-hero__count {
  left: calc( var(--gut) + 8.2rem );
  bottom: clamp(1.9rem, 3.4vw, 2.6rem);
}
@media (max-width: 620px) {
  .artd-hero__count { display: none; }
  .artd-hero__arrows { gap: .4rem; }
}


/* ── arrows to the bottom right ──────────────────────────────────────
   Counter moves to the bottom left so the two do not collide. */
.artd-hero__arrows {
  left: auto;
  right: var(--gut);
}
.artd-hero__count {
  left: var(--gut);
  right: auto;
}


/* ── menu as a left drawer ───────────────────────────────────────────
   A pale panel slides in over the image, the rest of the hero dims behind
   it, and the burger shifts clear of the panel as it becomes the close X. */
.artd-menu {
  position: absolute;
  inset: 0;
  z-index: 19;
  display: block;
  background: none;
  backdrop-filter: none;
}
.artd-menu[hidden] { display: none; }

.artd-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, .55);
  opacity: 0;
  transition: opacity .5s var(--ease, cubic-bezier(.16,1,.3,1));
  cursor: pointer;
}

.artd-menu__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(14rem, 24vw, 21rem);
  max-width: 82vw;
  background: var(--bone);
  color: #17130F;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transform: translateX(-100%);
  transition: transform .62s var(--ease, cubic-bezier(.16,1,.3,1));
  box-shadow: 0 0 60px rgba(10, 9, 8, .4);
  overflow-y: auto;
}

.artd-menu.is-open .artd-menu__scrim { opacity: 1; }
.artd-menu.is-open .artd-menu__panel { transform: none; }

.artd-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.artd-menu__list li { margin: 0 0 .9rem; }
.artd-menu__list a {
  font-family: var(--sans, Jost, system-ui, sans-serif);
  font-weight: 300;
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #17130F;
  text-decoration: none;
  transition: color .35s;
}
.artd-menu__list a:hover { color: var(--oxide); }
.artd-menu__list .current_page_item > a { color: var(--oxide); }

.artd-menu__legal {
  position: absolute;
  left: clamp(1.5rem, 3vw, 2.5rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  font-family: var(--sans, Jost, system-ui, sans-serif);
  font-size: .6875rem;
  line-height: 1.7;
  color: rgba(23, 19, 15, .55);
}

/* the burger steps clear of the panel and turns into the close control */
.artd-bar { transition: transform .62s var(--ease, cubic-bezier(.16,1,.3,1)); }
.artd-hero.is-menu-open .artd-bar { transform: translateX(clamp(14rem, 24vw, 21rem)); }
.artd-hero.is-menu-open .artd-wordmark { opacity: 0; transition: opacity .3s; }

@media (max-width: 620px) {
  .artd-hero.is-menu-open .artd-bar { transform: translateX(min(82vw, 21rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .artd-menu__panel, .artd-menu__scrim, .artd-bar { transition: none; }
}


/* ── drawer foot ─────────────────────────────────────────────────────
   Nav holds the vertical centre; language, social and the copyright line
   stack at the foot. Both are in normal flow so they cannot collide. */
.artd-menu__panel {
  justify-content: space-between;
  padding-block: clamp(3.5rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.artd-menu__list { margin: auto 0; }

.artd-menu__foot { display: flex; flex-direction: column; gap: 1.1rem; }

.artd-menu__lang,
.artd-menu__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}
.artd-menu__lang a,
.artd-menu__social a {
  font-family: var(--sans, Jost, system-ui, sans-serif);
  font-weight: 300;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(23, 19, 15, .6);
  text-decoration: none;
  transition: color .3s;
}
.artd-menu__lang a:hover,
.artd-menu__social a:hover { color: var(--oxide); }
.artd-menu__lang .is-current a { color: #17130F; }
/* a hairline between language options, in the page's own vocabulary */
.artd-menu__lang li + li { border-left: 1px solid rgba(23, 19, 15, .22); padding-left: .9rem; }

.artd-menu__legal {
  position: static;
  margin: 0;
  font-family: var(--sans, Jost, system-ui, sans-serif);
  font-size: .6875rem;
  line-height: 1.7;
  color: rgba(23, 19, 15, .5);
}


/* ── no ring on the container ────────────────────────────────────────
   The section is no longer focusable, so clicking the hero cannot draw an
   outline across it. The controls inside keep their own focus rings, which
   is where a keyboard user actually needs them. */
.artd-hero:focus-visible,
.artd-hero:focus { outline: none; }

/* ── legibility over bright photography ──────────────────────────────
   The even vignette was tuned for the dark generated light study. A real
   photo can be bright exactly where the caption sits, so weight the scrim
   toward the left where the text lives. */
.artd-hero__scrim {
  background:
    linear-gradient(90deg, rgba(10, 9, 8, .76) 0%, rgba(10, 9, 8, .52) 26%, rgba(10, 9, 8, .12) 54%, transparent 76%),
    linear-gradient(rgba(19, 17, 16, .5) 0%, rgba(19, 17, 16, .06) 24%, transparent 44%),
    linear-gradient(0deg, var(--ink) 0%, rgba(19, 17, 16, .74) 22%, transparent 54%),
    radial-gradient(125% 92% at 50% 48%, transparent 40%, rgba(10, 9, 8, .5) 100%);
}
.artd-hero__name { text-shadow: 0 2px 30px rgba(10, 9, 8, .9), 0 1px 3px rgba(10, 9, 8, .5); }
.artd-hero__meta {
  color: #CFC8BE;
  text-shadow: 0 1px 18px rgba(10, 9, 8, .9);
}
.artd-hero__cta { text-shadow: 0 1px 18px rgba(10, 9, 8, .85); }

/* ── menu button ─────────────────────────────────────────────────────
   Two rules of unequal length that even up on hover — reads as a control
   rather than a stray hairline. */
.artd-burger {
  width: 2.2rem;
  gap: 7px;
  padding: .55rem 0;
}
.artd-burger span {
  height: 1.5px;
  background: var(--bone);
  box-shadow: 0 1px 12px rgba(10, 9, 8, .8);
  transform-origin: left center;
  transition: width .45s var(--ease, cubic-bezier(.16,1,.3,1)),
              transform .45s var(--ease, cubic-bezier(.16,1,.3,1)),
              background .35s;
}
.artd-burger span:first-child { width: 100%; }
.artd-burger span:last-child  { width: 62%; }
.artd-burger:hover span:last-child { width: 100%; }

/* crossing into the close mark */
.artd-burger[aria-expanded="true"] span { width: 100%; }
.artd-burger[aria-expanded="true"] span:first-child { transform: translateY(4.2px) rotate(45deg); }
.artd-burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.2px) rotate(-45deg); }
.artd-burger[aria-expanded="true"] span { background: #17130F; box-shadow: none; }


/* ── drawer focus handling ───────────────────────────────────────────
   The panel receives focus on open so keyboard users land inside it; it is
   a container, not a control, so it shows no ring. Links keep a ring, but
   only for real keyboard focus — never for a click. */
.artd-menu__panel:focus,
.artd-menu__panel:focus-visible { outline: none; }
.artd-menu__list a:focus:not(:focus-visible),
.artd-menu__lang a:focus:not(:focus-visible),
.artd-menu__social a:focus:not(:focus-visible) { outline: none; }
.artd-menu__list a:focus-visible,
.artd-menu__lang a:focus-visible,
.artd-menu__social a:focus-visible {
  outline: 1px solid var(--oxide);
  outline-offset: 4px;
}

/* ── burger: three rules ─────────────────────────────────────────────
   Staggered widths that even up on hover; the middle drops out as the
   outer two cross into the close mark. */
.artd-burger { gap: 6px; }
.artd-burger span:first-child { width: 100%; }
.artd-burger span:nth-child(2) { width: 62%; }
.artd-burger span:last-child { width: 82%; }
.artd-burger:hover span { width: 100%; }

.artd-burger[aria-expanded="true"] span { width: 100%; }
.artd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.artd-burger[aria-expanded="true"] span:first-child { transform: translateY(7.5px) rotate(45deg); }
.artd-burger[aria-expanded="true"] span:last-child { transform: translateY(-7.5px) rotate(-45deg); }
.artd-burger span { transition: width .45s var(--ease, cubic-bezier(.16,1,.3,1)),
                                transform .45s var(--ease, cubic-bezier(.16,1,.3,1)),
                                opacity .3s, background .35s; }


/* ── burger, evened up ───────────────────────────────────────────────
   The staggered widths read as lopsided at this size rather than
   deliberate. Three equal rules, a touch wider apart, with the accent
   carried on hover instead of on the geometry. */
.artd-burger {
  width: 1.75rem;
  gap: 6px;
  padding: .6rem 0;
}
.artd-burger span,
.artd-burger span:first-child,
.artd-burger span:nth-child(2),
.artd-burger span:last-child {
  width: 100%;
  height: 1.5px;
  transform-origin: center;
}
.artd-burger:hover span { width: 100%; background: var(--oxide-lift); }

/* the outer rules cross, the middle drops out */
.artd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.artd-burger[aria-expanded="true"] span:first-child { transform: translateY(7.5px) rotate(45deg); }
.artd-burger[aria-expanded="true"] span:last-child { transform: translateY(-7.5px) rotate(-45deg); }


/* ── even dim ────────────────────────────────────────────────────────
   The left-weighted scrim made one side of every photo far darker than the
   other. This is a flat wash across the whole frame instead, light enough
   to keep the architecture readable, with legibility carried by the text's
   own shadows rather than by drowning the image behind it. */
.artd-hero__scrim {
  background:
    /* a short fade into the section below so the seam is not a hard edge */
    linear-gradient(0deg, var(--ink) 0%, rgba(19, 17, 16, .55) 6%, transparent 16%),
    /* the even wash */
    linear-gradient(rgba(10, 9, 8, .34), rgba(10, 9, 8, .34));
}

/* tighter, denser shadows: these do the legibility work now, and they only
   darken the few pixels around each glyph rather than the whole picture */
.artd-hero__name {
  text-shadow:
    0 1px 2px rgba(10, 9, 8, .9),
    0 2px 10px rgba(10, 9, 8, .8),
    0 4px 40px rgba(10, 9, 8, .55);
}
.artd-hero__meta,
.artd-hero__cta {
  text-shadow:
    0 1px 2px rgba(10, 9, 8, .92),
    0 1px 14px rgba(10, 9, 8, .8);
}
.artd-hero__meta { color: #DAD4CB; }
.artd-wordmark {
  text-shadow: 0 1px 2px rgba(10, 9, 8, .85), 0 2px 16px rgba(10, 9, 8, .7);
}
.artd-hero__count { text-shadow: 0 1px 10px rgba(10, 9, 8, .85); }


/* ── a slower, more gradual arrival ──────────────────────────────────
   The name resolves over a longer beat, and the light behind it blooms in
   across nearly three seconds rather than one and a half. */
.artd-hero.is-playing .artd-word {
  animation: artd-word-in 1.15s cubic-bezier(.16, 1, .3, 1) forwards;
}
.artd-hero.is-playing .artd-hero__under {
  animation: artd-rise-in .95s cubic-bezier(.16, 1, .3, 1) 1s forwards;
}
.artd-hero.is-playing .artd-hero__light,
.artd-hero.is-playing .artd-hero__track {
  animation: artd-light-in 2.8s cubic-bezier(.22, 1, .36, 1) 1.45s forwards;
}
.artd-hero.is-playing .artd-bar {
  animation: artd-fade-in 1s cubic-bezier(.16, 1, .3, 1) 2.5s forwards;
}
.artd-hero.is-playing .artd-hero__ctrl {
  animation: artd-fade-in 1s cubic-bezier(.16, 1, .3, 1) 2.9s forwards;
}
/* a longer, gentler push so the bloom reads as light arriving, not a fade */
@keyframes artd-light-in {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: none; }
}


/* ── caption line: a step up in size ─────────────────────────────────
   The link and the metadata were sitting at .6875rem, small enough to get
   lost against a busy photograph even with the shadows behind them. */
.artd-hero__cta {
  font-size: .75rem;
  letter-spacing: .26em;
}
.artd-hero__cta svg { width: 1.3rem; height: .7rem; }
.artd-hero__meta {
  font-size: .75rem;
  letter-spacing: .06em;
}
.artd-hero__under { gap: 2.6rem; }

@media (max-width: 620px) {
  .artd-hero__cta,
  .artd-hero__meta { font-size: .6875rem; }
  .artd-hero__under { gap: 1.2rem; }
}

/* ── arrows, refined ─────────────────────────────────────────────────
   Thinner ring, quieter at rest, and the oxide arrives as a fill on hover
   rather than only on the border. The pair sit slightly apart so they read
   as two controls rather than one segmented block. */
.artd-hero__arrows { gap: .6rem; }
.artd-hero__arrows button {
  width: 3.4rem;
  height: 3.4rem;
  background: rgba(18, 16, 15, .26);
  border: 1px solid rgba(237, 232, 224, .34);
  box-shadow: 0 2px 24px rgba(10, 9, 8, .28);
  color: rgba(237, 232, 224, .9);
  transition:
    background .45s cubic-bezier(.16, 1, .3, 1),
    border-color .45s cubic-bezier(.16, 1, .3, 1),
    color .45s cubic-bezier(.16, 1, .3, 1),
    transform .45s cubic-bezier(.16, 1, .3, 1);
}
.artd-hero__arrows button:hover {
  background: var(--oxide);
  border-color: var(--oxide);
  color: #fff;
}
.artd-hero__arrows button:active { transform: scale(.94); }
.artd-hero__arrows button:disabled { opacity: .35; }
.artd-hero__arrows svg {
  width: 1.45rem;
  height: .8rem;
  stroke-width: 1;
}
/* keep the directional nudge, smaller now the buttons are larger */
.artd-hero__arrows button:first-child:hover { transform: translateX(-3px); }
.artd-hero__arrows button:last-child:hover { transform: translateX(3px); }

@media (max-width: 620px) {
  .artd-hero__arrows { gap: .45rem; }
  .artd-hero__arrows button { width: 2.8rem; height: 2.8rem; }
  .artd-hero__arrows svg { width: 1.2rem; height: .68rem; }
}


/* ── the bottom row, lifted off the screen edge ──────────────────────
   At 2rem the arrows sat all but on the taskbar, and the caption read low
   because everything beneath it was crowded into the last inch. One
   variable drives all three foot controls now, so they move together and
   share a baseline, and the title block shifts up a few percent to stay
   optically centred above them. */
.artd-hero { --adh-foot: clamp(2.4rem, 4.6vw, 3.6rem); }

.artd-hero__arrows { bottom: var(--adh-foot); }
/* the counter and the dots centre on the arrows rather than on the edge */
.artd-hero__count { bottom: calc( var(--adh-foot) + 1.3rem ); }
.artd-hero__ticks { bottom: calc( var(--adh-foot) + 1rem ); }

.artd-hero__caption > div:first-child { top: 46%; }

@media (max-width: 620px) {
  .artd-hero { --adh-foot: clamp(1.7rem, 5vw, 2.6rem); }
  .artd-hero__ticks { bottom: calc( var(--adh-foot) + .7rem ); }
  .artd-hero__caption > div:first-child { top: 44%; }
}


/* ── the intro must not animate the track's transform ────────────────
   The frame loop owns transform on .artd-hero__track — it writes the pan
   position there every frame. A running CSS animation outranks inline
   style, so for the 2.8s bloom the track was pinned to the keyframes'
   scale() and the JS pan was silently discarded; the moment .is-playing
   came off, the inline transform took effect and the whole film snapped
   into place. That snap was the "reset", and the two transform sources
   fighting over a decoding video layer was the shake.

   The track now fades only. The scale bloom stays on the light canvas,
   which nothing else writes to. */
@keyframes artd-track-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.artd-hero.is-playing .artd-hero__track {
  animation: artd-track-in 2.4s cubic-bezier(.22, 1, .36, 1) 1.45s forwards;
}


/* ── no black box on a clicked control ───────────────────────────────
   WordPress core prints

     :where(.wp-site-blocks :focus){outline-width:2px;outline-style:solid}

   on every block-theme page. It keys off :focus, not :focus-visible, so it
   fires on a plain mouse click, and it sets no outline-color — which falls
   back to currentColor. On these controls that computes to black, so
   clicking a dot drew a 2px black rectangle around it.

   The hero's own rings are :focus-visible and so never applied to a click,
   leaving core's rule unopposed. Clear the mouse case explicitly; keyboard
   focus keeps its oxide ring. */
.artd-hero__ticks button:focus:not(:focus-visible),
.artd-hero__arrows button:focus:not(:focus-visible),
.artd-burger:focus:not(:focus-visible),
.artd-hero__cta:focus:not(:focus-visible),
.artd-wordmark:focus:not(:focus-visible),
.artd-menu__scrim:focus:not(:focus-visible) {
  outline: none;
}


/* ── a voice of its own ──────────────────────────────────────────────
   The composition had drifted into a copy of the reference: an extremely
   tracked all-caps serif alone on the vertical centre, dots on the bottom
   edge, nothing else in frame. That exact combination is their signature.
   These three moves keep the register — quiet, architectural, serif over a
   dimmed photograph — and change the fingerprint. */

/* 1. The title stands closer together and speaks lower. Tracking from
      .26em down to .08em, and up in size: the same typeface, but solid
      and grounded rather than airy and spaced out. */
.artd-hero__name {
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  letter-spacing: .08em;
  line-height: 1.1;
}

/* 2. The dots leave the bottom centre — the most recognisable borrowing —
      and line up beside the counter on the left. */
.artd-hero__ticks {
  left: calc( var(--gut) + 3.7rem );
  bottom: calc( var(--adh-foot) + 1rem );
  transform: none;
}

/* 3. The rail runs the full width and reads as a clock rather than a
      second copy of the pan position. */
.artd-hero__rail {
  left: 0;
  right: 0;
  background: rgba(237, 232, 224, .09);
}
.artd-hero__rail span {
  background: var(--oxide-lift);
  opacity: .9;
}

@media (max-width: 760px) {
  .artd-hero__name { font-size: clamp(1.7rem, 7vw, 2.4rem); letter-spacing: .06em; }
}
@media (max-width: 620px) {
  .artd-hero__ticks { left: var(--gut); }
}