/* Ready to use (Zigurds, 2026-10-07): each page's places in a zigzag, the pictures one at a time.
   Built by ready.js inside the products page (.page), so its type and lines follow the product pages */

/* the page's head: the heading, the page's name and its lead, no picture beside them */
.rintro{display:block;padding:48px 0 56px}
.rintro .pitch{max-width:52ch}

/* a place: the picture wide, the words beside it; every second one the other way round. The lines
   between places sit halfway (56px above and below) */
.rslot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"pic words";gap:64px;align-items:center;border-top:1px solid var(--line);padding:56px 0}
.rslot.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"words pic"}
.rshow{grid-area:pic;margin:0;min-width:0}
.rwords{grid-area:words;min-width:0}
.rwords h3{font:400 clamp(30px,3.2vw,40px)/1.05 'Instrument Serif',Georgia,serif;margin:14px 0 0}
.rwords .rtext{font-size:16px;line-height:1.62;font-weight:300;color:#3c3c3a;max-width:44ch;margin:18px 0 0}
body:not(.tx) .rwords h3:empty,body:not(.tx) .rwords .rtext:empty{display:none}
.page .rslots+.more{margin-top:0;padding-top:56px}

/* the drawing under the words: opens in a new tab */
.rpdf{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:5px;transition:border-color .15s}
.rpdf::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.rpdf::after{content:"";width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;margin-left:2px;opacity:.6}
.rpdf:hover{border-color:var(--ink)}

/* the pictures: one frame, the renders' own shape; the pictures cross-fade, multiplied onto the paper */
.rframe{position:relative;aspect-ratio:5/4;outline:none}
.rframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;transition:opacity .5s ease}
.rframe img.on{opacity:1}
.rarrow{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(246,246,244,.9);color:var(--ink);cursor:pointer;opacity:0;transition:opacity .2s,border-color .15s;z-index:1}
.rarrow svg{width:9px;height:18px}
.rarrow.prev{left:8px}.rarrow.next{right:8px}
.rarrow:hover{border-color:var(--ink)}
.rframe:hover .rarrow,.rframe:focus-visible .rarrow,.rarrow:focus-visible{opacity:1}
@media (hover:none){.rarrow{opacity:.85}}
.rdots{display:flex;justify-content:center;gap:4px;margin-top:14px}
.rdots button{position:relative;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;transition:width .4s ease}
.rdots button::before{content:"";width:6px;height:6px;border-radius:3px;background:#d2d2cd;transition:background .2s,width .4s ease}
.rdots button:hover::before{background:var(--mute)}
/* the current picture's dot is a short bar */
.rdots button.now{width:34px}
.rdots button.now::before{width:22px;background:var(--gold)}

/* playing by itself (ready.js show()): the bar fills in gold until the next picture, which fades in slowly.
   The fill's end is the tick, so wherever the fill waits, the pictures wait */
.rshow.play .rdots button.now::before{background:#e2e1dc}
.rshow.play .rdots button.now::after{content:"";position:absolute;left:50%;top:50%;margin:-3px 0 0 -11px;width:22px;height:6px;border-radius:3px;background:var(--gold);transform-origin:left center;transform:scaleX(0);animation:rfill var(--wait,5.5s) linear forwards}
.rshow.play.held .rdots button.now::after,.rshow.play.away .rdots button.now::after,.rshow.play.dark .rdots button.now::after,body.tx .rshow.play .rdots button.now::after{animation-play-state:paused}
@keyframes rfill{to{transform:scaleX(1)}}
.rframe.glide img{transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}

/* a place still empty: a workspace's drawing, faint, and Coming soon over it; lower than a filled place */
.rslot.empty{padding:40px 0}
.rph .rframe{aspect-ratio:auto;height:300px}
.rph .rframe img{opacity:.22;filter:grayscale(1)}
.rsoon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);background:var(--paper);padding:9px 16px;white-space:nowrap}

/* the editors' tools for a place: only in T */
.rtools{display:none}
body.tx .rtools{display:block;margin-top:26px;padding:14px;border:1px dashed rgba(181,138,0,.55);font:400 12px/1.4 Inter,system-ui,sans-serif}
.rthumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rth{position:relative;width:76px;border:1px solid var(--line);background:#fff}
.rth img{display:block;width:100%;aspect-ratio:5/4;object-fit:contain}
.rth button{width:25px;height:22px;border:0;border-top:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font:400 13px/1 Inter,system-ui,sans-serif;padding:0}
.rth button+button{border-left:1px solid var(--line)}
.rth button:hover:not(:disabled){background:var(--gold)}
.rth button:disabled{color:#c8c8c3;cursor:default}
.racts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.racts button{font:400 12px Inter,system-ui,sans-serif;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer}
.racts button:hover:not(:disabled){background:var(--gold);border-color:var(--gold)}
.racts button:disabled{opacity:.45;cursor:default}
.rmsg{color:var(--mute)}
body.tx .rwords h3:empty::before{content:"Title";color:#b9b9b3}
body.tx .rwords .rtext:empty::before{content:"Paragraph";color:#b9b9b3}

@media (max-width:900px){
  .rintro{padding:36px 0 40px}
  .rslot,.rslot.flip{grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "words";gap:24px;padding:40px 0}
  .rslot.empty{padding:32px 0}
  .rph .rframe{height:200px}
}