/* ==========================================================================
   Syntropise · The Cabinet · You already have a philosophy
   An essay you can handle. Every sheet is printed twice: the ink is what
   people say; underneath, in coral, is what's quietly assumed, and it only
   shows under the lamp. Darkness is printed as an ink halftone; the lamp's
   light eats the dots away, warms the paper and develops the coral ink.
   Everything is prefixed ph-.
   ========================================================================== */

@property --ph-dev{syntax:'<number>';inherits:false;initial-value:0}

.ph-hero,.ph-sec{--sheet:#fbf9f4;--typed:'Courier Prime',ui-monospace,Menlo,monospace}
.ph-sec{overflow-x:clip}

/* ---------- shared bits ---------- */
.ph-desk-tools[hidden],.ph-other[hidden],.ph-yours[hidden],.ph-nothing-go[hidden]{display:none!important}
.ph-head{max-width:760px;margin-bottom:clamp(30px,4vw,56px)}
.ph-no{margin:0 0 6px;font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1;color:var(--coral-ink);letter-spacing:.02em}
.ph-head .kicker{margin-bottom:2px}
.ph-k{display:block;font-size:.7rem;font-weight:640;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2)}

/* entrances: things arrive as you reach them (script adds .ph-in) */
html.js .ph-rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.js .ph-rv.ph-in{opacity:1;transform:none}

