/* paint-roll.css — structure for the painting conveyor (see paint-roll.js).
   Each roll variation layers its own look on top of this in its style.css.
   Per-tile custom properties are baked into the HTML by the page build:
     --ar    width / height of the photograph
     --s     size factor 0..1 of the band's art height   (the "random size")
     --y     vertical stagger 0..1 within the spare height
     --tilt  a small rotation for variations that want one
   Band-level knobs a variation sets:  --pr-art-h  --pr-gap  --pr-pad  --pr-cap-h */
.pr-section{ padding:0 }
.pr-band{ position:relative; --pr-art-h:clamp(200px,26vw,340px); --pr-gap:clamp(18px,2.4vw,34px); --pr-pad:clamp(20px,3vw,48px); --pr-cap-h:44px }
.pr-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 20px; padding:12px var(--pr-pad) 10px;
}
.pr-head__lead{ display:flex; align-items:center; gap:12px; min-width:0 }
.pr-head__lead .eyebrow{ margin:0 }
.pr-controls{ display:flex; gap:8px; flex:none }
.pr-btn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  min-width:40px; height:40px; padding:0 13px;
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-pill);
  box-shadow:var(--sh-chip); color:var(--ink);
  font-family:var(--font-display); font-weight:500; font-size:1.25rem; line-height:1;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pr-btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-chip-lift) }
.pr-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink) }
.pr-btn--toggle{ font-size:.84rem; letter-spacing:.02em; padding:0 14px; min-width:76px; display:none }
.pr-band.is-live .pr-btn--toggle{ display:inline-flex }
.pr-btn--toggle[aria-pressed="true"]{ background:var(--accent); box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px var(--ink), var(--sh-chip) }
.pr-btn--toggle .on{ display:inline } .pr-btn--toggle .off{ display:none }
.pr-btn--toggle[aria-pressed="true"] .on{ display:none } .pr-btn--toggle[aria-pressed="true"] .off{ display:inline }

/* the viewport is a real scroll container: wheel, swipe, drag and keys all work */
.pr-roll{
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
}
.pr-roll::-webkit-scrollbar{ display:none }
.pr-roll.is-dragging{ cursor:grabbing }
.pr-roll.is-dragging .pr-shot{ pointer-events:none }
.pr-roll:focus-visible{ outline-offset:-3px }
.pr-track{
  display:flex; align-items:flex-start; gap:var(--pr-gap);
  list-style:none; margin:0; padding:0 var(--pr-pad); width:max-content;
  height:calc(var(--pr-art-h) + var(--pr-cap-h));
}
.pr-item{
  flex:none; --h:calc(var(--pr-art-h) * var(--s,1));
  margin-top:calc((var(--pr-art-h) - var(--h)) * var(--y,0));
}
.pr-work{ margin:0; width:calc(var(--h) * var(--ar,1)); display:flex; flex-direction:column }
.pr-shot{
  display:block; width:100%; height:var(--h); padding:0; border:0; background:none;
  cursor:zoom-in; color:inherit;
}
.pr-shot img{ width:100%; height:100%; object-fit:contain; display:block;
  /* drop-shadow follows the alpha, so a round canvas throws a round shadow */
  filter:drop-shadow(0 6px 10px rgba(51,43,66,.14)) }
.pr-cap{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.25; padding-top:8px }
.pr-cap__name{ font-family:var(--font-display); font-weight:600; font-size:.92rem }
.pr-cap__size{ font-size:.72rem; color:var(--ink-faint); letter-spacing:.04em }

/* the five roll variations link to each other from the band head */
.pr-switch{ display:flex; flex-wrap:wrap; gap:5px; list-style:none; margin:0; padding:0 }
.pr-switch a{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 6px;
  background:var(--card); color:var(--ink); text-decoration:none;
  border:2px solid var(--ink); border-radius:var(--r-pill); box-shadow:0 2px 0 var(--ink);
  font-family:var(--font-display); font-weight:500; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
.pr-switch a[aria-current]{ background:var(--accent); font-weight:600; box-shadow:0 0 0 2.5px var(--card), 0 0 0 4.5px var(--ink), 0 2px 0 var(--ink) }
.pr-switch__n{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--ink); color:var(--ground); font-size:.62rem }

/* operator's pick from /demo_fable/brand-fonts/ (#10): the wordmark in Fraunces */
.fable-brand__name{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-variation-settings:'SOFT' 30,'WONK' 1,'opsz' 24; font-size:1.2rem; letter-spacing:-.005em;
}
@media (max-width:760px){
  .pr-band{ --pr-art-h:clamp(170px,44vw,240px) }
  .pr-head{ padding-inline:14px }
}
@media (prefers-reduced-motion:reduce){ .pr-btn:hover{ transform:none } }