/* ==========================================================================
   Decentralyne — landing
   Palette and type follow the brand identity guide. See docs/designs/brand.md
   for the full system, including the two swatch labels in the guide that
   disagree with the swatches they label.
   ========================================================================== */

:root {
  /* Brand palette — the colours as drawn in the guide. */
  --periwinkle: #7D84B2;
  --lavender:   #D9DBF1;
  --crimson:    #DA3E52;
  --lime:       #DBF4A7;
  --cream:      #F9F9ED;
  --coal:       #222222;

  /* Roles. Periwinkle is the signature colour and carries structure — the
     mark, the node field, rules. Crimson is reserved for action and emphasis,
     so that a button never competes with the brand furniture around it. */
  --ground:       var(--cream);
  --ground-raise: #EFF1F9;
  --ground-deep:  var(--lavender);

  --ink:          var(--coal);
  --ink-soft:     #4E5064;
  /* Dark enough to clear 4.5:1 on the DARKEST ground it lands on, which is the
     lavender close band, not the cream page. Tuned against cream alone it was
     #6E7186, which passed there (4.5) and quietly failed on the close band
     (3.5) and the raised band (4.3) — where the sign-up label, the secondary
     link and the ARCHIVED tag all sit. */
  --ink-faint:    #5B5E74;

  --brand:        var(--periwinkle);
  --brand-deep:   #616894;

  --accent:       var(--crimson);
  --accent-deep:  #B92C41;
  --accent-soft:  #F3C0C7;

  --rule:         #DCDEEB;

  /* The guide sets everything in Google Sans, which has no web licence.
     Figtree is the stand-in: same geometric-humanist build, double-storey a,
     near-identical proportions at text sizes. Swapping it is a one-line
     change here plus the <link> in each page. Caveat Brush is the guide's
     own second face and is used exactly where the guide uses it — as a
     handwritten annotation, never as running text. */
  --body:    "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--body);
  --hand:    "Caveat Brush", "Bradley Hand", ui-rounded, cursive;

  --shell:  min(1180px, 100% - 3rem);
  --narrow: min(660px, 100% - 3rem);
  --bay:    clamp(4.5rem, 10vw, 8.5rem);
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One typeface now carries both headings and text, so headings earn their
   rank on weight and tracking rather than on a change of voice. */
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }

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

:where(a, button, input):focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--ground);
  z-index: 20;
  text-decoration: none;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ── Masthead ───────────────────────────────────────────────────────── */

.masthead {
  width: var(--shell);
  margin: 0 auto;
  padding: 1.9rem 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* The lockup is the mark beside the logotype, both the designer's own vector
   (see docs/designs/brand.md for provenance). Neither is type — the logotype
   is bespoke lettering with no font behind it — so both are painted with
   currentColor through a CSS mask: any brand colour, crisp at any size, no
   inline SVG duplicated across five files. Gated behind @supports, with the
   plain bold word as the fallback. */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  color: var(--brand-deep);
  text-decoration: none;
  transition: color 160ms ease;
}

@media (hover: hover) {
  .wordmark:hover { color: var(--ink); }
}

.wordmark-mark { display: none; }

.wordmark-type {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

@supports ((-webkit-mask-image: url(logo.svg)) or (mask-image: url(logo.svg))) {
  .wordmark-mark {
    display: block;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    background: currentColor;
    -webkit-mask: url(logo.svg) center / contain no-repeat;
            mask: url(logo.svg) center / contain no-repeat;
  }

  .wordmark-type {
    display: block;
    width: 138px;
    aspect-ratio: 749.5 / 68.1;
    text-indent: -200vw;
    overflow: hidden;
    background: currentColor;
    -webkit-mask: url(wordmark.svg) center / contain no-repeat;
            mask: url(wordmark.svg) center / contain no-repeat;
  }
}

.masthead-cta {
  font-size: 0.895rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule);
  transition: color 160ms ease, border-color 160ms ease;
}
/* Hover states are gated on a real pointer. On a touch screen :hover latches
   after a tap and stays on until you tap something else, so the Join button
   sat there marigold long after the press. */
@media (hover: hover) {
  .masthead-cta:hover { color: var(--accent-deep); border-color: var(--accent); }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-copy { max-width: 34rem; }

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.45rem + 4.2vw, 3.95rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 700;
}

/* The second line was an italic serif when the display face was a serif.
   A sans has no italic worth setting at this size, so the emphasis moves to
   colour — which is also the one place on the page crimson gets to be large. */
.hero h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.lede {
  margin-top: 1.6rem;
  max-width: 30rem;
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  line-height: 1.58;
  color: var(--ink-soft);
}

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

.join { margin-top: 2.4rem; max-width: 29rem; }

.join-label {
  display: block;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.65rem;
}

.join-row {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
}

