@charset "UTF-8";
:root{--paper:#f5f3ed;--ink:#252820;--muted:#65695e;--line:#d4d6c9;--olive:#4f5b39;--pale:#e8ebdf;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;--mono:'Courier New',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{color:var(--olive)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--olive);outline-offset:6px}
::selection{background:#d4dcc0}
.wrap{width:min(1200px,calc(100% - 100px));margin-inline:auto}
.site-header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark{font-size:33px;font-weight:700;letter-spacing:-3px;text-decoration:none}
.wordmark span{color:var(--olive)}
nav{display:flex;gap:33px;font-size:13px}
nav a{text-decoration:none}
nav a:last-of-type{margin-left:24px}
nav a:hover{text-decoration:underline}
.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-150%);background:var(--ink);color:var(--paper);padding:12px;z-index:10}
.skip-link:focus{transform:none}
.eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1.3px;line-height:1.6}
.hero{padding-top:44px;padding-bottom:105px}
.hero-meta{display:flex;justify-content:space-between}
.small-star{display:inline-block;font-size:19px;vertical-align:middle;margin-left:12px;color:var(--olive)}
h1{font-size:clamp(100px,13.8vw,190px);font-weight:500;letter-spacing:-.082em;line-height:.9;margin:55px 0 47px}
.surname{font-family:var(--serif);font-style:italic;letter-spacing:-.07em;font-weight:400;margin-left:25%}
.name-period{color:var(--olive)}
.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;border-top:1px solid var(--line);padding-top:32px}
.hero-statement{font-size:31px;letter-spacing:-1px;line-height:1.3;margin:0}
.hero-statement em{font-family:var(--serif);font-weight:400}
.hero-intro>p{font-size:17px;line-height:1.65;margin:0 0 13px;max-width:455px}
.hero-intro .current{font-size:13px;color:var(--muted);line-height:1.7}
.current a{text-decoration-color:#a6ad99}
.hero-links{display:flex;gap:32px;margin-top:23px}
.text-link{display:inline-flex;gap:14px;align-items:center;text-decoration:none;font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:8px}
.file-type{font-family:var(--mono);font-size:9px;color:var(--muted);margin-left:-7px}
.section-heading{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:start;border-top:1px solid var(--ink);padding-top:24px;margin-bottom:47px;gap:20px}
.section-heading h2{font-size:32px;letter-spacing:-1.2px;font-weight:400;line-height:1.15;margin:0}
.section-heading>p{font-size:13px;line-height:1.6;margin:0;color:var(--muted);justify-self:end}
.featured-project{display:grid;grid-template-columns:1fr 1fr;gap:75px;margin-bottom:57px}
.project-copy{padding:25px 0 0}
.project-copy h3{font-size:48px;letter-spacing:-1.7px;font-weight:400;line-height:1.06;margin:20px 0}
.project-copy h3 em{font-family:var(--serif);font-weight:400}
.project-copy p{font-size:14px;line-height:1.75;color:var(--muted);max-width:430px}
.project-copy .project-lede{font-size:17px;color:var(--ink);line-height:1.5}
details{border-top:1px solid var(--line);max-width:480px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:15px;padding:17px 0;font-size:12px}
summary::-webkit-details-marker{display:none}
summary>span{font-size:18px;line-height:15px;transition:transform .15s}
details[open] summary>span{transform:rotate(45deg)}
.detail-content{padding-bottom:12px}
.detail-content p{font-size:13px;line-height:1.75;margin:0 0 13px;color:var(--muted)}
.detail-content .tech-line{font-family:var(--mono);font-size:10px;line-height:1.8;color:var(--olive)}
.project-row{display:grid;grid-template-columns:45px 1fr 165px;gap:25px;border-top:1px solid var(--line);padding:32px 0}
.project-index{font-family:var(--mono);font-size:11px;padding-top:3px;color:var(--muted)}
.project-row h3{font-size:29px;font-weight:400;letter-spacing:-1px;margin:10px 0 12px}
.project-row-main>p{font-size:14px;line-height:1.75;max-width:580px;color:var(--muted);margin:0 0 20px}
.project-row details{max-width:580px}
.project-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-end;padding-top:33px;font-size:12px}
.project-actions a{text-decoration:none;white-space:nowrap}
.project-actions a:hover{text-decoration:underline}
.project-actions span{margin-left:10px}
.experience-section,.work-section{padding-top:90px}
.timeline{margin-top:-7px}
.experience-row{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:20px;border-top:1px solid var(--line);padding:27px 0}
.date{font-family:var(--mono);font-size:10px;line-height:1.8;color:var(--muted);margin:0}
.experience-row h3{font-size:18px;font-weight:400;letter-spacing:-.35px;margin:0 0 9px}
.role{font-size:12px;color:var(--muted);margin:0}
.experience-description{font-size:13px;line-height:1.75;color:var(--muted);margin:0}
.about-section{margin-top:104px;padding:40px 0 100px;border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:75px}
.about-heading h2{font-size:60px;letter-spacing:-2.5px;line-height:1.08;font-weight:400;margin:36px 0}
.about-heading em{font-family:var(--serif);font-weight:400}
.about-star{color:var(--olive);font-size:65px;display:inline-block;margin-top:12px}
.about-copy{padding-top:50px}
.about-copy>p{font-size:14px;line-height:1.8;color:var(--muted)}
.about-copy .about-lede{font-size:22px;line-height:1.45;letter-spacing:-.5px;color:var(--ink);margin-top:0}
.education{margin-top:32px;padding-top:25px;border-top:1px solid var(--line)}
.education>div{margin-top:23px}
.education h3{font-size:14px;font-weight:400;margin:0 0 7px}
.education p{font-size:12px;line-height:1.6;color:var(--muted);margin:0;display:flex;justify-content:space-between;gap:10px}
.education p span{font-family:var(--mono);font-size:10px}
.toolkit{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.toolkit p{font-size:12px;color:var(--muted);line-height:1.8;max-width:430px}
.contact-section{background:var(--ink);color:var(--paper);padding-top:35px}
.contact-top{display:flex;justify-content:space-between;color:#c4c9b6}
.contact-section h2{font-weight:400;font-size:92px;letter-spacing:-4px;line-height:1.02;margin:57px 0 30px}
.contact-section h2 em{font-family:var(--serif);font-weight:400;color:#c7d1ac}
.email-link{font-size:22px;text-decoration:none;display:inline-flex;gap:35px;border-bottom:1px solid #838b75;padding-bottom:12px;max-width:100%;overflow-wrap:anywhere}
.contact-section a:hover{color:#c7d1ac}
.contact-section a:focus-visible{outline-color:#c7d1ac}
footer{display:flex;justify-content:space-between;gap:25px;border-top:1px solid #4c5144;margin-top:80px;padding:26px 0;color:#c4c9b6;font-size:11px}
footer p{margin:0}
footer div{display:flex;gap:26px}
footer a{text-decoration:none}

@media(min-width:1500px){h1{font-size:190px}
}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}
.featured-project,.about-section{gap:40px}
.section-heading,.experience-row{grid-template-columns:.8fr 1.2fr 1fr}
.project-copy h3{font-size:40px}
.hero-bottom{gap:40px}
.about-heading h2{font-size:53px}
.section-heading h2{font-size:29px}
.contact-section h2{font-size:80px}
}

@media(max-width:700px){.wrap{width:calc(100% - 40px)}
.site-header{height:80px}
nav{gap:18px;font-size:11px}
nav a:last-of-type{margin-left:0}
nav a:nth-child(2){display:none}
.wordmark{font-size:29px}
.hero{padding-top:28px;padding-bottom:65px}
.eyebrow{font-size:9px;letter-spacing:1px}
.hero-meta{font-size:9px}
.small-star{font-size:16px;margin-left:6px}
h1{font-size:clamp(80px,20.5vw,143px);margin:40px 0 33px}
.surname{margin-left:19%}
.hero-bottom{grid-template-columns:1fr;gap:23px;padding-top:24px}
.hero-statement{font-size:28px}
.hero-intro>p{font-size:15px}
.hero-intro .current{font-size:12px}
.hero-links{margin-top:22px}
.section-heading{grid-template-columns:1fr;gap:17px;margin-bottom:30px;padding-top:19px}
.section-heading h2{font-size:31px}
.section-heading>p{justify-self:start;font-size:12px}
.section-heading>p br{display:none}
.featured-project{grid-template-columns:1fr;gap:28px;margin-bottom:35px}
.project-copy{padding-top:5px}
.project-copy h3{font-size:43px}
.project-copy p{max-width:none}
.project-row{grid-template-columns:25px 1fr;gap:12px;padding:26px 0}
.project-row h3{font-size:26px}
.project-row-main>p{font-size:13px}
.project-actions{grid-column:2;flex-direction:row;align-items:flex-start;padding-top:0;font-size:11px;gap:22px;flex-wrap:wrap}
.experience-section,.work-section{padding-top:60px}
.experience-row{grid-template-columns:1fr;gap:10px;padding:24px 0}
.experience-description{max-width:520px;margin-top:4px}
.experience-row h3{font-size:19px}
.about-section{margin-top:65px;padding:27px 0 65px;grid-template-columns:1fr;gap:10px}
.about-heading{position:relative}
.about-heading h2{font-size:49px;margin:24px 0}
.about-star{position:absolute;right:20px;bottom:22px;font-size:57px}
.about-copy{padding-top:9px}
.about-copy .about-lede{font-size:21px}
.contact-section{padding-top:26px}
.contact-top{gap:18px}
.contact-top .eyebrow:last-child{max-width:130px;text-align:right}
.contact-section h2{font-size:64px;letter-spacing:-3px;margin:45px 0 29px}
.email-link{font-size:18px;gap:16px}
footer{margin-top:58px;flex-direction:column;gap:20px;padding:25px 0}
footer div{gap:22px;flex-wrap:wrap}
details{max-width:none}
}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}
nav{gap:13px}
.hero-meta{letter-spacing:.5px}
.small-star{display:none}
.contact-section h2{font-size:56px}
.email-link{font-size:16px;gap:10px}
.education p{flex-direction:column;gap:3px}
.about-star{right:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}

/* Keep long editorial headings inside the smallest phone layouts. */
.featured-project > *, .hero-bottom > *, .about-section > * { min-width: 0; }

@media (max-width: 360px) { .project-copy h3 { font-size: 37px; }
 }

/* Backend ownership */
.featured-project { grid-template-columns: 1.05fr 1fr; margin-bottom: 36px; }

.project-copy { padding-top: 12px; }

.project-copy h3 { font-size: clamp(34px,3.6vw,46px); }

.project-copy p { max-width: 490px; }

.project-copy .tech-line, .project-row-main > .tech-line, .experience-description .tech-line { font-family: var(--mono); font-size: 11px; color: var(--olive); line-height: 1.9; }

.ownership-notes { padding-top: 12px; }

.ownership-notes > div { padding: 20px 0; border-top: 1px solid var(--line); }

.ownership-notes > div:first-child { padding-top: 0; border-top: 0; }

.ownership-notes p { font-size: 14px; color: var(--muted); line-height: 1.8; margin: 10px 0 0; max-width: 450px; }

.impact-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 28px 0 20px; }

.impact-strip > div + div { border-left: 1px solid var(--line); padding-left: 30px; }

.impact-strip strong { font-family: var(--serif); font-weight: 400; font-size: 53px; letter-spacing: -2px; }

.impact-strip p { font-size: 12px; color: var(--muted); line-height: 1.7; }

.metric-note { font-size: 10px; color: var(--muted); font-family: var(--mono); margin: 12px 0 0; line-height: 1.7; }

.projects-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; margin: 78px 0 25px; }

.projects-heading h2 { font-size: 29px; font-weight: 400; letter-spacing: -1px; margin: 0; }

.projects-heading p { font-size: 12px; color: var(--muted); line-height: 1.7; }

.project-archive { max-width: none; border-bottom: 1px solid var(--line); }

.project-archive > summary { font-size: 14px; padding: 25px 0; align-items: center; }

.archive-hint { font-size: 11px; color: var(--muted); margin-left: auto; padding-right: 20px; }

.project-archive[open] > summary > .archive-hint { transform: none; }

.archive-item { display: grid; grid-template-columns: 30px 1fr 60px; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }

.archive-item h3 { font-size: 17px; font-weight: 400; margin: 0 0 7px; }

.archive-item p { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0; }

.archive-item a { font-size: 12px; text-align: right; align-self: start; text-decoration: none; }

.archive-item a:hover { text-decoration: underline; }

.experience-row { grid-template-columns: .75fr 1.05fr 1.5fr; }

.experience-description p { margin: 0 0 12px; }

.experience-description p:last-child { margin-bottom: 0; }

.experience-description strong { font-weight: 500; color: var(--ink); }

.about-heading h2 { font-size: clamp(40px,4.6vw,59px); }

.education .gpa { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; }

.course-list { list-style: none; padding: 0; margin: 17px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }

.course-list li { font-size: 12px; line-height: 1.6; color: var(--muted); }

.course-list li::before { content: '·'; color: var(--olive); margin-right: 6px; }

.tools-section { padding-bottom: 95px; }

.primary-tools, .secondary-tools, .other-tools { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; }

.primary-tools { gap: 14px 35px; padding: 0 0 42px; max-width: 1100px; }

.primary-tools li { font-size: clamp(27px,3vw,39px); letter-spacing: -1px; color: var(--ink); }

.tool-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 70px; }

.tool-group { border-top: 1px solid var(--line); padding-top: 21px; min-width: 0; }

.tool-group h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; margin: 0 0 20px; color: var(--olive); }

