/* ============================================================
   Lumière Infinie — NIGHT THEME (preview)
   You sell light, and light only reads against dark: the same lamp on cream
   is a wooden object, and on near-black it is a lamp. This makes the rest of
   the site continuous with the hero film instead of a departure from it.

   The values are not inverted by eye — they are the admin panel's palette,
   which was already checked against WCAG AA on this exact background:
     --linen  F4ECDD  13.6:1 on --ink
     --sand   B8A484   7.3:1 on --ink
     --ember-text F0B967 for links and small amber labels
   ============================================================ */
[data-theme="night"]{
  --ink:#14100B; --bark:#1D1811; --grain:rgba(240,185,103,.18);
  --sand:#B8A484; --linen:#F4ECDD;
  --ember:#C07A28; --ember-text:#F0B967; --emberdim:#9A5F1C;
  --ember-glow:#E0913A;
  color-scheme:dark;
}

/* the page's own warm bloom, stronger here because it has somewhere to fall */
[data-theme="night"] body,
body[data-theme="night"]{
  background-image:radial-gradient(ellipse 90% 55% at 50% -12%, rgba(224,145,58,.16), transparent 70%);
}

/* chrome */
[data-theme="night"] header.site{
  background:rgba(20,16,11,.72); border-bottom-color:rgba(240,185,103,.16);
}
[data-theme="night"] .menu-btn span{ background:var(--linen); }
[data-theme="night"] footer{ border-top-color:rgba(240,185,103,.14); }

/* cards stop being white boxes and become lit surfaces */
[data-theme="night"] .card{
  background:rgba(255,244,225,.045); border-color:rgba(240,185,103,.16);
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 26px 56px -26px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
}
[data-theme="night"] .product-card img{
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95);
}
/* the whole page is already night, so the band must not double up */
[data-theme="night"] .collection-night,
[data-theme="night"] .collection-night.is-night{ background:transparent; }
[data-theme="night"] .collection-night::after{ display:none; }

/* ============================================================
   THE LIGHT BAR
   Where the hero photograph ends, the page met the content below at a hard
   horizontal seam. It is a light instead: a strip fixture running the width of
   the page, hottest a third of the way down and falling away below, the way a
   filament tube does. Filament yellow, not white — white here reads as a
   section that failed to load.

   `.page-hero + *` is whatever section follows the hero, so this is a single
   implementation that would land on the collection, the workshop, custom
   design and contact alike — and on any future page that opens with a hero.
   The film's page has no `.page-hero` at all, so it can never be reached.

   It was held to the collection page while it was being judged. It is on every
   hero page now: collection, workshop, custom design, contact.

   WHAT IT IS. Not a guess, and not a tube. This is the band that stood at the
   top of `.collection-night` before the site went dark (4684f0f), sampled off
   that page pixel by pixel:

       -2px from the photo edge   rgb( 36, 24, 17)   the photograph
       +2px                       rgb(243,239,229)   full cream, immediately
       +46px                      rgb(127,123,116)
       +94px                      rgb( 13,  8,  5)   black

   A hard edge, then a straight ramp from #FAF6EC — the brand's own paper
   colour — down to the page over 90px. That is the whole thing.

   Four attempts were spent building something far more elaborate: a lit top
   face, a white-hot core a sixth of the way down, an underside turning into
   shadow, a bloom lifting the photograph. Every one of those was wrong in the
   same way — the light in the reference is BRIGHTEST WHERE IT MEETS THE
   PHOTOGRAPH and only ever gets darker. There is no core to find and nothing
   above the ramp to shade.
   ============================================================ */
/* ---------- TWO PLANES ----------
   A gradient is paint on one surface. However well it is shaded, the eye reads
   the hero and the collection as the same sheet of paper with a stripe on it,
   because nothing is in front of anything — and light alone never establishes
   depth. Occlusion does.

   So the hero becomes a slab: raised, with a real cast shadow, and the
   collection slid up underneath it. `margin-top:-38px` with a matching
   `padding-top` moves the SECTION up without moving anything inside it, so the
   top 38px of the collection — and of the light band drawn at its top edge —
   passes behind the hero and is occluded by it. The light appears from under a
   solid object instead of starting on the same plane. */
