/* Keep the existing page frame and wordmark exactly as on the previous home. */
html,body{margin:0;background:#fff;color:#000}body{max-width:1200px;margin:auto}
/* A disk dragged to the edge must never make the page scroll sideways. */
html{overflow-x:clip}
button,a{touch-action:manipulation}
#suph-home-concept{background:#fff;color:#000;font-family:'DM Sans',Arial,sans-serif;padding:0 52px 36px;width:100%;min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box;color-scheme:light}
#suph-home-concept *{box-sizing:border-box}
#suph-home-concept [hidden]{display:none!important}
#suph-home-concept a{color:inherit;text-decoration:none}
#suph-home-concept .suph-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 0;border-bottom:1px solid #e8e8e8}
#suph-home-concept .suph-wordmark{font-family:Arial,Helvetica,sans-serif;font-size:19px;font-weight:600;line-height:1;letter-spacing:-.6px;color:#243f39}
#suph-home-concept .suph-visually-hidden,.disk-line{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#suph-home-concept .suph-wordmark:focus-visible{outline:2px solid #e32626;outline-offset:7px}
#suph-main{flex:1;display:flex;flex-direction:column;padding:40px 0 8px}
/* Centre the pile in the free space, but never float it more than 64px below the header (tall tablets). */
#suph-main::before,#suph-main::after{content:'';flex:1 1 0}
#suph-main::before{max-height:64px}

/* The pile. Every disk is one finished piece of art (suph-app-posters cards/floppy/vibes.py), all cut to one
   520 x 543 box: one per project plus suphian.com and Abacus, Suphian's picks from Codex, ChatGPT and his finals.
   The disk width is whatever lets --cols across and --rows down fit the viewport (with the case's overhang); each
   row holds exactly --cols. /assets is cached for 30 days, so new art always gets a new file name.
   The scatter repeats every five disks, so next month's project lands in it without layout work. */
.disk-pile{
  --cols:4;--rows:2;
  --disk-w:clamp(110px,min(calc((min(100vw,1200px) - 104px) / (var(--cols) * .92 + .6)),calc((100svh - 250px) / (var(--rows) * .994 + .15))),300px);
  --overlap:calc(var(--disk-w) * -.05);
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;
  width:100%;max-width:calc(var(--disk-w) * (var(--cols) * .92 + .3));margin:0 auto;padding-bottom:calc(var(--overlap) * -1)
}
@media (min-width:641px) and (max-width:900px) and (max-aspect-ratio:1/1){.disk-pile{--cols:3;--rows:3}}
.disk{
  --r:0deg;--y:0%;--lift:0%;--turn:1;--scale:1;--dx:0px;--dy:0px;--px:0;--py:0;
  position:relative;display:block;flex:none;width:var(--disk-w);aspect-ratio:520/543;
  margin:0 calc(var(--disk-w) * -.04) var(--overlap);z-index:var(--z,1);
  transform:translate(var(--dx),var(--dy));
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:pan-y pinch-zoom
}
/* Earlier disks lie on top (disks.js sets --z from the order), so a row only ever covers the shutters of
   the row below it, never a label. Dragging works on touch whenever the page has nothing to scroll. */
.can-drag-touch .disk{touch-action:pinch-zoom}
.disk:nth-child(5n+1){--r:-4deg;--y:3%;--z:5}
.disk:nth-child(5n+2){--r:2.5deg;--y:-2%;--z:4}
.disk:nth-child(5n+3){--r:-1.5deg;--y:5%;--z:3}
.disk:nth-child(5n+4){--r:3.5deg;--y:-1%;--z:2}
.disk:nth-child(5n+5){--r:-3deg;--y:2%;--z:1}
/* Only the link's own, untilted box takes the pointer: hovering a lifted body's edge would make it bob. */
.disk-body{
  position:absolute;inset:0;isolation:isolate;pointer-events:none;
  transform:translateY(calc(var(--y) + var(--lift))) rotate(calc(var(--r) * var(--turn))) scale(var(--scale)) perspective(1100px) rotateX(calc(var(--py) * -5deg)) rotateY(calc(var(--px) * 5deg));
  transition:transform .5s cubic-bezier(.2,.8,.2,1)
}
/* Shadows sit behind the disk as plain boxes, so nothing re-filters while it moves. */
.disk-body::before,.disk-body::after{content:'';position:absolute;inset:1.2% .8% .4%;z-index:-1;border-radius:2.6%/2.5%;pointer-events:none;transition:opacity .5s}
.disk-body::before{box-shadow:0 1px 2px rgba(18,18,28,.22),0 10px 22px -10px rgba(18,18,28,.45)}
.disk-body::after{opacity:0;box-shadow:0 24px 44px -14px rgba(18,18,28,.42)}
.disk-art{position:absolute;inset:0;display:block;width:100%;height:100%;-webkit-user-drag:none}
/* A sheen that crosses the disk on hover, cut to the disk's own outline. */
.disk-glint{position:absolute;inset:0;-webkit-mask:var(--art) center/100% 100% no-repeat;mask:var(--art) center/100% 100% no-repeat;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.26) 50%,transparent 58%) 100% 0/300% 100% no-repeat;transition:background-position 1s cubic-bezier(.2,.7,.2,1)}
.disk-chess{--art:url('/assets/disks/chess.webp')}
.disk-toga{--art:url('/assets/disks/toga.webp')}
.disk-quran{--art:url('/assets/disks/quran.webp')}
.disk-coming{--art:url('/assets/disks/coming.webp')}
.disk-suphian-nyc{--art:url('/assets/disks/suphian-nyc.webp')}
.disk-abacus{--art:url('/assets/disks/abacus.webp')}
.disk-billy-2{--art:url('/assets/disks/billy-2.webp')}


