/* ===========================================================================
   Locker Room — the boutique layer
   ---------------------------------------------------------------------------
   One brief: the website should feel like walking into the shop on East Kings
   House Road rather than scrolling a catalogue. Everything in this file is
   about that — the doors you come in through, the lighting over the
   merchandise, the brass strip set in the floor between departments, the
   glass of a display case, the mirror in the fitting room, and the moment a
   piece is handed across the counter.

   The front doors that parted on arrival were removed at the owner's
   request. Everything else stands.

   Three rules this layer keeps to:

   1. ADDITIVE ONLY. Nothing here is required for the page to work. Delete the
      two <link>/<script> lines and the site is exactly what it was. No
      existing rule is rewritten; every selector below either targets a class
      this layer invents (.lr-*) or adds a pseudo-element that was unused.

   2. NO LAYOUT. Nothing here changes a box's size, position in flow, or the
      colour of any text. The contrast work measured on the live site stays
      valid, because no text or text background is touched. The light washes
      are warm white at low alpha and sit over merchandise, never over copy.

   3. MOTION IS OPTIONAL. Every animation is a hover/scroll flourish with a
      finished resting state. Under prefers-reduced-motion the whole layer
      settles into a still, slightly richer version of the same design.

   Colour: --brass is the fixture metal (rails, thresholds, door handles,
   directory dots). It is a finish, never text.
   =========================================================================== */

:root {
  --brass: #9a7b4f;                  /* fixture metal: rails, thresholds, dots */
  --lamp: 255, 246, 226;             /* warm halogen, used as rgba(var(--lamp),a) */
}

/* ===========================================================================
   1. THE FLOOR PLAN — a brass threshold between rooms
   ---------------------------------------------------------------------------
   In a real shop you know you have changed department because the floor
   changes under you, usually at a metal strip. boutique.js inserts a 1px
   element at the top of each section whose own negative margin cancels its
   height, so this costs the layout nothing, and draws it open from the centre
   as the room comes into view.
   =========================================================================== */
.lr-threshold {
  display: block; height: 1px; margin-bottom: -1px;
  background: linear-gradient(90deg,
    transparent, rgba(154,123,79,.15) 12%, var(--brass) 50%, rgba(154,123,79,.15) 88%, transparent);
  transform: scaleX(1); transform-origin: 50% 50%; opacity: .75;
  transition: transform 1.25s cubic-bezier(.2,.7,.2,1);
}
/* The drawn line is the RESTING state, and the collapsed one is only ever
   applied by boutique.js adding .lr-draw to <html>. The site's own rule:
   if the script does not run, or runs in an environment where the sweep
   never gets a chance, the floor plan is simply there — never missing. */
.lr-draw .lr-room:not(.is-entered) > .lr-threshold { transform: scaleX(0); }

/* ===========================================================================
   2. LIGHTING OVER THE MERCHANDISE
   ---------------------------------------------------------------------------
   Retail lighting is the whole trick: a narrow warm downlight on the piece
   and a pool of it on the floor beneath, with the surround left dimmer so the
   eye goes where the shop wants it. The garments already hang from a rail
   (see the rack block in styles.css) — this lights that rail.

   Both washes are warm white at low alpha ON TOP of the garment photograph.
   They are deliberately not blend modes: a blend mode here needs a stacking
   context, and a stacking context on these tiles breaks the multiply that
   drops the product shots out of their white boxes. That cost an afternoon
   once; it is not being spent again.
   =========================================================================== */

/* the cone, descending from the rail */
.card-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* Two ellipses hung off the ceiling: a bright narrow shaft at the fitting
     and a wider spill around it. Built from gradients rather than a clipped
     triangle on purpose — a clip-path gives a dead-straight edge that reads
     as a pasted shape, and the edge survives both blur (filters run before
     the clip) and a linear mask (the cone widens, a linear mask does not). */
  background:
    radial-gradient(26% 112% at 50% -8%, rgba(var(--lamp), .5) 0%, rgba(var(--lamp), 0) 72%),
    radial-gradient(76% 94% at 50% -6%, rgba(var(--lamp), .28) 0%, rgba(var(--lamp), 0) 70%);
  opacity: 0; transition: opacity .5s ease;
}
/* the lit floor beneath it */
.card-media::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -2px; height: 26%;
  z-index: 1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%,
    rgba(var(--lamp), .85) 0%, rgba(var(--lamp), .28) 48%, rgba(var(--lamp), 0) 100%);
  opacity: 0; transition: opacity .5s ease;
}
.card:hover .card-media::after,
.card:focus-within .card-media::after { opacity: 1; }
.card:hover .card-media::before,
.card:focus-within .card-media::before { opacity: 1; }

/* The surround dims a little so the lit piece is the brightest thing in the
   row — the reason a boutique never lights the whole wall evenly. */
.card-media { transition: box-shadow .5s ease; }
.card:hover .card-media,
.card:focus-within .card-media {
  box-shadow: inset 0 0 44px rgba(27,26,23,.085);
}

