/* =========================================================
   BEFORE AND AFTER — the comparison section

   ⚠️ THIS IS A CONCEPT. There are no before-and-after photographs in this
   project. Every frame points at the filename its real photograph should land
   on and shows a marked placeholder until it does, so the section can be
   judged, dragged and signed off before a single image exists — and so that
   dropping the files in is the whole of the work left.

   ⚠️ A BEFORE-AND-AFTER PAIR IS A RESULTS CLAIM, and a stronger one than any
   wording on this page. Nothing here ships until the client has the
   photographs, written consent from every person in them for this use, and
   sign-off on the claim each pair makes. See "Before this goes live".

   Self-contained — remove this file and the <section> and the page goes
   straight from the proof band to the routine.
   ========================================================= */

.results{
  --ba-ease:cubic-bezier(.16,.84,.44,1);
  position:relative;
  overflow:hidden;
}

/* ---------- The ground ----------
   ⚠️ z-index -2, NOT -1. Both pseudo-elements on this section are already
   spoken for and both sit at -1: [data-spotlight]::before is the pointer glow
   and [data-scene]::after is the scene dissolve. Inside one stacking context
   the -1 layer paints in tree order — ::before, then children, then ::after —
   so a ground at -1 would have painted straight over the pointer glow and put
   it out. -2 is under both, which is where a ground belongs.

   ⚠️ Every colour here is out of the token block in styles.css and nothing is
   dark: --sand 247,243,235, --taupe 184,175,163, --champagne 250,238,200,
   --gold 198,164,85, --cream 253,251,247. The section reads as its own room,
   not as a different page. */
.res-atmos{
  position:absolute;inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}
.res-atmos > *{position:absolute;}

/* 1. The base tone. --sand instead of the page's --cream, which is the whole
      of "give it a different background" — and faded to nothing at both ends,
      because a flat panel would print a visible stripe against the gold band
      above and the noir cut below. */
.rs-wash{
  inset:0;
  background:linear-gradient(180deg,
    rgba(247,243,235,0)   0%,
    rgba(247,243,235,.94) 15%,
    rgba(247,243,235,.94) 82%,
    rgba(247,243,235,0)   100%);
}

/* 2. The split: the room is lit the way the frames are read. Cool on the left
      where BEFORE sits, warm on the right where AFTER does — but as ONE
      continuous wash. Two blocks with an edge would compete with three cards
      that each already have a hard edge of their own. */
.rs-split{
  inset:0;
  background:linear-gradient(90deg,
    rgba(184,175,163,.22)  0%,
    rgba(184,175,163,.08) 26%,
    rgba(250,238,200,0)   46%,
    rgba(250,238,200,.18) 62%,
    rgba(250,238,200,.40) 100%);
}

/* 3. The seam. The divider's own light, spread across a fifth of the section
      instead of two pixels — it is what stops the split reading as a join. */
.rs-seam{
  top:0;bottom:0;left:50%;
  width:min(420px,46vw);
  translate:-50% 0;
  background:linear-gradient(90deg,
    rgba(253,251,247,0), rgba(253,251,247,.72) 50%, rgba(253,251,247,0));
}

/* 4. Two pools, so the ground is alive without a pointer — a phone gets this
      too. They drift on TRANSLATE, which composes with anything else rather
      than replacing it, and they carry no static translate of their own to be
      eaten by the keyframes. */
.rs-pool{border-radius:50%;}
.rs-pool-a{
  left:-8%;top:-16%;
  width:min(900px,88vw);aspect-ratio:1.6;
  background:radial-gradient(circle at 50% 50%,
    rgba(250,238,200,.55) 0%, rgba(250,238,200,0) 66%);
  animation:rsDriftA 34s var(--ease-soft) infinite;
}
.rs-pool-b{
  right:-10%;bottom:-18%;
  width:min(780px,82vw);aspect-ratio:1.4;
  background:radial-gradient(circle at 50% 50%,
    rgba(198,164,85,.20) 0%, rgba(198,164,85,0) 64%);
  animation:rsDriftB 46s var(--ease-soft) infinite;
}
@keyframes rsDriftA{
  0%,100%{translate:0 0;}
  50%    {translate:5% 4%;}
}
@keyframes rsDriftB{
  0%,100%{translate:0 0;}
  50%    {translate:-4% -5%;}
}

@media (prefers-reduced-motion:reduce){
  .rs-pool{animation:none !important;translate:0 0 !important;}
}