/* Hover, keyboard focus and drag: pick the disk up, straighten it, catch the light. */
@media (hover:hover){
  .disk[href]:hover{z-index:900}
  .disk[href]:hover .disk-body{--lift:-5%;--turn:.2;--scale:1.04}
  .disk[href]:hover .disk-body::after{opacity:1}
  .disk[href]:hover .disk-glint{background-position:0 0}
}
.disk[href]:focus-visible{outline:none;z-index:900}
.disk[href]:focus-visible .disk-body{--lift:-5%;--turn:.2;--scale:1.04;outline:2px solid #e32626;outline-offset:6px;border-radius:2.6%/2.5%}
.disk[href]:focus-visible .disk-glint{background-position:0 0}
.disk.is-held,.disk[href].is-held:hover{z-index:1000;cursor:grabbing}
.disk.is-held .disk-body,.disk[href].is-held:hover .disk-body{--lift:-4%;--turn:.4;--scale:1.06}
.disk.is-held .disk-body::after{opacity:1}
.disk.is-dropped{z-index:var(--stack)}

/* The case the disks spilled out of: an open 90s storage box, behind the pile's left edge. The pile shifts
   right by half the case's overhang so the case and disks centre together. */
.disk-pile{left:calc(var(--disk-w) * .26)}
.disk-case{position:absolute;z-index:0;width:calc(var(--disk-w) * 1.12);height:auto;left:calc(var(--disk-w) * -.56);top:calc(var(--disk-w) * -.02);transform:rotate(-7deg);pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 12px 18px rgba(18,18,28,.22))}

/* The caption under the pile: the hovered or focused disk's one line, else the site's. */
.disk-caption{margin:0;padding-top:30px;min-height:calc(2 * 1.45em + 30px);text-align:center;font-size:18px;line-height:1.45;color:#555}
.caption-text{display:inline-block;max-width:44em;text-wrap:balance;transition:opacity .2s}
.caption-text.is-swapping{opacity:0}
.caption-text strong{font-weight:500;color:#111}

/* Disks drop onto the pile once, in a short stagger. */
@media (prefers-reduced-motion:no-preference){
  .disk{animation:disk-drop .7s cubic-bezier(.2,.8,.2,1) backwards}
  .disk:nth-child(2){animation-delay:.06s}
  .disk:nth-child(3){animation-delay:.12s}
  .disk:nth-child(4){animation-delay:.18s}
  .disk:nth-child(5){animation-delay:.24s}
  .disk:nth-child(n+6){animation-delay:.3s}
}
@keyframes disk-drop{from{opacity:0;transform:translate(var(--dx),calc(var(--dy) - 26px)) scale(1.05)}}

@media(max-width:800px){#suph-home-concept{padding:0 30px 28px}}
@media(max-width:640px){
  /* Two across, main set only (the second designs aren't even downloaded). Short screens (landscape phones,
     split screen) keep a floor and scroll instead. */
  .disk-alt{display:none}
  .disk-pile{--disk-w:max(120px,min(calc((100vw - 64px) / 1.95),calc((100svh - 230px) / 4.1),240px));max-width:calc(var(--disk-w) * 2.2)}
  #suph-main{padding-top:20px}
  .disk-caption{font-size:16px;padding-top:20px}
  /* Phones have no room beside a full-width pile, so the case is a wide-screen flourish. */
  .disk-pile{left:0}
  .disk-case{display:none}
}
@media(max-width:440px){
  #suph-home-concept{padding:0 16px 20px}#suph-home-concept .suph-header{padding:26px 0}
  .disk-pile{--disk-w:max(120px,min(calc((100vw - 32px) / 1.95),calc((100svh - 230px) / 4.1),240px))}
}
@media(prefers-reduced-motion:reduce){
  .disk,.disk *,.disk *::before,.disk *::after{animation:none!important;transition:none!important}
  .disk-body{transform:translateY(var(--y)) rotate(var(--r))!important}
}