/* the coral the lamp develops */
.ph-hid{color:var(--coral-ink);text-shadow:var(--mx) var(--my) 0 rgba(245,140,138,.75)}
html.js .ph-hid{
  --ph-dev:0;
  -webkit-mask-image:radial-gradient(circle var(--lr,.1px) at var(--lx,-999px) var(--ly,-999px),#000 0,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%),linear-gradient(rgba(0,0,0,var(--ph-dev)),rgba(0,0,0,var(--ph-dev)));
          mask-image:radial-gradient(circle var(--lr,.1px) at var(--lx,-999px) var(--ly,-999px),#000 0,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%),linear-gradient(rgba(0,0,0,var(--ph-dev)),rgba(0,0,0,var(--ph-dev)));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  transition:--ph-dev 1.2s var(--ease)}
html.js .ph-hid.ph-dev{--ph-dev:.72}
html.js .ph-hid.ph-dev-full{--ph-dev:1}
html.js.ph-all-on .ph-hid,html.js .ph-hid.ph-plain{-webkit-mask-image:none;mask-image:none}

/* ---------- the stage: a sheet under a lamp ---------- */
.ph-stage{position:relative}
.ph-sheet{position:relative;isolation:isolate;overflow:hidden;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink)}
.ph-sheet>*{position:relative;z-index:2}
.ph-sheet .kicker{color:var(--ink)}
/* the type is knocked out of the dusk screen, as a printer would, so it stays crisp */
.ph-sheet .kicker,.ph-title,.ph-sheet .ph-lede:not(.ph-hid),.ph-instr,.ph-said,.ph-line dt{text-shadow:0 0 2px var(--sheet),0 0 3px var(--sheet),0 0 5px rgba(251,249,244,.9)}
.ph-dusk{position:absolute!important;z-index:1!important;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .7s var(--ease)}
.ph-glow{position:absolute!important;z-index:0!important;left:0;top:0;width:0;height:0;pointer-events:none;border-radius:50%;opacity:0;will-change:transform;
  background:radial-gradient(circle,rgba(255,250,232,1) 0,rgba(255,247,224,.96) 30%,rgba(254,236,210,.72) 50%,rgba(250,206,186,.2) 66%,rgba(249,183,178,0) 74%);transition:opacity .45s}
.ph-glow::after{content:"";position:absolute;inset:12%;border-radius:50%;background-image:var(--grain);opacity:.75}
.ph-lit .ph-glow{opacity:1}
.ph-all-on .ph-dusk{opacity:0}
.ph-all-on .ph-glow{opacity:0}
.ph-lampart{position:absolute;z-index:5;left:0;top:0;overflow:visible;pointer-events:none}
.ph-lampart .ph-l{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ph-lampart .ph-neck{fill:none;stroke:var(--ink);stroke-linecap:round}
.ph-lampart .ph-neck-in{fill:none;stroke:#fbf9f4;stroke-linecap:round}
.ph-lampart .ph-neck-c{fill:none;stroke:#f58c8a;stroke-linecap:round}
.ph-lampart .ph-coil{fill:none;stroke:var(--ink);stroke-linecap:butt;opacity:.55}
.ph-lampart .ph-bulb{fill:#fff6dc;transition:fill .3s}
.ph-lampart .ph-bulb-in{fill:#fffdf4;transition:fill .3s}
.ph-off .ph-lampart .ph-bulb{fill:#e2dacc}
.ph-off .ph-lampart .ph-bulb-in{fill:#ece6db}
.ph-lampart .ph-halo{opacity:.0;transition:opacity .4s}
.ph-lit .ph-lampart .ph-halo{opacity:.85}
.ph-grip{position:absolute;z-index:6;left:0;top:0;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:none;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.ph-grip::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--grain-c),var(--coral-2);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.ph-grip::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--ink);background:var(--sheet)}
.ph-touch .ph-lit .ph-grip{display:block}
.ph-stage-hero .ph-grip{display:none!important}
.ph-grip:active{cursor:grabbing}

/* ==== OPENING =========================================================== */
.ph-hero{min-height:min(var(--vh,100svh),980px);display:grid;align-items:center;padding:calc(var(--nav-h) + 34px) 0 56px;overflow-x:clip}
.ph-hero-in{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.ph-stage-hero{max-width:1190px;margin-inline:auto;padding-right:clamp(0px,30vw,460px)}
.ph-sheet-hero{max-width:700px;padding:clamp(30px,4.6vw,66px) clamp(26px,4.4vw,64px) clamp(30px,4vw,56px);transform:rotate(-.6deg);box-shadow:7px 7px 0 var(--coral-2)}
.ph-title{margin:20px 0 26px;font-size:clamp(2.9rem,5.6vw,5.4rem);line-height:.95;max-width:11ch}
.ph-lede{font-size:clamp(1.14rem,1.5vw,1.38rem);line-height:1.42;letter-spacing:-.01em;font-weight:420;max-width:30ch}
.ph-hid-hero{margin-top:14px;font-family:var(--serif);font-style:italic;font-weight:420;font-size:clamp(1.4rem,2.2vw,1.95rem);line-height:1.22;letter-spacing:-.01em;max-width:24ch}
.ph-instr{margin-top:30px;padding-top:18px;border-top:1.5px dashed rgba(20,19,17,.35);max-width:40ch;color:var(--ink);font-size:1.02rem;line-height:1.45}
.ph-instr span{display:block}
.ph-hero-go{margin-top:22px}

/* ==== I. THE RACK ======================================================= */
.ph-racks{display:grid;gap:clamp(56px,6vw,84px);container-type:inline-size}
.ph-rack{position:relative;--pad:clamp(14px,2vw,26px);--cg:clamp(14px,1.6vw,24px);--cw:calc((100cqi - 2 * var(--pad) - 4 * var(--cg)) / 5)}
.ph-plate{position:absolute;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:10px;padding:6px 16px 7px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(20,19,17,.45);font-size:.72rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transition:box-shadow .4s,transform .5s var(--spring)}
.ph-plate::before,.ph-plate::after{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper-2);flex:none}
.ph-slots{position:relative;z-index:1;display:flex;gap:var(--cg);align-items:flex-end;padding:0 var(--pad);min-height:300px}
.ph-ledge{position:absolute;z-index:3;left:0;right:0;bottom:0;height:62px;background:var(--grain-c),var(--coral-2);border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);pointer-events:none}
.ph-ledge::before{content:"";position:absolute;left:-2.5px;right:-2.5px;top:-11px;height:9px;border:2.5px solid var(--ink);border-bottom:0;background:var(--grain-c),var(--coral-l)}
.ph-rack::before{content:"";position:absolute;z-index:0;left:14px;right:14px;bottom:40px;top:56px;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(20,19,17,.05) 22px 23px),var(--paper-2);border:2px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0}

.ph-card{--r:0deg;--ty:0px;position:relative;flex:0 0 var(--cw);display:flex;flex-direction:column;gap:12px;min-height:270px;margin-bottom:24px;padding:24px 18px 70px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--coral-2);text-decoration:none;color:var(--ink);transform:translateY(var(--ty)) rotate(var(--r));transform-origin:50% 100%;transition:transform .55s var(--spring),box-shadow .4s,opacity .5s;-webkit-tap-highlight-color:transparent}
.ph-card::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:10px;background:var(--grain-c),var(--coral-2);border:2px solid var(--ink)}
.ph-card:nth-child(1){--r:-1.6deg}.ph-card:nth-child(2){--r:1deg;--ty:-6px}.ph-card:nth-child(3){--r:-.5deg;--ty:4px}.ph-card:nth-child(4){--r:1.5deg;--ty:-3px}.ph-card:nth-child(5){--r:-1.1deg;--ty:2px}.ph-card:nth-child(6){--r:1.3deg;--ty:-4px}
.ph-rack-a{--cg:clamp(10px,1.2vw,18px);--cw:calc((100cqi - 2 * var(--pad) - 5 * var(--cg)) / 6)}
.ph-rack-a .ph-card{padding-left:15px;padding-right:15px}
.ph-rack-a .ph-card-q{font-size:clamp(1rem,1.15vw,1.14rem)}
.ph-rack-b .ph-card:nth-child(1){--r:1.2deg;--ty:-2px}.ph-rack-b .ph-card:nth-child(2){--r:-1.3deg;--ty:3px}
.ph-card-no{font-size:.66rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-ink)}
.ph-card-q{font-family:var(--serif);font-style:italic;font-weight:420;font-size:clamp(1.06rem,1.25vw,1.22rem);line-height:1.3;letter-spacing:-.005em}
@media (hover:hover) and (pointer:fine){.ph-card:hover{--ty:-22px;--r:0deg;box-shadow:5px 7px 0 var(--coral-2)}}
.ph-card:focus-visible{--ty:-22px;--r:0deg;outline:2px solid var(--ink);outline-offset:4px}
.ph-card.ph-taken{--ty:10px;--r:0deg;background:rgba(236,230,219,.55);border:2px dashed rgba(20,19,17,.42);box-shadow:none}
.ph-card.ph-taken::before{opacity:0}
.ph-card.ph-taken .ph-card-q{opacity:.16}
.ph-card.ph-taken .ph-card-no{color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.ph-card.ph-taken:hover{--ty:4px;box-shadow:none}}
.ph-rack.ph-glowing .ph-plate{transform:translateX(-50%) translateY(-4px) rotate(-1.5deg);background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--coral-2);animation:phPlate 1.6s var(--ease) 2}
.ph-rack.ph-glowing .ph-plate::before,.ph-rack.ph-glowing .ph-plate::after{background:var(--coral-2);border-color:var(--paper)}
@keyframes phPlate{0%,100%{box-shadow:3px 3px 0 var(--coral-2),0 0 0 0 rgba(245,140,138,.7)}50%{box-shadow:3px 3px 0 var(--coral-2),0 0 0 10px rgba(245,140,138,0)}}
.ph-rack.ph-glowing .ph-card{animation:phNudge 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + .2s)}
@keyframes phNudge{0%,100%{transform:translateY(var(--ty)) rotate(var(--r))}40%{transform:translateY(calc(var(--ty) - 18px)) rotate(0deg)}}
.ph-rack.ph-dim{opacity:.42;filter:grayscale(.4);transition:opacity .6s,filter .6s}
.ph-rack{transition:opacity .6s,filter .6s}

