/* ============================================================
   Michael Xenakis — founder profile
   Mobile-first. No JavaScript. No animation, no transition.
   Left rail carries the dates; the content column holds the spine.
   ============================================================ */

/* ─── Faces ──────────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('assets/fonts/intertight-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ─── Tokens ─────────────────────────────────────────────── */

:root {
  /* Colour. The portrait's backdrop is graded to --paper exactly,
     so the photograph has no edge — he sits on the page, not in a box. */
  --paper:      #F4F0EA;
  --ink:        #14181C;
  --body:       #34383C;
  --muted:      #5F656B;
  --rule:       #DDD6CB;
  --rule-firm:  #A99E8D;  /* mid stone — inline separators */
  --accent:     #9C4A2B;  /* oxidised copper — rules, marks, links only */
  --accent-lit: #C87A50;  /* the same copper, legible on ink */
  --paper-lit:  #E8E2D8;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter Tight', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Type scale. Everything fluid; nothing below 17px for body copy. */
  --t-name:     clamp(3.5rem, 17vw, 6.25rem);
  --t-lede:     clamp(1.3125rem, 5.2vw, 1.875rem);
  --t-org:      clamp(1.3125rem, 5.2vw, 1.625rem);
  --t-email:    clamp(1.375rem, 6.4vw, 2.375rem);
  --t-body:     1.0625rem;
  --t-meta:     0.875rem;
  --t-eyebrow:  0.75rem;

  --rail:   140px;   /* date column, desktop only */
  --gutter: 44px;

  --pad:  clamp(1.5rem, 6vw, 3.5rem);
  --wide: 880px;

  /* Same fractal-noise recipe the paper stock is printed on. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ─── Reset ──────────────────────────────────────────────── */

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

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

body {
  overflow-wrap: anywhere;
  background: var(--paper) var(--grain) repeat;
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

img { display: block; max-width: 100%; height: auto; }
ol, ul { list-style: none; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }

p { text-wrap: pretty; }

a { color: inherit; }

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

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

/* Inline middots between list-like items. */
b {
  font-weight: inherit;
  color: var(--rule-firm);
  padding: 0 0.15em;
}

/* ─── Shell ──────────────────────────────────────────────── */

.page {
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(3rem, 13vw, 4rem) var(--pad) clamp(4rem, 14vw, 7rem);
}

/* ─── Masthead ───────────────────────────────────────────── */

.masthead-figure {
  width: 62%;
  max-width: 280px;
  margin-bottom: clamp(2rem, 7vw, 2.75rem);
}

/* The backdrop already matches the page, so the portrait sits directly
   on the paper without a frame or overlay. */
.portrait {
  width: 100%;
}

.name {
  font-family: var(--serif);
  font-size: var(--t-name);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: 'wght' 300, 'opsz' 144, 'SOFT' 24, 'WONK' 1;
}
.name span { display: block; }
.masthead-id { min-width: 0; }

.discipline {
  margin-top: clamp(1.5rem, 5vw, 1.875rem);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.175em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--ink);
}

.discipline::before {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin-bottom: clamp(1.25rem, 4.5vw, 1.625rem);
}

.whereabouts {
  margin-top: 0.75rem;
  font-size: var(--t-meta);
  color: var(--muted);
}
.whereabouts a {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ─── Lede ───────────────────────────────────────────────── */

.lede {
  margin-top: clamp(2.75rem, 10vw, 4.25rem);
}
/* The measure lives on the paragraph, where 1em is the lede size —
   on .lede it would resolve against the inherited 17px body size.
   em, not ch: Fraunces has a narrow zero and ch measures short. */
.lede p {
  max-width: 20em;
  font-family: var(--serif);
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.lede p + p {
  margin-top: 1.1em;
  color: var(--ink);
}

/* ─── Section furniture ──────────────────────────────────── */

.section { margin-top: clamp(3.5rem, 13vw, 6rem); }

.eyebrow {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-bottom: clamp(2rem, 7vw, 2.75rem);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--muted);
}
/* copper tick riding the section rule */
.eyebrow::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--accent);
}

/* ─── Experience ─────────────────────────────────────────── */

.role + .role { margin-top: clamp(2.75rem, 10vw, 3.75rem); }

.role-when {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.625rem;
}

.org {
  font-family: var(--serif);
  font-size: var(--t-org);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}

.post {
  margin-top: 0.3rem;
  font-size: var(--t-meta);
  letter-spacing: 0.01em;
  color: var(--muted);
}

.points { margin-top: 1.375rem; max-width: 62ch; }
.points li {
  position: relative;
  padding-left: 1.75rem;
}
.points li + li { margin-top: 0.9rem; }
/* hanging copper hairline in place of a bullet glyph */
.points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 11px;
  height: 1px;
  background: var(--accent);
}

/* ─── Selected projects ──────────────────────────────────── */

.projects { max-width: 100%; }
.project + .project { border-top: 1px solid var(--rule); }

