/* ==========================================================================
   CHALK Logic - chalklogic.com refresh
   Visual system derived from the 2026 business card.
   Words governed by chalk-logic-positioning.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PALETTE
   The 2026 business card purple, #5C1D78.

   That value is a FILL colour, not a text colour: on near-black it measures
   1.8:1, far under the 4.5:1 body-text floor. So the role is split three ways
   and #5C1D78 is never used for anything that has to be read on dark.
   -------------------------------------------------------------------------- */

:root {
  --deep:      #5C1D78;   /* card purple - surfaces, fills, the logo stroke   */
  --deep-2:    #7B2BA0;   /* one step up - hovers, gradients                  */
  --lift:      #B57BE0;   /* 6.45:1 on --ink - accents, links, rules          */
  --lift-soft: #D6BBFB;   /* 11.6:1 on --ink - accent text at small sizes     */
  --tint:      #F1E9F7;   /* light-section wash                               */
  --tint-line: #DFCDEC;
  --cta:       #B57BE0;
  --cta-ink:   #17101D;

  /* Neutrals */
  --ink:        #0C0A10;   /* dark sections                                   */
  --ink-2:      #16121C;   /* raised cards on dark                            */
  --ink-line:   #2B2334;
  --on-ink:     #F4F1F7;   /* 18:1                                            */
  --on-ink-mut: #B4ACC0;   /*  9.0:1                                          */

  --paper:      #FCFBFD;   /* light sections                                  */
  --paper-2:      #FFFFFF;
  --on-paper:     #1A1520;
  --on-paper-mut: #574D63;
  --paper-line:   #E5E1EA;

  /* Type */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --gut:  clamp(1.25rem, 4vw, 2rem);
  --band: clamp(4.5rem, 10vw, 8rem);
  --max:  74rem;
  --max-read: 44rem;

  --r: 4px;
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font: 400 clamp(1.0625rem, .4vw + 1rem, 1.1875rem)/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.05; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--max)); margin-inline: auto; }
.band { padding-block: var(--band); }
.band--dark  { background: var(--ink);  color: var(--on-ink); }
.band--tint  { background: var(--tint); }
.band--paper { background: var(--paper); }

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.band--dark .eyebrow { color: var(--lift); }
.band--tint .eyebrow,
.band--paper .eyebrow { color: var(--deep); }

/* Section headings: sentence case, per the voice rules. */
.h-sec {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-stretch: 92%;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.lede {
  margin-top: 1.25rem;
  max-width: var(--max-read);
  font-size: clamp(1.125rem, .6vw + 1rem, 1.3125rem);
  color: var(--on-paper-mut);
}
.band--dark .lede { color: var(--on-ink-mut); }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--cta); color: var(--cta-ink); }
.btn--primary:hover { background: var(--lift-soft); }
.btn--ghost { border-color: currentColor; color: var(--on-ink); }
.btn--ghost:hover { background: var(--on-ink); color: var(--ink); }
.btn--onpaper { border-color: var(--deep); color: var(--deep); }
.btn--onpaper:hover { background: var(--deep); color: #fff; }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-ink);
}
.site-head__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}
.brand { display: block; flex: none; }
.brand img { width: clamp(126px, 14vw, 168px); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.site-nav a {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  text-decoration: none; color: var(--on-ink-mut);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--on-ink); border-color: var(--lift); }
/* .site-nav a wins on specificity, so the button colours are restated here. */
.site-nav .btn { font-size: .92rem; padding: .6rem 1.1rem; border-bottom: none; }
.site-nav .btn--primary,
.site-nav .btn--primary:hover { color: var(--cta-ink); border-bottom: none; }
.site-nav .btn--primary:hover { background: var(--lift-soft); }
@media (max-width: 640px) {
  .site-head__in { min-height: 64px; flex-wrap: wrap; row-gap: .25rem; padding-block: .5rem; }
  .site-nav ul { gap: 1rem; }
  .site-nav .nav-hide-sm { display: none; }
  /* Touch targets: text links measure ~31px unpadded, under the 44px minimum. */
  .site-nav a { padding-block: .85rem; }
  .brand { padding-block: .2rem; }
}

