/* The header mark and favicon share the same outlined Manrope letterforms. */
.monogram { width:50px; height:50px; min-width:50px; line-height:1; letter-spacing:normal; }
.monogram img { width:100%; height:100%; }

/* Readable labels are a system, rather than a collection of tiny annotations. */
:root { --label:clamp(13px,.72vw,14px); --label-small:clamp(12px,.64vw,13px); }
.mono, .eyebrow { font-size:var(--label); }
.header-note, .nav-number { font-size:var(--label-small); }
.hero-eyebrow { max-width:56%; line-height:1.6; }
.hero h1>span:nth-child(2) { padding-left:5vw; margin-top:22px; }
.hero h1 { font-size:clamp(80px,11.1vw,210px); }
.hero-baseline { color:#b7b5a9; }
.section-heading { grid-template-columns:1fr 2fr .8fr; }
.section-count { line-height:1.8; }
.project-caption>.mono { text-align:right; line-height:1.8; }
.social-links { flex-wrap:wrap; gap:14px 28px; font-size:14px; }
.social-links a { min-height:44px; }
.leviathan-logo { background:#efeee7; padding:2px; }
.leviathan-logo img { width:100%; height:100%; object-fit:contain; filter:none; }
.monetor-phone { transform:translateZ(0); }
.monetor-visual:hover .monetor-phone { transform:translateY(-8px) scale(1.015); }

/* The peer mesh belongs to the Leviathan project. */
.flow-network { margin:0; --wire:#747168; --node:#201f1b; }
.network-heading { text-transform:uppercase; color:var(--muted); letter-spacing:.08em; }
.network-svg { width:100%; height:auto; display:block; overflow:visible; }
.network-edge { fill:none; stroke:var(--wire); stroke-width:1; opacity:.55; vector-effect:non-scaling-stroke; transition:stroke 240ms,opacity 240ms; }
.network-edge.is-active { stroke:var(--accent); opacity:.95; stroke-width:1.3; }
.node-face { fill:var(--bg); stroke:#817d70; stroke-width:1; vector-effect:non-scaling-stroke; }
.node-ring { fill:none; stroke:var(--accent); stroke-width:1; opacity:0; vector-effect:non-scaling-stroke; transition:opacity 240ms; }
.node-icon { fill:none; stroke:#e3e0d5; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.network-node text { font-family:var(--mono); font-size:16px; letter-spacing:.035em; fill:#b7b5a9; }
.network-node.is-active .node-ring { opacity:.5; }
.network-node.is-active .node-face { stroke:var(--accent); fill:#2d231c; }
.network-node.is-active text { fill:var(--fg); }
.network-node.is-active .node-icon { stroke:var(--accent); }
.packet-core,.packet-trail { fill:var(--accent); }
.packet-halo { fill:var(--accent); opacity:.13; }
.packet-trail { opacity:.65; }
.packet-trail.trail-end { opacity:.3; }
.network-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; min-height:44px; }
.route-caption { color:var(--accent); font-size:12px; }
.p2p-diagram { align-self:center; width:100%; padding:10px 0; }
.p2p-diagram .network-heading { color:var(--muted); }
.p2p-diagram .network-node text { font-size:17px; }
.p2p-diagram .network-footer { border-top:1px solid var(--border); margin-top:15px; padding-top:10px; }
.p2p-diagram .network-edge { stroke-dasharray:4 6; opacity:.38; }
.p2p-diagram .network-edge.is-active { stroke-dasharray:none; opacity:.95; }
.p2p-content>p { max-width:350px; }


@media(max-width:1050px) {
  .network-node text { font-size:19px; }
  .network-footer { gap:5px; }
  .section-heading { grid-template-columns:.9fr 2fr; }
  .header-note { display:none; }
  .hero-bottom { grid-template-columns:1fr 1.15fr .7fr; gap:28px; }
  .location { font-size:12px; }
  .project-caption { grid-template-columns:1fr 1fr; }
  .project-caption>.mono { grid-column:1/-1; justify-self:start; text-align:left; }
}
@media(max-width:760px) {
  .site-header { gap:16px; }
  .monogram { width:44px; height:44px; min-width:44px; }
  .site-header nav { gap:16px; }
  .site-header nav a,.contact-link { font-size:12px; padding:14px 0; }
  .hero { display:flex; flex-direction:column; padding-top:24px; }
  .hero-eyebrow { order:0; max-width:100%; font-size:12px; margin-bottom:24px; letter-spacing:.02em; }
  .hero h1 { order:1; font-size:11.8vw; }
  .hero h1>span:first-child { font-size:14vw; }
  .hero h1>span:nth-child(2) { padding:0; margin-top:7px; }
  .hero-bottom { order:3; margin-top:25px; grid-template-columns:1fr auto; gap:23px; }
  .hero-baseline { order:4; display:flex; flex-wrap:wrap; gap:10px 22px; padding:20px 0; font-size:12px; }
  .hero-baseline>span { font-size:12px; }
  .hero-baseline>span:last-child { margin-left:auto; }
  .section-heading>.eyebrow,.about-top>.eyebrow,.toolkit-label>.eyebrow,.personal-details .eyebrow { font-size:12px; }
  .project-topline { font-size:10px; gap:20px; }
  .monetor-visual-copy .mono { font-size:12px; max-width:160px; }
  .monetor-visual { min-height:570px; }
  .monetor-phone { width:230px; max-width:70%; top:205px; right:-1%; }
  .project-open>.mono { font-size:12px; }
  .project-caption>.mono { font-size:12px; }
  .career-date,.current-word { font-size:12px; }
  .company small { font-size:12px; display:block; margin:3px 0 0; }
  .career-role { line-height:1.6; margin-top:0; }
  .p2p-diagram { margin-top:32px; padding:0; max-width:560px; }
  .p2p-diagram .network-node text { font-size:21px; }
  .skill-number { font-size:12px; }
  .skill-groups { gap:30px 22px; }
  .skill-groups p { font-size:12px; }
  .personal-details p .mono { font-size:12px; }
  .contact-top { font-size:12px; gap:20px; }
  .contact-top span:last-child { max-width:160px; }
  .copy-email,.footer { font-size:12px; }
  .social-links { gap:12px 25px; font-size:14px; }
  .dialog-bar>.mono,.dialog-body>.eyebrow,.dialog-footer>.mono { font-size:12px; }
}
@media(max-width:370px) {
  .site-header { gap:10px; }
  .site-header nav { gap:11px; }
  .contact-link { font-size:11px; }
  .hero-eyebrow { font-size:12px; }
  .hero-baseline { display:grid; grid-template-columns:1fr; }
  .hero-baseline>span:last-child { margin-left:0; }
  .hero-current>p { font-size:14px; }
  .skill-groups { grid-template-columns:1fr; }
  .project-topline { font-size:11px; }
  .project-topline span:last-child { max-width:80px; text-align:right; }
  .monetor-wordmark { top:78px; }
  .monetor-visual-copy { top:135px; }
  .monetor-phone { top:205px; right:-1%; }
  .footer { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .network-edge,.node-ring { transition:none; }
  .monetor-visual:hover .monetor-phone { transform:none; }
}
