/* "Amber light" background system. Loaded after compact.css.
   Idea: one warm amber light source family, but every area gets its own kind of light, so the
   page does not repeat one effect:
     hero       - amber bloom behind the scissors, soft halo under the main photo
     prices     - (unchanged) bronze corners
     masters    - amber "stage": a pool of light behind the cards, lamp-lit cards, glowing rings
     interior / - ambilight: every photo throws a blurred copy of its own colours behind itself
     works
     contacts   - a warm glow behind the text, a rim of light round the map
     footer     - the page ends in a faint warm floor
*/
:root { --amber: 255 172 66; --amber-soft: 255 196 120; }
/* Lighting tokens are independent of the layout and type scale. */
:root { --light-bronze: 191 115 55; --light-amber: 235 158 79; --light-core: 255 221 170; }
/* The blurred layers reach past the screen edge: clip them sideways (this does not make a scroll box). */
main { overflow-x: clip; }

/* ---------- softer base glows ----------
   The prices glows add up with the new layers, so they are toned down a little here
   (same shapes as in compact.css; top-right x0.85, bottom-left x0.72). */
#prices::before {
  background-image:
    radial-gradient(ellipse 42% 270px at 100% var(--glow-reach), rgb(217 150 80 / .34) 0%, rgb(217 150 80 / .31) 12%, rgb(217 150 80 / .255) 37%, rgb(217 150 80 / .10) 62%, rgb(217 150 80 / .026) 87%, transparent 100%),
    radial-gradient(ellipse 33% 351px at 0% calc(100% - var(--glow-reach) - 30px), rgb(217 150 80 / .22) 0%, rgb(217 150 80 / .17) 30%, rgb(217 150 80 / .10) 50%, rgb(217 150 80 / .035) 75%, rgb(217 150 80 / .014) 90%, transparent 100%);
}
@media (max-width: 760px) {
  #prices::before {
    background-image:
      radial-gradient(ellipse 42% 333px at 100% var(--glow-reach), rgb(217 150 80 / .34) 0%, rgb(217 150 80 / .31) 12%, rgb(217 150 80 / .255) 37%, rgb(217 150 80 / .10) 62%, rgb(217 150 80 / .026) 87%, transparent 100%),
      radial-gradient(ellipse 33% 432px at 0% calc(100% - var(--glow-reach) - 36px), rgb(217 150 80 / .22) 0%, rgb(217 150 80 / .17) 30%, rgb(217 150 80 / .10) 50%, rgb(217 150 80 / .035) 75%, rgb(217 150 80 / .014) 90%, transparent 100%);
  }
}

/* The prices glow ends with the prices section on the left: its tail must not run on into the
   masters block. Only the lower part is faded (the top-right corner is not affected). */
#prices::before {
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .35), #000 var(--glow-reach), #000 calc(100% - var(--glow-reach) - 40px), transparent calc(100% - var(--glow-reach) + 150px));
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / .35), #000 var(--glow-reach), #000 calc(100% - var(--glow-reach) - 40px), transparent calc(100% - var(--glow-reach) + 150px));
}

/* ---------- hero: scissors ---------- */
/* The glow is centred on the scissors: the same clamps as the scissors window (compact.css) give
   the window box, and the glow centre is the middle of the visible scissors in that box. */
.scissor-layer {
  --sw: clamp(80px, calc((100vw - 1240px) / 2 - 20px), 300px);
  --sl: clamp(10px, calc((100vw - 1240px) / 2 - 290px), 50px);
  --st: clamp(16px, 1.1vw, 23px);
}
.scissor-layer::before {
  content: "";
  position: absolute;
  left: calc(var(--sl) + var(--sw) * .477 - 280px);
  top: calc(var(--st) + var(--sw) * .273 - 200px);
  width: 560px;
  height: 400px;
  background:
    radial-gradient(ellipse 46% 44% at 50% 50%, rgb(var(--amber) / .20) 0%, rgb(var(--amber) / .08) 42%, transparent 72%);
  pointer-events: none;
}
/* The scissors video is cut flat at its left edge (the rings are baked in half), so the cut is
   faded out with a wide soft mask and, on wide screens, the scissors move right, away from the
   edge of the screen, and a little smaller so the blades do not reach the headline. */