.secondary-tools { gap: 10px 20px; margin-bottom: 18px; }

.secondary-tools li { font-size: 20px; letter-spacing: -.4px; line-height: 1.4; }

.other-tools { gap: 8px 17px; }

.other-tools li { font-size: 13px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1000px) { .featured-project { gap: 40px; }
 .experience-row { grid-template-columns: .7fr 1fr 1.5fr; }
 }

@media (max-width: 700px) {
  .featured-project { grid-template-columns: minmax(0,1fr); gap: 22px; }

  .project-copy h3 { font-size: 36px; }

  .project-copy .project-lede { font-size: 17px; }

  .ownership-notes p { max-width: none; font-size: 13px; }

  .impact-strip { gap: 16px; padding: 24px 0 20px; }

  .impact-strip > div + div { padding-left: 15px; }

  .impact-strip strong { font-size: 36px; letter-spacing: -1.4px; }

  .impact-strip p { font-size: 10px; }

  .impact-strip br { display: none; }

  .projects-heading { flex-direction: column; gap: 10px; margin-top: 55px; }

  .projects-heading p { margin: 0; }

  .archive-hint { display: none; }

  .archive-item { grid-template-columns: 22px 1fr 48px; gap: 10px; }

  .archive-item h3 { font-size: 16px; }

  .archive-item p { font-size: 12px; }

  .archive-item a { font-size: 11px; }

  .experience-row { grid-template-columns: minmax(0,1fr); }

  .about-heading h2 { font-size: 43px; }

  .about-star { right: 0; bottom: 18px; font-size: 42px; }

  .tool-groups { grid-template-columns: minmax(0,1fr); gap: 30px; }

  .primary-tools { gap: 13px 24px; padding-bottom: 32px; }

  .primary-tools li { font-size: 29px; }

  .secondary-tools li { font-size: 19px; }

  .tools-section { padding-bottom: 65px; }

}

