/* Design tokens: edit these to change the visual identity. */
:root {
  color-scheme:dark;
  --bg:#101615;
  --surface:#18211e;
  --surface-soft:#141c19;
  --text:#edf0e9;
  --muted:#a0aea6;
  --accent:#afe5ce;
  --line:#303d36;
  --dim:#7c8e83;
  --radius:6px;
  --max:1240px;
  --font:Arial,Helvetica,sans-serif;
  --mono:'Cascadia Code',Consolas,monospace
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 var(--font);
  -webkit-font-smoothing:antialiased
}

body.dialog-open {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  border:0
}

img,svg {
  max-width:100%
}

h1,h2,h3,h4,p {
  margin:0
}

h1,h2,h3,h4 {
  line-height:1.15;
  font-weight:500
}

ul,ol {
  padding:0;
  margin:0;
  list-style:none
}

a,button {
  touch-action:manipulation
}

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

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px;
  border-radius:3px
}

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

.skip-link {
  position:fixed;
  left:20px;
  top:-80px;
  z-index:100;
  padding:10px 20px;
  color:var(--bg);
  background:var(--accent)
}

.skip-link:focus {
  top:12px
}

.section-wrap {
  max-width:calc(var(--max) + 112px);
  margin-inline:auto;
  padding-inline:56px
}

.section-space {
  padding-top:110px;
  padding-bottom:110px;
  border-top:1px solid var(--line)
}

.eyebrow,.section-label {
  font:11px/1.5 var(--mono);
  letter-spacing:.1em
}

.eyebrow {
  color:var(--muted)
}

.section-label {
  color:var(--accent);
  display:flex;
  gap:18px;
  margin-bottom:45px
}

.section-label>span {
  color:var(--dim)
}

.muted {
  color:var(--muted)
}

h2 {
  font-size:clamp(32px,3.3vw,46px);
  letter-spacing:-1.8px;
  line-height:1.16
}

.status-dot {
  display:inline-block;
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent)
}

/* Navigation */
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(16,22,21,.93);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(72,91,80,.25)
}

.nav-wrap {
  height:89px;
  max-width:calc(var(--max) + 112px);
  padding:0 56px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:13px;
  font-weight:500;
  white-space:nowrap
}

.monogram {
  font-size:27px;
  letter-spacing:-2px;
  font-weight:700
}

.monogram>span {
  color:var(--accent)
}

.brand-name {
  color:#bdc6bf
}

nav {
  display:flex;
  align-items:center;
  gap:31px;
  font-size:13px;
  color:#c0cac3
}

nav a {
  position:relative;
  transition:color .2s
}

nav a:hover,nav a[aria-current] {
  color:var(--accent)
}

nav a[aria-current]:not(.nav-contact):after {
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  width:15px;
  height:2px;
  background:var(--accent)
}

.nav-contact {
  border:1px solid #56665b;
  border-radius:3px;
  padding:9px 16px;
  display:inline-flex;
  align-items:center;
  gap:25px;
  margin-left:8px
}

.nav-contact svg {
  width:13px;
  height:13px
}

.menu-toggle {
  display:none;
  background:none;
  width:44px;
  height:44px;
  padding:11px
}

.menu-toggle span {
  display:block;
  height:1px;
  background:var(--text);
  margin:6px 0;
  transition:transform .2s
}

/* Hero */
.hero {
  padding-top:75px
}

.hero-main {
  display:grid;
  grid-template-columns:1.18fr 1fr;
  align-items:center;
  gap:25px;
  min-height:590px
}

.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  letter-spacing:.13em;
  margin-bottom:30px
}

.hero h1 {
  font-size:clamp(58px,6.1vw,83px);
  font-weight:500;
  letter-spacing:-4.6px;
  line-height:1.025;
  position:relative;
  z-index:1
}

.hero h1>span {
  color:var(--accent)
}

.hero-name {
  margin-top:28px;
  font-size:18px;
  letter-spacing:-.3px
}

.hero-role {
  font-size:11px;
  color:#b2beb5;
  margin-top:3px
}

.hero-intro {
  max-width:460px;
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  margin-top:20px
}

.hero-actions {
  display:flex;
  gap:12px;
  margin-top:30px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  font-size:13px;
  border-radius:3px;
  padding:12px 18px;
  min-height:48px;
  transition:background .2s,transform .2s,border-color .2s
}

