/* ─────────────────────────────────────────────────────────
   tapestry.css — shared chrome for the Tapestry Residences sales app
   Chevron Island · Gold Coast · "Where art meets living."

   THE SHARED LAYER. Every Tapestry page links this AFTER
   canonical/colors_and_type.css, canonical/preview/_components.css and
   tapestry-brand.css. It holds the cross-page chrome so the six sibling
   pages (exterior · interior · views · location · amenity · residences)
   stay visually identical: the full-bleed stage, the top bar, the
   immersive nav, the frosted glass info panel + glass surface utility,
   and the toast. PAGE-SPECIFIC styling (the hero render, per-page panels)
   lives in the page file.

   Re-skinned from the Riviera chrome in sales/02-exterior.canonical.html
   and themed entirely through the [data-project="tapestry"] tokens in
   tapestry-brand.css (Pale Stone --proj-accent on Emerald --proj-deep)
   plus the canonical tokens. No brand hue is hardcoded here — every
   colour resolves through a token so a re-skin is a token swap.
   ───────────────────────────────────────────────────────── */


/* ── Frosted-glass tokens ───────────────────────────────────
   Canonical ships no --glass token; its glass surfaces are each composed
   from raw alpha + backdrop-blur (the .hs--glass / .scrim recipe). We
   follow that recipe but centralise the composited tints here so the info
   panel, the top bar wash and any future glass pane share ONE source of
   truth. These are the EMERALD deep (--proj-deep #163029) and the PALE
   STONE accent expressed as translucent washes — not new brand hues, so
   they re-skin automatically with the project tokens.
   (Scoped to the project so a different project's deep tone flows through.)*/
[data-project="tapestry"] {
  --glass-blur:        20px;                       /* panel frost radius */
  --glass-sat:         135%;                       /* saturation lift through the frost */
  --glass-deep:        rgba(22, 48, 41, 0.42);     /* emerald @ 42% — info-panel body */
  --glass-deep-soft:   rgba(22, 48, 41, 0.28);     /* emerald @ 28% — top-bar pill / lighter glass */
  --glass-hair:        rgba(232, 229, 222, 0.22);  /* pale-stone @ 22% — glass rim / hairline seams */
  --glass-hair-soft:   rgba(232, 229, 222, 0.12);  /* pale-stone @ 12% — faintest dividers */
  --glass-shadow:      0 18px 50px rgba(10, 22, 18, 0.40);

  /* Scrim alphas for the over-render chrome (deep emerald, not neutral
     ink — keeps the whole frame in the brand family). */
  --scrim-deep:        rgba(13, 26, 22, 0.78);
}


/* ── Reset + base ───────────────────────────────────────────
   Full-bleed immersive shell: lock the document to the viewport so the
   render reads edge-to-edge with no scroll gutter. Body inherits the
   project body face (Gotham, via --font-body → --font-project). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--proj-deep, #163029); }
body {
  color: var(--proj-on-deep);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, a, input, textarea, select { font-family: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { text-decoration: none; cursor: pointer; }
img { display: block; }


/* ── Stage ──────────────────────────────────────────────────
   The full-bleed layer that hosts each page's hero (render, 360°, map).
   Page files paint the actual media inside .stage; this just establishes
   the immersive frame + the legibility scrim that keeps the white
   wordmark and the glass panel readable over a bright sky/foreground. */
.stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

/* Top-and-bottom legibility wash. Heavier at the very top (the top bar +
   white wordmark sit over bright sky) and at the bottom (the info panel +
   CTAs). Tinted with the deep emerald scrim rather than neutral ink so the
   whole frame stays in the Tapestry palette. pointer-events:none — it must
   never intercept clicks meant for the media or hotspots beneath it. */
.stage__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      var(--scrim-deep) 0%, rgba(13,26,22,0.50) 6%,
      rgba(13,26,22,0.22) 12%, rgba(13,26,22,0.06) 20%,
      transparent 30%, transparent 52%,
      rgba(13,26,22,0.28) 78%, rgba(13,26,22,0.62) 100%);
  pointer-events: none;
}


