:root {
    color-scheme: light;
    --paper: #f6f5f0;
    --ink: #20221f;
    --muted: #6f716a;
    --line: #d9d9d0;
    --green: #c7d46c;
    --coral: #ef765c;
    --mono: "DM Mono", "Courier New", monospace;
    --sans: "Manrope", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

::selection { color: var(--ink); background: var(--green); }

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

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

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 5px;
}

.page-width { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }

.site-header {
    position: relative;
    z-index: 10;
    width: min(1320px, calc(100% - 96px));
    height: 86px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.wordmark { font-size: 27px; font-weight: 800; letter-spacing: 0; }
.wordmark span, .education-mark span { color: var(--coral); }

.primary-navigation { display: flex; align-items: center; gap: 38px; font-size: 12px; font-weight: 700; }
.primary-navigation > a:not(.nav-contact) { transition: color .2s ease; }
.primary-navigation > a:not(.nav-contact):hover { color: #777b35; }
.nav-contact { padding: 12px 15px; background: var(--ink); color: white; }
.nav-contact span { margin-left: 13px; color: var(--green); }
.menu-toggle { display: none; }

.hero {
    position: relative;
    min-height: 654px;
    padding-top: 94px;
    padding-bottom: 98px;
    display: grid;
    grid-template-columns: 1fr .88fr;
    align-items: center;
    gap: 54px;
}

.hero-copy { position: relative; z-index: 2; padding-bottom: 3px; }
.eyebrow, .section-label, .art-caption, .job-date, .preview-kicker, .preview-number, .scroll-cue, .site-footer, .contact-bottom {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0;
}

.eyebrow { margin: 0 0 24px; font-weight: 500; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: #a8b84a; box-shadow: 0 0 0 4px #e7e9d5; }
.eyebrow-divider { margin-inline: 8px; color: #a2a39a; }

.hero h1 {
    max-width: 700px;
    margin: 0;
    font-size: clamp(55px, 6.1vw, 82px);
    font-weight: 600;
    line-height: .99;
    letter-spacing: -3px;
}

.highlight-word { position: relative; z-index: 0; white-space: nowrap; }
.highlight-word::after { position: absolute; z-index: -1; right: 1px; bottom: 4px; left: 0; height: 19px; background: var(--green); content: ""; transform: rotate(-1.2deg); }
.hero-intro { max-width: 430px; margin: 26px 0 0; color: #585a54; font-size: 15px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 29px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 19px; min-height: 48px; padding: 0 18px; font-size: 11px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: white; }
.button-dark span { color: var(--green); font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 5px; border-bottom: 1px solid #aaa99e; font-size: 11px; font-weight: 700; transition: gap .2s ease; }
.text-link:hover { gap: 17px; }
.text-link span { color: #81843d; font-size: 14px; }
.hero-location { display: flex; align-items: center; gap: 8px; margin-top: 48px; color: #6c6e66; font-family: var(--mono); font-size: 9px; }
.location-mark { color: #899340; font-size: 16px; }
.hero-location-separator { color: var(--coral); }

.hero-art { position: relative; min-height: 425px; padding: 26px 0 22px 18px; }
.art-caption { display: flex; justify-content: space-between; margin: 0 3px 11px 0; color: #6b6d63; font-size: 9px; }
.browser-window { position: relative; z-index: 1; overflow: hidden; background: white; border: 1px solid #d8d8ce; box-shadow: 13px 16px 0 #e8e7dc; transform: rotate(1.5deg); }
.browser-top { height: 34px; display: grid; grid-template-columns: 50px 1fr 28px; align-items: center; padding-inline: 10px; background: #fbfbf8; border-bottom: 1px solid #e8e8e1; }
.browser-dots { display: flex; gap: 4px; }
.browser-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c7c7be; }
.browser-dots i:first-child { background: var(--coral); }
.browser-address { width: 76%; justify-self: center; padding: 4px 7px; background: #f0f0ea; color: #92938b; text-align: center; font-family: var(--mono); font-size: 7px; }
.browser-menu { color: #7a7b74; text-align: right; font-size: 15px; line-height: 1; }
.preview-site { position: relative; min-height: 329px; overflow: hidden; padding: 0 22px 15px; background: #f3efe6; }
.preview-nav { position: relative; z-index: 2; height: 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dad5ca; }
.preview-nav b { font-size: 9px; letter-spacing: 1px; }
.preview-nav b span { color: var(--coral); }
.preview-nav div { display: flex; gap: 10px; }
.preview-nav div i { width: 19px; height: 3px; background: #aaa79c; }
.preview-nav strong { font-family: var(--mono); font-size: 6px; font-weight: 400; }
.preview-nav strong span { margin-left: 4px; }
.preview-content { position: relative; z-index: 1; width: 66%; padding-top: 28px; }
.preview-kicker { display: flex; align-items: center; gap: 6px; font-size: 6px; }
.preview-kicker span { width: 14px; height: 1px; background: var(--coral); }
.preview-headline { margin-top: 12px; font-size: 51px; font-weight: 500; line-height: .92; letter-spacing: -2px; }
.preview-headline em { color: #657344; font-family: Georgia, serif; font-weight: 400; }
.preview-foot { display: flex; justify-content: space-between; align-items: end; width: 135%; margin-top: 17px; font-size: 7px; line-height: 1.5; }
.preview-foot b { font-family: var(--mono); font-size: 6px; font-weight: 400; }
.preview-shape { position: absolute; top: 104px; right: -2px; width: 44%; height: 173px; overflow: hidden; background: #aeb893; border-radius: 52% 0 0 0; }
.shape-inner { position: absolute; top: 21px; left: 20px; width: 88%; height: 170px; border: 1px solid #e7e5d9; border-radius: 50% 50% 0 0; }
.shape-inner::before, .shape-inner::after { position: absolute; bottom: 0; width: 1px; height: 150px; background: #e7e5d9; content: ""; }
.shape-inner::before { left: 37%; }
.shape-inner::after { left: 68%; }
.preview-number { position: absolute; right: 14px; bottom: 9px; color: #6b6c63; font-size: 6px; }
.art-sticker { position: absolute; z-index: 3; right: -20px; bottom: 42px; width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--coral); color: #26241f; text-align: center; transform: rotate(8deg); }
.art-sticker span { font-family: var(--mono); font-size: 8px; line-height: 1.35; }
.art-sticker b { font-size: 19px; font-weight: 400; }
.art-footnote { position: absolute; right: 0; bottom: 0; color: #6a6c64; font-family: Georgia, serif; font-size: 13px; font-style: italic; line-height: 1.3; text-align: right; }
.scroll-cue { position: absolute; bottom: 26px; left: 0; display: flex; align-items: center; gap: 10px; color: #6d6f68; font-size: 8px; }
.scroll-cue span { width: 24px; height: 1px; background: var(--coral); }

.intro-band { padding: 92px 0 88px; background: #e9e9df; }
.intro-layout { display: grid; grid-template-columns: 1fr 1.55fr .73fr; align-items: start; gap: 46px; }
.section-label { margin: 0; color: #65675f; font-size: 9px; }
.section-label span { margin-right: 10px; color: #9b9d91; }
.intro-copy h2 { max-width: 490px; margin: -7px 0 18px; font-size: 37px; font-weight: 600; line-height: 1.12; letter-spacing: -1.2px; }
.intro-copy > p { max-width: 515px; margin: 0 0 21px; color: #5d5f58; font-size: 13px; line-height: 1.9; }
.stat-stack { border-top: 1px solid #c9c9bf; }
.stat { min-height: 73px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #c9c9bf; }
.stat strong { min-width: 50px; font-size: 35px; font-weight: 600; line-height: 1; }
.stat strong span { color: #8a913e; }
.stat > span { color: #686a62; font-family: var(--mono); font-size: 8px; line-height: 1.5; }

.experience-section { padding-top: 105px; padding-bottom: 104px; }
.section-heading { display: grid; grid-template-columns: 1fr 1.5fr .7fr; align-items: end; margin-bottom: 36px; }
.section-heading .section-label { align-self: center; }
.section-heading h2 { margin: 0; font-size: 44px; font-weight: 600; letter-spacing: -1.5px; }
.heading-aside { margin: 0 0 5px; color: #74766d; font-family: var(--mono); font-size: 9px; line-height: 1.6; text-align: right; }
.job-entry { display: grid; grid-template-columns: 1fr 2.2fr .45fr; gap: 35px; padding: 31px 0 34px; border-top: 1px solid var(--line); }
.job-date { display: flex; flex-direction: column; gap: 12px; color: #72746c; font-size: 9px; }
.job-date span { color: #9a9b91; font-size: 8px; }
.job-details h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.job-details h3 span { color: var(--coral); }
.company-name { margin: 5px 0 16px; color: #777970; font-size: 11px; }
.company-name span { padding-inline: 4px; color: var(--coral); }
.job-details ul { display: grid; gap: 7px; margin: 0; padding: 0; color: #5e605a; font-size: 11px; line-height: 1.65; list-style: none; }
.job-details li { position: relative; padding-left: 14px; }
.job-details li::before { position: absolute; top: 8px; left: 0; width: 4px; height: 4px; background: #a1aa50; content: ""; }
.job-index { color: #d9d9d1; font-size: 53px; font-weight: 600; line-height: 1; text-align: right; }

.skills-section { padding: 92px 0 98px; background: var(--ink); color: var(--paper); }
.skills-inner { display: grid; grid-template-columns: .85fr 1.4fr; gap: 100px; }
.skills-heading .section-label { color: #c1c1b4; }
.skills-heading .section-label span { color: #93958b; }
.skills-heading h2 { margin: 31px 0 16px; font-size: 39px; font-weight: 500; line-height: 1.15; letter-spacing: -1.2px; }
.skills-heading h2 span { color: var(--green); }
.skills-heading > p:last-child { max-width: 310px; margin: 0; color: #b8b9b0; font-size: 12px; line-height: 1.8; }
.skill-list { border-top: 1px solid #4a4c46; }
.skill-row { min-height: 78px; display: grid; grid-template-columns: 36px 1fr 1.55fr 17px; align-items: center; gap: 14px; border-bottom: 1px solid #4a4c46; }
.skill-number { color: #96998d; font-family: var(--mono); font-size: 9px; }
.skill-row h3 { margin: 0; font-size: 13px; font-weight: 600; }
.skill-row p { margin: 0; color: #babbb3; font-size: 10px; line-height: 1.6; }
.skill-row p i { color: var(--coral); font-style: normal; }
.skill-arrow { color: var(--green); font-size: 13px; text-align: right; }

.education-section { min-height: 193px; display: grid; grid-template-columns: 1fr 2fr .5fr; align-items: center; gap: 35px; }
.education-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.education-content h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.5px; }
.education-content p { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 11px; }
.education-content p span { color: #74766e; font-size: 10px; }
.education-content p i { color: var(--coral); font-style: normal; }
.education-mark { justify-self: end; color: #e5e5dc; font-size: 57px; font-weight: 700; }

.contact-section { padding: 76px 0 33px; background: #dfe4c7; }
.contact-inner { position: relative; }
.contact-inner .section-label { color: #626653; }
.contact-inner h2 { margin: 27px 0 27px; font-size: 68px; font-weight: 600; line-height: .99; letter-spacing: -2px; }
.contact-inner h2 em { color: #727b36; font-family: Georgia, serif; font-weight: 400; }
.contact-link { display: inline-flex; align-items: center; gap: 17px; padding-bottom: 8px; border-bottom: 1px solid #92977c; font-size: 16px; font-weight: 600; }
.contact-link span { color: #777f3a; font-size: 20px; }
.contact-bottom { display: flex; justify-content: space-between; margin-top: 81px; padding-top: 16px; border-top: 1px solid #c5cbb0; color: #626653; font-size: 9px; }
.contact-bottom a { color: var(--ink); }
.site-footer { min-height: 78px; display: flex; align-items: center; justify-content: space-between; color: #73756d; font-size: 8px; }
.site-footer .wordmark { color: var(--ink); font-family: var(--sans); font-size: 21px; }

@media (min-width: 1500px) {
    .hero h1 { font-size: 82px; }
}

@media (max-width: 1000px) {
    .page-width, .site-header { width: calc(100% - 64px); }
    .hero { grid-template-columns: 1fr .82fr; gap: 27px; }
    .hero h1 { font-size: 61px; }
    .hero-art { padding-left: 7px; }
    .art-sticker { right: -8px; }
    .intro-layout { grid-template-columns: .7fr 1.5fr .8fr; gap: 25px; }
    .skills-inner { gap: 54px; }
    .skill-row { grid-template-columns: 25px 1fr 1.4fr 14px; gap: 9px; }
}

@media (max-width: 740px) {
    html { scroll-padding-top: 70px; }
    .page-width, .site-header { width: calc(100% - 40px); }
    .site-header { height: 70px; }
    .menu-toggle { width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
    .menu-toggle span { width: 17px; height: 1px; background: var(--ink); transition: transform .2s ease; }
    .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); }
    .primary-navigation { position: absolute; top: 69px; right: -20px; left: -20px; display: none; align-items: stretch; gap: 0; padding: 10px 20px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
    .primary-navigation.is-open { display: flex; flex-direction: column; }
    .primary-navigation > a:not(.nav-contact) { padding: 13px 0; border-bottom: 1px solid var(--line); }
    .nav-contact { align-self: flex-start; margin-top: 13px; }
    .hero { min-height: 0; padding-top: 65px; padding-bottom: 83px; grid-template-columns: 1fr; gap: 42px; }
    .eyebrow { font-size: 8px; }
    .hero h1 { font-size: clamp(49px, 11vw, 67px); letter-spacing: -2.4px; }
    .hero-intro { max-width: 420px; font-size: 14px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
    .hero-location { flex-wrap: wrap; margin-top: 32px; font-size: 8px; }
    .hero-art { width: min(100%, 500px); min-height: 0; justify-self: center; padding: 8px 7px 43px 0; }
    .preview-site { min-height: 300px; }
    .preview-headline { font-size: 46px; }
    .scroll-cue { bottom: 14px; }
    .art-sticker { right: -3px; bottom: 59px; width: 76px; height: 76px; }
    .art-sticker span { font-size: 7px; }
    .art-footnote { bottom: 11px; font-size: 11px; }
    .intro-band { padding: 63px 0; }
    .intro-layout { grid-template-columns: 1fr; gap: 30px; }
    .intro-copy h2 { margin-top: 0; font-size: 34px; }
    .stat-stack { display: grid; grid-template-columns: repeat(3, 1fr); }
    .stat { min-height: 89px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; border-right: 1px solid #c9c9bf; }
    .stat:last-child { border-right: 0; }
    .stat strong { min-width: 0; font-size: 29px; }
    .stat > span { font-size: 7px; }
    .experience-section { padding-top: 68px; padding-bottom: 68px; }
    .section-heading { grid-template-columns: 1fr auto; gap: 11px; margin-bottom: 22px; }
    .section-heading .section-label { grid-column: 1 / -1; }
    .section-heading h2 { font-size: 39px; }
    .heading-aside { font-size: 8px; }
    .job-entry { grid-template-columns: 1fr 32px; gap: 10px; padding: 24px 0 26px; }
    .job-date { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; font-size: 8px; }
    .job-date span { font-size: 7px; }
    .job-details h3 { max-width: 450px; font-size: 18px; }
    .company-name { line-height: 1.55; }
    .job-details ul { font-size: 10px; }
    .job-index { align-self: start; padding-top: 3px; font-size: 30px; }
    .skills-section { padding: 64px 0 70px; }
    .skills-inner { grid-template-columns: 1fr; gap: 36px; }
    .skills-heading h2 { margin-top: 23px; font-size: 34px; }
    .skill-row { min-height: 83px; grid-template-columns: 24px 1fr 14px; gap: 5px 10px; padding: 10px 0; }
    .skill-number { grid-row: 1 / 3; align-self: start; padding-top: 3px; }
    .skill-row h3 { font-size: 12px; }
    .skill-row p { grid-column: 2; font-size: 9px; }
    .skill-arrow { grid-column: 3; grid-row: 1 / 3; }
    .education-section { min-height: 170px; grid-template-columns: 1fr auto; gap: 14px; padding-block: 28px; }
    .education-section > .section-label { grid-column: 1 / -1; }
    .education-content { align-items: flex-start; flex-direction: column; gap: 11px; }
    .education-content h2 { font-size: 24px; }
    .education-mark { font-size: 47px; }
    .contact-section { padding-top: 62px; }
    .contact-inner h2 { margin: 24px 0; font-size: 57px; letter-spacing: -1.7px; }
    .contact-link { gap: 9px; font-size: 12px; }
    .contact-bottom { flex-wrap: wrap; gap: 10px 16px; margin-top: 61px; padding-top: 14px; font-size: 8px; }
    .site-footer { min-height: 89px; display: grid; grid-template-columns: 1fr auto; gap: 3px; padding-block: 15px; font-size: 7px; }
    .site-footer > span:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
    .site-footer > span:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
    .page-width, .site-header { width: calc(100% - 32px); }
    .hero h1 { font-size: 46px; }
    .eyebrow { font-size: 7px; }
    .hero-location { gap: 5px; font-size: 7px; }
    .preview-site { min-height: 264px; padding-inline: 15px; }
    .preview-headline { font-size: 40px; }
    .preview-shape { top: 94px; height: 147px; }
    .art-caption { font-size: 8px; }
    .contact-inner h2 { font-size: 50px; }
    .contact-link { font-size: 11px; }
}

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

/* Developer portfolio direction: sharper type, a brighter signal green, and a portrait-led hero. */
:root {
    --paper: #f4f3ed;
    --ink: #191c22;
    --green: #c7f36b;
    --coral: #ff765e;
    --display: "Space Grotesk", "Manrope", sans-serif;
}

body { font-family: var(--display); }
.wordmark, .hero h1, .intro-copy h2, .section-heading h2, .skills-heading h2,
.education-content h2, .contact-inner h2, .job-details h3 { font-family: var(--display); }
.hero h1 { font-size: clamp(59px, 6.5vw, 88px); font-weight: 700; letter-spacing: -4.5px; line-height: .94; }
.highlight-word::after { bottom: 2px; height: 16px; }
.hero-intro { font-size: 16px; }
.hero-art { min-height: 440px; padding: 0 18px 14px 12px; }
.portrait-window { position: relative; z-index: 1; width: min(100%, 390px); margin: 0 auto; padding: 10px; background: #20242b; border: 1px solid #343942; box-shadow: 14px 14px 0 var(--green); transform: rotate(2deg); }
.portrait-top, .portrait-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #e8e9e5; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; }
.portrait-top { height: 28px; padding: 0 5px 9px; }
.portrait-top > span:first-child { color: var(--green); }
.portrait-top i, .portrait-top b { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--coral); }
.portrait-top b { margin: 0 0 1px 5px; background: var(--green); box-shadow: 0 0 10px #c7f36b99; }
.portrait-image-wrap { height: 370px; overflow: hidden; background: #d9d9d7; }
.portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: saturate(.82) contrast(1.04); }
.portrait-bottom { height: 27px; padding: 9px 5px 0; color: #b9bcb7; font-size: 7px; }
.portrait-bottom b { color: var(--green); font-size: 11px; }
.code-chip { position: absolute; z-index: 2; padding: 11px 13px; background: var(--green); color: #191c22; font-family: var(--mono); font-size: 10px; box-shadow: 4px 4px 0 #191c2233; }
.code-chip-one { top: 58px; left: -3px; transform: rotate(-7deg); }
.code-chip-one span { margin-right: 8px; color: #68744e; }
.code-chip-two { right: -4px; bottom: 90px; background: var(--coral); transform: rotate(5deg); }
.code-chip-two span { color: #fff3dc; }
.portrait-note { position: absolute; right: 7px; bottom: 0; margin: 0; color: #5e625d; font-size: 15px; line-height: 1.15; text-align: right; }
.portrait-note em { color: #657b31; font-family: Georgia, serif; }

@media (min-width: 1500px) { .hero h1 { font-size: 88px; } }
@media (max-width: 1000px) {
    .hero h1 { font-size: clamp(54px, 6vw, 68px); letter-spacing: -3px; }
    .hero-art { padding-inline: 4px 12px; }
    .portrait-image-wrap { height: 330px; }
}
@media (max-width: 740px) {
    .hero h1 { font-size: clamp(52px, 12vw, 72px); letter-spacing: -3.4px; }
    .hero-art { width: min(100%, 480px); min-height: 0; padding: 4px 12px 48px 6px; }
    .portrait-window { width: min(100%, 390px); }
    .portrait-image-wrap { height: clamp(290px, 82vw, 390px); }
    .code-chip-one { left: -4px; }
    .code-chip-two { right: -4px; bottom: 90px; }
}

.work-section { padding-top: 94px; padding-bottom: 98px; }
.work-heading { margin-bottom: 12px; }
.work-intro { margin: 0 0 30px; color: #686b64; font-size: 14px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.work-card { min-width: 0; padding: 11px 11px 17px; border: 1px solid #d8d9d1; background: #fbfaf5; transition: transform .25s ease, box-shadow .25s ease; }
.work-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px #191c2212; }
.work-visual { position: relative; height: 185px; overflow: hidden; margin-bottom: 17px; }
.visual-label { position: absolute; z-index: 2; top: 13px; left: 13px; font-family: var(--mono); font-size: 8px; letter-spacing: .07em; }
.visual-stamp { position: absolute; right: 12px; bottom: 8px; color: #ffffffa8; font-family: var(--display); font-size: 37px; font-weight: 700; }
.design-visual { background: #dce4ca; }
.visual-window { position: absolute; inset: 38px 30px 16px; padding: 13px; background: #f8f5ed; box-shadow: 8px 8px 0 #191c2215; transform: rotate(-3deg); }
.visual-window i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: #b5bb9b; }
.visual-window i:first-child { background: var(--coral); }
.visual-window b, .visual-window strong, .visual-window em { position: absolute; display: block; }
.visual-window b { top: 45px; left: 14px; width: 47%; height: 8px; background: #242832; }
.visual-window strong { top: 62px; left: 14px; width: 34%; height: 5px; background: #858b74; }
.visual-window em { right: 13px; bottom: 13px; width: 32%; height: 50px; background: var(--coral); border-radius: 50% 50% 0 0; }
.systems-visual { background: #242832; color: #f3f2eb; }
.system-block { position: absolute; border: 1px solid #707b61; }
.block-a { top: 43px; left: 17px; width: 53%; height: 50px; background: var(--green); }
.block-b { top: 103px; left: 17px; width: 30%; height: 47px; background: #ef765c; }
.block-c { top: 103px; right: 17px; width: 37%; height: 47px; background: #e9e8df; }
.commerce-visual { background: #f0d5c8; }
.product-tile { position: absolute; top: 35px; left: 50%; width: 136px; height: 142px; padding: 10px; background: #fffaf3; box-shadow: 8px 8px 0 #191c2215; transform: translateX(-50%) rotate(2deg); }
.product-tile b { display: block; height: 82px; background: #bec7a4; }
.product-tile i { display: block; width: 49%; height: 5px; margin-top: 7px; background: #262a2d; }
.product-tile strong { display: block; width: 31%; height: 4px; margin-top: 4px; background: #a4a69a; }
.product-tile em { position: absolute; right: 10px; bottom: 9px; color: #30332d; font-family: var(--mono); font-size: 6px; font-style: normal; }
.work-kicker { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 9px; color: #777b6f; font-family: var(--mono); font-size: 8px; }
.work-kicker span { color: #999b90; }
.work-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.5px; }
.work-card > p:not(.work-kicker) { min-height: 69px; margin: 0; color: #666961; font-size: 11px; line-height: 1.7; }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.work-tags span { padding: 5px 7px; background: #eeeee7; color: #50544b; font-family: var(--mono); font-size: 7px; }
.work-note { margin: 18px 0 0; color: #85877e; font-family: var(--mono); font-size: 9px; }
.contact-actions { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.contact-actions .button { min-height: 45px; font-family: var(--display); font-size: 11px; }
.contact-social { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid #92977c; font-size: 11px; font-weight: 700; }
.contact-social span { color: #657b31; }

@media (max-width: 1000px) {
    .work-grid { gap: 11px; }
    .work-card { padding: 8px 8px 14px; }
    .work-visual { height: 155px; }
    .work-card h3 { font-size: 16px; }
    .work-card > p:not(.work-kicker) { font-size: 10px; }
}
@media (max-width: 740px) {
    .work-section { padding-top: 68px; padding-bottom: 70px; }
    .work-grid { grid-template-columns: 1fr; gap: 14px; }
    .work-card { padding: 10px 10px 17px; }
    .work-visual { height: 190px; }
    .work-card h3 { font-size: 19px; }
    .work-card > p:not(.work-kicker) { min-height: 0; font-size: 11px; }
    .contact-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
}