/* Samples-only portfolio layout. The shared site and viewer remain unchanged. */
.samples-page .page-hero{padding-block:48px 40px}
.samples-page .page-hero h1{font-size:clamp(2rem,3.8vw,3.1rem)}
.samples-page .page-hero .wrap{gap:40px}
.samples-page .section.alt{padding-top:48px}
.samples-page .portfolio-case-intro{display:flex;align-items:start;gap:40px;margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.samples-page .portfolio-case-intro h2{font-size:1.4rem;margin:0}
.samples-page .portfolio-case-intro>.section-head{margin:0}
.samples-page .portfolio-case-intro>div{flex:0 0 240px}
.samples-page .portfolio-case-intro>p{max-width:720px;margin:0;color:var(--muted)}
.samples-page .portfolio-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:64px}
.samples-page .portfolio-item{padding:28px;border:1px solid var(--line);background:var(--white);min-width:0;scroll-margin-top:100px}
.samples-page .portfolio-info{padding:0 0 22px}
.samples-page .portfolio-info small{font-size:.875rem;color:var(--gold)}
.samples-page .portfolio-info h3{font-size:clamp(1.3rem,2vw,1.75rem);margin:5px 0 7px;line-height:1.4}
.samples-page .portfolio-info p{font-size:1rem;line-height:1.6}
.samples-page .portfolio-info p+p{margin-top:6px}
.samples-page .sample-proof{margin-top:10px;padding:12px 16px 13px;border-inline-start:3px solid var(--gold);background:var(--paper-2);border-radius:var(--radius)}
.samples-page .sample-proof-label{display:block;margin:0 0 4px;color:var(--ink-2);font-size:.9rem;font-weight:700;line-height:1.5}
.samples-page .sample-proof p{margin:0;color:var(--ink);font-size:clamp(1.08rem,1.35vw,1.18rem);font-weight:600;line-height:1.7}
.samples-page .portfolio-images{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start;background:transparent;padding:0}
.samples-page .portfolio-images a{display:flex;flex-direction:column;aspect-ratio:auto;overflow:visible;border:1px solid var(--line);background:white;text-decoration:none;box-shadow:0 3px 10px rgba(24,41,56,.05)}
.samples-page .portfolio-images img{display:block;width:100%;height:auto;object-fit:contain;object-position:initial;background:white}
.samples-page .portfolio-images span{position:static;display:block;padding:10px 16px;font:700 1rem/1.5 "Noto Serif Hebrew",serif;color:var(--ink);background:var(--paper-2);border-bottom:1px solid var(--line)}
.samples-page .portfolio-images .after span{color:white;background:var(--ink)}
.samples-page .portfolio-images a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.samples-page .portfolio-images a:hover{border-color:var(--gold)}
.samples-page .sample-commentary{display:block;margin:26px 0 0;border:0;border-top:1px solid var(--line);background:transparent;scroll-margin-top:100px}
.samples-page .sample-commentary .case-study-copy{padding:24px 0 0;max-width:900px}
.samples-page .sample-commentary h3{font-size:1.2rem}
.samples-page .sample-commentary p{font-size:1rem;line-height:1.75}
.samples-page .case-tags span{font-size:.875rem}
.samples-page [id^="sample-"]{scroll-margin-top:100px}
@media(min-width:1280px){.samples-page .section.alt>.wrap{width:min(1260px,calc(100% - 64px))}}
@media(max-width:760px){
 .samples-page .portfolio-grid{gap:38px}
 .samples-page .portfolio-item{padding:12px}
 .samples-page .portfolio-info{padding:8px 3px 18px}
 .samples-page .sample-proof{margin-top:9px;padding:10px 12px 11px}
 .samples-page .sample-proof p{font-size:1.04rem;line-height:1.65}
 .samples-page .portfolio-images{grid-template-columns:minmax(0,1fr);gap:20px}
 .samples-page .portfolio-images span{padding:9px 12px}
 .samples-page .portfolio-case-intro{display:block}
 .samples-page .portfolio-case-intro>p{margin-top:14px}
 .samples-page .section.alt{padding-top:36px}
 .samples-page .sample-commentary .case-study-copy{padding:22px 3px 0}
 .samples-page .filters{gap:8px;margin-bottom:30px}
 .samples-page .filter-button{padding-inline:12px;font-size:.875rem}
 .samples-page .page-hero{padding-block:36px}
}
@media(prefers-reduced-motion:reduce){.samples-page{scroll-behavior:auto}.samples-page *{scroll-behavior:auto}}
@media print{.samples-page .portfolio-grid{grid-template-columns:1fr}.samples-page .portfolio-item{break-inside:avoid}.samples-page .portfolio-images{grid-template-columns:1fr 1fr}}
.samples-page .section.alt>.wrap>.section-head{gap:36px;margin-bottom:26px}
.samples-page .section.alt>.wrap>.section-head h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.4}
.samples-page .portfolio-case-intro{margin-bottom:24px;padding-bottom:20px;font-size:1rem}
/* Compact commentary; every source/result pair remains full width. */
.samples-page .samples-navigation{display:flex;align-items:start;justify-content:space-between;gap:24px;margin-bottom:22px}
.samples-page .samples-navigation p{max-width:850px;margin:0;font-size:1rem}
.samples-page .samples-navigation>a{white-space:nowrap}
.samples-page .samples-group>.section-head{margin-bottom:24px}
.samples-page .samples-group h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.4;margin:0}
.samples-page .sample-note{max-width:950px;padding-top:20px;margin-top:22px;border-top:1px solid var(--line)}
.samples-page .sample-note p{font-size:1rem;line-height:1.75;margin:0}
.samples-page .sample-related{font-size:.875rem;line-height:1.8;margin-top:12px;color:var(--muted)}
.samples-page .sample-related a{font-size:.875rem}
.samples-page .sample-note .sample-related{margin-top:10px}
.samples-page .all-samples{margin-top:64px;padding-top:40px;border-top:1px solid var(--line);scroll-margin-top:110px}
.samples-page .all-samples .section-head p{font-size:1rem;margin-top:12px}
.samples-page .samples-index{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:36px;font-size:.875rem;line-height:1.8}
.samples-page .samples-index a{border-bottom:1px solid var(--line);text-decoration:none}
.samples-page .samples-index a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.samples-page .case-anchor{scroll-margin-top:110px}
.samples-page .portfolio-grid{gap:48px}
@media(max-width:760px){
 .samples-page .samples-navigation{display:block}
 .samples-page .samples-navigation>a{display:inline-block;margin-top:12px}
 .samples-page .portfolio-grid{gap:32px}
 .samples-page .sample-note{padding-top:16px;margin-top:18px}
 .samples-page .all-samples{margin-top:44px;padding-top:30px}
 .samples-page .samples-index{gap:10px 16px}
}
/* Desktop reading windows: fit originals to each column and keep labels outside the page. */
.samples-page .portfolio-images .document-side{min-width:0;border:1px solid var(--line);background:white;box-shadow:0 3px 10px rgba(24,41,56,.05)}
.samples-page .portfolio-images .document-full-link{border:0;box-shadow:none}
@media(min-width:761px){
 .samples-page .portfolio-info{padding-bottom:12px}
 .samples-page .portfolio-images .document-side{display:flex;min-width:0;flex-direction:column;align-self:start}
 .samples-page .portfolio-images .document-side>span{position:static;display:block;flex:0 0 auto;width:100%;min-height:48px;padding:10px 16px;text-align:center;line-height:1.5}
 .samples-page .document-viewport{width:100%;height:620px;overflow-y:auto;overflow-x:hidden;direction:ltr;overscroll-behavior:contain;scrollbar-gutter:stable;position:relative}
 .samples-page .document-viewport .document-full-link{display:block;width:100%;max-width:100%;height:auto}
 .samples-page .document-viewport img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:top center}
 .samples-page .document-viewport:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
}
@media(max-width:760px){
 .samples-page .portfolio-images .document-side{display:flex;min-width:0;flex-direction:column;align-self:start}
 .samples-page .portfolio-images .document-side>span{position:static;display:block;flex:0 0 auto;width:100%;min-height:46px;padding:9px 12px;text-align:center;line-height:1.5}
 .samples-page .document-viewport{width:100%;height:auto;overflow:visible;direction:rtl}
 .samples-page .document-viewport .document-full-link{width:100%;max-width:100%}
 .samples-page .document-viewport img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:top center}
}
@media print{.samples-page .document-viewport{height:auto;overflow:visible}.samples-page .document-viewport .document-full-link,.samples-page .document-viewport img{width:100%;max-width:100%}}
@media(min-width:1280px){
 .samples-page .section.alt>.wrap{width:min(1440px,calc(100% - 32px))}
 .samples-page .portfolio-item{padding:22px}
 .samples-page .portfolio-images{gap:20px}
}

