/* ==========================================================================
   Cosmolocal Foundation — landing page
   Framework-free. No build step. Single stylesheet.

   Contents
   0. Tokens
   1. Reset & base
   2. Layers: artwork, grain
   3. Page shell
   4. Masthead
   5. Hero
   6. Signup form
   7. Colophon
   8. Utilities & focus
   9. Responsive
  10. Ambient motion (opt-in: prefers-reduced-motion: no-preference only)
  11. High contrast / forced colors / print
   ========================================================================== */

/* ------------------------------------------------------------ 0. Tokens -- */
:root {
  /* Surface */
  --ink:            #0C0A08;
  --ink-raised:     #17120E;

  /* Type */
  --cream:          #F4EBDA;   /* 17.4:1 on --ink */
  --cream-dim:      #C9BEAC;   /* 10.8:1 */
  --cream-mute:     #A89D8C;   /*  7.2:1 */

  /* Accent */
  --terra:          #C0522D;   /* graphic accent */
  --terra-bright:   #DA6B3E;   /*  5.8:1 on --ink — accent text */
  --terra-deep:     #B44A26;   /* button ground: 5.0:1 with --on-terra */
  --terra-lift:     #C85B33;   /* button hover ground */
  --on-terra:       #FFF6E8;
  --sage:           #8E9C60;

  /* Line */
  --rule:           rgba(244, 235, 218, 0.16);
  --rule-strong:    rgba(244, 235, 218, 0.34);

  /* Type families */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --pad-x: clamp(22px, 5.6vw, 88px);
  --pad-y: clamp(20px, 3.4vh, 40px);

  /* Micro-label */
  --label-size: clamp(0.6875rem, 0.76vw, 0.75rem);
  --label-track: 0.19em;
}

/* --------------------------------------------------- 1. Reset & base ----- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--cream-mute) var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--ink);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* A warm, off-centre depth wash behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(105% 80% at 72% 30%, rgba(74, 50, 33, 0.20) 0%, rgba(12, 10, 8, 0) 58%),
    radial-gradient(80% 62% at 6% 90%, rgba(48, 40, 28, 0.16) 0%, rgba(12, 10, 8, 0) 55%);
}

h1, p, figure, blockquote { margin: 0; }

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

/* ------------------------------------------- 2. Layers: artwork, grain --- */
.art {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 34%;
  z-index: 1;
  pointer-events: none;
  color: var(--cream);
  /* Dissolve the left edge so the network never competes with the headline. */
  -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.45) 30%, #000 52%);
          mask-image: linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.45) 30%, #000 52%);
}

.art__svg {
  width: 100%;
  height: 100%;
}

/* Vignette: keeps the artwork from butting hard against the viewport edges. */
.art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12,10,8,0.95) 0%, rgba(12,10,8,0.5) 5%,
                    rgba(12,10,8,0) 13%, rgba(12,10,8,0) 78%,
                    rgba(12,10,8,0.55) 91%, rgba(12,10,8,0.9) 100%),
    linear-gradient(to left, rgba(12,10,8,0.5) 0%, rgba(12,10,8,0) 7%);
}

/* --- artwork element styling (classes emitted by the generator) --- */
.net-edges path { fill: none; stroke: var(--cream); stroke-linecap: round; }
.net-edges .e1 path { stroke-opacity: 0.13; stroke-width: 0.6; }
.net-edges .e2 path { stroke-opacity: 0.21; stroke-width: 0.8; }
.net-edges .e3 path { stroke-opacity: 0.31; stroke-width: 1.0; }
.net-edges .e4 path { stroke-opacity: 0.44; stroke-width: 1.15; }
.net-edges .ef path { stroke: var(--terra-bright); stroke-opacity: 0.5; stroke-width: 1.2; }

