/* ==========================================================
   /photos/<party>/ · photo page (photos-page.php), 27 Oct 2026
   Lightroom-style web gallery on the Night gradient: cover photo,
   title block, justified rows (CSS only: each photo grows by its
   width/height ratio --r, so every row keeps one height), then the
   full-screen viewer of assets/js/smp-photos.js.
   Colours = brand tokens only: navy #052540, night #071521 (Night
   gradient), paper #f7f1e7, teal #00b0bc (focus), text-orange #c04200
   (button, white text 5.22:1), red #d72638 (Special Edition chip).
   Font: Rubik from the theme, like the rest of the site until brand v2.
   ========================================================== */
:root{--ph-h:132px;--ph-gap:4px;--ph-ease:cubic-bezier(.4,0,.2,1)}
@media (min-width:600px){:root{--ph-h:200px}}
@media (min-width:1024px){:root{--ph-h:260px;--ph-gap:6px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#071521}
body.ph{margin:0;min-height:100vh;font-family:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;color:#f7f1e7;
  background:#071521 linear-gradient(180deg,#052540 0,#071521 720px) no-repeat;
  background-image:radial-gradient(60% 420px at 85% 0,rgba(255,89,0,.18),transparent 70%),radial-gradient(50% 380px at 10% 120px,rgba(0,176,188,.14),transparent 70%),linear-gradient(180deg,#052540 0,#071521 720px)}
a{color:inherit}
img{display:block;max-width:100%}

/* cover: the first photo, never cropped (the photographer's logo sits in its corner):
   full width on phones, at most 78 % of the screen height on wide screens, centred on navy */
.ph-cover{display:flex;justify-content:center;width:100%;margin:0;padding:0;border:0;background:#052540;cursor:zoom-in}
.ph-cover img{width:auto;max-width:100%;height:auto;max-height:min(78vh,900px)}

/* title block */
.ph-head{max-width:1240px;margin:0 auto;padding:22px 16px 18px}
@media (min-width:1024px){.ph-head{padding:34px 24px 26px}}
.ph-logo{display:block;width:max-content;text-decoration:none;margin-bottom:18px}
.ph-logo__svg{display:block;width:150px;height:auto} /* the paper logo master, colour baked in; 150 px ≥ the 120 px minimum */
.ph-chip{display:inline-block;margin:0 0 10px;padding:5px 10px 4px;border-radius:999px;background:#d72638;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ph-title{margin:0;font-weight:800;font-size:clamp(28px,6vw,48px);line-height:1.1;letter-spacing:-.01em}
.ph-meta{margin:10px 0 0;font-size:15px;line-height:1.5;color:rgba(247,241,231,.78);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.ph-meta__tip{display:none}}

/* justified rows (Lightroom grid) */
.ph-grid{display:flex;flex-wrap:wrap;gap:var(--ph-gap);padding:0 var(--ph-gap);max-width:1600px;margin:0 auto}
.ph-grid::after{content:"";flex-grow:999999}
.ph-item{position:relative;display:block;margin:0;padding:0;border:0;cursor:zoom-in;font:inherit;color:inherit;flex-grow:var(--r);flex-basis:calc(var(--r) * var(--ph-h));overflow:hidden;background:#0b2238;outline:none}
.ph-item::before{content:"";display:block;padding-bottom:calc(100% / var(--r))}
.ph-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 220ms var(--ph-ease),filter 220ms var(--ph-ease)}
@media (hover:hover) and (pointer:fine){.ph-item:hover img{transform:scale(1.03);filter:brightness(1.06)}}
.ph-item:focus-visible{outline:3px solid #00b0bc;outline-offset:-3px;z-index:1}

/* next date + removal + footer */
.ph-next{max-width:560px;margin:56px auto 0;padding:0 16px;text-align:center}
.ph-next__title{margin:0;font-weight:800;font-size:clamp(24px,4.4vw,32px);line-height:1.1}
.ph-next__text{margin:10px 0 22px;font-size:16px;line-height:1.55;color:rgba(247,241,231,.82)}
.ph-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:13px;background:#c04200;color:#fff;font-weight:700;font-size:17px;text-decoration:none;transition:filter 220ms var(--ph-ease)}
.ph-btn:hover{filter:brightness(1.1)}
.ph-btn:focus-visible{outline:3px solid #00b0bc;outline-offset:3px}
.ph-remove{max-width:560px;margin:40px auto 0;padding:0 16px;text-align:center;font-size:13px;line-height:1.55;color:rgba(247,241,231,.7)}
.ph-foot{margin:28px auto 0;padding:0 16px calc(32px + env(safe-area-inset-bottom));text-align:center;font-size:13px;color:rgba(247,241,231,.6)}
.ph-foot a,.ph-remove a{color:rgba(247,241,231,.9)}
.ph-empty{max-width:560px;margin:0 auto;padding:80px 16px;text-align:center}

/* full-screen viewer */
.ph-lock,.ph-lock body{overflow:hidden}
.ph-lb{position:fixed;inset:0;z-index:50;background:linear-gradient(180deg,#052540,#071521);touch-action:none;-webkit-user-select:none;user-select:none;opacity:var(--ph-fade,1)}
.ph-lb[hidden]{display:none}
.ph-lb__track{position:absolute;top:0;bottom:0;left:-100%;width:300%;display:flex;will-change:transform}
.ph-lb__slide{flex:0 0 33.3334%;margin:0;display:flex;align-items:center;justify-content:center;padding:calc(56px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom))}
@media (min-width:900px){.ph-lb__slide{padding:64px 84px 28px}}
.ph-lb__slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-drag:none}
.ph-lb__slide[data-empty] img{visibility:hidden}
.ph-lb__bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:14px;padding:calc(6px + env(safe-area-inset-top)) 6px 6px 16px;background:linear-gradient(180deg,rgba(7,21,33,.7),transparent);transition:opacity 220ms var(--ph-ease)}
.ph-lb__count{margin-right:auto;font-size:15px;font-variant-numeric:tabular-nums;color:rgba(247,241,231,.88)}
.ph-lb__remove{font-size:13px;color:rgba(247,241,231,.72);text-decoration:underline;text-underline-offset:2px}
.ph-lb__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:#f7f1e7;cursor:pointer}
.ph-lb__btn svg,.ph-lb__nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-lb__btn:focus-visible,.ph-lb__nav:focus-visible,.ph-lb__remove:focus-visible{outline:3px solid #00b0bc;outline-offset:2px}
.ph-lb__nav{position:absolute;top:50%;z-index:2;display:none;align-items:center;justify-content:center;width:52px;height:52px;margin-top:-26px;padding:0;border:0;border-radius:999px;background:rgba(5,37,64,.62);color:#f7f1e7;cursor:pointer;transition:opacity 220ms var(--ph-ease),background 220ms var(--ph-ease)}
.ph-lb__nav:hover{background:rgba(5,37,64,.9)}
.ph-lb__nav--prev{left:16px}.ph-lb__nav--next{right:16px}
.ph-lb__nav[disabled]{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.ph-lb__nav{display:flex}}
.ph-lb--clean .ph-lb__bar,.ph-lb--clean .ph-lb__nav{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ph-item img,.ph-lb__bar,.ph-lb__nav,.ph-btn{transition:none}}