@media (max-width: 360px) {
  .project-copy h3 { font-size: 31px; }

  .hero-statement { font-size: 26px; }

  .impact-strip { gap: 10px; }

  .impact-strip > div + div { padding-left: 10px; }

  .impact-strip strong { font-size: 30px; }

  .about-heading h2 { font-size: 37px; }

  .about-star { font-size: 34px; }

  .primary-tools li { font-size: 26px; }

  .email-link { font-size: 15px; gap: 8px; }

}

/* Project and experience metrics */
.project-metrics { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 14px 34px; max-width: 620px; }

.project-metrics li { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.5; color: var(--muted); max-width: 170px; }

.project-metrics strong { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -1px; line-height: 1; color: var(--olive); }

.project-row-main > .tech-line { margin: 0; }

.impact-strip-three { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 4px; }

.impact-strip-three > div + div { padding-left: 24px; }

.impact-strip-three strong { font-size: 46px; }

.timeline > .metric-note { margin-bottom: 30px; }

@media (max-width: 1000px) {
  .impact-strip-three strong { font-size: 40px; }
}

@media (max-width: 700px) {
  .project-metrics { gap: 12px 22px; }

  .project-metrics strong { font-size: 24px; }

  .impact-strip-three { grid-template-columns: minmax(0,1fr); gap: 0; }

  .impact-strip-three > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }

  .impact-strip-three strong { font-size: 38px; }
}

