/* RR Painting · v3 page styles (loaded after site.css, which still carries the shared tokens, type and buttons).
   Plan: scratchpad/clients/painting-rr/26-v3-plan.md. One world: Rudy's plaster wall; real tools do the work on it. */

/* ---------- hero: the brush paints the pencil house ---------- */
.hero{padding-top:calc(var(--nav-top) + var(--H) + clamp(40px,6vh,80px))}
.hero__stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.hero__house{position:relative;top:auto;left:auto;width:100%;aspect-ratio:1400/918;filter:none}
.hero__house::after{content:"";position:absolute;left:8%;right:6%;bottom:-1%;height:9%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,46,28,.22),transparent)}   /* the lawn sits on the wall, not floating */
.hero__still{opacity:1;transition:opacity .3s}
.is-live .hero__still{opacity:0}
.hero__canvas{opacity:0}
.is-live .hero__canvas{opacity:1}
.h3__brush{position:absolute;left:0;top:0;z-index:4;max-width:none;height:auto;pointer-events:none;visibility:hidden;will-change:transform;
  --lift:0;filter:drop-shadow(calc(5px + var(--lift) * 14px) calc(8px + var(--lift) * 18px) calc(6px + var(--lift) * 10px) rgba(40,30,20,calc(.32 - var(--lift) * .1)))}
.h3__brush.is-placed{visibility:visible}
.picker{position:static;translate:none;max-width:none;width:auto;align-self:flex-start;background:rgba(255,255,255,.72);box-shadow:none;border:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;padding:12px 16px}
.picker__label{grid-column:1;margin:0}
.picker__row{grid-column:2;grid-row:1 / span 2}
.picker__note{grid-column:1;margin:0;max-width:26ch}
@media (max-width:899px){
  .hero__stage{margin:0}
  .picker{width:100%;grid-template-columns:1fr}
  .picker__row,.picker__note{grid-column:1;grid-row:auto}
  .picker__note{max-width:none}
}

/* ---------- footer: the sign-off, the red ЯR, and the drop that completes it ---------- */
.sign{position:relative;max-width:var(--max);margin:clamp(90px,12vw,170px) auto clamp(30px,4vw,50px);display:grid;grid-template-columns:1fr 1fr;
  --mk:min(80vw,680px);--fs:clamp(34px,6.2vw,92px)}
.sign__line{grid-column:1;justify-self:end;margin:0 0 clamp(56px,6.5vw,92px);text-align:right;
  font:900 var(--fs)/.96 var(--display);letter-spacing:-.03em;color:var(--ink)}
/* the full stop: centered exactly on the page's center line, where the logo's divider will be */
.sign__stop{display:inline-block;width:.3em;height:auto;max-width:none;margin:0 calc(-.15em) 0 .03em;vertical-align:-.33em}
.fmark{grid-column:1 / -1;justify-self:center;width:var(--mk);aspect-ratio:265.22/142.6;
  background:#C8150E url(../art/fill-red.webp) center/cover;
  -webkit-mask:url(../logo/rr-mask.svg) center/100% 100% no-repeat;mask:url(../logo/rr-mask.svg) center/100% 100% no-repeat;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.drop{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
.drop__body{position:absolute;left:0;top:0;width:100%;background:url(../art/drop-body.webp) center top/150% auto repeat-y;
  filter:drop-shadow(1px 2px 1.5px rgba(30,20,10,.25))}
.drop__tip{position:absolute;left:0;width:100%;height:auto;max-width:none;opacity:0;transition:opacity .2s}
.drop.is-running .drop__tip{opacity:1}
.foot{padding-top:clamp(70px,10vw,140px)}
.foot__base{text-align:center}
@media (max-width:640px){.sign{--fs:clamp(26px,8.4vw,40px)}}

/* the nav carries Call + Text on phones, so the v2 sticky bar would repeat them */
.sticky-cta{display:none!important}
@media (max-width:640px){.foot{padding-bottom:calc(36px + env(safe-area-inset-bottom))}}

/* ---------- giant words pressed into the plaster: each gets its own row, never behind other text ---------- */
.emboss{max-width:var(--max);margin:0 auto clamp(14px,2vw,28px);font:900 min(12.4vw,220px)/.8 var(--display);text-transform:uppercase;letter-spacing:-.04em;white-space:nowrap;
  color:rgba(255,255,255,.36);text-shadow:-1px -1px 0 rgba(255,255,255,.8),2px 2px 3px rgba(80,64,40,.17);pointer-events:none;user-select:none}
.emboss--dark{color:rgba(255,255,255,.035);text-shadow:-1px -1px 0 rgba(255,255,255,.07),2px 2px 3px rgba(0,0,0,.55)}

/* ---------- commercial: a band of dark paint rolled across the wall (roller edges top and bottom) ---------- */
.night{position:relative;margin-block:clamp(10px,2vw,30px) 0;padding:clamp(90px,10vw,150px) var(--gut);color:#F1EEE8;
  background:#1E1E20 url(../art/wall.webp) 0 0/560px;background-blend-mode:multiply;
  -webkit-mask:url(../art/edge-top.png) 0 0/1600px 22px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 40px) no-repeat,url(../art/edge-bot.png) 0 100%/1600px 23px repeat-x;
  mask:url(../art/edge-top.png) 0 0/1600px 22px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 40px) no-repeat,url(../art/edge-bot.png) 0 100%/1600px 23px repeat-x}
