/* ==========================================================
   STAGE LIBRARY: placeholder photographs and the logo system.
   Client tokens only (--c-*). Sizes in container units so art fits any slot.
   ========================================================== */

/* ---------- placeholder photograph ----------
   The root carries its kind as .ph--sea / --sail / --harbour / --people / --texture;
   layers inside are .ph-sky, .ph-sea… (don't reuse those names for kinds). */
.ph{ position:relative; width:100%; height:100%; overflow:hidden; container-type:size; isolation:isolate;
  background:var(--c-brand-4); color:var(--c-on-photo); }
.ph > i, .ph > svg{ position:absolute; display:block; }
.ph-sky{ inset:0; background:linear-gradient(180deg,
  color-mix(in srgb, var(--c-brand-3) 70%, var(--c-accent) calc(var(--warm) * 60%)) 0%,
  var(--c-brand-4) calc(var(--hz) - 10%),
  color-mix(in srgb, var(--c-brand-5) 80%, var(--c-accent) calc(var(--warm) * 50%)) var(--hz)); }
.ph-sun{ left:var(--sunx); top:var(--suny); width:22cqmin; height:22cqmin; margin:-11cqmin 0 0 -11cqmin; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--c-accent) 70%, #fff) 0%, color-mix(in srgb, var(--c-accent) 40%, transparent) 35%, transparent 70%);
  filter:blur(2cqmin); opacity:.9; }
.ph-sea{ left:0; right:0; top:var(--hz); bottom:0;
  background:
    repeating-linear-gradient(180deg, transparent 0 2.2cqh, color-mix(in srgb, var(--c-brand-5) 14%, transparent) 2.2cqh 2.5cqh),
    linear-gradient(180deg, var(--c-brand-2), var(--c-brand-1)); }
.ph-sails{ left:var(--sailx); top:calc(var(--hz) - 30cqh * var(--sails)); width:calc(26cqh * var(--sails)); height:calc(30cqh * var(--sails));
  fill:var(--c-brand-1); opacity:.9; transform:rotate(var(--rot)); transform-origin:50% 100%; }
.ph--sail .ph-sails{ top:6cqh; left:calc(var(--sailx) - 10cqw); width:auto; height:118cqh; opacity:.96; fill:var(--c-brand-5);
  filter:drop-shadow(0 2cqh 4cqh rgba(0,0,0,.25)); }
.ph--sail .ph-sea{ top:88%; }
.ph-masts{ left:0; right:0; top:8%; bottom:calc(100% - var(--hz));
  background:repeating-linear-gradient(90deg, transparent 0 6cqw, color-mix(in srgb, var(--c-brand-1) 70%, transparent) 6cqw 6.25cqw, transparent 6.25cqw 11cqw); opacity:.55; }
.ph-person{ bottom:-4cqh; width:22cqw; height:40cqh; border-radius:46% 46% 8% 8% / 34% 34% 8% 8%;
  background:linear-gradient(180deg, var(--c-brand-2), var(--c-brand-1)); filter:blur(.4cqmin); }
