/* ==========================================================================
   Home Story — Interior Design
   The brand layer. Loaded after /css/style.css, which it does not replace.
   ==========================================================================

   Two sites run on one stylesheet. That file is 2200 lines of design system —
   the glass, the neumorphic light model, the grid, every breakpoint — and none
   of it is about steel or about interiors. What separates the two companies
   visually is a palette, so a palette is all that is in here.

   Which means: a fix to a button, a gallery breakpoint or a focus ring lands on
   both sites at once, and the two cannot quietly drift apart over a year of
   small edits. It is also 60 KB this site does not ship, for anyone who has
   already visited the other one.

   The variable names stay as they are — `--ember` on an interiors site reads
   oddly, but renaming the token would mean rewriting every rule that uses it in
   the shared file, which is exactly the coupling this arrangement avoids. Read
   `--ember` as "the accent", whatever the accent happens to be.

   Rules below fall into two groups, and only two:

     1. Token overrides. The palette proper.
     2. Restatements. Half a dozen places where the shared file bakes the
        accent into literal rgba() stops — a gradient cannot be tinted by a
        variable it does not reference — so the whole declaration is repeated
        here in green. Each one names its line in style.css. If you change one
        of those rules over there, change it here too; there is no way to make
        that automatic short of rewriting them to use colour-mix(), which is
        still too new to rely on for a business site.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* The accent, taken from the mark the owner supplied: #8cbc44, measured off
     the file rather than eyeballed. Hot and deep are the same hue lifted and
     dropped, so highlights and shadows stay in one family the way the ember
     set does.

     The surfaces are deliberately untouched. Both companies work out of one
     office and hold to one standard, and the site should say so before a word
     is read — same gunmetal, same light model, different accent. Two different
     background colours would have made them look like two unrelated firms that
     happen to link to each other. */
  --ember: #8cbc44;
  --ember-hot: #b4e070;
  --ember-deep: #5d8a25;
  --ember-glow: rgba(140, 188, 68, 0.35);
  --ember-ring: rgba(140, 188, 68, 0.55);
}

/* --------------------------------------------------------------------------
   2. Restatements
   -------------------------------------------------------------------------- */

/* style.css:92 — the fixed wash behind the whole page. Its warm corner is a
   literal orange; the cool one below it is shared and left alone. */
body::before {
  background:
    radial-gradient(120vw 90vh at 50% -10%, rgba(140, 188, 68, 0.07), transparent 60%),
    radial-gradient(90vw 70vh at 100% 100%, rgba(90, 130, 190, 0.05), transparent 65%);
}

/* style.css:361 — the primary button. Every stop is baked. */
.btn-ember {
  background:
    linear-gradient(150deg, rgba(196, 232, 138, 0.5), rgba(140, 188, 68, 0.32) 55%, rgba(93, 138, 37, 0.4));
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(226, 245, 196, 0.75),
    inset 0 -1.5px 1px rgba(180, 224, 112, 0.3),
    inset 0 0 26px rgba(160, 208, 88, 0.22),
    0 14px 36px rgba(84, 126, 34, 0.36),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-ember:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(236, 250, 214, 0.9),
    inset 0 0 34px rgba(180, 224, 112, 0.3),
    0 22px 52px rgba(90, 134, 36, 0.5),
    0 0 30px var(--ember-glow);
}

/* style.css:620 — the fabrication hero re-points the accent to a patina green
   of its own, which is not this company's green. Put it back to ours, so the
   badge dot, the primary button and the scroll cue in the hero match the mark
   in the corner of the same screen. */
.hero {
  --ember: #8cbc44;
  --ember-hot: #b4e070;
  --ember-deep: #5d8a25;
  --ember-glow: rgba(140, 188, 68, 0.35);
  --ember-ring: rgba(140, 188, 68, 0.55);
}

/* style.css:662 — and its restated button, for the same reason. */
.hero .btn-ember {
  background:
    linear-gradient(150deg, rgba(196, 232, 138, 0.5), rgba(140, 188, 68, 0.32) 55%, rgba(93, 138, 37, 0.4));
  box-shadow:
    inset 0 1.5px 0 rgba(226, 245, 196, 0.75),
    inset 0 -1.5px 1px rgba(180, 224, 112, 0.3),
    inset 0 0 26px rgba(160, 208, 88, 0.22),
    0 14px 36px rgba(84, 126, 34, 0.36),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero .btn-ember:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(236, 250, 214, 0.9),
    inset 0 0 34px rgba(180, 224, 112, 0.3),
    0 22px 52px rgba(90, 134, 36, 0.5),
    0 0 30px var(--ember-glow);
}

/* style.css:649 — the veil over the hero canvas. Topology is a line field
   rather than Cells' dense mosaic, so it needs a lighter hand than the
   fabrication hero does or the pattern disappears entirely; the left-hand
   radial that keeps the headline legible is kept, the flat wash over the rest
   is thinned. */
