@layer reset, base, layout, components, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
  body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  svg { display: block; }
}

@layer base {
  :root {
    --bg: #071018;
    --bg-2: #0c1824;
    --surface: #122033;
    --ink: #e8f4fb;
    --muted: #9db8c9;
    --line: rgba(255, 255, 255, .1);
    --accent: #00b4e8;
    --accent-deep: #0789b3;
    --white: #f5fbff;
    --gutter: clamp(1.25rem, 4vw, 4.75rem);
    --section-space: clamp(5rem, 11vw, 9rem);
    --sans: "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  }

  body {
    min-width: 20rem;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-weight: 650;
    letter-spacing: -.04em;
    text-wrap: balance;
  }

  h1 {
    max-width: 16ch;
    font-size: clamp(3.4rem, 8.6vw, 7.6rem);
    line-height: .88;
    letter-spacing: -.06em;
  }

  h2 {
    font-size: clamp(2.65rem, 6vw, 5.5rem);
    line-height: .98;
  }

  h3 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.12;
    letter-spacing: -.03em;
  }

  p { text-wrap: pretty; }

  a:focus-visible {
    outline: .2rem solid var(--accent);
    outline-offset: .25rem;
    border-radius: .15rem;
  }

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

@layer layout {
  .site-header,
  .hero,
  .t2s,
  .hub,
  .teaching,
  .talks,
  .contact,
  footer {
    padding-inline: var(--gutter);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem;
    border-bottom: 1px solid var(--line);
    background: rgb(7 16 24 / .86);
    backdrop-filter: blur(16px);
  }

  .site-header nav {
    display: flex;
    gap: clamp(.85rem, 2.4vw, 2rem);
  }

  .hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .9fr);
    gap: clamp(2.5rem, 6vw, 7rem);
    align-items: end;
    min-height: calc(100dvh - 4.5rem);
    padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  }

  .section-heading {
    display: grid;
    gap: .9rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  }

  .section-heading h2 { max-width: 18ch; }

  .section-heading p:not(.section-index) {
    max-width: 46rem;
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: 1.05rem;
  }

  .t2s,
  .hub,
  .teaching,
  .talks,
  .contact {
    padding-block: var(--section-space);
    scroll-margin-top: 5.5rem;
  }

  .t2s { border-top: 1px solid var(--line); }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 2.5rem;
    background: var(--line);
    border: 1px solid var(--line);
  }

  .t2s-stage { margin-bottom: 2.4rem; }

  .archetype-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .t2s-copy {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
  }

  .t2s-copy p { color: var(--muted); max-width: 38rem; }

  .hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .teaching-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .talk-card {
    display: grid;
    grid-template-columns: minmax(18rem, 1.15fr) minmax(16rem, .85fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }

  .book {
    display: grid;
    grid-template-columns: minmax(12rem, .42fr) minmax(20rem, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: var(--section-space) var(--gutter);
    scroll-margin-top: 5.5rem;
    background:
      radial-gradient(60% 80% at 10% 20%, rgb(0 180 232 / .16), transparent 60%),
      var(--surface);
  }

  .contact {
    display: grid;
    grid-template-columns: minmax(7rem, .28fr) minmax(16rem, 1fr) minmax(14rem, .7fr);
    gap: clamp(1.5rem, 5vw, 4rem);
  }

  footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 2rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

@layer components {
  .skip-link {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 12;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    color: var(--bg);
    background: var(--accent);
    white-space: nowrap;
  }

  .skip-link:focus {
    width: auto;
    height: auto;
    padding: .75rem 1rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--ink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .brand-mark {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: .7rem;
    box-shadow: 0 0 0 1px rgb(0 180 232 / .35), 0 0 24px rgb(0 180 232 / .18);
  }

  nav a {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
  }

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

  .eyebrow,
  .section-index {
    color: var(--accent);
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .hero .eyebrow { margin-bottom: 1.6rem; }

  .hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgb(0 180 232 / .04) 1px, transparent 1px),
      linear-gradient(90deg, rgb(0 180 232 / .04) 1px, transparent 1px),
      radial-gradient(50% 60% at 80% 10%, rgb(0 180 232 / .18), transparent 60%);
    background-size: 3rem 3rem, 3rem 3rem, auto;
    mask-image: linear-gradient(180deg, rgb(0 0 0 / .7), transparent 88%);
  }

  .hero-copy,
  .portrait-block { position: relative; z-index: 1; }

  .hero-intro {
    max-width: 42rem;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--muted);
    font-size: clamp(1.02rem, 1.6vw, 1.28rem);
    line-height: 1.65;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    margin-top: 2.2rem;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .75rem 1.2rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }

  .button:active { transform: translateY(1px); }

  .button-primary {
    color: var(--bg);
    background: var(--accent);
    box-shadow: 0 0 0 1px rgb(0 180 232 / .4), 0 0 28px rgb(0 180 232 / .22);
  }

  .button-primary:hover {
    background: var(--white);
    box-shadow: 0 0 32px rgb(0 180 232 / .35);
  }

  .button-text { padding-inline: 0; border-bottom: 1px solid var(--ink); }
  .button-text:hover { color: var(--accent); border-bottom-color: var(--accent); }

  .button-light {
    color: var(--bg);
    background: var(--white);
  }

  .button-light:hover { background: var(--accent); }
  .book .button-light:focus-visible { outline-color: var(--white); }

  .social-row {
    display: flex;
    gap: .65rem;
    margin-top: 1.6rem;
  }

  .social-row a {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: rgb(255 255 255 / .03);
  }

  .social-row a:hover {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
  }

  .social-row svg { width: 1.05rem; height: 1.05rem; }

  .roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    border-top: 1px solid var(--line);
  }

  .roles > div { padding: 1.2rem 1rem 0 0; }
  .roles > div + div { padding-left: 1.2rem; border-left: 1px solid var(--line); }
  .roles dt { font-size: 1.02rem; }
  .roles dd { margin-top: .25rem; color: var(--muted); font-size: .78rem; }

  .portrait-frame {
    position: relative;
    padding: .55rem;
    background: var(--surface);
    box-shadow: 0 0 0 1px rgb(0 180 232 / .28), 0 24px 60px rgb(0 0 0 / .35);
  }

  .portrait-frame::before,
  .portrait-frame::after {
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    content: "";
  }

  .portrait-frame::before {
    top: -.35rem;
    left: -.35rem;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
  }

  .portrait-frame::after {
    right: -.35rem;
    bottom: -.35rem;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
  }

  .portrait-frame img {
    width: 100%;
    filter: saturate(.9) contrast(1.05);
  }

  .portrait-block figcaption {
    display: flex;
    justify-content: space-between;
    padding-top: .75rem;
    color: var(--muted);
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .stat-grid li {
    display: grid;
    gap: .35rem;
    padding: 1.4rem 1.1rem;
    background: var(--bg-2);
  }

  .stat-grid li svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--accent);
  }

  .stat-grid strong {
    color: var(--accent);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.04em;
  }

  .stat-grid span {
    color: var(--muted);
    font-size: .78rem;
  }

  .hub-grid article,
  .teaching-grid article {
    display: grid;
    align-content: start;
    grid-template-rows: auto auto 1fr auto;
    gap: .7rem;
    min-height: 100%;
    padding: 1.3rem 1.2rem 1.2rem;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / .025);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .hub-grid article:hover,
  .teaching-grid article:hover {
    border-color: rgb(0 180 232 / .45);
    box-shadow: 0 0 0 1px rgb(0 180 232 / .18), 0 18px 40px rgb(0 0 0 / .25);
    transform: translateY(-3px);
  }

  .hub-mark {
    display: grid;
    place-items: center;
    width: 3.15rem;
    height: 3.15rem;
    color: var(--accent);
    border: 1px solid rgb(0 180 232 / .38);
    border-radius: .9rem;
    background: rgb(0 180 232 / .1);
  }

  .hub-icon {
    width: 1.55rem;
    height: 1.55rem;
    color: var(--accent);
  }

  .hub-tree-wrap { margin: 0 0 2.1rem; }

  .hub-tree {
    display: block;
    width: 100%;
    min-height: 18rem;
    height: auto;
    overflow: visible;
  }

  .hub-tree-wrap figcaption {
    margin-top: .9rem;
    color: var(--muted);
    font-size: .92rem;
  }

  .fruit rect {
    fill: rgb(7 16 24 / .94);
    stroke: var(--accent);
    stroke-width: 1.4;
  }

  .fruit text {
    fill: var(--ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .t2s-stage {
    padding: 1.35rem 1.2rem 1.2rem;
    border: 1px solid var(--line);
    background:
      radial-gradient(90% 80% at 0% 0%, rgb(0 180 232 / .12), transparent 58%),
      rgb(255 255 255 / .02);
  }

  .flow-kicker {
    margin-bottom: 1rem;
    color: var(--accent);
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .archetype-flow li {
    position: relative;
    display: grid;
    align-content: start;
    gap: .45rem;
    min-height: 100%;
    padding: 1rem .9rem 1.05rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
  }

  .archetype-flow svg {
    width: 1.85rem;
    height: 1.85rem;
    color: var(--accent);
  }

  .archetype-flow strong {
    font-size: 1.08rem;
    letter-spacing: -.03em;
  }

  .archetype-flow span {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
  }

  .controller-band {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px dashed rgb(0 180 232 / .5);
    background: rgb(0 180 232 / .07);
  }

  .controller-band svg {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--accent);
  }

  .flow-note {
    margin-top: 1rem;
    color: var(--muted);
    font-size: .92rem;
  }

  .flow-note a {
    color: var(--accent);
    font-weight: 700;
  }

  .teaching-grid article.course {
    position: relative;
    grid-template-rows: 1fr;
    gap: 0;
    min-height: 24rem;
    padding: 0;
    overflow: hidden;
  }

  .course-art {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 54%;
    opacity: .7;
    pointer-events: none;
  }

  .course-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    gap: .7rem;
    min-height: 24rem;
    padding: 1.4rem 1.25rem 1.25rem;
    background: linear-gradient(180deg, rgb(7 16 24 / .05), rgb(7 16 24 / .55) 38%, rgb(7 16 24 / .94) 62%);
  }

  .hub-grid p,
  .teaching-grid p:not(.eyebrow) {
    color: var(--muted);
    font-size: .92rem;
  }

  .hub-grid a,
  .arrow-link {
    color: var(--accent);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-underline-offset: .28rem;
    text-transform: uppercase;
  }

  .lattes { display: inline-block; margin-top: 1.5rem; }

  .talk-card {
    padding: .85rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
  }

  .talk-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 78% 42%;
    border: 1px solid var(--line);
  }

  .talk-extra {
    margin-top: 1.1rem;
    color: var(--muted);
    font-size: .95rem;
  }

  .talk-extra a { color: var(--accent); }

  .talk-card h3 { margin: .6rem 0 1rem; }
  .talk-card p:not(.eyebrow) { margin-bottom: 1.4rem; color: var(--muted); }

  .book-cover {
    max-width: 22rem;
    transform: rotate(-4deg);
    filter: drop-shadow(0 24px 40px rgb(0 0 0 / .45));
  }

  .book-cover img {
    width: 100%;
    border: 1px solid rgb(255 255 255 / .12);
  }

  .book .eyebrow { margin-bottom: 1.2rem; }
  .book h2 { max-width: 14ch; }
  .book-copy > p:not(.eyebrow) {
    max-width: 38rem;
    margin-block: 1.5rem 2rem;
    color: var(--muted);
    font-size: 1.08rem;
  }

  .contact-copy h2 { max-width: 14ch; }
  .contact-copy p { max-width: 34rem; margin-top: 1.5rem; color: var(--muted); }
  .contact-links { border-top: 1px solid var(--line); }

  .contact-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.4rem;
    border-bottom: 1px solid var(--line);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .contact-links a:hover { color: var(--accent); }
}

