/* Exhibition v5 — approved mocks 176B (Order of sale as a hand of bidder paddles) and 176C (three frames from three houses). Prefix ex5-. Linked after /exhibition/style.css. */
@font-face{font-family:"Space Mono";src:url(/assets/fonts/SpaceMono-Regular.woff2) format("woff2");font-display:swap}

/* ===================== 176B · Order of sale ===================== */
/* --u is the paddle unit: 1px at 1440 (the mock), shrinking with the left column so the fan never leaves the viewport or touches the letter column */
.ex5-steps{display:grid;grid-template-columns:1fr 380px;gap:44px;margin-top:48px;align-items:start;--u:clamp(.72px,(100vw - 2*var(--m) - 384px)/928,1px)}
.ex5-lots{min-width:0}
.ex5-fan{--W:calc(198*var(--u));--H:calc(278*var(--u));--hand:calc(98*var(--u));--step:calc(140*var(--u));list-style:none;margin:calc(10*var(--u)) 0 0 -40px;padding:0;position:relative;height:calc(440*var(--u));contain:layout}/* contain:layout — the rotated paddles paint into the margins but never add scrollable overflow */
.ex5-paddle{--i:0;--rot:0deg;position:absolute;left:50%;top:calc(24*var(--u));width:var(--W);margin-left:calc(var(--W) / -2 + var(--i) * var(--step));transform:rotate(var(--rot));transform-origin:50% calc(var(--H) + var(--hand))}
.ex5-paddle:nth-child(1){--i:-2;--rot:-14deg;z-index:1}
.ex5-paddle:nth-child(2){--i:-1;--rot:-7deg;z-index:2}
.ex5-paddle:nth-child(3){--i:0;--rot:0deg;z-index:3}
.ex5-paddle:nth-child(4){--i:1;--rot:7deg;z-index:4}
.ex5-paddle:nth-child(5){--i:2;--rot:14deg;z-index:5}
/* the handle: turned wood, a brass ferrule where it meets the board */
.ex5-handle{position:absolute;left:50%;top:calc(var(--H) - 10px);width:calc(18*var(--u));height:calc(var(--hand) + 10px);transform:translateX(-50%);border-radius:3px 3px 10px 10px;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.05) 3px 4px,rgba(0,0,0,0) 4px 9px),linear-gradient(90deg,#5a3a1f,#8a5c33 22%,#a9784a 42%,#7d5230 62%,#b2804f 80%,#4e3118);box-shadow:inset 1px 0 0 rgba(255,255,255,.18),0 10px 18px rgba(0,0,0,.22)}
.ex5-handle::before{content:"";position:absolute;left:-2px;right:-2px;top:9px;height:7px;border-radius:2px;background:linear-gradient(90deg,#8a6a2c,#e6c98a 45%,#b08d57 70%,#6e5222);box-shadow:0 1px 1px rgba(0,0,0,.3)}
/* the board: cream card, thin black border, a second hairline inside like a printed card */
.ex5-board{position:relative;height:var(--H);border-radius:14px;border:1px solid #111;padding:calc(18*var(--u)) calc(16*var(--u)) calc(16*var(--u));background:#F4F1EA;background-image:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 50%,rgba(0,0,0,.025));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 28px rgba(0,0,0,.16),0 2px 4px rgba(0,0,0,.08)}
.ex5-board::before{content:"";position:absolute;inset:5px;border:1px solid rgba(0,0,0,.28);border-radius:10px;pointer-events:none}
.ex5-lot{font-family:"Space Mono",monospace;font-size:calc(11*var(--u));letter-spacing:.26em;text-transform:uppercase;color:#555;line-height:normal}
.ex5-num{font-family:"Space Mono",monospace;font-size:calc(48*var(--u));line-height:.95;letter-spacing:-.04em;color:#111;margin-top:3px}
.ex5-ttl{font-family:"EB Garamond";font-weight:400;font-style:italic;font-size:calc(20*var(--u));line-height:1.12;color:#111;margin-top:calc(12*var(--u))}
.ex5-when{font-family:Inter;font-size:calc(10*var(--u));letter-spacing:.15em;text-transform:uppercase;color:var(--grey);margin-top:8px}
.ex5-dsc{font-family:Inter;font-size:calc(13*var(--u));line-height:1.45;color:#555;margin-top:8px}
.ex5-foot{position:absolute;left:calc(16*var(--u));bottom:14px;font-family:"Space Mono",monospace;font-size:calc(8.5*var(--u));letter-spacing:.2em;text-transform:uppercase;color:#9a958a}
/* each paddle's right strip sits under its neighbour: keep the text on the exposed left */
.ex5-paddle:not(:nth-child(5)) .ex5-board{padding-right:calc(30*var(--u))}
/* the red SOLD tag, tied to the handle of the fifth paddle */
.ex5-tag{position:absolute;left:50%;top:calc(var(--H) + 14px);z-index:6;width:0;height:0}
.ex5-tag i{position:absolute;left:8px;top:0;width:30px;height:1px;background:#2a1d10;transform:rotate(28deg);transform-origin:0 50%}
.ex5-tag i::before{content:"";position:absolute;left:-10px;top:-3px;width:20px;height:7px;border:1px solid #2a1d10;border-radius:50%;transform:rotate(-28deg);transform-origin:50% 50%}
.ex5-tag b{position:absolute;left:28px;top:12px;display:block;width:62px;height:28px;background:var(--red);border-radius:2px 6px 6px 2px;transform:rotate(8deg);font-family:Inter;font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;text-align:center;line-height:28px;padding-left:10px;box-shadow:0 4px 8px rgba(0,0,0,.22)}
.ex5-tag b::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
/* the caption under the fan, as the sale head on the page */
.ex5-cap{display:flex;justify-content:space-between;font-family:Inter;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#111;padding-top:14px;border-top:1px solid rgba(0,0,0,.2);margin:0}
.ex5-cap span:last-child{color:var(--grey)}
/* right column: the gavel on its block, then the letter as on the page */
.ex5-letter{min-width:0}
.ex5-gavel{display:block;width:240px;height:150px;margin:6px auto 0}
.ex5-letter .invite{margin-top:36px}
@media (min-width:1101px){.ex5-letter .invite{padding:40px}}
/* 701–1100: one column — the fan (scaled to the column) in a row above the letter */
@media (max-width:1100px){
  .ex5-steps{grid-template-columns:1fr;gap:40px;--u:clamp(.72px,(100vw - 2*var(--m))/940,1px)}
  .ex5-fan{margin-left:0}
  .ex5-letter{max-width:560px}
  .ex5-letter .invite{margin-top:28px}
}
/* ≤700: the paddles stacked one per row, centred, alternating −3°/+3°, short handles; nothing absolute against the viewport */
@media (max-width:700px){
  .ex5-steps{--u:1px;gap:32px;margin-top:32px}
  .ex5-fan{--hand:46px;height:auto;margin:8px 0 0;display:flex;flex-direction:column;align-items:center;gap:20px;contain:none}
  .ex5-paddle{position:relative;inset:auto;margin-left:0;padding-bottom:var(--hand);transform:rotate(var(--rot));transform-origin:50% 50%}
  .ex5-paddle:nth-child(odd){--rot:-3deg}
  .ex5-paddle:nth-child(even){--rot:3deg}
  .ex5-paddle:not(:nth-child(5)) .ex5-board{padding-right:16px}
  .ex5-cap{flex-direction:column;gap:4px;margin-top:22px}
  .ex5-gavel{width:200px;height:125px}
  .ex5-letter{max-width:none}
  .ex5-letter .invite{margin-top:24px}
}

/* ===================== 176C · In their words: one wall, three frames that came from three different houses ===================== */
.ex5-wall{margin-top:48px;background:#E9E6DF;background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,rgba(0,0,0,.08));padding:72px 56px 60px;position:relative}
.ex5-wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:#D9D4C9}
.ex5-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:center}
.ex5-hang{display:flex;flex-direction:column;align-items:center;min-width:0}
.ex5-q{font-family:"EB Garamond";font-weight:400;font-size:22px;line-height:1.35;font-style:italic;text-align:center;color:#111;margin:0}
/* the picture: paper behind the words, the bevel of the mat cut around it */
.ex5-pic{background:#FBFAF6;display:flex;align-items:center;justify-content:center;width:100%}
/* 1 · gilded baroque: gold gradient outer, a carved rope band inside it, a lip at the sight edge; cream mat */
.ex5-gilt{position:relative;width:100%;padding:28px;background:linear-gradient(135deg,#f0dc9c 0%,#c39a3a 18%,#f4e6b4 36%,#b4872a 54%,#ecd58f 72%,#9c7420 90%,#e8cf8a 100%);box-shadow:0 26px 44px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.18),inset 0 0 0 1px rgba(70,48,0,.55),inset 0 0 0 2px rgba(255,244,200,.55),inset 0 0 0 3px rgba(120,86,10,.35)}
.ex5-gilt::before{content:"";position:absolute;inset:8px;border:7px solid transparent;border-image:repeating-linear-gradient(45deg,#8a6616 0 2px,#f6e8b6 2px 4px,#c99f3c 4px 7px) 7;box-shadow:0 0 0 1px rgba(255,246,210,.6),inset 0 0 0 1px rgba(90,62,0,.55)}
.ex5-gilt::after{content:"";position:absolute;inset:26px;border:2px solid rgba(80,56,0,.55);box-shadow:inset 0 0 0 1px rgba(255,246,210,.5);pointer-events:none}
.ex5-gilt .ex5-mat{position:relative;z-index:1;background:#F3EEE2;padding:30px 28px;background-image:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,0) 40%)}
.ex5-gilt .ex5-pic{padding:30px 22px;min-height:230px;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.14),inset 0 3px 6px rgba(0,0,0,.08)}
/* 2 · dark walnut, 14 px, with a wide cream linen mat */
.ex5-walnut{position:relative;width:100%;padding:14px;background:#2B241C;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,.035) 2px 3px,rgba(255,255,255,0) 3px 7px),linear-gradient(90deg,#241d15,#3a2c1f 25%,#2b241c 50%,#3d2e20 75%,#211a13);box-shadow:0 26px 44px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.18),inset 0 0 0 1px #6A5538,inset 0 0 0 2px #1a140e}
.ex5-walnut .ex5-mat{background:#EFE9DC;padding:46px 42px;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.028) 0 1px,rgba(0,0,0,0) 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.028) 0 1px,rgba(0,0,0,0) 1px 3px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ex5-walnut .ex5-pic{padding:30px 22px;min-height:200px;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.14),inset 0 3px 6px rgba(0,0,0,.08)}
/* 3 · thin brass, 6 px, no mat, a little smaller */
.ex5-brass{position:relative;width:86%;padding:6px;background:linear-gradient(135deg,#d7c293,#9a8358 30%,#e2d1a4 50%,#86704a 72%,#cdb887);box-shadow:0 22px 40px rgba(0,0,0,.22),0 2px 4px rgba(0,0,0,.18),inset 0 0 0 1px rgba(60,40,0,.45)}
.ex5-brass::after{content:"";position:absolute;inset:5px;border:1px solid rgba(60,40,0,.5);pointer-events:none}
.ex5-brass .ex5-pic{padding:40px 30px;min-height:240px;box-shadow:inset 0 2px 6px rgba(0,0,0,.08)}
.ex5-brass .ex5-q{font-size:21px}
/* 1201–1366: still three across, slimmer mouldings and mats so the quotes keep a readable measure */
@media (max-width:1366px){
  .ex5-frames{gap:32px}
  .ex5-wall{padding:56px 40px 48px}
  .ex5-q{font-size:20px}
  .ex5-gilt{padding:22px}.ex5-gilt::before{inset:6px;border-width:6px}.ex5-gilt::after{inset:20px}
  .ex5-gilt .ex5-mat{padding:24px 22px}.ex5-gilt .ex5-pic{padding:24px 16px;min-height:200px}
  .ex5-walnut .ex5-mat{padding:36px 30px}.ex5-walnut .ex5-pic{padding:24px 16px;min-height:180px}
  .ex5-brass .ex5-pic{padding:32px 22px;min-height:200px}.ex5-brass .ex5-q{font-size:19px}
}
/* ≤1200: the frames stack one per row, centred on the wall */
@media (max-width:1200px){
  .ex5-frames{grid-template-columns:1fr;gap:40px}
  .ex5-hang{width:100%;max-width:480px;margin:0 auto}
  .ex5-gilt .ex5-pic,.ex5-walnut .ex5-pic,.ex5-brass .ex5-pic{min-height:170px}
  .ex5-wall{padding:48px 32px 40px}
}
/* ≤700: frames full-width, label under each */
@media (max-width:700px){
  .ex5-wall{padding:36px 18px 32px}
  .ex5-hang{max-width:none}
  .ex5-gilt{padding:18px}.ex5-gilt::before{inset:5px;border-width:5px}.ex5-gilt::after{inset:16px}
  .ex5-gilt .ex5-mat{padding:18px 16px}.ex5-gilt .ex5-pic{padding:22px 16px;min-height:0}
  .ex5-walnut{padding:10px}.ex5-walnut .ex5-mat{padding:26px 22px}.ex5-walnut .ex5-pic{padding:22px 16px;min-height:0}
  .ex5-brass{width:100%}.ex5-brass .ex5-pic{padding:28px 18px;min-height:0}
  .ex5-q,.ex5-brass .ex5-q{font-size:20px}
}