/* ---------- Head ----------
   Centred, which is the third arrangement of the same parts: .why is centred
   and symmetrical, .collections is left-aligned beside its outbound link, and
   this one is centred over a grid it has to sit squarely on top of. */
.res-head{
  text-align:center;
  max-width:min(680px,100%);
  margin:0 auto clamp(32px,4vw,58px);
}
.res-eyebrow{
  font-size:clamp(10.5px,.86vw,12.5px);
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:clamp(8px,1vw,14px);
}
.res-title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
/* the same accent the hero gives "Close-Up" and the collections head gives
   "Your Skin" — one colour, used only where the reader is addressed */
.res-title em{font-style:normal;color:var(--gold-accent);}

.res-rule{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.2vw,18px);
  width:min(430px,78%);
  margin:clamp(12px,1.4vw,18px) auto;
}
.res-rule i{
  flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(198,164,85,0),rgba(198,164,85,.7));
}
.res-rule i:last-child{
  background:linear-gradient(90deg,rgba(198,164,85,.7),rgba(198,164,85,0));
}
.res-rule svg{
  flex:none;
  width:clamp(13px,1.1vw,17px);height:auto;aspect-ratio:1;
  fill:var(--gold-accent);
}
.res-sub{
  font-size:clamp(13.5px,1.05vw,16px);
  line-height:1.62;
  color:var(--ink-2);
}

/* ---------- The grid ---------- */
.res-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,30px);
}
@media (max-width:1024px){
  .res-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .res-grid{grid-template-columns:1fr;}
}

/* ---------- One comparison ---------- */
.ba{margin:0;}

.ba-frame{
  --pos:50%;
  position:relative;
  aspect-ratio:4/5;          /* a face, not a landscape */
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--sand,#F4EEE1);
  border:1px solid rgba(194,163,92,.36);
  box-shadow:
    0 1px 2px rgba(120,92,30,.12),
    0 10px 20px -12px rgba(140,108,34,.42),
    0 34px 58px -34px rgba(120,92,30,.5),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.ba-layer{position:absolute;inset:0;}
.ba-layer img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
/* the shared convention on this page: a missing file hides its own <img> and
   lets the marked placeholder behind it show through */
.ba-layer img.is-missing{display:none;}
.ba-layer img:not(.is-missing) ~ .ba-ph{display:none;}

/* ⚠️ The BEFORE layer is the one that is clipped, and it sits ON TOP. Clipping
   the after layer instead would mean the handle uncovers the past rather than
   the result, which reads backwards: you drag right to reveal what changed. */
.ba-before{
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}

/* ---------- Placeholders ----------
   Deliberately not photographic. Two things they have to do: be impossible to
   mistake for a real photograph, and still DEMONSTRATE the drag — so the two
   sides differ in tone, and moving the handle visibly moves a boundary even
   with no images in the project at all. */
.ba-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  text-align:center;
  padding:18px;
  font-family:var(--f-body);
  /* the hatch says "nothing here yet" in the one language every layout
     program uses for it */
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(154,120,32,.05) 0 8px,
    rgba(154,120,32,0)  8px 16px);
}
/* ⚠️ Each label sits in the half it belongs to, not in the middle.
   Centred, the two placeholders print in exactly the same place — so at
   the default 50% the divider cut through both and the frame read
   "BEF|ER", the left half of BEFORE against the right half of AFTER. It
   looked like a rendering bug. The grip, also centred, landed on top of
   whatever survived.

   Pushing the copy up was the first fix and the wrong one: it moved the
   collision rather than removing it. Splitting them sideways removes it —
   each label is inside the region it names, they can never meet, and the
   grip runs down the empty channel between them. */
.ba-before .ba-ph{
  background-color:#E8E4DC;   /* cooler, flatter */
  padding-right:54%;
}
.ba-after .ba-ph{
  background-color:#F7EEDC;   /* warmer, lighter */
  padding-left:54%;
}
/* ⚠️ NO padding-bottom HERE. There used to be one — 26%, 30% under 640px —
   to centre the label in what was left above the product plate. The plate is
   gone, so the label centres in the whole box again.

   ⚠️ The sideways split above STAYS. That is what stops the two placeholders
   printing in the same place and reading "BEF|ER" at the divider; it is not
   the same mechanism and it is not optional. */