.net-roots path { fill: none; stroke: var(--cream); stroke-linecap: round; }
.net-roots .r7 path { stroke-opacity: 0.50; stroke-width: 2.1; }
.net-roots .r6 path { stroke-opacity: 0.46; stroke-width: 1.6; }
.net-roots .r5 path { stroke-opacity: 0.40; stroke-width: 1.2; }
.net-roots .r4 path { stroke-opacity: 0.34; stroke-width: 0.9; }
.net-roots .r3 path { stroke-opacity: 0.28; stroke-width: 0.7; }
.net-roots .r2 path { stroke-opacity: 0.22; stroke-width: 0.55; }
.net-roots .r1 path { stroke-opacity: 0.16; stroke-width: 0.45; }

.net-tips circle    { fill: var(--cream); fill-opacity: 0.26; }
.net-runners path   { fill: none; stroke: var(--cream); stroke-opacity: 0.14;
                      stroke-width: 0.7; stroke-dasharray: 2 7; }

.net-stipple .s1 circle { fill: var(--cream); fill-opacity: 0.16; }
.net-stipple .s2 circle { fill: var(--cream); fill-opacity: 0.24; }
.net-stipple .s3 circle { fill: var(--sage);  fill-opacity: 0.22; }

.net-nodes .n    { fill-opacity: 0.9; }
.net-nodes .h    { fill-opacity: 1; }
.net-nodes .d    { fill: var(--cream); fill-opacity: 0.36; }
.net-nodes .ring { fill: none; stroke: var(--cream); stroke-opacity: 0.5; stroke-width: 0.85; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* -------------------------------------------------- 3. Page shell -------- */
.page {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--pad-y) + env(safe-area-inset-top))
           calc(var(--pad-x) + env(safe-area-inset-right))
           calc(var(--pad-y) + env(safe-area-inset-bottom))
           calc(var(--pad-x) + env(safe-area-inset-left));
  gap: clamp(28px, 4vh, 56px);
}

/* --------------------------------------------------- 4. Masthead --------- */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 48px);
  flex: 0 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 18px);
  color: var(--cream);
}

.brand__mark {
  width: clamp(33px, 2.8vw, 43px);
  height: auto;
  flex: 0 0 auto;
  opacity: 0.94;
}

.brand__name {
  display: flex;
  flex-direction: column;
  font-size: clamp(0.8125rem, 1.05vw, 1rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.2em;
  color: var(--cream);
}

.masthead__status {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
  white-space: nowrap;
  font-size: var(--label-size);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--label-track);
  color: var(--cream-dim);
  padding-top: 4px;
}

.masthead__ring {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--terra-bright);
  border-radius: 50%;
}

/* ------------------------------------------------------- 5. Hero --------- */
.hero {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}

.hero__content {
  width: 100%;
  max-width: 46rem;
}

.eyebrow {
  font-size: clamp(0.6875rem, 0.86vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--terra-bright);
  margin-bottom: clamp(18px, 2.4vh, 30px);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.375rem, 6.4vw, 5.75rem);
  line-height: 1.03;
  letter-spacing: -0.014em;
  color: var(--cream);
  margin-bottom: clamp(20px, 2.8vh, 34px);
}

.hero__lead {
  max-width: 32.5rem;
  font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--cream-dim);
  margin-bottom: clamp(26px, 4vh, 44px);
}

/* ------------------------------------------------ 6. Signup form --------- */
.signup { max-width: 38rem; }

.signup__row {
  display: flex;
  align-items: stretch;
  max-width: 38rem;
}

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(48px, 5.4vh, 56px);
  padding: 0 18px;
  font: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--cream);
  background: rgba(23, 18, 14, 0.5);
  border: 1px solid var(--rule-strong);
  border-right: 0;
  border-radius: 0;
  appearance: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.signup__input::placeholder { color: var(--cream-mute); opacity: 1; }
.signup__input:hover { border-color: rgba(244, 235, 218, 0.48); }
.signup__input[aria-invalid="true"] { border-color: var(--terra-bright); }

