/* Charlie Rubin, executive ghostwriter - home page (design demo).
   Hand-written CSS, one file, no build step and no framework.

   Palette, locked for the whole page. Paper and ink, one accent.
   No purple, no gradients on text, no second accent colour anywhere.
   Radius rule: 12px on panels and plates, 8px on controls (buttons, inputs).
*/

:root {
  --paper:      #f7f7f5;
  --paper-tint: #efeeea;
  --ink:        #17181c;
  --ink-soft:   #4b5157;
  --ink-mute:   #6a7076;
  --accent:     #143a66;
  --accent-ink: #ffffff;
  --accent-wash:#e6ecf4;
  --line:       #d9d8d3;
  --line-soft:  #e7e6e1;
  --dark:       #14161a;
  --dark-ink:   #f2f2ef;
  --dark-mute:  #a9adb3;

  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-panel: 12px;
  --r-control: 8px;

  --wrap: 1140px;
  --step: clamp(1rem, 0.55rem + 1.6vw, 1.4rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.001em;
  overflow-x: hidden;
}

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

a { color: var(--accent); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.6em; max-width: 20ch; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.35em; letter-spacing: -0.005em; }
p  { margin: 0 0 1em; max-width: 68ch; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  border-radius: 0 0 var(--r-control) 0; text-decoration: none;
}
.skip:focus { left: 0; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font: 600 0.95rem/1 var(--body);
  padding: 0.85em 1.3em;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: translateY(1px); }

/* Button colours must beat the ancestor link rules (.nav a and .band-ink a), which were
   overriding them and left the header CTA at 1.43:1 and the close CTA at 1.05:1.
   Selector is .btn.btn-* so it outranks a descendant rule. White text throughout, with the
   close button's background darkened so white clears WCAG AA there. */
.btn.btn-primary { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.btn.btn-primary:hover { background: #0f2d50; color: #ffffff; border-color: #0f2d50; }

.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--ink-soft); }

.btn.btn-onink { background: #0f2d50; color: #ffffff; border-color: #3b6ea5; }
.btn.btn-onink:hover { background: var(--accent); color: #ffffff; border-color: #3b6ea5; }

.btn-block { width: 100%; margin-top: 0.35rem; }

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

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 247, 245, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }

.wordmark {
  font-family: var(--display); font-size: 1.12rem; font-weight: 700;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.nav-cta { margin-left: 0.35rem; }

.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 0.5rem;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-control);
  color: var(--ink); font: 600 0.85rem/1 var(--body); padding: 0.6em 0.8em; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative;
}
.nav-toggle-bars::before { position: absolute; top: -5px; }
.nav-toggle-bars::after  { position: absolute; top: 5px; }

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

.band { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.band-paper { background: var(--paper-tint); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.band-ink { background: var(--dark); color: var(--dark-ink); }
.band-ink h2 { color: var(--dark-ink); }
.band-ink a { color: var(--dark-ink); }

.eyebrow {
  font: 600 0.72rem/1.4 var(--mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent); margin: 0 0 1rem;
}

.lede { font-size: clamp(1.12rem, 0.95rem + 0.7vw, 1.4rem); line-height: 1.45; color: var(--ink); }
.lede-wide { max-width: 60ch; margin-bottom: 2.2rem; }
.aside { color: var(--ink-soft); }
.fine { font-size: 0.87rem; color: var(--ink-mute); }

.cta-line { margin: 2.2rem 0 0; }

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

.hero { padding: clamp(2.75rem, 1.6rem + 4.4vw, 4.6rem) 0 clamp(2rem, 1rem + 3vw, 3.4rem); }
.hero-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.4rem); grid-template-columns: 1.18fr 0.82fr; align-items: start; }
.hero-sub { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.ledger { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ledger > div { padding: 1.05rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.ledger dt { font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); font-weight: 700; color: var(--accent); letter-spacing: -0.015em; }
.ledger dd { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* hero load-in: plays once on load, no scroll dependency, honours reduced motion */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .hero-copy > *, .ledger > div { animation: rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: 60ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 120ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 180ms; }
  .ledger > div:nth-child(1) { animation-delay: 140ms; }
  .ledger > div:nth-child(2) { animation-delay: 220ms; }
  .ledger > div:nth-child(3) { animation-delay: 300ms; }
  html { scroll-behavior: smooth; }
}

/* ---------- Plates (images) ---------- */

.plate { margin: 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.plate img { width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; }
.plate-inset { border: 0; border-radius: var(--r-panel); overflow: hidden; }
.plate-inset img { height: clamp(240px, 32vw, 420px); }

/* ---------- Split label + body ---------- */

.split { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1rem, 0.5rem + 2vw, 3rem); align-items: start; }
.split-label { font-size: 0.78rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); margin: 0.4rem 0 0; font-weight: 600; }

/* ---------- Scenarios ---------- */

.scenarios { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.scenarios li { padding: 1.5rem 0 1.5rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; }
.scenarios li > * { grid-column: 2; }
.scenarios li { counter-increment: sc; }
.scenarios li::before {
  content: "0" counter(sc);
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--mono); font-size: 0.8rem; color: var(--ink-mute); padding-top: 0.35rem;
}
.scenarios { counter-reset: sc; }
.scenarios p { margin: 0; color: var(--ink-soft); }

/* ---------- Approach ---------- */

.approach-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
.approach-copy h3 { margin-top: 1.6rem; }
.callout {
  margin-top: 1.6rem; padding: 1rem 1.15rem;
  background: var(--accent-wash); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
  color: var(--ink); font-weight: 600; max-width: 60ch;
}

/* ---------- Proof ---------- */

.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--display); color: var(--ink); }
.quote figcaption { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline; font-size: 0.9rem; color: var(--ink-soft); margin-top: 1rem; }
.quote figcaption .who { font-weight: 700; color: var(--ink); }
.quote figcaption a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.quote figcaption a:hover { color: var(--accent); border-color: var(--accent); }

