/* General Coins — one-pager
 * Mostly cream, a single navy accent section. Editorial, restrained.
 * Type scale, spacing scale, and the eyebrow pattern follow the brand guideline. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-feature-settings: "cv11", "ss01";
  background: var(--gc-surface);
  color: var(--gc-content-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---- Layout primitives ---------------------------------------------------- */

.gc-section {
  padding-left: var(--gc-pad-x);
  padding-right: var(--gc-pad-x);
  padding-top: var(--gc-space-24);
  padding-bottom: var(--gc-space-24);
}

/* Sections cap their width and stay left-aligned (asymmetric, never centered). */
.gc-section { max-width: 1440px; }

/* Asymmetric measure — text lives in the left ~60%, breathing room on the right. */
.gc-measure { max-width: 60ch; }
.gc-measure-wide { max-width: 68%; }

/* ---- Typography ----------------------------------------------------------- */

.gc-eyebrow {
  display: inline-block;
  margin: 0 0 var(--gc-space-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gc-eyebrow);
}

/* The brand fingerprint: 60px gunmetal underline, 2px, beneath the eyebrow. */
.gc-rule {
  width: 60px;
  height: 2px;
  border: 0;
  margin: 0 0 var(--gc-space-6);
  background: var(--gc-accent);
}

.gc-hero-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.10;
  letter-spacing: -0.01em;
}

.gc-section-title {
  margin: 0 0 var(--gc-space-6);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.gc-lead {
  margin: var(--gc-space-8) 0 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--gc-content-secondary);
}

.gc-body {
  margin: 0 0 var(--gc-space-4);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--gc-content-secondary);
}
.gc-body:last-child { margin-bottom: 0; }

/* ---- Header --------------------------------------------------------------- */

.gc-header {
  display: flex;
  align-items: center;
  padding: var(--gc-space-8) var(--gc-pad-x);
}

.gc-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--gc-space-3);
  text-decoration: none;
  color: var(--gc-content-primary);
}

.gc-lockup__mark { display: block; height: 32px; width: auto; color: var(--gc-navy); }

.gc-lockup__word {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Hero ----------------------------------------------------------------- */

.gc-hero { padding-top: var(--gc-space-20); padding-bottom: var(--gc-space-32); }

/* ---- Navy accent section -------------------------------------------------- */

.gc-section--navy {
  position: relative;
  overflow: hidden;
  background: var(--gc-dark-surface);
  color: var(--gc-cream);
}
.gc-section--navy .gc-eyebrow { color: var(--gc-gunmetal-400); }
.gc-section--navy .gc-body { color: var(--gc-dark-secondary); }

/* Inverted mark as a quiet watermark in the right-hand breathing room. */
.gc-watermark {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  max-width: 55%;
  color: var(--gc-cream);
  opacity: 0.05;
  pointer-events: none;
}

/* ---- Closing -------------------------------------------------------------- */

.gc-closing .gc-section-title { max-width: 16ch; }

/* ---- Footer --------------------------------------------------------------- */

.gc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gc-space-6);
  flex-wrap: wrap;
  padding: var(--gc-space-12) var(--gc-pad-x);
  border-top: 1px solid var(--gc-border-subtle);
}

.gc-footer__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--gc-space-2);
  color: var(--gc-content-primary);
}
.gc-footer__mark { height: 20px; width: auto; color: var(--gc-navy); }
.gc-footer__word { font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

.gc-footer__copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gc-slate);
}

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 767px) {
  .gc-measure-wide { max-width: 100%; }
  .gc-watermark { right: -160px; opacity: 0.04; }
}

@media (max-width: 479px) {
  :root { --gc-pad-x: 24px; } /* practical floor below the 60px brand mobile pad */
}