/* Nothing is lit for a piece we cannot sell. */
.card.sold-out:hover .card-media::after,
.card.sold-out:hover .card-media::before { opacity: 0; }
.card.sold-out:hover .card-media { box-shadow: none; }

/* ===========================================================================
   3. DISPLAY-CASE GLASS
   ---------------------------------------------------------------------------
   A slow rake of light across the glass as you pass a vitrine. One shared
   definition, applied to every tile that reads as a case: the two feature
   pieces, the collection tiles, the brand plates, the member packages, the
   print-room photograph and the perk thumbnails.
   =========================================================================== */
.bic-media::after,
.cat-tile::after,
.brand-card::after,
.pack-media::after,
.dtf-hero-photo::after,
.perks li figure::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 42%;
  left: -55%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0), rgba(255,255,255,.42) 48%, rgba(255,255,255,0));
  transform: rotate(14deg);
  transition: left 0s;
}
.bic-card:hover    .bic-media::after,
.cat-tile:hover::after,
.brand-card:hover::after,
.pack:hover        .pack-media::after,
.dtf-hero-photo:hover::after,
.perks li:hover figure::after {
  left: 125%;
  transition: left 1.05s cubic-bezier(.35,.1,.25,1);
}
/* the cases that were not already clipping their own contents */
.brand-card { position: relative; overflow: hidden; }
.dtf-hero-photo { position: relative; }
.perks li figure { position: relative; overflow: hidden; }

/* Glass also catches the room: a hairline highlight along the top edge. */
.bic-media, .cat-tile, .pack-media, .dtf-hero-photo {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

/* ===========================================================================
   4. THE MEMBERS' SALON
   ---------------------------------------------------------------------------
   The back room, lit lower and warmer than the floor, with a brass rule at
   the door. Background only — not one type colour moves, because this band's
   contrast was measured and passes.
   =========================================================================== */
/* Warm light from above only. A second, darkening wash at the foot of the
   band was tried and dropped: 4.5% black over the sand takes --ink-soft body
   copy from 4.64:1 to 4.25:1, which fails AA. Lightening the ground is safe
   in a way that darkening it is not, because every type colour on this band
   is dark. */
.members {
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--lamp), .55) 0%, rgba(var(--lamp), 0) 62%);
  background-repeat: no-repeat;
}
.members-head {
  position: relative; padding-bottom: 20px;
}
.members-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px;
  background:
    linear-gradient(90deg, var(--brass), rgba(154,123,79,.25) 70%, transparent) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(154,123,79,.5), transparent 46%) bottom/100% 1px no-repeat;
  transform: scaleX(1); transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.lr-draw .lr-room:not(.is-entered) .members-head::after { transform: scaleX(0); }

/* The packages sit on a plinth rather than floating on the band. */
.pack { transition: box-shadow .4s ease, border-color .3s ease; }
.pack:hover { box-shadow: 0 18px 38px -22px rgba(27,26,23,.45); }

/* ===========================================================================
   5. THE FITTING ROOM
   ---------------------------------------------------------------------------
   The Design Studio stage is the mirror you hold a shirt up against. It gets
   a brass surround and the warm bloom of a pair of sconces.

   One hard constraint: the stage's background is the backdrop that the
   garment multiplies against, and that preview is what a customer judges a
   colour by. So the stage's own background is left alone and all of this is
   done with box-shadow, which paints on the frame, not under the garment.
   =========================================================================== */
.studio-stage {
  box-shadow:
    inset 0 0 0 1px rgba(154,123,79,.55),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 6px var(--bg),
    0 0 0 7px rgba(154,123,79,.35),
    0 26px 60px -34px rgba(27,26,23,.5);
}
/* The sconces, either side of the mirror. These hang off .studio-stage-wrap,
   which is position:sticky and therefore both a containing block and a
   stacking context — so z-index:-1 puts the bloom behind the stage, and the
   only part of it you see is the spill either side. Deliberately NOT
   restating position on the wrap: a flat rule here would beat the
   max-width:900px rule that unsticks it on a phone. */
.studio-stage-wrap::before,
.studio-stage-wrap::after {
  content: ""; position: absolute; top: 8%; width: 86px; height: 180px;
  pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--lamp), .95) 0%, rgba(var(--lamp), .35) 42%, rgba(var(--lamp), 0) 100%);
  filter: blur(6px);
}
.studio-stage-wrap::before { left: -58px; }
.studio-stage-wrap::after  { right: -58px; }
/* On a phone the wrap is static, so there is nothing for the bloom to hang
   off — and no room beside the mirror for it anyway. */
@media (max-width: 900px) {
  .studio-stage-wrap::before, .studio-stage-wrap::after { display: none; }
}

