/* ==========================================================================
   ChaseRich LLC splash, style.css
   --------------------------------------------------------------------------
   CONVENTION: the palette below is duplicated BY HAND from the chaserich.com
   blog (tailwind.config.mjs and src/styles/global.css). There is no shared
   build artifact, no npm package, and no import to go looking for. This site
   is deliberately build free, so the tokens live here as plain custom
   properties. If the blog palette changes, update this block by hand.
   ========================================================================== */

:root {
  /* Base surface, duplicated from the blog */
  --bg: #050505;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  /* Text inputs are identified by their outline alone, so unlike a labelled
     button their border has to clear the 3:1 bar for a UI component. This
     composites to #5f5f5f on --bg, 3.19:1. Neutral white, no new hue. */
  --border-field: rgba(255, 255, 255, 0.36);

  /* Established blog accents. Defined here so the palette stays a faithful
     copy of the blog's, but deliberately NOT painted anywhere on this page.
     The LLC splash is near-monochrome with YInMn as its only accent; emerald
     and sky belong to the blog. Do not reintroduce them here. */
  --accent: #10b981;
  --accent-hover: #34d399;
  --secondary: #0ea5e9;

  /* YInMn Blue, the only accent this page paints with. The whole budget is
     the logo mark, the "Cyber and AI Shaman" phrase, the hairline rules,
     links, focus rings, and the primary button. Nothing else. */
  --yinmn-deep: #1f3a6e;
  --yinmn: #2e5090;
  --yinmn-light: #4d77c6;  /* 4.63:1 on --bg, clears AA for normal text */
  --yinmn-hover: #4166ad;  /* primary button hover fill, 5.63:1 under white */
  --yinmn-glow: #6e96d8;   /* body-size text safe, 6.81:1 on --bg */

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  /* Rhythm */
  --measure: 60ch;
  /* Narrower than the usual 1100px. With no panels to define a column, the
     shell itself has to, otherwise the type hugs the left of a wide page and
     the right half reads as unfinished rather than as space. */
  --shell: 940px;
  --radius-sm: 0.75rem;
  /* Applied to the TOP of each section only, never top and bottom, or
     adjacent sections double it into a dead band. */
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Reset, only what this page needs
   -------------------------------------------------------------------------- */

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

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

body,
h1,
h2,
h3,
p,
ul,
li,
figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

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

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

body {
  min-height: 100svh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text);
  /* Flat. No ambient wash, no orbs. The page is type on a dark ground and
     the restraint is the design, so there is nothing to add back here. */
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--yinmn);
  color: #ffffff;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Accessibility primitives
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--yinmn-deep);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: top 160ms var(--ease);
}

.skip-link:focus-visible {
  top: 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--yinmn-glow);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.25rem, 3vw, 2rem);
}

.masthead .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.brand__name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.brand__name .llc {
  color: var(--muted);
  font-weight: 700;
}

.masthead__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 1.75rem);
}

.masthead__nav a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  transition: color 220ms var(--ease);
}

.masthead__nav a:hover {
  color: var(--text);
}

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

/* Four of these appear on the page. They are labels, not accents, so they
   stay grey and let YInMn keep its scarcity. */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  /* Held to a tight measure so the headline reads as a deliberate block of
     type rather than a line running the full width of the shell. */
  max-width: 22ch;
  font-size: clamp(2rem, 1.35rem + 3.1vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  font-weight: 700;
}

.lede {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--text);
}

.prose {
  max-width: var(--measure);
  color: var(--muted);
}

/* The single accented phrase in the body copy. Solid, not a gradient, and
   used exactly once. 6.81:1 on --bg. */
