/* ==========================================================
   QUIET EDITORIAL - redesign layer (loads after style.css)
   Minimal, content-first. Content and JS hooks are untouched.
   ========================================================== */
:root{
  --ink:#1c1b19; --bone:#F4F1EA; --clay:#EAE5DA;
  --bg-base:var(--bone); --bg-surface:#EFEBE2; --bg-surface-elevated:var(--clay);
  --text-primary:var(--ink); --text-secondary:#57524a; --text-muted:#8a8378;
  --border-color:rgba(28,27,25,.12); --border-color-hover:rgba(28,27,25,.4);
  --nav-height:72px; --nav-bg:var(--bone);
  --font-sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --border-radius-sm:2px; --border-radius-md:2px; --border-radius-lg:2px;
  --shadow-subtle:none; --shadow-premium:none;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,72px);
}
body.dark{
  --bg-base:#151413; --bg-surface:#1d1b1a; --bg-surface-elevated:#272422;
  --text-primary:#EFEBE2; --text-secondary:#aea698; --text-muted:#7f776b;
  --border-color:rgba(239,235,226,.12); --border-color-hover:rgba(239,235,226,.4); --nav-bg:#151413;
}
body{font-family:var(--font-sans);font-size:15px;line-height:1.65;letter-spacing:0;counter-reset:sec;-webkit-font-smoothing:antialiased}
.container{max-width:1200px;padding:0 var(--pad)}
section{padding:clamp(72px,9vw,128px) 0;overflow:visible;border-top:1px solid var(--border-color)}
section.hero{border-top:0}
::selection{background:var(--skin-color);color:#fff}

/* ---------- type ---------- */
.section-tag{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px;display:inline-flex;gap:10px}
.section-tag::before{counter-increment:sec;content:"0" counter(sec);color:var(--skin-color)}
.section-title{font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px}
.section-subtitle{font-size:16px;line-height:1.6;max-width:560px;margin-bottom:clamp(40px,6vw,72px);color:var(--text-secondary);font-weight:400}
.text-accent{color:var(--skin-color)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;font-family:var(--font-sans);font-size:14px;font-weight:500;border:1px solid var(--text-primary);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn i{font-size:12px;transition:transform .35s var(--ease)}
.btn:hover i{transform:translateX(3px)}
.btn .fa-arrow-down,.btn:hover .fa-arrow-down{transform:none}
.btn:hover .fa-arrow-down{transform:translateY(3px)}
.btn-primary{background:var(--text-primary);color:var(--bg-base)}
.btn-primary:hover{background:var(--skin-color);border-color:var(--skin-color);color:#fff;transform:none;box-shadow:none}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-color-hover)}
.btn-outline:hover{background:transparent;border-color:var(--text-primary);color:var(--text-primary);transform:none}
.btn-group{gap:10px}

/* ---------- header / nav ---------- */
.site-header{background:transparent;height:var(--nav-height);border-bottom:1px solid transparent}
.site-header.scrolled{background:var(--nav-bg);backdrop-filter:none;-webkit-backdrop-filter:none;height:60px;border-bottom:1px solid var(--border-color);box-shadow:none}
.header-container{max-width:1200px;padding:0 var(--pad)}
.logo a{font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none}
.logo a span{color:var(--skin-color)}
.nav-desktop .nav{gap:30px}
.nav-desktop .nav-item{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-secondary);padding:4px 0;position:relative;transition:color .25s}
.nav-desktop .nav-item::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--text-primary);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-desktop .nav-item:hover{color:var(--text-primary)}
.nav-desktop .nav-item:hover::after,.nav-desktop .nav-item.active::after{transform:scaleX(1);transform-origin:left;width:100%}
.nav-desktop .nav-item.active{color:var(--text-primary)}
.nav-desktop .resume-link{border:1px solid var(--border-color-hover);border-radius:999px;padding:6px 14px;background:transparent;color:var(--text-primary)}
.nav-desktop .resume-link::after{display:none}
.nav-desktop .resume-link:hover{background:var(--text-primary);color:var(--bg-base)}
.day-night-toggle{background:transparent;border:1px solid var(--border-color-hover);color:var(--text-primary);box-shadow:none}
.day-night-toggle:hover{background:var(--clay);transform:none}
.nav-toggle-btn span{background:var(--text-primary)}
.mobile-menu-overlay{background:var(--bg-base)}
.mobile-menu-overlay .nav-item{color:var(--text-primary);font-size:clamp(26px,7vw,36px);font-weight:500;letter-spacing:-.02em;text-transform:none}
.mobile-menu-overlay .nav-item.active{color:var(--skin-color)}

/* ---------- hero ---------- */
.hero{min-height:100vh;align-items:center;padding-top:calc(var(--nav-height) + 32px);padding-bottom:clamp(56px,7vw,96px)}
.hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);align-items:center;text-align:left}
.hero-content{grid-column:1/8}
.hero-intro{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:22px;display:block}
.hero-title-large{margin:0 0 26px;line-height:1.05}
.hero-title-large .hero-name{display:inline-block;font-size:clamp(38px,5.6vw,72px);font-weight:600;letter-spacing:-.04em;text-transform:none;line-height:1.02;color:var(--text-primary)}
.hero-title-large .hero-subtitle,.hero-title-large .italic-font{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.015em;line-height:1.2;display:inline-block;margin-top:8px;color:var(--text-secondary)}
.typing-cursor{color:var(--skin-color);font-weight:300}
.hero-statement{border:0;padding:0;margin:0 0 14px;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.01em;line-height:1.4;color:var(--text-primary);max-width:520px}
.hero-desc{font-size:15px;line-height:1.7;color:var(--text-secondary);max-width:520px}
p.hero-desc:nth-of-type(3){font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:22px!important}
.interactive-keyword{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--text-primary);padding:0 1px}
.interactive-keyword::after{height:1px;background:var(--skin-color)}
.hero-content .btn-group{margin-top:30px}
.hero-visual{grid-column:9/-1}
.hero-canvas-container{height:clamp(320px,30vw,400px);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:2px;box-shadow:none}
.hero-canvas-grid{background-image:linear-gradient(to right,var(--border-color) 1px,transparent 1px),linear-gradient(to bottom,var(--border-color) 1px,transparent 1px);background-size:24px 24px;opacity:.7}
.canvas-coords-status{background:transparent;border:0;border-bottom:1px solid var(--border-color);border-radius:0;color:var(--text-muted);font-family:var(--font-mono);font-size:10px;top:0;left:0;right:0;transform:none;width:auto;padding:10px 14px}
.design-card{background:var(--bg-base);color:var(--text-primary);border:1px solid var(--border-color-hover);border-radius:2px;box-shadow:none}
.design-card-title,.design-card-header{font-family:var(--font-mono);text-transform:none;color:var(--text-primary)}
.toy-inner-btn{background:var(--text-primary);color:var(--bg-base);border-radius:999px;font-family:var(--font-sans);font-weight:500}
.toy-inner-btn:hover{background:var(--skin-color);color:#fff}
.code-card{background:var(--text-primary);color:var(--bg-base);border:0;border-radius:2px}
.code-card-header{color:rgba(244,241,234,.6)}
.code-preview,.code-preview code{color:var(--bone);font-family:var(--font-mono)}
body.dark .code-card{background:#2b2826}
.badge-toy-inner{background:var(--bg-base);color:var(--text-primary);border:1px solid var(--border-color-hover);border-radius:999px;font-weight:500;box-shadow:none}

/* ---------- selected work ---------- */
.portfolio-grid{gap:clamp(72px,9vw,120px);margin-top:0}
.project-card{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);align-items:center;perspective:none;transition:none}
.project-card:nth-child(even){grid-template-columns:repeat(12,minmax(0,1fr))}
.project-image-wrapper{grid-column:1/8;grid-row:1;border:1px solid var(--border-color);border-radius:2px;background:var(--clay);box-shadow:none!important;overflow:hidden;position:relative}
.project-image-wrapper::after{display:none}
.project-img{width:100%;height:auto;aspect-ratio:3/2;max-height:none;object-fit:cover;transform:none;transition:transform 1.1s var(--ease)}
.project-image-wrapper:hover .project-img{transform:scale(1.025)}
.project-info{grid-column:9/13;grid-row:1}
.project-card:nth-child(even) .project-image-wrapper{grid-column:6/13;order:initial}
.project-card:nth-child(even) .project-info{grid-column:1/5}
.project-number{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--text-muted);margin-bottom:14px}
.project-title{font-size:clamp(22px,2.3vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin-bottom:10px}
.project-meta{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--skin-color);margin-bottom:14px}
.project-description{font-size:15px;line-height:1.65;color:var(--text-secondary);margin-bottom:24px}
.project-card .btn-outline{align-self:flex-start}
.project-card.project-highlighted .project-title{color:var(--skin-color)}

