/* A DECK YOU COULD PICK UP.
 *
 * Jade asked for a mockup of the physical deck, and the honest way to make one
 * is to build it out of the real thing: the real card art, the real ticket
 * face the cleft deck prints, the real step and card count read out of the
 * manifest. Nothing here is drawn by hand except the cardboard.
 *
 * Tuck box proportions are a real deck's: 63x88mm cards in a 66x92x20mm box,
 * so the front is 0.72 as wide as it is tall and the spine is 0.3 of the
 * front's width. Getting that wrong is what makes a mockup look like a
 * drawing of a box instead of a box. */
:root {
  --card: #fdf7ea;
  --ink: #1d1a16;
  --rule: #d9c9ae;
  --accent: #d2451f;
  --board: #e8dcc6;
  --boardside: #cbbb9c;
  --boardtop: #f2e9d6;
  /* the flat field the picture book style is drawn on */
  --sky: #63d0f5;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 0%, #f7f1e4 0%, #e6dac4 100%);
  font-family: Geist, system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.table { min-height: 100%; display: grid; place-items: center; padding: 40px 24px; }
.scene { position: relative; perspective: 1400px; }
.scene.one { width: 700px; height: 470px; }

/* THREE BOXES STANDING TOGETHER, which is the picture a single box cannot
   take: one box is a product, three is a range. They step back and to the
   right so the row reads as depth rather than as a line of stickers, and the
   one in front is the one whose face you are meant to read. */
.scene.three { width: 880px; height: 470px; }
.scene.three .box {
  /* A box is 232 wide and its spine adds 70 more, so a 168 step left under a
     hundred pixels of the next box showing and its title unreadable. */
  left: calc(22px + var(--i) * 214px);
  top: calc(92px - var(--i) * 22px);
  transform: rotateX(7deg) rotateY(-24deg) scale(calc(1 - var(--i) * 0.07));
  z-index: calc(10 - var(--i));
}
.scene.three .front { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07),
                                  0 30px 54px -24px rgba(60, 44, 20, 0.8); }

/* TWO BOXES, which is the cleft row. Same stagger, same angle, same 214px
   step as three: pushed further apart they stop overlapping, and a spine with
   nothing in front of it is foreshortened hard enough that CLEFT DECK reads as
   a smudge. The overlap is not just composition, it is what hides the spine
   and makes the pair read as a range rather than two objects on a shelf. */
.scene.two { width: 600px; height: 470px; }
.scene.two .box {
  /* 214 is right for three, where each box only has to clear the one behind
     it. With two the front box landed on the S of STEP 29, and the step is
     the only thing telling one cleft box from another. 234 clears the line
     and still overlaps enough to cover the spine. */
  left: calc(26px + var(--i) * 234px);
  top: calc(92px - var(--i) * 22px);
  transform: rotateX(7deg) rotateY(-24deg) scale(calc(1 - var(--i) * 0.07));
  z-index: calc(10 - var(--i));
}
.scene.two .front { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07),
                                0 30px 54px -24px rgba(60, 44, 20, 0.8); }

/* the shadow the whole arrangement casts, drawn once under everything */
.cast {
  position: absolute; left: 8%; right: 10%; bottom: 44px; height: 38px;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(90, 70, 40, 0.42) 0%, rgba(90, 70, 40, 0) 70%);
  filter: blur(3px); z-index: 0;
}

/* MARK: the box */

.box {
  position: absolute; left: 40px; top: 10px;
  --i: 0;
  width: 232px; height: 322px;          /* 0.72 : 1, a real tuck box */
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-24deg);
  z-index: 2;
}
.face { position: absolute; inset: 0; backface-visibility: hidden; }

.front {
  background: var(--board);
  border-radius: 4px;
  padding: 20px 18px 16px;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07),
              0 26px 50px -22px rgba(60, 44, 20, 0.75);
  /* board is not paper: a faint tooth stops it reading as a flat rectangle */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 3px);
}
.brand span {
  font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; color: #8a7a5e;
}
/* A FIXED HEIGHT, so the cover window below it starts in the same place on
   every box in the row. Titles differ in length; a product line should not
   differ in shape because of it. */
.name {
  margin-top: 10px; line-height: 0.88;
  height: 104px; overflow: hidden;
}
.name b {
  display: block; font-weight: 900; letter-spacing: -0.03em;
}
.name.short b { font-size: 38px; }
.name.long b { font-size: 27px; line-height: 0.94; }
.name.xlong b { font-size: 20px; line-height: 1.0; }
.name b:last-child { color: var(--accent); }
.foot {
  margin-top: 12px; display: flex; justify-content: space-between;
  font-family: 'Space Mono', monospace; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; color: #7d6d53;
}

