/* ===========================================================================
   Elsewhere Living — Base + brand utilities
   Reusable, vanilla-CSS expressions of the brand's signature marks:
   the wordmark, the bracketed label, the outlined capsule, the film grain.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   Wordmark — "else" in italic serif + "WHERE" in roman small-caps.
   Use .ew-wordmark on a span; put "else" and "WHERE" in two child spans,
   or use the data-driven version below.
   --------------------------------------------------------------------------- */
.ew-wordmark {
  font-family: var(--font-logo);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: 0;
  display: inline-block;
  white-space: nowrap;
}
.ew-wordmark .ew-else {
  font-style: italic;
  font-family: var(--font-logo);
  letter-spacing: -0.05em;
}
.ew-wordmark .ew-where {
  font-style: normal;
  font-family: var(--font-logo);
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0;
  margin-left: -0.05em;
}

/* ---------------------------------------------------------------------------
   Bracketed label — the brand's all-caps wide-tracked eyebrow, e.g. [ LIVING ]
   --------------------------------------------------------------------------- */
.ew-label {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: inherit;
  display: inline-block;
  white-space: nowrap;
}
/* Brackets are baked into the component markup (Label) so they survive
   capture engines & exports; raw HTML should write [ … ] literally. */

/* ---------------------------------------------------------------------------
   Outlined capsule — the elsewhere.living pill
   --------------------------------------------------------------------------- */
.ew-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-pill);
  padding: 0.7em 1.5em;
  border: var(--bw-pill) solid currentColor;
  border-radius: var(--radius-pill);
  color: inherit;
  text-decoration: none;
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   Serif display & headings helpers
   --------------------------------------------------------------------------- */
.ew-display { font: var(--type-display); letter-spacing: var(--ls-serif); margin: 0; }
.ew-h1 { font: var(--type-h1); letter-spacing: var(--ls-serif); margin: 0; }
.ew-h2 { font: var(--type-h2); letter-spacing: var(--ls-serif); margin: 0; }
.ew-h3 { font: var(--type-h3); margin: 0; }
.ew-lead { font: var(--type-lead); margin: 0; }
.ew-subhead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-relaxed);
}

/* Parenthetical destination tag — ( Samui ) in serif.
   Parens are baked into the component markup (Place); raw HTML writes them literally. */
.ew-place {
  font-family: var(--font-serif);
  font-weight: var(--w-light);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Film grain texture — the brand's photography always carries fine grain.
   Apply .ew-grain to a positioned container; the ::after lays subtle noise.
   --------------------------------------------------------------------------- */
.ew-grain { position: relative; }
.ew-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* Dark scrim helper for type over photography */
.ew-scrim { position: relative; }
.ew-scrim > * { position: relative; z-index: 1; }
.ew-scrim::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim-grad);
  z-index: 0;
}