/* ==========================================================================
   Cliq2Know — Coming Soon
   Built against the Figma "Coming Soon Landing Page" frame (node 10:799).

   Palette and typefaces come from the official brand pack:
   LOGO ASSETS/MINI GUIDELINE/C2K IDENTITY MINI_GUIDELINE.pdf
   ========================================================================== */

:root {
  /* Primary palette, named as in the mini guideline */
  --c2k-blue:   #06B8EF;   /* Berry Blue */
  --c2k-gold:   #FFD500;   /* Gold */
  --c2k-black:  #000000;   /* Pure Black */
  --c2k-white:  #FFFFFF;   /* Lily White */

  /* Buffo is the logotype face; Glancyr is the text face (guideline p3) */
  --font-display: 'Buffo', ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Glancyr', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --measure: 52rem;

  /* All three section headings are one size in the design. */
  --size-h2: clamp(24.7px, 21.54px + 0.81vw, 33.2px);

  /* The two motif bands are drawn at different tile sizes in the design, and
     each one scales differently between the 390 and 1440 frames — hence two
     variables rather than one. Each clamp is the line through those two
     points, held flat outside them. */
  --band-row-gold: clamp(69px, 4rem + 1.33vw, 84px);
  --band-row-blue: clamp(38px, 1.75rem + 2.57vw, 65px);
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16.5px, 1.02rem + 0.05vw, 17px);
  line-height: 1.6;
  color: var(--c2k-black);
  background: var(--c2k-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

/* --- Focus & skip link ---------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--c2k-black);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer :focus-visible { outline-color: var(--c2k-gold); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--c2k-black);
  color: var(--c2k-white);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Keep the skip link's target clear of the pinned header. */
#main { scroll-margin-top: 70px; }

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

/* The bar stays with you the whole way down — it is pinned in the prototype. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 0 var(--pad-x);
  background: var(--c2k-white);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand__mark { width: clamp(32px, 2.7vw, 38px); height: auto; }

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

/* Every clamp below is the straight line between the two design frames —
   390px wide and 1440px wide — held flat beyond either end. */

.hero {
  background: var(--c2k-blue);
  padding: clamp(108px, 4rem + 11.24vw, 226px) var(--pad-x)
           clamp(71px, 3.14rem + 5.33vw, 127px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0;
}

.lockup { width: clamp(210px, 7.6rem + 22.67vw, 448px); }

.hero__display {
  margin-top: clamp(67px, 4.07rem + 0.48vw, 72px);
  font-family: var(--font-display);
  font-size: clamp(50px, 2.8rem + 1.333vw, 64px);
  line-height: 1;
  color: var(--c2k-white);
}

/* ⚠️ ACCESSIBILITY NOTE
   White on Berry Blue is ~2.30:1 — below the 3:1 WCAG 2.1 AA minimum even for
   large text. Reproduced here as designed, for brand fidelity. If the design
   lead agrees to a fix, the cheapest one that keeps the look is:
       .hero__display { color: var(--c2k-black); }
   See docs/07-accessibility.md. */

/* No `text-wrap: balance` here or on the other headings: the design breaks
   these lines greedily — a long first line, a short second — and balancing
   would even them out and lose the drawn rag. The measures below are set so
   the natural break lands where the design puts it. */
.hero__title {
  margin-top: clamp(21px, 0.64rem + 2.76vw, 50px);
  font-weight: 800;
  font-size: clamp(24.7px, 18.5px + 1.59vw, 41.4px);
  line-height: 1.05;
  text-wrap: wrap;   /* the UA sheet balances headings; the design does not */
  max-width: var(--measure);
}

.hero__sub {
  margin-top: 28px;
  max-width: 42rem;
  font-size: clamp(16.5px, 0.966rem + 0.267vw, 19.3px);
  line-height: 1.5;
  text-wrap: pretty;
}

/* --- Photo band ----------------------------------------------------------- */

.photo-band { background: var(--c2k-blue); }

/* The band is far wider than the photograph, so `cover` has to throw away most
   of its height. Centred it would cut the faces off; 25% down puts the crop
   where the frame puts it — hair just clipped at the top, chests at the
   bottom — and at mobile's 2:1 it still shows nearly the whole picture. */
.photo-band img {
  width: 100%;
  height: clamp(195px, 9.36rem + 11.62vw, 317px);
  object-fit: cover;
  object-position: 50% 25%;
}

/* --- Sign-up -------------------------------------------------------------- */

.signup {
  padding: clamp(74px, 5.83rem - 1.33vw, 88px) var(--pad-x)
           clamp(80px, 4.65rem + 1.29vw, 94px);
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.signup__title {
  font-weight: 800;
  font-size: var(--size-h2);
  line-height: 1.2;
  text-wrap: wrap;
}
.signup__lede { max-width: 38rem; }

.signup__form { width: 100%; max-width: 33rem; margin-top: 1.5rem; }

.field { text-align: left; }
.field__label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 1.25rem;
}
.field__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.field__input {
  flex: 1 1 16rem;
  min-width: 0;
  font: inherit;
  padding: 0.9rem 1.1rem;
  color: var(--c2k-black);
  background: var(--c2k-white);
  border: 3px solid var(--c2k-black);
  border-radius: 12px;
}
.field__input::placeholder { color: #6B6B6B; }
.field__input[aria-invalid="true"] { border-color: #C81E1E; }

.field__hint {
  margin-top: 0.25rem;
  font-size: 14.7px;
  color: #3A3A3A;
  text-align: center;
}

/* The design leaves no room under the hint, so this reserves none while empty
   and grows once there is something to announce. */
.field__status {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}
.field__status:not(:empty) { margin-top: 0.9rem; }
.field__status[data-state="error"]   { color: #C81E1E; }
.field__status[data-state="success"] { color: #12692F; }

/* Honeypot */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.9rem 1.75rem;
  font: inherit;
  font-size: clamp(16px, 0.975rem + 0.1vw, 17px);
  font-weight: 700;
  text-decoration: none;
  border: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.btn--dark { background: var(--c2k-black); color: var(--c2k-white); border-color: var(--c2k-black); }
.btn--gold { background: var(--c2k-gold);  color: var(--c2k-black); border-color: var(--c2k-gold); }

/* --- Motif bands ---------------------------------------------------------- */
/* The cursor is knocked out of each blob, so the band's own background
   colour shows through it — white in the follow section, black in the footer. */

.band {
  background-repeat: repeat;
  background-position: top center;
}

.band--gold {
  height: calc(var(--band-row-gold) * 2);
  background-color: var(--c2k-white);
  background-image: url('assets/motif-gold.png');
  background-size: auto var(--band-row-gold);
}

.band--blue {
  height: var(--band-row-blue);
  background-color: var(--c2k-black);
  background-image: url('assets/motif-blue.png');
  background-repeat: repeat-x;
  background-size: auto var(--band-row-blue);
  margin: clamp(98px, 5.84rem + 1.14vw, 110px) 0 20px;
}

/* --- Follow --------------------------------------------------------------- */

.follow { background: var(--c2k-gold); }

.follow__body {
  padding: clamp(30px, 0.97rem + 3.71vw, 69px) var(--pad-x)
           clamp(63px, 3.08rem + 3.9vw, 104px);
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.follow__title {
  font-weight: 800;
  font-size: var(--size-h2);
  line-height: 1.2;
  text-wrap: wrap;
}
.follow__lede { max-width: 30rem; }

.socials {
  display: flex;
  gap: 25px;
  margin-top: 56px;
}

.social {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.3px;
}
.social__icon {
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  background: var(--c2k-black);
  color: var(--c2k-white);
  transition: background-color 0.15s ease;
}
.social__icon svg { width: 26px; height: 26px; }
.social:hover .social__icon { background: var(--c2k-blue); }

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

.site-footer {
  background: var(--c2k-black);
  color: var(--c2k-white);
  padding: clamp(36px, 1.4rem + 3.52vw, 73px) 0 clamp(41px, 7.32rem - 5.286vw, 97px);
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}
.site-footer > *:not(.band) {
  padding-inline: var(--pad-x);
  max-width: 52rem;
}
.site-footer .band { width: 100%; max-width: none; padding: 0; }

/* Specificity has to beat `.site-footer > *:not(.band)` above. */
.site-footer .footer__title {
  font-weight: 800;
  font-size: var(--size-h2);
  line-height: 1.2;
  text-wrap: wrap;
  max-width: 64rem; /* wide enough to sit on one line at desktop, as designed */
}

.footer__lede { color: #D6D6D6; }

.site-footer .btn--gold { margin-top: 32px; }

.footer__copy { font-size: 14.8px; color: #C9C9C9; }
.footer__tagline {
  margin-top: 12px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c2k-gold);
}

/* --- Small screens -------------------------------------------------------- */
/* The mobile frame stacks the button under the field and keeps it to its own
   width, with the label centred over the full-width input. */

@media (max-width: 32rem) {
  .field { text-align: center; }
  .field__row { flex-direction: column; align-items: center; }
  /* `flex-basis` would become a *height* once the row turns into a column. */
  .field__input { flex: 0 0 auto; width: 100%; }

  /* These headings are drawn inside text boxes narrower than the column, which
     is what puts the break after "Soon", after "real" and after "Want".
     The footer allowance is 20rem plus the inline padding it carries. */
  .hero__display { max-width: 20rem; }
  .hero__title { max-width: 20rem; }
  .site-footer .footer__title { max-width: calc(20rem + var(--pad-x) * 2); }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* The social hover is a colour change now, so there is nothing to still. */
  .btn:hover { transform: none; }
}