.hero-tools-window--scissors {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .55) 7%, #000 17%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .55) 7%, #000 17%, #000 96%, transparent 100%);
}
@media (min-width: 1700px) {
  .hero-tools-window--scissors {
    top: clamp(16px, 1.1vw, 23px);
    left: clamp(28px, calc((100vw - 1240px) / 2 - 262px), 78px);
    width: clamp(80px, calc((100vw - 1240px) / 2 - 76px), 264px);
  }
  .scissor-layer {
    --sw: clamp(80px, calc((100vw - 1240px) / 2 - 76px), 264px);
    --sl: clamp(28px, calc((100vw - 1240px) / 2 - 262px), 78px);
  }
  /* The razor is about as big as the scissors, not half as big again. */
  .hero-tools-window--razor {
    --razor-window-width: calc(min(400px, max(90px, (100vw - 1240px) / 2 - 10px)) * .66);
    --razor-lift: 40px; /* lowered by 60px: the bottom edge of the razor rests on the glow */
  }
}
.compact .hero__figure {
  box-shadow:
    0 0 0 1px rgb(var(--amber) / .16),
    0 22px 70px -36px rgb(var(--amber) / .26);
}
@media (max-width: 760px) {
  /* phone: the scissors sit in the top-right corner; centre of the visible scissors ~ (317, 56) */
  .scissor-layer::before { left: auto; right: -117px; top: -94px; width: 380px; height: 300px; }
  .hero-tools-window--scissors {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .55) 8%, #000 18%);
    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .55) 8%, #000 18%);
  }
}

/* ---------- masters: the amber stage ---------- */
#team::before {
  background-image:
    radial-gradient(ellipse 38% 170px at 50% calc(var(--glow-reach) + 175px), rgb(var(--amber) / .20) 0%, rgb(var(--amber) / .10) 40%, rgb(var(--amber) / .03) 72%, transparent 100%) !important;
}
.compact .master {
  position: relative;
  background:
    linear-gradient(180deg, rgb(var(--amber) / .08) 0%, rgb(var(--amber) / .02) 46%, transparent 100%),
    var(--panel);
  border: 1px solid rgb(var(--amber) / .16);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgb(var(--amber-soft) / .30),
    0 20px 54px -26px rgb(var(--amber) / .30);
  transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.compact .master:hover {
  border-color: rgb(var(--amber) / .55);
  box-shadow:
    inset 0 1px 0 rgb(var(--amber-soft) / .46),
    0 24px 64px -22px rgb(var(--amber) / .44);
  transform: translateY(-2px);
}
.compact .master__photo {
  border: 1px solid rgb(var(--amber-soft) / .55);
  box-shadow: 0 0 0 3px rgb(var(--amber) / .09), 0 0 20px rgb(var(--amber) / .34);
}
.compact .master__role { color: rgb(var(--amber-soft)); }

/* ---------- photos: ambilight ---------- */
.ambi {
  position: absolute;
  z-index: -1;
  background-size: cover;
  background-position: center;
  border-radius: 28px;
  filter: blur(46px) saturate(1.75);
  opacity: .62;
  pointer-events: none;
  transform: scale(1.1);
}
.ambi--hero { opacity: .24; filter: blur(70px) saturate(1.4) sepia(.35); }

/* ---------- contacts ---------- */
#contacts { position: relative; }
#contacts::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: -190px;
  width: min(760px, 70vw);
  height: 710px;
  background: radial-gradient(ellipse 50% 260px at 30% 410px, rgb(var(--amber) / .20) 0%, rgb(var(--amber) / .07) 52%, transparent 100%);
  /* fades in from nothing above the separator line, so there is no start edge at the line */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 70%);
  pointer-events: none;
}
.map {
  border-color: rgb(var(--amber) / .30);
  box-shadow:
    0 0 0 1px rgb(var(--amber) / .10),
    0 26px 90px -24px rgb(var(--amber) / .36);
}

