:root {
    --paper:#f8f7f3;
    --ink:#252b27;
    --muted:#69716b;
    --line:#dddfd6;
    --green:#345940;
    --sage:#e4e9db;
    --white:#fff;
    --radius:8px;
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
a {
    color:inherit;
    text-decoration:none;
}
button,input,textarea {
    font:inherit;
}
button,a,input,textarea,summary {
    -webkit-tap-highlight-color:transparent;
}
button,a,summary {
    touch-action:manipulation;
}
button {
    cursor:pointer;
}
a:hover {
    color:var(--green);
}
img {
    display:block;
    max-width:100%;
}
h1,h2,h3,p {
    margin:0;
}
h1,h2,h3 {
    line-height:1.12;
    letter-spacing:-.045em;
}
h1 {
    font-size:clamp(44px,5.3vw,74px);
    font-weight:600;
}
h2 {
    font-size:clamp(34px,3.7vw,49px);
    font-weight:500;
}
h3 {
    font-size:24px;
    font-weight:500;
}
p {
    color:var(--muted);
}
::selection {
    background:#d8e2cd;
}
:focus-visible {
    outline:3px solid #6b8050;
    outline-offset:5px;
}
[hidden] {
    display:none!important;
}
.container {
    width:min(1160px,calc(100% - 80px));
    margin-inline:auto;
}
.site-header {
    border-bottom:1px solid var(--line);
    background:var(--paper);
}
.navigation {
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.wordmark {
    font-size:22px;
    font-weight:700;
    letter-spacing:-1px;
    white-space:nowrap;
}
.brand-dot {
    color:#617b45;
}
.nav-links {
    display:flex;
    align-items:center;
    gap:30px;
    font-size:14px;
}
.nav-links a {
    padding-block:10px;
}
.nav-contact {
    border:1px solid #bfc6b8;
    border-radius:5px;
    padding:9px 18px!important;
    display:flex;
    gap:24px;
}
.coffee-nav {
    font-size:13px;
}
.menu-toggle {
    display:none;
    border:1px solid var(--line);
    background:transparent;
    padding:8px 12px;
    border-radius:4px;
}
.menu-toggle span {
    margin-left:10px;
}
.hero {
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:85px;
    padding-block:80px 72px;
    align-items:center;
}
.eyebrow {
    font-size:11px;
    font-weight:600;
    letter-spacing:1.7px;
    text-transform:uppercase;
    color:var(--green);
    display:flex;
    align-items:center;
    gap:8px;
}
.status-dot {
    width:7px;
    height:7px;
    background:#638a4d;
    border-radius:50%;
    box-shadow:0 0 0 4px #e7ebdf;
}
.status-dot.unavailable {
    background:#8b877b;
    box-shadow:none;
}
.intro {
    font-size:19px;
    color:var(--ink);
    margin:29px 0 14px;
}
.wave {
    display:inline-block;
    color:var(--green);
    margin-left:7px;
}
.hero h1 {
    max-width:660px;
}
.hero-description {
    font-size:16px;
    line-height:1.8;
    max-width:490px;
    margin-top:24px;
}
.actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:25px;
    margin-top:30px;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:27px;
    min-height:48px;
    padding:12px 22px;
    border-radius:5px;
    font-size:14px;
    font-weight:500;
    border:1px solid transparent;
    transition:background .18s,transform .18s;
}
.button:hover {
    transform:translateY(-2px);
}
.primary {
    background:var(--green);
    color:#fff;
}
.primary:hover {
    background:#25452f;
    color:#fff;
}
.secondary {
    border-color:var(--line);
}
.text-link {
    font-size:14px;
    border-bottom:1px solid #a9b4a3;
    padding-bottom:4px;
    display:inline-block;
}
.hero-role {
    margin-top:32px;
    font-size:12px;
    letter-spacing:.3px;
}
.portrait-composition {
    position:relative;
    max-width:390px;
    justify-self:end;
    width:100%;
    padding-top:10px;
}
.portrait-label {
    display:flex;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--muted);
    margin-bottom:12px;
}
.portrait-frame {
    height:410px;
    background:#e3e5dc;
    border-radius:100px 100px 5px 5px;
    overflow:hidden;
}
.portrait-frame img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 24%;
}
.portrait-fallback {
    padding:65px 30px;
    font-family:Georgia,serif;
    font-size:75px;
    line-height:1;
    color:var(--green);
}
.portrait-fallback span {
    display:block;
    font-style:italic;
}
.portrait-fallback small {
    display:block;
    font:14px Arial;
    margin-top:30px;
}
.portrait-note {
    position:absolute;
    bottom:52px;
    left:-33px;
    display:flex;
    align-items:center;
    gap:17px;
    background:#f1edcf;
    padding:17px 22px;
    transform:rotate(-5deg);
    font-size:13px;
    line-height:1.5;
    border:1px solid #e8e2b7;
    box-shadow:0 4px 10px #252b2708;
}
.note-symbol {
    font-size:36px;
    line-height:1;
    color:var(--green);
}
.portrait-caption {
    display:flex;
    justify-content:space-between;
    margin-top:18px;
    font-size:11px;
}
.discipline-strip {
    border-block:1px solid var(--line);
    padding-block:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    letter-spacing:2px;
    font-size:11px;
    color:#566050;
}
.strip-star {
    color:#6c8053;
    font-size:24px;
    line-height:1;
}
.section {
    padding-block:85px;
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:37px;
}
.section-heading .eyebrow {
    margin-bottom:15px;
}
.section-heading>p {
    font-size:14px;
    max-width:320px;
}
.project-tools {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:26px;
    font-size:12px;
}
.project-tools input {
    width:330px;
    background:transparent;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:5px;
    font-size:13px;
}
.project-tools label {
    color:var(--muted);
}
#project-count {
    margin-left:auto;
    color:var(--muted);
}
.project-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px 30px;
}
.project-visual {
    height:300px;
    border-radius:7px;
    position:relative;
    overflow:hidden;
    display:block;
}
.tone-sage {
    background:#dfe6d8;
}
.tone-sand {
    background:#ebe2d5;
}
.tone-lavender {
    background:#e4e1ed;
}
.project-visual>img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s;
}
.project-visual:hover>img {
    transform:scale(1.025);
}
.project-art {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:absolute;
    inset:32px;
    border:1px solid #4c654932;
    padding:24px;
    color:#36513d;
    background:#ffffff40;
    border-radius:4px;
}
.art-label {
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
}
.art-title {
    font-family:Georgia,serif;
    font-size:40px;
    letter-spacing:-1.5px;
    line-height:1.1;
    max-width:320px;
}
.art-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:8px;
    letter-spacing:1px;
}
.art-bottom>span:last-child {
    font-size:27px;
}
.featured-badge {
    position:absolute;
    top:15px;
    right:15px;
    border-radius:20px;
    background:var(--paper);
    padding:4px 12px;
    font-size:10px;
}
.project-meta {
    display:flex;
    justify-content:space-between;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:10px;
    color:var(--muted);
    margin:22px 0 10px;
}
.project-card h3 a {
    display:flex;
    justify-content:space-between;
    gap:15px;
}
.project-card h3 a span {
    font-size:24px;
    color:var(--green);
}
.project-card>p {
    font-size:14px;
    line-height:1.75;
    margin-top:12px;
    max-width:490px;
}
.chips {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:18px;
}
.chips>span {
    border:1px solid var(--line);
    border-radius:4px;
    font-size:11px;
    color:#626c5e;
    padding:3px 9px;
    overflow-wrap:anywhere;
}
.about-section {
    background:#e9ece3;
    border-block:1px solid #e1e5d8;
    padding-block:70px;
}
.about-grid {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:90px;
}
.about-grid h2 {
    margin-top:22px;
}
.large-asterisk {
    display:block;
    font-size:90px;
    line-height:1;
    color:#6a7c50;
    margin-top:30px;
}
.about-copy h3 {
    font-size:23px;
    line-height:1.4;
    letter-spacing:-.6px;
    margin-bottom:20px;
}
.prose {
    color:var(--muted);
    font-size:16px;
    line-height:1.9;
    overflow-wrap:anywhere;
}
.prose p+p {
    margin-top:18px;
}
.about-facts {
    border-top:1px solid #ccd3c3;
    margin-top:25px;
    padding-top:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:25px;
}
.about-facts span {
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--muted);
}
.about-facts p {
    font-size:13px;
    color:var(--ink);
    margin-top:5px;
}
.skills-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.skill-group {
    border-top:1px solid #b8c3af;
    padding-top:20px;
}
.skill-group h3 {
    font-size:16px;
    letter-spacing:-.3px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}