/* Native disclosures retain keyboard, touch and screen-reader behaviour. */
.project-summary {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) 44px;
  column-gap: 0.875rem;
  align-items: start;
  min-height: 44px;
  padding-block: 1rem;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.project-summary::-webkit-details-marker { display: none; }
.project-summary::marker { content: ''; }
.project-summary::before {
  content: '';
  height: 1px;
  margin-top: 0.85em;
  background: var(--accent);
}
.project-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.project-copy { min-width: 0; }
.project-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.875rem;
}
.project-name {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 4.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.project-status {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--muted);
}
.project-result {
  display: block;
  margin-top: 0.35rem;
  line-height: 1.5;
}
.project-toggle {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}
.project-toggle::before,
.project-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.project-toggle::before { width: 14px; height: 2px; }
.project-toggle::after { width: 2px; height: 14px; }
.project-disclosure[open] .project-toggle::after { display: none; }
.project-summary:hover .project-name { color: var(--accent); }
.project-summary:hover .project-toggle { background: var(--paper-lit); }
.project-detail {
  margin-left: calc(11px + 0.875rem);
  padding: 0.25rem 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.55;
}
.project-detail dt {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}
.project-detail dt:first-child { margin-top: 0; }
.project-detail dd { min-width: 0; }

@media (min-width: 620px) {
  .project-detail {
    grid-template-columns: minmax(7rem, 0.3fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
  }
  .project-detail dt { margin-top: 0; }
}

@media (forced-colors: active) {
  .project-toggle { color: ButtonText; border-color: ButtonText; }
  .project-toggle::before,
  .project-toggle::after { background: ButtonText; }
  .project-summary:focus-visible { outline-color: Highlight; }
}

/* ─── Testimonial ────────────────────────────────────────── */

.testimonial-figure {
  max-width: 700px;
  border-left: 2px solid var(--accent);
  padding-left: clamp(1.25rem, 4vw, 2rem);
}

.testimonial-quote {
  max-width: 38em;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4vw, 1.625rem);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.testimonial-quote p + p { margin-top: 1em; }

.testimonial-byline {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--muted);
}

.testimonial-byline strong {
  font-weight: 500;
  color: var(--ink);
}

/* ─── Education · Technology ─────────────────────────────── */

.coda-body { max-width: 46ch; }
.stack {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}

/* ─── Colophon ───────────────────────────────────────────── */

.colophon {
  background: var(--ink);
  color: var(--paper-lit);
  padding: clamp(3.5rem, 13vw, 6rem) var(--pad) clamp(3rem, 11vw, 5rem);
}
.colophon-inner {
  max-width: var(--wide);
  margin-inline: auto;
}
.colophon .eyebrow {
  border-top-color: #2B3238;
  color: #8A9299;
  margin-bottom: clamp(1.5rem, 6vw, 2rem);
}
.colophon .eyebrow::before { background: var(--accent-lit); }

.email {
  display: inline-block;
  font-family: var(--serif);
  font-size: var(--t-email);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--paper-lit);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--accent-lit);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  font-variation-settings: 'wght' 300, 'opsz' 96, 'SOFT' 24;
}

.colophon-meta {
  margin-top: clamp(2.5rem, 9vw, 3.5rem);
  font-size: var(--t-meta);
  color: #7C848B;
}
.colophon-meta b { color: #3A4248; }

/* ============================================================
   Breakpoints, narrowest first — later blocks must win, so the
   tablet range is bounded and desktop is left open-ended.

   620–899  portrait moves beside the name; coda sections pair up.
   900+     the date rail opens on the left and the years right-align
            against the gutter, forming the vertical spine.
   ============================================================ */

@media (min-width: 620px) and (max-width: 899px) {

  /* The name shares its row with the portrait here, so it can no
     longer take 17vw without overrunning its column. */
  .name { font-size: clamp(2.75rem, 8vw, 4.5rem); }

  .masthead {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: var(--gutter);
    align-items: start;
  }
  .masthead-figure {
    grid-column: 2;
    grid-row: 1;
    width: 200px;
    max-width: none;
    margin-bottom: 0;
  }
  .masthead-id { grid-column: 1; grid-row: 1; }


  .coda {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter);
  }
  .coda .section:last-child { margin-top: clamp(3.5rem, 13vw, 6rem); }
}

@media (min-width: 900px) {

  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: var(--gutter);
    align-items: start;
  }
  .masthead-figure {
    grid-column: 2;
    grid-row: 1;
    width: 180px;
    max-width: none;
    margin-bottom: 0;
  }
  .masthead-id { grid-column: 1; grid-row: 1; }

  /* The lede steps in to the content column, so the spine that the
     dates form below it is already established at the top of the page. */
  .lede { margin-left: calc(var(--rail) + var(--gutter)); margin-top: 2.25rem; }

  .role {
    display: grid;
    grid-template-columns: var(--rail) 1fr;
    column-gap: var(--gutter);
    align-items: start;
  }
  .role-when {
    text-align: right;
    margin-bottom: 0;
    padding-top: 0.55rem;
  }


  .coda {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter);
  }
  .coda .section:last-child { margin-top: clamp(3.5rem, 13vw, 6rem); }
}

