/* =========================================================
   BASE — Coastline / Moray Jewel
   Resets + the brand's reusable atom vocabulary (.g-*) and the
   9:16 page object (.guide-page). Components and UI kits build
   on these instead of redeclaring type and surfaces.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--backdrop);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: var(--lh-body);
  font-weight: var(--w-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* =========================================================
   ATOMS — TYPE
   ========================================================= */
.g-label {
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: var(--w-text-medium);
  letter-spacing: var(--trk-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.g-label--light { color: var(--text-on-dark-soft); }
.g-label--ember { color: var(--accent); }
/* The signature label: a short ember rule precedes the words */
.g-label--ruled { display: flex; align-items: center; gap: 0.9em; }
.g-label--ruled::before {
  content: ""; width: 1.6em; height: 1px; background: var(--accent);
}

.g-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--w-mono);
  letter-spacing: var(--trk-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

.g-display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  letter-spacing: var(--trk-display);
  line-height: var(--lh-display);
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
.g-display em { font-style: italic; font-weight: var(--w-display-italic); }
.g-display--ember em { color: var(--accent); }

.g-display--xl  { font-size: var(--display-xl); line-height: 0.96; }
.g-display--lg  { font-size: var(--display-lg); line-height: 1.02; }
.g-display--md  { font-size: var(--display-md); line-height: 1.1; }
.g-display--sm  { font-size: var(--display-sm); line-height: 1.18; letter-spacing: -0.01em; }

.g-lede {
  font-family: var(--font-display);
  font-weight: var(--w-display-italic);
  font-style: italic;
  font-size: var(--text-lede);
  line-height: var(--lh-lede);
  letter-spacing: -0.005em;
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

.g-body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
}

/* On dark grounds */
.on-dark .g-lede,
.on-dark .g-body { color: var(--text-on-dark-soft); }

/* =========================================================
   ATOMS — MEDIA. Photos are full-bleed objects, never cards:
   zero radius, fine multiply grain, optional mono caption.
   ========================================================= */
.g-media {
  position: relative;
  display: block;
  background: var(--surface-page-deep);
  overflow: hidden;
}
.g-media img { width: 100%; height: 100%; object-fit: cover; }
.g-media::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--grain-dot) 1px, transparent 1px);
  background-size: var(--grain-size) var(--grain-size);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.g-media__caption {
  position: absolute;
  bottom: 0.8em; right: 0.8em;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--trk-mono);
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(17,13,9,0.5);
  backdrop-filter: blur(6px);
  padding: 0.4em 0.7em;
}

/* Placeholder for a not-yet-supplied asset — diagonal hatch,
   dashed inset, mono label, italic hint. data-slot marks it. */
.g-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.2em;
  background: repeating-linear-gradient(-45deg,
    var(--surface-page-deep) 0 12px,
    rgba(0,0,0,0.025) 12px 14px);
  color: var(--text-muted);
  text-align: center;
}
.g-placeholder::before {
  content: ""; position: absolute; inset: 0.6em;
  border: 1px dashed var(--border-strong);
  pointer-events: none;
}
.g-placeholder__label {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: var(--trk-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4em;
}
.g-placeholder__hint {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-display-italic);
  font-size: 0.95em;
  color: var(--text-body);
  max-width: 20ch;
  line-height: 1.3;
}

/* =========================================================
   ATOM — WORDMARK. "Moray Jewel." with a thin-italic "Jewel"
   and an ember full-stop. The brand signature.
   ========================================================= */
.g-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 1.2em;
  letter-spacing: -0.01em;
  color: inherit;
}
.g-wordmark em { font-style: italic; font-weight: var(--w-display-italic); }
.g-wordmark .dot { color: var(--accent); }

/* =========================================================
   THE PAGE OBJECT — a 9:16 rectangle floating on the backdrop.
   ========================================================= */
.guide-page {
  width: var(--page-w);
  aspect-ratio: var(--page-aspect);
  background: var(--surface-page);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-page);
  display: flex; flex-direction: column;
  font-size: clamp(11px, 1.6vw, 14px);
}
.guide-page--dark { background: var(--surface-dark); color: var(--bone); }
.guide-page--deep { background: var(--surface-page-deep); }

.guide-page__num {
  position: absolute;
  bottom: 1.2em; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: var(--trk-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}
.guide-page--dark .guide-page__num { color: var(--bone-faint); }

.guide-page__footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 var(--page-pad) 0.9em;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: var(--trk-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}
.guide-page--dark .guide-page__footer { color: var(--bone-faint); }
.guide-page__footer-mark { color: var(--accent); }
.guide-page--dark .guide-page__footer-mark { color: var(--accent-on-dark); }