/* ==========================================================================
   Venice Partners: site stylesheet
   Layout concept: an editorial 12-column page. Section headings sit in a
   narrow left column, the reading text in a wide right column, so the page
   reads like a well-set report. One typeface family carries the hierarchy.
   The page is deliberately single-theme (off-white paper, black ink) with
   one inverted band for contact.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Colour */
  --paper: #f4f4f1;        /* page ground: neutral off-white */
  --paper-deep: #e9e9e4;   /* placeholders, quiet fills */
  --ink: #111111;          /* primary text, inverted band ground */
  --ink-soft: #3f3f3c;     /* secondary text */
  --stone: #66625a;        /* the single neutral accent: labels, markers */
  --rule: #d3d3cc;         /* hairlines on paper */
  --on-ink: #f4f4f1;       /* text on the inverted band */
  --on-ink-soft: #b4b3ac;  /* secondary text on the inverted band */
  --rule-on-ink: #3a3a37;  /* hairlines on the inverted band */

  /* Type */
  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-display: clamp(2.25rem, 1.2rem + 5.2vw, 6.25rem);
  --t-h2: clamp(2rem, 1.45rem + 2.2vw, 3.375rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --t-lead: clamp(1.1875rem, 1.06rem + 0.5vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.75rem;
  --w-display: 340;
  --w-heading: 380;
  --w-strong: 560;

  /* Space and measure */
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3.5rem);
  --page-max: 84rem;
  --section-pad: clamp(4.5rem, 2.8rem + 6.5vw, 9rem);
  --measure: 38rem;

  color-scheme: light;
}

/* ---- Font --------------------------------------------------------------- */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

h1, h2, h3 { text-wrap: balance; font-weight: var(--w-heading); }
p { text-wrap: pretty; }

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 1px;
}

[id] { scroll-margin-top: 1.5rem; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---- Masthead ----------------------------------------------------------- */
.masthead { border-bottom: 1px solid var(--rule); }

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
}

.wordmark {
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* letter-spacing adds trailing space; pull it back so the mark sits flush */
  margin-right: -0.3em;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.nav a {
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.25rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
}
.nav a:hover { color: var(--ink); background-size: 100% 1px; }

@media (prefers-reduced-motion: no-preference) {
  .nav a { transition: background-size 0.25s ease, color 0.2s ease; }
}

/* ---- Shared section frame ----------------------------------------------- */
.section {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--rule);
}

.section-grid {
  display: grid;
  gap: 2rem var(--gutter);
}

