/* SEB AGNEW Core – front-end components */
:root {
	--sa-ink: #151515;
	--sa-text: #45443f;
	--sa-muted: #6b6a66;
	--sa-line: #e3e1dc;
	--sa-field: #c9c7c1;
	--sa-ph: #cbc8c1;
	--sa-soft: #f1f0ec;
	--sa-gutter: clamp(20px, 5vw, 80px);
}

.sa-note { font-size: 14px; color: var(--sa-muted); text-align: center; }
.sa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.sa-open, .sa-linkbtn {
	display: block; padding: 0; border: 0; margin: 0; background: transparent; color: inherit;
	font: inherit; cursor: zoom-in; text-align: inherit;
}
.sa-linkbtn { display: inline; cursor: pointer; color: var(--sa-muted); font-size: 14px; }
.sa-linkbtn:hover, .sa-linkbtn:focus-visible { color: var(--sa-ink); text-decoration: underline; text-underline-offset: 5px; }
.sa-open img { display: block; width: 100%; height: auto; background: var(--sa-ph); }
.sa-open:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 4px; }

/* ---------- Works (list) ---------- */
.sa-works--list {
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(80px, 8vw, 136px); padding: 0 var(--sa-gutter);
}
.sa-work { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; }
.sa-work figcaption {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
	font-size: 14px; color: var(--sa-muted);
}
.sa-work__title { color: var(--sa-ink); }