.button svg {
  width:17px;
  height:17px
}

.button:hover {
  transform:translateY(-2px)
}

.primary {
  background:var(--accent);
  color:#14271d;
  border:1px solid var(--accent)
}

.primary:hover {
  background:#c5f3df;
  border-color:#c5f3df
}

.secondary {
  border:1px solid #445449;
  background:transparent
}

.secondary:hover {
  background:#1b2921;
  border-color:#708d7b
}

.hero-bottom {
  margin-top:55px;
  padding:26px 0;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  border-top:1px solid var(--line)
}

.hero-bottom a {
  display:flex;
  gap:24px
}

.hero-bottom a span {
  color:var(--accent)
}

.system-visual {
  position:relative;
  aspect-ratio:1;
  max-width:530px;
  width:100%;
  margin-top:15px
}

.system-grid {
  position:absolute;
  inset:14% 7%;
  opacity:.17;
  background-image:linear-gradient(#567565 1px,transparent 1px),linear-gradient(90deg,#567565 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse,#000 15%,transparent 70%)
}

.system-label {
  position:absolute;
  top:3%;
  left:50%;
  transform:translateX(-50%);
  font:9px var(--mono);
  letter-spacing:.14em;
  white-space:nowrap;
  color:#8da596
}

.orbit-art {
  width:100%;
  height:100%;
  overflow:visible
}

.orbits {
  opacity:.45;
  stroke-width:.7
}

.orbit-pulse {
  animation:breathe 6s ease-in-out infinite;
  transform-origin:center
}

.orbit-tag {
  position:absolute;
  background:#1a2720;
  border:1px solid #435b4d;
  padding:7px 13px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:4px;
  box-shadow:0 8px 24px #0a110d77
}

.orbit-tag i {
  width:5px;
  height:5px;
  border:1px solid #b3d0bd;
  border-radius:50%
}

.tag-operations {
  left:4%;
  top:29%;
  transform:rotate(-6deg)
}

.tag-data {
  right:4%;
  top:38%;
  transform:rotate(6deg);
  color:var(--accent)
}

.tag-decisions {
  left:36%;
  bottom:12%;
  transform:rotate(-3deg);
  background:#223b2d
}

.system-footer {
  display:flex;
  position:absolute;
  bottom:0;
  left:15%;
  right:15%;
  justify-content:space-between;
  color:#8da596;
  font:8px var(--mono);
  letter-spacing:.1em
}

@keyframes breathe {
  0%,100% {
    opacity:.25;
    transform:scale(.98)
  }
  50% {
    opacity:.8;
    transform:scale(1.07)
  }
}

/* About */
.about-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px
}

.about-prose {
  margin-top:32px;
  color:var(--muted);
  max-width:560px;
  font-size:15px
}

.about-prose p+p {
  margin-top:20px
}

.education {
  margin-top:35px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  gap:17px;
  align-items:start
}

.education-mark {
  color:var(--accent);
  font-size:24px;
  line-height:1
}

.education h3 {
  font-size:14px
}

.education p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin-top:8px
}

.principles {
  padding-top:4px
}

.principle {
  display:flex;
  gap:24px;
  padding:25px 0;
  border-bottom:1px solid var(--line)
}

.principle:first-child {
  padding-top:0
}

.principle>span {
  font:10px/2 var(--mono);
  color:var(--dim)
}

.principle h3 {
  font-size:18px;
  letter-spacing:-.4px
}

.principle p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin-top:12px
}

/* Projects */
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:42px
}

.section-heading>p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  max-width:340px
}

.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}

.project-card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface-soft);
  transition:border-color .25s
}

.project-card:hover {
  border-color:#617b6c
}

.project-card.featured {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.2fr 1fr
}

.project-art {
  background:#1a2921;
  overflow:hidden;
  position:relative;
  min-width:0;
  display:grid;
  align-items:center
}

.project-copy {
  padding:34px
}

.project-copy h3 {
  font-size:27px;
  letter-spacing:-.9px;
  max-width:360px;
  margin-top:16px
}

.project-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  margin-top:17px
}

.project-copy .eyebrow {
  font-size:9px;
  color:#a3c3af;
  letter-spacing:.09em
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px
}

