/* ==========================================================================
   DigitallyByAlvin — Core stylesheet
   Dark · elegant · minimalist. Hairlines only: no shadows, no radii.
   Class names are block-editor friendly (dba-* namespace) for the WP port.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--dba-ink);
  color: var(--dba-ash);
  font-family: var(--dba-font-ui);
  font-size: var(--dba-size-body);
  font-weight: 300;
  line-height: var(--dba-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--dba-font-display);
  font-weight: 300;
  color: var(--dba-bone);
  line-height: var(--dba-leading-tight);
  letter-spacing: var(--dba-track-display);
  margin: 0;
}

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--dba-brass); color: var(--dba-ink); }

:focus-visible {
  outline: 1px solid var(--dba-brass);
  outline-offset: 4px;
}

.dba-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dba-skip-link {
  position: absolute; top: -100px; left: var(--dba-gutter);
  z-index: 999; padding: 14px 22px;
  background: var(--dba-bone); color: var(--dba-ink);
  font-size: var(--dba-size-micro); letter-spacing: var(--dba-track-button);
  text-transform: uppercase;
}
.dba-skip-link:focus { top: 18px; }

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */

.dba-shell {
  width: 100%;
  max-width: var(--dba-wide);
  margin-inline: auto;
  padding-inline: var(--dba-gutter);
}

.dba-shell--narrow { max-width: var(--dba-content); }

.dba-section { padding-block: var(--dba-space-section); position: relative; }
.dba-section--soft { background: var(--dba-ink-soft); }
.dba-section--tight { padding-block: clamp(56px, 7vw, 96px); }

.dba-rule {
  height: 1px;
  background: var(--dba-hairline-soft);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Typographic components
   -------------------------------------------------------------------------- */

.dba-eyebrow {
  font-family: var(--dba-font-ui);
  font-size: var(--dba-size-micro);
  font-weight: 400;
  letter-spacing: var(--dba-track-eyebrow);
  text-transform: uppercase;
  color: var(--dba-ash-dim);
  margin: 0 0 var(--dba-space-s);
  display: flex;
  align-items: center;
  gap: 14px;
}

.dba-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--dba-brass-soft);
  flex: none;
}

.dba-eyebrow--center { justify-content: center; }

.dba-display {
  font-size: var(--dba-size-display);
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.dba-h1 { font-size: var(--dba-size-h1); }
.dba-h2 { font-size: var(--dba-size-h2); line-height: var(--dba-leading-snug); }
.dba-h3 { font-size: var(--dba-size-h3); line-height: var(--dba-leading-snug); }

.dba-lead {
  font-size: var(--dba-size-lead);
  color: var(--dba-ash);
  max-width: var(--dba-measure);
  line-height: 1.8;
}

.dba-prose { max-width: var(--dba-measure); }

.dba-meta {
  font-size: var(--dba-size-micro);
  letter-spacing: var(--dba-track-nav);
  text-transform: uppercase;
  color: var(--dba-ash-dim);
}

.dba-price { color: var(--dba-brass); }

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */

.dba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 clamp(28px, 3.2vw, 46px);
  font-family: var(--dba-font-ui);
  font-size: var(--dba-size-small);
  font-weight: 400;
  letter-spacing: var(--dba-track-button);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--dba-radius);
  cursor: pointer;
  transition: background var(--dba-dur-fast) var(--dba-ease),
              color var(--dba-dur-fast) var(--dba-ease),
              border-color var(--dba-dur-fast) var(--dba-ease);
}

.dba-btn--solid {
  background: var(--dba-bone);
  color: var(--dba-ink);
}
.dba-btn--solid:hover { background: var(--dba-brass); color: var(--dba-ink); }

.dba-btn--ghost {
  background: transparent;
  color: var(--dba-bone);
  border-color: rgba(245, 244, 241, 0.4);
}
.dba-btn--ghost:hover { border-color: var(--dba-brass); color: var(--dba-brass); }