/* ---------- design x engineering ---------- */
.design-eng{background:transparent}
.design-eng-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);row-gap:48px;align-items:start}
.design-eng-desc{grid-column:1/6;position:sticky;top:96px}
.design-eng-desc h3{font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin-bottom:18px}
.design-eng-desc p{font-size:15px;line-height:1.7;color:var(--text-secondary);margin-bottom:14px;max-width:440px}
.design-eng-desc .btn{margin-top:10px}
.skill-groups{grid-column:7/-1;display:flex;flex-direction:column}
.skill-group-container{padding:24px 0 28px;border-top:1px solid var(--border-color)}
.skill-group-container:last-child{border-bottom:1px solid var(--border-color)}
.skill-group-container h4{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;color:var(--text-muted)}
.skill-badges{gap:8px}
.skill-badge{background:transparent;border:1px solid var(--border-color-hover);border-radius:999px;color:var(--text-primary);font-family:var(--font-sans);font-size:13px;font-weight:500;padding:6px 14px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.skill-badge:hover{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-base);transform:none;box-shadow:none}
.skill-badge-explanation{background:var(--text-primary);color:var(--bg-base);border:0;border-radius:2px;box-shadow:none;font-size:12px}
.skill-badge-explanation::after{background:var(--text-primary);border-color:var(--text-primary)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);row-gap:56px;align-items:start}
.about-content-left{grid-column:1/7}
.about-content-right{grid-column:8/-1}
.about-tabs-container{display:flex;gap:6px;flex-wrap:wrap;border:0;margin-bottom:26px}
.about-tab{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.08em;padding:7px 14px;border:1px solid var(--border-color-hover);border-radius:999px;background:transparent;color:var(--text-secondary);transition:background .25s,color .25s,border-color .25s}
.about-tab::after{display:none}
.about-tab:hover{border-color:var(--text-primary);color:var(--text-primary)}
.about-tab.active{background:var(--text-primary);color:var(--bg-base);border-color:var(--text-primary)}
.about-description{font-size:15px;line-height:1.75;color:var(--text-secondary);margin-bottom:16px;max-width:560px}
.about-description strong{color:var(--text-primary);font-weight:600}
.about-personal-details{margin-top:36px;border-top:1px solid var(--border-color);background:transparent;padding:0;border-radius:0}
.detail-row{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-color);font-size:14px}
.detail-row span:first-child{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.detail-row span:last-child{font-weight:500;color:var(--text-primary);text-align:left}
.timeline-container{border-top:1px solid var(--border-color);padding:0}
.timeline-container::before{display:none}
.timeline-item{display:grid;grid-template-columns:minmax(96px,130px) 1fr;column-gap:20px;padding:22px 0 24px;border-bottom:1px solid var(--border-color);margin:0}
.timeline-dot{display:none}
.timeline-header{display:contents}
.timeline-date{grid-column:1;grid-row:1/4;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);padding-top:4px;text-transform:none;background:none;border:0}
.timeline-title{grid-column:2;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0}
.timeline-sub{grid-column:2;font-size:13px;color:var(--skin-color);margin:3px 0 8px;font-weight:500}
.timeline-desc{grid-column:2;font-size:14px;line-height:1.65;color:var(--text-secondary);margin:0}