/* ── Top bar ────────────────────────────────────────────────
   Three-column grid: brand wordmark (left, 1fr) · immersive nav (centre,
   auto) · empty balancing column (right, 1fr). The two equal flanking
   columns keep the nav optically centred in the viewport regardless of the
   wordmark width. Sits over the stage scrim; text is paper-white with a
   soft shadow so it reads on bright imagery. */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: 76px;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #FFF;
}

/* Brand lockup, top-left. The white wordmark PNG carries the Tapestry
   logotype + tagline; it's white-on-transparent so it only reads over the
   dark top scrim (by design). Kept to ~30px cap height per the brand-mark
   sizing rule, with a soft shadow for bright-sky legibility. */
.topbar__brand { display: inline-flex; align-items: center; cursor: pointer; justify-self: start; }
.topbar__wordmark {
  height: 30px; width: auto; display: block;
  filter: drop-shadow(0 1px 10px rgba(13, 26, 22, 0.65));
  transition: opacity var(--duration-micro) var(--ease-out);
}
.topbar__brand:hover .topbar__wordmark { opacity: 0.86; }

/* Immersive nav — the page-mode switcher. Five explore-mode items only;
   Residences and Saved removed. Uppercase, tracked, project display face
   downgraded to Gotham (--font-display → --font-project) so it stays
   crisp UI text. Centred in the top bar (the middle grid column). */
.modules {
  display: flex; align-items: center; gap: var(--space-6);
  justify-self: center;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 400;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  text-shadow: 0 1px 8px rgba(13, 26, 22, 0.55);
}
.modules a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out),
              opacity var(--duration-micro) var(--ease-out);
  white-space: nowrap;
}
.modules a:hover { color: #FFF; }
.modules a.is-active { color: #FFF; border-bottom-color: var(--proj-accent); }
/* Items that aren't wired yet (data-soon) read very slightly quieter so the
   live destinations carry more weight, without looking disabled. */
.modules a[data-soon] { opacity: 0.82; }
.modules a[data-soon]:hover { opacity: 1; }


/* ── Glass surface utility ──────────────────────────────────
   Reusable frosted pane: translucent emerald + backdrop-blur + saturate +
   a pale-stone hairline rim. The shared recipe for any over-render panel
   (info panel, future POI / amenity cards). NO solid fill — the render
   reads softly through it. */
.glass {
  background: var(--glass-deep);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-hair);
  box-shadow: var(--glass-shadow);
}


/* ── Project info panel ─────────────────────────────────────
   Frosted glass plate, bottom-left over the render. Inherits .glass for
   the surface; this block sets the type rhythm. Copy is Pale-Stone /
   Soft-Cream on the emerald frost. The project NAME uses the brand display
   face (Domaine Display ITALIC) as an elegant accent — see the page file
   and the [data-project="tapestry"] .info-panel .name binding in
   tapestry-brand.css. Everything else is Gotham. */
.info-panel {
  position: absolute; left: 48px; bottom: 48px; z-index: 10;
  width: 440px; max-width: calc(100vw - 96px);
  border-radius: var(--radius-lg);
  padding: 30px 34px 28px;
  color: var(--proj-on-deep);
}
.info-panel .eyebrow {
  font-family: var(--font-display); font-size: 10px; font-weight: 400;
  letter-spacing: var(--tracking-mega); text-transform: uppercase;
  color: rgba(232, 229, 222, 0.72);
  margin-bottom: 16px;
}
/* Italic display name — the one place the brand serif sings. Bound to
   --font-project-display (Domaine Display Italic) via tapestry-brand.css. */
.info-panel .name {
  font-size: 46px; font-weight: 400;
  line-height: 1.02; letter-spacing: -0.005em;
  color: #FFF;
  margin-bottom: 4px;
  text-wrap: balance;
}
/* The brand line — "Where art meets living." — set in the italic display
   face, smaller, in warm pale stone. A quiet signature under the name. */
.info-panel .brandline {
  font-family: var(--font-display-elegant);
  font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.3;
  color: var(--proj-accent);
  margin-bottom: 18px;
}
.info-panel .lede {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.6;
  color: rgba(235, 226, 214, 0.86);
  margin-bottom: 24px; text-wrap: pretty;
}
/* Residence facts — a three-up row of quiet stats. A hairline grid in
   pale-stone alpha; numbers in Gotham, labels in tracked caps. Kept
   illustrative (no fabricated price / developer claims). */
.info-panel .facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--glass-hair-soft);
  border: 1px solid var(--glass-hair-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.info-panel .fact {
  background: rgba(22, 48, 41, 0.22);
  padding: 14px 14px 12px;
}
.info-panel .fact__k {
  font-family: var(--font-display); font-size: 9px; font-weight: 400;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: rgba(232, 229, 222, 0.66);
  margin-bottom: 6px;
}
.info-panel .fact__v {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  letter-spacing: -0.02em; color: #FFF; line-height: 1;
}
.info-panel .fact__v .unit {
  font-size: 11px; opacity: 0.6; margin-left: 2px; letter-spacing: 0;
}


/* ── Immersive CTAs ─────────────────────────────────────────
   Bespoke over-render glass buttons (the .btn token component is for
   light product surfaces; these must read on top of a live render). Ghost
   = pale-stone outline glass; primary = solid Pale Stone with Emerald ink
   — the cleanest, most legible action on the render, and the canonical
   project-accent CTA logic. Gotham caps per the brand's UI voice. */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 26px;
  border: 1px solid var(--glass-hair); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 400;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: #FFF; background: var(--glass-deep-soft);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: background var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out),
              color var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out);
}
.cta-btn:hover { background: var(--proj-accent-bg); border-color: var(--proj-accent); }
.cta-btn:active { transform: translateY(1px); }
.cta-btn--primary {
  background: var(--proj-accent); color: var(--proj-deep); border-color: var(--proj-accent);
}
.cta-btn--primary:hover {
  background: var(--proj-accent-soft); border-color: var(--proj-accent-soft); color: var(--proj-deep);
}
/* Thin trailing arrow drawn from a 1px rule + a rotated chevron — inherits
   currentColor so it flips with the button's text colour. */