.tags li {
  padding:3px 8px;
  border:1px solid #3b4c41;
  border-radius:3px;
  color:#b0c1b5;
  font-size:10px;
  line-height:1.8
}

.text-link {
  display:inline-flex;
  gap:24px;
  align-items:center;
  color:var(--accent);
  font-size:13px;
  background:none;
  padding:10px 0;
  min-height:44px
}

.text-link svg {
  width:19px;
  height:19px;
  transition:transform .2s
}

.text-link:hover svg {
  transform:translateX(4px)
}

.project-copy .text-link {
  margin-top:25px
}

.featured .project-copy {
  padding:40px;
  display:flex;
  flex-direction:column;
  align-items:start
}

.featured .text-link {
  margin-top:auto;
  padding-top:27px
}

.work-note {
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--muted);
  font-size:11px
}

.work-note .status-dot {
  background:var(--dim);
  width:4px;
  height:4px
}

.control-visual {
  margin:32px;
  transform:rotate(-3deg);
  background:#101b15;
  border:1px solid #405546;
  border-radius:6px;
  padding:22px;
  box-shadow:0 22px 60px #07100c66;
  font:10px var(--mono)
}

.mock-head {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  color:#8ca995;
  letter-spacing:.06em;
  padding-bottom:19px;
  border-bottom:1px solid #304237;
  gap:10px
}

.mock-head span:first-child {
  display:flex;
  align-items:center;
  gap:7px
}

.mock-head i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#acd9b7
}

.mock-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:22px 0 18px
}

.mock-stats>div {
  border:1px solid #2f4236;
  padding:15px 12px;
  overflow:hidden;
  border-radius:4px
}

.mock-stats small {
  font:8px var(--font);
  color:#98b3a1
}

.mock-stats strong {
  display:block;
  font:17px var(--font);
  color:#cfdece;
  margin:8px 0
}

.mock-stats strong span {
  float:right;
  color:#a9d3b6;
  font-size:14px
}

.micro-bars {
  height:48px;
  display:flex;
  align-items:end;
  gap:5px
}

.micro-bars i {
  width:100%;
  height:var(--h);
  background:#638e6d;
  border-top:1px solid #b8dfb9
}

.micro-bars i:nth-child(3n) {
  background:#b1d2a3
}

.sparkline {
  height:48px;
  display:flex;
  align-items:end
}

.sparkline svg {
  stroke:#a0d3b1;
  stroke-width:1.5;
  fill:none;
  width:100%
}

.mock-table>div {
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr;
  gap:8px;
  align-items:center;
  border-top:1px solid #2f4236;
  padding:13px 0;
  font-size:8px;
  color:#9bb3a2
}

.mock-table>div:first-child {
  font-size:7px;
  color:#9aafa0;
  padding:9px 0
}

.mock-table>div span:first-child {
  display:flex;
  align-items:center;
  gap:6px
}

.mock-table>div span:last-child {
  text-align:right
}

.signal {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#cbb98d
}

.signal.green {
  background:#8db59b
}

.pill {
  border:1px solid #5b5942;
  color:#d4c79f;
  padding:3px 6px;
  border-radius:3px;
  width:fit-content;
  font-size:6px
}

.pill.green {
  border-color:#3d5b48;
  color:#aad2b4
}

.concept-note {
  display:block;
  border-top:1px solid #2f4236;
  padding-top:12px;
  font-size:6px;
  color:#93a999;
  text-align:center
}

