.works-page { --works-green: #59664c; }
.works-page a { color: inherit; text-decoration: none; }
.works-page a:focus-visible, .works-page summary:focus-visible { outline: 2px solid var(--works-green); outline-offset: 6px; }
.works-nav, .works-page main, .works-footer { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.works-nav { display: flex; justify-content: space-between; align-items: center; padding-block: 30px; gap: 24px; }
.works-brand { font: 700 32px 'Playfair Display', serif; letter-spacing: -1.5px; }
.works-brand span, .works-intro h1 > span, .work-title-row h3 span { color: var(--works-green); }
.works-nav nav { display: flex; gap: 28px; flex-wrap: wrap; font: 12px 'Space Mono', monospace; }
.works-nav nav a { padding-block: 12px; }
.works-nav [aria-current] { border-bottom: 1px solid var(--works-green); }
.works-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 78px 0 65px; }
.works-label { font: 12px/1.7 'Space Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.works-intro h1 { font: 900 clamp(64px, 10vw, 132px)/1.1 'Playfair Display', serif; letter-spacing: -.06em; margin: 18px 0 24px; }
.works-intro h1 em, .works-outro em { font-weight: 400; }
.works-description { font-size: 18px; line-height: 1.8; color: var(--muted); }
.works-margin { transform: rotate(4deg); padding: 24px; border: 1px dashed #a4a98d; text-align: center; }
.works-margin > span { font-size: 38px; }
.works-margin p { margin-top: 12px; font: 12px/1.8 'Space Mono', monospace; }
.collection-heading { display: flex; justify-content: space-between; gap: 20px; padding-block: 22px; border-top: 1px solid #ccc6ba; }
.collection-heading h2, .collection-heading > span { font: 12px/1.6 'Space Mono', monospace; }
.work-card { border: 1px solid #d3cdbf; border-radius: 14px; background: #faf7f1; overflow: hidden; animation: work-arrive .7s ease both; }
.browser-bar { display: flex; justify-content: space-between; padding: 14px 20px; background: #e9e5db; font: 12px 'Space Mono', monospace; color: #696657; }
.browser-bar > span:first-child { color: #969b83; letter-spacing: 3px; }
.work-cover { position: relative; overflow: hidden; background: #e8e6d8; }
.work-cover img { width: 100%; height: auto; aspect-ratio: 16/8; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.work-preview:hover img { transform: scale(1.025); }
.work-information { padding: 32px; }
.work-title-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.work-title-row h3 { font: 700 clamp(25px, 4vw, 40px)/1.2 'Playfair Display', serif; margin-block: 10px 18px; letter-spacing: -.035em; }
.work-information > p, .work-notes p { max-width: 700px; font-size: 16px; line-height: 1.8; color: var(--muted); }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-block: 24px; }
.work-tags li { font: 12px 'Space Mono', monospace; padding: 8px 12px; border: 1px solid #d5d8ca; border-radius: 25px; }
.work-information details { border-top: 1px solid #ded8cc; }
.work-information summary { display: flex; justify-content: space-between; cursor: pointer; padding-top: 20px; font: 14px 'Space Mono', monospace; list-style: none; }
.work-information summary::-webkit-details-marker { display: none; }
.work-information summary span { transition: transform .25s; }
.work-information details[open] summary span { transform: rotate(45deg); }
.work-notes { padding-top: 18px; animation: work-arrive .3s ease; }
.work-notes a { display: inline-block; margin-top: 16px; font: 12px 'Space Mono', monospace; text-decoration: underline; text-underline-offset: 5px; }
.works-outro { text-align: center; padding: 90px 0; }
.works-outro h2 { font: 700 clamp(32px, 5vw, 58px)/1.2 'Playfair Display', serif; margin-block: 18px 30px; letter-spacing: -.035em; }
.works-outro > a { display: inline-flex; gap: 35px; padding: 17px 24px; background: var(--dark); color: var(--cream); border-radius: 30px; font: 12px 'Space Mono', monospace; }
.works-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 1px solid #ccc6ba; padding-block: 26px; font: 12px/1.7 'Space Mono', monospace; }
.works-skip { position: fixed; top: -100px; left: 20px; padding: 16px; background: var(--cream); z-index: 10000; }
.works-skip:focus { top: 10px; }
@keyframes work-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .works-nav, .works-page main, .works-footer { width: calc(100% - 36px); } .works-nav { align-items: start; } .works-nav nav { gap: 6px 16px; justify-content: end; } .works-intro { padding-block: 40px; } .works-margin { display: none; } .work-information { padding: 22px; }  .works-outro { padding-block: 64px; } }
@media (prefers-reduced-motion: reduce) { .works-page *, .works-page *::before, .works-page *::after { animation: none !important; transition: none !important; } }
.work-preview { display: block; }
.preview-arrow { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #babfae; border-radius: 50%; background: var(--cream); color: var(--dark); font-size: 28px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s; }
@media (hover: hover) { .work-preview:hover .preview-arrow { opacity: 1; transform: translateY(0); } }
.work-preview:focus-visible .preview-arrow { opacity: 1; transform: translateY(0); }

.work-card + .work-card { margin-top: 36px; }
.kochi-cover img { aspect-ratio: 8 / 5; }