/* Portrait beside the name */
.hero-name { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 40px; margin: 55px 0 47px; }

.hero-name h1 { margin: 0; }

.hero-photo { display: block; width: clamp(180px,19vw,270px); height: auto; aspect-ratio: 560 / 698; object-fit: cover; filter: grayscale(.15) contrast(1.02); }

@media (max-width: 700px) {
  .hero-name { grid-template-columns: minmax(0,1fr); gap: 28px; margin: 32px 0 33px; }

  .hero-photo { order: -1; width: 150px; }
}

/* Dark theme: follows the system unless the visitor picks one */
:root { --warn: #b4532a; --warn-pale: #f6e6dc; --contact-bg: var(--ink); --contact-fg: var(--paper); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #15170f; --ink: #e9e8df; --muted: #a3a796; --line: #34372c; --olive: #b4c48c; --pale: #22251b; --warn: #e08a5f; --warn-pale: #3a2418; --contact-bg: #0b0c07; --contact-fg: #e9e8df; color-scheme: dark; }
  :root:not([data-theme="light"]) ::selection { background: #4f5b39; }
}

:root[data-theme="dark"] { --paper: #15170f; --ink: #e9e8df; --muted: #a3a796; --line: #34372c; --olive: #b4c48c; --pale: #22251b; --warn: #e08a5f; --warn-pale: #3a2418; --contact-bg: #0b0c07; --contact-fg: #e9e8df; color-scheme: dark; }

:root[data-theme="dark"] ::selection { background: #4f5b39; }

.contact-section { background: var(--contact-bg); color: var(--contact-fg); }

.skip-link { background: var(--contact-bg); color: var(--contact-fg); }

body { transition: background-color .25s ease, color .25s ease; }

.theme-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }

.theme-toggle[hidden] { display: none; }

.theme-toggle:hover { border-color: var(--olive); color: var(--olive); }

.theme-toggle:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.theme-toggle svg path { fill: currentColor; stroke: none; }

nav { align-items: center; }

/* Contact: copy fallback and status badge */
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

.copy-email { font: inherit; font-size: 12px; color: inherit; background: transparent; border: 1px solid #838b75; border-radius: 999px; padding: 8px 16px; cursor: pointer; }

.copy-email[hidden] { display: none; }

.copy-email:hover { color: #c7d1ac; border-color: #c7d1ac; }

.copy-email:focus-visible { outline: 2px solid #c7d1ac; outline-offset: 3px; }

.copy-status { font-family: var(--mono); font-size: 11px; color: #c7d1ac; }

.status-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }

.status-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #8fd18a; }

.status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #8fd18a; animation: status-ping 2.4s ease-out infinite; }

@keyframes status-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

/* Work scenes: small line drawings beside each role and project */
.row-aside { min-width: 0; }

.scene { width: 100%; max-width: 190px; margin-top: 22px; }

.scene svg, .scene canvas { display: block; width: 100%; height: auto; overflow: hidden; }

.scene canvas { aspect-ratio: 200 / 120; }

.project-row > .scene { margin: 0; }

/* Desktop: the scene gets its own column between the text and the links. */
@media (min-width: 1001px) {
  .project-row.has-scene { grid-template-columns: 45px minmax(0,580px) minmax(160px,1fr) 165px; }

  .project-row.has-scene > .scene { grid-column: 3; grid-row: 1; justify-self: center; align-self: center; max-width: 200px; }

  .project-row.has-scene > .project-actions { grid-column: 4; grid-row: 1; }
}

/* Tablet: no room for a fourth column, so the scene sits under the links. */
@media (min-width: 701px) and (max-width: 1000px) {
  .project-row.has-scene > .project-index { grid-column: 1; grid-row: 1; }

  .project-row.has-scene > .project-row-main { grid-column: 2; grid-row: 1 / span 2; }

  .project-row.has-scene > .project-actions { grid-column: 3; grid-row: 1; }

  .project-row.has-scene > .scene { grid-column: 3; grid-row: 2; justify-self: end; max-width: 165px; }
}

.scene.is-paused * { animation-play-state: paused !important; }

.s-ln { fill: none; stroke: var(--olive); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.s-mu { fill: none; stroke: var(--muted); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .65; vector-effect: non-scaling-stroke; }

.s-fill { fill: var(--pale); }

.s-acc { fill: var(--olive); stroke: none; }

.s-ink { fill: var(--ink); stroke: none; }

.s-strong { stroke-width: 2; }

.s-dash { stroke-dasharray: 3 4; }

.s-dot { stroke-dasharray: 1 4; }

.s-label { font-family: var(--mono); font-size: 7px; letter-spacing: .6px; fill: var(--muted); }

.s-text { font-family: var(--serif); font-style: italic; font-size: 9.5px; fill: var(--ink); }

.s-stars circle { fill: var(--muted); opacity: .55; }

/* Scorealytics: documents queue up, the risk needle settles on each */
.sc-doc { animation: sc-doc 4.5s linear infinite; opacity: 0; }

.sc-d2 { animation-delay: -1.5s; }

.sc-d3 { animation-delay: -3s; }

@keyframes sc-doc { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 78% { transform: translateX(84px); opacity: 1; } 92%, 100% { transform: translateX(94px); opacity: 0; } }

.sc-needle { transform-box: view-box; transform-origin: 166px 92px; animation: sc-needle 4.5s cubic-bezier(.3,1.4,.5,1) infinite; }

@keyframes sc-needle { 0%, 8% { transform: rotate(-62deg); } 20%, 33% { transform: rotate(38deg); } 45%, 66% { transform: rotate(-18deg); } 78%, 100% { transform: rotate(58deg); } }

/* ISRO: rover on the Moon, zoom out to the orbiter, then to Earth, then fly back in.
   The wide shot is written around the rover so the zoom back in stays locked on it. */
.is-cam { animation: is-cam 15s ease-in-out infinite; }

@keyframes is-cam {
  0%, 22% { transform: translate(100px,64px) scale(24) translate(-150px,-34.4px); }
  36%, 56% { transform: translate(100px,60px) scale(3.1) translate(-150px,-44px); }
  70%, 90% { transform: translate(150px,34.4px) scale(1) translate(-150px,-34.4px); }
  100% { transform: translate(100px,64px) scale(24) translate(-150px,-34.4px); }
}

.is-sat { transform-box: view-box; transform-origin: 150px 44px; animation: spin 7s linear infinite; }

.is-rover { animation: is-rover 5s ease-in-out infinite alternate; }

@keyframes is-rover { from { transform: translateX(-.7px); } to { transform: translateX(.7px); } }

@keyframes spin { to { transform: rotate(360deg); } }

/* Mastercard: tap, contactless pulse, approved */
.mc-card { transform-box: fill-box; transform-origin: center; animation: mc-card 4s ease-in-out infinite; }

@keyframes mc-card { 0%, 10% { transform: translate(0,0) rotate(0); } 35%, 62% { transform: translate(34px,-2px) rotate(-7deg); } 85%, 100% { transform: translate(0,0) rotate(0); } }

.mc-wave { opacity: 0; animation: mc-wave 4s ease-out infinite; }

.mc-w2 { animation-delay: .12s; }

.mc-w3 { animation-delay: .24s; }

@keyframes mc-wave { 0%, 34% { opacity: 0; } 40% { opacity: 1; } 52% { opacity: .15; } 56% { opacity: .9; } 64%, 100% { opacity: 0; } }

.mc-check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mc-check 4s ease infinite; }

@keyframes mc-check { 0%, 44% { stroke-dashoffset: 1; opacity: 1; } 54%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Simulas: windows light up as webhooks ping the agent */
.sim-win { fill: var(--pale); stroke: var(--olive); stroke-width: .8; vector-effect: non-scaling-stroke; animation: sim-lit 6s ease-in-out infinite; }

@keyframes sim-lit { 0%, 100% { fill: var(--pale); } 6%, 22% { fill: var(--olive); } 30% { fill: var(--pale); } }

.sim-w2 { animation-delay: -1.1s; } .sim-w4 { animation-delay: -2.3s; } .sim-w6 { animation-delay: -3.4s; } .sim-w7 { animation-delay: -4.6s; } .sim-w9 { animation-delay: -.6s; } .sim-w11 { animation-delay: -2.9s; } .sim-w12 { animation-delay: -5.2s; }

.sim-w1, .sim-w3, .sim-w5, .sim-w8, .sim-w10 { animation-duration: 9s; animation-delay: -4s; }

.sim-ping { opacity: 0; animation: sim-out 3s ease-in-out infinite; }

.sim-p2 { animation-name: sim-back; }

@keyframes sim-out { 0% { transform: translate(84px,60px); opacity: 0; } 5% { opacity: 1; } 25% { transform: translate(105px,45px); } 45% { transform: translate(130px,44px); opacity: 1; } 52%, 100% { transform: translate(148px,54px); opacity: 0; } }

@keyframes sim-back { 0%, 50% { transform: translate(148px,54px); opacity: 0; } 55% { opacity: 1; } 75% { transform: translate(126px,43px); } 92% { transform: translate(100px,47px); opacity: 1; } 100% { transform: translate(84px,60px); opacity: 0; } }

.sim-bubble { transform-box: fill-box; transform-origin: left center; animation: sim-bubble 3s ease infinite; }

.sim-b2 { animation-name: sim-bubble-2; transform-origin: right center; }

@keyframes sim-bubble { 0%, 48% { transform: scale(0); } 56%, 100% { transform: scale(1); } }

@keyframes sim-bubble-2 { 0%, 58% { transform: scale(0); } 66%, 100% { transform: scale(1); } }

/* PantryPal: snap the ingredients, then the AI suggests dinner */
.pp-phone { transform-box: fill-box; transform-origin: center bottom; animation: pp-phone 6s ease-in-out infinite; }

@keyframes pp-phone { 0%, 100% { transform: rotate(0); } 15%, 55% { transform: rotate(4deg); } }

.pp-flash { fill: var(--paper); opacity: 0; animation: pp-flash 6s linear infinite; }

@keyframes pp-flash { 0%, 18% { opacity: 0; } 20% { opacity: .95; } 25%, 36% { opacity: 0; } 38% { opacity: .95; } 43%, 54% { opacity: 0; } 56% { opacity: .95; } 61%, 100% { opacity: 0; } }

.pp-bubble { transform-box: fill-box; transform-origin: 10% 100%; animation: pp-bubble 6s cubic-bezier(.3,1.5,.5,1) infinite; }

@keyframes pp-bubble { 0%, 64% { transform: scale(0); opacity: 0; } 72%, 94% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* PhotoPort: shutter closes, flash fires */
.pf-iris { transform-box: fill-box; transform-origin: center; animation: pf-iris 3s ease-in-out infinite; }

@keyframes pf-iris { 0%, 40% { transform: scale(1); } 50% { transform: scale(.12); } 62%, 100% { transform: scale(1); } }

.pf-blades { transform-box: view-box; transform-origin: 100px 68px; animation: pf-blades 3s ease-in-out infinite; }

@keyframes pf-blades { 0%, 40% { transform: rotate(0); } 50% { transform: rotate(45deg); } 62%, 100% { transform: rotate(0); } }

.pf-lamp { animation: pf-lamp 3s linear infinite; }

@keyframes pf-lamp { 0%, 47%, 56%, 100% { fill: transparent; } 49%, 53% { fill: var(--olive); } }

.pf-burst { opacity: 0; animation: pf-burst 3s linear infinite; }

@keyframes pf-burst { 0%, 47% { opacity: 0; } 50% { opacity: 1; } 58%, 100% { opacity: 0; } }

.pf-flash { fill: var(--paper); opacity: 0; animation: pf-flash 3s linear infinite; pointer-events: none; }

@keyframes pf-flash { 0%, 48% { opacity: 0; } 50% { opacity: .75; } 60%, 100% { opacity: 0; } }

/* Jetstream: wind flows, the balloon rides it */
.js-wind { stroke-dasharray: 6 9; animation: js-wind 2.4s linear infinite; }

.js-w2 { animation-duration: 1.8s; }

.js-w3 { animation-duration: 3s; }

@keyframes js-wind { to { stroke-dashoffset: -30; } }

.js-balloon { animation: js-balloon 9s ease-in-out infinite; }

@keyframes js-balloon { 0% { transform: translate(30px,112px); opacity: 0; } 6% { opacity: 1; } 30% { transform: translate(64px,68px); } 55% { transform: translate(108px,52px); } 80% { transform: translate(150px,34px); opacity: 1; } 96%, 100% { transform: translate(188px,16px); opacity: 0; } }

.js-wobble { animation: js-wobble 2.2s ease-in-out infinite alternate; }

@keyframes js-wobble { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* Resonate: one stream, two listeners, same beat */
.rs-bar { fill: var(--olive); transform-box: fill-box; transform-origin: center; animation: rs-bar 1.2s ease-in-out infinite; }

.rs-b2, .rs-b8 { animation-delay: -.2s; } .rs-b3, .rs-b7 { animation-delay: -.4s; } .rs-b4, .rs-b6 { animation-delay: -.6s; } .rs-b5 { animation-delay: -.8s; }

@keyframes rs-bar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.rs-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: rs-ring 1.2s ease-out infinite; }

@keyframes rs-ring { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

.rs-note { opacity: 0; animation: rs-note-l 2.4s ease-in-out infinite; }

.rs-nr { animation-name: rs-note-r; }

@keyframes rs-note-l { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-48px,10px); opacity: 0; } }

@keyframes rs-note-r { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(48px,10px); opacity: 0; } }

/* Consensus playground */
.playground { margin: 4px 0 24px; padding: 16px 18px 14px; border: 1px solid var(--line); max-width: 640px; }

.playground[hidden] { display: none; }

.pg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }

.pg-modes { display: flex; flex-wrap: wrap; gap: 6px; }

.pg-modes button { font: inherit; font-size: 11px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; }

.pg-modes button[aria-pressed="true"] { color: var(--ink); background: var(--pale); border-color: var(--olive); }

.pg-modes button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

.pg-body { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 18px; align-items: center; margin-top: 12px; }

.pg-svg { display: block; width: 100%; height: auto; overflow: visible; }

.pg-links line { stroke: var(--line); stroke-width: 1; }

.pg-client rect { fill: var(--pale); stroke: var(--muted); stroke-width: 1; }

.pg-client text, .pg-node text { font-family: var(--mono); font-size: 10px; text-anchor: middle; dominant-baseline: central; fill: var(--ink); pointer-events: none; }

.pg-node { cursor: pointer; outline: none; }

.pg-node circle { fill: var(--paper); stroke: var(--olive); stroke-width: 1.5; transition: fill .2s, stroke .2s; }

.pg-node:hover circle { stroke-width: 2.5; }

.pg-node:focus-visible circle { stroke-width: 3; stroke: var(--ink); }

.pg-node.is-leader circle { fill: var(--olive); }

.pg-node.is-leader text { fill: var(--paper); }

.pg-node .pg-tag { font-size: 8px; fill: var(--muted); letter-spacing: .4px; }

.pg-node.is-leader .pg-tag { fill: var(--olive); }

.pg-node.is-down circle { fill: var(--pale); stroke: var(--muted); stroke-dasharray: 3 3; }

.pg-node.is-down text { fill: var(--muted); }

.pg-node.is-liar circle { fill: var(--warn-pale); stroke: var(--warn); }

.pg-node.is-liar .pg-tag { fill: var(--warn); }

.pg-msg.ok { fill: var(--olive); }

.pg-msg.req { fill: var(--ink); }

.pg-msg.bad { fill: var(--warn); }

.pg-pulse { fill: none; stroke: var(--olive); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pg-pulse .8s ease-out forwards; }

@keyframes pg-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

.pg-status { font-size: 12px; line-height: 1.6; color: var(--ink); margin: 0 0 10px; }

.pg-log { list-style: none; padding: 0; margin: 0; font-family: var(--mono); font-size: 10px; line-height: 1.6; color: var(--muted); }

.pg-log li { padding: 3px 0; border-top: 1px solid var(--line); }

.pg-log li.ok { color: var(--olive); }

.pg-log li.stall { color: var(--warn); }

.pg-hint { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }

@media (max-width: 700px) {
  .scene { max-width: 220px; margin-top: 14px; }

  .project-row > .scene { grid-column: 2; max-width: 220px; margin-top: 4px; }

  .playground { padding: 14px 12px 12px; }

  .pg-body { grid-template-columns: minmax(0,1fr); }

  .theme-toggle { width: 26px; height: 26px; margin-left: 0; }

  footer { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .scene *, .status-dot::after, .pg-pulse { animation: none !important; }

  .sc-doc, .mc-wave, .rs-note, .pf-burst { opacity: 1; }

  .mc-check { stroke-dashoffset: 0; }
}

/* Count-up numbers keep their final width so nothing shifts */
.impact-strip strong { display: inline-block; font-variant-numeric: tabular-nums; }

.project-metrics strong { font-variant-numeric: tabular-nums; }

/* Keyboard shortcuts */
kbd { display: inline-block; min-width: 1.6em; padding: 1px 5px; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 4px; font-family: var(--mono); font-size: .9em; line-height: 1.3; text-align: center; opacity: .85; }

.kbd-hint { font-family: var(--mono); font-size: 10px; letter-spacing: .4px; }

.kbd-hint[hidden] { display: none; }

@media (hover: none), (max-width: 700px) { .kbd-hint { display: none; } }

.shortcuts { width: min(420px, calc(100% - 32px)); padding: 26px 28px 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.18); }

.shortcuts::backdrop { background: rgba(21,23,15,.45); }

.shortcuts-head h2 { font-size: 30px; font-weight: 400; letter-spacing: -1px; margin: 8px 0 18px; }

.shortcuts-head .eyebrow { color: var(--muted); }

.shortcuts-list { margin: 0; }

.shortcuts-list div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }

.shortcuts-list dt { white-space: nowrap; }

.shortcuts-list dd { margin: 0; font-size: 13px; color: var(--muted); }

.shortcuts form { margin: 18px 0 0; text-align: right; }

.shortcuts-close { font: inherit; font-size: 12px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; }

.shortcuts-close:hover { border-color: var(--olive); }

.shortcuts-close:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* 404 */
.not-found { padding: 70px 0 120px; }

.not-found-body { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 60px; align-items: center; margin-top: 46px; }

.not-found-title { font-size: clamp(46px,6.4vw,84px); font-weight: 400; letter-spacing: -.05em; line-height: 1.02; margin: 0 0 28px; }

.not-found-title em { font-family: var(--serif); }

.not-found-copy { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 470px; margin: 0 0 30px; }

.not-found-cluster { width: 100%; max-width: 340px; justify-self: center; overflow: visible; }

.nf-links line { stroke: var(--line); stroke-width: 1.2; }

.nf-node text { font-family: var(--mono); font-size: 11px; text-anchor: middle; dominant-baseline: central; }

.nf-vote circle { fill: var(--pale); stroke: var(--olive); stroke-width: 1.6; animation: nf-vote 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.nf-vote:nth-of-type(3) circle { animation-delay: .2s; }

.nf-vote:nth-of-type(4) circle { animation-delay: .4s; }

.nf-vote text { fill: var(--olive); }

.nf-down circle { fill: var(--paper); stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; }

.nf-down text { fill: var(--muted); }

@keyframes nf-vote { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } }

@media (max-width: 700px) {
  .not-found { padding: 44px 0 80px; }

  .not-found-body { grid-template-columns: minmax(0,1fr); gap: 36px; margin-top: 30px; }

  .not-found-cluster { max-width: 240px; }
}

@media (prefers-reduced-motion: reduce) { .nf-vote circle { animation: none; } }

/* Line icons replace arrow and star characters, which some phones draw as emoji */
.i { display: inline-block; width: .72em; height: .72em; vertical-align: -.04em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.i-star { width: 1em; height: 1em; vertical-align: -.12em; stroke-width: 1.1; }