/* ---------- Triptychs (APOPHENIA) ---------- */
.sa-works--triptych {
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(72px, 7vw, 120px); padding: 0 var(--sa-gutter);
}
.sa-tri { width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; }
.sa-tri__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.sa-tri__item { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sa-tri__item figcaption { font-size: 12px; letter-spacing: 0.08em; color: #5f5e5a; }
.sa-tri__foot {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	border-top: 1px solid var(--sa-line); padding-top: 14px; font-size: 14px; color: var(--sa-muted);
}
.sa-tri__name { color: var(--sa-ink); font-size: 15px; }
@media (max-width: 760px) {
	.sa-tri__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 calc(-1 * var(--sa-gutter)); padding: 0 var(--sa-gutter) 4px; }
	.sa-tri__item { flex: 0 0 80%; scroll-snap-align: center; }
}

/* ---------- Matrix ---------- */
.sa-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
.sa-matrix__cell { display: block; background: var(--sa-ph); overflow: hidden; }
.sa-matrix__cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
a.sa-matrix__cell:hover img, a.sa-matrix__cell:focus-visible img { opacity: .8; }

/* ---------- Portraits ---------- */
.sa-portraits { width: 100%; }
.sa-portraits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 10px; }
.sa-portrait { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sa-portrait .sa-open { position: relative; }
.sa-portrait figcaption { font-size: 12px; color: #5f5e5a; }
.sa-badge {
	position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 17px;
	background: rgba(0, 0, 0, .45); color: #fff; display: flex; align-items: center; justify-content: center;
}

/* ---------- Hero ---------- */
.sa-hero { position: relative; width: 100%; aspect-ratio: 2 / 1; background: #1d1d1c; overflow: hidden; }
.sa-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-hero__toggle {
	position: absolute; right: 28px; bottom: 28px; width: 44px; height: 44px; border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .18); color: #fff;
	display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.sa-hero__toggle .sa-i-play { display: none; }
.sa-hero.is-paused .sa-i-play { display: flex; }
.sa-hero.is-paused .sa-i-pause { display: none; }
@media (max-width: 760px) {
	.sa-hero { aspect-ratio: 16 / 9; }
	.sa-hero__toggle { right: 14px; bottom: 14px; }
}

/* ---------- Gallery (books) ---------- */
.sa-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sa-gallery__main { aspect-ratio: 1 / 1; background: #e7e5e0; }
.sa-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.sa-gallery__thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.sa-gallery__thumb { padding: 0; border: 0; background: #e7e5e0; cursor: pointer; aspect-ratio: 1 / 1; opacity: .6; outline: 1px solid transparent; outline-offset: 2px; }
.sa-gallery__thumb[aria-current="true"] { opacity: 1; outline-color: var(--sa-ink); }
.sa-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
	.sa-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Films ---------- */
.sa-film { display: flex; flex-direction: column; gap: 12px; color: var(--sa-ink); text-decoration: none !important; }
.sa-film__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #1d1d1c; overflow: hidden; }
.sa-film__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; transition: opacity .25s ease; }
.sa-film__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 32px;
	border: 1px solid rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .25); color: #fff;
	display: flex; align-items: center; justify-content: center; transition: background-color .25s ease, color .25s ease;
}
.sa-film:hover .sa-film__media img, .sa-film:focus-visible .sa-film__media img { opacity: 1; }
.sa-film:hover .sa-film__play, .sa-film:focus-visible .sa-film__play { background: #fff; color: var(--sa-ink); border-color: #fff; }
.sa-film__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sa-film__title { font-size: 15px; }
.sa-film:hover .sa-film__title { text-decoration: underline; text-underline-offset: 5px; }
.sa-film__label { font-size: 13px; letter-spacing: .16em; color: var(--sa-muted); white-space: nowrap; }

/* ---------- Buttons & forms ---------- */
.sa-btn {
	height: 50px; padding: 0 26px; border: 0; border-radius: 0; background: var(--sa-ink); color: #fff;
	font-family: inherit; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.sa-btn:hover, .sa-btn:focus-visible { background: #fff; color: var(--sa-ink); box-shadow: inset 0 0 0 1px var(--sa-ink); }

.sa-form { display: flex; flex-direction: column; gap: 18px; }
.sa-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.sa-field { display: flex; flex-direction: column; gap: 8px; }
.sa-field label { font-size: 13px; color: var(--sa-text); }
.sa-field input, .sa-field select, .sa-field textarea, .sa-nl input[type="email"] {
	box-sizing: border-box; width: 100%; padding: 0 16px; border: 1px solid var(--sa-field); border-radius: 0;
	background: #fff; font-family: inherit; font-size: 16px; color: var(--sa-ink);
}
.sa-field input, .sa-field select { height: 50px; }
.sa-field textarea { padding: 14px 16px; line-height: 1.5; resize: vertical; }
.sa-field input:focus, .sa-field select:focus, .sa-field textarea:focus, .sa-nl input:focus { outline: 2px solid var(--sa-ink); outline-offset: -1px; }
.sa-form .sa-btn { align-self: flex-start; padding: 0 30px; }
.sa-form__note { margin: 0; font-size: 13px; color: var(--sa-muted); }
.sa-form__ok, .sa-form__err { margin: 0 0 18px; padding: 14px 16px; font-size: 15px; }
.sa-form__ok { background: #eef0ea; }
.sa-form__err { background: #f6e9e6; }

/* ---------- Newsletter ---------- */
.sa-nl { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.sa-nl__text { font-size: 16px; line-height: 1.6; color: var(--sa-text); }
.sa-nl--footer .sa-nl__text { font-size: 14px; line-height: 1.5; }
.sa-nl--footer .sa-nl__text strong { color: var(--sa-ink); font-weight: 500; }
.sa-nl__row { display: flex; flex-wrap: wrap; }
.sa-nl__row input[type="email"] { flex: 1 1 200px; min-width: 0; height: 50px; border-right: 0; }
.sa-nl__row .sa-btn { flex: 0 0 auto; }
.sa-nl--footer .sa-nl__row input[type="email"], .sa-nl--footer .sa-btn { height: 46px; }
.sa-nl--footer .sa-btn { padding: 0 22px; font-size: 12px; }
.sa-nl__note { margin: 0; font-size: 13px; color: var(--sa-muted); }
.sa-nl__msg { margin: 0; font-size: 14px; color: var(--sa-ink); }
.sa-nl__msg:empty { display: none; }
@media (max-width: 420px) {
	.sa-nl__row input[type="email"] { border-right: 1px solid var(--sa-field); }
	.sa-nl__row .sa-btn { flex: 1 1 100%; margin-top: 8px; }
}

/* ---------- Viewer (overlay) ---------- */
body.sa-viewer-open { overflow: hidden; }
.sa-viewer {
	position: fixed; inset: 0; z-index: 9999; background: #fff; color: var(--sa-ink);
	display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
	font-family: inherit;
}
.sa-viewer[hidden] { display: none; }
.sa-viewer > * { flex-shrink: 0; }
.sa-viewer__bar {
	position: sticky; top: 0; z-index: 2; background: #fff;
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
	padding: 14px clamp(16px, 4vw, 56px);
}
.sa-viewer__label { justify-self: start; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--sa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sa-viewer__count { font-size: 13px; color: var(--sa-muted); }
.sa-viewer button.sa-iconbtn {
	width: 44px; height: 44px; border: 0; background: transparent; color: var(--sa-ink);
	display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: 0 0 44px;
}
.sa-viewer__close { justify-self: end; }
.sa-viewer__stage {
	display: flex; align-items: center; justify-content: center; gap: clamp(4px, 2vw, 32px);
	padding: 0 clamp(4px, 2vw, 32px); min-height: calc(100vh - 200px); min-height: calc(100dvh - 200px);
}
.sa-viewer__figure { margin: 0; flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sa-viewer__img {
	display: block; max-width: 100%; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px);
	width: auto; height: auto; object-fit: contain; background: var(--sa-soft); margin: 0 auto;
}
.sa-viewer video.sa-viewer__img { background: #000; }
.sa-viewer__cap {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; font-size: 14px; color: var(--sa-muted);
}
.sa-viewer__cap .sa-viewer__title { color: var(--sa-ink); }
.sa-viewer__print { color: var(--sa-ink); letter-spacing: .02em; }
.sa-viewer__print a { color: var(--sa-ink); }
.sa-viewer__sizes { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--sa-muted); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sa-viewer__mo { padding: clamp(56px, 6vw, 96px) clamp(20px, 5vw, 80px) clamp(64px, 7vw, 110px); display: flex; justify-content: center; }
.sa-viewer__mo[hidden] { display: none; }
.sa-viewer__mo-inner { width: 100%; max-width: 980px; display: flex; flex-direction: column; gap: 18px; }
.sa-viewer__mo h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--sa-muted); }
.sa-facade { position: relative; aspect-ratio: 16 / 9; background: #1d1d1c; overflow: hidden; }
.sa-facade img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; }
.sa-facade button {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 38px;
	border: 1px solid rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .2); color: #fff;
	display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
	transition: background-color .25s ease, color .25s ease;
}
.sa-facade button:hover, .sa-facade button:focus-visible { background: #fff; color: var(--sa-ink); }
.sa-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sa-facade__note { margin: 0; font-size: 13px; color: var(--sa-muted); }
@media (max-width: 760px) {
	.sa-viewer__stage { padding: 0; min-height: 0; }
	.sa-viewer__stage > .sa-iconbtn { display: none !important; }
	.sa-viewer__mo { padding-left: 16px; padding-right: 16px; }
	.sa-viewer__figure { padding: 0 16px; }
	.sa-viewer__img { max-height: 70vh; }
	.sa-viewer__nav-m { display: flex !important; justify-content: space-between; padding: 8px 4px 0; }
}
.sa-viewer__nav-m { display: none; }

/* ---------- Film player ---------- */
.sa-player { position: fixed; inset: 0; z-index: 9999; background: rgba(12, 12, 12, .94); display: flex; flex-direction: column; }
.sa-player[hidden] { display: none; }
.sa-player__bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 56px); color: #d8d6d1; font-size: 13px; letter-spacing: .12em; }
.sa-player button.sa-iconbtn { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sa-player__stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 clamp(8px, 4vw, 56px) clamp(24px, 4vw, 56px); min-height: 0; }
.sa-player__frame { position: relative; width: min(100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.sa-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sa-legal-guarantee img { max-width: 500px; width: 100%; height: auto; }

/* Thank-you note */
.sa-flash { display: flex; justify-content: center; align-items: center; gap: 16px; background: var(--sa-ink); color: #fff; padding: 12px var(--sa-gutter); font-size: 14px; letter-spacing: .04em; }
.sa-flash p { margin: 0; }
.sa-flash__close { border: 0; background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }
/* Desktop: keep the start of the next section visible below the hero. */
@media (min-width: 761px) {
	.sa-hero { aspect-ratio: auto; height: min(50vw, max(420px, calc(100svh - 138px))); }
}