.preview { overflow: hidden; border-radius: 6px; width: 100%; }
.work-art.clearflow,.case-art.clearflow { background:#dceef6; }
.work-art.ridgeline,.case-art.ridgeline { background:#e3d9ca; }
.browser-bar { background: var(--white); color: var(--ink-500); display: flex; align-items: center; justify-content: space-between; font-size: 8px; height: 25px; padding-inline: 10px; border: 1px solid var(--color-border); border-radius: 6px 6px 0 0; }
.browser-bar > span:first-child { display: flex; gap: 3px; }
.browser-bar b { width: 4px; height: 4px; border-radius: 50%; display: block; background: var(--color-border); }
.preview-capture { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1030; }
.work-grid--pair { grid-template-columns: repeat(2,1fr); }
@media(max-width:760px) { .work-grid--pair { grid-template-columns: 1fr; } }
.device-switcher { display: flex; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.device-switcher button { font-size: .8rem; font-weight: 550; min-height: 44px; padding: .65rem 1.3rem; border: 1px solid var(--ink-700); color: var(--ink-950); background: transparent; border-radius: var(--radius-sm); }
.device-switcher button[aria-pressed='true'] { background: var(--ink-950); color: var(--paper-50); border-color: var(--ink-950); }
.device-preview[hidden] { display: none; }
.device-preview img { width: 100%; height: auto; border-radius: 5px; box-shadow: var(--preview-shadow); }
.device-preview--desktop { max-width: 950px; margin: auto; }
.device-preview--mobile { max-width: 300px; margin: auto; border: 7px solid var(--ink-950); border-radius: 24px; overflow: hidden; box-shadow: var(--preview-shadow); }
.device-preview--mobile img { border-radius: 0; }
.preview-caption { margin-top: 1.5rem; text-align: center; font-size: .75rem; color: var(--ink-700); }
.page-links { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; padding: 0; list-style: none; margin-top: 1rem; }
.page-links li { margin: 0; }
.page-links a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: .6rem 0; border-bottom: 1px solid var(--color-border); font-size: .85rem; font-weight: 500; }
.page-links a:hover { color: var(--color-link); }
.page-links svg { width: 16px; height: 16px; }
.collection-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: -1.5rem 0 2.5rem; }
.collection-nav a { font-size: .8rem; border-bottom: 1px solid var(--color-border); min-height: 44px; display: inline-flex; align-items: center; gap: .7rem; }
.collection-nav a:hover { color: var(--color-link); }
.collection-nav svg { width: 15px; height: 15px; }
@media(max-width:420px) { .browser-bar { height: 21px; font-size: 7px; }.device-switcher { margin-bottom: 1.5rem; }.page-links { grid-template-columns: 1fr; }.collection-nav { gap: .6rem 1.2rem; }.hero-copy .eyebrow { font-size: .63rem; letter-spacing: .09em; } }