.exception-visual,.playbook-visual {
  position:relative;
  min-height:255px;
  padding:24px 32px;
  background:radial-gradient(ellipse at 70% 20%,#34483a 0,transparent 65%),#1b2922
}

.mini-caption {
  font:8px var(--mono);
  letter-spacing:.1em;
  color:#a4b7a7
}

.flow-dots {
  display:flex;
  align-items:center;
  margin:30px auto 25px;
  max-width:330px
}

.flow-dots>span {
  width:36px;
  height:36px;
  border:1px solid #627c67;
  display:grid;
  place-items:center;
  border-radius:50%;
  font:10px var(--mono);
  color:#c1d4c1;
  background:#1c2c22
}

.flow-dots i {
  flex:1;
  height:1px;
  background:#607564
}

.flow-dots .flagged {
  border-color:#d6c59c;
  color:#e3d1a4;
  box-shadow:0 0 0 5px #c1b38711
}

.rule-line {
  font:11px/1.8 var(--mono);
  color:#b4c5b5;
  max-width:330px;
  margin:auto
}

.rule-key {
  color:#cfc7a0
}

.indent {
  padding-left:22px;
  color:#acddbf
}

.cursor {
  color:#d9e6dc
}

.visual-bottom {
  display:flex;
  justify-content:space-between;
  margin-top:23px;
  font:7px var(--mono);
  letter-spacing:.06em;
  color:#9cb1a2
}

.playbook-visual {
  background:radial-gradient(ellipse at 20% 20%,#3b4035 0,transparent 60%),#222a22
}

.document-stack {
  position:relative;
  max-width:260px;
  margin:17px auto 0;
  transform:rotate(-4deg)
}

.paper {
  position:relative;
  padding:15px 19px;
  background:#d0d6bd;
  color:#2b392e;
  border-radius:2px;
  box-shadow:0 10px 25px #0a100b33
}

.paper-back {
  position:absolute;
  inset:0;
  transform:rotate(8deg);
  background:#818f74
}

.paper-top {
  font:6px var(--mono);
  letter-spacing:.12em
}

.paper-row {
  display:flex;
  gap:12px;
  border-top:1px solid #a1af94;
  padding:8px 0;
  font-size:8px;
  align-items:center
}

.paper-row:first-of-type {
  margin-top:9px
}

.paper-row b {
  font:7px var(--mono);
  color:#607158
}

.paper-row i {
  font-style:normal;
  margin-left:auto
}

.paper-foot {
  height:4px;
  background:#91a186;
  width:38%;
  margin-top:5px
}

/* Experience and toolkit */
.experience-layout {
  display:grid;
  grid-template-columns:.85fr 1.4fr;
  gap:90px
}

.experience-intro p {
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
  margin-top:25px
}

.timeline {
  border-left:1px solid var(--line);
  padding-left:33px
}

.timeline li {
  position:relative;
  padding:0 0 33px;
  margin-bottom:32px;
  border-bottom:1px solid var(--line)
}

.timeline li:last-child {
  border:0;
  padding-bottom:0;
  margin-bottom:0
}

.timeline li:before {
  content:'';
  position:absolute;
  left:-38px;
  top:5px;
  background:#44594b;
  width:9px;
  height:9px;
  border-radius:50%;
  box-shadow:0 0 0 5px var(--bg)
}

.timeline li.current:before {
  background:var(--accent)
}

.timeline-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font:10px/1.6 var(--mono)
}

.timeline h3 {
  font-size:26px;
  margin-top:16px;
  letter-spacing:-.7px;
  display:flex;
  align-items:center;
  gap:15px
}

.current-label {
  font:7px var(--mono);
  color:var(--accent);
  border:1px solid #415e4b;
  padding:4px 6px;
  border-radius:3px;
  letter-spacing:.1em
}

.timeline h4 {
  font-size:14px;
  line-height:1.6;
  margin-top:8px;
  color:#c5d0c7
}

.timeline p {
  font-size:13px;
  line-height:1.85;
  margin-top:13px;
  color:var(--muted);
  max-width:550px
}

.skills-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:65px
}

.skills-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #678170;
  padding-top:20px
}

.skills-head h3 {
  font-size:19px;
  letter-spacing:-.3px
}

.skills-note {
  font-size:11px;
  color:var(--muted);
  margin-top:9px;
  margin-bottom:23px
}

.skills-group li {
  display:grid;
  grid-template-columns:155px 1fr;
  gap:20px;
  align-items:start;
  padding:17px 0;
  border-bottom:1px solid var(--line)
}

.skills-group li>span {
  font-size:14px
}

.skills-group li p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7
}

.developing .skills-head {
  border-color:var(--line)
}

.learning-mark {
  font-size:22px;
  color:var(--muted)
}