/* ---------- contact ---------- */
.contact-section{background:transparent;text-align:left}
.contact-section .container{max-width:1200px}
.contact-headline{font-size:clamp(26px,3.4vw,44px);font-weight:600;line-height:1.1;letter-spacing:-.03em;margin-bottom:16px}
.contact-desc{font-size:16px;line-height:1.6;max-width:520px;color:var(--text-secondary);margin-bottom:32px}
.contact-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin-bottom:clamp(48px,6vw,72px)}
.contact-social-btn{background:transparent;color:var(--text-primary);border:1px solid var(--border-color-hover);border-radius:999px;padding:9px 18px;font-weight:500;font-size:13px;box-shadow:none;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.contact-social-btn:hover{background:var(--text-primary);color:var(--bg-base);border-color:var(--text-primary);transform:none}
.form-container{max-width:640px;background:transparent;border:0;border-top:1px solid var(--border-color);padding:28px 0 0;box-shadow:none;border-radius:0}
.form-group label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.form-input{background:transparent;border:0;border-bottom:1px solid var(--border-color-hover);border-radius:0;color:var(--text-primary);font-family:var(--font-sans);font-size:15px;padding:10px 0;transition:border-color .3s}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{border-bottom-color:var(--skin-color);box-shadow:none;background:transparent}

/* ---------- footer + floating tools ---------- */
.site-footer{background:transparent;border-top:1px solid var(--border-color);padding:22px 0;text-align:left}
.footer-text{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--text-muted);text-align:left}
.style-switcher{background:var(--bg-base);border:1px solid var(--border-color-hover);border-radius:999px;box-shadow:none;padding:6px 12px}
.style-switcher h4{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
.wireframe-mode-btn{border-radius:999px;box-shadow:none;font-family:var(--font-mono);font-size:10px}
.case-study-modal{background:var(--bg-base)}
.modal-close-btn{border-radius:50%;box-shadow:none;border:1px solid var(--border-color-hover)}

/* ---------- motion: one quiet reveal ---------- */
.scroll-reveal{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.scroll-reveal.scroll-revealed{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero{min-height:auto}
  .hero-content{grid-column:1/-1}
  .hero-visual{grid-column:1/-1;margin-top:44px}
  .hero .btn-group{justify-content:flex-start}
  .hero-row{text-align:left}
  .design-eng-desc{grid-column:1/-1;position:static}
  .skill-groups{grid-column:1/-1}
  .about-content-left,.about-content-right{grid-column:1/-1}
}
@media (max-width:860px){
  .project-image-wrapper,.project-card:nth-child(even) .project-image-wrapper{grid-column:1/-1;grid-row:1}
  .project-info,.project-card:nth-child(even) .project-info{grid-column:1/-1;grid-row:2;margin-top:24px}
  .timeline-item{grid-template-columns:1fr}
  .timeline-date{grid-row:auto;padding:0 0 6px}
  .timeline-title,.timeline-sub,.timeline-desc{grid-column:1}
  .detail-row{grid-template-columns:1fr;gap:2px}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .style-switcher{right:10px;bottom:10px}
  .wireframe-mode-btn{left:10px;bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .scroll-reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================
   SIDE RAIL NAV - stacked, tilted blob pills (desktop)
   ========================================================== */
@media (min-width:1025px){
  .main-content-wrapper,.site-footer{margin-left:168px}
  .nav-desktop{position:fixed;left:22px;bottom:22px;z-index:120;display:block}
  .nav-desktop .nav{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
  .nav-desktop li{display:block}
  .nav-desktop .nav-item{
    --r:0deg;--bg:var(--text-primary);--fg:var(--bg-base);--shape:22px 26px 20px 28px/26px 20px 28px 22px;
    display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
    padding:10px 18px;font-size:13px;font-weight:600;letter-spacing:-.005em;line-height:1.15;
    color:var(--fg);background:var(--bg);border:1.5px solid var(--bg);border-radius:var(--shape);
    transform:rotate(var(--r));transform-origin:left center;
    transition:transform .5s var(--ease),background .35s,color .35s,border-color .35s,padding .5s var(--ease),border-radius .5s var(--ease);
    max-width:150px;
  }
  .nav-desktop .nav-item::after{display:none}
  .nav-desktop li:nth-child(1) .nav-item{--r:-1.6deg;--bg:var(--text-primary);--fg:var(--bg-base);--shape:20px 28px 22px 26px/24px 22px 28px 20px}
  .nav-desktop li:nth-child(2) .nav-item{--r:1.4deg;--bg:var(--skin-color);--fg:#fff;--shape:28px 20px 26px 22px/22px 28px 20px 26px}
  .nav-desktop li:nth-child(3) .nav-item{--r:-1deg;--bg:color-mix(in srgb,var(--skin-color) 22%,var(--bg-base));--fg:var(--text-primary);--shape:18px 26px 24px 28px/28px 18px 26px 22px;border-color:color-mix(in srgb,var(--skin-color) 22%,var(--bg-base))}
  .nav-desktop li:nth-child(4) .nav-item{--r:1.8deg;--bg:var(--clay);--fg:var(--text-primary);--shape:26px 18px 28px 20px/20px 26px 18px 28px}
  .nav-desktop li:nth-child(5) .nav-item{--r:-1.2deg;--bg:var(--bg-surface-elevated);--fg:var(--text-primary);--shape:24px 28px 18px 26px/26px 22px 28px 18px;border-color:var(--text-primary);background:transparent}
  .nav-desktop li:nth-child(6) .nav-item{--r:1deg;--bg:transparent;--fg:var(--text-primary);border-color:var(--text-primary);margin:0;--shape:999px}
  body.dark .nav-desktop li:nth-child(1) .nav-item{--bg:var(--text-primary);--fg:var(--bg-base)}
  body.dark .nav-desktop li:nth-child(4) .nav-item{--bg:var(--bg-surface-elevated)}
  .nav-desktop .resume-link{margin-left:0;background:transparent;border-radius:999px}
  .nav-desktop .nav-item:hover{transform:rotate(0deg) translateX(6px)}
  .nav-desktop .nav-item:hover,.nav-desktop .resume-link:hover{color:var(--fg)}
  .nav-desktop li:nth-child(6) .nav-item:hover{background:var(--text-primary);color:var(--bg-base)}
  /* active = outlined shape, a little taller (like a tab pulled forward) */
  .nav-desktop .nav-item.active{background:transparent!important;color:var(--text-primary)!important;border-color:var(--text-primary);padding:22px 20px;transform:rotate(-2deg) translateX(6px)}
  .nav-desktop .nav-item.active:hover{transform:rotate(0) translateX(6px)}
  .nav-desktop li:nth-child(6) .nav-item.active{padding:12px 20px}
  .site-header.scrolled{border-bottom:1px solid var(--border-color)}
}
@media (min-width:1025px) and (max-height:700px){
  .nav-desktop .nav-item{padding:6px 14px;font-size:12px}
  .nav-desktop .nav-item.active{padding:12px 16px}
  .nav-desktop .nav{gap:3px}
}
@media (max-width:1024px){ .nav-desktop{display:none} }
@media (prefers-reduced-motion:reduce){ .nav-desktop .nav-item{transition-duration:.001ms!important} }

/* ---------- adjustments after first visual pass ---------- */
.btn{text-transform:none;letter-spacing:0}
@media (min-width:1025px){
  .hero-content{grid-column:1/7}
  .hero-visual{grid-column:7/-1}
  .nav-desktop .nav-item{font-size:14px;padding:11px 20px}
  .wireframe-mode-btn{left:auto!important;right:250px;bottom:30px}
}
.btn,.btn-primary,.btn-outline{box-shadow:none}
.project-img{aspect-ratio:auto;object-fit:contain;background:var(--clay)}
.form-container .btn,.form-container .btn-primary{width:auto;box-shadow:none;margin-top:12px}
.btn-primary:hover,.form-container .btn-primary:hover{box-shadow:none}
@media (max-width:860px){
  .project-card,.project-card:nth-child(even){display:flex;flex-direction:column;gap:0}
  .project-image-wrapper,.project-info{width:100%;min-width:0}
  .project-image-wrapper{order:0}.project-info{order:1}
  .about-grid,.design-eng-grid,.hero-row{display:flex;flex-direction:column;gap:40px}
  .hero-content,.hero-visual{width:100%;min-width:0}
  .skill-badge-explanation{max-width:70vw}
  html,body{overflow-x:clip}
}
@media (max-width:560px){.wireframe-mode-btn span{display:none}.wireframe-mode-btn{padding:10px 12px}}
body.dark .day-night-toggle,.day-night-toggle{background:transparent!important;color:var(--text-primary)!important;border:1px solid var(--border-color-hover)!important}
body.dark .day-night-toggle:hover,.day-night-toggle:hover{background:var(--bg-surface-elevated)!important}

/* ==========================================================
   COLOR PASS - tasteful multi-accent palette (still calm)
   ========================================================== */
:root{
  --c-coral:var(--skin-color);
  --c-butter:#F2D272; --c-sky:#A8CBEA; --c-sage:#B5D6AE; --c-lilac:#D3C6F1; --c-peach:#F5C7B2;
  --t-butter:color-mix(in srgb,var(--c-butter) 30%,var(--bone));
  --t-sky:color-mix(in srgb,var(--c-sky) 30%,var(--bone));
  --t-sage:color-mix(in srgb,var(--c-sage) 32%,var(--bone));
  --t-lilac:color-mix(in srgb,var(--c-lilac) 34%,var(--bone));
  --t-peach:color-mix(in srgb,var(--c-peach) 34%,var(--bone));
}
body.dark{
  --t-butter:color-mix(in srgb,var(--c-butter) 13%,#151413);
  --t-sky:color-mix(in srgb,var(--c-sky) 13%,#151413);
  --t-sage:color-mix(in srgb,var(--c-sage) 13%,#151413);
  --t-lilac:color-mix(in srgb,var(--c-lilac) 14%,#151413);
  --t-peach:color-mix(in srgb,var(--c-peach) 14%,#151413);
}
/* section grounds */
.hero{background:var(--t-peach)}
.portfolio{background:var(--bg-base)}
.design-eng{background:var(--t-sage)}
.about{background:var(--t-butter)}
.contact-section{background:var(--t-lilac)}
section{border-top:0}
.site-footer{background:var(--t-lilac);border-top:1px solid var(--border-color)}
.site-header.scrolled{background:color-mix(in srgb,var(--nav-bg) 92%,transparent)}
/* numerals / tags per section */
.hero-intro{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--bg-base);color:var(--text-primary);border:1px solid var(--border-color-hover)}
.hero-intro::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-coral)}
.portfolio .section-tag::before{color:var(--c-coral)}
.design-eng .section-tag::before{color:#4f8a49}
.about .section-tag::before{color:#a8801a}
.contact-section .section-tag::before{color:#6a52b5}
body.dark .design-eng .section-tag::before{color:var(--c-sage)}
body.dark .about .section-tag::before{color:var(--c-butter)}
body.dark .contact-section .section-tag::before{color:var(--c-lilac)}
/* hero canvas as a coloured panel */
.hero-canvas-container{background:var(--bg-base);border:1px solid var(--text-primary)}
.hero-canvas-grid{opacity:.55}
.design-card{background:var(--c-butter);border-color:var(--text-primary);color:#1c1b19}
.design-card-title,.design-card-header{color:#1c1b19}
.design-card .toy-dimensions{color:#4b463f}
.toy-inner-btn{background:var(--c-coral);color:#fff}
.code-card{background:#1c1b19}
.badge-toy-inner{background:var(--c-lilac);color:#1c1b19;border-color:#1c1b19}
.btn-primary:hover{background:var(--c-coral)}
/* work: tinted frames per project */
.project-image-wrapper{padding:clamp(14px,2vw,26px);border:0}
.project-card:nth-child(1) .project-image-wrapper{background:var(--c-sky)}
.project-card:nth-child(2) .project-image-wrapper{background:var(--c-butter)}
.project-card:nth-child(3) .project-image-wrapper{background:var(--c-peach)}
.project-img{background:transparent;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
body.dark .project-card:nth-child(1) .project-image-wrapper{background:color-mix(in srgb,var(--c-sky) 55%,#151413)}
body.dark .project-card:nth-child(2) .project-image-wrapper{background:color-mix(in srgb,var(--c-butter) 55%,#151413)}
body.dark .project-card:nth-child(3) .project-image-wrapper{background:color-mix(in srgb,var(--c-peach) 55%,#151413)}
.project-card:nth-child(1) .project-meta{color:#2f6da3}
.project-card:nth-child(2) .project-meta{color:#a47c0f}
.project-card:nth-child(3) .project-meta{color:#c4552f}
body.dark .project-card:nth-child(1) .project-meta{color:var(--c-sky)}
body.dark .project-card:nth-child(2) .project-meta{color:var(--c-butter)}
body.dark .project-card:nth-child(3) .project-meta{color:var(--c-peach)}
.project-card .btn-outline:hover{background:var(--text-primary);color:var(--bg-base)}
.project-image-wrapper::after{display:flex;content:"\2197";position:absolute;right:14px;top:14px;left:auto;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-size:16px;transform:scale(0);transition:transform .45s var(--ease);z-index:3}
.project-image-wrapper:hover::after{transform:scale(1);background:var(--ink)}
/* skills: coloured pills per group */
.skill-group-container{border-color:color-mix(in srgb,var(--text-primary) 25%,transparent)}
.skill-badge{border-color:transparent;color:#1c1b19}
.skill-group-container:nth-child(1) .skill-badge{background:var(--c-butter)}
.skill-group-container:nth-child(2) .skill-badge{background:var(--c-sky)}
.skill-group-container:nth-child(3) .skill-badge{background:var(--c-lilac)}
.skill-badge:hover{background:var(--c-coral)!important;color:#fff;border-color:transparent}
.design-eng-desc .btn-primary{background:var(--text-primary)}
/* about */
.about-tab{background:var(--bg-base);border-color:transparent;color:var(--text-primary)}
.about-tab:hover{background:var(--c-sky);color:#1c1b19;border-color:transparent}
.about-tab.active{background:var(--text-primary);color:var(--bg-base);border-color:transparent}
.timeline-item:nth-child(1) .timeline-date{color:#2f6da3}
.timeline-item:nth-child(2) .timeline-date{color:#a8801a}
.timeline-item:nth-child(3) .timeline-date{color:#4f8a49}
.timeline-item:nth-child(4) .timeline-date{color:#6a52b5}
.timeline-item:hover{background:color-mix(in srgb,var(--bg-base) 55%,transparent)}
/* contact */
.contact-social-btn{background:var(--bg-base);border-color:transparent;color:var(--text-primary)}
.contact-social-btn:nth-child(1):hover{background:var(--c-peach);color:#1c1b19}
.contact-social-btn:nth-child(2):hover{background:var(--c-butter);color:#1c1b19}
.contact-social-btn:nth-child(3):hover{background:var(--c-sky);color:#1c1b19}
.contact-social-btn:nth-child(4):hover{background:var(--c-sage);color:#1c1b19}
.contact-social-btn:hover{border-color:transparent}
.form-container .btn-primary:hover{background:var(--c-coral)}
/* side rail: a different tone per pill */
@media (min-width:1025px){
  .nav-desktop li:nth-child(1) .nav-item{--bg:var(--text-primary);--fg:var(--bg-base);border-color:var(--text-primary)}
  .nav-desktop li:nth-child(2) .nav-item{--bg:var(--c-coral);--fg:#fff;border-color:var(--c-coral)}
  .nav-desktop li:nth-child(3) .nav-item{--bg:var(--c-butter);--fg:#1c1b19;border-color:var(--c-butter)}
  .nav-desktop li:nth-child(4) .nav-item{--bg:var(--c-sky);--fg:#1c1b19;border-color:var(--c-sky)}
  .nav-desktop li:nth-child(5) .nav-item{--bg:var(--c-sage);--fg:#1c1b19;background:var(--c-sage);border-color:var(--c-sage)}
  .nav-desktop li:nth-child(6) .nav-item{--bg:var(--c-lilac);--fg:#1c1b19;background:var(--c-lilac);border-color:var(--c-lilac)}
  body.dark .nav-desktop li:nth-child(1) .nav-item{--bg:var(--text-primary);--fg:#151413}
  body.dark .nav-desktop li:nth-child(4) .nav-item,body.dark .nav-desktop li:nth-child(3) .nav-item{--fg:#1c1b19}
  .nav-desktop li:nth-child(6) .nav-item:hover{background:var(--c-lilac);color:#1c1b19}
  .nav-desktop .nav-item.active{border-color:var(--text-primary);background:transparent!important;color:var(--text-primary)!important}
  .nav-desktop li:nth-child(n) .nav-item.active{box-shadow:inset 0 0 0 0 transparent}
}
.day-night-toggle{background:var(--bg-base)!important}
.style-switcher{background:var(--bg-base)}
@media (min-width:1025px){
  body.dark .nav-desktop li:nth-child(4) .nav-item{--bg:var(--c-sky);--fg:#1c1b19;border-color:var(--c-sky)}
  body.dark .nav-desktop li:nth-child(n) .nav-item.active{background:transparent!important;color:var(--text-primary)!important;border-color:var(--text-primary)}
}

/* ---------- reduction pass (A1, A3, A4, A7) ---------- */
.skill-groups.has-tabs .skill-group-container{display:none;border-top:0;border-bottom:0;padding:22px 0 0}
.skill-groups.has-tabs .skill-group-container.is-active{display:block}
.skill-groups.has-tabs .skill-group-container h4{display:none}
.skill-tabs{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:4px}
.skill-tab{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--border-color-hover);border-radius:999px;background:var(--bg-base);color:var(--text-primary);cursor:pointer;transition:background .25s,color .25s}
.skill-tab:hover{background:var(--c-sky);color:#1c1b19}
.skill-tab.active{background:var(--text-primary);color:var(--bg-base);border-color:var(--text-primary)}
.skill-tab:focus-visible,.timeline-item:focus-visible,.about-details summary:focus-visible,.form-fold summary:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
.timeline-item.is-foldable{cursor:pointer}
.timeline-item.is-foldable .timeline-desc{display:none}
.timeline-item.is-foldable.open .timeline-desc{display:block}
.timeline-item.is-foldable .timeline-title{display:flex;justify-content:space-between;gap:12px}
.timeline-item.is-foldable .timeline-title::after{content:"+";font-family:var(--font-mono);font-weight:400;color:var(--text-muted);transition:transform .35s var(--ease)}
.timeline-item.is-foldable.open .timeline-title::after{transform:rotate(45deg)}
.about-details{margin-top:34px;border-top:1px solid var(--border-color)}
.about-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary)}
.about-details summary::-webkit-details-marker{display:none}
.about-details summary::after{content:"+";transition:transform .35s var(--ease)}
.about-details[open] summary::after{transform:rotate(45deg)}
.about-details .about-personal-details{margin-top:0}
.form-fold{margin-top:0}
.form-fold summary{list-style:none;cursor:pointer;width:fit-content}
.form-fold summary::-webkit-details-marker{display:none}
.form-fold[open] summary{margin-bottom:24px}
.form-fold .form-container{border-top:1px solid var(--border-color-hover)}

/* ---------- layout fix: full-bleed section colour, content clears the side rail ---------- */
@media (min-width:1025px){
  .main-content-wrapper,.site-footer{margin-left:0}
  .container,.header-container{max-width:1400px;padding-left:calc(176px + var(--pad));padding-right:var(--pad)}
  .contact-section .container{max-width:1400px}
  .nav-desktop .nav-item{box-shadow:0 0 0 1px rgba(28,27,25,.12)}
}