.skill-number {
    font-size:10px;
    color:#7d8c70;
    letter-spacing:1px;
}
.skill-item {
    padding:14px 0;
    border-bottom:1px solid var(--line);
}
.skill-name {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
}
.skill-name img,.skill-initial {
    width:28px;
    height:28px;
    object-fit:contain;
    border-radius:5px;
}
.skill-initial {
    display:grid;
    place-items:center;
    background:#e9ece3;
    color:var(--green);
    font-size:13px;
    font-weight:600;
}
.skill-item details {
    margin-top:7px;
    margin-left:40px;
    font-size:12px;
    color:var(--muted);
}
summary {
    cursor:pointer;
    padding:4px 0;
}
.module-list>div {
    padding:10px 0;
}
.module-list p {
    font-size:12px;
}
.contact-section {
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
}
.contact-copy h2 {
    margin:20px 0 25px;
}
.contact-copy>p:not(.eyebrow) {
    font-size:15px;
    max-width:350px;
}
.email-link {
    display:inline-block;
    margin-top:25px;
    font-size:18px;
    border-bottom:1px solid #a9b4a3;
    overflow-wrap:anywhere;
}
.social-links {
    display:flex;
    gap:24px;
    margin-top:24px;
    font-size:13px;
}
.contact-form {
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:30px;
}
.form-field {
    margin-bottom:19px;
}
.form-field label {
    display:block;
    font-size:12px;
    margin-bottom:8px;
    font-weight:600;
}
.form-field label span {
    color:var(--muted);
}
input,textarea {
    max-width:100%;
    color:var(--ink);
}
.form-field input,.form-field textarea {
    display:block;
    width:100%;
    background:#fafbf8;
    border:1px solid var(--line);
    border-radius:4px;
    padding:11px 13px;
    font-size:14px;
}
.form-field textarea {
    resize:vertical;
    min-height:120px;
}
.form-field input::placeholder,.form-field textarea::placeholder {
    color:#737a70;
    font-size:13px;
}
.contact-form .button {
    width:100%;
    justify-content:space-between;
}
.form-note {
    font-size:10px;
    margin-top:12px;
    text-align:center;
}
.form-notice {
    background:#e7eedf;
    color:#345940;
    font-size:14px;
    padding:14px;
    margin-bottom:18px;
    border-radius:4px;
}
.form-errors,.field-error {
    color:#9b302a;
    font-size:13px;
}
.form-errors {
    margin-bottom:15px;
}
.field-error ul {
    padding-left:16px;
    margin:5px 0;
}
.coffee-section {
    display:flex;
    align-items:center;
    gap:22px;
    background:#efe9d7;
    border:1px solid #e4ddc8;
    padding:28px 34px;
    border-radius:7px;
    margin-bottom:70px;
}
.coffee-icon {
    font-size:32px;
}
.coffee-section h3 {
    font-size:21px;
    letter-spacing:-.5px;
}
.coffee-section p {
    font-size:13px;
    margin-top:7px;
}
.coffee-button {
    margin-left:auto;
    background:#fffdf5;
    white-space:nowrap;
    border-color:#ded7bd;
}
.site-footer {
    border-top:1px solid var(--line);
    padding-block:30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}