/* ---------- footer: a faint warm floor ---------- */
.footer {
  background:
    linear-gradient(180deg, rgb(var(--amber) / .085), rgb(var(--amber) / 0) 150px),
    #08080a;
  border-top-color: rgb(var(--amber) / .22);
}

/* The reference has curved, tapered highlights over broad bronze reflected light. */
#about { position: relative; }
.compact .hero::before,
.compact .hero::after,
#prices::after,
#team::after,
#about::before,
#contacts::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 360px;
  pointer-events: none;
  z-index: 1;
  background: url("../assets/decor/amber-trail.svg") center / contain no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 55% 68% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 68% at 50% 50%, #000 30%, transparent 100%);
}
.compact .hero::before { left: -430px; top: 20px; }
.compact .hero::after { right: -300px; top: -32px; }
#prices::after { left: -440px; top: 12%; opacity: .72; }
#team::after { right: -335px; top: 30%; opacity: .42; }
#about::before { left: -440px; top: 1%; opacity: .32; }
#contacts::after { right: -320px; top: 0; opacity: .55; }

/* The section edges catch the same light, without becoming full-width gold bars. */
.compact .hero { box-shadow: inset 0 -1px rgb(211 145 74 / .32), 0 8px 23px -18px rgb(255 177 86 / .8); }
#team { box-shadow: inset 0 1px rgb(211 145 74 / .3), 0 -12px 30px -24px rgb(255 177 86 / .9); }