/* Understated text link with an animated hairline. */
.dba-link {
  position: relative;
  display: inline-block;
  font-size: var(--dba-size-small);
  letter-spacing: var(--dba-track-button);
  text-transform: uppercase;
  color: var(--dba-bone);
  padding-bottom: 6px;
}
.dba-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--dba-brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dba-dur) var(--dba-ease);
}
.dba-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */

/* Fixed wrapper so the header can never collide with the temporary preview
   bar above it. When the preview bar is deleted, this wrapper stays and the
   header behaves exactly as before. */
.dba-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
}

.dba-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dba-space-m);
  padding: clamp(22px, 2.6vw, 38px) var(--dba-gutter);
  transition: background var(--dba-dur) var(--dba-ease),
              padding var(--dba-dur) var(--dba-ease),
              border-color var(--dba-dur) var(--dba-ease);
  border-bottom: 1px solid transparent;
}

.dba-header.is-stuck {
  background: rgba(10, 10, 14, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--dba-hairline-soft);
  padding-block: clamp(16px, 1.8vw, 22px);
}

.dba-logo {
  font-family: var(--dba-font-ui);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 300;
  letter-spacing: var(--dba-track-logo);
  text-transform: uppercase;
  color: var(--dba-bone);
  white-space: nowrap;
}

.dba-nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 44px); }

.dba-nav__link {
  position: relative;
  font-size: var(--dba-size-micro);
  font-weight: 300;
  letter-spacing: var(--dba-track-nav);
  text-transform: uppercase;
  color: var(--dba-ash);
  padding-block: 6px;
  transition: color var(--dba-dur-fast) var(--dba-ease);
}
.dba-nav__link:hover { color: var(--dba-bone); }

.dba-nav__link.is-current { color: var(--dba-bone); }
.dba-nav__link.is-current::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--dba-brass);
}

.dba-nav__cta { color: var(--dba-bone); }

/* Mobile toggle */
.dba-burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.dba-burger span {
  position: absolute;
  left: 7px;
  width: 28px; height: 1px;
  background: var(--dba-bone);
  transition: transform var(--dba-dur-fast) var(--dba-ease),
              opacity var(--dba-dur-fast) var(--dba-ease);
}
.dba-burger span:nth-child(1) { top: 16px; }
.dba-burger span:nth-child(2) { top: 25px; }
.dba-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.dba-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* Full-screen mobile drawer */
.dba-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--dba-space-m);
  padding: var(--dba-gutter);
  background: var(--dba-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dba-dur) var(--dba-ease), visibility var(--dba-dur);
}
.dba-drawer.is-open { opacity: 1; visibility: visible; }

.dba-drawer__link {
  font-family: var(--dba-font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--dba-bone);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.dba-drawer__link:hover { color: var(--dba-brass); }

@media (max-width: 860px) {
  .dba-nav { display: none; }
  .dba-burger { display: block; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.dba-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.dba-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dba-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% center;
  filter: grayscale(100%) contrast(1.06) brightness(0.92);
}

.dba-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--dba-scrim-h), var(--dba-scrim-v);
}

.dba-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(140px, 18vh, 220px) clamp(90px, 12vh, 140px);
}

.dba-hero__content {
  margin-left: auto;
  max-width: 660px;
  text-align: right;
}

.dba-hero__title {
  margin-bottom: var(--dba-space-m);
}

.dba-hero__title span { display: block; }

.dba-hero__lead {
  margin-left: auto;
  margin-bottom: var(--dba-space-m);
  max-width: 52ch;
}

.dba-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dba-space-xs);
  justify-content: flex-end;
}

.dba-hero__scroll {
  position: absolute;
  z-index: 2;
  left: var(--dba-gutter);
  bottom: clamp(28px, 4vh, 48px);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--dba-size-micro);
  letter-spacing: var(--dba-track-eyebrow);
  text-transform: uppercase;
  color: var(--dba-ash);
}
.dba-hero__scroll i {
  display: block;
  width: 54px; height: 1px;
  background: var(--dba-ash-mute);
  position: relative;
  overflow: hidden;
}
.dba-hero__scroll i::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--dba-brass);
  transform: translateX(-100%);
  animation: dba-sweep 2.8s var(--dba-ease) infinite;
}