[data-theme="night"] .page-hero{
  position:relative; z-index:2;
  /* A CONTACT shadow, not a drop shadow. The first attempt ran 40px down with
     60px of blur and simply deleted the light — the whole band went dark and
     the page lost the thing the shadow was meant to sit above. It reaches
     ~14px now: dark where the slab meets what is behind it, gone before the
     light gets going. Occlusion is a local effect; it does not need reach. */
  box-shadow:0 2px 4px -1px rgba(0,0,0,.8),
             0 9px 14px -7px rgba(0,0,0,.55);
}
/* the underside of the slab, catching the light it stands over */
[data-theme="night"] .page-hero::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,224,164,.5); pointer-events:none; z-index:1;
}

/* ============================================================
   THE HERO HOVERS  —  every page that opens with one
   You cannot see a thing hover unless you can see PAST it. Full-bleed was the
   whole obstacle: its left and right edges ran off-screen, so there was no
   visible ground behind it and the only cue available was the bottom edge.
   Everything below depends on the inset, which is why it comes first.

   The inset is deliberately generous. On a small card 16px reads as a float;
   on a 470px slab it reads as a printing margin. It has to be unmistakable or
   it looks like a mistake.
   ============================================================ */
[data-theme="night"] .page-hero{
  margin:96px clamp(20px,3.2vw,44px) 0;
  border-radius:22px;
  /* the hero used to start under the fixed header and pad its content clear of
     it; now it starts 96px down, so it needs 96px less padding */
  padding-top:44px;
  /* A FLOAT shadow. The contact shadow it replaces is the exact opposite of
     this and no amount of anything else survives it: distance from a surface
     IS the blur and the offset, so 0 2px 4px says "touching" however the rest
     is dressed. Shadows also converge — every layer here is narrower than the
     slab (negative spread), because a shadow the same width as its object
     reads as a glow around it rather than a shadow under it. */
  box-shadow:
    inset 0 1px 0 rgba(255,240,214,.14),          /* the top edge, catching ambient */
    0 6px 16px -8px rgba(0,0,0,.75),
    0 44px 90px -32px rgba(0,0,0,.9),
    0 96px 150px -70px rgba(0,0,0,.75);
}
/* the bottom lip follows the corner now, or it draws a straight line across a
   rounded slab and gives the whole trick away */
[data-theme="night"] .page-hero::before{
  left:22px; right:22px; border-radius:2px;
}
/* the scrim is clipped by the radius; the photograph is too, via overflow */
[data-theme="night"] .page-hero::after{ border-radius:22px; }

/* the section below keeps its 38px tuck, but the slab is inset now, so the
   light band is visible to the left and right of it as well as under it —
   which is the point: the slab hangs in front of a fitting in the room, it
   does not carry one */
@media(max-width:600px){
  [data-theme="night"] .page-hero{
    margin:84px 14px 0; border-radius:16px; padding-top:36px;
  }
  [data-theme="night"] .page-hero::before{ left:16px; right:16px; }
}
[data-theme="night"] .page-hero + *{
  position:relative; z-index:1;
  margin-top:-38px; padding-top:38px;
  /* the pseudo below sits at z-index -1, so this makes the section its own
     stacking context: the light then paints above the section's background and
     beneath everything in it, without needing a z-index on a single child.
     (Setting `position:relative` on the children instead would have killed
     `position:sticky` on the contact sidebar.) */
  isolation:isolate;
}
/* A fitting runs wall to wall. The section below the hero is a max-width
   column on three of these four pages, so `left:0;right:0` stopped the light
   short of the window and left a dark margin down both sides. 100vw centred on
   the column reaches the edges whatever the column is doing; `main` clips the
   couple of scrollbar-widths that overhang, so it never becomes sideways
   scroll. */
[data-theme="night"] main{ overflow-x:clip; }
/* except on the film's page, which is the one thing this file must not reach
   into. It has no `.page-hero` so it never gets a bar, but the clip above
   would still apply to its <main>, and the film pins a canvas inside it.

   This was written `[data-theme="night"] body[data-page="home"] main` and had
   never matched anything: that asks for a <body> DESCENDED FROM the themed
   element, and both attributes sit on the same <body>. It was harmless only
   for as long as the rule above was scoped to the collection page. The moment
   that scope came off, the film's <main> would have been clipped by a guard
   that had never once fired. Both attributes on one compound selector now, and
   the test below asserts it. */