/* HINGED ON THE EDGE IT SHARES WITH THE FRONT. Hinging it on its own right
   edge instead put the whole panel a box-depth off to the side, so it stood
   taller than the front it was supposed to be attached to and cropped the card
   count printed on the corner. */
.spine {
  width: 70px;                           /* 0.3 of the front, a real depth */
  left: 100%; right: auto;
  transform: rotateY(90deg); transform-origin: left center;
  background: var(--boardside);
  border-radius: 4px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 18px 0 16px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.spine span {
  writing-mode: vertical-rl; font-size: 12px; font-weight: 900;
  letter-spacing: 0.18em; color: #6d5c42;
}
/* The step number runs the same way as the name. Set horizontally it showed
   edge on through the box's rotation as a red sliver that read as a rendering
   fault. It earns its place: twenty nine of these stand on a shelf together
   and step 7 has to be findable by its spine. */
.spine i {
  writing-mode: vertical-rl;
  font-style: normal; font-family: 'Space Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--accent);
}
.top {
  height: 70px; top: 0;
  transform: rotateX(90deg); transform-origin: center top;
  /* the sliver of box lid, which is the thing that says this is an object and
     not a rectangle with a stripe down the side */
  background: var(--boardtop); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* MARK: the cards spilling out in front of it */

.hand { position: absolute; left: 286px; top: 92px; z-index: 3; }
.hand .c {
  position: absolute; width: 150px;
  background: var(--card); border-radius: 4px; padding: 7px 7px 0;
  box-shadow: 0 18px 34px -16px rgba(60, 44, 20, 0.85),
              0 0 0 1px rgba(0, 0, 0, 0.09);
  transform-origin: 50% 90%;
}
.hand .im { aspect-ratio: 1; overflow: hidden; background: #efe6d3; }
.hand .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hand .b {
  margin-top: 7px; padding: 7px 3px 9px;
  border-top: 2px dashed var(--rule);
  display: flex; align-items: baseline; gap: 6px;
}
.hand .b em {
  font-style: normal; font-weight: 800; font-size: 15px; color: var(--ink);
}
.hand .b i {
  font-style: normal; font-weight: 800; font-size: 15px; color: var(--accent);
}

@media (max-width: 680px) {
  /* SPECIFICITY, NOT INTENT. `.scene` cannot beat `.scene.one`, so this
     rule was ignored and the hero stage stayed 700px wide inside a 390px
     phone, which made the whole page scroll sideways and clipped the
     shelf. Every variant is named so the override actually applies. */
  .scene, .scene.one, .scene.two, .scene.three {
    width: 340px; height: 420px; transform: scale(0.82);
    transform-origin: top center;
  }
  .scene.two .box, .scene.three .box { left: calc(10px + var(--i) * 96px); }
  /* THE SPILLED HAND HUNG OFF THE RIGHT. It is absolutely positioned at
     left:286 with 150px cards, so the composition is really 440 wide and
     a 340 stage cut the last card in half. Narrower cards, pulled in, and
     the box moves left to make room for them. */
  .scene.one .box { left: 8px; }
  .hand { left: 150px; top: 120px; }
  .hand .c { width: 112px; }
  .table { overflow-x: hidden; }
  html, body { overflow-x: hidden; }
}


/* THE WHOLE SHELF.
   ?all=1 prints every deck we have as a flat box front. The three-quarter
   view that sells one box turns eighty two of them into a pile, so in this
   mode the box stops being a 3D object: no rotation, no spine, no lid,
   just the printed front at real tuck-box proportions. */
.table:has(.wall){display:block;padding:32px 24px 48px}
body:has(.shelf) .table{min-height:0;padding:clamp(24px,4vw,56px) 24px 8px}
.scene.wall{position:static;width:100%;justify-self:stretch;
  height:auto;perspective:none;
  max-width:min(1500px,100%);margin:0 auto;padding:8px 0 40px}
.wallhead{display:flex;align-items:baseline;gap:14px;margin:34px 2px 16px;
  font-family:Geist,system-ui,sans-serif;font-size:26px;font-weight:900;
  letter-spacing:-.03em;color:var(--ink)}
.wallhead:first-child{margin-top:6px}
.wallhead em{font-style:normal;font-family:'Space Mono',monospace;font-size:10px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a7a5e}
.wallgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:clamp(12px,1.5vw,22px)}
.wall .box{position:static;width:100%;height:auto;aspect-ratio:232/322;
  transform:none;transform-style:flat}
.wall .spine,.wall .top{display:none}
.wall .face{position:static}
.wall .front{position:absolute;inset:0;padding:13px 12px 11px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),
             0 14px 26px -14px rgba(60,44,20,.6)}
.wall .box{position:relative}
.wall .name{height:64px;margin-top:7px}
.wall .name.short b{font-size:24px}
.wall .name.long b{font-size:17px}
.wall .name.xlong b{font-size:13px}
.wall .brand span{font-size:7px;letter-spacing:.18em}
.wall .foot{margin-top:8px;font-size:6.5px;letter-spacing:.1em}
@media (max-width:640px){
  .wallgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .wallhead{font-size:20px}
}


/* THE BOX IS THE COLOUR THE ART IS DRAWN ON.
   Every picture book card sits on a flat sky blue, and the box was cream
   with a cream mount around the picture, so each one had two frames inside
   another frame. One colour, and the picture runs edge to edge in its
   window with nothing behind it. */
.wall .front{background:var(--sky);background-image:none}
.wall .brand span{color:rgba(10,40,55,.6)}
.wall .foot{color:rgba(10,40,55,.72)}
.wall .name b:last-child{color:var(--accent)}


/* THE SHELF UNDER THE HERO. The scene above it is a fixed size stage with
   a perspective on it; this is an ordinary page section, so it gets its
   own width and its own air rather than inheriting the stage's. */
.shelf{display:block;max-width:min(1500px,100%);margin:0 auto;
  padding:8px clamp(16px,3vw,40px) clamp(40px,6vw,72px)}
.shelf .wallhead:first-child{margin-top:0;padding-top:clamp(20px,3vw,34px);
  border-top:1px solid var(--rule)}


/* ============================================================
   THE RETAIL BOX.
   Jade's reference is a trading card structure deck: art bleeding to all
   four edges, the line name in a band across the bottom of it, a small
   brand mark in a corner, and a hang tab with a euro slot punched through
   it. Everything below overrides the older window-in-cardboard front and
   applies to the single shot and the shelf alike.
   ============================================================ */
.front{padding:0;overflow:hidden;background:var(--sky);background-image:none}
.front .bleed{position:absolute;inset:0}
.front .bleed img{width:100%;height:100%;object-fit:cover;display:block}

/* the hang tab. It sits over the top of the art rather than protruding,
   which reads correctly at this size and keeps the box a clean rectangle */
.front .tab{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:38%;height:11%;background:rgba(255,255,255,.93);
  border-bottom-left-radius:7px;border-bottom-right-radius:7px;
  display:flex;align-items:center;justify-content:center;z-index:3;
  box-shadow:0 1px 0 rgba(0,0,0,.08)}
.front .tab .hole{display:block;width:34%;height:34%;min-height:5px;
  border-radius:99px;background:rgba(20,30,36,.22);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}

.front .brand{position:absolute;left:8%;top:5%;z-index:3;margin:0}
.front .brand span{font-family:'Space Mono',monospace;font-weight:700;
  font-size:7px;letter-spacing:.17em;color:#fff;
  text-shadow:0 1px 3px rgba(0,30,45,.65)}

/* the title band, over the bottom of the art */
.front .band{position:absolute;left:0;right:0;bottom:10%;z-index:3;
  padding:7% 8% 5%;
  background:linear-gradient(180deg,rgba(8,32,44,0) 0%,rgba(8,32,44,.82) 38%,
             rgba(8,32,44,.93) 100%)}
.front .name{height:auto;margin:0;line-height:.9}
.front .name b{display:block;color:#fff;font-weight:900;letter-spacing:-.03em;
  text-shadow:0 2px 6px rgba(0,20,32,.5)}
.front .name b:last-child{color:#ffd54a}
.front .name.short b{font-size:23px}
.front .name.long b{font-size:17px}
.front .name.xlong b{font-size:13px}
.front .band .sub{display:block;margin-top:5px;font-family:'Space Mono',monospace;
  font-size:7px;font-weight:700;letter-spacing:.15em;color:rgba(255,255,255,.82)}

/* the legal strip along the very bottom */
.front .foot{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
  padding:0 8% 3.5%;display:flex;justify-content:space-between;
  font-family:'Space Mono',monospace;font-size:6.5px;font-weight:700;
  letter-spacing:.12em;color:rgba(255,255,255,.72)}

/* on the shelf the boxes are smaller, so the title steps down with them */
.wall .front .name.short b{font-size:18px}
.wall .front .name.long b{font-size:13px}
.wall .front .name.xlong b{font-size:10px}
.wall .front .brand span{font-size:6px}