.quote-lead { border-top: 1px solid var(--line); padding-top: 2rem; }
.quote-lead blockquote p:first-child { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); line-height: 1.3; letter-spacing: -0.01em; }
.quote-lead blockquote p { font-size: 1.05rem; color: var(--ink-soft); }
.quote-lead blockquote p:first-child { color: var(--ink); }

.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); margin-top: 3rem; border-top: 1px solid var(--line-soft); padding-top: 2rem; }
.quote-pair blockquote p { font-size: 1.02rem; line-height: 1.5; }

/* ---------- Results ---------- */

.stories { list-style: none; margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.stories li { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
.story-out { display: grid; gap: 0.3rem; align-content: start; }
.story-out .figure { font-family: var(--display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 700; color: var(--accent); letter-spacing: -0.02em; line-height: 1.05; }
.story-out .figure-note { font-size: 0.83rem; color: var(--ink-mute); max-width: 22ch; }
.story-body p { margin: 0; color: var(--ink-soft); }

/* ---------- AI stance ---------- */

.stance {
  border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
  background: #ffffff; max-width: 62rem;
}
.stance p { margin: 0; color: var(--ink-soft); max-width: 72ch; }

/* ---------- Pricing ---------- */

.pricing { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
.rates { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.rates > div { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rates dt { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.rates dd { margin: 0; display: grid; gap: 0.25rem; }
.rate { font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; color: var(--accent); letter-spacing: -0.02em; line-height: 1.05; }
.rate .per { font-size: 0.55em; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.rate-note { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- FAQ ---------- */

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; margin-top: 2.2rem; }
.faq-item { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.faq-item h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; }
.faq-item p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Close ---------- */

.close { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.close-line { font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem); margin-bottom: 1rem; }
.band-ink .aside { color: var(--dark-mute); }

.contact-form {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-panel);
  padding: 1.5rem;
}
.form-title { font-family: var(--display); font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--dark-ink); }
.field input, .field textarea {
  width: 100%; padding: 0.7em 0.8em; font: inherit; font-size: 0.95rem;
  color: var(--ink); background: #ffffff;
  border: 1px solid #c9c8c3; border-radius: var(--r-control);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.form-note { font-size: 0.82rem; color: var(--dark-mute); margin: 0.85rem 0 0; }
.form-note a { color: var(--dark-ink); }

/* ---------- About strip ---------- */

.about {
  max-width: 60rem;
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.about-portrait { margin: 0; }
.about-portrait img {
  width: 100%; height: auto;
  border-radius: var(--r-panel);
  border: 1px solid var(--line-soft);
}
.about-copy { min-width: 0; }
.about-name { font-family: var(--display); font-size: 1.35rem; font-weight: 700; margin: 0 0 0.4rem; }
.about-role { color: var(--ink-soft); margin-bottom: 0.6rem; }
.about-contact { margin: 0; font-weight: 600; }

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

.foot { border-top: 1px solid var(--line-soft); padding: 2rem 0 2.5rem; background: var(--paper); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline; }
.foot p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.foot .fine { color: var(--ink-mute); margin-left: auto; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .hero-grid, .approach-grid, .pricing, .close, .faq, .quote-pair, .split { grid-template-columns: 1fr; }
  .split-label { margin-bottom: 0.5rem; }
  .faq { gap: 0; }
  .close { gap: 2.5rem; }

  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem 24px 1.25rem;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-top: 1px solid var(--line-soft); }
  .nav ul a { display: block; padding: 0.85rem 0; font-size: 1rem; }
  .nav-cta { margin: 1rem 0 0; }
  .masthead-inner { position: relative; }
}

@media (max-width: 620px) {
  .scenarios li { grid-template-columns: 2.2rem 1fr; gap: 0.9rem; }
  .stories li { grid-template-columns: 1fr; gap: 0.9rem; }
  .story-out { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 0.7rem; }
  .ledger > div, .rates > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .plate img { height: 160px; }
  .foot .fine { margin-left: 0; }
  .about { grid-template-columns: 1fr; }
  .about-portrait { max-width: 12rem; }
}

@media (prefers-reduced-transparency: reduce) {
  .masthead { backdrop-filter: none; background: var(--paper); }
}

/* ---------- Icons (inline SVG, ink and paper) ---------------------------------
   Single 1.5 stroke weight, currentColor so they follow the ink and accent palette,
   a 24px box, round caps. Drawn for a serif paper page, not a dashboard. */
.ico { display: inline-flex; align-items: center; color: var(--accent); flex: 0 0 auto; }
.ico svg { width: 24px; height: 24px; display: block; }
.scenarios li .ico { margin-bottom: 0.6rem; }
.rates dt .ico { margin-right: 0.5rem; vertical-align: -0.3em; color: var(--ink-soft); }
.close-line .ico { margin-right: 0.55rem; vertical-align: -0.32em; color: var(--paper); }
.form-title .ico { margin-right: 0.55rem; vertical-align: -0.34em; color: var(--paper); }
.about-role .ico { margin-right: 0.55rem; vertical-align: -0.32em; }

/* ---------- Motion: a quiet scroll-in rhythm ----------------------------------
   The hidden state only exists when the reveal script ran (.js) AND motion is
   welcome, so nothing is ever invisible waiting on a scroll event; site.js also
   reveals everything by failsafe shortly after load. */
@media (prefers-reduced-motion: no-preference) {
  .js .scenarios li,
  .js .stories li,
  .js .faq-item { opacity: 0; transform: translateY(12px); }

  .js .scenarios li.is-in,
  .js .stories li.is-in,
  .js .faq-item.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* The one slow accent: the hairline above a plain band draws itself in.
     Light bands only, so no bright line appears across the dark close. */
  .js .band:not(.band-paper):not(.band-ink)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left center;
  }
  .js .band:not(.band-paper):not(.band-ink).is-in::after {
    transform: scaleX(1);
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* positioning context for that hairline */
.band { position: relative; }

/* ---------- breadcrumbs and the Explore strip (multi-page build, 2026-10-01) ---------- */
.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; list-style: none; margin: 0; padding: 0.7rem 0; font-size: 0.85rem; color: var(--ink-mute); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line); }
.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumbs a:hover { color: var(--accent); border-color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink); }
.explore { display: grid; border-top: 1px solid var(--line); }
.explore a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.explore a:hover strong { color: var(--accent); }
.explore strong { font-family: var(--display); font-weight: 700; }
.explore span { color: var(--ink-mute); font-size: 0.9rem; }
@media (max-width: 620px) { .explore a { flex-direction: column; } }

/* ---------- Thoughts index: stacked post list (blog build, 2026-10-05) ----------
   The row-style .explore strip right-aligns a short excerpt and wraps a long one. The essay
   index reads evenly instead: title above a left-aligned excerpt, no right alignment. */
.posts { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.posts li { border-bottom: 1px solid var(--line); }
.posts a { display: block; padding: 1.35rem 0; text-decoration: none; color: var(--ink); }
.posts h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.35rem); margin: 0 0 0.3rem; letter-spacing: -0.005em; }
.posts p { margin: 0; color: var(--ink-mute); font-size: 0.95rem; max-width: 64ch; }
.posts a:hover h3 { color: var(--accent); }