/* ==========================================================================
   Golevon — Coming Soon
   --------------------------------------------------------------------------
   1. Fonts
   2. Design tokens
   3. Reset / base
   4. Layout
   5. Hero
   6. Footer
   7. Motion
   ========================================================================== */

/* 1. Fonts
   --------------------------------------------------------------------------
   Self-hosted, latin subset only, variable weight — one file per family covers
   every weight the page uses. Served from our own origin, so there is no
   third-party connection to open and nothing to leak to a font CDN.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Design tokens
   ========================================================================== */

:root {
  /* Brand palette. Every colour on the page resolves through these seven
     tokens and nothing else hard-codes a value, so a second or third theme is
     a matter of redeclaring this block under a scope — see README › Themes. */
  --color-bg: #f7f4ee;
  --color-line: #e7e1d8;
  /* Held as channels so a translucent variant can be derived from the same
     source — change the gold in one place and the hairline border follows. */
  --color-gold-rgb: 184, 154, 90;
  --color-gold: rgb(var(--color-gold-rgb));
  --color-gold-line: rgba(var(--color-gold-rgb), 0.4);
  --color-ink: #1c1b1a;
  --color-ink-soft: #4a4744;
  /* As faint as the closing note can go and still clear AA (4.9:1). */
  --color-ink-faint: #6f6a63;

  /* Gold on the cream background measures 2.45:1 — below the WCAG AA
     threshold, so it is used only for the brand name, the "Launching Soon"
     line and the hairlines. Every sentence that carries information is set in
     --color-ink (16.2:1) or --color-ink-soft (9.4:1). For an AA-large
     compliant gold (3.1:1), set --color-gold to #a8873f. */

  /* Type */
  /* Fallbacks are metric-adjacent, so a swap during load shifts as little as
     possible: a Garamond-class serif for the display face, a grotesque for
     Inter. */
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond,
    "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Spacing. The vertical rhythm between blocks is a clamp() at each use site,
     tuned against the design reference at 1076px; only the page frame is fixed. */
  --page-padding-block: 2.75rem;
  --page-gutter: 1.5rem;

  /* Motion */
  --duration: 700ms;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. Reset / base
   ========================================================================== */

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

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

/* The whole composition is sized in rem, so capping the root font size against
   the viewport height scales type and rhythm down together and keeps the page
   on a single screen — no scrollbar on desktop, whatever the window height.
   Phones are excluded: there the layout is driven by width and already fits,
   and shrinking text on a tall, narrow screen would only hurt. Below ~600px of
   height the floor takes over and the page scrolls rather than turning
   illegible. */
@media (min-width: 48em) {
  html {
    font-size: clamp(0.6rem, 1.64vh, 1rem);
  }
}

body,
h1,
h2,
p,
figure {
  margin: 0;
}

body {
  /* Flat, on purpose. A soft radial wash was tried here and banded visibly on
     narrow viewports — the reference is flat and stays cleaner. */
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background-color: var(--color-line);
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

/* 3. Layout
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--page-padding-block) var(--page-gutter);
  text-align: center;
}

/* Auto margins centre the block vertically without ever clipping overflow
   the way `justify-content: center` can on short viewports. */
.page__main {
  margin-top: auto;
}

.page__footer {
  margin-bottom: auto;
}

.page__main,
.page__footer {
  width: 100%;
}

/* Hairline separator — long and faint rather than short and solid. A true
   sub-pixel height rounds unpredictably across browsers, so the "thinner"
   reading comes from opacity on a crisp 1px line. */
.rule {
  width: clamp(3.5rem, 8vw, 6rem);
  height: 1px;
  margin: 0 auto;
  border: 0;
  background-color: var(--color-gold);
  opacity: 0.55;
}

/* 4. Hero
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40rem;
  margin: 0 auto;
}

.hero__mark {
  width: clamp(4rem, 13vw, 6rem);
  height: auto;
  /* `text-align` does not centre a block-level image inside the
     shrink-to-fit brand header — auto margins do. */
  margin-inline: auto;
  /* Clear air between the monogram and the wordmark — they must not touch. */
  margin-bottom: clamp(1rem, 1.8vw, 1.4375rem);
}

.hero__name {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 10.5vw, 4.875rem);
  font-weight: 400;
  line-height: 1.05;
  /* Cormorant sets narrower than the reference face; the open tracking brings
     the wordmark back to the reference width and is the luxury-house idiom. */
  letter-spacing: 0.095em;
  text-indent: 0.095em;
  color: var(--color-gold);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

.hero__tagline {
  margin-top: clamp(0.5rem, 1.6vw, 0.625rem);
  /* Floor is set by the widest phone constraint: at 0.35em tracking the line
     must still clear 320px in one piece. */
  font-size: clamp(0.6875rem, 1.6vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.35em;
  /* The tracking adds a trailing gap after the last letter, which throws the
     centring off by half of it; pull the line back by the same amount. */
  text-indent: 0.35em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.hero > .rule {
  margin-top: clamp(0.875rem, 2.2vw, 1.3125rem);
}

.hero__lede {
  margin-top: clamp(1.75rem, 4vw, 2.375rem);
  /* Holds the break at "…products / powered by AI." without a hard <br>:
     the first clause fits, adding the next word does not. */
  max-width: 30rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.375rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hero__text {
  margin-top: clamp(0.625rem, 1.5vw, 0.75rem);
  /* Measure capped well under the 40rem hero so the three lines stay short
     and centred rather than running the full width. */
  max-width: 30rem;
  font-size: clamp(0.9375rem, 2.6vw, 1.0625rem);
  line-height: 1.75;
  color: var(--color-ink-soft);
  /* One sentence over two lines — balance splits it evenly instead of leaving
     a short widow on the second. */
  text-wrap: balance;
}

/* Development status panel. */
.notice {
  margin-top: clamp(1rem, 2.5vw, 1.25rem);
  /* Wider than the headline measure — in the reference the panel is the widest
     element on the page, which is what makes it read as a framed aside rather
     than another paragraph. */
  width: 100%;
  max-width: 31.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--color-gold-line);
  border-radius: 0.5rem;
}

.notice__icon {
  display: block;
  width: clamp(1.75rem, 4.5vw, 2.5rem);
  height: auto;
  margin: 0 auto;
  color: var(--color-gold);
}

.notice__title {
  margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.9vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  color: var(--color-gold);
}

.notice__text {
  /* The panel is wide; the copy column inside it is not. Holding the measure
     here is what keeps the three lines from becoming two. */
  max-width: 20rem;
  margin: clamp(0.5rem, 1.5vw, 0.9375rem) auto 0;
  font-size: clamp(0.75rem, 2vw, 0.8125rem);
  line-height: 1.7;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* Deliberately quieter than the lede: smaller, lighter, widely tracked — a
   discreet status line rather than a second headline. */
.hero__status {
  margin-top: clamp(1rem, 2.5vw, 1.3125rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

/* Flanking hairlines. Inline-block rather than flex so the line stays one
   centred run of text and the rules ride on the type's own baseline box. */
.hero__status::before,
.hero__status::after {
  content: "";
  display: inline-block;
  width: clamp(1.5rem, 3.5vw, 2.75rem);
  height: 1px;
  vertical-align: middle;
  background-color: var(--color-gold);
  opacity: 0.55;
}

.hero__status::before {
  margin-right: clamp(0.75rem, 1.75vw, 1.5rem);
}

.hero__status::after {
  /* The extra 0.08em absorbs the trailing letter-space of the last glyph, so
     the two rules sit at equal optical distance from the text. */
  margin-left: calc(clamp(0.75rem, 1.75vw, 1.5rem) - 0.08em);
}

/* 5. Footer
   ========================================================================== */

.page__footer > .rule {
  margin-top: clamp(1.5rem, 4vw, 2rem);
}

.copyright {
  margin-top: clamp(1.5rem, 3.5vw, 2.375rem);
  /* 0.75rem, not smaller: on phones the root stays at 16px, so this is the
     floor at which the line is still comfortably legible. Hierarchy against
     the note below comes from colour and tracking, not size. */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* Optional closing note. Delete this rule and its <p> to remove it. */
.footer-note {
  margin-top: clamp(0.75rem, 2vw, 0.75rem);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* 6. Motion
   ========================================================================== */

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal {
  animation: reveal var(--duration) var(--easing) both;
}

.hero__mark {
  animation-delay: 0ms;
}
.hero__name {
  animation-delay: 70ms;
}
.hero__tagline {
  animation-delay: 140ms;
}
.hero > .rule {
  animation-delay: 210ms;
}
.hero__lede {
  animation-delay: 260ms;
}
.hero__text {
  animation-delay: 320ms;
}
.notice {
  animation-delay: 380ms;
}
.hero__status {
  animation-delay: 440ms;
}
.page__footer {
  animation-delay: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
  }
}