/* ==========================================================================
   THE AFTER · editorial stylesheet
   Version 3.0

   Hand-authored. No framework, no CDN, no build step.
   Every measurement here is deliberate; before changing one, read the note
   at the bottom of this file about what the green is for.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground: a cool, faintly green-grey paper rather than a warm cream.
     It sits under the brand green without fighting it. */
  --paper:        #FAFBFB;
  --paper-sunk:   #F0F4F3;
  --white:        #FFFFFF;

  /* Type */
  --ink:          #000F08;   /* headings, brand black          19.6:1 on paper */
  --graphite:     #39433F;   /* running text                    9.9:1 on paper */
  --slate:        #5F6C68;   /* captions, metadata              5.5:1 on paper */

  /* Lines */
  --rule:         #DBE2E1;
  --rule-strong:  #B9CFD4;   /* brand ice */

  /* Accents. Used sparingly. See the note at the foot of this file. */
  --green:        #04BE51;   /* the mark. Fills and rules only, never text.  */
  --green-ink:    #047A34;   /* text-safe green                5.4:1 on paper */
  --crimson:      #B1222E;
  --cyan-ink:     #01769C;

  /* Measure and rhythm */
  --measure:      36rem;     /* ~66 characters of body text */
  --rail:         7.5rem;    /* marginalia column */
  --gutter:       2.75rem;
  --page:         74rem;

  --step:         1.6rem;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::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(--graphite);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

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

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

.skip-link {
  position: absolute; left: 1rem; top: -6rem; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: .85rem 1.4rem; font-size: .8125rem; font-weight: 500;
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 1rem; }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: Newsreader, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
}

/* These three declare the serif explicitly. Without it, an <h3 class="title">
   picks up the sans-serif from the `h3` rule further down. The rules have
   equal specificity and the later one wins, silently flattening the display
   voice on any heading that is not an h1 or h2. */
.display, .title, .subtitle {
  font-family: Newsreader, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--ink);
}

.display {
  font-size: clamp(2.45rem, 6.1vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.028em;
}

.title {
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.018em;
}

.subtitle {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.014em;
}

h3, .h3 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.4;
  color: var(--ink);
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.12rem, 1.55vw, 1.3rem);
  line-height: 1.62;
  color: var(--graphite);
  text-wrap: pretty;
}

.serif-lead {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.44;
  color: var(--ink);
  letter-spacing: -.012em;
}

/* Marginalia labels and any figure that should read as data. */
.label {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.5;
  margin: 0;
}
.label--ink { color: var(--ink); }

.numeral {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The mark. A green rule struck under a word, like a pencil line. */
.mark {
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-size: 100% .16em;
  background-position: 0 89%;
  padding-bottom: .02em;
}

em, .italic { font-style: italic; }
strong { font-weight: 600; color: var(--ink); }

a { color: inherit; }

.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.link:hover { border-bottom-color: var(--green); }

.link-quiet { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; transition: text-decoration-color .2s ease; }
.link-quiet:hover { text-decoration-color: var(--green); color: var(--ink); }

/* --------------------------------------------------------------------------
   4. Page frame and the marginalia grid
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.6rem;
}
@media (min-width: 40rem)  { .wrap { padding-inline: 2.5rem; } }
@media (min-width: 64rem)  { .wrap { padding-inline: 3.5rem; } }

/* The armature of the whole page: a narrow rail for the label or numeral,
   a wide column for the argument. Below 60rem it stacks, label on top. */
.spread {
  display: grid;
  gap: .9rem;
}
@media (min-width: 60rem) {
  .spread {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--gutter);
    align-items: start;
  }
  .spread > .spread__rail { padding-top: .45rem; }
}

