/* ═══════════════════════════════════════════════════════════════════
   EDITORIAL — the background composition system

   Every section keeps its generous negative space, but that space is
   given structure: oversized cropped typography, hairline construction
   lines, measurement marks and faint textures. All of it is decorative:
   `aria-hidden` in the markup, `pointer-events: none` here, and never
   the sole carrier of information.

   Vocabulary (shared across sections):
     .sec-decor   full-bleed decorative layer, clipped by the section
     .sec-frame   the same box as .container — aligns line work to content
     .sec-word    oversized display type, deliberately cropped
     .sec-tool    cropped barber-tool line art
     .sec-meta    small editorial metadata (counters, coordinates)

   Per-section variation lives in the blocks at the bottom of this file.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section-to-section transition ───────────────────────── */
.section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
  z-index: 2;
}
/* the marquee already closes with a gold rule */
.marquee + .section::before { display: none; }

/* ── Decorative layer ────────────────────────────────────── */
.sec-decor {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* mirrors .container so line work lands on the content edges */
.sec-frame {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - var(--container-pad) * 2,
             var(--container-max) - var(--container-pad) * 2);
}

/* ── Oversized background typography ─────────────────────── */
.sec-word {
  position: absolute;
  font-family: var(--ff-display);
  font-size: clamp(6rem, 21vw, 17rem);
  line-height: .74;
  letter-spacing: .015em;
  white-space: nowrap;
  color: var(--ink);
}
/* outlined variant — architectural rather than typographic mass */
.sec-word--outline {
  color: var(--ink-faint);
  -webkit-text-stroke: 1px var(--ink-stroke);
}

/* ── Cropped tool line art ───────────────────────────────── */
.sec-tool {
  position: absolute;
  color: var(--gold);
  opacity: .085;
}

/* ── Editorial metadata ──────────────────────────────────── */
.sec-meta {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); opacity: .4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sec-meta::before {
  content: '';
  width: clamp(26px, 5vw, 58px); height: 1px;
  background: currentColor; opacity: .7;
}

/* ═══════════════════════════════════════════════════════════
   01 · SERVICES — craft, precision, measurement
   ═══════════════════════════════════════════════════════════ */

/* caliper scale, floating in the section's top margin */
#services .sec-decor::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 34px; height: 18px;
  background-image:
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 110px);
  background-size: 100% 7px, 100% 17px;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 76%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 76%);
}


#services .sec-word {
  left: -.05em;
  bottom: -.30em;
}

/* ═══════════════════════════════════════════════════════════
   02 · TEAM — the people behind the craft
   ═══════════════════════════════════════════════════════════ */

#team .sec-word {
  right: -.09em;
  top: 4%;
}


/* scissors, cropped by the right edge */
#team .sec-tool {
  right: -6%;
  bottom: -8%;
  width: clamp(200px, 30vw, 430px);
  transform: rotate(-14deg);
  opacity: .07;
}

/* ═══════════════════════════════════════════════════════════
   03 · GALLERY — a photographic spread, framed
   ═══════════════════════════════════════════════════════════ */

#gallery .sec-word {
  right: -.07em;
  top: 3%;
}

/* framing brackets that reach past the photo grid itself */
.gallery-grid { position: relative; }
.gallery-grid::before,
.gallery-grid::after {
  content: '';
  position: absolute;
  width: clamp(34px, 6vw, 78px);
  height: clamp(34px, 6vw, 78px);
  pointer-events: none;
}
.gallery-grid::before {
  left: -18px; top: -18px;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.gallery-grid::after {
  right: -18px; bottom: -18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* contact-sheet counter, sitting in the band below the grid */
#gallery .sec-meta {
  right: 0;
  bottom: calc(var(--section-pad) * .44);
}

/* ═══════════════════════════════════════════════════════════
   04 · BOOKING — reservation
   ═══════════════════════════════════════════════════════════ */

#booking .sec-word {
  left: -.05em;
  bottom: -.26em;
}

/* the warm corner that was already part of this section */
#booking .sec-decor::after {
  content: '';
  position: absolute; top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(212,168,80,.06), transparent 70%);
}


/* straight razor, cropped by the left edge */
#booking .sec-tool {
  left: -8%;
  top: 14%;
  width: clamp(220px, 26vw, 380px);
  transform: rotate(-9deg);
  opacity: .075;
}

/* ═══════════════════════════════════════════════════════════
   05 · REVIEWS — trust, the quotation
   ═══════════════════════════════════════════════════════════ */

/* faint grid, echoing the hero */
#reviews .sec-decor::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,168,80,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,80,.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 65% 95% at 12% 45%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 65% 95% at 12% 45%, #000, transparent 70%);
}

.sec-word--quote {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: clamp(16rem, 42vw, 34rem);
  line-height: .8;
  color: rgba(212,168,80,.045);
}
#reviews .sec-word--quote {
  right: 2%;
  bottom: 0;
  transform: translateY(40%);
}

/* rule closing the section */
#reviews .sec-frame::after {
  content: '';
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--section-pad) * .38);
  height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent 72%);
}

/* ═══════════════════════════════════════════════════════════
   06 · LOCATION — Vienna, plotted
   ═══════════════════════════════════════════════════════════ */

/* map-like grid, finer than the reviews texture */
#location .sec-decor::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,168,80,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,80,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 8% 88%, #000, transparent 68%);
  mask-image: radial-gradient(ellipse 80% 70% at 8% 88%, #000, transparent 68%);
}

#location .sec-word {
  left: -.06em;
  bottom: -.28em;
}


/* coordinates of the shop, as an editorial location marker —
   opposite corner from the WIEN crop, in the band below the map */
#location .sec-meta {
  right: 0;
  bottom: calc(var(--section-pad) * .42);
}