.accent {
  color: var(--yinmn-glow);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/* Top only. The hairline rule marks the boundary, so a section does not also
   need trailing padding, and main carries the final gap before the footer. */
.section {
  padding-block: var(--section-y) 0;
}

main {
  padding-bottom: var(--section-y);
}

.section__head {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section__head h2 {
  margin-top: 0.875rem;
}

.section__head p {
  margin-top: 1.125rem;
}

/* The hairline is the only thing marking a section boundary now, so it needs
   real air under it before the label starts. */
.rule + .eyebrow {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.rule + .split {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    var(--yinmn-light),
    rgba(255, 255, 255, 0.06) 45%,
    transparent
  );
}

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

/* No panel. The hero is type sitting directly on the background, so the top
   and bottom padding is doing the work the glass card used to do. */
.hero {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hero h1 {
  margin-top: 1.125rem;
}

.hero__mission {
  max-width: var(--measure);
  margin-top: 2rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* Name and pronouns, rendered plainly rather than as a badge. Hairline rule
   in the same neutral as every other border on the page. */
.identity {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 2.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border-strong);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.identity__name {
  font-weight: 700;
  color: var(--text);
}

.identity__pronouns {
  color: var(--muted);
}

/* Was five bordered chips. Now one plain run of text with middot separators,
   so the list reads as a sentence fragment instead of five little buttons. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.625rem;
  max-width: var(--measure);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--muted);
}

/* Trailing rather than leading, so a wrapped line never begins with a
   dangling separator. */
.hero__meta li:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.625rem;
  /* Dimmer than the terms it separates, but still 4.79:1 on --bg so it
     clears AA as rendered text rather than relying on a decorative excuse. */
  color: #7a7a83;
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease),
    color 240ms var(--ease), box-shadow 240ms var(--ease);
}

/* Solid, not a gradient, and no coloured glow. White on --yinmn is 7.88:1;
   the --yinmn-hover fill is 5.63:1, both clear AA. */
.btn--primary {
  background: var(--yinmn);
  color: #ffffff;
}

.btn--primary:hover {
  background: var(--yinmn-hover);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface-hover);
}

.btn__arrow {
  font-size: 1.05em;
  line-height: 1;
  transform: translateX(0);
  transition: transform 240ms var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Focus areas. A quiet list, not cards. Names only, on purpose: the five
   domains come from the published focus line and there is no sourced
   description to put under them. Stacked and hairline separated on narrow,
   one evenly spaced row under a single rule on wide.
   -------------------------------------------------------------------------- */

.domains {
  display: flex;
  flex-direction: column;
}

.domain {
  padding-block: 1rem;
  border-top: 1px solid var(--border);
}

.domain h3 {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Facts strip. Plain text under a hairline, no panel.
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--border);
}

.fact dt {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact dd {
  margin: 0.5rem 0 0;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   About. The shared blurb, set as type on the background: a hairline, a grey
   label, a heading, and the paragraph. No panel, no fill, and no new colour,
   so the section spends nothing the page did not already have.
   -------------------------------------------------------------------------- */

.about h2 {
  margin-top: 0.875rem;
}

.about__lede {
  /* Narrower than --measure. A lede at this size wants a shorter line. */
  max-width: 48ch;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Split blocks (blog, contact)
   -------------------------------------------------------------------------- */

/* No panel. A plain row under the section's hairline rule. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: center;
}

.split h2 {
  margin-top: 0.875rem;
}

.split__aside {
  min-width: 0;
}

.contact__address {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 700;
  word-break: break-word;
}

.contact__address a {
  color: var(--yinmn-glow);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color 220ms var(--ease);
}

/* Brightens to plain white on hover. The blog's emerald hover is not part of
   this page's budget. */
.contact__address a:hover {
  color: var(--text);
}

.contact__note {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Newsletter. A hairline field and a ghost button, nothing else. The section
   spends no new colour: the field border is neutral white, the submit borrows
   the ghost button already on the page, and the focus ring is the shared
   YInMn one. If this block ever starts to look like a call to action, it has
   drifted from the rest of the page.
   -------------------------------------------------------------------------- */

/* The hairline is the section boundary, so the heading needs the same air
   under it that an eyebrow gets everywhere else. */
.newsletter .rule + h2 {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.newsletter .prose {
  margin-top: 1.125rem;
}

.signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  max-width: var(--measure);
  margin-top: 2rem;
}

/* Off screen, and body's overflow-x: hidden keeps it unreachable rather than
   parked at the end of a scroll. */
.signup__trap {
  position: absolute;
  left: -5000px;
}

.signup__input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--border-field);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: border-color 240ms var(--ease);
}

.signup__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.signup__input:hover {
  border-color: var(--text);
}

button.btn {
  font-family: inherit;
  cursor: pointer;
}

.signup__submit {
  flex: none;
  border-color: var(--border-field);
}

/* The shared focus rule resets border-radius to 0.35rem, which would square
   off a pill mid focus. Hold the pill for both controls. */
.signup__input:focus-visible,
.signup__submit:focus-visible {
  border-radius: 999px;
}

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

.site-footer {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--border);
}

.site-footer .shell {
  display: grid;
  gap: 1.25rem;
}

.site-footer p {
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer p + p {
  margin-top: 0.5rem;
}

.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 220ms var(--ease);
}

.site-footer a:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Breakpoints. Mobile first, so everything above is the 375px layout.
   -------------------------------------------------------------------------- */

@media (min-width: 40rem) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Wide enough for the five names to sit in one evenly spaced row under a
   single hairline. Below this they stack, each with its own rule. */
@media (min-width: 48rem) {
  .domains {
    flex-direction: row;
    /* space-between rather than equal columns: with names this uneven in
       length, equal columns make the gaps look irregular. Distributing by
       actual text width gives the row an even rhythm. */
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--border);
  }

  .domain {
    flex: 0 1 auto;
    min-width: 0;
    padding-block: 0;
    border-top: 0;
  }
}

@media (min-width: 52rem) {
  .site-footer .shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: end;
    gap: 2rem;
  }

  .site-footer .shell > :last-child {
    justify-self: end;
    text-align: right;
  }
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
  }

  .split__aside {
    display: flex;
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   Sensory-friendly: no strobing, no harsh motion, and everything above is
   opt out here. Nothing on this page animates on its own, so this only has
   to disable hover and scroll transitions.
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover .btn__arrow {
    transform: none;
  }

  .skip-link {
    transition: none;
  }
}

/* Honour forced colors / Windows high contrast without fighting it. */
@media (forced-colors: active) {
  .btn {
    border: 1px solid CanvasText;
  }

  .signup__input {
    border: 1px solid CanvasText;
  }

  .identity {
    border-left-color: CanvasText;
  }

  /* The hairlines carry all the structure now, so they have to survive a
     forced palette rather than being painted with a gradient that will not. */
  .rule {
    background: CanvasText;
  }

  .accent {
    color: CanvasText;
  }
}

@media print {
  body {
    background: #ffffff;
    color: #000000;
  }
}