/* Printing the portfolio must not print an open modal or lock the page. */
@media print{
 html:has(body.samples-page .sample-viewer[open]){overflow:visible!important}
 .samples-page .sample-viewer{display:none!important}
}

/* READING-FIRST QA: full-width paper and scrollable long documents. */
.samples-page .sample-viewer-stage{padding:14px 24px 28px;scroll-behavior:auto;background:rgba(245,239,227,.10)}
.samples-page .sample-viewer-image{max-height:none;max-width:none;margin:0 auto;transform:none}
.samples-page .sample-viewer-image.loaded{transform:none}
.samples-page .sample-viewer-header{padding-block:12px}
.samples-page .sample-viewer-footer{padding-block:7px}
.samples-page .sample-viewer-hint{font-size:.68rem}
@media(max-width:760px){
 .samples-page .sample-viewer-stage{padding:10px 6px 18px}
 .samples-page .sample-viewer-header{padding-block:9px}
 .samples-page .sample-viewer-footer{padding:7px 8px}
 .samples-page .sample-viewer-image{border-width:4px}
}
@media print{.samples-page .sample-viewer{display:none!important}}

/* Compact, content-focused previews; the anchors still open the untouched full documents. */
.samples-page .portfolio-grid{gap:34px}
.samples-page .portfolio-item{padding:20px}
.samples-page .portfolio-info{padding-bottom:14px}
.samples-page .portfolio-images{gap:18px;align-items:start}
.samples-page .portfolio-images .document-side{overflow:hidden;border:1px solid var(--line);box-shadow:none}
.samples-page .document-viewport{width:100%;height:auto;aspect-ratio:1.7;overflow:hidden;scrollbar-gutter:auto;background:#fff;direction:rtl}
.samples-page .document-viewport .document-full-link{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1.7;overflow:hidden}
.samples-page .document-viewport img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center;background:#fff}
.samples-page .portfolio-images .document-side>span{min-height:44px;padding:8px 12px;text-align:center;font-size:.95rem;line-height:1.5}
.samples-page .portfolio-images .document-side.before>span{color:var(--ink);background:var(--paper-2)}
.samples-page .portfolio-images .document-side.after>span{color:#fff;background:var(--ink)}
.samples-page .portfolio-images a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:760px){
 .samples-page .portfolio-grid{gap:26px}
 .samples-page .portfolio-item{padding:12px}
 .samples-page .portfolio-info{padding:8px 3px 14px}
 .samples-page .portfolio-images{grid-template-columns:minmax(0,1fr);gap:14px}
 .samples-page .portfolio-images .document-side>span{min-height:42px;padding:7px 10px}
}