@media (max-width: 760px) {
  .compact .hero::before,
  .compact .hero::after,
  #prices::after,
  #team::after,
  #about::before,
  #contacts::after { width: 320px; height: 210px; opacity: .25; }
  .compact .hero::before { left: -290px; top: 52px; }
  .compact .hero::after { right: -290px; top: 8px; }
  #prices::after { left: -290px; }
  #team::after { right: -290px; }
  #about::before { left: -290px; }
  #contacts::after { right: -290px; }
}
/* Reference lighting pass: layers live behind the existing content. */
.compact .hero { box-shadow: none; }
#team { box-shadow: none; }
#prices::before {
 background-image:
 radial-gradient(ellipse 24% 230px at 102% calc(var(--glow-reach) - 65px), rgb(var(--light-amber) / .22), transparent 100%),
 radial-gradient(ellipse 25% 310px at 102% calc(var(--glow-reach) + 120px), rgb(var(--light-amber) / .32), rgb(var(--light-bronze) / .14) 40%, transparent 100%),
 radial-gradient(ellipse 24% 340px at -3% calc(100% - var(--glow-reach) - 135px), rgb(var(--light-amber) / .36), rgb(var(--light-bronze) / .16) 42%, transparent 100%);
 mask-image: linear-gradient(transparent, #000 var(--glow-reach), #000 calc(100% - var(--glow-reach)), transparent);
}
#team::before {
 background-image:
 radial-gradient(ellipse 40% 80px at 50% calc(var(--glow-reach) + 115px), rgb(var(--light-amber) / .42), rgb(var(--light-bronze) / .17) 48%, transparent 100%),
 radial-gradient(ellipse 52% 150px at 50% calc(var(--glow-reach) + 130px), rgb(var(--light-bronze) / .14), transparent 100%) !important;
}
/* Keep the light on the stage, rather than increasing the card or portrait rim. */
.compact .master { box-shadow: inset 0 1px 0 rgb(var(--amber-soft) / .07); }
.compact .master__photo { box-shadow: 0 0 12px rgb(var(--amber) / .06); }
.ambi {
 filter: blur(58px) saturate(1.45) sepia(.18);
 opacity: .66;
 transform: scale(1.13);
 mask-image: radial-gradient(ellipse at 50% 55%, #000 18%, rgb(0 0 0 / .6) 50%, transparent 76%);
}
.ambi--hero { opacity: .13; filter: blur(75px) saturate(1.2) sepia(.3); }
.ambi--interior {
 opacity: .72;
 /* Match the masters' light; photo colours must not turn this halo grey or green. */
 background-image: radial-gradient(ellipse at 50% 45%, rgb(var(--light-amber) / .55), rgb(var(--light-bronze) / .32) 48%, transparent 82%) !important;
 filter: blur(48px);
 transform: scale(1.6);
 /* Fully transparent at every edge: the old farthest-corner mask left a flat lip. */
 -webkit-mask-image: radial-gradient(ellipse closest-side, #000 10%, rgb(0 0 0 / .6) 45%, transparent 100%);
 mask-image: radial-gradient(ellipse closest-side, #000 10%, rgb(0 0 0 / .6) 45%, transparent 100%);
}
.ambi--works {
 opacity: .6;
 filter: blur(52px) saturate(1.55) sepia(.12);
 transform: scale(1.3);
 -webkit-mask-image: radial-gradient(ellipse closest-side, #000 10%, rgb(0 0 0 / .6) 45%, transparent 100%);
 mask-image: radial-gradient(ellipse closest-side, #000 10%, rgb(0 0 0 / .6) 45%, transparent 100%);
}
#about::after {
 content: ''; position: absolute; inset: -100px 0 -75px; z-index: -1; pointer-events: none;
 background: radial-gradient(ellipse 34% 180px at 24% 48%, rgb(var(--light-bronze) / .15), transparent), radial-gradient(ellipse 25% 210px at 91% 64%, rgb(var(--light-amber) / .12), transparent);
}
/* Different curves and placements, softly clipped to the outer gutters. */
.compact .hero::before, .compact .hero::after, #prices::after, #team::after, #about::before, #contacts::after {
 width: min(570px, 43vw); height: 410px; opacity: .9; z-index: -1;
 mask-image: radial-gradient(ellipse 58% 67% at 50% 50%, #000 22%, transparent 100%);
}
.compact .hero::before { left: -280px; top: 52px; transform: rotate(-13deg); }
.compact .hero::after { right: -270px; top: 78px; transform: rotate(-8deg); background-image: url('../assets/decor/amber-arc.svg'); }
#prices::after { left: -300px; top: 26%; transform: rotate(-23deg); background-image: url('../assets/decor/amber-arc.svg'); opacity: .8; }
#team::after { right: -350px; top: 55%; opacity: .25; }
#about::before { left: -340px; top: 5%; opacity: .2; transform: rotate(8deg); }
#contacts::after { right: -265px; top: -20px; background-image: url('../assets/decor/amber-arc.svg'); transform: rotate(-24deg); opacity: .85; }
#contacts::before {
 inset: -100px 0 -80px; width: auto; height: auto;
 background: radial-gradient(ellipse 23% 230px at -2% 58%, rgb(var(--light-amber) / .2), transparent), radial-gradient(ellipse 21% 240px at 102% 60%, rgb(var(--light-bronze) / .24), transparent);
 mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent);
}
/* A hot hairline and a much wider low-energy reflection form the separators. */
#prices, #team, #contacts { background-image: radial-gradient(ellipse 46% 1px at 50% 0, rgb(var(--light-core) / .98), rgb(var(--light-amber) / .5) 48%, transparent 100%), radial-gradient(ellipse 43% 12px at 50% 0, rgb(var(--light-amber) / .24), transparent 100%); background-repeat: no-repeat; }
#works::after { background: linear-gradient(90deg, transparent, rgb(var(--light-amber) / .38) 18%, rgb(var(--light-core) / .9) 40%, #fff1d3 50%, rgb(var(--light-core) / .9) 60%, rgb(var(--light-amber) / .38) 82%, transparent); box-shadow: 0 0 6px rgb(var(--light-amber) / .32); }
#works::before {
 bottom: -25px; height: 50px;
 background: radial-gradient(ellipse 43% 28% at 50% 50%, rgb(var(--light-amber) / .3), rgb(var(--light-bronze) / .09) 50%, transparent 100%);
}
.compact-works::before {
 content: ''; position: absolute; left: -250px; bottom: 25px; width: 430px; height: 300px; z-index: -1; pointer-events: none;
 background: url('../assets/decor/amber-trail.svg') center / contain no-repeat;
 mask-image: radial-gradient(ellipse, #000, transparent 72%); transform: rotate(17deg); opacity: .7;
}
.compact-works { position: relative; }
.scissor-layer::before {
 left: -220px; top: -130px; width: 560px; height: 470px;
 background: radial-gradient(ellipse at 35% 40%, rgb(var(--light-amber) / .28), rgb(var(--light-bronze) / .1) 42%, transparent 70%);
}
@media (min-width: 761px) {
 .hero-tools-window--scissors { width: clamp(250px, 20vw, 360px); left: -42px; top: -34px; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
 .hero-tools-window--razor {
  display: block; --razor-window-width: clamp(240px, 19vw, 340px); --razor-lift: 15px;
  left: calc(100vw - var(--razor-window-width) - max(20px, (100vw - 1240px) / 2) - 8px);
 }
 .hero-tools-window--razor::before {
  content: ''; position: absolute; inset: 80px -40px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 55% 65%, rgb(var(--light-amber) / .28), transparent 68%);
 }
}
@media (max-width: 1439px) and (min-width: 761px) {
 .compact .hero::before { left: -340px; }
 .compact .hero::after { right: -340px; }
 #prices::after { left: -350px; }
 #contacts::after { right: -340px; }
}
@media (max-width: 760px) {
 .compact .hero::before, .compact .hero::after, #prices::after, #team::after, #about::before, #contacts::after { width: 300px; height: 270px; opacity: .4; }
 .compact .hero::before { left: -255px; top: 100px; }
 .compact .hero::after { right: -255px; top: 360px; }
 #prices::after, #about::before { left: -255px; }
 #team::after, #contacts::after { right: -255px; }
 #team::before { background-image: radial-gradient(ellipse 75% 200px at 50% calc(var(--glow-reach) + 200px), rgb(var(--light-bronze) / .22), transparent) !important; }
 .scissor-layer::before { left: auto; right: -170px; top: -90px; width: 360px; height: 280px; opacity: .65; }
 .ambi { filter: blur(35px) saturate(1.4); opacity: .45; transform: scale(1.08); }
 .ambi--hero { opacity: .12; }
 .ambi--interior { transform: scale(1.3); }
 .ambi--works { transform: scale(1.25); }
 .compact-works::before { width: 260px; left: -220px; opacity: .4; }
}
/* Final edge balance: the razor halo must not be clipped by its video crop. */
.hero-tools-window--razor::before { display: none; }
.compact .hero { background-image: radial-gradient(ellipse 24% 230px at 102% 91%, rgb(var(--light-amber) / .22), transparent 100%); }
@media (min-width: 761px) {
 /* The shared prices layer extends across this boundary; no glow is cut at Hero's edge. */
 .compact .hero { background-image: none; }
 .hero-tools-window--razor { --razor-window-width: clamp(230px, 17vw, 310px); --razor-lift: 30px; left: calc(100vw - var(--razor-window-width) - max(20px, (100vw - 1240px) / 2) + 22px); }
}
#prices::after { transform: rotate(8deg); left: -325px; opacity: .65; }
#about::after { background: radial-gradient(ellipse 28% 210px at 23% 55%, rgb(var(--light-bronze) / .2), transparent), radial-gradient(ellipse 28% 210px at 81% 55%, rgb(var(--light-amber) / .16), transparent); }
@media (max-width: 760px) { #prices::after { left: -255px; opacity: .4; } }