:root {
  color-scheme: light;
  --page: #f7f7f2;
  --surface: #ffffff;
  --text: #20231f;
  --muted: #777c73;
  --line: #e6e8df;
  --accent: #526a52;
  --accent-dark: #3e5741;
  --sage: #e2e9da;
  --peach: #f1e0d3;
  --blue: #dce6e7;
  --shadow: 0 22px 60px rgb(41 51 39 / 11%);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #181b18;
  --surface: #222622;
  --text: #eef0e8;
  --muted: #a1a79c;
  --line: #343a33;
  --accent: #a2b89b;
  --accent-dark: #c2d5ba;
  --sage: #343e32;
  --peach: #44352c;
  --blue: #2e3b3c;
  --shadow: 0 22px 60px rgb(0 0 0 / 22%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  transition: background-color 180ms ease, color 180ms ease;
}

button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { display: block; }

.container { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 10px 14px; transform: translateY(-160%); background: var(--text); color: var(--page); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 5; top: 0; background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: "Manrope", sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -2px; }
.brand span, .section-heading h2 > span { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 36px; font-size: 13px; font-weight: 600; }
.site-nav > a { color: var(--muted); transition: color 160ms ease; }
.site-nav > a:hover, .text-link:hover { color: var(--accent); }
.theme-toggle { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.theme-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon--sun { display: none; }
.theme-toggle__label { font-size: 12px; }
.menu-toggle { display: none; }

.hero { min-height: 612px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 54px; padding-block: 72px 86px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: #83a77a; box-shadow: 0 0 0 4px color-mix(in srgb, #83a77a 16%, transparent); }
.hero h1, .section-heading h2, .contact-inner h2 { margin: 20px 0 0; font-family: "Manrope", sans-serif; font-weight: 600; letter-spacing: -3.8px; line-height: 1.1; }
.hero h1 { font-size: clamp(54px, 6.1vw, 76px); }
.hero h1 span, .contact-inner h2 span { color: var(--accent); }
.hero-description { max-width: 420px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 0 19px; border-radius: 5px; font-size: 12px; font-weight: 700; transition: transform 160ms ease, background-color 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.button--primary { background: var(--accent); color: #fff; }
.button--primary:hover { background: var(--accent-dark); }
.text-link { font-size: 12px; font-weight: 700; transition: color 160ms ease; }
.text-link span { margin-left: 5px; }
.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 57px; color: var(--muted); font-size: 11px; }
.hero-note__line { width: 35px; height: 1px; background: var(--line); }

.hero-art { position: relative; min-height: 410px; display: grid; overflow: clip; place-items: center; isolation: isolate; }
.hero-art::before { position: absolute; z-index: -1; width: 340px; height: 340px; border-radius: 50%; background: var(--sage); content: ""; }
.art-orbit { position: absolute; z-index: -1; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 50%; transform: rotate(-27deg); }
.art-orbit--one { width: 440px; height: 180px; }
.art-orbit--two { width: 420px; height: 310px; transform: rotate(33deg); }
.art-sun { position: absolute; top: 33px; right: 42px; width: 65px; height: 65px; border-radius: 50%; background: #d49b68; box-shadow: 0 0 0 10px color-mix(in srgb, #d49b68 16%, transparent); }
.art-window { z-index: 1; width: min(365px, 88%); overflow: hidden; border: 1px solid color-mix(in srgb, #fff 65%, transparent); border-radius: 9px; background: #272e28; box-shadow: var(--shadow); transform: rotate(-4deg); }
.art-window__bar { height: 38px; display: flex; align-items: center; gap: 5px; padding-inline: 13px; background: #323a33; }
.art-window__bar i { width: 7px; height: 7px; border-radius: 50%; background: #c57863; }
.art-window__bar i:nth-child(2) { background: #d0ac67; }
.art-window__bar i:nth-child(3) { background: #81a275; }
.art-window__bar span { margin-left: auto; color: #aeb6aa; font-size: 9px; letter-spacing: .4px; }
.art-window__body { min-height: 190px; display: flex; flex-direction: column; justify-content: center; padding: 25px 32px; color: #e7ebdf; font-family: monospace; font-size: 13px; line-height: 2; }
.code-muted { color: #85947d; }
.code-line { padding-left: 16px; }
.code-line b { color: #c8a878; font-weight: 400; }
.code-line em { color: #a9c596; font-style: normal; }
.code-cursor { width: 7px; height: 15px; margin: 4px 0 0 16px; background: #bacb9d; }
.art-sticker { position: absolute; z-index: 2; right: 1px; bottom: 55px; width: 89px; height: 89px; display: grid; place-content: center; border-radius: 50%; background: #d8ab82; color: #393126; font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; transform: rotate(9deg); }
.art-caption { position: absolute; right: 6px; bottom: 0; left: 6px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }

.intro-band { padding-block: 84px; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 48%, var(--page)); }
.intro-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 48px; }
.intro-grid > .eyebrow { padding-top: 12px; }
.intro-grid h2 { max-width: 600px; margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(28px, 3.6vw, 43px); font-weight: 600; letter-spacing: -2px; line-height: 1.25; }
.intro-grid h2 span { color: var(--accent); }
.intro-copy { max-width: 610px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.skills span, .project-tags span { padding: 6px 11px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 10px; }

.projects-section { padding-block: 105px 100px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 42px; }
.section-heading h2 { margin-top: 13px; font-size: clamp(35px, 4.2vw, 49px); letter-spacing: -2.8px; }
.section-aside { margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { min-width: 0; }
.project-visual { position: relative; height: 260px; display: grid; overflow: hidden; place-items: center; border-radius: 5px; }
.project-card--sage .project-visual { background: var(--sage); }
.project-card--peach .project-visual { background: var(--peach); }
.project-card--blue .project-visual { background: var(--blue); }
.journal-card { position: relative; width: 180px; height: 210px; display: flex; flex-direction: column; padding: 17px; overflow: hidden; border: 7px solid #f8f6ec; background: #f6f3e8; box-shadow: 0 16px 40px rgb(44 54 40 / 14%); color: #455241; transform: rotate(-6deg); }
.journal-mark { font-family: "Manrope", sans-serif; font-size: 19px; font-weight: 800; }
.journal-small { margin-top: 15px; font-size: 6px; letter-spacing: 1.2px; }
.journal-title { margin-top: 7px; font-family: "Manrope", sans-serif; font-size: 21px; font-weight: 600; line-height: 1.17; letter-spacing: -1px; }
.journal-cta { margin-top: auto; font-size: 7px; }
.journal-cta b { padding-left: 8px; }
.journal-flower { position: absolute; right: 5px; bottom: 37px; color: #b4774d; font-size: 57px; opacity: .78; }
.coffee-label { position: absolute; top: 29px; left: 35px; color: #5b4438; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; transform: rotate(-8deg); }
.coffee-label i { color: #bb7551; font-size: 20px; letter-spacing: -1px; }
.coffee-cup { z-index: 1; position: absolute; right: 58px; bottom: 34px; width: 90px; height: 104px; border: 1px solid #e2d1bf; border-radius: 8px 8px 30px 30px; background: linear-gradient(100deg, #f7efe2, #ded0bb); box-shadow: 14px 13px 22px rgb(76 51 36 / 13%); transform: rotate(7deg); }
.coffee-cup::before { position: absolute; top: 28px; right: -29px; width: 30px; height: 41px; border: 7px solid #e2d1bf; border-left: 0; border-radius: 0 20px 20px 0; content: ""; }
.coffee-cup span { position: absolute; top: 7px; right: 9px; left: 9px; height: 8px; border-radius: 50%; background: #71503a; }
.coffee-bean { position: absolute; width: 24px; height: 35px; border-radius: 50%; background: #86583d; transform: rotate(36deg); }
.coffee-bean::after { position: absolute; top: 4px; bottom: 4px; left: 11px; width: 1px; background: #c3926d; content: ""; }
.coffee-bean--one { right: 48px; bottom: 32px; }
.coffee-bean--two { right: 171px; bottom: 58px; transform: rotate(-27deg) scale(.7); }
.coffee-spark { position: absolute; right: 38px; top: 33px; color: #bf7d58; font-size: 38px; }
.finance-ui { width: 218px; min-height: 166px; display: flex; flex-direction: column; padding: 17px; border: 1px solid rgb(255 255 255 / 82%); border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 15px 40px rgb(44 54 40 / 12%); transform: rotate(3deg); }
.finance-greeting { color: var(--muted); font-size: 6px; font-weight: 700; letter-spacing: 1px; }
.finance-balance { margin-top: 5px; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.7px; }
.finance-caption { margin-top: 2px; color: var(--muted); font-size: 7px; }
.finance-caption b { margin-left: 5px; color: #709265; }
.finance-chart { height: 58px; display: flex; align-items: end; gap: 9px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.finance-chart i { flex: 1; border-radius: 3px 3px 0 0; background: #829b7a; opacity: .82; }
.finance-chart i:nth-child(1) { height: 35%; }.finance-chart i:nth-child(2) { height: 56%; }.finance-chart i:nth-child(3) { height: 43%; }.finance-chart i:nth-child(4) { height: 76%; }.finance-chart i:nth-child(5) { height: 58%; }.finance-chart i:nth-child(6) { height: 92%; }.finance-chart i:nth-child(7) { height: 69%; }
.finance-days { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font-size: 6px; }
.finance-spark { position: absolute; top: 40px; right: 36px; color: #829b7a; font-size: 37px; }
.project-info { display: flex; align-items: start; justify-content: space-between; margin-top: 17px; }
.project-info h3 { margin: 0; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; }
.project-info p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.project-number { color: var(--muted); font-size: 10px; }
.project-tags { display: flex; gap: 7px; margin-top: 13px; }
.project-tags span { padding: 4px 8px; font-size: 9px; }
.portfolio-note { margin: 27px 0 0; color: var(--muted); font-size: 10px; }

.contact-section { overflow: hidden; background: #273329; color: #f4f3ec; }
.contact-inner { position: relative; min-height: 368px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 64px; }
.contact-inner .eyebrow { color: #b9c3b4; }
.contact-inner h2 { z-index: 1; margin: 13px 0 23px; font-size: clamp(42px, 5.4vw, 63px); letter-spacing: -3px; }
.contact-inner h2 span { color: #b4c9a8; }
.button--light { min-height: 45px; background: #f1f0e7; color: #273329; }
.button--light:hover { background: #dce5d4; }
.contact-note { margin: 9px 0 0; color: #b9c3b4; font-size: 10px; }
.contact-decoration { position: absolute; right: 50px; bottom: -118px; color: #344336; font-size: 420px; line-height: 1; }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-inner .brand { font-size: 23px; }
.footer-inner p { margin: 0; color: var(--muted); font-size: 10px; }

:root[data-theme="dark"] .theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun { display: block; }
:root[data-theme="dark"] .art-window { border-color: #465146; }
:root[data-theme="dark"] .journal-card { border-color: #e6e0d0; background: #f6f3e8; color: #455241; }
:root[data-theme="dark"] .coffee-cup { border-color: #ad9a82; background: linear-gradient(100deg, #ded0bb, #bbae98); }
:root[data-theme="dark"] .coffee-cup::before { border-color: #ad9a82; }
:root[data-theme="dark"] .coffee-cup span { background: #71503a; }
:root[data-theme="dark"] .contact-section { background: #202a21; }

@media (max-width: 820px) {
  .container { width: min(100% - 48px, 680px); }
  .hero { min-height: auto; grid-template-columns: 1fr 1fr; gap: 22px; padding-block: 72px; }
  .hero h1 { font-size: clamp(53px, 8vw, 68px); }
  .hero-art { min-height: 355px; }
  .hero-art::before { width: 270px; height: 270px; }
  .art-orbit--one { width: 360px; }
  .art-orbit--two { width: 350px; height: 270px; }
  .art-sun { right: 16px; }
  .art-sticker { right: -7px; bottom: 39px; width: 77px; height: 77px; font-size: 9px; }
  .intro-grid { grid-template-columns: .48fr 1.52fr; gap: 25px; }
  .project-grid { gap: 16px; }
  .project-visual { height: 220px; }
  .coffee-cup { right: 38px; }
  .coffee-bean--one { right: 28px; }
  .coffee-bean--two { right: 142px; }
  .coffee-label { left: 20px; }
}

@media (max-width: 600px) {
  .container { width: calc(100% - 40px); }
  .nav-wrap { min-height: 68px; }
  .menu-toggle { width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; }
  .menu-toggle span { width: 15px; height: 1.5px; background: var(--text); }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 10px 20px 17px; border-bottom: 1px solid var(--line); background: var(--page); }
  .site-nav.is-open { display: flex; flex-direction: column; }
  .site-nav > a { padding-block: 11px; }
  .site-nav .theme-toggle { align-self: flex-start; margin-top: 8px; }
  .hero { grid-template-columns: 1fr; gap: 12px; padding-block: 61px 55px; }
  .hero h1 { font-size: clamp(56px, 15vw, 74px); }
  .hero-description { max-width: 390px; font-size: 14px; }
  .hero-actions { gap: 17px; }
  .hero-note { margin-top: 35px; }
  .hero-art { width: min(100%, 430px); min-height: 355px; margin: 12px auto 0; }
  .hero-art::before { width: 265px; height: 265px; }
  .art-orbit--one { width: 370px; }
  .art-orbit--two { width: 350px; }
  .art-sun { right: 26px; }
  .art-sticker { right: 7px; bottom: 39px; }
  .intro-band { padding-block: 57px; }
  .intro-grid { grid-template-columns: 1fr; gap: 17px; }
  .intro-grid h2 { font-size: 31px; }
  .intro-copy { font-size: 13px; }
  .projects-section { padding-block: 72px; }
  .section-heading { align-items: start; gap: 16px; margin-bottom: 27px; }
  .section-heading h2 { font-size: 37px; letter-spacing: -2.3px; }
  .section-aside { display: none; }
  .project-grid { grid-template-columns: 1fr; gap: 32px; }
  .project-visual { height: 260px; }
  .coffee-cup { right: max(70px, calc(50% - 70px)); }
  .coffee-bean--one { right: max(58px, calc(50% - 91px)); }
  .coffee-bean--two { right: max(180px, calc(50% + 29px)); }
  .coffee-label { left: max(45px, calc(50% - 125px)); }
  .finance-ui { width: 235px; }
  .portfolio-note { line-height: 1.7; }
  .contact-inner { min-height: 335px; }
  .contact-inner h2 { font-size: 47px; }
  .contact-decoration { right: -104px; bottom: -73px; font-size: 290px; }
  .footer-inner { min-height: 115px; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-block: 16px; }
  .footer-inner p:nth-of-type(1) { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}