[data-theme="night"][data-page="home"] main{ overflow-x:visible; }
[data-theme="night"] .page-hero + *::before{
  content:""; display:block; position:absolute; bottom:auto;
  left:50%; width:100vw; transform:translateX(-50%);
  /* top:38px, not 0 — the section starts 38px higher than the hero's edge now,
     so this puts the band's first pixel back exactly on that edge and leaves
     the solved ramp untouched. The hero's cast shadow lands on top of it. */
  /* top:0, not 38 — the bar STRADDLES the hero's edge rather than starting at
     it. A blurred bar reaches its peak in its middle, so one that begins at the
     edge shows only half its brightness there; this one is 38px into itself by
     the time it clears the hero, so the light is at full strength exactly where
     the photograph stops. The 38px above that are behind the slab. */
  top:0; z-index:2; opacity:1; pointer-events:none;
  /* Literal colours, not var(--ink) — this file redefines --ink to near-black,
     which is what took the band out when the site went dark in the first place.

     And not a yellow I liked the look of. These are measured off the eight
     product photographs: for each one, the mean of the brightest 1.5% of
     pixels (what the lamp emits) and of the 3rd-8th percentile (the halo it
     throws). Averaged across all eight:

         arc-bracket    #F8DFB8 / #A46330      pulley       #EBBA85 / #9E6034
         barrel         #FAE9B4 / #F2992D      torch        #E7B16C / #6D4931
         classic        #F3D5B8 / #D18344      chandelier   #F8C786 / #C97035
         halo           #FACB6C / #CE7D38      lattice      #F0C67A / #BF835A
         ------------------------------------------------------------------
         MEAN           #F3CC90  emitted       #B9733A  halo

     The old band was #FAF6EC — the brand's paper. Read as a light that is
     daylight, which is the one colour nothing in this workshop emits.

     NO STOPS. This was a gradient through six rewrites, and every one of them
     failed the same way: a gradient is a hand-placed ramp, so its smoothness
     has to be tuned, and every tune put a corner somewhere else. Nine solved
     stops and a measured rate curve existed only to imitate something the
     renderer will do exactly if asked.

     So it is a 96px bar of the emitted colour with a 26px blur on it. Blur IS
     a Gaussian falloff, which is what light actually does, so the smoothness
     is structural — there is no stop to place and therefore no seam to
     introduce. The bar's upper half bleeds up behind the hero, which occludes
     it; what shows is the lower half, brightest at the photograph's edge and
     falling away over roughly 80px. The shape the band always wanted, arrived
     at by describing the light rather than drawing its cross-section.

     #F3CC90 is the emitted colour, not the filament's #FDF8DE. That white was
     measured off the brightest 0.2% of the photographs and it is honest, but
     an unlit page has no reason to show you a filament — what it should show
     is what the filament THROWS, and that is yellow the whole way down. */
  height:96px; background:#F3CC90; filter:blur(26px);
}

/* ---------- the light does something ----------
   Layer one, above, ADDS colour to the page. That is a sticker: it sits on top
   of the pieces and nothing under it changes. A lamp does the opposite — it
   changes what you can see of everything near it.

   So this layer carries no colour at all. It brightens and warms its own
   BACKDROP: the section behind it, the card photographs, the wood and the
   glass in them. Passing under it, a piece is genuinely lit rather than
   overlaid, and the effect is free — it is whatever was already there, turned
   up. `isolation:isolate` on the section is what scopes it: the backdrop root
   is the collection, so this can reach the pieces and never the hero.

   Masked rather than faded by opacity, so the brightening itself tapers off
   and there is no edge where it stops. */
[data-theme="night"] .page-hero + *::after{
  content:""; display:block; position:absolute;
  top:38px; left:50%; width:100vw; transform:translateX(-50%);
  height:168px; z-index:1; pointer-events:none; opacity:1;
  -webkit-backdrop-filter:brightness(1.28) saturate(1.45);
  backdrop-filter:brightness(1.28) saturate(1.45);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.46) 34%, rgba(0,0,0,.16) 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.46) 34%, rgba(0,0,0,.16) 62%, transparent 100%);
}

/* Measured clearance between each hero and the first text under it:
     collection 121px   workshop 384px   custom design 111px   contact 33px
   The band is 90px. Contact was the one page whose first heading sat inside
   the light — "Contact Us" measured 2.5:1 against it and the form eyebrow
   2.3:1 — so it gets the clearance the other three already had. (This is why
   the rule is here and not a blanket padding on every hero page: three of them
   would gain 80px of dead space to fix a problem they do not have.) */
[data-theme="night"] .contact-wrapper{ padding-top:118px; }

/* the product-card blooms spill past these wrappers too */
[data-theme="night"] #view-product,
[data-theme="night"] #view-collection{ overflow-x:clip; }