/* Phone layout: identity and value proposition share the first screen. */
@media (max-width: 619px) {
  :root {
    --t-name:  clamp(2.25rem, 10vw, 3.35rem);
    --t-lede:  clamp(1.25rem, 5.5vw, 1.45rem);
    --t-org:   clamp(1.35rem, 6vw, 1.55rem);
    --pad:     clamp(1.25rem, 5.5vw, 1.5rem);
  }

  .page {
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: 4rem;
  }

  .masthead {
    display: grid;
    grid-template-columns: clamp(80px, 24vw, 112px) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 6vw, 1.75rem);
    align-items: center;
  }

  .masthead-figure {
    width: 100%;
    margin: 0;
  }

  .name { line-height: 0.92; }

  .discipline {
    margin-top: 1.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.13em;
    line-height: 1.55;
  }

  .discipline::before {
    width: 40px;
    margin-bottom: 0.9rem;
  }

  .whereabouts {
    margin-top: 0.65rem;
    line-height: 1.55;
  }

  .whereabouts b { display: none; }
  .whereabouts a {
    display: block;
    width: fit-content;
    min-height: 44px;
    padding-top: 0.25rem;
  }

  .lede { margin-top: 2.25rem; }
  .lede p { line-height: 1.34; }
  .lede p + p { margin-top: 0.8em; }

  .section { margin-top: 3.75rem; }
  .section-builds { margin-top: 3.25rem; }

  .eyebrow {
    padding-top: 0.875rem;
    margin-bottom: 1.75rem;
    letter-spacing: 0.15em;
  }

  .role + .role {
    margin-top: 3rem;
    padding-top: 0.25rem;
  }

  .role-when {
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
  }

  .post {
    margin-top: 0.35rem;
    line-height: 1.45;
  }

  .points { margin-top: 1.15rem; }
  .points li { padding-left: 1.25rem; }
  .points li + li { margin-top: 0.8rem; }


  .colophon {
    padding-top: 3.5rem;
    padding-bottom: max(3.5rem, env(safe-area-inset-bottom));
  }
}

/* ─── Approach ───────────────────────────────────────────── */

.now { max-width: 40em; }
.now a { color: var(--accent); }

/* ─── Readability ────────────────────────────────────────────
   Body copy moves to the system UI face (SF on Apple, Segoe on
   Windows) at 18px; Fraunces stays for the name, lede and headings. */

:root {
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --body: #262A2E;
  --muted: #555B61;
  --t-body: 1.125rem;
  --t-meta: 0.9375rem;
  --t-eyebrow: 0.8125rem;
}
body { line-height: 1.6; }
.lede p { font-weight: 400; line-height: 1.4; }
.eyebrow { letter-spacing: 0.12em; color: var(--ink); font-weight: 600; }
.role-when { letter-spacing: 0.08em; }
.discipline { letter-spacing: 0.12em; }
.points li strong { color: var(--ink); font-weight: 600; }

.highlights { display: grid; gap: 1.75rem; }
.highlights li { border-left: 2px solid var(--accent); padding-left: 1.125rem; }
.highlights strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 2.625rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}
.highlights span { display: block; margin-top: 0.4rem; max-width: 22em; }

@media (min-width: 620px) {
  .highlights { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
}

/* Connection to Via Foundry */
.foundry-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: var(--t-meta);
}
.foundry-nav a, .founder-role a { color: var(--accent); text-underline-offset: 4px; }
.foundry-nav span { color: var(--muted); }
.founder-role { margin: 0.75rem 0 0.25rem; font-size: var(--t-meta); }
.foundry-contact { max-width: 32em; margin-bottom: 0.75rem; }
.foundry-contact a, .foundry-business-email { color: var(--accent-lit); text-underline-offset: 4px; }
.foundry-business-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.personal-contact { margin: 2.5rem 0 0.75rem; font-size: var(--t-meta); color: #8A9299; }

.foundry-nav { margin-bottom: 0.75rem; }
.founder-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  font-size: var(--t-meta);
  color: var(--muted);
}
.founder-languages a { color: var(--accent); text-underline-offset: 4px; }
.founder-languages a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }

/* Navigation remains easy to reach with touch or a keyboard. */
.foundry-nav a,
.founder-languages a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.founder-languages { align-items: center; }

@media print {
  body { background: white; color: black; }
  .page { padding: 0; max-width: none; }
  .project-summary { cursor: default; grid-template-columns: 11px minmax(0, 1fr); }
  .project-toggle { display: none; }
  .project { break-inside: avoid; }
  .project-name, .project-status { color: black; }
}