:root{
  --paper:#F4EFE4; --paper-2:#EBE3D3; --ink:#1A202C; --ink-2:#4A5163; --rule:#D6CCB8;
  --sky:#38BDF8; --teal:#0E7C86; --rust:#B4532A; --night:#121722;
  --serif:"Lora",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"Fira Code",ui-monospace,monospace;
  --r:10px; --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);
  background-image:linear-gradient(var(--paper-2) 1px,transparent 1px),linear-gradient(90deg,var(--paper-2) 1px,transparent 1px);
  background-size:32px 32px;background-attachment:fixed}
a{color:var(--teal)} a:hover{color:var(--rust)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:9}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0}
.eyebrow{font:500 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rust);margin:0 0 1rem}
.eyebrow.light{color:var(--sky)}

/* nav */
.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem max(1.25rem,calc((100vw - var(--max))/2));background:rgba(244,239,228,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font:600 1rem var(--serif)}
.nav nav{display:flex;gap:1.3rem;align-items:center}
.nav nav a{color:var(--ink-2);text-decoration:none;font-size:.9rem}
.nav nav a:hover{color:var(--ink)}
.nav-cta{border:1px solid var(--ink);padding:.35rem .9rem;border-radius:999px;color:var(--ink)!important}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:5rem 1.25rem 4rem;display:grid;grid-template-columns:1.25fr 1fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-weight:500;color:var(--ink-2)}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:36em;margin:1.4rem 0 2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-block;padding:.7rem 1.2rem;border:1px solid var(--ink);border-radius:var(--r);color:var(--ink);text-decoration:none;font-weight:500;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);color:var(--ink);background:var(--paper-2)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.btn.big{font-size:1.05rem;padding:.9rem 1.5rem;word-break:break-all}
.hero-plot{margin:0;background:var(--night);border-radius:16px;padding:1rem;box-shadow:0 20px 50px -20px rgba(26,32,44,.5)}
.hero-plot canvas{width:100%;height:auto;display:block;aspect-ratio:1}
.hero-plot figcaption{font:400 .72rem var(--mono);color:#8B93A7;margin-top:.5rem;text-align:center}

/* red team band */
.band{background:var(--night);color:#E6E8EE;padding:4.5rem max(1.25rem,calc((100vw - var(--max))/2))}
.band h2{font-size:clamp(1.8rem,3vw,2.4rem);color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#2A3142;border:1px solid #2A3142;border-radius:var(--r);overflow:hidden;margin:2rem 0 1rem}
.stats div{background:var(--night);padding:1.5rem}
.stats dt{font:400 .75rem var(--mono);color:#8B93A7;text-transform:uppercase;letter-spacing:.06em}
.stats dd{margin:.4rem 0 0;font:600 clamp(1.9rem,3.4vw,2.8rem)/1 var(--serif);color:var(--sky)}
.band-note{color:#A3AAB9;font-size:.9rem;margin:0 0 2rem}
.band-note a{color:var(--sky)}
.focus{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem 2rem}
.focus li{display:flex;gap:1rem;align-items:baseline;border-top:1px solid #2A3142;padding-top:.8rem}
.focus span{font:500 .8rem var(--mono);color:var(--rust)}

/* sections */
.section{max-width:var(--max);margin:0 auto;padding:4.5rem 1.25rem}
.sec-head{display:flex;align-items:baseline;gap:1rem;border-bottom:2px solid var(--ink);padding-bottom:.6rem;margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.num{font:500 .9rem var(--mono);color:var(--rust)}
.sec-lede{color:var(--ink-2);max-width:42em;margin-top:-.5rem}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:180px 1fr;gap:2rem;padding:1.4rem 0;border-bottom:1px dashed var(--rule)}
.when{font:400 .85rem var(--mono);color:var(--ink-2);padding-top:.25rem}
.what h3{font-size:1.25rem}
.what h3 span{font-weight:500;color:var(--ink-2)}
.what p{margin:.4rem 0 0;color:var(--ink-2);max-width:44em}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.proj{background:#FBF8F1;border:1px solid var(--rule);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column}
.proj.feature{grid-column:1/-1;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.proj.feature p{color:#C9CCD6;max-width:46em}.proj.feature a{color:var(--sky)}
.proj.feature h3{font-size:1.7rem}
.ptag{font:400 .75rem var(--mono);color:var(--rust);margin:0 0 .6rem}
.proj h3{font-size:1.2rem}
.proj p{color:var(--ink-2);flex:1}
.proj a{font-weight:500;text-decoration:none}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.chip{font:500 .85rem var(--sans);border:1px solid var(--ink);background:transparent;color:var(--ink);padding:.4rem 1rem;border-radius:999px;cursor:pointer}
.chip.on{background:var(--ink);color:var(--paper)}
.gallery{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.2rem}
.vid[hidden]{display:none}
.thumb{position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:var(--r);overflow:hidden;background:var(--night);cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.thumb:hover img{transform:scale(1.05)}
.thumb iframe{width:100%;height:100%;border:0}
.play{position:absolute;inset:auto auto 12px 12px;width:42px;height:42px;border-radius:50%;background:rgba(244,239,228,.92)}
.play::after{content:"";position:absolute;left:16px;top:12px;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.vmeta{padding:.6rem .1rem 0}
.vtag{font:400 .7rem var(--mono);color:var(--rust);text-transform:uppercase;letter-spacing:.05em}
.vmeta h4{margin:.2rem 0 .3rem;font:600 .95rem/1.3 var(--sans)}
.vmeta a{font-size:.82rem;text-decoration:none}
.more{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;font-weight:500}
.more a{text-decoration:none}

.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.skills div{padding:1.3rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:rgba(251,248,241,.6)}
.skills h3{font-size:1.05rem;margin-bottom:.3rem}
.skills p{margin:0;color:var(--ink-2);font-size:.95rem}

.contact{text-align:center;padding:5rem 1.25rem;background:var(--paper-2);border-top:1px solid var(--rule)}
.contact h2{font-size:clamp(2rem,4vw,3rem)}
.contact p{color:var(--ink-2);max-width:34em;margin:1rem auto 2rem}
.links{list-style:none;padding:0;margin:2rem 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem}
.links a{color:var(--ink);font-weight:500}
.foot{text-align:center;font:400 .78rem var(--mono);color:var(--ink-2);padding:1.5rem;background:var(--paper-2)}

@media (max-width:860px){
  .nav nav a:not(.nav-cta){display:none}
  .hero{grid-template-columns:1fr;padding-top:3rem}
  .hero-plot{max-width:420px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .focus,.projects,.skills{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:.3rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.nav,.hero-plot,.filters,.gallery,.more{display:none}body{background:#fff}.band{background:#fff;color:#000}.stats div{background:#fff}}