/* the hero photograph is graded toward the film rather than sitting bright */
[data-theme="night"] .page-hero__bg{ filter:brightness(.52) saturate(.9) contrast(1.06); }
/* This used to REPLACE the base scrim (styles.css) with a vignette alone — and
   a vignette is clear in the middle, which is exactly where the headline and
   lead sit. Measured against rendered pixels the custom-design lead fell to
   3.7:1 over its bench photograph. The vignette is now layered ON TOP of the
   scrim it was quietly deleting, and the diagonal is a little heavier because
   the rest of the page is darker than the one it was drawn for. */
[data-theme="night"] .page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,0) 40%, rgba(10,6,3,.75) 100%),
    linear-gradient(105deg, rgba(13,8,5,.96) 0%, rgba(13,8,5,.82) 38%, rgba(13,8,5,.34) 70%, rgba(13,8,5,.56) 100%),
    linear-gradient(to bottom, rgba(13,8,5,.8) 0%, transparent 26%, transparent 62%, rgba(13,8,5,.55) 100%);
}

/* forms */
[data-theme="night"] .input, [data-theme="night"] textarea.input, [data-theme="night"] select.input{
  background:rgba(255,244,225,.05); border-color:rgba(240,185,103,.20); color:var(--linen);
}
[data-theme="night"] .input::placeholder{ color:rgba(184,164,132,.55); }
[data-theme="night"] .btn-ghost{ border-color:rgba(240,185,103,.35); color:var(--linen); }
[data-theme="night"] .btn-ember{ color:#17110A; background:var(--ember-glow); }

/* the notice and small print */
[data-theme="night"] .li-consent{
  background:rgba(23,18,12,.96); border-color:rgba(240,185,103,.20);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
}
[data-theme="night"] .li-consent-ok{ background:var(--ember-glow); color:#17110A; }

/* the preview flag itself */
.preview-flag{ position:fixed; z-index:70; left:20px; bottom:20px; transform:none;
  padding:7px 16px; border-radius:999px; font-family:var(--font-spec); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  background:rgba(224,145,58,.16); border:1px solid rgba(240,185,103,.35); color:#F0B967; }
.preview-flag a{ color:inherit; border-bottom:1px solid currentColor; }

/* ============================================================
   THE GLOW
   The point of the dark theme: a lamp photographed on a pale page is a wooden
   object; the same photograph with light spilling out of it onto the page is
   a light. The bloom is drawn BEHIND the image and sized to the card, so it
   reads as the piece illuminating its own surroundings rather than as a
   border effect.
   ============================================================ */
/* `.product-card` carries `overflow:hidden` (styles.css:364) to clip the
   photograph to the card's radius. That also clipped this bloom to the card's
   own box — the light had nowhere to fall, so there was nothing to see. The
   clip is lifted here and the radius moved onto the image itself, which is the
   only thing the clip was ever for. */
[data-theme="night"] .product-card{ position:relative; isolation:isolate; overflow:visible; }
[data-theme="night"] .product-card img{ border-radius:15px; }
@media(max-width:560px){ [data-theme="night"] .product-card img{ border-radius:8px; } }

[data-theme="night"] .product-card::before{
  content:""; position:absolute; z-index:-1; left:50%; top:36%;
  width:135%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(255,206,138,.26) 0%, rgba(240,185,103,.10) 20%,
    rgba(224,145,58,.032) 40%, rgba(192,122,40,0) 62%);
  opacity:.5; transition:opacity .55s ease, transform .55s ease; pointer-events:none;
}
[data-theme="night"] .product-card:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1.18); }
/* the photograph lifts out of its own light rather than sitting flat on it */
[data-theme="night"] .product-card img{ position:relative; z-index:1; }
/* and the frame stops competing with the glow: at .045 white it read as a grey
   box floating in front of the bloom, which is the opposite of the effect */
[data-theme="night"] .product-card.card{
  background:transparent; border-color:transparent; backdrop-filter:none;
  box-shadow:none;
}

/* A piece with no photograph yet fell back to `linear-gradient(--bark, --grain)`,
   and --grain is a warm translucent amber — over near-black that composites to a
   flat olive slab the size of a card, which read as a broken image. It is now a
   dark well, and it takes the card radius, which `border-radius:0` (styles.css:424)
   used to leave to the card's own clip. */