/* --------------------------------------------------------------------------
   HERO - the card's hierarchy: person first, company second.
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: clip;
  background: var(--ink); color: var(--on-ink);
  padding-block: clamp(4rem, 11vw, 8.5rem) clamp(4rem, 10vw, 7rem);
}
/* The card's diagonal chalk sweep, rebuilt as a background. */
.hero::after {
  content: ""; position: absolute; inset: -20% -30% -20% 42%;
  background:
    linear-gradient(115deg, transparent 0 38%, var(--deep) 38.4% 100%),
    radial-gradient(60% 80% at 30% 40%, var(--deep-2) 0%, transparent 70%);
  transform: rotate(-14deg);
  opacity: .95;
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0 46%, transparent 78%);
  z-index: 1; pointer-events: none;
}
.hero__in { position: relative; z-index: 2; }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero::after { inset: -10% -40% 52% 8%; opacity: .55; }
  .hero::before { background: linear-gradient(180deg, transparent 0 8%, var(--ink) 46%); }
}

.hero__name {
  position: relative;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 4px solid var(--lift);
}
.hero__name h1 {
  font-size: clamp(3.6rem, 12vw, 9rem);
  font-weight: 800; font-stretch: 76%;
  letter-spacing: -.015em; line-height: .88;
  text-transform: uppercase;
}
.hero__name h1 .sur { display: block; color: var(--lift); }
.hero__tag {
  margin-top: 1.1rem;
  font-family: var(--display); font-stretch: 88%;
  font-size: clamp(1.35rem, 3.1vw, 2rem);
  font-weight: 500; line-height: 1.2;
  letter-spacing: -.01em;
}
.hero__sub {
  margin-top: 1.6rem; max-width: 38ch;
  color: var(--on-ink-mut);
  font-size: clamp(1.0625rem, .5vw + 1rem, 1.25rem);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }
.hero__meta {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  font-size: .95rem; color: var(--on-ink-mut);
}

/* "Ask me about" panel, straight off the card front. */
.askcard {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  backdrop-filter: blur(6px);
}
.askcard h2 {
  font-size: .84rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--lift);
}
.askcard ul { margin-top: 1.5rem; display: grid; gap: 1.1rem; }
.askcard li {
  display: grid; grid-template-columns: 12px 1fr; gap: .95rem; align-items: start;
  font-family: var(--display); font-stretch: 92%; font-weight: 500;
  font-size: clamp(1.0625rem, .6vw + .95rem, 1.25rem); line-height: 1.3;
}
.askcard li::before {
  content: ""; width: 10px; height: 10px; margin-top: .48em;
  border-radius: 50%; background: var(--lift);
}

/* --------------------------------------------------------------------------
   CAPABILITIES - the four, expanded. Never a fifth.
   -------------------------------------------------------------------------- */
.caps {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 1px;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
  border-radius: var(--r); overflow: hidden;
}
@media (min-width: 760px) { .caps { grid-template-columns: 1fr 1fr; } }
.cap { background: var(--paper-2); padding: clamp(1.75rem, 3.4vw, 2.5rem); }
.cap__n {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .18em; color: var(--deep); margin-bottom: .9rem;
}
.cap h3 {
  font-size: clamp(1.3rem, 2.1vw, 1.6rem); font-stretch: 92%;
  letter-spacing: -.01em; margin-bottom: .7rem;
}
.cap p { color: var(--on-paper-mut); font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   PROOF NUMBER
   -------------------------------------------------------------------------- */
.proof { background: var(--deep); color: #fff; }
.proof__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
@media (max-width: 820px) { .proof__grid { grid-template-columns: 1fr; } }
.proof__stat { font-family: var(--display); font-stretch: 82%; line-height: .9; }
.proof__stat .from {
  font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 700;
  opacity: .55; text-decoration: line-through; text-decoration-thickness: .06em;
}
.proof__stat .to {
  display: block; margin-top: .2em;
  font-size: clamp(4.2rem, 13vw, 7.5rem); font-weight: 800;
  letter-spacing: -.03em;
}
.proof__stat .unit {
  display: block; margin-top: .9rem;
  font-family: var(--body); font-size: 1.0625rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; opacity: .85;
}
.proof .lede { color: rgba(255,255,255,.88); }
.proof .cta-row { margin-top: 2rem; }
.h-sec--wide { max-width: 22ch; }
.proof blockquote { margin: 0; font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); line-height: 1.5; }
.proof cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: .98rem; opacity: .85; }