.signup__button {
  flex: 0 0 auto;
  height: clamp(48px, 5.4vh, 56px);
  padding: 0 clamp(20px, 2.2vw, 34px);
  font-family: var(--font-ui);
  font-size: clamp(0.6875rem, 0.82vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--on-terra);
  background: var(--terra-deep);
  border: 1px solid var(--terra-deep);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.signup__button:hover { background: var(--terra-lift); border-color: var(--terra-lift); }
.signup__button:active { background: #A54322; border-color: #A54322; }
.signup__button[disabled] { cursor: progress; opacity: 0.72; }

/* Shown only when JavaScript is unavailable — occupies the same slot as the
   input row so the composition stays deliberate rather than broken. */
.signup__noscript {
  display: none;
  align-items: center;
  max-width: 38rem;
  min-height: clamp(48px, 5.4vh, 56px);
  padding: 12px 18px;
  border: 1px solid var(--rule-strong);
  background: rgba(23, 18, 14, 0.5);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--cream-dim);
}

.signup__note {
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--cream-mute);
}

.signup__sep { margin: 0 0.35em; opacity: 0.7; }

.signup__privacy {
  color: var(--cream-mute);
  text-decoration: underline;
  text-decoration-color: rgba(168, 157, 140, 0.55);
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.signup__privacy:hover {
  color: var(--cream-dim);
  text-decoration-color: var(--cream-dim);
}

/* Status line. Space is reserved up front so no state change moves the page. */
.signup__status {
  min-height: 2.75rem;
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: transparent;
}


.signup__status:empty { border-left-color: transparent; }
.signup__status[data-state="error"]    { color: var(--cream); border-left-color: var(--terra-bright); }
.signup__status[data-state="pending"]  { color: var(--cream); border-left-color: var(--cream-mute); }
.signup__status[data-state="notice"]   { color: var(--cream); border-left-color: var(--terra-bright); }
.signup__status[data-state="success"]  { color: var(--cream); border-left-color: var(--sage); }

/* --------------------------------------------------- 7. Colophon --------- */
.colophon {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 5vw, 64px);
}

.creed {
  padding-left: clamp(14px, 1.2vw, 20px);
  border-left: 1px solid var(--terra);
  max-width: 46ch;
}

.creed p {
  font-size: clamp(0.875rem, 1.02vw, 1rem);
  font-weight: 300;
  line-height: 1.72;
  color: var(--cream-dim);
}

.colophon__meta {
  text-align: right;
  max-width: 34ch;
}

.colophon__mark {
  white-space: nowrap;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  line-height: 1.5;
  color: var(--cream-mute);
}

.colophon__note {
  margin-top: 7px;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--cream-mute);
}

/* -------------------------------------- 8. Utilities & focus ------------- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--terra-bright);
  outline-offset: 3px;
}
.signup__input:focus-visible {
  outline-offset: -1px;
  border-color: var(--terra-bright);
  background: rgba(23, 18, 14, 0.78);
}
.signup__button:focus-visible { outline-offset: 3px; }

/* ------------------------------------------------- 9. Responsive --------- */

/* Wide desktop: give the artwork a little more room. */
@media (min-width: 1600px) {
  .art { left: 38%; }
  .hero__content { max-width: 50rem; }
}

@media (max-width: 1180px) {
  .art { left: 30%; }
  .hero__lead { max-width: 32ch; }
}

