/*
  ArtHub visual studies: shared styles for v1 and v3.

  Layout rules
  - .page is a size container, so cqw and cqh are relative to the page (or the
    iframe it sits in), not the browser window.
  - History: a grid reserves the lamp area above, the caption below the
    painting and, in v1, the bench area at the bottom. The painting is sized to
    fit what is left, so none of them can overlap.
  - Trade: a flex column. The illustration takes whatever height the header,
    headline, form and signature leave.
  - Reference size is one panel of the concept images, 969 x 811.
*/

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080808}
body{font-family:'Times New Roman',Times,serif}
button,input{font:inherit}
a,button{color:inherit}
a,button,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #b99b62;outline-offset:6px}
[hidden]{display:none!important}

.page{position:relative;width:100%;height:100svh;min-height:520px;overflow:hidden;container-type:size;background:#fff;color:#111820}
.page[data-view=history]{background:#080808;color:#f6f3ec}
.page[data-view=trade] :focus-visible{outline-color:#111820}
.views{position:absolute;inset:0}
.views>section{position:absolute;inset:0}

/* Header, shared by both views */
.header,.trade,.history{--brand:clamp(26px,3.4cqw,56px);--search-h:clamp(32px,3cqw,44px)}
.header{position:absolute;z-index:5;inset:3.8cqh 5.6cqw auto;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:var(--brand);line-height:1;text-decoration:none;letter-spacing:-.025em}
.navigation{display:flex;align-items:center;gap:1.8cqw;font-size:clamp(13px,1.65cqw,26px)}
.navigation a{position:relative;padding:8px 2px;text-decoration:none;opacity:.75}
.navigation a[aria-current=page]{opacity:1}
.navigation a[aria-current=page]:after{content:'';position:absolute;bottom:4px;left:2px;right:2px;height:1px;background:currentColor}
.separator{opacity:.6}
.search{display:grid;place-items:center;width:var(--search-h);height:var(--search-h);margin-left:1.5cqw;padding:0;border:0;background:transparent;cursor:pointer}
.search svg{width:clamp(18px,2.3cqw,30px);height:clamp(18px,2.3cqw,30px)}

/* History */
.history{display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:var(--gap);padding:var(--pt) 5cqw var(--pb);background:radial-gradient(ellipse 35% 40% at 50% 32%,#29201650,transparent 100%),#080808}
.light-pool{position:absolute;left:14%;right:14%;top:0;height:70%;background:radial-gradient(ellipse at 50% 28%,#b2782c30,transparent 62%);pointer-events:none}
.stage{container-type:size;min-width:0;min-height:0;display:grid;place-items:center}
.painting{display:block;width:min(100cqw,calc(100cqh*var(--art-ar)));height:auto;filter:drop-shadow(0 10px 20px #0009)}
.metadata{min-width:0;text-align:center;z-index:2}
.eyebrow{margin:0 0 1cqh;font:400 clamp(7px,.7cqw,11px)/1.4 Arial,sans-serif;letter-spacing:.2cqw;color:#bab9b6}
.metadata h1{margin:0 0 .7cqh;font-size:clamp(15px,min(1.9cqw,2.4cqh),32px);font-weight:400;line-height:1.1}
.artist{margin:0;font-size:clamp(8px,min(1cqw,1.4cqh),14px);letter-spacing:.13cqw;color:#d3d0c8}

/* v1: smaller painting, pendant lamp, bench and floor.
   The lamp is drawn in CSS inside the area reserved above the painting. */
.v1{--art-ar:calc(327/393)}
.v1 .history{--pt:clamp(114px,14.4cqh,150px);--gap:max(2cqh,18px);--floor-h:min(19.85cqh,calc(100cqw*161/965));--pb:calc(var(--floor-h) + 3cqh)}
/* The painting may grow with the space the smaller caption frees, but stays below v3 scale. */
.v1 .stage{height:100%;max-height:56cqh;align-self:center}
.floor{position:absolute;bottom:0;left:50%;width:min(100%,calc(var(--floor-h)*965/161));height:var(--floor-h);transform:translateX(-50%);background:url(media/museum-floor-v1.png) center bottom/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);pointer-events:none}
.lamp-fixture{position:absolute;left:50%;top:12px;transform:translateX(-50%);--lamp-w:clamp(110px,14cqw,170px);width:var(--lamp-w);height:calc(var(--pt) - 24px);background:linear-gradient(90deg,#090909,#292b29 45%,#080808 70%) center top/4px calc(100% - 34px) no-repeat;z-index:1}
.lamp-fixture::before{content:'';position:absolute;left:10%;right:10%;bottom:14px;height:calc(var(--lamp-w)*.36);border-radius:48% 48% 7% 7% / 95% 95% 10% 10%;background:radial-gradient(ellipse at 50% 1%,#81817b 0,#3d403c 8%,#111411 23%,#030403 68%);box-shadow:0 -1px 0 #45474066,inset 0 -3px 0 #141511}
.lamp-fixture::after{content:'';position:absolute;left:10%;right:10%;bottom:8px;height:13px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#ffedb6,#dbb472 65%,#855b29 95%);box-shadow:0 7px 22px #ebba6444;border:1px solid #745027}

/* v3: enlarged painting in deep black. No lamp, furniture or floor: the warm light is a soft glow centred on the frame. */
.v3{--art-ar:calc(471/567)}
.v3 .history{--pt:max(12.31cqh,calc(3.8cqh + var(--brand) + 1.6cqh));--pb:max(4.2cqh,24px);--gap:max(2.4cqh,18px)}
.v3 .light-pool{left:0;right:0;top:0;height:100%;background:radial-gradient(ellipse 38% 50% at 50% 47%,#b2782c46,#b2782c1e 55%,transparent 100%)}

/* v3.1: v3 with the History/Trade switch as a small pill under the wordmark.
   The filled half marks the current view; search stays at the top right. */
.v3-1 .header,.v3-1 .history,.v3-1 .trade{--pill-font:clamp(11px,1.25cqw,15px);--pill-h:calc(var(--pill-font)*1.2 + 18px);--pill-bottom:calc(3.8cqh + max(var(--brand),var(--search-h)) + 8px + var(--pill-h))}
/* Quiet by default (--q-*), full strength while hovered or focused (--r-*). */
.v3-1[data-view=history]{--q-line:#f6f3ec1f;--q-text:#f6f3ec73;--q-on-bg:#f6f3ec26;--q-on-text:#f6f3ecc7;--r-line:#f6f3ec4d;--r-text:#f6f3ecb3;--r-on-bg:#f6f3ec;--r-on-text:#0b0b0b}
.v3-1[data-view=trade]{--q-line:#11182014;--q-text:#11182073;--q-on-bg:#1118201a;--q-on-text:#111820d9;--r-line:#11182040;--r-text:#111820b3;--r-on-bg:#111820;--r-on-text:#fff}
.v3-1 .header{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:8px}
.v3-1 .brand{grid-column:1;grid-row:1;justify-self:start}
.v3-1 .search{grid-column:2;grid-row:1}
.v3-1 .navigation{grid-column:1;grid-row:2;justify-self:start;display:inline-grid;grid-template-columns:1fr 1fr;gap:0;--pill-line:var(--q-line);--pill-text:var(--q-text);--pill-on-bg:var(--q-on-bg);--pill-on-text:var(--q-on-text);padding:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--pill-line);font-size:var(--pill-font);line-height:1.2;transition:box-shadow .25s,color .25s}
.v3-1 .navigation:hover,.v3-1 .navigation:focus-within{--pill-line:var(--r-line);--pill-text:var(--r-text);--pill-on-bg:var(--r-on-bg);--pill-on-text:var(--r-on-text)}
.v3-1 .navigation a{padding:9px 16px;border-radius:999px;text-align:center;color:var(--pill-text);opacity:1;transition:color .25s,background-color .25s}
.v3-1 .navigation a:not([aria-current]):hover{color:var(--r-on-bg)}
@media(prefers-reduced-motion:reduce){.v3-1 .navigation,.v3-1 .navigation a{transition:none}}
.v3-1 .navigation a[aria-current=page]{background:var(--pill-on-bg);color:var(--pill-on-text)}
.v3-1 .navigation a[aria-current=page]:after{content:none}
/* v3.2: v3.1 with the header mirrored. Search at the top left, the wordmark and pill stacked at the top right, right edges flush. */
.v3-2 .header{grid-template-columns:auto 1fr}
.v3-2 .search{grid-column:1;grid-row:1;justify-self:start;margin-left:calc((clamp(18px,2.3cqw,30px) - var(--search-h))/2 - clamp(18px,2.3cqw,30px)*.09)}
.v3-2 .brand{grid-column:2;grid-row:1;justify-self:end;letter-spacing:0}
.v3-2 .navigation{grid-column:2;grid-row:2;justify-self:end}
/* v3.5: v3.3 with the History/Trade switch at the top right, level with the wordmark, and search as a
   small pill under the wordmark (standard magnifier and the word Search). It uses the same quiet pill language as the switch. */
.v3-5 .header,.v3-5 .history,.v3-5 .trade{--search-h:0px}
.v3-5 .header{grid-template-columns:max-content 1fr}
.v3-5 .navigation{grid-column:2;grid-row:1;justify-self:end}
.v3-5 .search{grid-column:1;grid-row:2;justify-self:stretch;justify-content:center;display:flex;align-items:center;gap:.5em;width:0;min-width:100%;height:auto;margin:0;position:relative;padding:6.3px 14px 6.3px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--q-line);background:transparent;color:var(--q-text);font:inherit;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Arial,sans-serif;font-size:var(--pill-font);line-height:1.2;letter-spacing:.01em;transition:box-shadow .25s,color .25s,background-color .25s}
.v3-5 .search::before{content:'';position:absolute;inset:-8px 0}
.v3-5 .search svg{width:1.15em;height:1.15em;flex:none}
.v3-5 .search:hover,.v3-5 .search:focus-visible{box-shadow:inset 0 0 0 1px var(--r-line);color:var(--r-on-text);background:var(--q-on-bg)}
@media(prefers-reduced-motion:reduce){.v3-5 .search{transition:none}}
/* v3.6: v3.5 with the History/Trade half-pill replaced by a machine-style mode selector (from Eitan's mock-up,
   arthub-mode-selector.html): History, a switch housing with a sliding actuator, Trade.
   The control is as tall as the half-pill was. The housing is 14% longer than its first width (--hw0), and the control is that much wider, growing leftwards from the right margin, so the labels keep their gaps to the housing. The actuator keeps its size.
   The housing is 15% lower than that box and nearly black, so it almost disappears into the page, and the actuator is a soft ivory (#eae7e0)
   with a satin finish and fine vertical machining lines. The words come first, the mechanism second, the movement last. */
.v3-6 nav.navigation{--hh:calc(var(--pill-h)*.85);--hw0:calc(var(--pill-h)*1.66);--hw:calc(var(--hw0)*1.14);--pad:calc(var(--hh)*.13);--aw:calc(var(--hw0)*.45);--travel:calc(var(--hw) - 2px - 2*var(--pad) - var(--aw));
  --label:#6c6a66;--label-on:#c8c4bb;--label-hover:#a9a59d;
  display:flex;align-items:center;justify-content:space-between;width:calc(var(--pill-font)*6.857 + 50.4px + var(--hw) - var(--hw0));height:var(--pill-h);padding:0;border-radius:0;box-shadow:none;
  font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:.015em}
.v3-6[data-view=trade] nav.navigation{--label:#8e9196;--label-on:#2b323a;--label-hover:#5a6169}
.v3-6 .navigation a.mode{padding:0;border-radius:0;background:transparent;color:var(--label);transition:color .23s}
.v3-6 .navigation a.mode[aria-current=page]{background:transparent;color:var(--label-on)}
.v3-6 .navigation a.mode:not([aria-current]):hover{color:var(--label-hover)}
.v3-6 .navigation a.mode::before{inset:-8px -4px}
.v3-6 .housing{appearance:none;flex:none;position:relative;width:var(--hw);height:var(--hh);padding:0;border:1px solid #1d1d1c;border-radius:3px;cursor:pointer;touch-action:manipulation;
  background:linear-gradient(180deg,#0f0f0f,#0a0a0a 30%,#090909);box-shadow:inset 0 1px 3px #000}
.v3-6 .housing:focus-visible{outline-offset:4px}
.v3-6 .housing::before{content:"";position:absolute;inset:3px 4px;border:1px solid #171716;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 6px,#ffffff04 6px 7px)}
.v3-6 .housing::after{content:"";position:absolute;inset:-8px -4px}
.v3-6 .rivet{position:absolute;width:2px;height:2px;top:calc(50% - 1px);background:#34332f;border-radius:50%}
.v3-6 .rivet.left{left:1px}.v3-6 .rivet.right{right:1px}
.v3-6 .actuator{position:absolute;z-index:3;top:var(--pad);left:var(--pad);width:var(--aw);height:calc(var(--hh) - 2px - 2*var(--pad));border-radius:2px;transition:transform .32s cubic-bezier(.18,.75,.18,1);
  background:linear-gradient(180deg,#ffffff1a,#ffffff00 40%,#00000008),repeating-linear-gradient(90deg,#eae7e0 0,#efece5 1px,#e6e3dc 2px,#eae7e0 3px);border:1px solid #c6c2b8;box-shadow:inset 0 1px 0 #ffffff80,inset 0 -2px 1px #00000020,0 1px 1px #000}
.v3-6 .navigation[data-mode=trade] .actuator{transform:translateX(var(--travel))}
.v3-6 .actuator::before{content:"";position:absolute;top:3px;bottom:3px;left:50%;width:5px;transform:translateX(-50%);border-left:1px solid #a8a49a;border-right:1px solid #f4f1ea;background:linear-gradient(90deg,#cdc9bf,#e0ddd5)}
.v3-6 .actuator::after{content:"";position:absolute;inset:1px 1px auto;height:1px;background:#ffffff59}
@media(hover:hover){.v3-6 .housing:hover{border-color:#2c2c2a}}
@media(prefers-reduced-motion:reduce){.v3-6 .actuator,.v3-6 .navigation a.mode{transition:none}}
/* v3.6 search pill: slimmer (90% of the switch box height), with a visible but subtle charcoal outline at rest, and a gentle
   hover and focus that brightens the outline and the magnifier only. The label, the pill's width and its position do not change,
   and the space reserved for the header is unchanged, so the painting stays where it was. */
.v3-6[data-view=history]{--s-line:#292929;--s-line-on:#585858;--s-icon:#f6f3ec66;--s-icon-on:#f6f3ecd9}
.v3-6[data-view=trade]{--s-line:#e3e3e3;--s-line-on:#b4b4b4;--s-icon:#11182066;--s-icon-on:#111820d9}
.v3-6 .search{height:calc(var(--pill-h)*.9);padding-top:0;padding-bottom:0;box-shadow:inset 0 0 0 1px var(--s-line);transition:box-shadow .3s ease}
.v3-6 .search::before{inset:-10px 0}
.v3-6 .search svg{color:var(--s-icon);transition:color .3s ease}
.v3-6 .search:hover,.v3-6 .search:focus-visible{box-shadow:inset 0 0 0 1px var(--s-line-on);color:var(--q-text);background:transparent}
.v3-6 .search:hover svg,.v3-6 .search:focus-visible svg{color:var(--s-icon-on)}
@media(prefers-reduced-motion:reduce){.v3-6 .search,.v3-6 .search svg{transition:none}}

/* v3.4: v3.3 with the search icon replaced by the aperture mark (inline SVG built from review/icon-fit).
   The mark is sized so its ring matches the visible size of the old magnifier. On hover or keyboard focus the
   blades turn about the centre and slide inward together, so the opening tightens like a lens focusing, and they
   reverse on leave. The ring stays still. */
.v3-4 .search svg{width:calc(clamp(18px,2.3cqw,30px)*.887);height:calc(clamp(18px,2.3cqw,30px)*.887);overflow:visible}

/* v3.3: v3.1 with a quieter label, a 15% smaller wordmark and a lighter, OS-style switch. */
.v3-3 .header,.v3-3 .trade,.v3-3 .history{--brand:clamp(23.1px,3.0345cqw,49.98px)}
.v3-3 .header,.v3-3 .history,.v3-3 .trade{--pill-font:clamp(9.975px,1.05cqw,12.6px);--pill-h:calc(var(--pill-font)*1.2 + 12.6px)}
.v3-3[data-view=history]{--q-line:#f6f3ec14;--q-text:#f6f3ec66;--q-on-bg:#f6f3ec1a;--q-on-text:#f6f3ecb3;--r-line:#f6f3ec2e;--r-text:#f6f3ec99;--r-on-bg:#f6f3ec2e;--r-on-text:#f6f3ecf2}
.v3-3[data-view=trade]{--q-line:#1118200f;--q-text:#11182066;--q-on-bg:#11182012;--q-on-text:#111820b3;--r-line:#11182026;--r-text:#11182099;--r-on-bg:#11182024;--r-on-text:#111820f2}
.v3-3 .navigation{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Arial,sans-serif;letter-spacing:.01em}
.v3-3 .navigation a{padding:6.3px 12.6px}
.v3-3 .navigation a::before{content:'';position:absolute;inset:-8px 0}
.v3-3 .navigation a:not([aria-current]):hover{color:var(--r-text)}
.v3-3 .eyebrow{font-size:clamp(6.5px,.62cqw,10px);letter-spacing:.26cqw;color:#6b6a66}
.v3-1 .history{--pt:max(12.31cqh,calc(var(--pill-bottom) + 8px))}
.v3-1 .trade{--head:calc(var(--pill-bottom) + 14px)}

/* Trade */
.trade{--head:calc(3.8cqh + var(--brand) + 1.6cqh);--gutter:5.26cqw;display:flex;flex-direction:column;padding:var(--head) var(--gutter) max(3.9cqh,20px);background:#fff}
.hand{flex:1 1 0;min-height:0;width:min(52.63cqw,100%);margin-bottom:3.3cqh;object-fit:contain;object-position:left center;mix-blend-mode:multiply}
.trade-copy h1{margin:0;font-size:min(7.85cqw,10cqh);font-weight:400;line-height:.79;letter-spacing:-.04em}
.development{margin:2.4cqh 0 0;font-size:min(3.05cqw,4cqh);line-height:1.2;letter-spacing:-.01em}
.signup{display:flex;align-items:flex-end;gap:2.7cqw;width:65.5cqw;margin-top:4.1cqh}
.signup input{flex:1;min-width:0;padding:0 0 .8cqh;border:0;border-bottom:1px solid #a7a7a7;border-radius:0;background:transparent;color:#111820;font-size:min(2.1cqw,3cqh)}
.signup input::placeholder{color:#a5a5a5}
.signup button{display:flex;align-items:center;gap:1.7cqw;padding:0 0 .8cqh;border:0;border-bottom:1px solid #999;background:none;font-size:min(2.05cqw,3cqh);white-space:nowrap;cursor:pointer}
.signup button span{font-family:Arial,sans-serif}
.signature{margin-top:4.5cqh;font:400 clamp(9px,min(.95cqw,1.4cqh),14px)/1.6 Arial,sans-serif;letter-spacing:.2cqw}
.signature p{margin:0}
.signature p+p{margin-top:.3cqh;font-size:.95em;color:#8a8e91;letter-spacing:.18cqw}

/* Preview message dialog */
.dialog{width:calc(100% - 40px);max-width:440px;padding:32px;border:1px solid #ddd;background:#fff;color:#171b1e;font-size:20px;line-height:1.5}
.dialog::backdrop{background:#0008}
.dialog h2{margin:0 0 12px;font-weight:400}
.dialog p{margin:0 0 20px}
.dialog form{margin:0}
.dialog button{padding:10px 18px;border:0;background:#171b1e;color:#fff;cursor:pointer}

/* Narrow pages (phones, narrow frames) */
@container (max-width:600px){
  .header,.trade,.history{--brand:28px;--search-h:40px}
  .header{inset:24px 24px auto}
  .brand{letter-spacing:-1px}
  .navigation{gap:8px;font-size:14px}
  .search{margin-left:0}
  .v3-4 .search svg{width:calc(20px*.887);height:calc(20px*.887)}
  .v3-5 .search svg{width:1.15em;height:1.15em}
  .v3-5 .search{padding-left:6px;padding-right:6px;gap:.4em}
  .search svg{width:20px;height:20px}
  .eyebrow{font-size:7.5px;letter-spacing:1.6px}
  .metadata h1{font-size:18px}
  .artist{font-size:9px;letter-spacing:1.1px}
  .v3-3 .header,.v3-3 .trade,.v3-3 .history{--brand:25px}
  .v3-3 .eyebrow{font-size:7px;letter-spacing:1.8px}
  .v1 .history{--pt:max(18cqh,160px)}
  .lamp-fixture{--lamp-w:110px;top:64px;height:calc(var(--pt) - 76px)}
  .trade{--gutter:7cqw;padding-top:calc(var(--head) + 6px)}
  .hand{width:min(78cqw,100%)}
  .trade-copy h1{font-size:clamp(30px,10.2cqw,56px);line-height:.95;letter-spacing:-1.5px}
  .development{margin-top:16px;font-size:20px}
  .signup{width:100%;gap:20px}
  .signup input,.signup button{padding-bottom:8px;font-size:17px}
  .signature{font-size:10px;letter-spacing:1.5px}
  .signature p+p{letter-spacing:1px}
}