@keyframes dba-sweep {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (max-width: 860px) {
  .dba-hero__content { text-align: left; margin-left: 0; }
  .dba-hero__lead { margin-left: 0; }
  .dba-hero__actions { justify-content: flex-start; }
  .dba-hero__media img { object-position: 40% center; }
  .dba-hero__scroll { display: none; }
  .dba-hero__inner { padding-block: clamp(170px, 24vh, 240px) clamp(64px, 9vh, 100px); }
  /* Content is left-aligned here, so the horizontal scrim is replaced by a
     bottom-weighted one that keeps the copy legible over any photograph. */
  .dba-hero__scrim {
    background: linear-gradient(180deg, rgba(10,10,14,.78) 0%, rgba(10,10,14,.30) 26%, rgba(10,10,14,.72) 58%, rgba(10,10,14,.95) 100%);
  }
  .dba-hero .dba-eyebrow { justify-content: flex-start !important; }
}

/* --------------------------------------------------------------------------
   7. Statement
   -------------------------------------------------------------------------- */

.dba-statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.dba-statement__body p + p { margin-top: 1.4em; }

.dba-signature {
  margin-top: var(--dba-space-m);
  font-family: var(--dba-font-display);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--dba-bone);
}

.dba-signature small {
  display: block;
  margin-top: 10px;
  font-family: var(--dba-font-ui);
  font-size: var(--dba-size-micro);
  font-style: normal;
  letter-spacing: var(--dba-track-nav);
  text-transform: uppercase;
  color: var(--dba-ash-dim);
}

@media (max-width: 860px) {
  .dba-statement__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. Selected work grid
   -------------------------------------------------------------------------- */

.dba-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dba-space-m);
  margin-bottom: var(--dba-space-l);
  flex-wrap: wrap;
}

.dba-work {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}

.dba-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--dba-charcoal);
}

.dba-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.dba-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.82);
  transform: scale(1.005);
  transition: transform var(--dba-dur-slow) var(--dba-ease-image),
              filter var(--dba-dur-slow) var(--dba-ease-image);
}

.dba-card:hover .dba-card__media img,
.dba-card:focus-visible .dba-card__media img {
  transform: scale(1.055);
  filter: grayscale(60%) brightness(1);
}

.dba-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,14,0) 40%, rgba(10,10,14,.85) 100%);
}

.dba-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dba-card__title {
  font-family: var(--dba-font-display);
  font-size: var(--dba-size-h3);
  color: var(--dba-bone);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dba-card__count {
  font-size: var(--dba-size-micro);
  letter-spacing: var(--dba-track-nav);
  color: var(--dba-ash-dim);
  white-space: nowrap;
}

/* Every frame carries its maker. */
.dba-credit {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  right: clamp(14px, 1.6vw, 20px);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 244, 241, 0.45);
  opacity: 0;
  transition: opacity var(--dba-dur) var(--dba-ease);
}
.dba-card:hover .dba-credit { opacity: 1; }

@media (max-width: 1100px) { .dba-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .dba-work { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. Prints band
   -------------------------------------------------------------------------- */

.dba-band {
  position: relative;
  min-height: clamp(520px, 68vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.dba-band__media { position: absolute; inset: 0; z-index: 0; }

.dba-band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.6);
}

.dba-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,14,.94) 0%, rgba(10,10,14,.72) 48%, rgba(10,10,14,.35) 100%);
}

.dba-band__inner { position: relative; z-index: 2; width: 100%; }
.dba-band__content { max-width: 620px; }

.dba-specs {
  list-style: none;
  margin: var(--dba-space-m) 0;
  padding: 0;
  border-top: var(--dba-border);
}

.dba-specs li {
  display: flex;
  justify-content: space-between;
  gap: var(--dba-space-s);
  padding: 15px 0;
  border-bottom: var(--dba-border);
  font-size: var(--dba-size-small);
}