.join-row input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--ground-raise);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.82rem 1.15rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.join-row input::placeholder { color: var(--ink-faint); }
@media (hover: hover) {
  .join-row input:hover { border-color: var(--accent-soft); }
}
.join-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(218 62 82 / 0.16);
}

.join-row button {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 560;
  font-size: 0.985rem;
  color: var(--ground-raise);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.82rem 1.65rem;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
@media (hover: hover) {
  .join-row button:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
  }
}
.join-row button:active { transform: translateY(1px); }

.join-note {
  margin-top: 0.95rem;
  font-size: 0.885rem;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 26rem;
}

.join-status {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.45;
  min-height: 0;
}
.join-status:empty { display: none; }
.join-status[data-tone="ok"]   { color: var(--accent-deep); }
.join-status[data-tone="err"]  { color: #A32233; }

/* ── Signature: many centers ───────────────────────────────────────── */

.field {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 30rem;
}

.field svg { display: block; width: 100%; height: auto; overflow: visible; }

.mc-node {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(calc(var(--x1) * 1px), calc(var(--y1) * 1px)) scale(1);
  animation: mc-settle 1500ms cubic-bezier(0.2, 0.86, 0.24, 1) var(--d) both;
}

@keyframes mc-settle {
  from { transform: translate(calc(var(--x0) * 1px), calc(var(--y0) * 1px)) scale(var(--s0)); }
  to   { transform: translate(calc(var(--x1) * 1px), calc(var(--y1) * 1px)) scale(1); }
}

/* The field cycles the mark's own four node shapes. Same radius on every one,
   because the point of the picture is that no centre outranks another — the
   shapes say the room holds different disciplines, the equal size says it
   holds them equally. */
.mc-dot { fill: var(--brand); }

.mc-halo {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.15;
  opacity: 0;
  animation: mc-halo 800ms ease-out both;
  animation-delay: calc(var(--d) + 1150ms);
}

@keyframes mc-halo {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 0.32; transform: scale(1); }
}

.mc-halo { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .mc-node { animation: none; }
  .mc-halo { animation: none; opacity: 0.32; }
}

/* ── Bands ──────────────────────────────────────────────────────────── */

.band { padding-block: var(--bay); }

.band-raised {
  background: var(--ground-raise);
  border-block: 1px solid var(--rule);
}

.band-close { background: var(--ground-deep); border-top: 1px solid var(--rule); }

.wrap { width: var(--shell); margin: 0 auto; }
.wrap-narrow { width: var(--narrow); margin: 0 auto; text-align: center; }

.section-head {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.15rem + 2.4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
  font-weight: 700;
  max-width: 20ch;
}

.section-lede {
  margin-top: 1.15rem;
  max-width: 44ch;
  font-size: 1.075rem;
  color: var(--ink-soft);
}

.wrap-narrow .section-lede { margin-inline: auto; }

/* ── Beats ──────────────────────────────────────────────────────────── */

.beats {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.beats-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A 2px periwinkle rule, not a hairline: these are the only repeated
   structural marks on the page, so they are where the brand colour does the
   most work for the least noise. */
.beat { padding-top: 1.15rem; border-top: 2px solid var(--brand); }

.beat h3 {
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.3;
  letter-spacing: -0.016em;
  font-weight: 600;
}

.beat p {
  margin-top: 0.6rem;
  font-size: 0.965rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── Turn line ──────────────────────────────────────────────────────── */

/* The guide uses Caveat Brush for annotations pointing at things — never for
   running text. The turn line is exactly that: one hand-written aside per
   section, in the margin of the argument. It is the only place the second
   face appears, and it is capped at a line or two by the max-width. */
.turn {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(1.65rem, 1.15rem + 1.95vw, 2.45rem);
  line-height: 1.24;
  letter-spacing: 0;
  color: var(--accent);
  max-width: 24ch;
}

/* The quiet turn is a full paragraph, so it stays in the text face — a
   handwritten face at forty characters a line stops being an annotation. */
.turn-quiet {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.45rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  max-width: 40ch;
}

/* The line that admits the call list did not start empty. Body type on
   purpose: the turn line right below is the one allowed to be italic and
   large, and two emphatic lines in a row cancel each other out. */

.honest {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 46ch;
  font-size: 1.03rem;
  color: var(--ink-soft);
}

.honest + .turn { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* The masthead now carries two links on both pages, so the right-hand pair is
   grouped and spaced as one flex child. .masthead is space-between and expects
   exactly two children; the nav keeps it that way. */

.masthead-nav {
  display: flex;
  align-items: baseline;
  gap: clamp(1.1rem, 2.5vw, 1.9rem);
}

.masthead-alt {
  font-size: 0.895rem;
  color: var(--ink-soft);
  text-decoration: none;
}

@media (hover: hover) {
  .masthead-alt:hover { color: var(--accent-deep); }
}

/* The client page's primary action is a mail link, not a form, so it needs the
   weight the submit button carries on the member page. */

.hero-cta { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

.hero-cta a {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--accent);
  transition: color 150ms ease;
}

@media (hover: hover) {
  .hero-cta a:hover { color: var(--accent-deep); }
}

/* ── Split: heading column beside content column ────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.split .section-head { max-width: 14ch; }
.split .section-lede { max-width: 34ch; }

/* ── Surface list ───────────────────────────────────────────────────── */

.surface {
  margin: 0;
  padding: 0;
  list-style: none;
}

.surface li {
  padding: 1.05rem 0 1.05rem 1.9rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 1.055rem;
  color: var(--ink-soft);
}
.surface li:first-child { border-top: 1px solid var(--rule); }

/* The rounded square is the mark's most legible node, and the only one of the
   four that still reads as itself at nine pixels. The other three are saved
   for the hero field, where they are big enough to tell apart. */
.surface li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.66em;
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--brand);
}

.surface strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* ── Steps: numbered beats for "how the work reaches you" ───────────── */

.steps { counter-reset: step; }
.steps .beat { counter-increment: step; }

.steps .beat h3::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* ── Roster: delivered work ─────────────────────────────────────────── */

.roster {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3rem);
}