/* Short-and-wide (e.g. 1024×768): tighten the vertical rhythm. */
@media (max-height: 820px) and (min-width: 901px) {
  .page { gap: clamp(20px, 2.6vh, 34px); }
  .hero__title { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
  .hero__lead { margin-bottom: clamp(20px, 3vh, 32px); }
}

/* Stacked layout: artwork becomes a full-bleed atmosphere behind the words. */
@media (max-width: 900px) {
  .art {
    left: -26%;
    right: -26%;
    opacity: 0.56;
    -webkit-mask-image: radial-gradient(120% 78% at 60% 42%, #000 24%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(120% 78% at 60% 42%, #000 24%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0) 100%);
  }

  .art::after {
    background:
      linear-gradient(to bottom, rgba(12,10,8,0.92) 0%, rgba(12,10,8,0.58) 15%,
                      rgba(12,10,8,0.78) 34%, rgba(12,10,8,0.76) 60%,
                      rgba(12,10,8,0.44) 76%, rgba(12,10,8,0.90) 96%,
                      rgba(12,10,8,0.97) 100%);
  }

  .hero { align-items: center; }
  .hero__content { max-width: 36rem; }
  .hero__title { font-size: clamp(2.5rem, 8.2vw, 4.25rem); }
  .hero__lead { max-width: 34rem; }

  .colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .colophon__meta { text-align: right; max-width: 42ch; }
  .colophon__mark { white-space: normal; }
}

/* Portrait tablets: let the hero settle into the vertical middle. */
@media (min-width: 641px) and (max-width: 900px) {
  .hero { padding-block: clamp(4px, 3vh, 36px) clamp(12px, 6vh, 72px); }
}

/* Small tablets and phones. */
@media (max-width: 640px) {
  :root { --pad-y: clamp(18px, 2.6vh, 28px); }
  .page { gap: clamp(22px, 3vh, 34px); }
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .masthead__status {
    text-align: left;
    white-space: normal;
    padding-top: 0;
  }
  .signup__row { flex-direction: column; max-width: none; }
  .signup__input { border-right: 1px solid var(--rule-strong); }
  .signup__button { width: 100%; margin-top: 10px; border-radius: 0; }
  .signup__noscript { max-width: none; }
  .signup__status { min-height: 3rem; }
  .hero__lead { max-width: none; }
  .creed { max-width: none; }
}

@media (max-width: 400px) {
  .hero__title { font-size: clamp(2.125rem, 9.4vw, 2.75rem); }
  .brand__name { letter-spacing: 0.16em; }
  .masthead__status { letter-spacing: 0.14em; }
}

/* ------------------------------------ 10. Ambient motion (opt-in) -------- */
/* Everything below is additive and only ever applied when the visitor has NOT
   asked for reduced motion. With `prefers-reduced-motion: reduce`, or with
   JavaScript off, the page renders as a complete, still composition. */
@media (prefers-reduced-motion: no-preference) {

  .art__svg {
    animation: art-drift 96s ease-in-out infinite alternate;
    transform-origin: 62% 46%;
    will-change: transform;
  }

  @keyframes art-drift {
    from { transform: translate3d(-0.5%, 0.35%, 0) scale(1.015); }
    to   { transform: translate3d(0.6%, -0.4%, 0) scale(1.035); }
  }

  .net-nodes .p {
    animation: node-breathe var(--dur, 15s) ease-in-out var(--del, 0s) infinite;
  }

  @keyframes node-breathe {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
  }

  .net-edges .ef path {
    stroke-dasharray: 2.5 200;
    animation: signal-travel var(--dur, 20s) linear var(--del, 0s) infinite;
  }

  @keyframes signal-travel {
    from { stroke-dashoffset: 202.5; }
    to   { stroke-dashoffset: 0; }
  }

  .masthead__ring {
    animation: ring-breathe 11s ease-in-out infinite;
  }

  @keyframes ring-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
  }

  /* Pointer parallax, enabled by script.js only on fine pointers. */
  .art { transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); }
}

/* On phones the whole-artwork drift is dropped: the node breathing alone keeps
   the page alive without asking a small device to recomposite a large SVG. */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .art__svg { animation: none; will-change: auto; }
}

/* --------------------- 11. Forced colors, print, misc -------------------- */
@media (forced-colors: active) {
  .art, .grain { display: none; }
  .signup__button { border: 1px solid ButtonText; }
  .signup__status { forced-color-adjust: none; }
}

@media print {
  .art, .grain, body::before { display: none; }
  body { background: #fff; color: #000; }
  .page { min-height: 0; }
}