/* Portfolio additions; the original Hudson stylesheet stays unchanged. */
.s-works .folio-entries .entry__thumb img { display: block; width: 100%; height: auto; }
.portfolio-more { margin-top: var(--vspace-2); margin-bottom: var(--vspace-1); text-align: center; }
.portfolio-more .btn { min-width: 28rem; }
.portfolio-more span { margin-left: 1.2rem; font-size: 1.1rem; letter-spacing: .12em; }
.portfolio-page { background: #fafbf9; color: var(--color-3); }
.portfolio-shell { width: calc(100% - 96px); max-width: 1200px; margin-left: auto; margin-right: auto; }
.portfolio-wide { width: calc(100% - 48px); max-width: 1400px; margin-left: auto; margin-right: auto; }
.portfolio-page .s-header { position: sticky; top: 0; height: 80px; background: var(--color-3); }
.portfolio-page .s-header__inner { width: calc(100% - 96px); max-width: 1240px; height: 80px; margin: 0 auto; padding: 0; border: 0; box-shadow: none; }
.portfolio-page .s-header__nav { margin-left: auto; }
.skip-link { position: fixed; left: 2rem; top: -10rem; z-index: 1000; padding: 1rem 2rem; background: white; color: var(--color-3); }
.skip-link:focus { top: 1rem; }
.case-breadcrumb { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 5.6rem; font-size: 1.3rem; color: #777b75; }
.case-breadcrumb a { color: inherit; }
.case-breadcrumb a:hover { color: var(--color-1); }
.portfolio-eyebrow { margin: 0 0 1.6rem; font-family: var(--font-1); color: var(--color-1); font-size: 1.2rem; font-weight: 500; line-height: 1.7; letter-spacing: .16em; }
.portfolio-intro { padding-top: 5.6rem; padding-bottom: 5.2rem; }
.archive-title-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); align-items: end; gap: 5rem; }
.archive-title-row h1 { margin: 0; font-size: clamp(6rem, 8vw, 11rem); line-height: 1.03; letter-spacing: -.035em; }
.portfolio-subtitle { margin: 2rem 0 0; font-size: 1.6rem; letter-spacing: .13em; }
.archive-intro-copy { margin: 0 0 .3rem; color: #676e64; font-size: 1.8rem; line-height: 1.9; }
.portfolio-demo-note { margin: 3.2rem 0 0; color: #777d75; font-size: 1.2rem; line-height: 1.8; letter-spacing: .03em; }
.archive-section { padding-bottom: 12rem; }
.archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.4rem 0 3.2rem; border-top: 1px solid #d7dbd3; }
.archive-filters { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; }
.case-filter { height: auto; margin: 0; padding: .6rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: #747a6f; font-family: var(--font-1); font-size: 1.5rem; font-weight: 400; line-height: 1.7; letter-spacing: .06em; cursor: pointer; }
.case-filter:hover, .case-filter:focus { background: none; border-color: transparent; color: var(--color-1); }
.case-filter.is-active { color: var(--color-1); border-bottom-color: var(--color-1); }
.case-filter:focus-visible, .case-card__link:focus-visible { outline: 2px solid var(--color-1); outline-offset: 6px; }
.archive-count { margin: 0; color: #6f756b; font-size: 1.2rem; white-space: nowrap; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6rem 4rem; }
.case-card { min-width: 0; }
.case-card[hidden] { display: none; }
.case-card__link { display: block; color: inherit; }
.case-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #e8ebe5; }
.case-card__media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: opacity .25s; }
.case-card__link:hover img { opacity: .88; }
.case-demo-label { position: absolute; bottom: 1.5rem; left: 1.5rem; padding: .4rem .9rem; background: rgba(20,24,20,.72); color: white; font-size: 1rem; letter-spacing: .09em; }
.case-card__heading { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) 2.5rem; gap: 1.2rem; align-items: start; padding-top: 2.3rem; }
.case-card__number { padding-top: .9rem; font-size: 1.1rem; color: var(--color-1); letter-spacing: .1em; }
.case-card__heading h2 { margin: 0; font-size: 2.9rem; line-height: 1.45; letter-spacing: .02em; }
.case-card__heading p { margin: .9rem 0 0; font-size: 1.15rem; color: #747a6f; line-height: 1.7; }
.case-card__heading p span { letter-spacing: .04em; }
.case-card__arrow { padding-top: .3rem; font-size: 2.5rem; text-align: right; }
.case-card__link:hover h2, .case-card__link:hover .case-card__arrow { color: var(--color-1); }
.case-hero { padding-top: 5.6rem; padding-bottom: 4rem; }
.case-title-row { display: block; }
.case-title-row h1 { margin: 0; font-size: clamp(4.2rem, 4.5vw, 6.6rem); line-height: 1.35; letter-spacing: -.025em; text-wrap: balance; }
.case-english-title { margin: 1.5rem 0 0; color: #6e7668; font-family: var(--font-2); font-size: 2.4rem; font-style: italic; line-height: 1.5; }
.project-overview { margin-top: 4.8rem; padding-top: 2.8rem; border-top: 1px solid #d7dbd3; }
.project-overview__heading .portfolio-eyebrow { margin-bottom: .8rem; }
.project-overview__heading h2 { margin: 0; font-size: 3.5rem; line-height: 1.4; }
.project-facts { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.8fr) minmax(0,.75fr) minmax(0,1.15fr); gap: 2rem; margin: 2.8rem 0 0; padding: 0; }
.project-facts dt { margin: 0 0 .9rem; font-family: var(--font-1); font-size: 1.15rem; font-weight: 400; color: #777e71; letter-spacing: .08em; }
.project-facts dd { margin: 0; font-size: 1.5rem; line-height: 1.7; overflow-wrap: anywhere; }
.project-cover { position: relative; margin-top: 0; margin-bottom: 0; background: #e7eae3; }
.project-cover img { display: block; width: 100%; height: auto; margin: 0; }
.project-image-link { display: block; cursor: zoom-in; }
.cover-demo-note { position: absolute; left: 2rem; bottom: 2rem; padding: .5rem 1rem; background: rgba(0,0,0,.5); color: white; font-size: 1.1rem; pointer-events: none; }
.project-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8rem; padding-top: 9rem; padding-bottom: 9rem; }
.project-text h2 { margin: 0; font-size: 3.5rem; line-height: 1.5; }
.project-text p:not(.portfolio-eyebrow) { margin-top: 0; margin-bottom: 1.8rem; color: #626a5c; font-size: 1.8rem; line-height: 1.95; }
.project-text p:last-child { margin-bottom: 0; }
.project-media { margin-bottom: 8rem; }
.project-media--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: start; }
.project-media--pair .project-figure:nth-child(even) { margin-top: 8rem; }
.project-media--inset { padding: 7rem; background: #ecefe8; }
.project-media--inset .project-figure { width: 78%; margin-left: auto; margin-right: auto; }
.project-figure { min-width: 0; margin: 0; }
.project-figure img { display: block; width: 100%; height: auto; margin: 0; }
.project-figure figcaption { display: flex; gap: 1.8rem; padding-top: 1.4rem; color: #747c6c; font-size: 1.1rem; line-height: 1.7; }
.project-figure figcaption span { color: var(--color-1); font-size: 1rem; }
.project-media--wide figcaption { padding-left: 2rem; padding-right: 2rem; }
.project-media--masonry, .project-media--grid { margin-top: 4.8rem; margin-bottom: 0; }
.project-gallery__toolbar { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin-bottom: 2.4rem; padding-bottom: 1.6rem; border-bottom: 1px solid #d7dbd3; }
.project-gallery__toolbar p { margin: 0; color: #747c6c; font-size: 1.2rem; line-height: 1.7; }
.project-gallery__toolbar p:first-child { color: var(--color-3); }
.project-gallery__toolbar span { margin-left: .5rem; color: #747c6c; }
.project-masonry { columns: 3; column-gap: 2.4rem; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8rem 2.4rem; }
.project-grid .project-figure { min-width: 0; margin: 0; }
.project-grid .project-image-link { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e7eae3; }
.project-grid img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.project-grid .project-image-link:focus-visible { outline: 2px solid var(--color-1); outline-offset: 4px; }
.project-grid .project-image-link:hover img { opacity: .86; }
.project-grid figcaption { gap: 1rem; margin: 0; padding-top: 1rem; }
.project-masonry .project-figure { break-inside: avoid; margin: 0 0 2.8rem; }
.project-masonry .project-image-link { overflow: hidden; background: #e7eae3; }
.project-masonry .project-image-link:focus-visible { outline: 2px solid var(--color-1); outline-offset: 4px; }
.project-masonry img { width: 100%; height: auto; transition: opacity .2s; }
.project-masonry .project-image-link:hover img { opacity: .86; }
.project-masonry figcaption { gap: 1rem; padding-top: 1rem; }
.project-navigation { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: center; margin-top: 10rem; margin-bottom: 10rem; padding-top: 4rem; border-top: 1px solid #d7dbd3; }
.project-navigation a { color: inherit; }
.project-navigation a:hover { color: var(--color-1); }
.project-navigation span { display: block; margin-bottom: 1rem; font-size: 1.2rem; color: #747c6c; }
.project-navigation strong { font-family: var(--font-2); font-size: 2.8rem; font-weight: 400; line-height: 1.5; }
.next-project { text-align: right; }
.project-navigation__all { font-size: 1.3rem; }
.project-back { margin-top: 6rem; margin-bottom: 6rem; }
.portfolio-contact { padding: 8rem 0 3rem; background: var(--color-3); color: rgba(255,255,255,.7); }
.portfolio-contact__main { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 5rem; padding-bottom: 6rem; }
.portfolio-contact h2 { margin: 0; color: white; font-size: clamp(4.8rem, 6vw, 8rem); line-height: 1.15; letter-spacing: -.03em; }
.portfolio-contact__main p:not(.portfolio-eyebrow) { margin: 1.8rem 0 0; font-size: 1.6rem; }
.portfolio-contact__details { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.portfolio-contact__details > a:not(.btn) { color: rgba(255,255,255,.8); font-size: 1.7rem; overflow-wrap: anywhere; }
.portfolio-contact__details .btn { margin-top: 1.4rem; margin-bottom: 0; min-width: 22rem; }
.portfolio-contact__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; padding-top: 2.8rem; border-top: 1px solid rgba(255,255,255,.15); font-size: 1.1rem; }
.portfolio-contact__bottom a { color: rgba(255,255,255,.65); }
.portfolio-contact__bottom em { margin-left: 1rem; font-family: var(--font-2); font-size: 1.6rem; }
@media (max-width: 900px) {
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.8rem 2rem; }
    .project-masonry { columns: 2; column-gap: 2rem; }
    .portfolio-page .s-header__inner { width: 100%; }
    .portfolio-page .s-header__nav { margin-left: 0; }
    .portfolio-shell { width: calc(100% - 48px); }
    .portfolio-wide { width: calc(100% - 32px); }
    .archive-title-row, .case-title-row { grid-template-columns: 1fr; gap: 3rem; }
    .archive-intro-copy br { display: none; }
    .archive-intro-copy { max-width: 48rem; }
    .archive-grid { gap: 4rem 2.4rem; }
    .case-card__heading { grid-template-columns: 2rem minmax(0, 1fr) 2rem; gap: .8rem; }
    .case-card__heading h2 { font-size: 2.4rem; }
    .case-card__heading p span { display: block; }
    .project-text { gap: 4rem; }
    .project-media--inset { padding: 4rem; }
    .project-media--inset .project-figure { width: 90%; }
    .project-navigation { gap: 2rem; }
    .project-navigation strong { font-size: 2.2rem; }
}
@media (max-width: 600px) {
    .project-grid { grid-template-columns: 1fr; gap: 2.4rem; }
    .project-overview { margin-top: 3rem; padding-top: 2.4rem; }
    .project-overview__heading h2 { font-size: 2.8rem; }
    .project-media--masonry, .project-media--grid { margin-top: 3.2rem; }
    .project-gallery__toolbar { align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
    .project-gallery__toolbar p { font-size: 1.1rem; }
    .project-masonry { columns: 1; }
    .project-masonry .project-figure { margin-bottom: 2.4rem; }
    .portfolio-intro, .case-hero { padding-top: 3rem; }
    .case-breadcrumb { margin-bottom: 3.5rem; font-size: 1.15rem; gap: .9rem; }
    .archive-title-row h1 { font-size: 6.4rem; }
    .portfolio-subtitle { font-size: 1.4rem; }
    .archive-intro-copy { font-size: 1.6rem; }
    .archive-toolbar { flex-wrap: wrap; padding-bottom: 2.4rem; }
    .archive-filters { gap: 1rem 1.7rem; }
    .case-filter { font-size: 1.3rem; }
    .archive-grid { grid-template-columns: 1fr; gap: 4.2rem; }
    .archive-section { padding-bottom: 7rem; }
    .case-card__heading h2 { font-size: 2.8rem; }
    .case-card__heading p span { display: inline; }
    .case-title-row h1 { font-size: clamp(3.5rem, 10vw, 4.8rem); }
    .case-english-title { font-size: 2rem; }
    .project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; margin-top: 3rem; }
    .project-text { grid-template-columns: 1fr; gap: 2rem; padding-top: 5rem; padding-bottom: 5rem; }
    .project-text h2 { font-size: 2.8rem; }
    .project-text p:not(.portfolio-eyebrow) { font-size: 1.6rem; }
    .project-media { margin-bottom: 4rem; }
    .project-media--pair { grid-template-columns: 1fr; gap: 3rem; }
    .project-media--pair .project-figure:nth-child(even) { margin-top: 0; }
    .project-media--inset { padding: 2.4rem 1.6rem; }
    .project-media--inset .project-figure { width: 100%; }
    .project-navigation { grid-template-columns: 1fr 1fr; margin-top: 6rem; margin-bottom: 6rem; }
    .project-navigation__all { grid-column: 1 / -1; grid-row: 2; margin-top: 1.2rem; text-align: center; }
    .project-navigation strong { font-size: 2.1rem; }
    .portfolio-contact { padding-top: 5rem; }
    .portfolio-contact__main { grid-template-columns: 1fr; gap: 3rem; padding-bottom: 4rem; }
    .portfolio-contact h2 { font-size: 5.2rem; }
    .portfolio-more .btn { min-width: 0; width: 100%; padding-left: 1rem; padding-right: 1rem; }
    .portfolio-more span { margin-left: .5rem; }
}