/* Aksons Umhlanga — Up close: the catalogue plate and the glass (tour.js).
   The photograph sits whole on the page; the lens travels over it and magnifies each feature.
   Without JS / reduced motion: a plain list of crops. */

.ak-upclose { position: relative; background: var(--ak-paper); --uc-top: 16px; }
.ak-lot .ak-upclose { --uc-top: 66px; }
.ak-upclose__pin { display: none; }
.ak-upclose__lhead { padding-top: var(--ak-sec); }
.ak-upclose__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; padding-block: 30px var(--ak-sec); }
.ak-upclose__list li { display: grid; gap: 14px; }
.ak-upclose__crop { display: block; aspect-ratio: 4 / 3; background-repeat: no-repeat; background-size: var(--z, 220%) auto; background-position: var(--x) var(--y); }
.ak-upclose__list p { color: var(--ak-ink-3); margin-top: 6px; }
.ak-upclose.is-live .ak-upclose__lhead, .ak-upclose.is-live .ak-upclose__list { display: none; }

/* The pinned spread: plate on the left, the catalogue note on the right, stops along the foot. */
.ak-upclose.is-live .ak-upclose__pin {
	position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ak-paper);
	display: grid; grid-template-columns: minmax(0, 1fr) clamp(270px, 26vw, 390px); grid-template-rows: auto minmax(0, 1fr) auto;
	column-gap: clamp(28px, 4vw, 64px); row-gap: 14px;
	padding: calc(var(--ak-head) + var(--uc-top)) var(--ak-gut) 14px;
}
.ak-upclose__head { grid-column: 2; grid-row: 1; align-self: start; }
.ak-upclose__lot { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: 12.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.ak-upclose__lot span { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--ak-ink-3); }
.ak-upclose__t { font-family: var(--ak-display); font-weight: 400; font-size: clamp(1.6rem, .9rem + 1.5vw, 2.6rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.ak-upclose__sub { margin-top: 10px; font-size: 14px; color: var(--ak-ink-3); }
.ak-upclose__sub a { color: var(--ak-ink); font-weight: 600; }

/* The plate: the studio photograph, mounted. The veil lifts the page over it while the glass is on. */
.ak-upclose__frame { grid-column: 1; grid-row: 1 / 3; position: relative; overflow: hidden; min-height: 0; background: var(--ak-well); contain: strict; }
.ak-upclose__plate { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; }
.ak-upclose__plate img { width: 100%; height: 100%; display: block; }
.ak-upclose__veil { position: absolute; inset: 0; z-index: 3; background: var(--ak-paper); opacity: 0; pointer-events: none; will-change: opacity; }

/* Numbered points: where the other details on this photograph are. */
.ak-upclose__pt { position: absolute; left: 0; top: 0; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
.ak-upclose__pt::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ak-ink); box-shadow: 0 0 0 3px var(--ak-paper), 0 6px 14px rgba(11, 11, 11, .35); transition: transform .35s var(--ak-ease); }
.ak-upclose__pt span { position: absolute; left: 26px; top: 50%; translate: 0 -50%; padding: 3px 6px; background: var(--ak-paper); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ak-ink); white-space: nowrap; }
.ak-upclose__pt.is-on { pointer-events: auto; }
@media (hover: hover) { .ak-upclose__pt:hover::before { transform: scale(1.35); } }

/* The glass: the Aksons full stop grown into a lens, mounted in a paper bezel. */
.ak-lens { position: absolute; left: 0; top: 0; z-index: 5; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; will-change: transform, opacity; opacity: 0; }
.ak-lens__img { position: absolute; inset: 0; border-radius: 50%; background-color: var(--ak-well); background-repeat: no-repeat; box-shadow: 0 0 0 7px var(--ak-paper), 0 0 0 8px rgba(11, 11, 11, .16), 0 44px 70px -26px rgba(11, 11, 11, .6), 0 12px 24px -10px rgba(11, 11, 11, .3); }
.ak-lens__glass { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 50% 50%, rgba(11, 11, 11, 0) 64%, rgba(11, 11, 11, .26)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.ak-lens__no { position: absolute; left: 85.4%; top: 14.6%; translate: -50% -50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ak-ink); color: var(--ak-paper); font-family: var(--ak-display); font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--ak-paper); }

