/* /pizza-hut/ brand guide 2.0 (2026-10-20, owner: "the LGBTQ+ page is much nicer"): photo cards, category tiles,
   spotlights with a live list, recommendation rail, Promoter bands, the history reel. Loaded after pizza-hut.css;
   tools/dennys_derive.py turns ph- into dn- for /dennys/. CSP-safe, reduced motion handled in pizza-hut.css. */
/* photo on every card */
.ph-store{padding-top:0;overflow:hidden}
.ph-store-photo{display:block;position:relative;margin:0 -18px 0;aspect-ratio:3/2;overflow:hidden;background:#2a160e}
.ph-store-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ph-store:hover .ph-store-photo img{transform:scale(1.05)}
.ph-illus{position:absolute;left:10px;bottom:10px;padding:.2em .55em;border-radius:6px;background:#000a;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em}
.ph-store-roof{position:relative;top:auto;left:auto;right:auto;margin:0 0 14px;height:12px}
.ph-house{display:none}
.ph-store h3{padding-right:0}
.ph-store.is-open .ph-store-city::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fbf71;margin-left:8px;box-shadow:0 0 0 3px #2fbf7133;vertical-align:1px}
.ph-store.is-classic::after{top:14px;right:14px;z-index:2}
/* tiles */
.ph-tiles-wrap{padding-top:34px}
.ph-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ph-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:16px;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;box-shadow:0 16px 30px -22px #1d0b09}
.ph-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.ph-tile:hover img,.ph-tile:focus-visible img{transform:scale(1.07)}
.ph-tile-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#1d0b09ee 0%,#1d0b0966 55%,#1d0b0922 100%)}
.ph-tile b{font:800 2.4rem/1 Georgia,serif;color:var(--ph-glow)}
.ph-tile span{font-weight:700;line-height:1.25}
.ph-tile:first-child .ph-tile-shade{background:linear-gradient(0deg,#7c0d14ee,#7c0d1444)}
.ph-tile-chip{margin:0;display:inline-flex;align-items:center;gap:8px;padding:.35em .5em .35em .9em;border-radius:999px;background:var(--ph-red);color:#fff;font-weight:700;width:max-content;max-width:100%}
.ph-tile-chip button{border:0;background:#fff3;color:#fff;border-radius:50%;width:24px;height:24px;cursor:pointer;font:inherit;line-height:1}
/* spotlights */
.ph-spot{padding:clamp(40px,6vw,80px) 0;background:var(--ph-paper)}
.ph-spot.is-dark{background:linear-gradient(180deg,var(--ph-deep),var(--ph-night));color:#fff}
.ph-spot-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.ph-spot.is-flip .ph-spot-photo{order:2}
.ph-spot-photo{margin:0;position:relative}
.ph-spot-photo img{width:100%;height:clamp(280px,40vw,480px);object-fit:cover;border-radius:24px;display:block;box-shadow:0 30px 60px -30px #000}
.ph-spot-photo figcaption{font-size:.72rem;color:var(--ph-muted);margin-top:6px}
.ph-spot.is-dark .ph-spot-photo figcaption{color:#d9c3b3}
.ph-spot-photo figcaption a{color:inherit}
.ph-spot-copy .eyebrow{color:var(--ph-red)}
.ph-spot.is-dark .ph-spot-copy .eyebrow{color:var(--ph-glow)}
.ph-spot-copy h2{font:700 clamp(1.8rem,3.6vw,2.8rem)/1.08 Georgia,serif;margin:.2em 0 .4em}
.ph-spot-copy p{line-height:1.6;font-size:1.04rem}
.ph-spot.is-dark .ph-spot-copy p{color:#f1dfd0}
.ph-spot.is-dark .ph-ref{background:#ffffff22;color:var(--ph-glow)}
.ph-spot-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.ph-spot-list a{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:14px;background:#fff;border:1px solid #f0e2d1;color:var(--ph-ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.ph-spot.is-dark .ph-spot-list a{background:#ffffff12;border-color:#ffffff22;color:#fff}
.ph-spot-list a:hover{transform:translateX(4px);box-shadow:0 10px 24px -16px #000}
.ph-spot-list img{width:72px;height:48px;object-fit:cover;border-radius:9px;display:block}
.ph-spot-list b{display:block;font-weight:800}
.ph-spot-list small{color:var(--ph-muted);font-size:.84rem}
.ph-spot.is-dark .ph-spot-list small{color:#d9c3b3}
.ph-spot-list em{font-style:normal;font-size:.78rem;font-weight:700;padding:.25em .6em;border-radius:999px;background:#f4ebe0;color:#5a4637;white-space:nowrap}
.ph-spot-list em:empty{display:none}
.ph-spot-list em.is-open{background:#2fbf7122;color:#1d7a47}
.ph-spot.is-dark .ph-spot-list em{background:#ffffff1a;color:#f3e3d4}
.ph-spot.is-dark .ph-spot-list em.is-open{background:#2fbf7140;color:#c8ffe0}
.ph-spot-more{display:inline-block;margin-top:14px;font-weight:800;color:var(--ph-red)}
.ph-spot.is-dark .ph-spot-more{color:var(--ph-glow)}
/* promoter bands and in-list slots */
.ph-promo-band{padding-top:26px;padding-bottom:6px}
.ph-stores .qd-promo{grid-column:1/-1}
/* recommendations */
.ph-rec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ph-rec{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #f0e2d1;color:var(--ph-ink);text-decoration:none;box-shadow:0 14px 30px -24px #3b2216;transition:transform .2s ease}
.ph-rec:hover{transform:translateY(-4px)}
.ph-rec img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ph-rec-copy{padding:14px 16px 18px;display:grid;gap:4px}
.ph-rec-copy small{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:800;color:var(--ph-red)}
.ph-rec-copy b{font:700 1.15rem/1.25 Georgia,serif}
.ph-rec-copy span{color:var(--ph-muted);font-size:.92rem;line-height:1.45}
/* history reel */
.ph-reel-wrap{position:relative}
.ph-reel{list-style:none;margin:0;padding:6px 4px 22px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,320px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin}
.ph-reel-item{scroll-snap-align:start;background:#fff;border-radius:20px;padding:18px;border:1px solid #f0e2d1;box-shadow:0 16px 30px -24px #3b2216;display:flex;flex-direction:column;gap:6px;position:relative}
.ph-reel-item.is-michigan{background:linear-gradient(160deg,#fff4dc,#fff);border-color:var(--ph-amber)}
.ph-reel-item.is-michigan::before{content:"Michigan";position:absolute;right:14px;top:14px;z-index:1;font:800 .66rem/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#b07a12;background:#fff4dc;padding:.35em .6em;border-radius:999px}
.ph-reel-item figure{margin:-18px -18px 6px}
.ph-reel-item figure img{width:100%;height:170px;object-fit:cover;border-radius:20px 20px 0 0;display:block}
.ph-reel-year{font:800 2.2rem/1 Georgia,serif;color:var(--ph-red)}
.ph-reel-item h3{margin:0;font:700 1.08rem/1.3 Georgia,serif}
.ph-reel-item p{margin:0;line-height:1.55;font-size:.95rem}
.ph-reel-credit{font-size:.66rem;color:var(--ph-muted)}
.ph-reel-credit a{color:inherit}
.ph-reel-btn{position:absolute;top:40%;z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:var(--ph-red);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 10px 24px -10px #000}
.ph-reel-btn.is-prev{left:-10px}.ph-reel-btn.is-next{right:-10px}
@media (max-width:900px){.ph-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-spot-inner{grid-template-columns:1fr}.ph-spot.is-flip .ph-spot-photo{order:0}.ph-rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-reel-btn{display:none}}
@media (max-width:560px){.ph-rec-grid{grid-template-columns:1fr}.ph-tile{min-height:120px}}
.ph-spot-inner{align-items:start}.ph-spot-photo{position:sticky;top:90px}

/* Finder dock 2.1 (owner 2026-10-21: the old filter box was ugly): one sticky full-width control dock above the map
   and the list. Native radios, checkbox and select are hidden behind a sliding segment, a toggle switch and sort pills. */
.ph-finder{grid-template-columns:1fr}
.ph-maps{max-width:1100px;width:100%;margin:0 auto;box-sizing:border-box}
.ph-dock{position:sticky;top:56px;z-index:19;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:6px 0 24px;padding:14px;border-radius:28px;
 background:color-mix(in srgb,var(--ph-paper) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
 border:1px solid #ecdcc8;box-shadow:0 22px 48px -30px #5a0b10cc,0 2px 0 #fff inset}
.ph-dock-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;min-width:0}
.ph-dock>*,.ph-q,.ph-dock-controls{min-width:0}
.ph-q{position:relative;display:flex;align-items:center;height:58px;padding:0 10px 0 54px;border-radius:999px;background:#fff;border:2px solid #ead6bf;transition:border-color .2s,box-shadow .2s;cursor:text}
.ph-q:focus-within{border-color:var(--ph-red);box-shadow:0 0 0 5px color-mix(in srgb,var(--ph-red) 16%,transparent)}
.ph-q-icon{position:absolute;left:19px;top:50%;width:22px;height:22px;margin-top:-11px;fill:none;stroke:var(--ph-red);stroke-width:2.6;stroke-linecap:round}
.ph-q input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 1.08rem/1.2 inherit;font-family:inherit;color:var(--ph-ink);padding:0}
.ph-q input::placeholder{color:#a8907c;font-weight:500}
.ph-q input::-webkit-search-cancel-button{display:none}
.ph-q-clear{flex:0 0 34px;height:34px;border:0;border-radius:50%;background:#f3e6d6;color:var(--ph-ink);font:700 1.25rem/1 inherit;cursor:pointer;transition:background .2s}
.ph-q-clear:hover{background:var(--ph-red);color:#fff}
.ph-dock .ph-count{margin:0;white-space:nowrap;font-weight:600;color:var(--ph-muted);font-size:.95rem}
.ph-dock .ph-count b{display:inline-block;margin-right:.18em;font:800 2rem/1 Georgia,"Times New Roman",serif;color:var(--ph-red);vertical-align:-.12em;animation:ph-count-pop .35s ease}
@keyframes ph-count-pop{from{transform:scale(.7);opacity:.3}to{transform:none;opacity:1}}
.ph-dock-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ph-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin:0;padding:4px;border:0;border-radius:999px;background:#f1e3d1;min-width:0}
.ph-seg input,.ph-switch input,.ph-pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ph-seg label{position:relative;z-index:1;padding:.62em 1.2em;border-radius:999px;font-weight:700;font-size:.95rem;text-align:center;white-space:nowrap;cursor:pointer;color:var(--ph-ink);transition:color .25s}
.ph-seg label b{font-weight:800;opacity:.55;margin-left:.15em}
.ph-seg input:checked+label{color:#fff}
.ph-seg input:checked+label b{opacity:.85}
.ph-seg input:focus-visible+label{outline:3px solid color-mix(in srgb,var(--ph-red) 45%,transparent);outline-offset:2px}
.ph-seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ph-red);box-shadow:0 8px 18px -8px var(--ph-red);transition:transform .32s cubic-bezier(.3,1.35,.5,1)}
.ph-seg input:nth-of-type(2):checked~.ph-seg-thumb{transform:translateX(100%)}
.ph-switch{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:.42em .95em .42em .45em;border-radius:999px;background:#fff;border:2px solid #ead6bf;font-weight:700;font-size:.95rem;cursor:pointer;transition:border-color .2s,background .2s}
.ph-switch-track{position:relative;flex:0 0 44px;height:26px;border-radius:999px;background:#d9c6b1;transition:background .25s}
.ph-switch-track span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0003;transition:transform .28s cubic-bezier(.3,1.35,.5,1)}
.ph-switch input:checked+.ph-switch-track{background:#1f9d55}
.ph-switch input:checked+.ph-switch-track span{transform:translateX(18px)}
.ph-switch input:focus-visible+.ph-switch-track{outline:3px solid #1f9d5566;outline-offset:2px}
.ph-switch:has(input:checked){border-color:#1f9d55;background:#effaf3}
.ph-live{display:inline-block;width:8px;height:8px;margin-right:.45em;border-radius:50%;background:#1f9d55;vertical-align:.05em;animation:ph-live 1.8s ease-out infinite}
@keyframes ph-live{0%{box-shadow:0 0 0 0 #1f9d5599}80%,100%{box-shadow:0 0 0 7px #1f9d5500}}
.ph-sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.ph-sortbar-label{margin-right:4px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ph-muted)}
.ph-pill{position:relative;display:inline-flex;align-items:center;gap:.35em;padding:.5em .95em;border-radius:999px;border:1.5px solid #ead6bf;background:#fff;color:var(--ph-ink);font:inherit;font-weight:700;font-size:.88rem;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.ph-pill:hover{border-color:var(--ph-red);transform:translateY(-1px)}
.ph-pill:has(input:checked),.ph-pill.is-on{background:var(--ph-ink);border-color:var(--ph-ink);color:#fff}
.ph-pill:has(input:focus-visible),.ph-pill:focus-visible{outline:3px solid color-mix(in srgb,var(--ph-red) 45%,transparent);outline-offset:2px}
.ph-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.ph-pill.is-near{color:var(--ph-red);border-color:color-mix(in srgb,var(--ph-red) 35%,#fff)}
.ph-pill.is-near.is-on{background:var(--ph-red);border-color:var(--ph-red);color:#fff}
.ph-pill.is-busy svg{animation:ph-pin-hop .7s ease-in-out infinite}
@keyframes ph-pin-hop{50%{transform:translateY(-3px)}}
.ph-dock .ph-tile-chip{justify-self:start}
@media (max-width:900px){
 .ph-dock{position:static;padding:12px;border-radius:24px}
 .ph-dock-top{grid-template-columns:minmax(0,1fr);gap:8px}
 .ph-dock .ph-count{order:2}
 .ph-sortbar{margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-12px;padding-right:12px;width:calc(100% + 12px);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .ph-sortbar::-webkit-scrollbar{display:none}
}
@media (max-width:560px){
 .ph-q{height:54px}
 .ph-seg label{padding:.6em .95em}
 .ph-switch{padding-right:.8em}
}
@media (prefers-reduced-motion:reduce){.ph-seg-thumb,.ph-switch-track span{transition:none}.ph-live,.ph-dock .ph-count b,.ph-pill.is-busy svg{animation:none}}