.dba-specs dt, .dba-specs .k {
  color: var(--dba-ash-dim);
  letter-spacing: var(--dba-track-nav);
  text-transform: uppercase;
  font-size: var(--dba-size-micro);
}

.dba-specs .v { color: var(--dba-bone); text-align: right; }
.dba-specs .v.dba-price { color: var(--dba-brass); }

/* --------------------------------------------------------------------------
   10. Services list
   -------------------------------------------------------------------------- */

.dba-services { border-top: var(--dba-border); }

.dba-service {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.78fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(26px, 3.2vw, 42px) 0;
  border-bottom: var(--dba-border);
  transition: background var(--dba-dur) var(--dba-ease),
              padding-inline var(--dba-dur) var(--dba-ease);
}

.dba-service:hover {
  background: var(--dba-charcoal);
  padding-inline: clamp(12px, 2vw, 28px);
}

.dba-service__no {
  font-size: var(--dba-size-micro);
  letter-spacing: 0.18em;
  color: var(--dba-ash-dim);
}

.dba-service__name {
  font-family: var(--dba-font-display);
  font-size: var(--dba-size-h3);
  color: var(--dba-bone);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dba-service__note { font-size: var(--dba-size-small); color: var(--dba-ash); }

.dba-service__from {
  text-align: right;
  font-size: var(--dba-size-small);
  color: var(--dba-brass);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .dba-service {
    grid-template-columns: 44px minmax(0, 1fr);
    row-gap: 8px;
    align-items: start;
  }
  .dba-service__note { grid-column: 2; }
  .dba-service__from { grid-column: 2; text-align: left; }
}

/* --------------------------------------------------------------------------
   11. Contact / footer
   -------------------------------------------------------------------------- */

.dba-contact { text-align: center; }
.dba-contact .dba-lead { margin-inline: auto; }

.dba-contact__mail {
  display: inline-block;
  margin-top: var(--dba-space-m);
  font-family: var(--dba-font-display);
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  color: var(--dba-bone);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--dba-hairline);
  padding-bottom: 8px;
  transition: color var(--dba-dur-fast) var(--dba-ease),
              border-color var(--dba-dur-fast) var(--dba-ease);
}
.dba-contact__mail:hover { color: var(--dba-brass); border-color: var(--dba-brass); }

.dba-footer {
  border-top: var(--dba-border);
  padding-block: var(--dba-space-l) var(--dba-space-m);
}

.dba-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: var(--dba-space-l);
}

.dba-footer__title {
  font-size: var(--dba-size-micro);
  letter-spacing: var(--dba-track-eyebrow);
  text-transform: uppercase;
  color: var(--dba-ash-dim);
  margin-bottom: var(--dba-space-s);
}

.dba-footer__list { list-style: none; margin: 0; padding: 0; }
.dba-footer__list li { margin-bottom: 12px; }
.dba-footer__list a { font-size: var(--dba-size-small); transition: color var(--dba-dur-fast) var(--dba-ease); }
.dba-footer__list a:hover { color: var(--dba-bone); }

.dba-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dba-space-s);
  padding-top: var(--dba-space-m);
  border-top: 1px solid var(--dba-hairline-soft);
  font-size: var(--dba-size-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dba-ash-dim);
}

@media (max-width: 860px) {
  .dba-footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12. Placeholder notice — REMOVE once real photographs are in place
   -------------------------------------------------------------------------- */

.dba-placeholder-note {
  position: relative;
  z-index: 120;
  background: var(--dba-brass);
  color: var(--dba-ink);
  text-align: center;
  padding: 10px var(--dba-gutter);
  font-size: var(--dba-size-micro);
  letter-spacing: var(--dba-track-nav);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   13. Scroll reveal
   -------------------------------------------------------------------------- */

.dba-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dba-dur-slow) var(--dba-ease),
              transform var(--dba-dur-slow) var(--dba-ease);
}
.dba-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dba-reveal { opacity: 1; transform: none; }
  .dba-hero__scroll i::after { animation: none; }
}