.section-head h2 {
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.section-body {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -0.008em;
  max-width: var(--measure);
}

.body-text {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.label {
  font-size: var(--t-label);
  font-weight: var(--w-strong);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

@media (min-width: 60rem) {
  .section-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .section-head { grid-column: 1 / span 4; }
  .section-head h2 { max-width: 12ch; }
  .section-body { grid-column: 5 / -1; }
}

/* ---- Introduction ------------------------------------------------------- */
.intro { padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) var(--section-pad); }

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  letter-spacing: 0.005em;
}
.eyebrow .name { color: var(--ink); font-weight: var(--w-strong); }
.eyebrow .sep { color: var(--rule); }

.intro h1 {
  margin-top: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  font-size: var(--t-display);
  font-weight: var(--w-display);
  line-height: 0.98;
  letter-spacing: -0.042em;
  max-width: 18ch;
}

.intro-grid {
  display: grid;
  gap: 3rem var(--gutter);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.intro-text {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  min-width: 0;
}

.sector-line { color: var(--ink-soft); max-width: 34rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--ink);
}
.button:hover { background: var(--paper); color: var(--ink); }

.text-link {
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.text-link:hover { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color 0.2s ease, color 0.2s ease; }
}

/* Portrait and short biography */
.portrait {
  display: grid;
  gap: 1rem;
  align-content: start;
  max-width: 20rem;
}

.portrait-frame {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 100%;
  background: var(--paper-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

.bio {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 59.99rem) {
  /* On small screens the portrait is secondary: smaller, after the text */
  .portrait { grid-template-columns: 7.5rem minmax(0, 1fr); max-width: none; gap: 1.25rem; align-items: start; }
}

@media (min-width: 60rem) {
  .intro-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .intro-text { grid-column: 1 / span 7; }
  .portrait { grid-column: 9 / -1; justify-self: end; width: 100%; }
}

/* ---- How I help --------------------------------------------------------- */
.capabilities {
  margin-top: clamp(1rem, 0.5rem + 2vw, 2rem);
  border-top: 1px solid var(--ink);
}

.capability {
  display: grid;
  gap: 0.75rem var(--gutter);
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.capability h3 {
  font-size: var(--t-h3);
  font-weight: 460;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.capability p { color: var(--ink-soft); max-width: var(--measure); }

@media (min-width: 46rem) {
  .capability { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.help-notes {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

/* ---- Experience --------------------------------------------------------- */
.experience-cards {
  display: grid;
  gap: 3rem var(--gutter);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

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

.card {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
  min-width: 0;
}

/* Attribution marker: hollow for previous-role experience, filled for work
   through Venice Partners. The label text carries the meaning; the marker
   only repeats it. */
.card .label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.card .label::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--stone);
}
.card--venice .label { color: var(--ink); }
.card--venice .label::before { background: var(--ink); border-color: var(--ink); }

.card h3 {
  font-size: var(--t-h3);
  font-weight: 460;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.card p { color: var(--ink-soft); }

/* Figures: a short ledger under each previous-role card. Every figure is
   labelled with its measure, scope and period. */
.figures {
  margin: 0.75rem 0 0;
  display: grid;
  border-top: 1px solid var(--rule);
}
.figures > div {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.figures dt {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: var(--w-heading);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.figures .to { color: var(--stone); padding-inline: 0.3em; font-weight: 300; }
.figures dd {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

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

/* ---- How I work --------------------------------------------------------- */
.work-text { font-size: var(--t-lead); line-height: 1.55; max-width: 40rem; }
.work-text p + p { margin-top: 1em; }

/* ---- Contact band ------------------------------------------------------- */
.contact {
  background: var(--ink);
  color: var(--on-ink);
  padding-top: var(--section-pad);
  overflow: hidden;
}

.contact ::selection { background: var(--on-ink); color: var(--ink); }

.contact .section-head h2 { max-width: 10ch; }

.contact .body-text { color: var(--on-ink-soft); }
.contact .lead { color: var(--on-ink); }

.email-block {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.email-block .label { color: var(--on-ink-soft); }

.email {
  font-size: clamp(1.375rem, 1rem + 1.8vw, 2.5rem);
  font-weight: var(--w-heading);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.email:hover { text-decoration-thickness: 2px; }

/* Footer: continues the inverted band below the contact section */
.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  padding-top: clamp(5rem, 3rem + 7vw, 10rem);
  overflow: hidden;
}

.site-footer ::selection { background: var(--on-ink); color: var(--ink); }

.footer {
  border-top: 1px solid var(--rule-on-ink);
  padding-top: 2rem;
  display: grid;
  gap: 1.25rem 2rem;
  font-size: 0.875rem;
  color: var(--on-ink-soft);
}

.footer a { color: var(--on-ink); text-underline-offset: 0.3em; }

@media (min-width: 60rem) {
  .footer { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .footer-legal { grid-column: 1 / span 8; }
  .footer-links { grid-column: 9 / -1; justify-self: end; }
}

.footer-legal p + p { margin-top: 0.25rem; }

.footer-links ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* The wordmark set to the full width of the page: the one large gesture */
.signature {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  font-size: min(calc(9.95vw - 0.13rem), 8.15rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 0.8;
  white-space: nowrap;
  color: var(--on-ink);
  padding-bottom: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  user-select: none;
}

/* ---- Privacy and other text pages -------------------------------------- */
.doc { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem) var(--section-pad); }

.doc h1 {
  font-size: var(--t-h2);
  font-weight: var(--w-heading);
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.doc-meta { margin-top: 1rem; color: var(--stone); font-size: var(--t-small); }

.doc-body {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  max-width: var(--measure);
  display: grid;
  gap: 1rem;
}

.doc-body h2 {
  margin-top: 1.5rem;
  font-size: var(--t-h3);
  font-weight: 480;
  letter-spacing: -0.012em;
}

.doc-body p { color: var(--ink-soft); }
.doc-body a { text-underline-offset: 0.25em; }

.doc-footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ---- Launch markers ----------------------------------------------------- */
/* Every [TO CONFIRM] value is wrapped in .tbc so it is easy to find and
   impossible to miss. Remove the wrapper when the value is confirmed. */
.tbc {
  background: #fff1a8;
  color: #111111;
  padding: 0 0.2em;
  font-weight: var(--w-strong);
  font-size: 0.85em;
  letter-spacing: 0;
  text-transform: none;
}
.portrait-frame .tbc { font-size: var(--t-label); }