.work-index { --ink: #203442; --gray: #63737e; --orange: #235f86; --line: #d2dfe7; padding-top: 42px; padding-bottom: 64px }
.work-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px }
.work-intro h1 { font: 400 clamp(66px,7.5vw,96px)/1 Georgia,serif; letter-spacing:normal }
.work-intro > p { font-size: 17px; color: var(--gray); line-height: 1.7; padding-bottom: 5px }
.project-index-tabs { gap: 0; isolation: isolate; filter: drop-shadow(0 18px 22px #214c6a12) }
.project-folders { position: relative; z-index: 2; justify-content: flex-start; padding: 0; height: auto!important; border-radius: 0; background: transparent; gap: 6px; width: 100%; margin-bottom: -1px }
.project-folders > button { position: relative; flex: 0 1 230px; min-height: 78px; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 4px; padding: 16px 32px 18px 25px; border: 0; border-radius: 14px 28px 0 0; background: linear-gradient(180deg,#b2d9ec,#98c8e2); color: #295771; box-shadow: inset 0 1px 0 #ffffff9c!important; clip-path: polygon(0 0,86% 0,100% 31px,100% 100%,0 100%); transform-origin: bottom; transition: background 180ms,color 180ms,transform 180ms }
.project-folders > button:hover { color: #123e5b; transform: translateY(-2px) }
.project-folders > button[data-state=active] { background: linear-gradient(180deg,#a8e0fa,#80c9ee); color: #153f59; z-index: 1; transform: none }
.project-folders > button > span { font-size: 18px; font-weight: 500 }
.project-folders > button > small { font-size: 13px; font-weight: 400 }
.project-folders > button:focus-visible { outline: 2px solid #164e74; outline-offset: -7px }
.project-folder-body { position: relative; padding: 23px 22px 44px; background: linear-gradient(165deg,#80c9ee 0%,#67b5e3 75%,#5caddc 100%); border: 1px solid #65add7; border-top-color: #b2e5fb; border-radius: 0 17px 17px 17px; box-shadow: inset 0 1px 0 #d3f1ffb3, inset 0 -2px 1px #3d8ab321 }
.project-folder-body::before { content: ''; position: absolute; inset: 14px 33px 33px; border-radius: 9px; background: #e9f1f6; border: 1px solid #d1e3ed; transform: rotate(-.35deg); box-shadow: 0 -1px 0 #ffffffa1 }
.project-folder-body::after { content: ''; pointer-events: none; position: absolute; height: 30px; inset: auto -1px -1px; border: 1px solid #63b0dd; border-top: 1px solid #aae0fc; border-radius: 3px 3px 17px 17px; background: linear-gradient(180deg,#88d1f5,#6fbee9); box-shadow: 0 -3px 8px #2453720b, inset 0 1px 0 #c9edff6b; z-index: 2 }
.project-folder-content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); background: #fff; border: 1px solid #c3d7e2; border-radius: 8px; min-height: 485px; overflow: hidden; box-shadow: 0 5px 11px #24547218; animation: folder-in 180ms ease-out }
.project-folder-content[data-state=inactive] { display: none }
.project-overview { display: flex; flex-direction: column; align-items: flex-start; padding: 46px 44px }
.project-stack { font-size: 14px; color: var(--gray) }
.project-overview h2 { font-size: clamp(32px,3.5vw,43px); letter-spacing:normal; line-height: 1.1; margin: 18px 0 22px }
.project-overview > p:not(.project-stack) { font-size: 17px; line-height: 1.7; max-width: 340px }
.project-overview > p.project-scope-note { font-size: 15px; color: var(--gray); margin-top: 15px; margin-bottom: 26px }
.project-overview .button { margin-top: auto; background: #203f55 }.project-overview .button:hover { background: #285f82 }
.project-overview .text-link { margin-top: 20px; font-size: 14px }
.file-walkthrough { background: #f1f5f8; padding: 35px 37px; display: flex; flex-direction: column; min-width: 0 }
.preview-title { font-size: 14px; color: #637581; line-height: 1.5 }
.file-steps { gap: 0; margin-top: 26px }
.file-step-buttons { width: 100%; height: auto!important; padding: 0; justify-content: space-between; gap: 10px }
.file-step-buttons > button { flex: 1; height: auto; min-height: 44px; padding: 7px 8px; font-size: 15px; border-radius: 4px; color: #627581; transition: background 150ms,color 150ms }
.file-step-buttons > button::after { display: none }
.file-step-buttons > button[data-state=active] { background: #dcebf5!important; color: #235f86 }
.file-step-buttons > button:focus-visible { outline: 2px solid #235f86; outline-offset: 2px }
.file-progress { position: relative; height: 2px; background: #d2dfe7; margin: 14px 22px 26px }
.file-progress > span { display: block; height: 100%; background: #347ca6; transition: width 220ms ease }
.file-progress > i { position: absolute; top: -3px; width: 8px; height: 8px; background: #347ca6; border-radius: 50%; transform: translateX(-50%); transition: left 220ms ease }
.file-step-content { min-height: 196px; padding: 6px 6px 18px; animation: folder-in 160ms ease-out }
.file-step-content[data-state=inactive] { display: none }
.file-step-content code { font: 13px/1.5 ui-monospace,monospace; color: #597383 }
.file-step-content h3 { font-size: 35px; font-weight: 400; letter-spacing:normal; margin-block: 12px }
.file-step-content p { font-size: 16px; line-height: 1.7; color: #405866; max-width: 375px }
.file-footnote { font-size: 13px; color: #627581; border-top: 1px solid #d2dfe7; padding: 17px 6px 0; line-height: 1.7; margin-top: auto; min-height: 64px }
.design-comparison { padding: 28px 28px 22px; background: #f1f5f8; min-width: 0 }
.comparison-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px }
.comparison-heading .preview-title { color: #637581 }
.comparison-toggle { gap: 2px; background: #e0e9ef; padding: 3px; border-radius: 6px }
.comparison-toggle button { min-height: 40px; padding: 7px 10px; font-size: 13px; color: #597181; border-radius: 4px; border: 0; box-shadow: none }
.comparison-toggle button[data-state=on] { background: #fff; color: #203442 }
.comparison-toggle button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px }
.comparison-stage { display: grid; grid-template-columns: 168px minmax(0,1fr); align-items: center; gap: 27px; padding-top: 24px; min-height: 367px }
.comparison-figure { animation: folder-in 160ms ease-out }
.comparison-figure .prototype-screen { width: 168px; box-shadow: none; filter: drop-shadow(0 8px 8px #24435b24) }
.comparison-figure figcaption { font-size: 12px; color: #637581; margin-top: 9px; text-align: center }
.comparison-note { font-size: 15px; line-height: 1.8; color: #546d7c }
.work-next { font-size: 14px; color: var(--gray); margin-top: 26px }
@keyframes folder-in { from { opacity: .5; transform: translateY(5px) } to { opacity: 1; transform: none } }
@media(max-width:1000px) { .project-overview { padding: 32px 28px }.file-walkthrough { padding: 30px 24px }.comparison-stage { gap: 20px; grid-template-columns: 145px minmax(0,1fr) }.comparison-figure .prototype-screen { width: 145px }.design-comparison { padding-inline: 22px } }
@media(max-width:760px) {
  .work-index { --ink: #203442; --gray: #63737e; --orange: #235f86; --line: #d2dfe7; padding-top: 30px; padding-bottom: 45px }.work-intro { display: block; margin-bottom: 30px }.work-intro h1 { font-size: 66px }.work-intro > p { margin-top: 20px; font-size: 16px }.work-intro br { display: none }
  .project-folders { gap: 4px }.project-folders > button { flex: 1; min-height: 72px; padding: 14px 19px; clip-path: polygon(0 0,82% 0,100% 26px,100% 100%,0 100%) }.project-folders > button > span { font-size: 17px }
  .project-folder-body { padding: 16px 10px 34px; border-radius: 0 12px 12px 12px }.project-folder-body::before { inset: 9px 17px 26px; transform: rotate(-.3deg) }.project-folder-body::after { height: 23px; border-radius: 3px 3px 12px 12px }
  .project-folder-content { grid-template-columns: 1fr; border-radius: 5px; min-height: 0 }
  .project-overview { padding: 27px 23px 30px }.project-overview h2 { font-size: 34px; margin-block: 14px 18px }.project-overview > p:not(.project-stack) { font-size: 16px }.project-overview > p.project-scope-note { font-size: 14px; margin-bottom: 22px }.project-overview .text-link { margin-top: 18px }
  .file-walkthrough { padding: 25px 18px }.file-step-content { min-height: 204px }.file-step-content h3 { font-size: 31px }.file-step-buttons > button { font-size: 14px; padding-inline: 5px }.file-footnote { min-height: 0 }
  .design-comparison { padding: 23px 18px }.comparison-stage { grid-template-columns: 144px minmax(0,1fr); gap: 18px; min-height: 0 }.comparison-figure .prototype-screen { width: 144px }.comparison-note { font-size: 14px; line-height: 1.7 }
}
@media(max-width:380px) { .comparison-stage { grid-template-columns: 1fr }.comparison-figure { margin: auto }.comparison-note { max-width: 240px } }
@media(prefers-reduced-motion:reduce) { .project-folder-content,.file-step-content,.comparison-figure { animation: none }.file-progress > *, .project-folders > button { transition: none } }