.ba-ph b{
  font-size:clamp(11px,.95vw,13px);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#6E5730;
}
.ba-ph span{
  font-size:clamp(10.5px,.85vw,12.5px);
  font-weight:400;
  letter-spacing:.02em;
  color:#7C7062;
}
.ba-ph svg{
  width:clamp(20px,2vw,28px);height:auto;
  margin-bottom:2px;
  fill:none;stroke:rgba(154,120,32,.5);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Corner tags ---------- */
.ba-tag{
  position:absolute;top:12px;
  z-index:3;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,253,248,.92);
  border:1px solid rgba(154,120,32,.3);
  color:var(--gold-ink);
  font-family:var(--f-body);
  font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  pointer-events:none;
}
.ba-tag-b{left:12px;}
.ba-tag-a{right:12px;}

/* ---------- The divider ---------- */
.ba-divider{
  position:absolute;top:0;bottom:0;
  left:var(--pos);
  z-index:4;
  width:2px;
  margin-left:-1px;
  background:linear-gradient(180deg,
    rgba(255,253,248,.4),
    rgba(255,253,248,.95) 18%,
    rgba(255,253,248,.95) 82%,
    rgba(255,253,248,.4));
  box-shadow:0 0 12px rgba(60,44,12,.28);
  pointer-events:none;
}
.ba-divider i{
  position:absolute;top:50%;left:50%;
  translate:-50% -50%;
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(255,253,248,.96);
  border:1px solid rgba(154,120,32,.42);
  box-shadow:0 6px 18px rgba(60,44,12,.26);
}
/* two chevrons, drawn rather than shipped as an icon */
.ba-divider i::before,
.ba-divider i::after{
  content:"";
  position:absolute;top:50%;
  width:6px;height:6px;
  border-right:1.6px solid var(--gold-ink);
  border-bottom:1.6px solid var(--gold-ink);
}
.ba-divider i::before{left:9px;  translate:0 -50%; rotate:135deg;}
.ba-divider i::after {right:9px; translate:0 -50%; rotate:-45deg;}

/* ---------- The handle ----------
   ⚠️ A real <input type="range">, stretched invisibly over the frame. Written
   as a custom drag this would need pointer capture, its own touch-action, a
   keyboard story and an accessible name invented from scratch; a range has all
   four already, and gets arrow keys, Home/End and a screen-reader announcement
   for nothing. Everything visible is the elements above; this is only the
   thing that is actually being operated. */
.ba-range{
  position:absolute;inset:0;
  z-index:5;
  width:100%;height:100%;
  margin:0;padding:0;
  -webkit-appearance:none;appearance:none;
  background:transparent;
  cursor:ew-resize;
  /* let a vertical swipe scroll the page — without this the range eats the
     gesture and the section becomes a trap on a phone */
  touch-action:pan-y;
}
.ba-range:focus{outline:none;}
.ba-range:focus-visible{
  outline:2px solid var(--gold-ink);
  outline-offset:3px;
  border-radius:var(--r-lg);
}
/* The thumb is the full height of the frame so the grab area is the whole
   divider, not a 38px dot — but it paints nothing; .ba-divider is what you
   see. Both vendor forms are needed and they cannot be combined into one
   rule: an unknown selector invalidates the whole list. */
.ba-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:44px;height:220px;
  background:transparent;
  cursor:ew-resize;
}
.ba-range::-moz-range-thumb{
  width:44px;height:220px;
  border:0;
  background:transparent;
  cursor:ew-resize;
}
.ba-range::-webkit-slider-runnable-track{background:transparent;}
.ba-range::-moz-range-track{background:transparent;}

/* ---------- The product plate: REMOVED ----------
   Every frame used to carry an <a class="ba-prod"> on the bottom of the
   photograph — product shot, name, what it is for, "View product" — pairing
   each result with the product that made it. Taken out on request. Deleted
   rather than commented out, so nothing here loads three product photographs
   for a card that does not show them.

   ⚠️ IF IT COMES BACK, TWO THINGS ARE NOT OPTIONAL, and both cost real time
   to find the first time:
     - z-index ABOVE .ba-range. The range is inset:0 across the entire frame,
       so at any lower layer the link paints perfectly and never receives a
       click. The plate was 6 and the range is 5.
     - a SIBLING of .ba-before, never a child. .ba-before is clipped by
       clip-path as the handle travels, and a child of it gets cut in half.

   .ba-ph's padding-bottom went with it — see the placeholder block above. */

/* ---------- Caption ---------- */
.ba-cap{
  margin-top:clamp(12px,1.4vw,18px);
  font-family:var(--f-body);
  text-align:center;
}
/* a short gold bar, the same mark the section head uses, at a third the width
   — it is what ties the caption to the frame above it rather than to the card
   beside it */
