/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
/* Hallmark · genre: editorial · macrostructure: Feature Stack (sticky portrait pane, scrolling record) · theme: custom site tokens, light paper · enrichment: none · nav: none (pane carries identity) · footer: Ft6 Letter close
 * inferred brief: audience = founders, investors, peers, recruiters · use = understand the record, then email · tone = quiet authority
 */

html { overflow-x: clip; }

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-light);
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--rule-thin);
  transition: color var(--dur-short) var(--ease-out);
}
a:hover { color: var(--color-light-accent); }
a:focus-visible { outline: 2px solid var(--color-focus-dark); outline-offset: 3px; }

.lambda { display: block; fill: none; stroke: currentColor; stroke-width: 13; }

/* ── frame ───────────────────────────────────────── */

.frame {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: var(--space-3xl);
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── sticky pane ─────────────────────────────────── */

.pane {
  position: sticky;
  inset-block-start: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: var(--space-xl);
}

.pane__mark { width: 1.75rem; height: 2.125rem; }

.pane__photo {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-block-start: auto;
}

.pane__role {
  margin-block-start: var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.pane__place { font-weight: 500; color: var(--color-light-muted); }

.pane__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-block-start: var(--space-lg);
  margin-block-end: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
}
.pane__links a { white-space: nowrap; }
.social-link { display: inline-flex; align-items: center; gap: 0.3em; }
.social-glyph { display: block; width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ── record ──────────────────────────────────────── */

.record { padding-block: var(--space-3xl) var(--space-2xl); min-width: 0; }

.name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-name);
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.lede {
  max-width: 30ch;
  margin-block-start: var(--space-xl);
  font-size: var(--text-lede);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.block { margin-block-start: var(--space-3xl); }
.block--wide { margin-block-start: var(--space-4xl); }

.block__head {
  padding-block-end: var(--space-sm);
  border-block-end: var(--rule-thick) solid var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.item {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-thin) solid var(--color-light-rule);
}

.item__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  line-height: 1.2;
}
.item__role {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-light-muted);
}
.item__text { max-width: 54ch; text-wrap: pretty; }

/* ── advisory: one accent block on the page ──────── */

.advise {
  display: block;
  margin-block-start: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-on-accent);
  color: var(--color-ink);
  text-decoration: none;
}
.advise:hover { color: var(--color-ink); background: var(--color-paper-3); }
.advise:focus-visible { outline-offset: 3px; }
.advise:active { background: var(--color-paper-2); }
.advise { transition: background-color var(--dur-short) var(--ease-out); }

.advise__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: var(--text-lg);
  line-height: 1.05;
  text-transform: uppercase;
}
.advise__text { display: block; margin-block-start: var(--space-xs); max-width: 48ch; color: var(--color-muted); }
.advise__go {
  display: block;
  margin-block-start: var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent);
  white-space: nowrap;
}

.also { margin-block-start: var(--space-lg); max-width: 58ch; color: var(--color-light-muted); text-wrap: pretty; }

/* ── close ───────────────────────────────────────── */

.close { margin-block-start: var(--space-4xl); padding-block-start: var(--space-lg); border-block-start: var(--rule-thick) solid var(--color-on-accent); }
.close__line { font-size: var(--text-lede); line-height: 1.25; }
.close__mail { display: inline-block; margin-block-start: var(--space-xs); font-size: var(--text-md); overflow-wrap: anywhere; }

/* ── narrow: pane becomes a header ───────────────── */

@media (max-width: 60rem) {
  .frame { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pane { position: static; min-height: 0; padding-block: var(--space-lg) 0; }
  .pane__photo { max-width: 14rem; margin-block-start: var(--space-xl); }
  .pane__links { margin-block-end: 0; }
  .record { padding-block-start: var(--space-xl); }
  .block { margin-block-start: var(--space-2xl); }
  .block--wide, .close { margin-block-start: var(--space-3xl); }
}

@media (max-width: 36rem) {
  .item { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  a, .advise { transition: none; }
}