@import url("../holo/card.css");
:root{--ph-white:#efede7;--ph-grey:#a4a5a5;--ph-line:#67696b;--ph-black:#101112;--ph-light-line:#b8b8b1;color-scheme:dark;font-family:'Space Grotesk',Arial,sans-serif;color:var(--ph-white);background:#000}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0}button,select,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}a:hover{text-decoration:underline}img{max-width:100%;display:block}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid currentColor;outline-offset:5px}button:disabled{opacity:.35;cursor:default}h1,h2,h3,p{margin:0}button[hidden],[hidden]{display:none!important}
.ph-skip{position:fixed;z-index:200;top:12px;left:12px;transform:translateY(-160%);padding:14px;background:var(--ph-white);color:var(--ph-black)}.ph-skip:focus{transform:none}.ph-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:20px max(24px,calc((100vw - 1240px)/2));background:#080909ee;border-bottom:1px solid #ffffff1a;backdrop-filter:blur(16px)}.ph-brand{display:flex;gap:12px;align-items:center;font:400 25px/1 'Anton',sans-serif;white-space:nowrap}.ph-brand>span>span{color:#858584}.ph-brand svg{width:28px;height:34px}.ph-header nav{display:flex;flex-wrap:wrap;gap:18px 28px;font:500 13px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase}.ph-header nav a{padding:6px 0}.ph-eyebrow{font:400 12px/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--ph-grey);text-transform:uppercase}.ph-hero{padding:90px 24px 88px;text-align:center;background:radial-gradient(ellipse at 50% 25%,#ffffff0d,transparent 65%)}.ph-hero h1{font:400 clamp(68px,10vw,140px)/.91 'Anton',sans-serif;letter-spacing:-.02em;margin:26px 0}.ph-hero h1 span,.ph-section h2 span{color:#858584}.ph-intro{font-size:19px;line-height:1.65;max-width:570px;margin:0 auto 28px;color:#b5b6b7}.ph-text-link{display:inline-flex;gap:30px;align-items:center;font:500 13px/1.6 'IBM Plex Mono',monospace;letter-spacing:.07em}.ph-text-link span{font-size:20px}
.ph-section{max-width:1288px;padding:85px 24px;margin:auto;scroll-margin-top:12px}.ph-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:36px}.ph-section h2{font:400 clamp(38px,4.7vw,68px)/1.02 'Anton',sans-serif;letter-spacing:-.01em;margin-top:16px}.ph-section-head>p,.ph-section-head>div>p:not(.ph-eyebrow){color:#b5b6b7;font-size:16px;line-height:1.65;max-width:410px}.ph-language-key{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;border-block:1px solid var(--ph-line);padding:16px 0;font:400 13px/1.6 'IBM Plex Mono',monospace;margin-bottom:28px;color:#b5b6b7}.ph-language-key a{margin-left:auto;color:var(--ph-white)}.ph-set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.ph-set-card{border:1px solid var(--ph-line);background:var(--ph-black);min-width:0}.ph-card-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:18px 22px;font:400 12px/1.5 'IBM Plex Mono',monospace;color:#b5b6b7;border-bottom:1px solid #ffffff20}.ph-pair{display:grid;grid-template-columns:1fr 1fr;min-height:275px}.ph-pair-side{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:22px 12px;background:radial-gradient(ellipse at 50% 70%,#ffffff0b,transparent 65%);min-width:0;transition:background .2s ease}.ph-pair-side:hover{background-color:#ffffff08;text-decoration:none}.ph-pair-side:last-child{background:#deded6;color:var(--ph-black);border-left:1px solid var(--ph-line)}.ph-pair-side:last-child:hover{background:#efede7}.ph-pair-side .ph-picture{height:clamp(150px,18vw,214px);max-width:100%;filter:drop-shadow(5px 12px 10px #0005)}.ph-pair-side>span:last-child{font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.08em}.ph-card-copy{border-top:1px solid var(--ph-line);padding:22px}.ph-card-copy h3{font:400 clamp(26px,2.5vw,36px)/1.13 'Anton',sans-serif;text-transform:uppercase}.ph-card-copy p{font-size:14px;line-height:1.5;color:#b5b6b7;margin:12px 0 18px}.ph-card-footer{display:flex;justify-content:space-between;gap:18px;align-items:center}.ph-card-footer a:first-child{font:500 13px/1.4 'IBM Plex Mono',monospace;text-decoration:underline}.ph-card-footer a:last-child{font:500 12px/1.4 'IBM Plex Mono',monospace;color:#b5b6b7}.ph-fine{font-size:13px;line-height:1.6;color:#a4a5a5;margin-top:22px}.ph-picture{display:block;position:relative;height:100%;width:auto;aspect-ratio:var(--ph-ratio);overflow:hidden;flex:none}.ph-picture img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;user-select:none;pointer-events:none}.ph-crop-storm img{width:121.8182%;height:112.0767%;left:-10.9091%;top:-5.9819%}.ph-crop-regular img{height:100.3718%}.ph-crop-caption img{height:117.0732%}.ph-picture.ph-image-error{display:grid;place-content:center;background:#353739;color:#efede7;padding:12px;font:14px/1.5 'IBM Plex Mono',monospace;text-align:center}
.ph-how,.ph-pulls{border-top:1px solid #ffffff25}.ph-how-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}.ph-machine-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ph-machine-gallery figure{margin:0;min-width:0}.ph-machine-gallery img{width:100%;height:auto;border:1px solid var(--ph-line);background:#101112}.ph-machine-gallery figcaption{font:12px/1.6 'IBM Plex Mono',monospace;color:var(--ph-grey);margin-top:12px}.ph-steps{padding:0;margin:0;list-style:none}.ph-steps li{display:flex;gap:22px;padding:23px 0;border-top:1px solid var(--ph-line)}.ph-steps li:first-child{padding-top:0;border-top:0}.ph-steps li>span{font:400 25px/1 'Anton',sans-serif;color:#858584}.ph-steps h3{font-size:21px;line-height:1.3;margin-bottom:8px}.ph-steps p,.ph-trust-grid p{font-size:16px;line-height:1.65;color:#b5b6b7}.ph-trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px}.ph-trust-grid article{border-top:1px solid var(--ph-line);padding:25px 0}.ph-trust-grid h3{font-size:21px;line-height:1.3;margin-bottom:12px}.ph-pulls .ph-button{margin-top:22px}.ph-footer{border-top:1px solid var(--ph-line);padding:40px max(24px,calc((100vw - 1240px)/2)) 48px;display:flex;justify-content:space-between;gap:40px}.ph-footer .ph-eyebrow{margin-top:14px}.ph-footer>div:last-child{text-align:right;max-width:540px}.ph-footer>div>a:not(.ph-brand){display:inline-block;margin:0 0 14px 22px;font-size:14px}.ph-footer p:not(.ph-eyebrow){font-size:12px;color:#a4a5a5;line-height:1.7;margin:12px 0}
.ph-button{display:inline-flex;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:11px 16px;border:1px solid var(--ph-line);border-radius:0;color:inherit;background:transparent;font:500 14px/1.35 'IBM Plex Mono',monospace;text-align:center;gap:6px}.ph-button:hover{background:#ffffff15;text-decoration:none}.ph-light-button{background:var(--ph-white);color:var(--ph-black)}.ph-light-button:hover{background:#d2d2cf}.ph-dark-button{background:var(--ph-black);color:var(--ph-white);border-color:var(--ph-black)}.ph-dark-button:hover{background:#343638}.ph-dialog{color-scheme:light;position:fixed;inset:0;width:min(1120px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:0;margin:auto;border:1px solid var(--ph-line);background:var(--ph-white);color:var(--ph-black);overflow:auto;box-shadow:0 30px 100px #0009}.ph-dialog::backdrop{background:#080909e8;backdrop-filter:blur(5px)}.ph-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 28px;border-bottom:1px solid #101112}.ph-dialog-header h2{font:400 clamp(28px,3.3vw,44px)/1.08 'Anton',sans-serif;text-transform:uppercase;margin-top:9px}.ph-dialog .ph-eyebrow{color:#67696b}.ph-close{font:300 30px/1 Arial,sans-serif;flex:none}.ph-dialog-selector{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 28px;border-bottom:1px solid #101112;font-size:14px}.ph-dialog-selector label{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.ph-dialog select{max-width:100%;padding:10px 30px 10px 12px;min-height:44px;background:var(--ph-white);color:var(--ph-black);border:1px solid var(--ph-line);font:14px/1.4 'IBM Plex Mono',monospace}.ph-dialog-selector>span{font:13px/1.5 'IBM Plex Mono',monospace}.ph-dialog-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,1fr)}.ph-stage-column{min-width:0;display:flex;flex-direction:column;background:var(--ph-black);color:var(--ph-white)}.ph-stage{display:flex;align-items:center;justify-content:center;height:450px;perspective:1200px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;background:radial-gradient(ellipse at 50% 50%,#ffffff0e,transparent 65%),radial-gradient(#77777724 .75px,transparent .75px);background-size:auto,10px 10px}.ph-stage.ph-dragging{cursor:grabbing}.ph-pack-art{height:330px;max-width:70%;transform-style:preserve-3d;transform:rotateX(-6deg) rotateY(-15deg);filter:drop-shadow(12px 22px 18px #0009)}.ph-pack-art .ph-picture{max-width:100%}.ph-gesture{text-align:center;color:#b5b6b7;font:12px/1.5 'IBM Plex Mono',monospace;margin:0 16px 14px}.ph-controls{display:flex;justify-content:center;gap:8px}.ph-description{font-size:16px;line-height:1.65;color:#b5b6b7;padding:24px 28px}.ph-set-navigation{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--ph-line);margin:0 28px 26px;padding-top:22px;margin-top:auto}.ph-set-navigation .ph-button{font-size:13px}.ph-details{border-left:1px solid #101112;display:flex;flex-direction:column;gap:18px;padding:24px;min-width:0}.ph-view-tabs{display:flex;border:1px solid #101112}.ph-view-tabs .ph-button{border:0;flex:1}.ph-view-tabs .ph-button[aria-pressed=true]{background:var(--ph-black);color:var(--ph-white)}.ph-detail-art{height:300px;display:flex;justify-content:center;padding:4px 0}.ph-detail-art .ph-picture{max-width:100%;filter:drop-shadow(3px 9px 7px #0003)}.ph-details h3{font-size:26px;line-height:1.16;letter-spacing:-.03em}.ph-details dl{margin:0;font-size:14px}.ph-details dl>div{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--ph-light-line);padding:9px 0}.ph-details dt{color:#50514e}.ph-details dd{margin:0;text-align:right}.ph-details .ph-fine{margin:0;color:#50514e}.ph-details .ph-dark-button{margin-top:auto}.ph-official-link{font:12px/1.6 'IBM Plex Mono',monospace;text-decoration:underline}.ph-empty-message{padding:20px}
@media(max-width:900px){.ph-header{padding-inline:20px;gap:18px}.ph-header nav{gap:12px 18px;font-size:12px}.ph-section-head{align-items:flex-start;flex-direction:column;gap:24px}.ph-how-layout{grid-template-columns:1fr;gap:32px}.ph-machine-gallery{max-width:520px}.ph-steps{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.ph-steps li:first-child{padding-top:23px;border-top:1px solid var(--ph-line)}.ph-dialog-layout{grid-template-columns:minmax(0,1fr) minmax(290px,1fr)}.ph-stage{height:410px}.ph-pack-art{height:290px}}
@media(max-width:620px){html{scroll-padding-top:135px}.ph-header{align-items:flex-start;flex-direction:column;gap:10px;padding:14px 18px}.ph-brand{font-size:23px}.ph-brand svg{width:23px;height:27px}.ph-header nav{width:100%;justify-content:space-between;gap:6px;font-size:12px;letter-spacing:0}.ph-hero{padding:66px 20px}.ph-hero h1{font-size:clamp(64px,16vw,96px)}.ph-intro{font-size:17px}.ph-section{padding:58px 18px}.ph-section h2{font-size:clamp(34px,9vw,52px)}.ph-section-head{margin-bottom:28px}.ph-language-key{font-size:12px;gap:12px 18px}.ph-language-key a{margin-left:0;width:100%}.ph-set-grid{grid-template-columns:minmax(0,1fr);gap:20px}.ph-card-meta{padding:15px 18px}.ph-card-copy{padding:20px 18px}.ph-card-copy h3{font-size:29px}.ph-card-footer{flex-wrap:wrap}.ph-pair-side .ph-picture{height:clamp(155px,50vw,205px)}.ph-pair{min-height:275px}.ph-trust-grid,.ph-steps{grid-template-columns:1fr}.ph-machine-gallery{gap:12px}.ph-footer{padding:35px 18px;flex-direction:column;gap:28px}.ph-footer>div:last-child{text-align:left}.ph-footer>div>a:not(.ph-brand){margin-left:0;margin-right:20px}.ph-dialog{width:100%;max-height:100dvh;height:100dvh;border:0;margin:0}.ph-dialog-header{padding:18px;gap:16px}.ph-dialog-header h2{font-size:31px}.ph-dialog-selector{padding:12px 18px;flex-direction:column;align-items:stretch;gap:10px}.ph-dialog-selector label{display:block}.ph-dialog select{width:100%;margin-top:6px}.ph-dialog-layout{display:flex;flex-direction:column}.ph-stage{height:350px}.ph-pack-art{height:270px}.ph-description{padding:22px 20px}.ph-set-navigation{margin:0 20px 22px}.ph-details{border-left:0;border-top:1px solid var(--ph-line);padding:22px 20px}.ph-detail-art{height:320px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.ph-dialog::backdrop{backdrop-filter:none}}

.ph-details .pk-holo-controls{margin-top:-2px;margin-bottom:0}.ph-detail-art:has(.pk-holo){padding:12px 0}

.ph-brand{display:block;flex:none}.ph-brand img{width:274px;height:auto;max-width:100%}.ph-header{padding-top:8px;padding-bottom:8px;background:#131415}.ph-footer{background:#131415}.ph-footer .ph-brand+p{display:none}@media(max-width:620px){.ph-brand img{width:246px}.ph-header{gap:4px;padding-top:5px;padding-bottom:12px}}

.ph-header{flex-wrap:wrap}

/* Actual sealed-pack artwork frames the headline; the central shade protects type. */
.ph-hero{position:relative;isolation:isolate;overflow:hidden;background:#080909}
.ph-hero-art{position:absolute;inset:0;z-index:-1;pointer-events:none;user-select:none}
.ph-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,transparent 38%,#08090935 100%),linear-gradient(90deg,#08090920 0%,#08090960 18%,#080909ed 37%,#080909ed 63%,#08090960 82%,#08090920 100%)}
.ph-hero-pack{position:absolute;display:block;height:390px;filter:brightness(.85) saturate(.85) drop-shadow(12px 18px 22px #0009)}
.ph-hero-pack .ph-picture{height:100%;width:auto}
.ph-hero-pack-1{left:calc(50% - 645px);top:120px;transform:rotate(-23deg)}
.ph-hero-pack-2{left:calc(50% - 445px);top:56px;height:425px;transform:rotate(-12deg)}
.ph-hero-pack-3{left:calc(50% + 240px);top:146px;height:390px;transform:rotate(13deg)}
.ph-hero-pack-4{left:calc(50% + 445px);top:25px;height:410px;transform:rotate(24deg)}
.ph-hero h1{text-shadow:0 4px 28px #000b}.ph-hero h1 span{color:#b1b1ae}.ph-hero .ph-eyebrow{color:#b8b8b5}.ph-hero .ph-intro{color:#c5c5c2}
@media(min-width:1500px){.ph-hero-pack-1{left:calc(50% - 700px)}.ph-hero-pack-4{left:calc(50% + 510px)}}
@media(max-width:620px){.ph-hero-pack-1,.ph-hero-pack-4{display:none}.ph-hero-pack-2{left:-92px;top:64px;height:330px;transform:rotate(-15deg)}.ph-hero-pack-3{left:auto;right:-85px;top:155px;height:310px;transform:rotate(16deg)}.ph-hero-art::after{background:linear-gradient(0deg,#000 0%,transparent 55%,#08090925 100%),linear-gradient(90deg,#08090965 0%,#080909d9 32%,#080909e6 50%,#080909d9 68%,#08090965 100%)}}

/* Slow, staggered pack motion frames the original typography. */
.ph-hero{padding-top:64px;padding-bottom:94px;border-bottom:1px solid #ffffff0d}
.ph-hero h1{margin-bottom:24px}
.ph-hero>.ph-text-link{border-bottom:1px solid #ffffff60;padding:10px 0 12px;transition:border-color .2s ease}
.ph-hero>.ph-text-link:hover{border-color:#efede7;text-decoration:none}
.ph-hero-pack .ph-picture{animation:ph-pack-float 8s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused;transform:translate3d(0,0,0)}
.ph-hero-pack-1 .ph-picture{animation-duration:9.2s;animation-delay:-2.3s}
.ph-hero-pack-2 .ph-picture{animation-duration:7.6s;animation-delay:-.8s}
.ph-hero-pack-3 .ph-picture{animation-duration:8.5s;animation-delay:-4.1s}
.ph-hero-pack-4 .ph-picture{animation-duration:10s;animation-delay:-6s}
.ph-hero-moving .ph-hero-pack .ph-picture{animation-play-state:running}
@keyframes ph-pack-float{0%,100%{transform:translate3d(0,5px,0) rotate(-.5deg)}50%{transform:translate3d(0,-11px,0) rotate(.5deg)}}
.ph-motion-control{position:absolute;right:24px;bottom:22px;min-height:44px;padding:10px 14px;border:1px solid #ffffff28;border-radius:3px;color:#b8b8b5;background:#080909a8;font:400 12px/1.5 'IBM Plex Mono',monospace;transition:border-color .2s ease,color .2s ease}
.ph-motion-control:hover{border-color:#ffffff75;color:#efede7}
@media(max-width:620px){.ph-hero{padding-top:48px;padding-bottom:92px}.ph-motion-control{right:18px;bottom:16px}.ph-hero-pack .ph-picture{animation-duration:9s}}
@media(prefers-reduced-motion:reduce){.ph-hero-pack .ph-picture{animation:none;transform:none}.ph-motion-control{display:none}}

/* Mystery Slab shares the pack cards’ grid, artwork scale, borders and copy spacing. */
.ph-set-grid{grid-auto-rows:1fr}
.ph-set-card{display:flex;flex-direction:column}
.ph-card-copy{display:flex;flex-direction:column;flex:1}
.ph-card-footer{margin-top:auto}
.ph-slab-card{scroll-margin-top:16px}
.ph-crop-slab img{width:270%;height:116.3636%;left:-29.697%;top:-10%}
.ph-slab-holo::before,.ph-slab-holo::after{inset:29% 9% 5.4%;border-radius:3%}
.ph-card-copy .ph-slab-note{font-size:12px;line-height:1.6;margin:0 0 18px;color:var(--ph-grey)}
.ph-slab-card .ph-card-footer>span{font:400 12px/1.5 'IBM Plex Mono',monospace;color:var(--ph-grey)}
@media(max-width:620px){.ph-set-grid{grid-auto-rows:auto}.ph-header nav{justify-content:flex-start;gap:4px 16px}}

/* ── 2026-09-08 phone pass (Toro's review on iPhone) ─────────────────────── */
/* Dialog stage: drop-shadow on the same element as preserve-3d, inside an
   overflow:hidden box, renders nothing on iOS WebKit — the pack was invisible
   on phones. Nothing here needs a 3D context (one plane rotates), so flatten
   it, move the shadow to the picture, and size the stage from --ph-ratio
   instead of relying on aspect-ratio to resolve a percentage height. */
.ph-pack-art{transform-style:flat;filter:none;width:calc(330px * var(--ph-ratio, .55))}
.ph-pack-art .ph-picture{width:100%;height:100%;filter:drop-shadow(12px 22px 18px #0009)}
.ph-detail-art .ph-picture{width:calc(300px * var(--ph-ratio, .72))}
@media(max-width:620px){
  .ph-pack-art{width:calc(270px * var(--ph-ratio, .55))}
  .ph-detail-art .ph-picture{width:calc(320px * var(--ph-ratio, .72))}
  /* Header: the official signature, smaller, on one row; the nav on a single
     row that scrolls sideways instead of wrapping into an orphaned line. */
  html{scroll-padding-top:104px}
  .ph-header{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;padding:12px 16px 0}
  .ph-header .ph-brand img{width:196px}
  .ph-header nav{width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0 20px;padding:10px 0 12px;font-size:12px;letter-spacing:.06em;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .ph-header nav::-webkit-scrollbar{display:none}
  .ph-header nav a{white-space:nowrap;flex:none}
  .ph-header nav a:last-child{padding-right:28px}
}

/* "Newly added" rides in the meta row's first span, so the two-item flex that
   every set card uses is unchanged. Borrowed wholesale from the existing type
   system — IBM Plex Mono, uppercase, a hairline border, the same near-white as
   .ph-button. The page has no accent colour anywhere and this does not add one. */
.ph-new{display:inline-block;margin-left:10px;padding:1px 7px 2px;border:1px solid #ffffff38;color:var(--ph-white);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
@media(max-width:620px){.ph-new{margin-left:8px;padding:1px 6px 2px;font-size:10px}.ph-new-rest{display:none}}

/* A set nothing is holding: the control stays where it was and in the same type,
   but drops to the muted grey the page already uses for secondary copy, loses
   the ↗ and the underline, and takes no pointer. It has no href either, so it
   is not focusable and not clickable. */
.ph-unstocked{color:#77787a;text-decoration:none;cursor:default}
.ph-card-footer a:first-child.ph-unstocked{text-decoration:none}
.ph-button.ph-unstocked{background:transparent;color:#77787a;border-color:#ffffff30}
.ph-button.ph-unstocked:hover{background:transparent}
.ph-dialog .ph-button.ph-unstocked{border-color:#1011122e;color:#8a8b88}