/* the second rack is shorter: two slips, on the left, its plate under them */
.ph-rack-b{width:calc(2 * var(--cw) + var(--cg) + 2 * var(--pad));justify-self:center}

/* ==== II. UNDER THE LAMP ================================================ */
.ph-lamp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px clamp(24px,4vw,64px);max-width:none;align-items:end}
.ph-lamp-head .ph-no,.ph-lamp-head .h2{grid-column:1}
.ph-lamp-head .h2{grid-row:2}
.ph-lead{grid-column:2;grid-row:1/3;align-self:end;font-size:clamp(1.06rem,1.25vw,1.2rem);line-height:1.45;color:var(--ink-2)}
.ph-lead p+p{margin-top:4px}
.ph-lead-go{color:var(--ink);font-weight:560}
.ph-desk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0 0 22px}
.ph-cord{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:4px 18px 4px 8px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);box-shadow:3px 3px 0 var(--coral-2);font-weight:600;font-size:.92rem;transition:transform .14s var(--ease),box-shadow .14s,background .3s,color .3s}
.ph-cord:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--coral-2)}
.ph-cord-pull{position:relative;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:#ece6db;display:grid;place-items:center;transition:background .3s,box-shadow .4s}
.ph-cord-pull i{width:10px;height:10px;border-radius:50%;background:var(--ink);opacity:.25;transition:opacity .3s,transform .4s var(--spring)}
.ph-cord[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.ph-cord[aria-pressed="true"] .ph-cord-pull{background:#fff4d6;box-shadow:0 0 0 4px rgba(255,236,190,.35),0 0 18px 4px rgba(255,226,170,.75)}
.ph-cord[aria-pressed="true"] .ph-cord-pull i{opacity:1;background:#f58c8a;transform:scale(1.15)}
.ph-hint{display:none;flex:0 0 100%;margin:-4px 0 0;font-size:.84rem;color:var(--ink-2)}
.ph-touch .ph-hint{display:block}
.ph-count{display:inline-flex;align-items:center;gap:10px;font-size:.84rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ph-count-dots{display:inline-flex;gap:5px}
.ph-count-dots i{width:11px;height:11px;border-radius:50%;border:1.6px solid var(--ink);transition:background .4s,transform .5s var(--spring)}
.ph-count-dots i.ph-on{background:var(--coral-2);transform:scale(1.18);box-shadow:1.5px 1.5px 0 var(--ink)}
.ph-all{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:4px 4px;font-size:.92rem;font-weight:520}
.ph-all-track{position:relative;width:48px;height:26px;border-radius:99px;border:2px solid var(--ink);background:var(--paper-2);box-shadow:2px 2px 0 var(--coral-2);transition:background .3s}
.ph-all-track i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .4s var(--spring),background .3s}
.ph-all[aria-checked="true"] .ph-all-track{background:var(--grain-c),var(--coral-2)}
.ph-all[aria-checked="true"] .ph-all-track i{transform:translateX(22px);background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink)}

.ph-cases{position:relative}
html.js .ph-case[hidden]{display:none}
html:not(.js) .ph-case+.ph-case{margin-top:70px}
.ph-stage-main{padding-right:clamp(0px,9vw,140px)}
.ph-sheet-main{padding:clamp(28px,4vw,56px) clamp(24px,4.2vw,64px) clamp(70px,6.6vw,92px);box-shadow:7px 7px 0 var(--coral-2);cursor:default;outline-offset:6px}
.ph-sheet-main:focus-visible{outline:2px solid var(--ink)}
.ph-said{display:grid;gap:12px;margin:0 0 clamp(26px,3vw,40px)}
.ph-said-no{font-size:.7rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.ph-said q{quotes:"\201C" "\201D";font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.04;letter-spacing:-.012em;max-width:22ch;text-wrap:balance}
.ph-said q::before{content:open-quote;margin-left:-.42em}
.ph-lines{margin:0;display:grid}
.ph-line{display:grid;grid-template-columns:minmax(7.5rem,10rem) minmax(0,1fr) 22px;align-items:baseline;gap:6px 22px;padding:16px 0 15px;border-top:1.5px solid rgba(20,19,17,.85)}
.ph-line:last-child{border-bottom:1.5px solid rgba(20,19,17,.85)}
.ph-line dt{font-size:.72rem;font-weight:660;letter-spacing:.17em;text-transform:uppercase;color:var(--ink);padding-top:.5em}
.ph-line dd{margin:0;min-height:1.3em;font-family:var(--serif);font-style:italic;font-weight:440;font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.18;letter-spacing:-.01em;background-image:radial-gradient(circle,rgba(20,19,17,.28) 1px,transparent 1.4px);background-size:7px 7px;background-position:0 calc(100% + 2px);background-repeat:repeat-x;padding-bottom:6px}
.ph-line::after{content:"";align-self:center;width:16px;height:16px;border-radius:50%;border:1.6px dashed rgba(20,19,17,.45);transition:background .4s,border .3s,transform .5s var(--spring)}
.ph-all-on .ph-line::after,.ph-line.ph-found::after{border:1.6px solid var(--ink);background:var(--grain-c),var(--coral-2);transform:scale(1.15);box-shadow:1.5px 1.5px 0 var(--ink)}
html:not(.js) .ph-line::after{display:none}
/* three of three: the house stamp */
.ph-stamp{position:absolute!important;z-index:4!important;right:clamp(22px,4.4vw,70px);bottom:clamp(12px,1.6vw,20px);display:grid;justify-items:center;padding:7px 16px 6px;border:4px double var(--coral-2);border-radius:7px;color:var(--coral-2);transform:rotate(-6deg) scale(.9);opacity:0;pointer-events:none;-webkit-mask:var(--speck) 0 0/120px 120px;mask:var(--speck) 0 0/120px 120px}
.ph-stamp b{font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:700;letter-spacing:.22em;text-transform:uppercase;line-height:1}
.ph-stamp small{font-size:.62rem;font-weight:620;letter-spacing:.16em;text-transform:uppercase;margin-top:4px}
.ph-done .ph-stamp{opacity:.94}
.ph-done.ph-thump .ph-stamp{animation:phStamp .55s cubic-bezier(.2,.9,.25,1.25) both}
@keyframes phStamp{0%{opacity:0;transform:rotate(-6deg) scale(1.9)}55%{opacity:1;transform:rotate(-6deg) scale(.82)}100%{opacity:.94;transform:rotate(-6deg) scale(.9)}}

.ph-after{display:flex;flex-wrap:wrap;gap:0 .35em;margin:clamp(26px,3vw,40px) 0 0;max-width:46ch;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.3;color:var(--ink)}
.ph-after-3{color:var(--coral-ink)}
html.js .ph-after span{opacity:.0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.js .ph-after.ph-say span{opacity:1;transform:none}
html.js .ph-after.ph-say span:nth-child(2){transition-delay:.35s}
html.js .ph-after.ph-say span:nth-child(3){transition-delay:.7s}
html.js .ph-after.ph-quiet span{opacity:.32;transform:none}

.ph-then{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,52px);align-items:start}
.ph-who{position:relative;margin:0;display:grid;grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr);gap:clamp(16px,2vw,26px);align-items:start;padding:20px clamp(18px,2vw,26px) 22px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-.5deg)}
.ph-who::before{content:"";position:absolute;top:-9px;left:28px;width:14px;height:14px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
.ph-por{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border:2px solid var(--ink);border-radius:99px 99px 4px 4px;background:var(--coral-2);box-shadow:3px 3px 0 var(--coral-2)}
.ph-por img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(1.06);mix-blend-mode:multiply}
.ph-who figcaption{display:grid;gap:10px;align-content:start}
.ph-who-t{font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.5;color:var(--ink-2)}
.ph-who-t b{font-family:var(--display);font-weight:700;font-size:1.42em;line-height:1;color:var(--ink);letter-spacing:-.005em}
.ph-who-t em{color:var(--ink)}
.ph-who-t a{color:var(--coral-ink);text-underline-offset:3px}
.ph-obj{justify-self:start;margin-top:2px;font-size:.86rem;font-weight:560;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--coral-2);padding-bottom:1px;transition:border-color .3s}
.ph-obj:hover{border-color:var(--ink)}
.ph-poss{position:relative;padding:22px clamp(18px,2vw,28px) 26px;background:var(--grain-c),var(--coral-2);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(.6deg)}
.ph-poss .ph-k{color:var(--ink)}
.ph-poss-t{margin-top:12px;font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.12;letter-spacing:-.01em}
.ph-poss::before{content:"";position:absolute;z-index:1;right:30px;top:-9px;width:14px;height:14px;border-radius:50%;background:var(--sheet);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
html.js .ph-then>*{transition:opacity .7s var(--ease),transform .8s var(--spring)}
html.js .ph-case:not(.ph-arrived) .ph-who{opacity:0;transform:translateY(22px) rotate(-3deg)}
html.js .ph-case:not(.ph-arrived) .ph-poss{opacity:0;transform:translateY(22px) rotate(3deg)}
html.js .ph-case.ph-arrived .ph-poss{transition-delay:.15s}

.ph-other{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1.5px dashed rgba(20,19,17,.3)}
.ph-other-k{flex:0 0 100%;font-size:.7rem;font-weight:640;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.ph-chip{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;padding:8px 14px 8px 11px;background:var(--sheet);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--coral-2);font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.2;text-decoration:none;transition:transform .3s var(--spring),box-shadow .2s,background .3s}
.ph-chip b{font-family:var(--sans);font-style:normal;font-weight:660;font-size:.7rem;letter-spacing:.12em;color:var(--coral-ink)}
.ph-chip:hover{transform:translateY(-2px);box-shadow:3px 4px 0 var(--coral-2)}
.ph-chip[aria-current="true"]{background:var(--ink);color:var(--paper);box-shadow:2px 2px 0 var(--coral-2)}
.ph-chip[aria-current="true"] b{color:var(--coral-l)}
.ph-chip-sep{width:1.5px;height:26px;background:rgba(20,19,17,.25);margin:0 4px}

/* ==== III. NOTHING HAS TO BE WRONG ======================================= */
.ph-nothing-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:center}
.ph-hammock{width:100%;max-width:440px;height:auto;margin:0 auto;overflow:visible}
.ph-hammock .ph-ln{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ph-hammock .ph-ln.thin{stroke-width:2}
.ph-qm{transform-box:view-box;transform-origin:190px 170px;animation:phSnooze 4.6s ease-in-out infinite}
@keyframes phSnooze{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.02,1.035)}}
.ph-qm-t{font-family:var(--display);font-weight:700;font-size:118px;fill:var(--ink)}
.ph-qm-c{fill:#f58c8a}
.ph-zz text{font-family:var(--display);font-weight:700;font-size:28px;fill:var(--coral-ink);animation:phZ 3.6s ease-in-out infinite;opacity:0}
.ph-zz .z2{font-size:21px;animation-delay:.9s}.ph-zz .z3{font-size:17px;animation-delay:1.8s}
@keyframes phZ{0%{opacity:0;transform:translate(6px,8px)}25%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-8px,-10px)}}
.ph-hm-sway{transform-box:view-box;transform-origin:190px 74px;animation:phSway 6s ease-in-out infinite}
@keyframes phSway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
.ph-nothing .h2{margin-top:0}
.ph-beats-p{margin-top:clamp(22px,2.6vw,34px);display:grid;gap:12px;max-width:34ch;font-size:clamp(1.12rem,1.4vw,1.32rem);line-height:1.42}
.ph-beats-p .ph-strong{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.05;margin-top:10px}
.ph-hl{background:linear-gradient(transparent 58%,rgba(245,140,138,.55) 58%,rgba(245,140,138,.55) 92%,transparent 92%);padding:0 .1em}
.ph-nothing-go{margin-top:26px}
.ph-nothing.ph-early{padding-top:clamp(20px,3vw,40px)}
.ph-paused .ph-qm,.ph-paused .ph-zz text,.ph-paused .ph-hm-sway{animation-play-state:paused}