.roster li { border-top: 2px solid var(--brand); }

.roster a,
.roster span {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.016em;
  color: var(--ink);
  text-decoration: none;
}

.roster a { transition: color 150ms ease; }
@media (hover: hover) {
  .roster a:hover { color: var(--accent-deep); }
}

/* Marks the link as leaving the page. Decorative, so hidden from screen
   readers, which already announce the link. */
.roster a::after {
  content: "\2197";
  margin-left: 0.35em;
  font-family: var(--body);
  font-size: 0.68em;
  color: var(--ink-faint);
}
@media (hover: hover) {
  .roster a:hover::after { color: var(--accent); }
}

/* Second roster block: the news network. Sits under the first list, so it
   needs its own heading weight — smaller than a section head, larger than a
   roster entry, or the two lists read as one run-on list. */

.roster-head {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.05rem + 1.25vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--ink);
  font-weight: 700;
}

.roster-lede {
  margin-top: 0.9rem;
  max-width: 52ch;
  font-size: 1.03rem;
  color: var(--ink-soft);
}

.roster-lede + .roster { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Veboe has no public URL, so it is text, not a link. */
.roster > li > span { color: var(--ink-soft); }

.roster .roster-note {
  display: inline;
  padding: 0;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Secondary path: the client, not the member ─────────────────────── */

.hero-alt,
.close-alt {
  margin-top: 1.4rem;
  max-width: 29rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.close-alt { margin-inline: auto; }

.hero-alt a,
.close-alt a {
  color: var(--ink-soft);
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .hero-alt a:hover,
  .close-alt a:hover {
    color: var(--accent-deep);
    text-decoration-color: var(--accent);
  }
}

/* ── Close ──────────────────────────────────────────────────────────── */

.close-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.join-close { margin-inline: auto; margin-top: 2.1rem; text-align: left; }

/* The close band is a flat lavender panel, which the tinted input ground is
   too close to. Inputs there take the cream ground so the field still reads
   as a field. */
.band-close .join-row input { background: var(--cream); }
.band-close .join-row input:focus { border-color: var(--accent); }

/* ── Footer ─────────────────────────────────────────────────────────── */

.foot {
  width: var(--shell);
  margin: 0 auto;
  padding: 2.25rem 0 2.75rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

/* Periwinkle, not the rule colour: at rule contrast the separator sits at
   1.26:1 and is simply not there, so the footer read as two phrases with a
   gap. Decorative, so 3.4:1 is the right target, not 4.5. */
.foot-sep { color: var(--brand); }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: clamp(2.5rem, 7vw, 4rem);
  }
  .hero-copy { order: 2; max-width: none; }
  .field { order: 1; max-width: 20rem; margin-bottom: 0.5rem; }
  .beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beats-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.75rem); }
  .split .section-head { max-width: 20ch; }
  .split .section-lede { max-width: 44ch; }
}

@media (max-width: 620px) {
  :root { --shell: min(1180px, 100% - 2.25rem); --narrow: min(660px, 100% - 2.25rem); }
  .masthead-cta { display: none; }

  /* Below 620px the masthead has room for one link, so each page keeps the one
     that serves its own primary action. The member page hides its Join CTA
     because the sign-up form is already in view; the client page cannot, since
     its action is a mail link further down. */
  body.client .masthead-cta { display: inline; }
  body.client .masthead-alt { display: none; }
  .beats, .beats-four { grid-template-columns: 1fr; }
  .roster { grid-template-columns: 1fr; }
  .join-row { flex-wrap: wrap; }
  .join-row input { flex-basis: 100%; }
  .join-row button { width: 100%; }
  .field { max-width: 15rem; }
}