.night .eyebrow{color:#A3A29D}
.night .h2 em{color:#F1EEE8}
.night__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:start}
.night__lede{max-width:52ch;font-size:clamp(17px,1.3vw,19px);color:#D2D0CA;margin:20px 0 clamp(30px,3.6vw,48px)}
.night .shifts{margin:0 0 clamp(30px,3.6vw,46px)}
.night__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.night__cta p{margin:0;color:#CFCCC4;font-size:15.5px;max-width:46ch}
.night__cta a:not(.btn){color:#fff;font-weight:700}
.night__feature{margin:0;justify-self:end;width:100%;max-width:520px}
.night__feature img{width:100%;height:auto;border-radius:var(--r);filter:var(--photo);box-shadow:0 34px 60px rgba(0,0,0,.5)}
.night__feature figcaption{padding-top:10px;font-size:13.5px;color:#A3A099}
.night .jobs{margin-top:clamp(50px,6vw,90px)}

/* ---------- the work: sharp photos only, at no more than half their pixel width ---------- */
.work3{padding-block:clamp(60px,7vw,110px)}
.gallery{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px) clamp(28px,6vw,90px);align-items:start}
.shot3{margin:0;position:relative;z-index:1;width:100%;max-width:540px;justify-self:center}
.shot3:first-of-type{max-width:620px}
.shot3:last-of-type:nth-of-type(odd){grid-column:1 / -1}
.shot3:nth-of-type(even){margin-top:clamp(70px,14vw,220px)}
.shot3__frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 26px 50px rgba(40,32,20,.16);background:#F6F4EF}
.shot3__frame img{display:block;width:100%;height:auto;filter:var(--photo)}
.shot3__frame canvas{position:absolute;inset:0;width:100%;height:100%}
.shot3 figcaption{padding-top:14px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.shot3__n{margin-right:10px}
.shot3 figcaption strong{font:800 16px/1.3 var(--text);color:var(--ink)}
.shot3__n{font:900 14px/1 var(--display);color:var(--mute);flex:none}

/* ---------- Rudy: a print held to the wall with painter's tape ---------- */
.owner{padding-block:clamp(80px,9vw,150px)}
.owner__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,96px);align-items:start}
.owner__photo{position:relative;margin:clamp(10px,2vw,30px) 0 0;justify-self:center;width:226px;background:#fff;padding:10px 10px 0;rotate:-2.5deg;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 22px 40px rgba(40,32,20,.18)}
.owner__photo img{display:block;width:100%;height:auto}
.owner__photo figcaption{padding:10px 2px 12px;font:600 13px/1.3 var(--text);color:var(--ink-2)}
.tape{position:absolute;top:-13px;width:96px;height:28px;z-index:2;opacity:.9;
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(255,255,255,.14)),repeating-linear-gradient(90deg,#3F86C9 0 2px,#4A8FD0 2px 5px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 3px calc(100% - 3px),transparent);mask:linear-gradient(90deg,transparent,#000 3px calc(100% - 3px),transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tape--a{left:-30px;rotate:-32deg}
.tape--b{right:-30px;rotate:28deg}
.owner__body{font-size:clamp(17px,1.3vw,19px);max-width:50ch;color:var(--ink-2);margin:22px 0 0}

@media (max-width:899px){
  .night__grid,.owner__grid{grid-template-columns:1fr}
  .night__feature{justify-self:start}
  .night .shifts{grid-template-columns:1fr}
  .night .shifts li+li{border-left:0;padding-left:0;border-top:1px solid #3c3c3f}
  .night .jobs{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr}
  .shot3:nth-of-type(even){margin-top:0}
  .owner__photo{justify-self:start;margin-left:24px}
}

/* the giant word pressed into the wall BEHIND the photos (never behind text) */
.emboss--behind{position:absolute;left:50%;top:0;translate:-50% 0;margin:0;z-index:0;text-align:center;
  font-size:min(17vw,260px);line-height:.82}
.section-head--center{text-align:center}
.section-head--center .section-head__lede{margin-inline:auto}
.section-head--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(30px,6vw,96px);align-items:end}
.section-head--split .eyebrow{grid-column:1}
.section-head--split .h2{grid-column:1}
.section-head--split .section-head__lede{grid-column:2;grid-row:1 / span 2;margin:0;align-self:end}
.services,.owner{padding-block:clamp(60px,7vw,110px)}
.hero__proof a{white-space:nowrap}
@media (max-width:899px){
  .section-head--split{display:block}
  .section-head--split .section-head__lede{margin-top:20px}
  .shot3,.shot3:first-of-type{max-width:min(100%,540px)}
  .emboss--behind{font-size:24vw}
  .deck{padding-inline:2px}
}
.shot3__frame canvas{transition:none}
.shot3__brush{position:absolute;left:0;top:0;z-index:3;max-width:none;height:auto;pointer-events:none;opacity:0;transition:opacity .15s;
  filter:drop-shadow(6px 10px 8px rgba(30,24,16,.35))}
.shot3__frame{overflow:visible}
.shot3__frame img,.shot3__frame canvas{border-radius:var(--r)}
.h3__brush.is-resting{filter:drop-shadow(2px 3px 2px rgba(30,40,10,.45)) drop-shadow(10px 14px 10px rgba(30,40,10,.25))}
@media (max-width:899px){.hero__stage{gap:clamp(34px,8vw,48px)}}
.section-head--center .h2{margin-inline:auto}

.gallery{padding-top:clamp(20px,3vw,40px)}
a[href^="tel:"]{white-space:nowrap}
.owner__photo img{max-width:209px}

/* the drop (js/v3-foot.js): one SVG shape over the logo; the full-stop image underneath is the no-JS fallback */
.drip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;overflow:visible;filter:drop-shadow(1px 2px 1.5px rgba(30,20,10,.22))}
.has-drip .sign__stop{visibility:hidden}

/* giant words painted onto the plaster with a roller: real paint texture inside the letters, an embossed edge where the
   coat sits on the wall. Black, like the logo's divider; red stays for the logo and the call button; navy is only a house swatch. */
.emboss{color:transparent;background:#151517 url(../art/fill-black.webp) center/1100px auto;-webkit-background-clip:text;background-clip:text;
  text-shadow:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(2px 3px 3px rgba(40,30,20,.28))}
.emboss--behind{opacity:.95}



/* the fan deck: cards keep their own shadow while closed so the stack reads as a deck of chips */
.deck{position:relative}
.deck .chip{position:relative;will-change:transform}

/* the color picker: real paint chips taped to the wall with blue painter's tape */
.picker{background:none;border:0;padding:4px 0 0;gap:10px 22px}
.picker__row{gap:16px;padding-top:10px}
.swatch{position:relative;overflow:visible;width:70px;border:0;border-radius:2px;background:#fff;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 8px 16px rgba(40,32,20,.14);rotate:var(--tilt,0deg);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.swatch:nth-child(1){--tilt:-2deg}.swatch:nth-child(2){--tilt:1.5deg}.swatch:nth-child(3){--tilt:-1deg}.swatch:nth-child(4){--tilt:2deg}
.swatch__ink{height:44px;margin:5px 5px 0;border-radius:1px}
.swatch::before{content:"";position:absolute;left:50%;top:-9px;width:38px;height:15px;translate:-50% 0;rotate:calc(var(--tilt,0deg) * -2);z-index:1;opacity:.92;
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(255,255,255,.14)),repeating-linear-gradient(90deg,#3F86C9 0 2px,#4A8FD0 2px 5px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 2px calc(100% - 2px),transparent);mask:linear-gradient(90deg,transparent,#000 2px calc(100% - 2px),transparent)}
.swatch:hover{transform:translateY(-3px)}
.swatch[aria-pressed="true"]{outline:none;box-shadow:0 0 0 2px var(--ink),0 10px 20px rgba(40,32,20,.2)}
.swatch:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:899px){.picker__row{gap:12px}.swatch{width:auto}}

/* ---------- The Work: each job on a paint sample board taped to the wall ---------- */
.emboss--work{text-align:center;font-size:min(16vw,250px);margin-bottom:clamp(20px,3vw,40px)}
.boards{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(56px,7vw,100px) clamp(40px,7vw,110px);align-items:start}
.board{position:relative;margin:0;justify-self:center;width:100%;max-width:470px;background:#fff;padding:12px 12px 0;rotate:var(--tilt);
  box-shadow:0 1px 2px rgba(0,0,0,.07),0 24px 44px rgba(40,32,20,.16)}
.board:nth-child(even){margin-top:clamp(60px,10vw,160px)}
.board__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:var(--photo)}
.board__band{display:flex;gap:14px;align-items:stretch;padding:12px 2px 14px}
.board__chip{flex:none;width:58px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.board__txt{display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.board__txt strong{font:900 19px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink)}
.board__code{font:600 11px/1.2 var(--text);letter-spacing:.14em;color:var(--mute)}
.board .tape{top:-12px;width:84px}
.board .tape--l{left:-26px;rotate:-34deg}
.board .tape--r{right:-26px;rotate:30deg}

/* ---------- Commercial: the jobs stacked into one tall store paint strip ---------- */
.strip{justify-self:end;width:100%;max-width:440px;background:#fff;padding:12px;rotate:2deg;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.25),0 40px 70px rgba(0,0,0,.45)}
.strip__block{position:relative;margin:0}
.strip__block img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;filter:var(--photo)}
.strip__block figcaption{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:8px 2px 4px;color:var(--ink-2);font-size:13px;line-height:1.35}
.strip__block strong{grid-column:1;font:900 15.5px/1.15 var(--display);text-transform:uppercase;color:var(--ink)}
.strip__block span{grid-column:1}
.strip__block i{grid-column:2;grid-row:1;font:600 10.5px/1.6 var(--text);font-style:normal;letter-spacing:.12em;color:var(--mute)}
.night__grid{align-items:center}

/* ---------- footer: sign-off, the logo with its wordmark, then the details ---------- */
.fword{grid-column:1 / -1;justify-self:center;width:var(--mk);margin:clamp(14px,1.6vw,22px) 0 0;text-align:center;
  font:800 calc(var(--mk) * .046)/1 var(--text);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);padding-left:.3em;white-space:nowrap}
.sign{margin-bottom:clamp(60px,8vw,110px)}
.foot__base{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:clamp(40px,5vw,70px)}
.foot__by a{color:var(--ink-2);font-weight:600}
@media (max-width:899px){
  .boards{grid-template-columns:1fr;gap:56px}
  .board:nth-child(even){margin-top:0}
  .board{max-width:min(100%,420px)}
  .strip{justify-self:start;max-width:min(100%,420px);rotate:1deg}
}
.hero__copy{position:relative;z-index:6}   /* the brush may pass behind the words, never over them */