:root {
  --ink: #1b1f27;
  --paper: #f7f6f2;
  --line: rgba(27, 31, 39, 0.13);
  --acid: #f5dfd3;
  --orange: #d85f26;
  --muted: #696963;
  --tech: #d85f26;
}

body { background: #f7f6f2; }

.nav-wrap { background: linear-gradient(#f7f6f2 28%, transparent); }
.nav { border-color: rgba(27,31,39,.12); background: rgba(250,249,246,.86); box-shadow: 0 12px 40px rgba(27,31,39,.07); }
.brand, .nav-links a { color: #1b1f27; }
.brand span { background: #1b1f27; border: 1px solid #1b1f27; color: #f47a34; }
.nav-links a { opacity: .62; }
.nav-links a:hover { opacity: 1; }
.nav-cta { background: #1b1f27; color: #fff; }

.hero { color: #1b1f27; isolation: isolate; }
.hero:before { inset: 0; width: auto; height: auto; border-radius: 0; z-index: -2; background-image: linear-gradient(rgba(27,31,39,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(27,31,39,.045) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 74%, transparent); }
.hero:after { content: ""; position: absolute; z-index: -1; width: 680px; height: 680px; right: -260px; top: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(225,111,52,.12), transparent 68%); }
.eyebrow { border-color: rgba(27,31,39,.13); background: rgba(255,255,255,.6); color: #5f5f5a; }
.status-dot { background: #e56a2d; box-shadow: 0 0 0 5px rgba(229,106,45,.1); }
.hero h1 { font-size: clamp(50px,5.65vw,82px); max-width: 800px; }
.hero h1 span { color: #c65725; font-weight: 400; }
.hero-intro { color: #62625f; max-width: 650px; }
.button.primary { background: #1b1f27; color: #fff; border-color: #1b1f27; }
.button.ghost { color: #272b31; border-color: rgba(27,31,39,.18); background: rgba(255,255,255,.4); }
.button.ghost:hover { background: #fff; }
.hero-credentials { border-color: rgba(27,31,39,.13); }
.hero-credentials dt { color: #9a674d; }
.hero-credentials dd { color: #383b40; }
.hero-foot { color: #8a684f; }
.hero-foot div { background: rgba(27,31,39,.12); }
.hero-foot p { color: #777771; }
.orbit { border-color: rgba(216,95,38,.13); }
.portrait-frame { width: min(365px,88%); border-radius: 10px; border: 1px solid rgba(27,31,39,.11); box-shadow: 0 45px 110px rgba(43,35,31,.17); }
.portrait-frame:before { content: ""; position: absolute; inset: 14px; z-index: 2; border: 1px solid rgba(255,255,255,.42); pointer-events: none; }
.portrait-frame:after { background: linear-gradient(transparent 62%, rgba(27,31,39,.24)); }
.portrait-frame img { filter: saturate(.72) contrast(1.04); }
.floating-card { color: #25282e; background: rgba(252,251,248,.92); border-color: rgba(27,31,39,.1); box-shadow: 0 25px 70px rgba(52,42,36,.15); }
.floating-card span { background: #fae9df; color: #cf5a24; border: 1px solid #f0d3c3; }
.floating-card small { color: #7a7772; }

.manifesto, .skills, .journey { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
.manifesto { border-radius: 34px 34px 0 0; border-top: 1px solid #e5e8e7; }
.section-kicker { color: #d05b25; }
.section-kicker:before { content: ""; display: inline-block; width: 26px; height: 1px; margin: 0 12px 3px 0; background: currentColor; }
.manifesto h2, .section-title, .skills-intro h2, .contact h2 { letter-spacing: -.052em; }
.manifesto h2 em, .skills-intro h2 em { color: #bd5527; }
.metrics { background: rgba(255,255,255,.38); }
.metrics strong { font-variant-numeric: tabular-nums; }

.projects { background: #f0efeb; color: #1b1f27; box-shadow: 0 0 0 100vmax #f0efeb; clip-path: inset(0 -100vmax); }
.projects .section-kicker { color: #d05b25; }
.project { border-color: rgba(27,31,39,.13); }
.project-index { color: #d05b25; }
.project-head h3 { color: #1b1f27; }
.project-head p { color: #6d6d68; }
.circle-link { background: #fff; border: 1px solid rgba(27,31,39,.14); color: #c85a27; box-shadow: 0 10px 28px rgba(48,39,34,.08); }
.circle-link:hover { background: #1b1f27; color: #f47a34; }
.project-stage { border-radius: 10px; box-shadow: 0 35px 90px rgba(48,39,34,.16); }
.workspace-stage { background: #d6d5d1; }
.thermo-stage { background: #e2e0dc; }
.main-shot { border-radius: 5px; }
.side-shot { border-radius: 4px; }
.project-details p { color: #303238; }
.project-details li { color: #6a6a65; border-color: rgba(27,31,39,.14); }
.gallery button { border-radius: 7px; border: 1px solid rgba(27,31,39,.1); box-shadow: 0 14px 36px rgba(48,39,34,.09); }

.project-badge { min-width: 132px; padding: 13px 17px; border: 1px solid rgba(27,31,39,.14); border-radius: 8px; background: rgba(255,255,255,.55); }
.project-badge span, .project-badge strong { display: block; }
.project-badge span { margin-bottom: 4px; font: 700 9px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: #b05d37; }
.project-badge strong { font: 700 13px var(--font-head); color: #24272d; }
.product-stage { height: 660px; display: block; padding: 30px; overflow: hidden; color: #f3f0ea; background-color: #20232a; background-image: linear-gradient(rgba(244,122,52,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(244,122,52,.055) 1px, transparent 1px); background-size: 42px 42px; }
.product-stage:after { background: radial-gradient(circle at 50% 48%, rgba(230,104,43,.13), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.035), transparent 42%); }
.blueprint-header { position: relative; z-index: 2; display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); font: 600 9px var(--font-head); letter-spacing: .12em; color: #969698; }
.product-workflow { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 22px; }
.product-workflow > div { position: relative; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.035); }
.product-workflow > div:not(:last-child):after { content: "→"; position: absolute; right: -9px; top: 25px; z-index: 2; color: #e16a32; }
.product-workflow span, .product-workflow strong, .product-workflow small { display: block; }
.product-workflow span { margin-bottom: 16px; font: 700 9px var(--font-head); color: #ed7439; }
.product-workflow strong { font: 700 13px var(--font-head); }
.product-workflow small { margin-top: 5px; color: #8f9092; }
.concept-visual { position: absolute; inset: 145px 0 105px; z-index: 1; display: grid; place-items: center; }
.concept-ring { position: absolute; border: 1px solid rgba(244,122,52,.2); border-radius: 50%; }
.ring-one { width: 310px; height: 310px; }
.ring-two { width: 410px; height: 410px; border-style: dashed; animation: product-spin 40s linear infinite; }
.concept-core { position: relative; z-index: 2; width: 260px; height: 260px; padding: 54px 30px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(255,255,255,.18); background: radial-gradient(circle at 35% 25%, #363b44, #25282f 65%); box-shadow: 0 25px 70px rgba(0,0,0,.32), inset 0 0 0 12px rgba(255,255,255,.018); }
.concept-core small { font: 700 8px var(--font-head); letter-spacing: .13em; color: #e87941; }
.concept-core strong { margin: 10px 0 12px; font: 800 25px var(--font-head); letter-spacing: .08em; }
.concept-core span { max-width: 190px; font-size: 10px; line-height: 1.45; color: #9b9b9d; }
.product-metrics { position: absolute; z-index: 3; left: 30px; right: 30px; bottom: 44px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.13); border-radius: 6px; background: rgba(28,30,36,.72); backdrop-filter: blur(12px); }
.product-metrics div { padding: 16px 18px; border-right: 1px solid rgba(255,255,255,.12); }
.product-metrics div:last-child { border: 0; }
.product-metrics strong, .product-metrics span { display: block; }
.product-metrics strong { font: 700 20px var(--font-head); color: #f1eee9; }
.product-metrics span { margin-top: 4px; font-size: 10px; color: #8f9092; }
.product-stage .project-label { left: auto; right: 30px; bottom: 14px; background: transparent; padding: 0; color: #77787b; }
.product-method { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(27,31,39,.13); border: 1px solid rgba(27,31,39,.13); border-radius: 8px; overflow: hidden; }
.product-method > div { min-height: 190px; padding: 26px; background: #f7f6f2; }
.product-method span { font: 700 9px var(--font-head); letter-spacing: .12em; color: #cb5b28; }
.product-method p { margin: 38px 0 0; font-size: 13px; line-height: 1.6; color: #62625f; }
@keyframes product-spin { to { transform: rotate(360deg); } }

.skill-grid { border-color: #ccd1d1; }
.skill-grid article { border-color: #ccd1d1; }
.skill-grid article:hover { background: #e8eceb; }
.skill-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #d6cec8; border-radius: 6px; color: #d05b25; font-size: 23px; }
.timeline article:hover { background: #e9eceb; }

.contact { background: #1b1f27; color: #f1f0ec; box-shadow: 0 0 0 100vmax #1b1f27; clip-path: inset(0 -100vmax); }
.contact .section-kicker { color: #f47a34; }
.contact h2 em { color: #f47a34; }
.contact-inner > p:not(.section-kicker) { color: #a7b2b7; }
.email-link { color: #edf2f4; border-color: #66808d; }
.contact-bottom { border-color: rgba(255,255,255,.16); color: #96a4aa; }
.contact-bottom a { color: #edf2f4; }
.footer-monogram { color: rgba(255,255,255,.035); }

@media (max-width: 900px) {
  .manifesto { border-radius: 24px 24px 0 0; }
  .product-stage { height: 620px; }
  .product-workflow { grid-template-columns: 1fr 1fr; }
  .product-workflow > div:not(:last-child):after { display: none; }
  .concept-visual { inset: 220px 0 100px; transform: scale(.8); }
  .product-method { grid-template-columns: 1fr; }
  .product-method > div { min-height: 0; }
  .product-method p { margin-top: 20px; }
}

@media (max-width: 600px) {
  .nav-wrap { background: linear-gradient(#f7f6f2 18%, transparent); }
  .hero h1 { font-size: 45px; }
  .hero-visual { margin-top: 55px; }
  .portrait-frame { width: 280px; }
  .card-code { left: -2%; }
  .project-stage { border-radius: 7px; }
  .project-badge { display: none; }
  .product-stage { height: 650px; padding: 18px; }
  .blueprint-header span:last-child { display: none; }
  .product-workflow { gap: 7px; }
  .product-workflow > div { padding: 10px; }
  .product-workflow span { margin-bottom: 9px; }
  .product-workflow small { font-size: 9px; }
  .concept-visual { inset: 205px 0 145px; transform: scale(.72); }
  .product-metrics { left: 18px; right: 18px; bottom: 42px; grid-template-columns: 1fr 1fr; }
  .product-metrics div { padding: 11px; }
  .product-metrics div:nth-child(2) { border-right: 0; }
  .product-metrics div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .product-stage .project-label { right: 18px; bottom: 14px; font-size: 7px; }
}