.cta-btn .arrow {
  width: 18px; height: 1px; background: currentColor; position: relative; flex: none;
}
.cta-btn .arrow::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translate(0, -50%) rotate(45deg);
}


/* ── Toast ──────────────────────────────────────────────────
   Re-skinned from the Riviera flashToast() element. The JS creates a
   #toast div and toggles opacity; this rule themes it as an emerald glass
   chip with a pale-stone label so the "coming soon" notices match the
   brand. (flashToast() sets position/opacity inline; appearance lives
   here so every page shares one look.) */
#toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: var(--glass-deep);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--glass-hair);
  color: var(--proj-on-deep);
  font-family: var(--font-display); font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-shadow);
  z-index: 80; opacity: 0;
  transition: opacity var(--duration-page) var(--ease-out);
  pointer-events: none;
}


/* ── Focus visibility ───────────────────────────────────────
   Keyboard focus ring in the project accent across interactive chrome. */
.modules a:focus-visible,
.cta-btn:focus-visible,
.topbar__brand:focus-visible {
  outline: 2px solid var(--proj-accent); outline-offset: 3px; border-radius: 3px;
}


/* ── Responsive ─────────────────────────────────────────────
   Narrow the chrome margins + scale the panel down on smaller widths.
   The nav reflows / tightens; on very narrow screens the centre nav is
   hidden in favour of the page's own affordances (each page keeps its
   primary CTA). */
@media (max-width: 1100px) {
  .topbar { padding: 0 28px; }
  .modules { gap: var(--space-4); font-size: 11px; }
  .info-panel { left: 28px; right: 28px; bottom: 28px; width: auto; }
}
@media (max-width: 720px) {
  .topbar { height: 64px; }
  .topbar__wordmark { height: 26px; }
  .modules { display: none; }
  .info-panel { padding: 24px 24px 22px; }
  .info-panel .name { font-size: 38px; }
  .info-panel .brandline { font-size: 16px; }
}