.band { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.band + .band { border-top: 1px solid var(--rule); }
.band--sunk { background: var(--paper-sunk); }
.band--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

.stack       { display: grid; gap: var(--step); }
.stack--tight{ display: grid; gap: .8rem; }
.stack--wide { display: grid; gap: 2.6rem; }

/* --------------------------------------------------------------------------
   5. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .masthead { background: var(--paper); }
}
.masthead[data-scrolled='true'] { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.5rem;
}

.wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; padding-block: .55rem; }
.wordmark img { height: 1.15rem; width: auto; }
.wordmark__icon { height: 1.6rem; width: 1.6rem; }
.wordmark__fallback { font-family: Newsreader, Georgia, serif; font-size: 1.2rem; color: var(--ink); letter-spacing: .02em; }

.masthead__nav { display: none; align-items: center; gap: 1.9rem; }
@media (min-width: 60rem) { .masthead__nav { display: flex; } }

.masthead__link {
  font-size: .8125rem; font-weight: 450; color: var(--graphite);
  text-decoration: none; letter-spacing: .005em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.masthead__link:hover { color: var(--ink); border-bottom-color: var(--green); }

.masthead__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-right: -.5rem;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}
@media (min-width: 60rem) { .masthead__toggle { display: none; } }

.drawer { border-top: 1px solid var(--rule); background: var(--paper); }
@media (min-width: 60rem) { .drawer { display: none !important; } }
/* :not(.btn) matters. Without it this rule outranks .btn on specificity
   (0,1,1 against 0,1,0) and paints the call-to-action ink on ink: a solid
   black rectangle with invisible text. It also stripped the button's
   horizontal padding and gave it a border. */
.drawer a:not(.btn) {
  display: block; padding: .95rem 0; text-decoration: none;
  color: var(--ink); font-size: 1rem;
  border-bottom: 1px solid var(--rule);
}
.drawer a:not(.btn):last-of-type { border-bottom: 0; }
.drawer .btn { margin: 1.4rem 0 1.6rem; width: 100%; padding-block: 1.05rem; }

/* --------------------------------------------------------------------------
   6. Buttons: square, editorial, no shadow
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .875rem; font-weight: 500; letter-spacing: .01em;
  padding: .95rem 1.6rem;
  text-decoration: none; border: 1px solid var(--ink);
  background: var(--ink); color: var(--white);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: #17251F; border-color: #17251F; }

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

/* Text link that behaves as a call to action. */
.cta {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-size: .9375rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.cta span { border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; transition: border-color .2s ease; }
.cta:hover span { border-bottom-color: var(--green); }
.cta svg { color: var(--green-ink); transform: translateY(1px); transition: transform .2s ease; }
.cta:hover svg { transform: translate(3px, 1px); }

/* --------------------------------------------------------------------------
   7. Components
   -------------------------------------------------------------------------- */

/* Byline: the author strip under the hero. */
.byline {
  display: grid; gap: 1.6rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .byline { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 2rem; }
}
.byline__portrait { width: 6.25rem; height: 6.25rem; object-fit: cover; filter: grayscale(1) contrast(1.04); }

/* Definition rows, used for engagement formats and credentials. */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: .5rem var(--gutter);
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .row { grid-template-columns: var(--rail) minmax(0, 1fr) 11rem; align-items: start; }
  .row__meta { text-align: right; }
}
.row__meta { color: var(--slate); font-size: .8125rem; line-height: 1.6; }
.row__meta b { display: block; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* A metadata column that is also a booking link. The green appears on hover
   only, so the page still shows exactly four green marks at rest. */
.row__cta { display: block; text-decoration: none; transition: color .2s ease; }
.row__cta:hover { color: var(--graphite); }
.row__book {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem;
  font-size: .8125rem; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px;
  transition: border-color .2s ease;
}
.row__cta:hover .row__book { border-bottom-color: var(--green); }
.row__book svg { transition: transform .2s ease; }
.row__cta:hover .row__book svg { transform: translateX(3px); }
@media (min-width: 60rem) { .row__cta .row__book { margin-left: auto; } }

/* A roster of names: clients, schools. Reads as data, not as logos. */
.roster {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap;
  column-gap: .5rem; row-gap: .1rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .78125rem; color: var(--ink); letter-spacing: .01em;
  line-height: 1.75;
}
.roster li { white-space: nowrap; }
/* The separator trails its own item instead of leading the next one. With
   ::before on the following item, a wrap left a stray middle dot at the start
   of the new line, which reads as a broken bullet list. */
.roster li:not(:last-child)::after {
  content: '·';
  color: var(--rule-strong);
  margin-left: .5rem;
}

/* Pull quote / thesis statement set apart by a green rule. */
.thesis {
  border-left: 2px solid var(--green);
  padding-left: clamp(1.1rem, 2.5vw, 1.9rem);
}

/* Numbered act heading. */
.act__index {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: .9rem;
}
.act__index .numeral { color: var(--slate); }
.act--now .numeral { color: var(--green-ink); }
.act__dot { width: .45rem; height: .45rem; background: var(--rule-strong); border-radius: 50%; transform: translateY(-.15rem); }
.act--now .act__dot { background: var(--green); }

/* Contact panel */
.panel { border: 1px solid var(--rule); background: var(--white); padding: clamp(1.6rem, 3vw, 2.4rem); }
.panel + .panel { margin-top: 1rem; }
.panel__link { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; text-decoration: none; }
.panel__link h3 { margin-bottom: .25rem; }
.panel__link .arrow { color: var(--slate); transition: color .2s ease, transform .2s ease; flex: none; align-self: center; }
.panel__link:hover .arrow { color: var(--green-ink); transform: translateX(3px); }

/* Footer */
.colophon { border-top: 1px solid var(--rule); padding-block: 2.2rem; }
.colophon__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; font-size: .78125rem; color: var(--slate);
}
.colophon a { color: var(--slate); text-decoration: none; border-bottom: 1px solid transparent; }
.colophon a:hover { color: var(--ink); border-bottom-color: var(--green); }
.colophon nav { display: flex; gap: 1.6rem; }
/* A comfortable tap target: these were 21px tall, under the 24px minimum. */
.colophon nav a { display: inline-block; padding-block: .35rem; }
.colophon [aria-current] { color: var(--ink); }

.social { display: flex; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; color: var(--graphite);
  border: 1px solid var(--rule); text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.social a:hover { color: var(--ink); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Long-form legal pages
   -------------------------------------------------------------------------- */

.prose h2 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.004em;
  color: var(--ink); margin: 0 0 .75rem;
}
.prose h3 { margin: 1.6rem 0 .5rem; }
.prose ul { margin: 0 0 1.15em; padding-left: 1.15rem; max-width: var(--measure); }
.prose li { margin-bottom: .6rem; }
.prose li::marker { color: var(--rule-strong); }
.prose section + section { margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid var(--rule); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; }
.prose a:hover { text-decoration-color: var(--green); }

.toc { position: sticky; top: 6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin-bottom: .45rem; }
.toc a {
  font-size: .8125rem; line-height: 1.45; color: var(--slate); text-decoration: none;
  display: block; padding-left: .75rem; border-left: 1px solid var(--rule);
  transition: color .2s ease, border-color .2s ease;
}
.toc a:hover { color: var(--ink); border-left-color: var(--green); }
@media (max-width: 59.99rem) { .toc { position: static; } }

.factbox {
  border: 1px solid var(--rule); background: var(--white);
  padding: 1.4rem 1.6rem; margin: 1.4rem 0; max-width: var(--measure);
  font-size: .9375rem; line-height: 1.65;
}
.factbox p { margin: 0 0 .2rem; }
.factbox p:first-child { color: var(--ink); font-weight: 600; margin-bottom: .5rem; }

.table-scroll { overflow-x: auto; margin: 1.4rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .875rem; }
th, td { text-align: left; padding: .8rem 1.2rem .8rem 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { color: var(--ink); font-weight: 600; border-bottom-color: var(--rule-strong); font-size: .8125rem; }
td { color: var(--graphite); }

/* --------------------------------------------------------------------------
   9. 404
   -------------------------------------------------------------------------- */

.void {
  min-height: 78vh; display: grid; align-content: center; gap: 1.4rem;
}

/* --------------------------------------------------------------------------
   9b. Small screens
   The measure is short on a phone, so the generous desktop leading reads as
   loose rather than as air. These are the only type sizes that change.
   -------------------------------------------------------------------------- */

@media (max-width: 39.99rem) {
  body { line-height: 1.62; }
  .lead { line-height: 1.5; }
  .serif-lead { line-height: 1.34; }
  p { margin-bottom: 1em; }
  .byline { gap: 1.3rem; }
  .row { padding-block: 1.6rem; }
}

/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .skip-link, .toc, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding-block: 1.2rem; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
}

/* ==========================================================================
   A NOTE ON THE GREEN: read before editing

   #04BE51 has a contrast ratio of 2.47:1 against this paper. That is far
   below the 4.5:1 WCAG AA needs for text, so the brand green is never used
   for type. It appears in exactly four places on the homepage, and its
   scarcity is what gives it meaning: it marks where you are.

     1. the rule struck under "the after" in the headline   (.mark)
     2. the dot on act III, the act the whole site is about (.act--now)
     3. the rule beside the thesis statement                (.thesis)
     4. the arrow on a call to action                       (.cta svg, as --green-ink)

   Hover states may add a fifth and a sixth (the booking links in the work
   section) because they are not present at rest.

   If you need green *text*, use --green-ink (#047A34, 5.4:1). If you find
   yourself adding a fifth green element, take one away first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. Additions for the legal pages
   -------------------------------------------------------------------------- */

.prose section { scroll-margin-top: 6rem; }

/* A quoted or set-apart passage inside a contract: neutral, not green.
   The green stays reserved for the homepage argument. */
.aside-note {
  border-left: 2px solid var(--rule-strong);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  margin: 1.6rem 0;
  max-width: var(--measure);
}
.aside-note > p:first-child { color: var(--ink); font-weight: 600; }

.doc-head { padding-block: clamp(2.6rem, 5vw, 4rem) clamp(2rem, 3.5vw, 3rem); border-bottom: 1px solid var(--rule); }
.doc-version { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; color: var(--slate); letter-spacing: .04em; }

/* Legal-page layout: a wider rail than the homepage, to hold a contents list.
   The single mobile column is declared as minmax(0, 1fr) rather than left
   implicit. An implicit auto track sizes to its content's minimum, and the
   retention table carries min-width: 34rem, so the whole page grew to 544px
   and scrolled sideways on a phone. minmax(0, ...) caps the track at the
   container and lets .table-scroll do its job. */
.doc { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.doc > * { min-width: 0; }
@media (min-width: 64rem) {
  .doc { grid-template-columns: 13rem minmax(0, 1fr); gap: 4rem; align-items: start; }
}