/* The hybrid homepage: Games and Cool Things side by side under a centered studio mark.
   Loaded after style.css, which still carries the discoveries, guestbook, optical band and updates. */
@font-face{font-family:'Nunito Page';src:url('/assets/nunito-page.woff2') format('woff2');font-weight:200 1000;font-style:normal;font-display:swap}
@property --split{syntax:'<percentage>';inherits:true;initial-value:50%}
.home,.home button,.home input{font-family:'Nunito Page',Nunito,Arial,sans-serif}

/* centered mark: the cube slot waits on the left, the triangle on the right, so the logo stays centered */
.home .masthead{display:block;height:auto;padding:34px 5% 30px;border-bottom:0;text-align:center}
.home .brand-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;max-width:560px;margin:0 auto}
.home .brand-side{display:flex;align-items:center;gap:10px;min-width:0}
.home .brand-left{justify-content:flex-end}
.home .brand-right{justify-content:flex-start}
.home .wordmark{width:clamp(104px,10vw,132px)}
.masthead-line{margin:16px 0 0;font-size:15px;line-height:1.5;font-weight:700;color:var(--muted)}
.home .masthead #site-language{position:absolute;top:24px;right:5%;margin:0}

/* two sides joined by a slanted seam; the side you are using gets a little more room */
.hub{position:relative}
.hub-track{--split:50%;display:grid;grid-template-columns:var(--split) minmax(0,1fr);min-height:min(820px,calc(100svh - 150px));transition:--split .6s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover) and (min-width:861px){
  .hub-track:has(.side-games:hover),.hub-track:has(.side-games:focus-within){--split:55%}
  .hub-track:has(.side-cool:hover),.hub-track:has(.side-cool:focus-within){--split:45%}
}
.side{position:relative;isolation:isolate;min-width:0;padding:44px clamp(24px,4vw,72px) 84px}
.side-games{--ink:#171717;--muted:#5d5d5d;--edge:#1b1b1b;--fill:#ececec;padding-right:clamp(96px,8vw,140px);color:var(--ink)}
.side-cool{--ink:#f4f4f4;--muted:#adadad;--edge:#d6d6d6;--fill:#2a2a2a;color:var(--ink);padding-left:clamp(28px,3vw,56px)}
.side-cool::before{content:'';position:absolute;z-index:-2;inset:0 0 0 -96px;background:#141414;clip-path:polygon(96px 0,100% 0,100% 100%,0 100%)}
/* the monochrome pool from the old Games band now ripples under the toys */
.side-cool .pool-surface{inset:0 0 0 -96px;width:calc(100% + 96px);clip-path:polygon(96px 0,100% 0,100% 100%,0 100%);opacity:.55}
.side-head h2{margin:0;font-size:clamp(40px,4.4vw,62px);line-height:1;font-weight:900}
.side-head h2:focus{outline:none}
.side-head p{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}

.shelf{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 28px;align-items:start}
.spot{display:flex;justify-content:center;min-width:0;animation:spot-in .7s cubic-bezier(.2,.8,.3,1.25) both}
.spot:nth-child(2){animation-delay:.08s}.spot:nth-child(3){animation-delay:.16s}.spot:nth-child(4){animation-delay:.24s}
.side-cool .spot{animation-delay:.12s}.side-cool .spot:nth-child(2){animation-delay:.2s}.side-cool .spot:nth-child(3){animation-delay:.28s}.side-cool .spot:nth-child(4){animation-delay:.36s}
@keyframes spot-in{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.spot-ramp,.spot-screen,.spot-pill{grid-column:1/-1}
.spot-rhombus{margin-top:28px}
.spot-circle{margin-top:18px}

/* every shape is a key: an outline, art clipped to the same outline, and a physical edge that follows it */
.piece{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}
.piece:focus-visible{outline:2px solid currentColor;outline-offset:8px;border-radius:6px}
.shape-wrap{position:relative;display:block;width:var(--w,100%);aspect-ratio:var(--ratio,1);filter:drop-shadow(0 5px 0 var(--edge));transition:transform .14s cubic-bezier(.2,.7,.3,1),filter .14s}
.shape{display:block;width:100%;height:100%;padding:2px;background:var(--edge);clip-path:var(--clip)}
.art{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--fill);clip-path:var(--clip)}
.art img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .35s,transform .6s cubic-bezier(.2,.7,.3,1)}
.art .preview{position:absolute;inset:0;filter:none}
.piece:hover .shape-wrap,.piece:focus-visible .shape-wrap{transform:translateY(-4px);filter:drop-shadow(0 9px 0 var(--edge))}
.piece:active .shape-wrap{transform:translateY(3px);filter:drop-shadow(0 1px 0 var(--edge))}
.piece:hover img,.piece:focus-visible img,.spot.in-view img{filter:none}
.piece:hover .art>img:first-child,.piece:focus-visible .art>img:first-child{transform:scale(1.04)}
.piece-name{margin-top:18px;font-size:19px;line-height:1.3;font-weight:900}
.piece-tag{margin-top:3px;font-size:13px;line-height:1.5;color:var(--muted)}
.piece:hover .piece-name{text-decoration:underline;text-underline-offset:5px}

.spot-square{--clip:inset(0 round 22px);--w:min(100%,236px)}
.spot-rhombus{--clip:polygon(50% 0,100% 50%,50% 100%,0 50%);--w:min(100%,276px)}
.spot-rhombus .art>img:first-child{object-position:52% 42%}
.spot-ramp{--clip:polygon(0 0,100% 58%,100% 100%,0 100%);--ratio:3.4}
.spot-screen{--clip:inset(0 round 18px);--ratio:1248/468}
.spot-pill{--clip:inset(0 round 999px);--ratio:1200/375}
.spot-slant{--clip:polygon(14% 0,100% 0,86% 100%,0 100%);--ratio:900/580;--w:min(100%,300px)}
.spot-circle{--clip:circle(50% at 50% 50%);--w:min(100%,200px)}
.spot-tri{--clip:polygon(50% 0,100% 100%,0 100%);--ratio:1/.9;--w:min(100%,290px)}
.spot-tri .art>img:first-child{object-position:50% 70%}
/* the Sketch Gallery docks onto the Reyn Sketch screen: a round badge over its lower left corner, with the
   same outline and raised edge, so the two read as one piece (cqw = the pair's width) */
.screen-pair{position:relative;width:100%;container-type:inline-size}
.screen-pair>.piece:first-child{padding-bottom:max(0px,calc(11cqw - 30px))}
.screen-pair>.piece:first-child .piece-name,.screen-pair>.piece:first-child .piece-tag{padding-left:26cqw}
.piece-dock{position:absolute;left:3cqw;top:calc(37.5cqw - 11cqw);width:22cqw;z-index:1}
.piece-dock .shape-wrap{--clip:circle(50% at 50% 50%);--ratio:1;--w:100%;border-radius:50%;background:#141414;padding:5px}
.piece-dock .shape{padding:4px}
.piece-dock .piece-name{margin-top:8px;font-size:clamp(12px,3.2cqw,16px);white-space:nowrap}
.piece-dock .sticker{right:-30%;top:-6%;rotate:9deg}

/* the Dropleez ramp: the official wordmark at the foot and a Droply that slides down on hover */
.spot-ramp .art{background:linear-gradient(170deg,#f4f4f4,#dcdcdc);container-type:inline-size}
.spot-ramp .art .game-logo{position:absolute;left:5%;bottom:28%;width:42%;height:auto;object-fit:contain}
.ramp-subtitle{position:absolute;left:5%;bottom:10%;width:42%;font-size:clamp(9px,2.6cqw,15px);line-height:1.2;font-weight:800;color:#444;white-space:nowrap}
.spot-ramp .game-release{position:absolute;right:5%;bottom:10%;font-size:clamp(10px,2.8cqw,16px);line-height:1.2;font-weight:800;color:#666;transition:color .2s;white-space:nowrap}
.spot-ramp .piece:hover .game-release{color:#cf377d}
.ramp-track{position:absolute;left:0;top:0;width:101.45%;height:0;transform-origin:0 0;rotate:9.68deg;pointer-events:none}
.ramp-droply{position:absolute;left:2%;bottom:-14px;width:clamp(60px,14%,84px);height:auto;filter:grayscale(1);transition:left .95s cubic-bezier(.55,0,.85,.45),filter .35s}
.piece:hover .ramp-droply,.piece:focus-visible .ramp-droply{left:calc(100% - clamp(72px,16%,98px))}
.piece:hover .ramp-droply,.piece:focus-visible .ramp-droply,.spot.in-view .ramp-droply{filter:none}

.sticker{position:absolute;padding:6px 12px;border-radius:999px;background:#ffe7a3;color:#2d2300;font-size:12px;line-height:1.2;font-weight:900;box-shadow:0 3px 0 #b8952e;white-space:nowrap}
.sticker[hidden]{display:none}
.spot-circle .sticker{right:-14%;top:4%;rotate:9deg}

/* the studio story, between the shelves and the optical band */
.about-band{position:relative;padding:92px 5% 84px;text-align:center}
.about-eyebrow{margin:0 0 22px;font-size:12px;line-height:1.4;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.home .about-copy p{font-size:18px}

.home .footer-links nav{display:flex;flex-wrap:wrap;gap:4px 32px}

.hub-switch{display:none}

@media(max-width:860px){
  .home .masthead{padding:26px 5% 18px}
  .home .masthead #site-language{position:static}
  .hub-switch{position:sticky;top:10px;z-index:6;display:grid;grid-template-columns:1fr 1fr;margin:4px 16px 0;padding:4px;border:1px solid #222;border-bottom-width:4px;border-radius:999px;background:#fff}
  .hub-switch button{position:relative;z-index:1;min-height:44px;border:0;border-radius:999px;background:none;color:#171717;font-size:15px;font-weight:800;cursor:pointer;transition:color .3s}
  .hub-switch button[aria-pressed="true"]{color:#fff}
  .hub-switch button:focus-visible{outline-offset:2px}
  .hub-switch-knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#141414;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
  .hub-switch[data-on="cool"] .hub-switch-knob{transform:translateX(100%)}
  .hub-track{display:flex;min-height:0;margin-top:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .hub-track::-webkit-scrollbar{display:none}
  .side{flex:0 0 100%;scroll-snap-align:start;padding:28px 20px 56px}
  .side-games{padding-right:20px}
  .side-cool::before,.side-cool .pool-surface{inset:0;width:100%;clip-path:none}
  .shelf{gap:36px 18px;margin-top:30px}
  .spot-rhombus{margin-top:22px}
  .about-band{padding:64px 6% 56px}
}
@media(prefers-reduced-motion:reduce){
  .hub-track,.shape-wrap,.art img,.ramp-droply,.hub-switch-knob{transition:none}
  .spot{animation:none}
  .piece:hover .shape-wrap,.piece:focus-visible .shape-wrap{transform:none}
  .piece:hover .art>img:first-child,.piece:focus-visible .art>img:first-child{transform:none}
  .piece:hover .ramp-droply,.piece:focus-visible .ramp-droply{left:2%}
}
.motion-paused .spot{animation:none}
.motion-paused .ramp-droply{transition:none}
.about-contact a{font-weight:800;text-underline-offset:4px}
.footer-contact span{font-weight:800;margin-right:4px}