[data-theme="night"] .product-card img,
[data-theme="night"] .pd-gallery-main img{ background:linear-gradient(160deg,#1A150F,#100C08); }
[data-theme="night"] .media-placeholder{
  background:
    radial-gradient(120% 140% at 50% 22%, rgba(240,185,103,.07), transparent 62%),
    linear-gradient(160deg,#1A150F,#100C08);
  box-shadow:inset 0 0 0 1px rgba(240,185,103,.08);
}
[data-theme="night"] .product-card .media-placeholder,
[data-theme="night"] .pd-gallery-main .media-placeholder{ border-radius:15px; }
@media(max-width:560px){
  [data-theme="night"] .product-card .media-placeholder{ border-radius:8px; }
}

/* the same treatment on the piece's own page, where it has room to breathe */
[data-theme="night"] .pd-gallery-main{ position:relative; isolation:isolate; overflow:visible; }
[data-theme="night"] .pd-gallery-main img{ border-radius:15px; }
[data-theme="night"] .pd-gallery-main.card{ background:transparent; border-color:transparent; backdrop-filter:none; box-shadow:none; }
[data-theme="night"] .pd-gallery-main::before{
  content:""; position:absolute; z-index:-1; inset:-26% -18%;
  background:radial-gradient(ellipse at 50% 44%,
    rgba(255,206,138,.32) 0%, rgba(240,185,103,.15) 26%,
    rgba(224,145,58,.06) 48%, rgba(192,122,40,0) 72%);
  pointer-events:none;
}

/* ---------- contact page: its own stylesheet hardcodes white ---------- */
/* The wood chips and the woods carousel lived on the contact page and have
   been removed from it — seven wood names in a horizontal scroller sat between
   the reader and the thing they came to do, which is send a message. The rules
   that styled them are gone with the markup rather than left behind as dead
   weight nobody dares delete later. */
[data-theme="night"] .contact-sidebar,
[data-theme="night"] .form-area,
[data-theme="night"] .workshop-box{
  background:rgba(255,244,225,.045) !important;
  border-color:rgba(240,185,103,.16) !important;
  box-shadow:0 26px 56px -26px rgba(0,0,0,.85);
}
[data-theme="night"] .contact-hero--legacy{ border-bottom-color:rgba(240,185,103,.14); }
[data-theme="night"] .form-group input,
[data-theme="night"] .form-group select,
[data-theme="night"] .form-group textarea,
[data-theme="night"] .captcha-block{
  background:rgba(0,0,0,.28) !important; border-color:rgba(240,185,103,.20) !important; color:var(--linen) !important;
}
[data-theme="night"] .submit-btn-contact{ background:var(--ember-glow); color:#17110A; }
[data-theme="night"] .submit-btn-contact:hover{ background:#F0B967; }

/* ---------- the film is NOT touched ----------
   The scroll hero carries its own palette and its own contrast decisions, and
   every one of them was measured. Nothing in this file may reach inside it. */
/* Deliberately empty. The rules above are scoped to cards, forms, chrome and
   page heroes — none of which exist inside .scrub-hero — so the film inherits
   nothing from this file. This comment is the guard: if a future rule here
   starts matching .scrub-* it has broken that promise. */

/* ---------- contrast repairs found by measuring, not by eye ----------
   Two rules were written for a cream page and carried straight over:
   the footer small print at rgba(124,101,71,.5) — a dark brown at half
   opacity, which on near-black measured 3.2:1 — and the legal contents list,
   whose panel was a near-white rgba that took its links down to 1.3:1. */
[data-theme="night"] .footer-bottom{
  color:var(--sand); border-top-color:rgba(240,185,103,.14);
}
[data-theme="night"] .legal .toc{
  background:rgba(255,244,225,.045); border-color:rgba(240,185,103,.16);
}
[data-theme="night"] .legal .toc a{ color:var(--ember-text); }
/* the skip link is only ever seen on focus, but it is a keyboard user's first
   control on the page, so it gets the same treatment as everything else */
[data-theme="night"] .skip-link{ background:var(--ember-glow); color:#17110A; }

/* ---------- hands off the film ----------
   `[data-theme="night"] .btn-ghost` and `.btn-ember` were matching the CTAs
   inside the scroll scenes, at equal specificity to the film's own rules and
   later in the cascade — so they won. The film had its buttons decided when
   its contrast was measured against actual frames; these put them back and
   are more specific, so nothing in this file can reach the film again. */
[data-theme="night"] .scrub-hero .btn-ghost,
[data-theme="night"] .scrub-scene .btn-ghost{
  color:#f7efe2; border-color:rgba(247,239,226,.55); background:none;
}
/* pinned, NOT var(--ember): this file redefines that variable, which silently
   moved the film's button from #A9671F to #C07A28 and took white text from
   4.52:1 down to about 3.4:1. The film's contrast was measured against real
   frames; it keeps the value it was measured with. */
[data-theme="night"] .scrub-hero .btn-ember,
[data-theme="night"] .scrub-scene .btn-ember{
  background:#A9671F; color:#fff;
}