/* The catalogue note. */
.ak-upclose__card { grid-column: 2; grid-row: 2; align-self: end; display: grid; gap: 12px; padding-bottom: 6px; }
.ak-upclose__no { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--ak-ink); }
.ak-upclose__no .ak-box { font-family: var(--ak-display); font-size: clamp(3rem, 2rem + 2.4vw, 4.6rem); line-height: .85; letter-spacing: -.04em; }
.ak-upclose__of { font-size: 14px; color: var(--ak-ink-3); }
.ak-upclose__ct { font-family: var(--ak-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + .9vw, 2rem); line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }
.ak-upclose__card p { color: var(--ak-ink-2); font-size: 15.5px; line-height: 1.5; max-width: 34ch; }
.ak-upclose__card p:empty { display: none; }
.ak-upclose__card.is-swap > * { animation: akCardIn .7s var(--ak-ease) both; }
.ak-upclose__card.is-swap > *:nth-child(2) { animation-delay: .05s; }
.ak-upclose__card.is-swap > *:nth-child(3) { animation-delay: .1s; }
@keyframes akCardIn { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

.ak-upclose__stops { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 8px; }
.ak-upclose__stops button { flex: 1; min-width: 0; display: grid; gap: 8px; min-height: 44px; align-content: end; padding: 0; border: 0; background: none; text-align: left; font-size: 12.5px; font-weight: 650; color: var(--ak-ink-3); font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ak-upclose__stops button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-upclose__stops em { font-style: normal; font-weight: 500; }
.ak-upclose__stops i { display: block; height: 1px; background: var(--ak-rule-2); transition: background-color .4s, transform .4s; transform-origin: 0 50%; }
.ak-upclose__stops .is-done i { background: var(--ak-ink-3); }
.ak-upclose__stops [aria-current='true'] { color: var(--ak-ink); }
.ak-upclose__stops [aria-current='true'] i { background: var(--ak-ink); transform: scaleY(2); }
@media (hover: hover) { .ak-upclose__stops button:hover { color: var(--ak-ink); } }

body.ak-in-tour .wafab-wrap, body.ak-in-tour .ask__btn, body.ak-in-tour .ask__tip, body.ak-in-tour .ak-qbar, body.ak-in-tour .ak-mbar { opacity: 0; pointer-events: none; }

/* Phones and narrow tablets: title, plate, note, stops stacked in one screen. */
@media (max-width: 900px) {
	.ak-upclose { --uc-top: 8px; }
	.ak-lot .ak-upclose { --uc-top: 56px; }
	.ak-upclose.is-live .ak-upclose__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
	.ak-upclose__head { grid-column: 1; grid-row: 1; }
	.ak-upclose__lot { margin-bottom: 4px; font-size: 11.5px; }
	.ak-upclose__t { font-size: clamp(1.25rem, 4.6vw + .2rem, 1.9rem); }
	.ak-upclose__sub { font-size: 13px; margin-top: 4px; }
	.ak-upclose__frame { grid-column: 1; grid-row: 2; margin-inline: calc(var(--ak-gut) * -1); }
	.ak-upclose__card { grid-column: 1; grid-row: 3; align-self: start; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 4px; height: 116px; overflow: hidden; }
	.ak-upclose__no { grid-row: 1 / 3; flex-direction: column; gap: 2px; padding: 0 14px 0 0; border-bottom: 0; border-right: 1px solid var(--ak-ink); }
	.ak-upclose__no .ak-box { font-size: 2.6rem; }
	.ak-upclose__of { font-size: 12px; }
	.ak-upclose__ct { font-size: 1.3rem; align-self: end; }
	.ak-upclose__card p { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.ak-upclose__stops { grid-row: 4; gap: 6px; }
	.ak-upclose__stops em { display: none; }
	.ak-upclose__pt span { display: none; }
	.ak-lens__no { width: 40px; height: 40px; font-size: 1rem; box-shadow: 0 0 0 3px var(--ak-paper); }
	.ak-lens__img { box-shadow: 0 0 0 5px var(--ak-paper), 0 0 0 6px rgba(11, 11, 11, .16), 0 30px 50px -20px rgba(11, 11, 11, .55); }
}
@media (max-height: 640px) and (max-width: 900px) {
	.ak-upclose__sub { display: none; }
	.ak-upclose__card p { -webkit-line-clamp: 2; }
	.ak-upclose__card { height: 92px; }
}

/* Desktop: the note is a tag hung on the glass (tour.js places it beside the lens with a short
   string to the rim, on whichever side has room), so the eye never has to leave the detail.
   The right column becomes the lot's list of details, the current one marked with the full stop. */
@media (min-width: 901px) {
	.ak-upclose.is-live .ak-upclose__pin { grid-template-rows: auto minmax(0, 1fr); padding-bottom: calc(var(--uc-top) + 6px); }
	.ak-upclose__frame { grid-row: 1 / 3; }
	.ak-upclose__card { position: absolute; grid-area: auto; left: 0; top: 0; z-index: 7; width: min(310px, 24vw); gap: 8px; padding: 18px 20px 20px; background: var(--ak-sheet); box-shadow: 0 30px 60px -28px rgba(11, 11, 11, .5), 0 0 0 1px rgba(11, 11, 11, .06); opacity: 0; visibility: hidden; will-change: transform, opacity; --ly: 50%; }
	.ak-upclose__card::before { content: ""; position: absolute; top: var(--ly); right: 100%; width: 30px; height: 1px; background: var(--ak-ink); }
	.ak-upclose__card::after { content: ""; position: absolute; top: var(--ly); left: 12px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ak-paper); box-shadow: inset 0 0 0 1px var(--ak-rule-2); }
	.ak-upclose__card[data-side='l']::before { right: auto; left: 100%; }
	.ak-upclose__card[data-side='l']::after { left: auto; right: 12px; }
	.ak-upclose__card > * { padding-left: 16px; }
	.ak-upclose__card[data-side='l'] > * { padding-left: 0; padding-right: 16px; }
	/* hung below or above the glass: the string runs up or down from the tag's edge */
	.ak-upclose__card[data-side='b']::before, .ak-upclose__card[data-side='a']::before { left: var(--lx); right: auto; width: 1px; height: 30px; }
	.ak-upclose__card[data-side='b']::before { top: auto; bottom: 100%; }
	.ak-upclose__card[data-side='a']::before { top: 100%; }
	.ak-upclose__card[data-side='b']::after, .ak-upclose__card[data-side='a']::after { left: var(--lx); right: auto; margin: 0 0 0 -4px; }
	.ak-upclose__card[data-side='b']::after { top: 10px; }
	.ak-upclose__card[data-side='a']::after { top: auto; bottom: 10px; }
	.ak-upclose__card[data-side='b'], .ak-upclose__card[data-side='a'] { padding-top: 26px; }
	.ak-upclose__card[data-side='a'] { padding-top: 18px; padding-bottom: 28px; }
	.ak-upclose__card[data-side='b'] > *, .ak-upclose__card[data-side='a'] > * { padding-left: 0; }
	.ak-upclose__no { padding-bottom: 8px; }
	.ak-upclose__no .ak-box { font-size: 2.2rem; }
	.ak-upclose__ct { font-size: clamp(1.35rem, 1rem + .7vw, 1.75rem); }
	.ak-upclose__card p { font-size: 15px; }

	.ak-upclose__stops { grid-column: 2; grid-row: 2; align-self: end; flex-direction: column; gap: 0; counter-reset: none; }
	.ak-upclose__stops::before { content: attr(aria-label); padding-bottom: 10px; border-bottom: 1px solid var(--ak-ink); font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
	.ak-upclose__stops button { position: relative; flex: none; display: flex; align-items: center; min-height: 40px; padding: 0 0 0 20px; border-bottom: 1px solid var(--ak-rule); font-size: 14.5px; font-weight: 500; transition: color .3s, padding-left .5s var(--ak-ease); }
	.ak-upclose__stops button > span { font-weight: 650; }
	.ak-upclose__stops em { font-weight: 500; margin-left: 6px; }
	.ak-upclose__stops i { position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ak-rule-2); transform: scale(.6); transition: transform .4s var(--ak-ease), background-color .3s; }
	.ak-upclose__stops .is-done i { background: var(--ak-ink-3); }
	.ak-upclose__stops [aria-current='true'] { padding-left: 26px; }
	.ak-upclose__stops [aria-current='true'] i { background: var(--ak-ink); transform: scale(1.25); }
}
@media (min-width: 901px) and (max-height: 820px) {
	/* short screens: the list folds to a row of numbers so the tag has room beside the glass */
	.ak-upclose__stops { flex-direction: row; flex-wrap: wrap; gap: 0 4px; }
	.ak-upclose__stops::before { flex: 0 0 100%; margin-bottom: 6px; }
	.ak-upclose__stops button { min-width: 40px; min-height: 40px; padding: 0 0 0 16px; border-bottom: 0; font-size: 13.5px; }
	.ak-upclose__stops [aria-current='true'] { padding-left: 18px; }
	.ak-upclose__stops em { display: none; }
	.ak-upclose__card p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}