/* --------------------------------------------------------------------------
   WORK - manual process into working system
   -------------------------------------------------------------------------- */
.work { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 900px) { .work { grid-template-columns: repeat(3, 1fr); } }
.job {
  background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.1rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.job__who {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--deep);
}
.job__arc { display: grid; gap: .55rem; }
.job__arc div { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; font-size: 1rem; }
.job__arc .lab {
  font-family: var(--display); font-weight: 700; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-paper-mut); padding-top: .18em;
}
.job__arc .before { color: var(--on-paper-mut); }
.job__arc .after  { font-weight: 500; }
.job__out {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--paper-line);
  font-family: var(--display); font-stretch: 92%; font-weight: 600;
  font-size: 1.0625rem; color: var(--deep);
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */
.says { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 820px) { .says { grid-template-columns: 1fr 1fr; } }
.say {
  border-left: 3px solid var(--lift);
  padding: .25rem 0 .25rem clamp(1.25rem, 2.4vw, 1.75rem);
  margin: 0;
}
.say p { font-size: clamp(1.0625rem, .5vw + 1rem, 1.1875rem); }
.say footer { margin-top: 1rem; font-size: .95rem; }
.say .who { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
.say .org { display: block; color: var(--on-ink-mut); }
.band--tint .say .org, .band--paper .say .org { color: var(--on-paper-mut); }

/* --------------------------------------------------------------------------
   PROSE / SPLIT
   -------------------------------------------------------------------------- */
.prose { max-width: var(--max-read); }
.prose > * + * { margin-top: 1.25rem; }
.prose h3 {
  margin-top: 2.5rem; font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-stretch: 92%; letter-spacing: -.01em;
}
.prose strong { font-weight: 600; }

.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }
.deets { display: grid; gap: 1.6rem; margin-top: 2.25rem; }
.deet { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: center; }
.deet__ico {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--lift); color: var(--lift);
  display: grid; place-items: center;
}
.deet__ico svg { width: 20px; height: 20px; }
/* Padded to a 44px touch target - on mobile these are the primary actions. */
.deet a { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); text-decoration: none; border-bottom: 1px solid transparent; padding-block: .45rem; display: inline-block; }
.deet a:hover { border-color: var(--lift); }
.deet .plain { font-size: 1.0625rem; color: var(--on-ink-mut); line-height: 1.45; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--display); font-weight: 700; font-size: .76rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-mut);
}
.field input, .field textarea {
  font: inherit; color: var(--on-ink);
  background: var(--ink-2); border: 1px solid var(--ink-line);
  border-radius: var(--r); padding: .85rem 1rem;
}
.field input:focus, .field textarea:focus { border-color: var(--lift); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.form .btn { justify-self: start; margin-top: .4rem; }
.field .opt { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .75; }
/* Netlify honeypot - must stay hidden from humans and assistive tech alike. */
.hp { display: none; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--ink); color: var(--on-ink-mut);
  border-top: 1px solid var(--ink-line);
  padding-block: 3rem;
  font-size: .95rem;
}
.site-foot__in { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; }
.site-foot img { width: 118px; opacity: .9; }
.site-foot nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--on-ink); }
.site-foot .rt { margin-left: auto; }