.site-footer .wordmark {
    font-size:17px;
}
.site-footer p,.site-footer>div {
    font-size:11px;
}
.site-footer>div {
    display:flex;
    gap:25px;
    color:var(--muted);
}
.empty-state {
    padding:35px;
    border:1px dashed #b8c3af;
    border-radius:6px;
}
.empty-state p {
    margin:12px 0;
}
.skip-link {
    position:absolute;
    top:-100px;
    left:20px;
    background:var(--ink);
    color:white;
    padding:12px;
    z-index:20;
}
.skip-link:focus {
    top:10px;
}
.case-eyebrow {
    margin:45px 0 15px;
}
.case-study h1 {
    max-width:850px;
}
.case-study .chips {
    margin-top:25px;
}
.case-cover {
    width:100%;
    max-height:650px;
    object-fit:contain;
    margin-top:45px;
    background:var(--sage);
    border-radius:8px;
}
.case-body {
    max-width:750px;
    margin:55px auto;
}
.case-body h2 {
    font-size:30px;
    margin:32px 0 20px;
}
.gallery {
    display:grid;
    gap:30px;
}
.gallery figure {
    margin:0;
}
.gallery img {
    max-height:700px;
    margin-inline:auto;
    border-radius:6px;
}
.gallery figcaption {
    text-align:center;
    font-size:13px;
    margin-top:12px;
    color:var(--muted);
}
.case-footer {
    border-top:1px solid var(--line);
    margin-top:50px;
    padding-top:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
@media(min-width:1500px) {
    .hero {
        padding-block:100px;
    }
    .portrait-frame {
        height:440px;
    }
}
@media(max-width:1000px) {
    .container {
        width:calc(100% - 48px);
    }
    .nav-links {
        gap:18px;
    }
    .coffee-nav {
        display:none;
    }
    .hero {
        gap:45px;
    }
    .hero h1 {
        font-size:49px;
    }
    .portrait-frame {
        height:380px;
    }
    .about-grid,.contact-section {
        gap:45px;
    }
    .skills-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .hero .actions {
        gap:18px;
    }
    .project-visual {
        height:270px;
    }
    .art-title {
        font-size:34px;
    }
}
@media(max-width:700px) {
    html {
        scroll-padding-top:25px;
    }
    .container {
        width:calc(100% - 40px);
    }
    .navigation {
        min-height:78px;
        flex-wrap:wrap;
        gap:0;
    }
    .wordmark {
        font-size:20px;
    }
    .menu-toggle:not([hidden]) {
        display:block;
    }
    .nav-links {
        width:100%;
        flex-wrap:wrap;
        gap:15px;
        padding:10px 0 20px;
    }
    .js .nav-links {
        display:none;
    }
    .js .nav-links.is-open {
        display:flex;
    }
    .nav-contact {
        padding:5px 12px!important;
    }
    .coffee-nav {
        display:block;
    }
    .hero {
        grid-template-columns:1fr;
        padding-block:44px 35px;
        gap:40px;
    }
    .hero h1 {
        font-size:clamp(42px,10vw,62px);
        max-width:550px;
    }
    .hero-description {
        font-size:15px;
    }
    .hero-role {
        margin-top:24px;
    }
    .intro {
        margin-top:23px;
    }
    .portrait-composition {
        max-width:360px;
        justify-self:center;
        width:calc(100% - 30px);
    }
    .portrait-frame {
        height:360px;
    }
    .portrait-note {
        left:-15px;
    }
    .discipline-strip {
        font-size:8px;
        letter-spacing:1px;
        gap:8px;
        padding-block:18px;
    }
    .strip-star {
        font-size:17px;
    }
    .section {
        padding-block:55px;
    }
    .section-heading {
        display:block;
        margin-bottom:27px;
    }
    .section-heading>p {
        margin-top:18px;
        font-size:13px;
    }
    .section-heading>p br {
        display:none;
    }
    .project-grid {
        grid-template-columns:1fr;
        gap:35px;
    }
    .project-visual {
        height:280px;
    }
    .project-tools {
        flex-wrap:wrap;
        gap:8px;
    }
    .project-tools label {
        width:100%;
    }
    .project-tools input {
        flex:1;
        min-width:0;
    }
    .project-card>p {
        font-size:14px;
    }
    .about-section {
        padding-block:50px;
    }
    .about-grid {
        grid-template-columns:1fr;
        gap:25px;
    }
    .large-asterisk {
        display:none;
    }
    .about-grid h2 {
        font-size:37px;
    }
    .about-copy h3 {
        font-size:21px;
    }
    .skills-grid {
        gap:30px 20px;
        grid-template-columns:1fr;
    }
    .skill-list {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0 18px;
    }
    .skill-name {
        font-size:13px;
    }
    .skill-group h3 {
        font-size:18px;
    }
    .contact-section {
        grid-template-columns:1fr;
        gap:30px;
    }
    .contact-form {
        padding:23px;
    }
    .contact-copy h2 {
        font-size:39px;
    }
    .coffee-section {
        padding:25px;
        flex-wrap:wrap;
        gap:15px;
        margin-bottom:45px;
    }
    .coffee-icon {
        display:none;
    }
    .coffee-section h3 {
        font-size:22px;
    }
    .coffee-button {
        margin-left:0;
    }
    .site-footer {
        flex-wrap:wrap;
        gap:12px;
    }
    .site-footer>div {
        width:100%;
        justify-content:space-between;
    }
    .site-footer p {
        margin-left:auto;
    }
    .case-study h1 {
        font-size:44px;
        overflow-wrap:anywhere;
    }
    .case-footer {
        display:block;
    }
    .case-footer .button {
        margin-top:20px;
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        transition:none!important;
        animation:none!important;
    }
}

/* Long case-study names also appear in full below each decorative cover. */
.art-title {
    font-size: clamp(25px, 2.6vw, 36px);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resume-footer { padding-top: 1.5rem; padding-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.resume-footer p { color: var(--muted, #64716d); margin: .4rem 0 0; }
@media (max-width: 600px) { .resume-footer { align-items: flex-start; flex-direction: column; } }