.hero-veil {
  background:
    radial-gradient(70vw 80vh at 18% 45%, rgba(22, 25, 30, 0.92), rgba(22, 25, 30, 0.45) 44%, transparent 76%),
    linear-gradient(100deg, rgba(18, 20, 24, 0.4) 30%, rgba(18, 20, 24, 0.16) 60%, rgba(18, 20, 24, 0.36)),
    linear-gradient(to bottom, rgba(16, 18, 22, 0.72), rgba(16, 18, 22, 0.18) 30%, rgba(31, 35, 42, 0.58) 78%, var(--surface) 99%);
}

/* The static hero, for everyone who does not get the animation — a phone, a
   metered connection, or anyone who asked for reduced motion. homestory.js sets
   this class before it decides anything, and only removes it once Topology is
   actually running, so this is what is on screen at first paint either way and
   there is never a flash of empty box. */
#vanta-hero.is-static {
  background:
    radial-gradient(80vw 70vh at 22% 32%, rgba(140, 188, 68, 0.16), transparent 62%),
    radial-gradient(60vw 60vh at 82% 78%, rgba(90, 130, 190, 0.1), transparent 60%),
    linear-gradient(160deg, #23282f, #171a1f 62%, #141619);
}

/* style.css:1489 — the glow behind the vision section. */
.vision::before {
  background: radial-gradient(circle, rgba(140, 188, 68, 0.1), transparent 62%);
}

/* style.css:1527 — the word-by-word illumination as it lights. */
.vision-statement .w.lit {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 26px rgba(140, 188, 68, 0.15);
}

/* --------------------------------------------------------------------------
   3. The mark
   --------------------------------------------------------------------------
   The fabrication logo is an SVG carrying several fills, one of which — the red
   eyes — was the only thing still visible at watermark opacity, which is why
   style.css:1903 desaturates it before fading it. This mark is a single flat
   green with nothing to overpower anything else, so that treatment does the
   opposite here: grey at 5.5% is not a faint mark, it is no mark. Keep the
   colour and lift the fade a little instead. */

.watermark img {
  filter: none;
  opacity: 0.075;
}

.watermark--footer img { opacity: 0.09; }

/* --------------------------------------------------------------------------
   4. Lenis
   --------------------------------------------------------------------------
   Only present when homestory.js has started it, which it does not do under
   prefers-reduced-motion. The html.lenis class comes from the library. */

/* Native smooth scrolling and Lenis are two things animating the same scroll
   position, and together they fight: anchor jumps overshoot and stutter.
   style.css:69 sets scroll-behavior: smooth on <html> for everyone, so it has
   to come back off for the one page that has something better. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* While the viewer is open the page behind it must not move — the wheel
   belongs to the image, not to the document under it. */
.lenis.lenis-stopped { overflow: hidden; }

/* --------------------------------------------------------------------------
   5. On a handset — lifted
   --------------------------------------------------------------------------
   This section used to live here, and it said of itself: "if any of it earns
   its place, it should be lifted into style.css deliberately rather than by
   accident." It earned its place. It is section 20b of style.css now.

   What settled it was finding the fabrication site had none of it. Both sites
   are drawn from the same stylesheet and served to the same phones off the
   same Kerala mobile networks; there was never a reason for one of them to
   follow the reader's thumb and the other not to, beyond which of the two
   happened to be open on the day this was written. Nothing here was specific
   to interiors — it was specific to handsets.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. The mark in the bar
   --------------------------------------------------------------------------
   style.css:534 sizes .brand-mark at 46px square and lets the image fill it,
   on a stated assumption: "the art carries its own margin inside a square
   canvas, so the box is oversized to bring the glyph up to the optical weight
   of the wordmark next to it."

   True of the fabrication mark, false of this one. Measured off the two files:
   the steel mark's glyph occupies 69% x 66% of its canvas and so draws about
   30px tall inside that box. This mark is a 423x512 raster trimmed to its own
   edges — its glyph is 100% of its canvas — so object-fit: contain fits it to
   the full 46px and it lands half again as tall as its sibling in an otherwise
   identical lockup. It crowds the wordmark beside it, and it crowds the bar
   around it once that bar docks and the bar is the only thing that got
   smaller.

   Corrected as a ratio inside the existing box rather than as a new box size,
   so the hover transform and the docked sizes below all keep working off one
   number instead of three.
   -------------------------------------------------------------------------- */

.brand-mark img {
  width: 74%;
  height: 74%;
}

/* The bar drops from 76px to 68px when it docks; the mark dropped nothing,
   which is the state the crowding actually shows up in. Transitioned on the
   same curve and duration as .nav and .nav-inner (style.css:482, :494) so the
   three arrive together instead of the mark snapping into a bar still
   moving. */
.brand-mark {
  transition:
    width 0.6s var(--ease-liquid),
    height 0.6s var(--ease-liquid),
    transform 0.6s var(--ease-liquid);
}

.nav.is-stuck .brand-mark {
  width: 40px;
  height: 40px;
}

@media (max-width: 820px) {
  /* --nav-h is 66px here before it docks, so the mark starts from the size the
     wider bar only reaches after docking. */
  .brand-mark { width: 40px; height: 40px; }
  .nav.is-stuck .brand-mark { width: 36px; height: 36px; }
}