.toolkit-statement {
  margin-top:36px;
  padding:30px;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  background:linear-gradient(120deg,#1c2921,transparent)
}

.toolkit-statement>span {
  display:block;
  font-size:29px;
  line-height:1.25;
  letter-spacing:-1px;
  color:#becfc2;
  margin-top:10px
}

/* Contact and footer */
.contact {
  background:radial-gradient(ellipse at 20% 90%,#20372a66,transparent 65%)
}

.contact-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:85px
}

.contact h2 {
  font-size:clamp(32px,3.8vw,50px);
  letter-spacing:-2px
}

.contact h2>span {
  color:var(--accent)
}

.contact-grid>div>p:not(.eyebrow) {
  color:var(--muted);
  font-size:14px;
  max-width:420px;
  margin-top:25px
}

.contact .button {
  margin-top:30px
}

.contact-links {
  padding-top:7px
}

.contact-email {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  font-size:clamp(14px,1.5vw,20px);
  letter-spacing:-.4px;
  margin-top:27px;
  overflow-wrap:anywhere
}

.contact-email svg {
  width:19px;
  height:19px;
  flex-shrink:0
}

.copy-email {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:10px;
  background:none;
  color:var(--muted);
  padding:12px 0;
  min-height:44px
}

.copy-email svg {
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1
}

.copy-email:hover {
  color:var(--accent)
}

.social-links {
  display:flex;
  gap:30px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  margin-top:20px
}

.social-links a {
  display:inline-flex;
  align-items:center;
  gap:35px;
  font-size:13px
}

.social-links svg {
  width:13px;
  height:13px
}

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

.contact-grid .languages {
  font-size:9px;
  letter-spacing:.015em;
  max-width:none;
  margin-top:25px
}

.site-footer {
  padding-block:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted)
}

.site-footer .brand {
  font-size:11px;
  gap:13px
}

.site-footer .monogram {
  font-size:22px
}

.back-top {
  color:#c1d0c6
}

/* Case-study overlays */
.project-dialog {
  background:#16211a;
  border:1px solid #4a6452;
  border-radius:8px;
  color:var(--text);
  padding:32px 40px 40px;
  width:min(720px,calc(100% - 32px));
  max-height:88dvh;
  box-shadow:0 25px 100px #0008
}

.project-dialog::backdrop {
  background:#060b08d9;
  backdrop-filter:blur(6px)
}

.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.close-dialog {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:#202d23;
  border-radius:50%
}

.close-dialog:hover {
  border-color:var(--accent)
}

.close-dialog svg {
  width:20px;
  height:20px;
  stroke:var(--text);
  fill:none;
  stroke-width:1.4
}

.project-status {
  color:var(--accent);
  font:10px/1.7 var(--mono);
  margin-top:18px
}

.project-dialog h2 {
  font-size:37px;
  margin-top:14px
}

.case-sections {
  display:grid;
  gap:25px;
  margin-top:33px;
  border-top:1px solid var(--line);
  padding-top:29px
}

.case-sections h3 {
  font-size:16px
}

.case-sections p {
  font-size:14px;
  color:#b1c0b4;
  line-height:1.85;
  margin-top:9px
}

.project-dialog>.text-link {
  margin-top:25px
}

.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  z-index:100;
  max-width:calc(100% - 32px);
  width:max-content;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  background:var(--accent);
  color:#173321;
  font-size:12px;
  padding:12px 20px;
  border-radius:4px;
  box-shadow:0 8px 35px #0005
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

/* Responsive layouts */
@media(min-width:1500px) {
  .hero {
    padding-top:85px
  }
  .hero-main {
    min-height:610px
  }
}

@media(max-width:1100px) {
  .section-wrap {
    padding-inline:38px
  }
  .nav-wrap {
    padding-inline:38px
  }
  .brand-name {
    display:none
  }
  .hero h1 {
    font-size:clamp(56px,6.7vw,75px);
    letter-spacing:-3.8px
  }
  .hero-main {
    grid-template-columns:1.2fr 1fr;
    gap:0
  }
  .hero-intro {
    font-size:14px
  }
  .system-visual {
    transform:translateX(12px)
  }
  .about-grid {
    gap:50px
  }
  .project-card.featured {
    grid-template-columns:1.1fr 1fr
  }
  .control-visual {
    margin:24px 18px;
    padding:17px
  }
  .featured .project-copy {
    padding:30px
  }
  .experience-layout {
    gap:50px
  }
  .skills-grid {
    gap:40px
  }
  .skills-group li {
    grid-template-columns:130px 1fr;
    gap:12px
  }
  .contact-grid {
    gap:40px
  }
  .contact-email {
    font-size:16px
  }
  .mock-stats strong {
    font-size:14px
  }
}