/* ===========================================================================
   6. THE DIRECTORY — you are here
   ---------------------------------------------------------------------------
   The brass plate by the stairs. A dot per department down the right-hand
   side, the one you are standing in named beside it. Frosted ivory ground so
   the name stays legible whether the room behind it is cream or charcoal.
   Desktop only, and below the header rather than over it.
   =========================================================================== */
.lr-directory {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 45; opacity: 0; transition: opacity .5s ease;
}
.lr-directory.is-ready { opacity: 1; }
.lr-directory ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
/* The column is a fixed 16px of dots and never changes width. The room name
   is taken out of flow entirely and hung off the dot, so the plate cannot
   grow and shrink as you scroll past rooms with longer names. */
.lr-dir-link {
  position: relative; display: flex; justify-content: flex-end; align-items: center;
  width: 16px; padding: 4px 0; cursor: pointer; background: none; border: 0;
  font-family: var(--font);
}
.lr-dir-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  border: 1px solid rgba(154,123,79,.6); background: transparent;
  transition: background .35s ease, transform .35s ease, border-color .35s ease;
}
/* Its own frosted plate, so the name is legible whether the room behind it is
   cream or charcoal. */
.lr-dir-name {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%) translateX(7px);
  background: rgba(246,243,236,.94); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 10px;
  /* Kept deliberately small: at 1440 the page gutter is 80px, and a plate
     wider than that starts covering merchandise rather than sitting beside
     it. 8.5px holds the longest name ("Best in Class") inside the gutter. */
  font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #5c574c; white-space: nowrap; pointer-events: none; opacity: 0;
  box-shadow: 0 8px 20px -14px rgba(27,26,23,.6);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.lr-dir-link:hover .lr-dir-name,
.lr-dir-link:focus-visible .lr-dir-name,
.lr-dir-link[aria-current="true"] .lr-dir-name {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.lr-dir-link:hover .lr-dir-dot { border-color: var(--brass); background: rgba(154,123,79,.4); }
.lr-dir-link[aria-current="true"] .lr-dir-dot {
  background: var(--brass); border-color: var(--brass); transform: scale(1.55);
}
@media (max-width: 1180px) { .lr-directory { display: none; } }
@media (max-height: 620px) { .lr-directory { display: none; } }

/* ===========================================================================
   7. THE COUNTER
   ---------------------------------------------------------------------------
   The header condenses as you walk in from the window, the way a shop front
   gives way to the service counter. And when a piece is added, a ghost of the
   garment is carried across to the bag and the bag takes it.
   =========================================================================== */
.site-header { transition: height .4s ease, box-shadow .4s ease, background-color .4s ease; }
.site-header .header-inner { transition: height .4s cubic-bezier(.2,.7,.2,1); }
.site-header.lr-scrolled .header-inner { height: 66px; }
.site-header.lr-scrolled {
  box-shadow: 0 10px 30px -22px rgba(27,26,23,.55);
  background: rgba(246,243,236,.96);
}
.site-header.lr-scrolled .brand-logo { height: 38px; transition: height .4s cubic-bezier(.2,.7,.2,1); }
.brand-logo { transition: height .4s cubic-bezier(.2,.7,.2,1); }

/* The piece being carried across. Multiply drops the product shot's white
   box out against the page, exactly as it does on the tile it came from.
   No drop-shadow: these shots are JPEGs with no alpha, so a drop-shadow
   traces the rectangle rather than the garment and the box reappears. */
.lr-carry {
  position: fixed; z-index: 180; pointer-events: none;
  object-fit: contain; mix-blend-mode: multiply;
}
/* the bag takes the weight */
@keyframes lr-bag-take {
  0%   { transform: none; }
  34%  { transform: translateY(3px) scale(.9); }
  68%  { transform: translateY(-2px) scale(1.07); }
  100% { transform: none; }
}
.cart-btn.lr-took { animation: lr-bag-take .5s cubic-bezier(.3,.8,.3,1); }
@keyframes lr-count-tick {
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.cart-count.lr-ticked { animation: lr-count-tick .3s ease-out; }

/* ===========================================================================
   8. STILL VERSION
   ---------------------------------------------------------------------------
   Someone who has asked their system not to animate things still gets the
   shop — the lighting, the brass, the glass highlight, the plinth shadows —
   just without anything that moves. The doors are never built at all; that
   decision is in boutique.js.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lr-threshold,
  .lr-draw .lr-room:not(.is-entered) > .lr-threshold { transform: scaleX(1); transition: none; }
  .members-head::after,
  .lr-draw .lr-room:not(.is-entered) .members-head::after { transform: scaleX(1); transition: none; }
  .bic-media::after, .cat-tile::after, .brand-card::after, .pack-media::after,
  .dtf-hero-photo::after, .perks li figure::after { display: none; }
  .lr-dir-name, .lr-dir-dot, .site-header, .site-header .header-inner,
  .brand-logo, .card-media, .pack { transition: none; }
  .cart-btn.lr-took, .cart-count.lr-ticked { animation: none; }
  .card-media::after, .card-media::before { transition: none; }
}