.works-page { background: var(--canvas); }
.works-hero { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 64px; align-items: end; padding-block: 82px 70px; }
.works-hero h1 { font-size: clamp(48px,6.3vw,80px); line-height: 1.08; letter-spacing: -.045em; }
.works-hero .portfolio-intro { max-width: 660px; font-size: 18px; margin-bottom: 16px; }
.works-index { border-top: 1px solid var(--black); }
.works-index a { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 23px 0; border-bottom: 1px solid var(--ash); }
.works-index span { grid-column: 1/-1; font: 10px var(--mono); letter-spacing: .13em; color: #68635c; }
.works-index strong { font-size: 21px; }
.works-index i { font: 13px var(--mono); align-self: center; }
.works-index a:hover strong { color: #b63921; }
.works-page .band { padding-block: 64px; }
.works-section { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 42px; }
.works-section-head h2 { font-size: 38px; margin-bottom: 18px; line-height: 1.2; }
.works-section-head .eyebrow,.works-consumer .eyebrow { margin-bottom: 15px; }
.works-business { background: #eee7dc; border-top: 4px solid var(--coral); }
.work-entry { min-width: 0; }
.business-entry { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 32px; padding: 34px 0; border-top: 1px solid #a69d90; }
.business-entry:first-child { padding-top: 0; border-top: 0; }
.business-entry:last-child { padding-bottom: 0; }
.work-identity { position: relative; }
.work-number { display: block; font: 12px var(--mono); color: #756a5c; margin-bottom: 20px; }
.work-entry .eyebrow { font-size: 10px; line-height: 1.7; letter-spacing: .06em; margin-bottom: 10px; }
.work-entry h3 { font-size: clamp(24px,2.45vw,31px); line-height: 1.25; letter-spacing: -.025em; margin-bottom: 20px; overflow-wrap: anywhere; }
.work-entry h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.work-entry .status-chip { font-size: 10px; letter-spacing: .04em; background: transparent; border-color: #b4a99b; min-height: 26px; }
.business-entry:first-child .status-chip { background: var(--lime); border-color: var(--lime); }
.work-description { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.work-description p { font-size: 16px; line-height: 1.9; margin: 0; color: #423d36; }
.business-entry .work-description { padding-top: 30px; }
.work-description footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.work-description .text-link { font-size: 13px; padding: 7px 0; }
.consumer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.consumer-entry { display: flex; flex-direction: column; border-top: 3px solid var(--black); padding-top: 24px; }
.consumer-entry .work-identity { min-height: 182px; }
.consumer-entry .work-description { flex: 1; }
.consumer-entry .work-description p { font-size: 15px; }
.works-more { background: #ebe6de; }
.works-page .works-more { padding-block: 32px; }
.works-more summary { display: flex; gap: 32px; align-items: center; cursor: pointer; list-style: none; }
.works-more summary::-webkit-details-marker { display: none; }
.works-more summary .eyebrow { display: block; margin-bottom: 8px; }
.works-more summary strong { font-size: 25px; }
.more-names { margin-left: auto; font: 13px var(--mono); color: #625a50; }
.more-toggle { font-size: 28px; margin-left: auto; }
details[open] .more-toggle { transform: rotate(45deg); }
.more-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 50px; padding-top: 38px; }
.more-entry { border-top: 1px solid #aaa092; padding-top: 25px; }
.more-entry .work-description { margin-top: 22px; }
.works-more summary:focus-visible { outline: 2px solid var(--black); outline-offset: 8px; }
@media (max-width: 950px) {
 .works-hero { grid-template-columns: minmax(0,1fr) 195px; gap: 35px; }
 .works-section { grid-template-columns: 1fr; gap: 32px; }
 .works-section-head { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
 .works-section-head h2 { margin: 0; }
 .works-section-head .meta { margin-left: auto; }
 .consumer-grid { gap: 22px; }
}
@media (max-width: 650px) {
 .works-hero { grid-template-columns: 1fr; padding-block: 48px 38px; gap: 30px; }
 .works-hero h1 { font-size: 49px; }
 .works-hero .portfolio-intro { font-size: 16px; }
 .works-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
 .works-index a { padding: 18px 0; gap: 8px; }
 .works-index strong { font-size: 17px; }
 .works-index i { display: none; }
 .works-index span { font-size: 9px; }
 .works-page .band { padding-block: 38px; }
 .works-section-head { gap: 12px; }
 .works-section-head .eyebrow { flex-basis: 100%; margin-bottom: 0; }
 .works-section-head h2,.works-consumer h2 { font-size: 32px; }
 .business-entry { grid-template-columns: 1fr; gap: 20px; padding-block: 30px; }
 .business-entry .work-description { padding-top: 0; }
 .work-number { margin-bottom: 13px; }
 .work-entry h3 { font-size: 28px; margin-bottom: 14px; }
 .consumer-grid,.more-grid { grid-template-columns: 1fr; gap: 32px; }
 .consumer-entry .work-identity { min-height: 0; margin-bottom: 20px; }
 .consumer-entry .work-description p { font-size: 16px; }
 .works-consumer .portfolio-heading { flex-direction: row; align-items: end; }
 .works-more summary { gap: 14px; flex-wrap: wrap; }
 .more-names { order: 3; flex-basis: 100%; margin: 0; font-size: 12px; }
 .more-toggle { margin-left: auto; }
 .works-page .footer .shell { align-items: start; }
}