.ph-person::before{ content:""; position:absolute; left:50%; bottom:calc(100% - 2cqh); width:46%; aspect-ratio:1; margin-left:-23%; border-radius:50%;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c-accent) 55%, var(--c-brand-5)), color-mix(in srgb, var(--c-accent) 70%, var(--c-brand-1))); }
.ph-person.p1{ left:12%; height:36cqh; }
.ph-person.p2{ left:39%; height:46cqh; width:25cqw; background:linear-gradient(180deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 50%, var(--c-brand-1))); }
.ph-person.p3{ left:68%; height:34cqh; }
.ph--texture .ph-sky{ background:
  repeating-linear-gradient(115deg, color-mix(in srgb, var(--c-brand-5) 70%, #fff) 0 6cqw, var(--c-brand-4) 6cqw 7cqw, color-mix(in srgb, var(--c-brand-5) 85%, var(--c-brand-3)) 7cqw 13cqw); }
.ph--texture .ph-sea, .ph--texture .ph-sun{ display:none; }
.ph-grain{ inset:0; opacity:.18; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ph-label{ position:absolute; left:2.2cqmin; bottom:2.2cqmin; z-index:2; padding:.55em .9em; border-radius:999px;
  font:500 clamp(8px, 2.6cqmin, 13px)/1 var(--c-body); letter-spacing:.02em; color:var(--c-on-photo);
  background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
/* inside artwork the label sits top right, away from headlines and buttons (the brand holds the top left) */
.ad .ph-label{ left:auto; right:3cqmin; bottom:auto; top:3cqmin; }
.ad-carousel .ph-label{ top:13cqmin; }   /* under the slide counter */
.ph-file img{ width:100%; height:100%; object-fit:cover; display:block; }
/* sport grounds (neutral kinds, token-coloured): an oval with a pair of goalposts, a flat court with lines */
.ph--oval .ph-sea, .ph--court .ph-sea, .ph--court .ph-sun{ display:none; }
.ph-grass{ left:0; right:0; top:var(--hz); bottom:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 9cqw, color-mix(in srgb, var(--c-brand-5) 10%, transparent) 9cqw 18cqw),
    linear-gradient(180deg, color-mix(in srgb, var(--c-brand-2) 70%, var(--c-brand-1)), color-mix(in srgb, var(--c-brand-2) 45%, var(--c-brand-1))); }
.ph-posts{ left:calc(var(--sailx) + 6cqw); top:calc(var(--hz) - 34cqh); width:14cqw; height:36cqh;
  border-left:.9cqw solid var(--c-brand-5); border-right:.9cqw solid var(--c-brand-5); opacity:.92;
  box-shadow:-.4cqw 0 1cqw rgba(0,0,0,.12); }
.ph--court{ background:color-mix(in srgb, var(--c-brand-4) 55%, var(--c-brand-1)); }
.ph--court .ph-sky{ background:linear-gradient(160deg, color-mix(in srgb, var(--c-brand-4) 75%, var(--c-brand-5)), color-mix(in srgb, var(--c-brand-4) 60%, var(--c-brand-1))); }
.ph-lines{ inset:12cqh 10cqw; border:.7cqmin solid color-mix(in srgb, var(--c-brand-5) 85%, transparent); }
.ph-lines::before{ content:""; position:absolute; left:50%; top:0; bottom:0; border-left:.7cqmin solid color-mix(in srgb, var(--c-brand-5) 85%, transparent); }
.ph-lines::after{ content:""; position:absolute; left:50%; top:50%; width:22cqmin; aspect-ratio:1; translate:-50% -50%; border-radius:50%;
  border:.7cqmin solid color-mix(in srgb, var(--c-brand-5) 85%, transparent); }

/* ---------- logo system ---------- */
.lg{ display:grid; place-items:center; width:100%; height:100%; container-type:size; color:inherit; }
.lg-sym{ display:block; width:62cqmin; height:62cqmin; }
.lg-sym svg{ width:100%; height:100%; display:block; fill:currentColor; overflow:visible; }
.lg-sym svg path, .lg-sym svg circle{ fill:currentColor; }
.lg-wm{ font:800 min(15cqw, 42cqh)/.9 var(--c-display); letter-spacing:-.045em; white-space:nowrap; }
.lg-row{ display:flex; align-items:center; gap:3.4cqw; }
.lg-row .lg-sym{ width:min(13cqw, 38cqh); height:min(13cqw, 38cqh); }
.lg-row .lg-wm{ font-size:min(11.5cqw, 32cqh); }
.lg-col{ display:flex; flex-direction:column; align-items:center; gap:4cqh; }
.lg-col .lg-sym{ width:min(26cqw, 34cqh); height:min(26cqw, 34cqh); }
.lg-col .lg-wm{ font-size:min(13cqw, 17cqh); }
.lg-tag{ font:700 min(9cqw, 20cqh)/1.02 var(--c-display); letter-spacing:-.035em; text-align:center; text-wrap:balance; max-width:90cqw; }
.lg-tagline-lockup .lg-row .lg-sym{ width:min(9cqw, 22cqh); height:min(9cqw, 22cqh); }
.lg-tagline-lockup .lg-row .lg-wm{ font-size:min(8cqw, 19cqh); }
.lg-tag-sm{ font:500 min(3.2cqw, 8cqh)/1.3 var(--c-body); letter-spacing:.01em; opacity:.8; margin-top:1cqh; }
.lg-file svg{ width:100%; height:62cqh; fill:currentColor; }
/* an integrated wordmark (logo.integrated): the supplied file, sized like the typed wordmark */
.lg-wmf{ display:block; width:84cqw; height:40cqh; }
.lg-wmf svg{ width:100%; height:100%; display:block; fill:currentColor; overflow:visible; }
.lg-row .lg-wmf{ width:84cqw; height:34cqh; }
.lg-col .lg-wmf{ width:88cqw; height:30cqh; }
.lg-wmf--tag{ width:88cqw; height:52cqh; }
.lg-col .lg-tag-sm{ max-width:84cqw; }