/* ===========================================================================
   IMAGERY — wood, leather, brass, smoke, and warm cinematic light
   ---------------------------------------------------------------------------
   Two layers, in this order:

     1. A PHOTOGRAPHIC layer, present only when a file has been dropped into
        public/img/photography/. It is graded here — never in the file — so a
        photograph shot under any light still lands in the brand's palette.

     2. A PROCEDURAL ground underneath it, always present. Wood grain, pebbled
        leather, drifting smoke and ember light, all generated from SVG
        turbulence. This is what shows before photography exists, and it is
        what a photograph is composited over afterwards, so the warm falloff is
        consistent either way.

   Nothing here animates. The brief asks for subtle fades and hover only, and a
   moving background would fight every word on the page.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The grade
   ---------------------------------------------------------------------------
   Applied over any photograph: pull it warm, drop the shadows into espresso,
   and pool the light in the centre the way a single lamp over a table does. */
.photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shallow depth of field is the photographer's job, but a touch of warmth
     and a lifted black point makes almost any source sit in the palette. */
  filter: sepia(0.28) saturate(1.12) contrast(1.04) brightness(0.82);
}

/* The grade itself — a warm multiply, then a vignette. */
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 50% 38%, rgba(217, 106, 24, 0.16) 0%, transparent 58%),
    radial-gradient(145% 115% at 50% 48%, rgba(11, 11, 11, 0.35) 30%, rgba(11, 11, 11, 0.9) 100%),
    linear-gradient(180deg, rgba(57, 35, 23, 0.55) 0%, rgba(11, 11, 11, 0.7) 100%);
}

/* On the dark pages the photograph is a ground, not a subject — it should be
   felt rather than looked at. */
.photo--ground img {
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   Procedural grounds
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   RULE FOR EVERY LAYER BELOW: no mix-blend-mode, no tiling.

   The first version of this file screen-blended grey turbulence over Rich
   Black at 0.4 opacity. Screen takes black towards whatever it is blended
   with, so the entire field lifted to a muddy mid-grey and the brand's Rich
   Black disappeared. The smoke also tiled at a fixed pixel size, which put a
   visible vertical seam down the page.

   So: every layer here is a plain rgba() over #0B0B0B with a known alpha, and
   every texture is background-size: cover / no-repeat. That makes the final
   colour something you can work out on paper instead of something you have to
   look at to discover. The corners land near #070707 and the lit centre near
   #23180F — a warm near-black, which is the point.
   --------------------------------------------------------------------------- */

/* Rich wood. Turbulence stretched hard along one axis reads as grain. Kept
   dark and low-contrast: this is a surface a document sits on, not a subject. */
.ground-wood {
  background-color: #120b05;
  background-image:
    /* pooled lamplight, high and centred */
    radial-gradient(85% 55% at 50% 26%, rgba(217, 106, 24, 0.09) 0%, transparent 70%),
    /* the grain, at a whisper */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.5' numOctaves='4' seed='19'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='400' filter='url(%23w)' opacity='0.16'/%3E%3C/svg%3E"),
    /* falloff to the edges */
    radial-gradient(120% 100% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(175deg, #24160b 0%, #170e05 55%, #0d0803 100%);
  background-size: cover, 760px 440px, cover, cover;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* Pebbled leather — the texture named in the brief for the dark surfaces. */
.ground-leather {
  background-color: var(--black);
  background-image:
    radial-gradient(80% 55% at 50% 40%, rgba(217, 106, 24, 0.08) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' seed='31'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .3 .6 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23l)' opacity='0.14'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #131110 0%, #0b0b0b 100%);
  background-size: cover, 150px 150px, cover;
}

/* Smoke. One low-frequency field, scaled to cover the viewport exactly once —
   no repeat, so there is no seam — and masked to nothing at the edges. At 7%
   over near-black it is a haze you notice only when it is removed. */
.veil-smoke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='6' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.6' amplitude='1.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1200' height='900' filter='url(%23s)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: radial-gradient(68% 58% at 50% 52%, #000 0%, transparent 76%);
  mask-image: radial-gradient(68% 58% at 50% 52%, #000 0%, transparent 76%);
}

/* Ember — warm light spilling in from below the frame, as if a cigar were
   resting just out of shot. Wide and shallow so it reads as falloff along the
   bottom edge rather than as a glowing blob in the middle of the page. */
.veil-ember {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(75% 22% at 50% 102%, rgba(217, 106, 24, 0.13) 0%, rgba(217, 106, 24, 0.04) 45%, transparent 75%);
}

/* ---------------------------------------------------------------------------
   Brass
   ---------------------------------------------------------------------------
   Distinct from copper: yellower, softer, less saturated. Used only for
   hardware — the mounts holding the survey sheet down, and the outer keyline
   of a frame. Keeping it to hardware is what stops it muddying the copper. */
.brass-mount {
  position: absolute;
  width: clamp(1.5rem, 3.4vw, 2.1rem);
  height: clamp(1.5rem, 3.4vw, 2.1rem);
  pointer-events: none;
  /* A triangular photo-corner, bevelled: light catching the upper edge. */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-image: linear-gradient(135deg, var(--brass-light) 0%, var(--brass) 38%, var(--brass-deep) 100%);
  box-shadow: 0 1px 3px rgba(11, 11, 11, 0.45);
}

.brass-mount--tl { top: -1px; left: -1px; }
.brass-mount--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.brass-mount--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.brass-mount--br { bottom: -1px; right: -1px; transform: scale(-1); }

/* ---------------------------------------------------------------------------
   Slot placement
   --------------------------------------------------------------------------- */

/* Landing and thank-you: the ground fills the viewport behind everything. */
.stage-ground {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
}

/* The survey sheet lies on a surface. Without photography that surface is
   rendered wood; with it, it is the photograph, graded to match. */
.desk {
  position: relative;
  isolation: isolate;
}

/* A photographic plate inside the survey sheet, under the crest. Letterboxed
   wide and shallow so it reads as a plate in a catalogue, not a hero banner. */
.plate {
  position: relative;
  margin: var(--sp-7) auto 0;
  max-width: var(--measure);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border: 1px solid var(--brass-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 240, 0.28),
    0 3px 14px rgba(57, 35, 23, 0.25);
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.24) saturate(1.1) contrast(1.03) brightness(0.94);
}

.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 45%, rgba(57, 35, 23, 0.4) 100%);
}

.plate__caption {
  margin-top: var(--sp-3);
  text-align: center;
  font-family: var(--font-secondary);
  font-size: var(--step--1);
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  text-indent: var(--track-secondary);
  color: var(--ink-soft);
}