.ba-cap-rule{
  display:block;
  width:clamp(30px,3vw,44px);
  height:1px;
  margin:0 auto clamp(8px,1vw,12px);
  background:linear-gradient(90deg,
    rgba(198,164,85,0), rgba(198,164,85,.85), rgba(198,164,85,0));
}
.ba-cap b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(16px,1.36vw,21px);
  font-weight:500;
  line-height:1.22;
  color:var(--ink);
  letter-spacing:-.012em;
}
/* ⚠️ A LABEL, NOT A SHRUNKEN SENTENCE. This was 11.5-13px of Inter at weight
   400 sitting under a serif line — the same shape as the line above it, only
   smaller, which reads as an afterthought rather than as a second rank. It is
   the page's own small-label idiom now: --f-logo, uppercase, letterspaced. The
   two lines are doing different jobs, so they are set in different voices.

   ⚠️ NOT GOLD, AND BRAND.md IS WHY: "never set small gold type on white". At
   this size that rule is exactly what it was written for. --ink-2 carries it,
   and the trailing full stops came off with the sentence shape. */
.ba-cap span{
  display:block;
  margin-top:7px;
  font-family:var(--f-logo);
  font-size:clamp(10.5px,.84vw,11.5px);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink-2);
}

/* ---------- The margins ----------
   Two decorative notes in the space between the shell and the window. Both are
   aria-hidden and take no pointer, and both are GONE below 1440px: under that
   the gutter is not wide enough to hold them and they would either crowd the
   grid or push the page sideways.

   ⚠️ Playfair ITALIC, not a script face. A fourth webfont for two decorative
   words is a real request on a real connection, and ital 400 is already in the
   one <link> this page makes.

   ⚠️ Positioned against .res-body — the grid's own box — with
   right:calc(100% + …), so they hang off the content column and follow it at
   every width instead of being measured off the window. .results already
   carries overflow:hidden, so nothing here can reach the page's scroll width;
   that was verified, not assumed. */
.res-body{position:relative;}

.res-aside{
  display:none;
  position:absolute;
  top:clamp(30px,5vw,96px);
  z-index:2;
  width:max-content;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
/* ⚠️ 1560, not 1440. At 1440 the gutter is 130px and the script note is 141 —
   it was cut off by the section's own overflow:hidden, which hid the fault
   rather than fixing it. The number is the width at which the wider of the two
   notes plus its gap fits in (W - 1260)/2 + 40 with room to spare, and it was
   measured rather than guessed. */
@media (min-width:1560px){
  .res-aside{display:block;}
}
.res-aside-l{
  right:calc(100% + clamp(16px,1.8vw,32px));
  font-family:var(--f-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px,1.6vw,26px);
  line-height:1.5;
  color:var(--gold-accent);
  opacity:.75;
  text-align:right;
  rotate:-7deg;
}
.res-aside-r{
  left:calc(100% + clamp(16px,1.8vw,32px));
  font-family:var(--f-body);
  font-size:clamp(9.5px,.76vw,11px);
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  line-height:2.4;
  color:var(--gold-ink);
  opacity:.62;
  text-align:center;
}
.res-aside-r::after{
  content:"";
  display:block;
  width:26px;height:1px;
  margin:14px auto 0;
  background:rgba(198,164,85,.75);
}

/* The standing note that used to close this section was removed on request.
   Its rules went with it rather than being left behind as dead weight — see
   the note in index.html for what it said and where that now lives. */

/* ---------- Reduced motion ----------
   There is nothing to switch off. The handle is 1:1 with the finger by design
   — a transition on --pos would make the image lag the drag, which is the one
   thing a comparison slider must never do — so this is only here to say that
   the omission is deliberate. */

/* ---------- Phone ---------- */
@media (max-width:640px){
  .ba-frame{aspect-ratio:1/1;}   /* a full portrait is too tall in one column */
  .ba-tag{font-size:9.5px;padding:4px 9px;}
}
/* ⚠️ Ask about the pointer, not the width. The grip bump used to live in the
   640px block, so a touch TABLET — 768 wide, two columns, no mouse anywhere
   near it — got the 38px disc. Measured 38x38 at 768x1024. It is a thumb
   that decides this, not a viewport. */
@media (hover:none) and (pointer:coarse){
  .ba-divider i{width:44px;height:44px;}
}