@layer motion {
  @keyframes grid-shift {
    to { background-position: 3rem 3rem, 3rem 3rem, 0 0; }
  }

  @keyframes glow-pulse {
    50% { box-shadow: 0 0 0 1px rgb(0 180 232 / .55), 0 0 36px rgb(0 180 232 / .32); }
  }

  .hero-grid { animation: grid-shift 28s linear infinite; }
  .brand-mark { animation: glow-pulse 4.5s ease-in-out infinite; }

  @keyframes draw-stroke {
    from { stroke-dashoffset: 720; }
  }

  @keyframes fruit-pop {
    from { opacity: 0; }
  }

  @keyframes seed-pulse {
    50% { filter: url(#seed-glow) brightness(1.35); }
  }

  @keyframes sap {
    to { stroke-dashoffset: -96; }
  }

  @keyframes node-pulse {
    50% { opacity: .28; }
  }

  @keyframes ride {
    to { offset-distance: 100%; }
  }

  @keyframes chevron {
    50% { opacity: .2; transform: rotate(45deg) translateX(.18rem); }
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(.7rem); }
  }

  .draw {
    stroke-dashoffset: 0;
  }

  .d0 { animation-duration: 1.5s; }
  .d1 { animation-delay: .55s; }
  .d2 { animation-delay: .75s; }
  .d3 { animation-delay: .95s; }
  .d4 { animation-delay: 1.15s; }
  .d5 { animation-delay: .55s; }
  .d6 { animation-delay: .75s; }
  .d7 { animation-delay: .95s; }
  .d8 { animation-delay: 1.15s; }
  .d9 { animation-delay: 1.35s; }

  .seed { animation: seed-pulse 2.8s ease-in-out infinite; }

  .branch {
    stroke-dasharray: 7 13;
    animation: sap 7s linear infinite;
  }

  .fruit { opacity: 1; }

  .nn-edge {
    stroke-dasharray: 5 14;
    animation: sap 4.8s linear infinite;
  }

  .nn-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: node-pulse 2.4s ease-in-out infinite;
  }

  .poo-flow {
    stroke-dasharray: 5 11;
    animation: sap 3.6s linear infinite;
  }

  .pk1,
  .pk2 {
    offset-distance: 0%;
    animation: ride 6.4s linear infinite;
  }

  .pk1 { offset-path: path("M50 42 H350"); }
  .pk2 { offset-path: path("M50 42 H350"); animation-delay: 3.2s; }

  .archetype-flow li {
    animation: rise-in .7s ease both;
  }

  .archetype-flow li:nth-child(1) { animation-delay: .05s; }
  .archetype-flow li:nth-child(2) { animation-delay: .18s; }
  .archetype-flow li:nth-child(3) { animation-delay: .31s; }
  .archetype-flow li:nth-child(4) { animation-delay: .44s; }
  .archetype-flow li:nth-child(5) { animation-delay: .57s; }

  .archetype-flow li:not(:last-child)::after {
    position: absolute;
    top: 1.45rem;
    right: -.55rem;
    width: .55rem;
    height: .55rem;
    border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    opacity: .75;
    content: "";
    transform: rotate(45deg);
    animation: chevron 1.6s ease-in-out infinite;
  }

  .controller-band { animation: rise-in .8s ease both .7s; }

  @supports (animation-timeline: view()) {
    .t2s,
    .hub,
    .teaching,
    .talks,
    .book,
    .contact {
      animation: rise both linear;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }

  @keyframes rise {
    from { opacity: .35; transform: translateY(1.25rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@layer responsive {
  @media (max-width: 64rem) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(14rem, .5fr); }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .t2s-copy,
    .hub-grid,
    .talk-card,
    .book { grid-template-columns: 1fr; }
    .archetype-flow { grid-template-columns: 1fr 1fr; }
    .archetype-flow li:not(:last-child)::after { display: none; }
    .book-cover { max-width: 16rem; transform: none; }
    .contact { grid-template-columns: .3fr 1fr; }
    .contact-links { grid-column: 2; }
  }

  @media (max-width: 47rem) {
    .site-header nav a:nth-child(3) { display: none; }
    .hero {
      grid-template-columns: 1fr;
      min-height: auto;
      padding-top: 3rem;
    }
    .portrait-block { max-width: 22rem; }
    .roles { grid-template-columns: 1fr; }
    .roles > div { padding-block: 1rem; }
    .roles > div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
    .section-heading,
    .teaching-grid,
    .contact { grid-template-columns: 1fr; }
    .archetype-flow { grid-template-columns: 1fr; }
    .hub-tree { display: none; }
    .contact-links { grid-column: auto; }
    footer { flex-direction: column; gap: .25rem; }
  }

  @media (max-width: 27rem) {
    .brand > span { display: none; }
    .site-header nav a { font-size: .68rem; }
    h1 { font-size: 3.05rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .button { width: 100%; }
    .hub-grid { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      scroll-behavior: auto !important;
      animation: none !important;
      transition-duration: .01ms !important;
    }
  }
}