/* =====================================================================
   Photographic mockup scenes — overlay mapping + print treatments
   ===================================================================== */
.scene { position: relative; width: 100%; overflow: hidden; container-type: inline-size; background-color: #1a1a1a; background-size: cover; background-position: center; isolation: isolate; }
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
/* layer is authored at 1000px wide and scaled to the rendered width: k = 100cqw / 1000px */
.scene-layer { position: absolute; left: 0; top: 0; width: 1000px; transform-origin: 0 0; transform: scale(var(--k, 1)); pointer-events: none; --k: tan(atan2(100cqw, 1000px)); }
.ov { position: absolute; left: 0; top: 0; transform-origin: 0 0; container-type: size; display: grid; place-items: center; overflow: hidden; color: var(--b-ink); }
.ov .sym { flex: none; }
.ov .wm { white-space: nowrap; line-height: 1; }

/* ---- content layouts (container-relative) ---- */
.ov-lockup { display: flex; align-items: center; gap: .36em; font-size: min(46cqh, calc(86cqw / (var(--fit) + 1.6))); }
.ov-lockup .sym { width: 1.18em; height: 1.18em; }
.ov-stack { display: flex; flex-direction: column; align-items: center; gap: .42em; font-size: min(22cqh, calc(78cqw / var(--fit))); }
.ov-stack .sym { width: 1.9em; height: 1.9em; }
.ov-label, .ov-tag { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5em; font-size: min(13cqh, calc(74cqw / var(--fit))); }
.ov-label .sym, .ov-tag .sym { width: 1.6em; height: 1.6em; }
.ov-rule { width: 2.2em; height: 1px; background: currentColor; opacity: .5; margin: .1em 0; }
.ov-small { font-family: var(--b-fb, sans-serif); font-size: .34em; letter-spacing: .18em; text-transform: uppercase; max-width: 90cqw; line-height: 1.35; }
.ov-tiny { font-family: var(--b-fb, sans-serif); font-size: .24em; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.ov-tag { justify-content: center; padding-top: 6cqh; }

.ov-letter { width: 100%; height: 100%; padding: 9cqw 10cqw; display: flex; flex-direction: column; font-size: 4.4cqw; }
.ov-letter-head { display: flex; align-items: center; gap: .4em; font-size: 1.6em; padding-bottom: .7em; border-bottom: 1px solid currentColor; }
.ov-letter-head .sym { width: 1.2em; height: 1.2em; }
.ov-letter-lines { display: grid; gap: 1.6cqh; margin-top: 8cqh; }
.ov-letter-lines i { height: .9cqh; background: currentColor; opacity: .16; }
.ov-letter-lines i:nth-child(3n) { width: 64%; }
.ov-letter-foot { margin-top: auto; font-family: var(--b-fb, sans-serif); font-size: .62em; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

.ov-book { width: 100%; height: 100%; padding: 14cqw 12cqw; display: flex; flex-direction: column; font-size: calc(52cqw / var(--fit)); }
.ov-book-t { margin-top: auto; font-family: var(--b-fb, sans-serif); font-size: .2em; letter-spacing: .22em; text-transform: uppercase; max-width: 60cqw; line-height: 1.5; }
.ov-book-n { font-family: var(--b-fh, serif); font-size: .5em; margin-top: .4em; }

.ov-grid { width: 100%; height: 100%; padding: 8cqw; display: grid; grid-template-rows: 1fr auto auto; gap: 4cqh; }
.ov-grid-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.ov-grid-cells i { border: 1px solid currentColor; opacity: .3; }
.ov-grid-mark { justify-self: center; width: 34cqw; margin-top: -60cqh; }
.ov-grid-mark .sym { width: 100%; height: auto; }
.ov-grid .ov-tiny { font-size: 3.6cqw; }

.ov-poster { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 8cqw; font-size: 5.6cqw; }
.ov-poster-top { display: flex; align-items: center; gap: .45em; font-size: 1.25em; }
.ov-poster-top .sym { width: 1.3em; height: 1.3em; }
.ov-poster-h { font-family: var(--b-fh, serif); font-size: min(3em, 13cqh); line-height: 1; letter-spacing: -.01em; margin-top: auto; }
.ov-poster-s { font-family: var(--b-fb, sans-serif); font-size: .82em; line-height: 1.35; margin-top: .7em; opacity: .85; }
.ov-poster-d { font-family: var(--b-fb, sans-serif); font-size: .62em; letter-spacing: .14em; text-transform: uppercase; margin-top: 1.4em; padding-top: .8em; border-top: 1px solid currentColor; }
.k-poster .ov-poster { aspect-ratio: auto; }
.k-poster:has(.ov-poster) { container-type: size; }
@container (min-aspect-ratio: 1.2) { .ov-poster { justify-content: center; } .ov-poster-h { margin-top: .5em; font-size: min(2.4em, 20cqh); } }

.ov-app { width: 100%; height: 100%; background: var(--b-bg); color: var(--b-ink); padding: 14cqw 7cqw 5cqw; display: flex; flex-direction: column; font-family: var(--b-fb, sans-serif); font-size: 4.2cqw; }
.ov-app-bar { display: flex; align-items: center; gap: .4em; font-size: 1.5em; }
.ov-app-bar .sym { width: 1.2em; height: 1.2em; }
.ov-app-h { font-family: var(--b-fh, serif); font-size: 2.1em; line-height: 1.05; margin-top: 1.1em; }
.ov-app-s { margin-top: .6em; opacity: .7; line-height: 1.35; }
.ov-app-list { list-style: none; margin: 1.2em 0 0; padding: 0; }
.ov-app-list li { display: flex; align-items: center; gap: .7em; padding: .75em 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); line-height: 1.2; }
.ov-app-list i { width: 2.6em; height: 2.6em; flex: none; border-radius: .5em; background: color-mix(in srgb, var(--b-accent) 85%, white); }
.ov-app-list li:nth-child(2n) i { background: color-mix(in srgb, var(--b-alt) 70%, white); }
.ov-app-tab { margin-top: auto; display: flex; justify-content: space-around; padding-top: .8em; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.ov-app-tab i { width: 1.3em; height: 1.3em; border-radius: .35em; background: currentColor; opacity: .25; }
.ov-app-tab i:first-child { opacity: 1; background: var(--b-accent); }

/* ---- treatments ---- */
/* ink printed into paper / board: multiply keeps the photo's texture and light */
.t-print { mix-blend-mode: multiply; opacity: .9; filter: blur(.25px); }
/* screen-printed light ink on dark fabric */
.t-ink { color: #f3efe6; --s-ink: #f3efe6 !important; --s-cut: #111 !important; mix-blend-mode: screen; opacity: .9; filter: blur(.3px); }
/* painted / stencilled onto concrete */
.t-paint { mix-blend-mode: multiply; opacity: .78; filter: blur(.5px) contrast(1.1); }
/* burnt into timber */
.t-burn { color: #3b2412; --s-ink: #3b2412 !important; --s-acc: #6a3b1c !important; --s-cut: transparent !important; mix-blend-mode: multiply; opacity: .72; filter: blur(.55px) drop-shadow(0 0 1.5px rgba(80, 40, 10, .45)); }
/* blind deboss into white stock */
.t-deboss { color: #e9e7e3; --s-ink: #e8e6e2 !important; --s-acc: #e8e6e2 !important; --s-cut: #f4f3f1 !important;
  filter: drop-shadow(0 1.4px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1.2px .4px rgba(0, 0, 0, .28)) drop-shadow(0 -2px 3px rgba(0, 0, 0, .08)); mix-blend-mode: multiply; }
/* hot-foil: brass and silver */
.t-foil { --s-ink: url(#g-brass) !important; --s-acc: url(#g-brass) !important; --s-cut: transparent !important; filter: drop-shadow(0 .6px .4px rgba(0, 0, 0, .45)); }
.t-foil .wm, .t-silver .wm { background: linear-gradient(100deg, #8a6c3e 0%, #e4cc93 28%, #a8844c 46%, #f2dfae 62%, #8f7042 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-silver { --s-ink: url(#g-silver) !important; --s-acc: url(#g-silver) !important; --s-cut: transparent !important; filter: drop-shadow(0 .6px .5px rgba(0, 0, 0, .6)); }
.t-silver .wm { background: linear-gradient(100deg, #8d9196 0%, #f4f6f8 30%, #9ea3a8 50%, #ffffff 66%, #7e8287 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* raised acrylic / metal letters on a wall */
.t-raised { filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .35)) drop-shadow(5px 9px 7px rgba(0, 0, 0, .22)) drop-shadow(14px 22px 26px rgba(0, 0, 0, .12)); }
/* halo-lit metal letters */
.t-backlit { color: #15161a; --s-ink: #15161a !important; --s-acc: #2a2c31 !important; --s-cut: transparent !important;
  filter: drop-shadow(0 0 2px rgba(255, 236, 205, .95)) drop-shadow(0 0 10px rgba(255, 226, 180, .75)) drop-shadow(0 0 28px rgba(255, 214, 160, .45)); }
/* self-lit screens: phone, lightbox, LED */
.t-screen { filter: saturate(1.04) contrast(1.02); }
.t-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .07) 100%); pointer-events: none; }
/* slight cylindrical shading for bottle labels */
.ov--curve::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 22%, rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .2)); mix-blend-mode: multiply; }

/* ---- map pin overlay (aerial photography) ---- */
.scene-pin { position: absolute; width: 0; height: 0; }
.pin-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 4px 14px rgba(0, 0, 0, .4); }
.pin-ring { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); }
.pin-label { position: absolute; left: 50px; top: -22px; color: #fff; white-space: nowrap; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); font-size: clamp(18px, 3cqw, 40px); }
.pin-label small { display: block; font-family: var(--sans); font-size: .4em; letter-spacing: .2em; text-transform: uppercase; margin-top: .4em; }
@media (prefers-reduced-motion: no-preference) { .pin-ring { animation: pin 2.4s ease-out 3; } @keyframes pin { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } }

/* photographs fade in once decoded (JS adds .is-loaded; without JS they show immediately) */
.js .scene-img { opacity: 0; transition: opacity .9s cubic-bezier(.22, .61, .2, 1); }
.js .scene-img.is-loaded { opacity: 1; }
.js .scene:has(.scene-img:not(.is-loaded)) .scene-layer, .js .scene:has(.scene-img:not(.is-loaded)) .scene-pin { opacity: 0; }
.scene-layer, .scene-pin { transition: opacity .9s cubic-bezier(.22, .61, .2, 1) .15s; }
@media (prefers-reduced-motion: reduce) { .js .scene-img { transition: none; } }

/* website on a laptop screen */
.ov-web { width: 100%; height: 100%; background: var(--b-bg); color: var(--b-ink); display: flex; flex-direction: column; font-family: var(--b-fb, sans-serif); font-size: 2.4cqw; }
.ov-web-nav { display: flex; justify-content: space-between; align-items: center; padding: 3cqh 4cqw; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.ov-web-logo { display: inline-flex; align-items: center; gap: .4em; font-size: 1.5em; }
.ov-web-logo .sym { width: 1.2em; height: 1.2em; }
.ov-web-links { display: flex; gap: 2.4em; font-size: .85em; opacity: .75; }
.ov-web-hero { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 0; }
.ov-web-copy { padding: 6cqh 4cqw; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; align-items: flex-start; }
.ov-web-h { font-family: var(--b-fh, serif); font-size: 2.6em; line-height: 1.02; letter-spacing: -.01em; }
.ov-web-s { opacity: .7; line-height: 1.4; max-width: 26em; }
.ov-web-btn { background: var(--b-ink); color: var(--b-bg); padding: .7em 1.3em; font-size: .85em; font-weight: 600; }
.ov-web-art { display: grid; place-items: center; }
.ov-web-art .sym { width: 42%; height: auto; aspect-ratio: 1; }
.ov.k-web { display: block; }
.ov.k-web .ov-web { position: absolute; inset: 0; }
.ov-web-hero { grid-template-rows: 1fr; }
/* small woven/sewn label: ivory tape with a fine border, printed logo */
.ov.woven { mix-blend-mode: normal; opacity: 1; filter: none; padding: 0 6cqw; }
.ov.k-lockup.woven, .ov.k-label.woven { background: #ece7de; box-shadow: 0 .5px 1px rgba(0,0,0,.22); filter: blur(.25px) contrast(.95); }
/* landscape posters (billboards, LED): keep content inside the safe area */
@container (min-aspect-ratio: 1.6) { .ov-poster { padding: 7cqh 6cqw; font-size: 4cqw; } .ov-poster-h { font-size: min(2.2em, 16cqh); } .ov-poster-s { font-size: .7em; } }