/* ---------- THE SALON (homepage hero, src/_salon.html) ----------
   The headline on the left; on the right, part of a much larger room: a painted wall hung frame to frame, running
   off the top, right and bottom of the hero and fading out before it reaches the headline. The hang is measured in
   cqh (hundredths of the wall's height) by dev/salon/make.py, so it scales with the hero. pg-salon.js drifts it,
   brings a label up now and then, stops it under the pointer and opens the introduction card. Everything is sl-. */

@font-face{font-family:'Caveat';src:url(fonts/Caveat-600.woff2) format('woff2');font-weight:600;font-display:swap}

.sl-hero{position:relative;container:slh/inline-size;display:flex;align-items:center;overflow:clip;
  min-height:max(var(--vh,100svh),660px);padding:calc(var(--nav-h) + 20px) var(--gut) 60px}
.sl-copy{position:relative;z-index:3;width:min(520px,100%);margin-left:max(0px,calc((100cqw - 1320px) / 2))}
.sl-h1{margin:16px 0 20px;font-size:clamp(2.6rem,min(4.3vw,8vh),4.4rem)}
.sl-l1{display:block;white-space:nowrap}
.sl-lede{max-width:28em;margin:0 0 26px;font-size:clamp(1.02rem,1.12vw,1.14rem);line-height:1.5;color:var(--ink-2)}
.sl-acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---- the wall ---- */
.sl-wall{--wl:calc(var(--gut) + max(0px,(100cqw - 1320px) / 2) + 430px);--fade:clamp(150px,16vw,260px);
  position:absolute;top:0;right:0;bottom:0;left:var(--wl);z-index:1;overflow:clip;container-type:size;
  -webkit-mask:linear-gradient(90deg,transparent,#000 var(--fade));mask:linear-gradient(90deg,transparent,#000 var(--fade));
  /* painted plaster: a printed speckle, a slow mottle where the brush went over twice, and the site's grain */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .22 0 0 0 0 .2 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .011' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .18 0 0 0 0 .17 0 0 0 .2 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    var(--grain),
    linear-gradient(180deg,#f7aaa5,var(--coral-l) 22%,#f9b4ae 80%,#f3a7a1);
}
/* the picture rail near the ceiling, and the skirting board the room stands on */
.sl-rail{position:absolute;left:0;right:0;top:10.6cqh;height:1.1cqh;z-index:2;
  background:linear-gradient(#fbe1d8,#efb2a8 55%,#d98c84);border-top:.16cqh solid var(--ink);border-bottom:.16cqh solid var(--ink);
  box-shadow:0 .5cqh .8cqh -.2cqh rgba(20,19,17,.28)}
.sl-skirt{position:absolute;left:0;right:0;bottom:0;height:7.4cqh;z-index:2;
  background:linear-gradient(#f3ede2,#e6dccb 30%,#dfd3bf);border-top:.18cqh solid var(--ink);box-shadow:0 -.4cqh .9cqh -.2cqh rgba(20,19,17,.22)}
.sl-skirt::before{content:"";position:absolute;left:0;right:0;top:1.1cqh;border-top:.12cqh solid rgba(20,19,17,.5);box-shadow:0 .14cqh 0 rgba(255,255,255,.6)}

.sl-strip{position:absolute;top:0;bottom:0;left:0;display:flex;will-change:transform;backface-visibility:hidden;touch-action:pan-y}
/* you can take hold of the wall and walk along it */
.sl-wall{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.sl-wall.is-grab,.sl-wall.is-grab .sl-fr{cursor:grabbing}
.sl-wall img{-webkit-user-drag:none}
.sl-walk{position:absolute;right:max(18px,2.4cqh);bottom:2.2cqh;z-index:3;font-family:var(--serif);font-style:italic;font-size:max(12px,1.35cqh);
  color:var(--ink-2);letter-spacing:.01em;pointer-events:none}
.sl-walk::before{content:"\2190\00a0\00a0"}.sl-walk::after{content:"\00a0\00a0\2192"}
.sl-tile{position:relative;flex:none;height:100%}

/* ---- a frame: the moulding (.sl-m), the picture inside it (.sl-ph), a label under it ---- */
.sl-fr{position:absolute;display:block;transform:rotate(var(--rot,0deg));transform-origin:50% 0;padding:0;border:0;background:none;color:inherit;text-decoration:none;cursor:pointer;font:inherit}
.sl-fr:focus-visible{outline:none}
.sl-fr:focus-visible .sl-m{outline:.35cqh solid var(--ink);outline-offset:.5cqh}
.sl-m{position:absolute;inset:0;border:.16cqh solid var(--ink);
  box-shadow:.5cqh 1.1cqh 1.6cqh -.4cqh rgba(60,20,18,.42),.12cqh .25cqh .3cqh rgba(20,19,17,.28),
             inset .32cqh .32cqh 0 rgba(255,255,255,.38),inset -.32cqh -.32cqh 0 rgba(20,19,17,.22)}
.sl-m::before{content:"";position:absolute;pointer-events:none}
.sl-ph{position:absolute;inset:var(--b);overflow:hidden;background:var(--coral-l);border:.12cqh solid var(--ink)}
.sl-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  filter:grayscale(1) contrast(1.14) brightness(1.05);mix-blend-mode:multiply}
.t2 .sl-ph{background:#f1ebe0}
.sl-ph::after{content:"";position:absolute;inset:0;box-shadow:inset .35cqh .55cqh .9cqh rgba(20,19,17,.42);pointer-events:none}
/* a hook on the rail and the cord down to the frames in the top row */
.sl-fr[style*="--cord"]::before{content:"";position:absolute;left:50%;bottom:100%;height:var(--cord);border-left:.12cqh solid rgba(20,19,17,.6);pointer-events:none}
.sl-fr[style*="--cord"]::after{content:"";position:absolute;left:50%;bottom:calc(100% + var(--cord) - .8cqh);width:1cqh;height:1.1cqh;margin-left:-.5cqh;
  border:.14cqh solid var(--ink);border-radius:.2cqh .2cqh .6cqh .6cqh;background:#e9a39b;pointer-events:none}

/* gilt (coral leaf, hatched, lit from the top left, with a raised inner band) */
.k-gilt .sl-m,.k-oval .sl-m,.k-grand .sl-m{background:
  linear-gradient(135deg,rgba(255,240,232,.55),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 64%,rgba(70,22,20,.32)),
  repeating-linear-gradient(45deg,rgba(20,19,17,.11) 0 .12cqh,transparent .12cqh .36cqh),var(--coral-2)}
.k-gilt .sl-m::before,.k-oval .sl-m::before{inset:calc(var(--b) * .3);border:.13cqh solid rgba(20,19,17,.75);
  background:linear-gradient(315deg,rgba(255,240,232,.5),rgba(255,255,255,0) 36%,rgba(255,255,255,0) 62%,rgba(70,22,20,.28)),#f6aaa3;
  box-shadow:inset .2cqh .2cqh 0 rgba(255,255,255,.45),inset -.2cqh -.2cqh 0 rgba(70,22,20,.25)}
.k-gilt .sl-ph{box-shadow:0 0 0 calc(var(--b) * .16) #f9dcd2,0 0 0 calc(var(--b) * .16 + .12cqh) var(--ink)}
.k-oval .sl-m,.k-oval .sl-m::before,.k-oval .sl-ph,.k-oval .sl-ph::after{border-radius:50%}
.k-oval .sl-ph{box-shadow:0 0 0 calc(var(--b) * .14) #f9dcd2,0 0 0 calc(var(--b) * .14 + .12cqh) var(--ink)}
/* ebonised: a black frame with a pale slip */
.k-black .sl-m{background:linear-gradient(145deg,#4a4540,#1b1917 38%,#0d0c0b 70%,#2a2724);border-color:#000}
.k-black .sl-ph{box-shadow:0 0 0 calc(var(--b) * .3) #efe6d6,0 0 0 calc(var(--b) * .3 + .1cqh) rgba(20,19,17,.55)}
/* plain pale wood */
.k-slim .sl-m{background:linear-gradient(135deg,rgba(255,255,255,.4),transparent 40% 60%,rgba(60,40,20,.25)),
  repeating-linear-gradient(92deg,rgba(120,90,60,.16) 0 .1cqh,transparent .1cqh .5cqh,rgba(120,90,60,.1) .5cqh .62cqh,transparent .62cqh 1.1cqh),#e7d8c0}
/* arched, ebonised, with a coral slip */
.k-arch .sl-m,.k-arch .sl-ph,.k-arch .sl-ph::after{border-radius:999px 999px .3cqh .3cqh}
.k-arch .sl-m{background:linear-gradient(150deg,#46413c,#191715 40%,#0d0c0b 75%,#2a2724);border-color:#000}
.k-arch .sl-ph{box-shadow:0 0 0 calc(var(--b) * .3) #f6aaa3,0 0 0 calc(var(--b) * .3 + .1cqh) rgba(20,19,17,.6)}

/* Diogenes, who lived in a jar, in the grandest frame in the room: beading, a deep gilt cove, corner rosettes, a crest */
.k-grand .sl-m{border-width:.22cqh;box-shadow:.7cqh 1.5cqh 2.2cqh -.4cqh rgba(60,20,18,.5),.15cqh .3cqh .4cqh rgba(20,19,17,.3),
  inset .4cqh .4cqh 0 rgba(255,255,255,.4),inset -.4cqh -.4cqh 0 rgba(20,19,17,.25)}
.k-grand .sl-m::before{inset:calc(var(--b) * .16);border:.14cqh solid var(--ink);
  background:radial-gradient(circle at 50% 50%,#fde3da 0 .28cqh,#c9675f .3cqh .46cqh,transparent .5cqh) 0 0 / 1.2cqh 1.2cqh,#f19a93}
.k-grand .sl-m::after{content:"";position:absolute;inset:calc(var(--b) * .42);border:.16cqh solid var(--ink);pointer-events:none;
  background:linear-gradient(135deg,rgba(255,240,232,.6),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 66%,rgba(70,22,20,.35)),
    repeating-linear-gradient(-45deg,rgba(20,19,17,.13) 0 .1cqh,transparent .1cqh .3cqh),#f4a49d}
.k-grand .sl-ph{z-index:1;box-shadow:0 0 0 calc(var(--b) * .1) #fbe3da,0 0 0 calc(var(--b) * .1 + .14cqh) var(--ink)}
.sl-ros{position:absolute;z-index:1;width:calc(var(--b) * .62);aspect-ratio:1;border-radius:50%;border:.14cqh solid var(--ink);
  background:radial-gradient(circle,#fde3da 0 18%,#c9675f 20% 30%,#f6aaa3 32% 54%,#d9827b 56% 62%,#f6aaa3 64%);transform:translate(-50%,-50%)}
.sl-crest{position:absolute;z-index:2;left:50%;top:0;width:44%;height:calc(var(--b) * 1.05);transform:translate(-50%,-62%);
  border:.18cqh solid var(--ink);border-radius:50% 50% 12% 12% / 70% 70% 30% 30%;
  background:linear-gradient(160deg,rgba(255,240,232,.6),rgba(255,255,255,0) 40%,rgba(70,22,20,.3)),
    repeating-linear-gradient(90deg,rgba(20,19,17,.14) 0 .12cqh,transparent .12cqh .5cqh),var(--coral-2);
  box-shadow:.3cqh .6cqh .8cqh -.2cqh rgba(60,20,18,.4)}
.sl-crest::after{content:"";position:absolute;left:50%;top:22%;width:36%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  border:.14cqh solid var(--ink);background:radial-gradient(circle,#fde3da 0 30%,#e48e86 32% 60%,#f6aaa3 62%)}

/* antique gold: the one genuinely ornate gilt frame, carved and rubbed back at the edges */
.k-gold .sl-m{border-color:#3a2a10;background:
  linear-gradient(135deg,rgba(255,248,220,.6),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 62%,rgba(50,30,5,.45)),
  radial-gradient(circle,rgba(255,240,190,.55) 0 .16cqh,transparent .2cqh) 0 0 / .9cqh .9cqh,
  linear-gradient(90deg,#c9a24f,#e3c57d 20%,#a9802f 50%,#e0c072 78%,#b38a3a)}
.k-gold .sl-m::before{inset:calc(var(--b) * .38);border:.13cqh solid #3a2a10;
  background:repeating-linear-gradient(45deg,#d9b866 0 .32cqh,#9c742b .32cqh .52cqh,#e7cd8c .52cqh .7cqh),#c9a24f;
  box-shadow:inset .2cqh .2cqh 0 rgba(255,248,220,.5),inset -.2cqh -.2cqh 0 rgba(50,30,5,.35)}
.k-gold .sl-ph{z-index:1;box-shadow:0 0 0 calc(var(--b) * .1) #f2e2b4,0 0 0 calc(var(--b) * .1 + .12cqh) #3a2a10}
.k-gold .sl-ros{width:calc(var(--b) * .7);border-color:#3a2a10;
  background:radial-gradient(circle,#fff3cf 0 16%,#a9802f 18% 30%,#e3c57d 32% 52%,#9c742b 54% 60%,#d9b866 62%)}
/* dark walnut, oiled, with a thin gilt slip */
.k-walnut .sl-m{border-color:#1c110a;background:
  linear-gradient(140deg,rgba(255,230,200,.22),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 60%,rgba(0,0,0,.4)),
  repeating-linear-gradient(87deg,#4b2f1d 0 .28cqh,#5d3c26 .28cqh .7cqh,#3a2415 .7cqh .86cqh,#64432b .86cqh 1.5cqh,#4e321f 1.5cqh 2.1cqh)}
.k-walnut .sl-ph{box-shadow:0 0 0 calc(var(--b) * .16) #d4b067,0 0 0 calc(var(--b) * .16 + .1cqh) #2a1a0e}
/* a hairline black frame round a wide cream mount, the picture behind a bevelled window */
.k-hair .sl-m{border:.22cqh solid #111;background:linear-gradient(160deg,#fbf7ee,#efe8da);
  box-shadow:.4cqh .9cqh 1.3cqh -.4cqh rgba(60,20,18,.36),.1cqh .2cqh .25cqh rgba(20,19,17,.25),inset 0 0 0 .1cqh rgba(255,255,255,.9),inset .3cqh .4cqh .8cqh rgba(20,19,17,.12)}
.k-hair .sl-ph{border-color:rgba(20,19,17,.55);box-shadow:0 0 0 .35cqh #fffaf0,0 0 0 .45cqh rgba(20,19,17,.18)}
.k-hair .sl-ph::after{box-shadow:inset .2cqh .3cqh .5cqh rgba(20,19,17,.3)}

/* the empty frame: the wall seen through it, slightly less faded where a picture once hung, and a brass plate */
.sl-void{position:absolute;inset:var(--b);border:.12cqh solid var(--ink);background:rgba(240,150,145,.35);
  box-shadow:inset .5cqh .8cqh 1.2cqh rgba(60,20,18,.35)}
.sl-plaque{position:absolute;z-index:2;left:50%;bottom:calc(var(--b) * .2);transform:translateX(-50%);padding:.35cqh .9cqh .4cqh;
  background:linear-gradient(#fbe6dc,#eeaaa1 60%,#de8f87);border:.12cqh solid var(--ink);border-radius:.25cqh;
  box-shadow:inset .1cqh .1cqh 0 rgba(255,255,255,.6),.1cqh .2cqh .3cqh rgba(20,19,17,.3);
  font-family:var(--serif);font-style:italic;font-size:1cqh;line-height:1.1;white-space:nowrap;color:var(--ink)}

/* ---- the label: a museum card under the frame, too small to read from across the room ---- */
.sl-lab{position:absolute;z-index:2;left:0;top:calc(100% + .8cqh);width:max(100%,16cqh);max-width:21cqh;padding:.35cqh .55cqh .45cqh;
  background:#f7f1e6;box-shadow:0 .12cqh .3cqh rgba(60,20,18,.3);font-size:.78cqh;line-height:1.24;color:var(--ink-2);text-align:left;
  transform-origin:0 0;transition:transform .7s var(--ease),color .6s,box-shadow .6s}
.sl-lab b{display:block;font-weight:640;font-size:.86em;letter-spacing:.11em;text-transform:uppercase}
.sl-lab i{display:block;margin-top:.15em;font-family:var(--serif);font-size:1.12em}
.sl-fr:hover,.sl-fr:focus-visible,.sl-fr.is-read{z-index:6}
.sl-fr.low .sl-lab{transform-origin:0 100%}
.sl-fr:hover .sl-lab,.sl-fr:focus-visible .sl-lab,.sl-fr.is-read .sl-lab{transform:scale(var(--zoom,1.9));color:var(--ink);box-shadow:0 .3cqh 1cqh rgba(60,20,18,.3)}

/* ---- a note tucked into a frame, in one of our hands ---- */
.sl-note{position:absolute;z-index:3;right:-12%;bottom:6%;width:17cqh;padding:1.9cqh 1.2cqh 1cqh 1.4cqh;transform:rotate(-5deg);
  background:linear-gradient(#fdfaf3,#f6efe1);box-shadow:.25cqh .6cqh .9cqh -.1cqh rgba(60,20,18,.38);
  font-family:'Caveat',var(--serif);font-weight:600;font-size:1.9cqh;line-height:1.02;color:#26324a;text-align:left}
.sl-note::before{content:"";position:absolute;top:.5cqh;left:50%;width:1.1cqh;height:1.1cqh;margin-left:-.55cqh;border-radius:50%;
  background:var(--coral-2);box-shadow:inset 0 0 0 .14cqh var(--ink),.1cqh .25cqh 0 rgba(20,19,17,.35)}

/* ---- the introduction card ---- */
.sl-card{position:absolute;z-index:30;width:min(350px,calc(100vw - 32px));padding:22px 22px 20px;background:var(--grain),var(--paper);
  border:2px solid var(--ink);box-shadow:8px 8px 0 var(--coral-2);transform-origin:var(--ox,0) 50%;
  animation:sl-in .38s var(--ease) both}
.sl-card[hidden]{display:none}
.sl-card::after{content:"";position:absolute;inset:6px;border:1px solid rgba(20,19,17,.25);pointer-events:none}
@keyframes sl-in{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}
.sl-x{position:absolute;top:8px;right:10px;z-index:1;width:32px;height:32px;border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.sl-ck{font-size:.7rem;font-weight:620;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-ink)}
.sl-ch{margin:8px 26px 4px 0;font-family:var(--display);font-size:1.5rem;line-height:1.08;font-weight:700;outline:none}
.sl-cd{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:.95rem}
.sl-cw{margin:12px 0 16px;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.sl-cl{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.92rem;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.sl-cl.pill{text-decoration:none}

/* ---- narrow screens: the wall as a band under the nav, the words beneath it ---- */
@media (max-width:999px),(max-aspect-ratio:11/10){
  .sl-hero{flex-direction:column;align-items:stretch;padding:0 var(--gut) 34px;min-height:0}
  .sl-wall{--zoom:2.6;order:-1;flex:none;position:relative;left:auto;top:auto;right:auto;bottom:auto;margin:var(--nav-h) calc(var(--gut) * -1) 0;
    height:min(calc(var(--vh,100svh) * .62),560px);-webkit-mask:none;mask:none}
  .sl-copy{margin:24px 0 0;width:auto;max-width:620px}
  .sl-card{position:fixed;left:12px;right:12px;bottom:12px;width:auto;animation-name:sl-up}
  @keyframes sl-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}
@media (max-width:640px){
  .sl-wall{height:min(calc(var(--vh,100svh) * .54),440px)}
  /* no skirting board on a phone: the wall runs to the bottom of its band, and the hint is a small tag */
  .sl-skirt{display:none}
  .sl-walk{right:10px;bottom:8px;padding:3px 8px 4px;background:#f7f1e6;box-shadow:0 1px 3px rgba(60,20,18,.3);font-size:11px}
  .sl-h1{font-size:clamp(2.1rem,10.4vw,2.6rem);margin:10px 0 12px}
  .sl-lede{font-size:.98rem;margin-bottom:18px}
  .sl-acts .pill{min-height:40px;padding:.4em 1em;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .sl-lab,.sl-card{transition:none;animation:none}
}