/* ==== IV. IT GOES ROUND ================================================= */
.ph-round-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;grid-template-areas:"head loop" "tim loop";gap:0 clamp(28px,4vw,72px);align-items:start}
.ph-round-head{grid-area:head;margin-bottom:24px}
.ph-loop{grid-area:loop;position:relative;width:100%;max-width:640px;justify-self:end;aspect-ratio:1}
.ph-loop-ring{position:absolute;inset:0}
.ph-track{width:100%;height:100%;overflow:visible}
.ph-track .ph-tr-band{fill:none;stroke:url(#gl);stroke-linecap:round}
.ph-track .ph-tr-ink{fill:none;stroke:var(--ink);stroke-width:2.2}
.ph-track .ph-tr-lap{fill:none;stroke:url(#gc);stroke-linecap:butt}
.ph-track .ph-tr-old{fill:none;stroke:url(#gc);opacity:0;transition:opacity 1.4s}
.ph-track .ph-tr-dot-c{fill:#f58c8a}
.ph-track .ph-tr-dot-i{fill:var(--ink)}
.ph-track .ph-tr-lab{font-family:var(--sans);font-weight:680;font-size:10.2px;letter-spacing:.13em;fill:var(--ink)}
.ph-track .ph-tr-lapn{font-size:11px;font-weight:660;letter-spacing:.18em;text-transform:uppercase;fill:var(--ink-3)}
.ph-stop{position:absolute;z-index:3;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2.5px solid var(--ink);background:var(--sheet);box-shadow:3px 3px 0 var(--coral-2);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.15rem;transition:transform .45s var(--spring),background .3s,color .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.ph-stop:hover{transform:scale(1.08)}
.ph-stop[aria-current="true"]{background:var(--ink);color:var(--paper);transform:scale(1.14)}
.ph-stop.ph-stop-again{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:1.05rem;box-shadow:2px 2px 0 var(--coral-2)}
.ph-beats{list-style:none;margin:0;padding:0}
html.js .ph-loop .ph-beats{position:absolute;left:50%;top:50%;width:58%;transform:translate(-50%,-50%);display:grid}
html.js .ph-beat{grid-area:1/1;align-self:center;text-align:center;opacity:0;pointer-events:none;user-select:none;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
html.js .ph-beat.ph-cur{opacity:1;pointer-events:auto;user-select:auto;transform:none;transition:opacity .6s var(--ease) .1s,transform .7s var(--ease) .1s}
html:not(.js) .ph-beat+.ph-beat{margin-top:22px}
html:not(.js) .ph-beat-t{margin-left:0}
.ph-beat-n{margin:0 0 4px;font-family:var(--display);font-weight:300;font-size:1.3rem;line-height:1;color:var(--coral-ink)}
html.js .ph-loop .ph-beat-n{display:none}
.ph-beat-h{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.04;letter-spacing:-.01em}
.ph-beat-t{margin:14px auto 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.38;color:var(--ink-2);max-width:32ch}
.ph-beat-q{color:var(--ink)}
.ph-beat-q cite{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:.68rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.ph-beat-again .ph-beat-h{color:var(--coral-ink)}
.ph-loop-play{position:absolute;z-index:4;right:2%;bottom:1%;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:2px 12px 2px 6px;border:2px solid var(--ink);border-radius:99px;background:var(--sheet);font-size:.78rem;font-weight:600;box-shadow:2px 2px 0 var(--coral-2)}
.ph-loop-play svg{width:22px;height:22px}
.ph-tim{grid-area:tim;align-self:end;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 20px;align-items:center;max-width:520px;margin-top:clamp(20px,3vw,40px)}
.ph-tim-ph{display:block;width:76px;height:76px;border-radius:50%;overflow:hidden;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--coral-2);background:var(--coral-2)}
.ph-tim-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply}
.ph-tim-t{font-family:var(--serif);font-style:italic;font-size:clamp(1.18rem,1.6vw,1.45rem);line-height:1.3}
.ph-tim-t span{display:block}
.ph-tim-t span+span{color:var(--ink-2)}
.ph-tim-go{grid-column:1/-1;margin-top:6px}

/* ==== V. WHAT BECOMES POSSIBLE ========================================== */
.ph-world{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.ph-world-print{position:relative;padding:clamp(10px,1.4vw,16px);background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--coral-2);transform:rotate(-.5deg)}
.ph-world-art{position:relative;aspect-ratio:3/2;overflow:hidden;border:1.5px solid var(--ink);background:var(--sheet)}
.ph-world-art svg,.ph-world-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-states{display:grid;gap:14px}
.ph-state{position:relative;display:grid;gap:8px;padding:18px 20px 20px 52px;border:2px solid var(--ink);background:var(--sheet);box-shadow:3px 3px 0 var(--coral-2);text-align:left;transition:background .4s,color .4s,transform .45s var(--spring),box-shadow .3s}
.ph-state::before{content:"";position:absolute;left:18px;top:21px;width:18px;height:18px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);transition:background .3s,box-shadow .3s}
.ph-state[aria-pressed="true"]{background:var(--ink);color:var(--paper);transform:translateX(-4px)}
.ph-state[aria-pressed="true"]::before{background:var(--coral-2);box-shadow:inset 0 0 0 3px var(--ink)}
.ph-state-k{font-size:.72rem;font-weight:660;letter-spacing:.17em;text-transform:uppercase}
.ph-state-t{font-family:var(--serif);font-style:italic;font-size:clamp(1.12rem,1.5vw,1.36rem);line-height:1.3}
.ph-state:not([aria-pressed="true"]):hover{transform:translateY(-2px)}

.ph-changes{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,72px);margin-top:clamp(64px,8vw,110px);align-items:start}
.ph-changes-lead{position:sticky;top:calc(var(--nav-h) + 40px);font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.01em;max-width:16ch}
.ph-change-list{list-style:none;margin:0;padding:0;display:grid}
.ph-change-list li{position:relative;padding:14px 0 14px 42px;border-top:1.5px solid rgba(20,19,17,.8);font-family:var(--serif);font-style:italic;font-size:clamp(1.22rem,1.8vw,1.62rem);line-height:1.25}
.ph-change-list li:last-child{border-bottom:1.5px solid rgba(20,19,17,.8)}
.ph-change-list li::before{content:"";position:absolute;left:4px;top:22px;width:16px;height:16px;border-radius:50%;background:var(--coral-2);box-shadow:2px 1.6px 0 -1px var(--ink)}
.ph-dev{transition:color 1.6s .5s var(--ease),text-shadow 1.6s .5s}
html.js .ph-change-list li:not(.ph-in) .ph-dev{color:rgba(161,63,57,.08);text-shadow:none}
html.js .ph-change-list li.ph-in .ph-dev{color:var(--coral-ink);text-shadow:var(--mx) var(--my) 0 rgba(245,140,138,.75)}

.ph-honest{position:relative;max-width:640px;margin:clamp(64px,8vw,110px) 0 0 auto}
.ph-honest-tab{position:relative;z-index:1;display:inline-block;margin:0 0 -2px 22px;padding:7px 14px 6px;background:var(--grain-c),var(--coral-2);border:2px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;font-size:.72rem;font-weight:660;letter-spacing:.18em;text-transform:uppercase}
.ph-honest-card{padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px);background:var(--sheet);background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(245,140,138,.32) 33px 34px),var(--grain);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:rotate(.4deg);font-family:var(--typed);font-size:clamp(.98rem,1.15vw,1.08rem);line-height:34px;color:var(--ink)}
.ph-honest-card p+p{margin-top:0}
.ph-honest-last{color:var(--coral-ink);font-weight:700}

/* ==== VI. TWO DOORS ===================================================== */
.ph-doors{display:grid;grid-template-columns:repeat(2,minmax(0,430px));gap:clamp(26px,5vw,80px)}
.ph-door-unit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}
.ph-door{position:relative;display:block;aspect-ratio:3/4;color:var(--ink);text-decoration:none;perspective:1400px;-webkit-tap-highlight-color:transparent}
.ph-door-frame{position:absolute;inset:0;border:2.5px solid var(--ink);border-bottom:0;border-radius:200px 200px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23141311' stroke-width='1.6'/%3E%3C/svg%3E"),var(--ink-2);overflow:hidden;box-shadow:7px 7px 0 var(--ink)}
.ph-door-frame::after{content:"";position:absolute;left:-30px;right:-30px;bottom:-2px;height:14px;background:var(--grain-c),var(--coral-l);border-top:2.5px solid var(--ink)}
.ph-door-glow{position:absolute;inset:8px 8px 0;border-radius:192px 192px 0 0;background:radial-gradient(ellipse 70% 60% at 62% 88%,#fffbea 0,#fff1cf 30%,#fbd6bb 58%,rgba(245,140,138,.9) 100%);opacity:0;transition:opacity .5s}
.ph-door-leaf{position:absolute;z-index:1;inset:8px 8px 0;transform-style:preserve-3d;border:2.5px solid var(--ink);border-bottom:0;border-radius:192px 192px 0 0;background:var(--grain-c),var(--coral-2);transform-origin:0 50%;transition:transform 1s cubic-bezier(.3,1.25,.42,1);box-shadow:inset -8px 0 0 -4px rgba(20,19,17,.12)}
.ph-door-org .ph-door-leaf{background:var(--grain-c),var(--coral-l)}
.ph-panel{position:absolute;left:13%;right:13%;border:2px solid var(--ink);background:rgba(20,19,17,.06)}
.ph-panel.p1{top:9%;height:34%;border-radius:120px 120px 3px 3px}
.ph-panel.p2{bottom:6%;height:24%;border-radius:3px}
.ph-knob{position:absolute;right:5.5%;top:60%;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ink);background:var(--sheet);box-shadow:2px 2px 0 var(--ink)}
.ph-notice{position:absolute;z-index:3;left:9%;right:15%;top:30%;display:grid;gap:10px;padding:18px 18px 18px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(20,19,17,.4);transform:rotate(-1.2deg);transform-origin:50% 0;transition:transform .9s cubic-bezier(.3,1.25,.42,1)}
.ph-door-org .ph-notice{transform:rotate(1deg)}
.ph-notice::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.35)}
.ph-notice-h{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1}
.ph-notice-t{font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.46;color:var(--ink-2)}
.ph-notice-go{justify-self:start;margin-top:4px;white-space:nowrap;font-weight:620;font-size:.95rem;border-bottom:2px solid var(--coral-2);padding-bottom:1px}
.ph-door:hover .ph-door-leaf,.ph-door:focus-visible .ph-door-leaf{transform:rotateY(28deg)}
.ph-door:hover .ph-door-glow,.ph-door:focus-visible .ph-door-glow{opacity:1}
.ph-door:hover .ph-notice-go,.ph-door:focus-visible .ph-notice-go{border-color:var(--ink)}
.ph-door:focus-visible{outline:none}
.ph-door:focus-visible .ph-door-frame{outline:3px solid var(--ink);outline-offset:5px}
.ph-bell{display:grid;justify-items:center;gap:6px;padding:8px 2px;margin-bottom:22px;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ph-bell-plate{position:relative;display:grid;place-items:center;width:46px;height:64px;border:2.5px solid var(--ink);border-radius:23px;background:var(--sheet);background-image:var(--grain);box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease)}
.ph-bell-plate i{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ink);background:var(--grain-c),var(--coral-2);box-shadow:inset 0 -3px 0 rgba(20,19,17,.25);transition:transform .14s var(--ease)}
.ph-bell:hover .ph-bell-plate{transform:rotate(-6deg)}
.ph-bell:active .ph-bell-plate i,.ph-bell.ph-rung .ph-bell-plate i{transform:scale(.82)}
.ph-bell.ph-rung .ph-bell-plate{animation:phRing .5s var(--ease)}
@keyframes phRing{20%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}100%{transform:none}}
.ph-bell-t{font-size:.66rem;font-weight:660;letter-spacing:.2em;text-transform:uppercase}

.ph-free{margin-top:clamp(40px,5vw,64px);display:grid;gap:14px;justify-items:start;max-width:1060px}
.ph-free-t{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.01em}
.ph-free-a{color:inherit;text-decoration:none;background:linear-gradient(transparent 62%,rgba(245,140,138,.7) 62%,rgba(245,140,138,.7) 94%,transparent 94%);padding:0 .06em;transition:background-size .3s}
.ph-free-a:hover{background:linear-gradient(transparent 0,rgba(245,140,138,.7) 0,rgba(245,140,138,.7) 94%,transparent 94%)}
.ph-yours{position:relative;display:flex;align-items:baseline;gap:12px;max-width:560px;padding:12px 18px 13px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--coral-2);transform:rotate(-.8deg)}
.ph-yours::before{content:"";position:absolute;top:-8px;left:22px;width:12px;height:12px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink)}
.ph-yours-no{flex:none;font-size:.66rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.ph-yours-q{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.32}
.ph-small{margin-top:8px;font-size:.92rem;color:var(--ink-2)}
.ph-small a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--coral-2);text-decoration-thickness:2px}