@media(max-width:800px) {
  html {
    scroll-padding-top:95px
  }
  .section-wrap {
    padding-inline:26px
  }
  .nav-wrap {
    height:73px;
    padding-inline:26px
  }
  .brand-name {
    display:inline;
    font-size:12px
  }
  .menu-toggle {
    display:block
  }
  nav {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:#152019;
    border-bottom:1px solid var(--line);
    padding:18px 26px 25px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    box-shadow:0 18px 30px #0005
  }
  nav.is-open {
    display:flex
  }
  nav a {
    padding:13px 0
  }
  nav .nav-contact {
    margin:12px 0 0;
    padding:11px 15px;
    width:fit-content;
    gap:35px
  }
  nav a[aria-current]:not(.nav-contact):after {
    display:none
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .hero {
    padding-top:52px
  }
  .hero-main {
    min-height:auto;
    grid-template-columns:1fr
  }
  .hero h1 {
    font-size:clamp(56px,9.5vw,76px);
    letter-spacing:-3.7px
  }
  .hero-eyebrow {
    font-size:9px;
    margin-bottom:25px
  }
  .hero-name {
    margin-top:27px
  }
  .hero-intro {
    max-width:490px
  }
  .system-visual {
    max-width:400px;
    width:75%;
    justify-self:center;
    margin-top:30px;
    transform:none
  }
  .hero-bottom {
    margin-top:30px;
    font-size:10px
  }
  .hero-bottom>a {
    gap:12px
  }
  .section-space {
    padding-top:73px;
    padding-bottom:73px
  }
  .section-label {
    margin-bottom:32px
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .about-prose {
    max-width:none
  }
  .principles {
    display:grid;
    grid-template-columns:1fr;
    gap:0
  }
  .principle {
    gap:20px
  }
  .section-heading {
    display:block
  }
  .section-heading>p {
    margin-top:20px
  }
  .project-card.featured {
    display:block
  }
  .featured .project-art {
    min-height:320px
  }
  .control-visual {
    width:80%;
    max-width:480px;
    margin:30px auto
  }
  .mock-stats strong {
    font-size:18px
  }
  .project-copy,.featured .project-copy {
    padding:26px
  }
  .project-copy h3 {
    font-size:24px
  }
  .project-grid {
    gap:18px
  }
  .exception-visual,.playbook-visual {
    min-height:240px;
    padding:23px 20px
  }
  .flow-dots {
    margin-top:26px
  }
  .rule-line {
    font-size:8px
  }
  .visual-bottom {
    font-size:5px
  }
  .paper {
    padding:13px
  }
  .paper-row {
    font-size:7px;
    gap:6px
  }
  .experience-layout {
    grid-template-columns:1fr;
    gap:40px
  }
  .experience-intro p {
    margin-top:20px
  }
  .timeline {
    padding-left:27px
  }
  .timeline li:before {
    left:-32px
  }
  .skills-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .skills-group li {
    grid-template-columns:170px 1fr
  }
  .toolkit-statement {
    display:none
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:45px
  }
  .contact-links {
    max-width:480px
  }
  .contact-email {
    font-size:21px
  }
  .site-footer {
    flex-wrap:wrap;
    gap:15px
  }
  .site-footer>.brand {
    flex-basis:calc(100% - 100px)
  }
  .site-footer>.back-top {
    order:1;
    margin-left:auto
  }
  .site-footer>span {
    order:2;
    flex-basis:100%;
    font-size:9px
  }
}

@media(max-width:480px) {
  .section-wrap {
    padding-inline:22px
  }
  .nav-wrap {
    padding-inline:22px
  }
  .brand {
    gap:13px
  }
  .hero {
    padding-top:40px
  }
  .hero h1 {
    font-size:clamp(44px,10.5vw,56px);
    letter-spacing:-2.8px
  }
  .hero-eyebrow {
    font-size:8px;
    letter-spacing:.07em;
    gap:8px
  }
  .hero-name {
    font-size:17px
  }
  .hero-role {
    font-size:9px;
    line-height:1.8
  }
  .hero-intro {
    font-size:14px;
    line-height:1.8;
    margin-top:18px
  }
  .hero-actions {
    gap:8px;
    margin-top:25px
  }
  .button {
    gap:13px;
    font-size:11px;
    padding:11px 14px
  }
  .system-visual {
    width:88%;
    margin-top:30px
  }
  .system-label {
    font-size:7px
  }
  .orbit-tag {
    font-size:9px;
    padding:6px 9px;
    gap:7px
  }
  .system-footer {
    font-size:6px
  }
  .hero-bottom {
    gap:20px;
    align-items:center;
    font-size:9px;
    padding:21px 0
  }
  .hero-bottom>span {
    max-width:150px
  }
  .hero-bottom a {
    white-space:nowrap;
    font-size:8px
  }
  .section-space {
    padding-top:60px;
    padding-bottom:60px
  }
  h2 {
    font-size:32px;
    letter-spacing:-1.3px
  }
  .section-label {
    font-size:9px;
    margin-bottom:28px
  }
  .about-prose {
    font-size:14px
  }
  .principle h3 {
    font-size:17px
  }
  .principle p {
    font-size:13px
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:22px
  }
  .project-copy,.featured .project-copy {
    padding:25px
  }
  .project-copy h3 {
    font-size:25px
  }
  .project-card .project-art {
    min-height:245px
  }
  .control-visual {
    width:87%;
    padding:14px;
    margin:25px auto
  }
  .mock-head {
    font-size:5px;
    padding-bottom:12px
  }
  .mock-stats {
    gap:10px;
    margin:14px 0
  }
  .mock-stats>div {
    padding:10px
  }
  .mock-stats strong {
    font-size:13px
  }
  .mock-stats small {
    font-size:7px
  }
  .mock-table>div {
    font-size:6px;
    padding:9px 0
  }
  .mock-table>div:first-child {
    font-size:6px
  }
  .pill {
    font-size:5px;
    padding:2px 4px
  }
  .concept-note {
    font-size:5px
  }
  .micro-bars,.sparkline {
    height:35px
  }
  .exception-visual,.playbook-visual {
    min-height:240px;
    padding:22px 28px
  }
  .rule-line {
    font-size:10px
  }
  .visual-bottom {
    font-size:7px
  }
  .paper-row {
    font-size:8px
  }
  .timeline-meta {
    font-size:8px;
    gap:14px
  }
  .timeline h3 {
    font-size:24px
  }
  .timeline h4 {
    font-size:13px
  }
  .timeline p {
    font-size:12px
  }
  .skills-group li {
    grid-template-columns:125px 1fr;
    gap:15px
  }
  .skills-group li>span {
    font-size:13px
  }
  .skills-group li p {
    font-size:11px
  }
  .skills-head h3 {
    font-size:18px
  }
  .skills-note {
    font-size:10px
  }
  .contact h2 {
    font-size:34px;
    letter-spacing:-1.6px
  }
  .contact-email {
    font-size:17px
  }
  .contact-grid .languages {
    font-size:8px
  }
  .project-dialog {
    padding:20px 24px 28px
  }
  .project-dialog h2 {
    font-size:29px
  }
  .project-dialog .eyebrow {
    font-size:8px
  }
  .case-sections p {
    font-size:13px
  }
  .contact-grid>div>p:not(.eyebrow) {
    font-size:13px
  }
  .contact-grid>div>.languages {
    font-size:8px
  }
}

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

@media print {
  body {
    background:white;
    color:#111;
    font-size:11px
  }
  .site-header,.system-visual,.hero-actions,.hero-bottom,.project-art,.copy-email,.back-top,.toast,.menu-toggle,dialog {
    display:none!important
  }
  .section-wrap {
    padding:24px 0
  }
  .section-space {
    border-color:#ccc
  }
  .hero h1 {
    font-size:45px
  }
  .hero h1 span,.contact h2 span,.muted,.section-label,.eyebrow,.text-link {
    color:#333
  }
  .project-card {
    break-inside:avoid;
    background:white
  }
  .project-card.featured {
    display:block
  }
  .project-copy p,.about-prose,.timeline p,.principle p,.skills-group li p,.contact p {
    color:#333!important
  }
  .about-grid,.experience-layout,.skills-grid,.contact-grid {
    gap:25px
  }
  .timeline li {
    break-inside:avoid
  }
  .project-grid {
    display:block
  }
  .project-card {
    margin-top:15px
  }
  .project-dialog[open] {
    display:block!important;
    position:static
  }
  .button {
    color:#111!important;
    background:none;
    border:1px solid #999
  }
  .hero-name {
    margin-top:15px
  }
}