/* ==== RESPONSIVE ======================================================== */
@media (max-width:980px){
  .ph-hero{min-height:0;padding-top:calc(var(--nav-h) + 8px)}
  .ph-notice{left:7%;right:12%;padding:14px 14px 15px}
  .ph-notice-t{font-size:.9rem}
  .ph-stage-hero{padding-right:0;padding-top:clamp(96px,22vw,140px)}
  .ph-lamp-head{grid-template-columns:1fr}
  .ph-lamp-head .h2{grid-row:auto}
  .ph-lead{grid-column:1;grid-row:auto;margin-top:16px}
  .ph-stage-main{padding-right:0;padding-top:64px}
  .ph-then{grid-template-columns:1fr}
  .ph-nothing-in{grid-template-columns:1fr}
  .ph-nothing-art{order:2;max-width:360px}
  .ph-round-in{grid-template-columns:1fr;grid-template-areas:"head" "loop" "tim"}
  .ph-loop{justify-self:center}
  .ph-world{grid-template-columns:1fr}
  .ph-changes{grid-template-columns:1fr}
  .ph-changes-lead{position:static}
  .ph-honest{margin-left:0}
}
@media (max-width:1000px){
  .ph-racks{gap:46px;container-type:normal}
  .ph-rack{width:auto!important}
  .ph-rack::before,.ph-ledge{display:none}
  .ph-plate{position:static;transform:none;display:inline-flex;margin:0 0 18px}
  .ph-rack.ph-glowing .ph-plate{transform:rotate(-1.5deg)}
  .ph-slots{display:grid;gap:12px;padding:0;min-height:0}
  .ph-card{min-height:0;margin:0;padding:22px 18px 18px;flex-direction:row;align-items:baseline;gap:14px;transform-origin:50% 50%}
  .ph-card-no{flex:none;min-width:3.6em}
  .ph-card:nth-child(n){--r:0deg;--ty:0px}
  .ph-card:nth-child(odd){--r:-.5deg}.ph-card:nth-child(even){--r:.5deg}
  .ph-card.ph-taken{--ty:0px;--r:0deg}
}
@media (max-width:760px){
  .ph-desk-tools{gap:12px 14px}
  .ph-all{margin-left:0}
  .ph-line{grid-template-columns:minmax(0,1fr) 20px;gap:6px 12px;padding:14px 0 13px}
  .ph-line dt{grid-column:1;padding-top:0}
  .ph-line dd{grid-column:1}
  .ph-line::after{grid-column:2;grid-row:1/3}
  .ph-who{grid-template-columns:92px minmax(0,1fr)}
  .ph-doors{grid-template-columns:1fr}
  .ph-door{min-height:0;max-width:420px}
  html.js .ph-loop .ph-beats{position:static;width:auto;transform:none;margin-top:18px}
  .ph-loop{aspect-ratio:auto;max-width:440px}
  .ph-loop-ring{position:relative;aspect-ratio:1}
  .ph-track .ph-tr-lab,.ph-track .ph-tr-lapn{display:none}
  .ph-beat-t{max-width:34ch}
}
@media (max-width:520px){
  .ph-title{font-size:clamp(2.5rem,11.4vw,3.4rem)}
  .ph-sheet-hero{transform:rotate(-.4deg);box-shadow:5px 5px 0 var(--coral-2)}
  .ph-sheet-main{box-shadow:5px 5px 0 var(--coral-2)}
  .ph-said q{font-size:clamp(1.55rem,7vw,2rem)}
  .ph-line dd{font-size:clamp(1.25rem,5.6vw,1.5rem)}
  .ph-who{grid-template-columns:1fr;transform:none}
  .ph-por{width:120px}
  .ph-poss{transform:none}
  .ph-door-unit{grid-template-columns:minmax(0,1fr) 54px;gap:10px}
  .ph-notice{left:9%;right:9%;top:27%;padding:15px 14px 15px}
  .ph-notice-h{font-size:1.4rem}
  .ph-honest-card{line-height:30px;background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(245,140,138,.32) 29px 30px),var(--grain)}
}

/* ==== REDUCED MOTION ==================================================== */
@media (prefers-reduced-motion:reduce){
  html.js .ph-rv{opacity:1;transform:none}
  .ph-qm,.ph-zz text,.ph-hm-sway{animation:none}
  .ph-zz text{opacity:1}
  html.js .ph-after span{opacity:1;transform:none}
}

/* ==== PRINT ============================================================= */
@media print{.ph-dusk,.ph-glow,.ph-lampart,.ph-grip,.ph-desk-tools,.ph-other{display:none!important}html.js .ph-hid{-webkit-mask-image:none;mask-image:none}html.js .ph-case[hidden]{display:block}}
.ph-own{margin-top:clamp(18px,2.4vw,28px)!important;font-weight:700}