/*
 * Wedza partner websites (Views/sites/site.php).
 * One stylesheet for every design: shared base first, then each design
 * under html[data-t="{key}"]. --accent / --on-accent / --head / --body come
 * from the page (the partner's brand colour and the design's fonts).
 */

/* ---------- Tokens (light base) ---------- */
:root {
  --bg: #ffffff; --bg-2: #f6f3ee; --card: #ffffff;
  --ink: #191714; --ink-2: #4a4540; --muted: #6f6962;
  --line: rgba(25, 23, 20, .12); --line-2: rgba(25, 23, 20, .22);
  --wrap: 1200px; --gut: clamp(20px, 4vw, 44px);
  --r: 14px; --r-img: 12px; --r-btn: 999px;
  --head-w: 600; --head-track: -0.015em; --head-case: none; --head-lh: 1.05;
  --display: clamp(2.7rem, 6.4vw, 5.6rem);
  --eyebrow: var(--accent);
  --shadow: 0 30px 60px -32px rgba(20, 15, 10, .45);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --nav-h: 76px;
}
.is-dark { --bg: #0c0c0e; --bg-2: #141417; --card: #18181c; --ink: #f2efe8; --ink-2: #cfcac1; --muted: #9b968c; --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .24); --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 calc(16.5px * var(--fs, 1))/1.65 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden }
img { display: block; max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }
p { margin: 0 0 1em }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px }
.skip:focus { left: 8px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
svg { width: 1.15em; height: 1.15em; flex: none }
.muted { color: var(--muted) }
.small { font-size: 14px; display: flex; align-items: center; gap: 8px }

.display, .h1, .h2, .h3, .h4 { font-family: var(--head); font-weight: var(--head-w); letter-spacing: var(--head-track); text-transform: var(--head-case); line-height: var(--head-lh); margin: 0; text-wrap: balance }
.display { font-size: var(--display) }
.h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem) }
.h2 { font-size: clamp(2rem, 3.8vw, 3.1rem) }
.h3 { font-size: clamp(1.35rem, 2vw, 1.65rem) }
.h4 { font-size: 1.22rem; display: block }
.eyebrow { font-family: var(--body); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 14px }
.lead { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--ink-2); line-height: 1.6 }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 24px; border-radius: var(--r-btn); font: 600 15px/1 var(--body); letter-spacing: .01em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s }
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: translateY(0) scale(.98) }
.btn-lg { height: 56px; padding: 0 30px; font-size: 15.5px }
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 14px 30px -14px var(--accent) }
.btn-accent:hover { box-shadow: 0 18px 36px -14px var(--accent) }
.btn-line { border-color: var(--line-2); color: var(--ink); background: transparent }
.btn-line:hover { border-color: var(--ink) }
.btn-ghost { border-color: rgba(255, 255, 255, .5); color: #fff; background: rgba(255, 255, 255, .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff }
.row-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); transition: background .35s, border-color .35s, color .35s }
.nav-in { height: var(--nav-h); display: flex; align-items: center; gap: 28px }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto }
.brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover }
.mono { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--body); letter-spacing: .04em; flex: none }
.brand-name { font-family: var(--head); font-weight: var(--head-w); font-size: 1.32rem; letter-spacing: var(--head-track); text-transform: var(--head-case); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.links { display: flex; gap: 26px }
.links a { font-size: 14.5px; font-weight: 500; color: var(--ink-2); position: relative; padding: 6px 0; transition: color .2s }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease) }
.links a:hover { color: var(--ink) }
.links a:hover::after { transform: scaleX(1) }
.nav-cta { height: 42px; padding: 0 18px; font-size: 14px }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: inherit; place-items: center; cursor: pointer }
.menu-btn svg { width: 20px; height: 20px }
.drawer { display: grid; gap: 4px; padding: 10px var(--gut) 22px; border-top: 1px solid var(--line); background: var(--bg) }
.drawer[hidden] { display: none }
.drawer a:not(.btn) { padding: 14px 4px; font-size: 18px; font-family: var(--head); border-bottom: 1px solid var(--line); color: var(--ink) }
.drawer .btn { margin-top: 14px }
/* Over a full-screen photo: clear until the page scrolls. */
.nav.over { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff }
.nav.over .links a { color: rgba(255, 255, 255, .85) }
.nav.over .links a:hover { color: #fff }
.nav.over .menu-btn { border-color: rgba(255, 255, 255, .45) }
.nav.over.solid { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-color: var(--line); color: var(--ink) }
.nav.over.solid .links a { color: var(--ink-2) }
.nav.over.solid .menu-btn { border-color: var(--line-2) }
.nav.over.open { background: var(--bg); color: var(--ink) }

/* ---------- Sections ---------- */
.sec { padding: calc(clamp(80px, 11vw, 140px) * var(--space, 1)) 0; position: relative }
.sec-alt { background: var(--bg-2) }
.sec-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px) }
.sec-head .muted { margin-top: 14px }

/* ---------- Hero: shared ---------- */
.hero { position: relative; overflow: hidden }
.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; max-width: 560px; margin: 22px 0 0; opacity: .92 }
.hero-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 26px 0 0; font-size: 14.5px }
.stars { display: inline-flex; gap: 2px; color: #f5b301 }
.stars svg { width: 15px; height: 15px }
.stars-off { display: inline-flex; gap: 2px; opacity: .28 }
.scroll-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: #fff; opacity: .75; animation: bob 2.4s ease-in-out infinite; z-index: 3 }
.scroll-hint svg { width: 28px; height: 28px }
@keyframes bob { 50% { transform: translate(-50%, 8px) } }

/* Full-screen photo heroes (center, cinema, panorama, stage) */
.hero-center, .hero-cinema, .hero-panorama, .hero-stage { min-height: 100svh; display: flex; align-items: center; color: #fff; isolation: isolate }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: #111 }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 7s linear }
.hero-bg img.on { opacity: 1; transform: scale(1) }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .62) 100%) }
.hero-center .hero-in, .hero-cinema .hero-in, .hero-panorama .hero-in, .hero-stage .hero-in { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 90px }
.hero .eyebrow { color: inherit; opacity: .9 }
.hero-center .hero-in, .hero-cinema .hero-in, .hero-panorama .hero-in, .hero-stage .hero-in { text-shadow: 0 2px 28px rgba(0, 0, 0, .35) }
.hero-in .btn { text-shadow: none }

/* Split heroes (arch, split, portrait, editorial) */
.hero-arch .hero-in, .hero-split .hero-in, .hero-portrait .hero-in, .hero-editorial .hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; min-height: calc(100svh - var(--nav-h)); padding-top: 40px; padding-bottom: 70px }
.hero-art { position: relative }
.hero-art img { width: 100%; object-fit: cover; box-shadow: var(--shadow) }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 7vw, 100px); align-items: center }
.about-img { position: relative }
.about-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-img); box-shadow: var(--shadow) }
.since { position: absolute; right: -18px; bottom: 34px; background: var(--accent); color: var(--on-accent); padding: 18px 22px; border-radius: var(--r); display: grid; text-align: center; box-shadow: var(--shadow) }
.since small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .85 }
.since b { font-family: var(--head); font-size: 2rem; line-height: 1; font-weight: var(--head-w) }
.about-text .h2 { margin-bottom: 24px }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 34px 0 0; padding-top: 30px; border-top: 1px solid var(--line) }
.stats div { display: flex; flex-direction: column-reverse; gap: 4px }
.stats dt { font-size: 13.5px; color: var(--muted) }
.stats dd { margin: 0; font-family: var(--head); font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; font-weight: var(--head-w); letter-spacing: var(--head-track) }
.amenities, .ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px }
.amenities { grid-template-columns: 1fr 1fr; gap: 12px 24px }
.amenities li, .ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px }
.amenities svg, .ticks svg { color: var(--accent); margin-top: 3px }

/* ---------- Services: cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.4vw, 28px) }
.card { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease) }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow) }
.card-img { aspect-ratio: 4 / 3.3; overflow: hidden; display: block }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease) }
.card:hover .card-img img { transform: scale(1.06) }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.card-body .eyebrow { margin: 0; font-size: 11px }
.card-body .muted { font-size: 15px; line-height: 1.5 }
.card-body .price { margin-top: auto; padding-top: 10px }
.price { font-size: 14.5px; color: var(--muted) }
.price b { color: var(--ink); font-size: 1.18em; font-weight: 600 }
.price s { opacity: .65; margin-left: 4px }
.price .from { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em }

/* ---------- Services: numbered list ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.svc-list li { border-bottom: 1px solid var(--line) }
.svc-list a { position: relative; display: grid; grid-template-columns: 70px 1fr auto 48px; gap: 24px; align-items: center; padding: 30px 6px; transition: padding .35s var(--ease) }
.svc-list .num { font-family: var(--head); font-size: 15px; color: var(--muted) }
.svc-l-main { display: grid; gap: 6px }
.svc-list .go { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background .3s, color .3s, transform .35s var(--ease) }
.svc-list a:hover { padding-left: 18px }
.svc-list a:hover .go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: rotate(-45deg) }
.peek { position: absolute; right: 120px; top: 50%; width: 200px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; opacity: 0; transform: translateY(-50%) rotate(-4deg) scale(.9); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; z-index: 2; box-shadow: var(--shadow) }
.svc-list a:hover .peek { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1) }

/* ---------- Services: menu ---------- */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 56px }
.menu-item { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px dashed var(--line-2) }
.menu-item img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; transition: transform .6s var(--ease) }
.menu-item:hover img { transform: rotate(-8deg) scale(1.05) }
.menu-body { display: grid; gap: 4px }
.menu-top { display: flex; align-items: baseline; gap: 10px }
.menu-top .h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dots { flex: 1; border-bottom: 2px dotted var(--line-2); transform: translateY(-5px) }
.menu-top b { font-family: var(--head); font-size: 1.25rem; color: var(--accent); white-space: nowrap }
.menu-body .muted { font-size: 14.5px }

/* ---------- Services: packages ---------- */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; align-items: stretch }
.pkg { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s }
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow) }
.pkg > img { aspect-ratio: 16 / 10; object-fit: cover; width: 100% }
.pkg-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; position: relative }
.pkg-body .btn { margin-top: auto }
.pkg-body .ticks { margin: 4px 0 20px; gap: 9px }
.pkg-body .ticks li { font-size: 14.5px }
.pkg-price { margin: 4px 0 0 }
.pkg-price b { font-size: 1.5em }
.pkg-top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow) }
.tag { position: absolute; top: -15px; left: 26px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px }

/* ---------- Gallery ---------- */
.gal { display: grid; gap: 14px }
.g { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-img); cursor: zoom-in; background: var(--bg-2) }
.g img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s }
.g:hover img { transform: scale(1.06) }
.g figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; color: #fff; font-size: 14px; font-weight: 500; background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--ease) }
.g:hover figcaption { opacity: 1; transform: none }
.gal-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px }
.gal-grid .g:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2 }
.gal-grid .g:nth-child(6n + 4) { grid-row: span 2 }
.gal-masonry { display: block; columns: 3 300px; column-gap: 14px }
.gal-masonry .g { break-inside: avoid; margin-bottom: 14px }
.gal-masonry .g:nth-child(3n + 1) img { aspect-ratio: 4 / 5 }
.gal-masonry .g:nth-child(3n + 2) img { aspect-ratio: 1 / 1 }
.gal-masonry .g:nth-child(3n) img { aspect-ratio: 3 / 2 }
.gal-themes { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px }
.g[hidden] { display: none }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.chip { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font: 500 14px var(--body); cursor: pointer; transition: all .25s }
.chip:hover { border-color: var(--ink) }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gut) }
.strip::-webkit-scrollbar { display: none }
.gal-strip { display: flex; gap: 16px; width: max-content }
.gal-strip .g { width: min(70vw, 520px); height: min(72vh, 620px); scroll-snap-align: center; flex: none }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: s }
.steps li { padding-top: 26px; border-top: 1px solid var(--line-2); position: relative }
.steps li::before { content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--accent) }
.step-n { display: block; font-family: var(--head); font-size: 2.6rem; line-height: 1; color: var(--accent); margin-bottom: 18px }
.steps .h4 { margin-bottom: 10px }
.steps .muted { font-size: 15px }

/* ---------- Reviews ---------- */
.rating-big { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px }
.rating-big b { font-family: var(--head); font-size: 3rem; line-height: 1 }
.rating-big .stars svg { width: 19px; height: 19px }
.revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: calc(4 * 360px); gap: 22px }
.rev { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 14px; position: relative }
.rev .q { position: absolute; right: 24px; top: 22px; color: var(--accent); opacity: .25 }
.rev .q svg { width: 42px; height: 42px }
.rev blockquote { margin: 0; font-size: 16.5px; line-height: 1.65; flex: 1 }
.rev figcaption { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px }
.rev figcaption .muted { font-size: 13px }
.rev-badge { justify-self: start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 11.5px; font-weight: 600; letter-spacing: .02em }
[data-t="classic"] .rev-badge { justify-self: center }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 90px); align-items: start }
.qa details { border-bottom: 1px solid var(--line-2) }
.qa details:first-child { border-top: 1px solid var(--line-2) }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px 0; font-family: var(--head); font-size: 1.22rem; font-weight: var(--head-w); letter-spacing: var(--head-track) }
.qa summary::-webkit-details-marker { display: none }
.pm { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease), background .3s, color .3s }
.qa details[open] .pm { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
.qa details p { margin: 0 0 24px; color: var(--ink-2); max-width: 640px }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; color: #fff; text-align: center; padding: clamp(100px, 14vw, 170px) 0; background: #111; isolation: isolate }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45), rgba(0, 0, 0, .72)) }
.cta-in { max-width: 820px }
.cta .eyebrow { color: #fff; opacity: .85 }
.cta .lead { color: rgba(255, 255, 255, .88); margin: 20px auto 0; max-width: 600px }
.cta .row-btns { justify-content: center }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 6vw, 80px); align-items: stretch }
.contact-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px }
.contact-list svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px }
.contact-list a:hover { color: var(--accent) }
.socials { display: flex; gap: 10px; margin-top: 30px }
.socials a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: all .25s }
.socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.map { border-radius: var(--r); overflow: hidden; min-height: 380px; border: 1px solid var(--line); background: var(--bg-2) }
.map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 46px 0 40px; background: var(--bg) }
.foot-in { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center }
.foot-name { font-family: var(--head); font-size: 1.6rem; font-weight: var(--head-w); letter-spacing: var(--head-track); text-transform: var(--head-case); margin: 0 0 4px }
.foot .muted { margin: 0; font-size: 14px }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap }
.foot-links a { font-size: 14.5px; color: var(--ink-2) }
.foot-links a:hover { color: var(--accent) }
.foot-legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line) }
.powered:hover { color: var(--accent) }

/* ---------- Service page ---------- */
/* ---------- Service details (a popup: the site is one page) ---------- */
.svc-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 70px); align-items: start }
.svc-main { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: var(--r-img); cursor: zoom-in }
.svc-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px }
.svc-thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in }
.svc-info { position: sticky; top: calc(var(--nav-h) + 24px) }
.svc-info .h1 { margin-bottom: 16px }
.svc-price { font-size: 17px; margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line) }
.svc-price b { font-size: 1.6em }
.svc-info .h4 { margin: 28px 0 0 }
.svc-info .h2 { margin-bottom: 14px }
.svc-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: clamp(20px, 3vw, 36px); border: 0; border-radius: var(--r); background: var(--bg); color: var(--ink); box-shadow: 0 40px 100px rgba(0, 0, 0, .35); overflow: auto; overscroll-behavior: contain }
.svc-dialog::backdrop { background: rgba(8, 8, 10, .6); backdrop-filter: blur(3px) }
.svc-dialog[open] { animation: svc-in .35s var(--ease) }
@keyframes svc-in { from { opacity: 0; transform: translateY(18px) } }
.svc-dialog .svc-info { position: static }
.svc-x { position: sticky; top: 0; float: right; z-index: 2; width: 42px; height: 42px; margin: -6px -6px 0 12px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer }
.svc-x svg { width: 18px; height: 18px }

/* ---------- Mobile dock ---------- */
.dock { display: none }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 8, 10, .94); display: grid; place-items: center; padding: 60px 70px }
.lightbox[hidden] { display: none }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6) }
.lb-close, .lb-nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; display: grid; place-items: center; cursor: pointer }
.lb-close { top: 18px; right: 18px }
.lb-prev { left: 16px; top: 50% }
.lb-prev svg { transform: rotate(180deg) }
.lb-next { right: 16px; top: 50% }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.js .reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .js .reveal { opacity: 1; transform: none; transition: none }
  .hero-bg img { transition: opacity .6s }
  .scroll-hint, .marquee > div { animation: none }
}

/* ======================================================================
   DESIGNS
   ====================================================================== */

/* ---- Classic: ivory, bronze, Cormorant ---- */
[data-t="classic"] { --bg: #fbf8f3; --bg-2: #f2ebe1; --card: #fffdf9; --ink: #1f1b16; --ink-2: #4b4339; --muted: #7a7064; --line: rgba(31, 27, 22, .11); --line-2: rgba(31, 27, 22, .22); --r: 6px; --r-img: 4px; --r-btn: 2px; --head-w: 500; --head-track: -0.01em; --head-lh: 1.02; --display: clamp(3rem, 7vw, 6.2rem) }
[data-t="classic"] .hero-center .hero-in { text-align: center; display: flex; flex-direction: column; align-items: center }
[data-t="classic"] .hero-center .hero-sub { margin-left: auto; margin-right: auto }
[data-t="classic"] .hero-center .row-btns, [data-t="classic"] .hero-center .hero-rating { justify-content: center }
[data-t="classic"] .hero-center .eyebrow::before, [data-t="classic"] .hero-center .eyebrow::after { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 14px; opacity: .7 }
[data-t="classic"] .display { font-style: normal }
[data-t="classic"] .sec-head { text-align: center; margin-left: auto; margin-right: auto }
[data-t="classic"] .faq .sec-head, [data-t="classic"] .contact .sec-head { text-align: left }
[data-t="classic"] .h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem) }
[data-t="classic"] .card { border: 0; background: transparent }
[data-t="classic"] .card:hover { box-shadow: none }
[data-t="classic"] .card-img { aspect-ratio: 4 / 5; border-radius: var(--r-img) }
[data-t="classic"] .card-body { padding: 20px 2px 0; text-align: center; align-items: center }
[data-t="classic"] .card-body .h4 { font-family: var(--head); font-size: 1.6rem; font-weight: 500 }
[data-t="classic"] .rev { background: transparent; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 30px 4px 0; text-align: center; align-items: center }
[data-t="classic"] .rev blockquote { font-family: var(--head); font-size: 1.45rem; line-height: 1.4; font-style: italic }
[data-t="classic"] .rev .q { position: static; opacity: .6 }
[data-t="classic"] .rev figcaption { border: 0; padding: 0 }
[data-t="classic"] .rating-big { justify-content: center }
[data-t="classic"] .since { border-radius: 2px }

/* ---- Lens: dark, cinematic, Syne ---- */
[data-t="lens"] { --r: 4px; --r-img: 2px; --r-btn: 0; --head-w: 700; --head-track: -0.035em; --head-lh: .95; --display: clamp(3.2rem, 9vw, 8.6rem); --eyebrow: var(--muted) }
[data-t="lens"] .hero-cinema { align-items: flex-end }
[data-t="lens"] .hero-cinema .hero-in { padding-bottom: 80px }
[data-t="lens"] .hero-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%) }
[data-t="lens"] .hero-cinema .display { max-width: 11ch }
[data-t="lens"] .hero-cinema .eyebrow::before { content: ""; display: inline-block; width: 46px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 14px }
[data-t="lens"] .hero-count { position: absolute; right: var(--gut); bottom: 84px; color: #fff; font: 600 14px var(--body); letter-spacing: .2em; z-index: 3 }
[data-t="lens"] .hero-count span { color: var(--accent) }
[data-t="lens"] .scroll-hint { left: auto; right: calc(var(--gut) + 6px); bottom: 30px; transform: none; animation: none }
[data-t="lens"] .h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem) }
[data-t="lens"] .gallery { padding-top: clamp(70px, 9vw, 120px) }
[data-t="lens"] .g { border-radius: 0 }
[data-t="lens"] .g img { filter: saturate(.9) contrast(1.05) }
[data-t="lens"] .gal-masonry { columns: 3 280px; column-gap: 10px }
[data-t="lens"] .gal-masonry .g { margin-bottom: 10px }
[data-t="lens"] .about-img img { border-radius: 0; filter: grayscale(.2) }
[data-t="lens"] .since { border-radius: 0; color: #0c0c0e }
[data-t="lens"] .svc-list .h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.03em }
[data-t="lens"] .rev { background: transparent; border-color: var(--line) }
[data-t="lens"] .btn-accent { box-shadow: none }
[data-t="lens"] .chip.on { color: #0c0c0e }

/* ---- Bloom: blush, arches, Cormorant italic ---- */
[data-t="bloom"] { --bg: #fcf6f3; --bg-2: #f6eae4; --card: #fffaf8; --ink: #3a2f2c; --ink-2: #5e4f4a; --muted: #8b7a73; --line: rgba(58, 47, 44, .1); --line-2: rgba(58, 47, 44, .2); --r: 22px; --r-img: 18px; --head-w: 500; --head-track: -0.01em; --head-lh: 1; --display: clamp(3.1rem, 6.8vw, 6rem); --eyebrow: #7d8f76 }
[data-t="bloom"] .display, [data-t="bloom"] .h2 { font-style: italic }
[data-t="bloom"] .hero-arch { background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%), radial-gradient(circle at 10% 90%, rgba(125, 143, 118, .16), transparent 40%) }
[data-t="bloom"] .hero-arch .a0 { aspect-ratio: 4 / 5.2; border-radius: 999px 999px 18px 18px }
[data-t="bloom"] .hero-arch .a1 { position: absolute; left: -48px; bottom: 40px; width: 42%; aspect-ratio: 1; border-radius: 50%; border: 8px solid var(--bg) }
[data-t="bloom"] .hero-arch .hero-art::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px 999px 24px 24px; z-index: -1 }
[data-t="bloom"] .about-img img { border-radius: 999px 999px var(--r-img) var(--r-img) }
[data-t="bloom"] .card-img { aspect-ratio: 4 / 4.6; margin: 12px 12px 0; border-radius: 999px 999px 14px 14px }
[data-t="bloom"] .card { background: var(--card); border: 0; box-shadow: 0 1px 0 var(--line) }
[data-t="bloom"] .card-body { text-align: center; align-items: center }
[data-t="bloom"] .card-body .h4 { font-family: var(--head); font-size: 1.6rem; font-style: italic; font-weight: 500 }
[data-t="bloom"] .g { border-radius: 18px }
[data-t="bloom"] .gal-themes .g:nth-child(4n + 1) { border-radius: 999px 999px 18px 18px }
[data-t="bloom"] .rev { border: 0; background: var(--card) }
[data-t="bloom"] .rev blockquote { font-family: var(--head); font-style: italic; font-size: 1.35rem; line-height: 1.45 }
[data-t="bloom"] .cta::after { background: radial-gradient(ellipse at center, rgba(58, 35, 30, .45), rgba(58, 35, 30, .75)) }

/* ---- Feast: cream, deep green, gold, Fraunces ---- */
[data-t="feast"] { --bg: #f8f3e9; --bg-2: #efe6d3; --card: #fffbf2; --ink: #1d2a22; --ink-2: #3f4a42; --muted: #6e6f62; --line: rgba(29, 42, 34, .12); --line-2: rgba(29, 42, 34, .24); --green: #1c3a2c; --r: 18px; --r-img: 16px; --head-w: 600; --head-track: -0.02em; --display: clamp(2.9rem, 6.2vw, 5.4rem); --eyebrow: #a07a2c }
[data-t="feast"] .hero-split { background: var(--green); color: #f5eedd }
[data-t="feast"] .hero-split .eyebrow { color: var(--accent) }
[data-t="feast"] .hero-split .display em, [data-t="feast"] .display { font-style: normal }
[data-t="feast"] .hero-split .btn-line { color: #f5eedd; border-color: rgba(245, 238, 221, .4) }
[data-t="feast"] .hero-split .a0 { aspect-ratio: 1; border-radius: 50%; border: 10px solid rgba(245, 238, 221, .08) }
[data-t="feast"] .hero-split .a1 { position: absolute; right: -24px; top: -10px; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--green) }
[data-t="feast"] .badge-round { position: absolute; left: -14px; bottom: 30px; width: 132px; height: 132px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-content: center; text-align: center; box-shadow: var(--shadow); transform: rotate(-10deg) }
[data-t="feast"] .badge-round b { font-family: var(--head); font-size: 1.7rem; line-height: 1.05 }
[data-t="feast"] .badge-round small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase }
[data-t="feast"] .hero-split .hero-rating { color: #f5eedd }
[data-t="feast"] .services { background: var(--bg) }
[data-t="feast"] .services .sec-head { text-align: center; margin-left: auto; margin-right: auto }
[data-t="feast"] .services .sec-head .h2::after { content: "✦"; display: block; font-size: 1rem; color: var(--accent); margin-top: 14px }
[data-t="feast"] .about { background: var(--bg-2) }
[data-t="feast"] .about-img img { border-radius: 200px 200px var(--r-img) var(--r-img) }
[data-t="feast"] .since { background: var(--green); color: #f5eedd }
[data-t="feast"] .cta { background: var(--green) }
[data-t="feast"] .cta::after { background: linear-gradient(0deg, rgba(28, 58, 44, .9), rgba(28, 58, 44, .62)) }
[data-t="feast"] .rev { background: var(--card) }

/* ---- Venue: stone, navy, Marcellus ---- */
[data-t="venue"] { --bg: #f6f4f0; --bg-2: #ebe7df; --card: #fff; --ink: #18202c; --ink-2: #3d4553; --muted: #6c727c; --line: rgba(24, 32, 44, .11); --line-2: rgba(24, 32, 44, .22); --r: 8px; --r-img: 6px; --r-btn: 4px; --head-w: 400; --head-track: .02em; --head-case: uppercase; --head-lh: 1.08; --display: clamp(2.6rem, 6vw, 5.2rem) }
[data-t="venue"] .hero-panorama { align-items: flex-end; min-height: 100svh }
[data-t="venue"] .hero-panorama .hero-in { padding-bottom: 40px }
[data-t="venue"] .hero-shade { background: linear-gradient(180deg, rgba(10, 16, 26, .6), rgba(10, 16, 26, .32) 45%, rgba(10, 16, 26, .78)) }
[data-t="venue"] .pano-bar { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, .1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; overflow: hidden }
[data-t="venue"] .pano-bar div { padding: 20px 24px; border-right: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 2px }
[data-t="venue"] .pano-bar div:last-child { border: 0 }
[data-t="venue"] .pano-bar b { font-family: var(--head); font-size: 1.9rem; font-weight: 400; line-height: 1.1 }
[data-t="venue"] .pano-bar span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .85 }
[data-t="venue"] .scroll-hint { display: none }
[data-t="venue"] .eyebrow { letter-spacing: .28em }
[data-t="venue"] .h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem) }
[data-t="venue"] .h3 { letter-spacing: .03em }
[data-t="venue"] .brand-name, [data-t="venue"] .foot-name { letter-spacing: .06em }
[data-t="venue"] .pkg > img { aspect-ratio: 3 / 2 }
[data-t="venue"] .qa summary { text-transform: none; letter-spacing: 0; font-size: 1.15rem }

/* ---- Glow: rose-gold, portrait, Italiana ---- */
[data-t="glow"] { --bg: #fdf8f5; --bg-2: #f8ede7; --card: #fffcfa; --ink: #3b2b29; --ink-2: #5d4a46; --muted: #8e7a75; --line: rgba(59, 43, 41, .1); --line-2: rgba(59, 43, 41, .2); --r: 2px; --r-img: 2px; --r-btn: 999px; --head-w: 400; --head-track: .01em; --head-lh: 1.02; --display: clamp(3.2rem, 7vw, 6.4rem) }
[data-t="glow"] body, [data-t="glow"] { font-weight: 400 }
[data-t="glow"] .hero-portrait .a0 { aspect-ratio: 3 / 4; width: 82%; margin-left: auto; position: relative; z-index: 1 }
[data-t="glow"] .hero-portrait .hero-art::before { content: ""; position: absolute; top: 34px; right: -22px; width: 82%; aspect-ratio: 3 / 4; border: 1px solid var(--accent) }
[data-t="glow"] .hero-portrait .a1 { position: absolute; left: 0; bottom: -30px; width: 42%; aspect-ratio: 4 / 5; z-index: 2; border: 10px solid var(--bg) }
[data-t="glow"] .eyebrow { letter-spacing: .32em; font-weight: 500 }
[data-t="glow"] .h2 { font-size: clamp(2.4rem, 4.6vw, 3.8rem) }
[data-t="glow"] .pkg { border-color: var(--line) }
[data-t="glow"] .pkg .h3 { font-size: 2rem }
[data-t="glow"] .pkg > img { aspect-ratio: 4 / 3.6 }
[data-t="glow"] .gal-grid .g img { filter: saturate(.92) }
[data-t="glow"] .rev blockquote { font-family: var(--head); font-size: 1.45rem; line-height: 1.4 }
[data-t="glow"] .since { border-radius: 999px; width: 120px; height: 120px; place-content: center; padding: 0 }

/* ---- Beat: black, neon, Anton ---- */
[data-t="beat"] { --bg: #070708; --bg-2: #0f0f12; --card: #141418; --r: 0; --r-img: 0; --r-btn: 0; --head-w: 400; --head-track: .005em; --head-case: uppercase; --head-lh: .9; --display: clamp(4rem, 13vw, 11.5rem); --eyebrow: var(--accent) }
[data-t="beat"] .hero-stage { align-items: center }
[data-t="beat"] .hero-bg img { filter: grayscale(1) contrast(1.15) }
[data-t="beat"] .hero-shade { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 55%), linear-gradient(0deg, #070708 2%, rgba(7, 7, 8, .35) 60%, rgba(7, 7, 8, .55)); mix-blend-mode: normal }
[data-t="beat"] .hero-stage .display { text-shadow: 0 6px 40px rgba(0, 0, 0, .4) }
[data-t="beat"] .hero-stage .eyebrow { color: var(--accent); opacity: 1 }
[data-t="beat"] .marquee { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); color: var(--on-accent); overflow: hidden; white-space: nowrap; z-index: 3; border-top: 1px solid rgba(0, 0, 0, .2) }
[data-t="beat"] .marquee > div { display: inline-flex; gap: 28px; padding: 14px 0; animation: marquee 22s linear infinite; font-family: var(--head); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em }
[data-t="beat"] .marquee i { font-style: normal }
@keyframes marquee { to { transform: translateX(-50%) } }
[data-t="beat"] .scroll-hint { display: none }
[data-t="beat"] .hero-stage .hero-in { padding-bottom: 130px }
[data-t="beat"] .h2 { font-size: clamp(3rem, 8vw, 6.4rem) }
[data-t="beat"] .svc-list .h3 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: .01em }
[data-t="beat"] .svc-list a:hover { background: color-mix(in srgb, var(--accent) 7%, transparent) }
[data-t="beat"] .svc-list .go { border-radius: 0 }
[data-t="beat"] .gal-strip .g img { filter: grayscale(.4) contrast(1.1) }
[data-t="beat"] .gal-strip .g:hover img { filter: none }
[data-t="beat"] .about-img img { filter: grayscale(1) contrast(1.1) }
[data-t="beat"] .since { color: #070708 }
[data-t="beat"] .rev { border-color: var(--line); background: var(--card) }
[data-t="beat"] .stars { color: var(--accent) }
[data-t="beat"] .btn { text-transform: uppercase; letter-spacing: .08em; font-size: 14px }
[data-t="beat"] .qa summary { font-size: 1.6rem }
[data-t="beat"] .pm { border-radius: 0 }
[data-t="beat"] .cta { background: var(--accent); color: var(--on-accent) }
[data-t="beat"] .cta-bg { opacity: .18; filter: grayscale(1); mix-blend-mode: multiply }
[data-t="beat"] .cta::after { display: none }
[data-t="beat"] .cta .eyebrow, [data-t="beat"] .cta .lead { color: var(--on-accent) }
[data-t="beat"] .cta .btn-accent { background: #070708; color: #fff; box-shadow: none }
[data-t="beat"] .cta .btn-ghost { color: var(--on-accent); border-color: currentColor; background: transparent }
[data-t="beat"] .cta .h1 { font-size: clamp(3rem, 9vw, 7rem) }

/* ---- Plan: navy, champagne, DM Serif ---- */
[data-t="plan"] { --bg: #faf8f3; --bg-2: #f1ece1; --card: #fffdf8; --ink: #14213d; --ink-2: #3b4660; --muted: #6d7387; --line: rgba(20, 33, 61, .11); --line-2: rgba(20, 33, 61, .22); --r: 10px; --r-img: 8px; --head-w: 400; --head-track: -0.015em; --head-lh: 1.03; --display: clamp(3rem, 6.6vw, 5.8rem); --eyebrow: #9a7b3e }
[data-t="plan"] .hero-editorial .hero-art { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: min(74vh, 660px) }
[data-t="plan"] .hero-editorial .hero-art img { height: 100%; border-radius: var(--r-img) }
[data-t="plan"] .hero-editorial .c0 { grid-row: span 2 }
[data-t="plan"] .hero-editorial .c1 { transform: translateY(-26px) }
[data-t="plan"] .hero-editorial .c2 { transform: translateY(26px) }
[data-t="plan"] .hero-editorial .hero-art::after { content: ""; position: absolute; right: -24px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; border: 1px solid var(--accent) }
[data-t="plan"] .process { background: var(--ink); color: #f5f1e8; --line-2: rgba(245, 241, 232, .2); --muted: rgba(245, 241, 232, .7) }
[data-t="plan"] .process .eyebrow { color: var(--accent) }
[data-t="plan"] .reviews .revs { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) }
[data-t="plan"] .rev { padding: 40px; border: 0; box-shadow: 0 1px 0 var(--line) }
[data-t="plan"] .rev blockquote { font-family: var(--head); font-size: 1.6rem; line-height: 1.35 }
[data-t="plan"] .since { background: var(--ink); color: #f5f1e8 }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1080px) {
  .links { display: none }
  .menu-btn { display: grid }
  .gal-grid { grid-template-columns: repeat(3, 1fr) }
  .steps { grid-template-columns: repeat(2, 1fr) }
  .menu { grid-template-columns: 1fr }
  .peek { display: none }
}
@media (max-width: 860px) {
  :root { --nav-h: 66px }
  body { font-size: 16px }
  .hero-arch .hero-in, .hero-split .hero-in, .hero-portrait .hero-in, .hero-editorial .hero-in { grid-template-columns: 1fr; min-height: 0; padding-top: 34px; padding-bottom: 60px; gap: 44px }
  .about-grid, .faq-grid, .contact-grid, .svc-grid { grid-template-columns: 1fr }
  .svc-info { position: static }
  .since { right: 14px }
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px }
  .gal-themes { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px }
  .svc-list a { grid-template-columns: 44px 1fr 40px; gap: 14px; padding: 24px 0 }
  .svc-list .price { grid-column: 2; grid-row: 2 }
  .svc-list .go { width: 40px; height: 40px; grid-row: 1 / 3; grid-column: 3 }
  .svc-list a:hover { padding-left: 0 }
  .foot-in { grid-template-columns: 1fr }
  .reviews .revs, [data-t="plan"] .reviews .revs { grid-template-columns: 1fr }
  [data-t="venue"] .pano-bar { grid-template-columns: repeat(2, 1fr) }
  [data-t="venue"] .pano-bar div:nth-child(2) { border-right: 0 }
  [data-t="venue"] .pano-bar div:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, .18) }
  [data-t="bloom"] .hero-arch .a1 { left: -6px; width: 38% }
  [data-t="feast"] .hero-split .a1 { right: 0 }
  [data-t="feast"] .badge-round { left: 0; width: 112px; height: 112px }
  [data-t="glow"] .hero-portrait .hero-art::before { right: 0 }
  [data-t="plan"] .hero-editorial .hero-art { height: 62vh }
  [data-t="plan"] .hero-editorial .hero-art::after { display: none }
  .nav-cta { display: none }
  .dock { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-2); border-radius: 18px; padding: 6px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45) }
  .dock a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; font-size: 12px; font-weight: 600; border-radius: 13px; color: var(--ink) }
  .dock svg { width: 20px; height: 20px }
  .dock .dock-main { background: var(--accent); color: var(--on-accent) }
  body { padding-bottom: 92px }
  .lightbox { padding: 60px 12px }
  .lb-nav { top: auto; bottom: 18px }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: 12px }
  .amenities { grid-template-columns: 1fr }
  .row-btns .btn { flex: 1 1 100% }
  .gal-grid .g:nth-child(6n + 1) { grid-column: span 2 }
  .menu-item { grid-template-columns: 68px 1fr; gap: 14px }
  .menu-item img { width: 68px; height: 68px }
  .menu-top { flex-wrap: wrap }
  .dots { display: none }
  .brand-name { font-size: 1.15rem }
}

/* ---------- Real partner sites: missing pieces ---------- */
.about-grid.no-img { grid-template-columns: 1fr; max-width: 820px }
.card:not(:has(.card-img)) .card-body { padding-top: 26px }
.menu-item:not(:has(img)) { grid-template-columns: 1fr }
.hero-bg.no-photo { background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 55%, #111), #111 70%) }

/* One or two cards / packages / reviews: keep them their normal size, centred. */
.cards:not(:has(> :nth-child(3))), .packages:not(:has(> :nth-child(3))) { grid-template-columns: repeat(auto-fit, minmax(230px, 320px)); justify-content: center }
.revs:has(> .rev:only-child) { grid-template-columns: minmax(0, 560px) }
.revs:has(> .rev:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 480px)) }
[data-t="classic"] .revs { justify-content: center; margin: 0 auto }
@media (max-width: 560px) { .cards, .packages { grid-template-columns: 1fr } .revs:has(> .rev:nth-child(2):last-child) { grid-template-columns: 1fr } }

/* ---------- Enquiry form built into the site (Lead Machine embed) ---------- */
.enquire { background: var(--bg-2) }
.enquire-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start }
.enquire-text { position: sticky; top: calc(var(--nav-h) + 30px) }
.enquire-text .h2 { margin-bottom: 18px }
.enquire-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px }
.enquire-points li { display: flex; gap: 10px; align-items: flex-start }
.enquire-points svg { color: var(--accent); margin-top: 3px }
.enquire-alt { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center }
.enquire-alt a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink) }
.enquire-alt a:hover { color: var(--accent) }
.enquire-card { background: #fff; color: #191714; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(6px, 1.4vw, 14px); overflow: hidden }
.enquire-frame { display: block; width: 100%; height: 760px; border: 0; background: transparent; transition: height .25s ease }
.is-dark .enquire-card { border-color: transparent }
@media (max-width: 860px) {
  .enquire-grid { grid-template-columns: 1fr }
  .enquire-text { position: static }
  .enquire-card { margin: 0 calc(var(--gut) * -.5) }
}
section[id] { scroll-margin-top: calc(var(--nav-h) - 1px) }

/* ---------- Photography covers (Templates: Mosaic, Filmroll, Polaroid, Vogue, Exhibit, Duet, Bold, Matte, Journal) ---------- */
.ph { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--gut) clamp(56px, 7vw, 96px) }
.ph figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--bg-2) }
.ph figure img { width: 100%; height: 100%; object-fit: cover }
.ph .hero-sub { max-width: 560px }

/* Mosaic: five photos, the text in a card over them */
.ph-mosaic .ph-art { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(170px, 31vh, 330px)); gap: 8px }
.ph-mosaic .p0 { grid-row: span 2 }
.ph-mosaic .ph-text { position: relative; z-index: 2; max-width: 780px; margin: -110px auto 0; padding: clamp(26px, 4vw, 44px); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); text-align: center }
.ph-mosaic .hero-sub { margin-left: auto; margin-right: auto }
.ph-mosaic .row-btns, .ph-mosaic .hero-rating { justify-content: center }
.ph-mosaic .display { font-size: clamp(2.4rem, 5vw, 4.4rem) }

/* Film roll: a strip of frames with sprocket holes under the title */
.ph-film { display: flex; flex-direction: column; max-width: none; padding-left: 0; padding-right: 0 }
.ph-film .ph-text { order: -1; max-width: 940px; margin: 0 auto; padding: 0 var(--gut) 44px; text-align: center }
.ph-film .hero-sub { margin-left: auto; margin-right: auto }
.ph-film .row-btns, .ph-film .hero-rating { justify-content: center }
.ph-film .display { font-size: clamp(3.2rem, 9vw, 8rem); line-height: .9 }
.ph-film .ph-art { position: relative; display: flex; gap: 12px; padding: 30px 12px; background: #050505; transform: rotate(-1.2deg); margin: 0 -20px }
.ph-film .ph-art::before, .ph-film .ph-art::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, .82) 12px 26px); border-radius: 2px }
.ph-film .ph-art::before { top: 9px } .ph-film .ph-art::after { bottom: 9px }
.ph-film figure { flex: 1 1 0; aspect-ratio: 3 / 2; border-radius: 3px }

/* Polaroid: tilted instant photos beside the text */
.ph-polaroid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-polaroid .ph-text { order: -1 }
.ph-polaroid .display { font-size: clamp(3.2rem, 7.4vw, 6.6rem); line-height: .95 }
.ph-polaroid .ph-art { position: relative; height: min(72vh, 600px) }
.ph-polaroid figure { position: absolute; width: 56%; padding: 12px 12px 54px; background: #fff; border-radius: 3px; overflow: visible; box-shadow: 0 26px 40px -24px rgba(0, 0, 0, .45); transition: transform .5s var(--ease) }
.ph-polaroid figure img { aspect-ratio: 1; height: auto }
.ph-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 13px; text-align: center; font-family: var(--head); font-size: 1.45rem; line-height: 1; color: #2a2520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px }
.ph-polaroid .p0 { left: 2%; top: 4%; transform: rotate(-7deg) }
.ph-polaroid .p1 { right: 0; top: 0; width: 48%; transform: rotate(6deg) }
.ph-polaroid .p2 { left: 26%; bottom: 0; width: 52%; transform: rotate(-1.5deg); z-index: 2 }
.ph-polaroid figure:hover { transform: rotate(0) scale(1.03); z-index: 3 }

/* Magazine: a giant masthead, then one wide photo */
.ph-magazine { display: flex; flex-direction: column; gap: 26px }
.ph-magazine .ph-text { order: -1; display: grid; justify-items: center; text-align: center }
.ph-magazine .eyebrow { width: 100%; padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); letter-spacing: .3em }
.ph-magazine .display { font-size: clamp(3.6rem, 13.5vw, 13rem); line-height: .82; letter-spacing: -0.045em; text-transform: uppercase; margin-top: 14px }
.ph-magazine .hero-sub { margin: 18px auto 0 }
.ph-magazine .row-btns, .ph-magazine .hero-rating { justify-content: center }
.ph-magazine .ph-art figure { aspect-ratio: 21 / 9; border-radius: 0 }

/* Gallery wall: framed prints on a wall beside the text */
.ph-wall { display: grid; grid-template-columns: .8fr 1.35fr; gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-wall .ph-text { order: -1 }
.ph-wall .display { font-size: clamp(2.6rem, 5vw, 4.6rem) }
.ph-wall .ph-art { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 26px; padding: clamp(24px, 4vw, 48px); background: var(--bg-2); border-radius: var(--r) }
.ph-wall figure { border: 9px solid #1d1d1d; padding: clamp(10px, 1.6vw, 18px); background: #fff; border-radius: 0; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .5) }
.ph-wall figure img { aspect-ratio: 4 / 5 }
.ph-wall .p0 { grid-row: span 2; align-self: center }
.ph-wall .p1 img, .ph-wall .p2 img { aspect-ratio: 5 / 4 }

/* Duet: two arched portraits with the title between them */
.ph-duo { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-duo .ph-art { display: contents }
.ph-duo .p0 { grid-column: 1; grid-row: 1; transform: translateY(-24px) }
.ph-duo .p1 { grid-column: 3; grid-row: 1; transform: translateY(24px) }
.ph-duo figure { aspect-ratio: 3 / 4.6; border-radius: 999px 999px var(--r-img) var(--r-img); box-shadow: var(--shadow) }
.ph-duo .ph-text { grid-column: 2; grid-row: 1; text-align: center }
.ph-duo .display { font-size: clamp(2.6rem, 5vw, 4.6rem); font-style: italic }
.ph-duo .hero-sub { margin-left: auto; margin-right: auto; font-size: 1.05rem }
.ph-duo .row-btns, .ph-duo .hero-rating { justify-content: center }

/* Big type: the photo shows through huge letters */
.ph-type { text-align: center; min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center }
.ph-type .ph-art { display: none }
.ph-type .display { font-size: clamp(4.2rem, 17vw, 16rem); line-height: .82; letter-spacing: -0.03em; text-transform: uppercase; background: var(--ph-img) center / cover no-repeat, var(--ink); -webkit-background-clip: text; background-clip: text; color: transparent }
.ph-type .hero-sub { margin: 26px auto 0 }
.ph-type .row-btns, .ph-type .hero-rating { justify-content: center }

/* Matte: one print in a wide mat, the text underneath */
.ph-matte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px }
.ph-matte .ph-art { width: min(100%, 980px); padding: clamp(16px, 3.4vw, 44px); background: var(--card); box-shadow: var(--shadow); border-radius: 2px }
.ph-matte figure { aspect-ratio: 16 / 10; border-radius: 0 }
.ph-matte .display { font-size: clamp(2.6rem, 6vw, 5rem) }
.ph-matte .hero-sub { margin-left: auto; margin-right: auto }
.ph-matte .row-btns, .ph-matte .hero-rating { justify-content: center }

/* Journal: a tall photo with a small print on it, the story beside */
.ph-journal { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 96px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-journal .ph-art { position: relative }
.ph-journal .p0 { aspect-ratio: 4 / 5 }
.ph-journal .p1 { position: absolute; right: -28px; bottom: -28px; width: 42%; aspect-ratio: 1; border: 8px solid var(--bg); box-shadow: var(--shadow) }
.ph-journal .ph-text { padding-left: clamp(18px, 3vw, 36px); border-left: 1px solid var(--line-2) }
.ph-journal .eyebrow { font-style: italic; letter-spacing: .02em; text-transform: none; font-family: var(--head); font-size: 1.15rem }
.ph-journal .display { font-size: clamp(2.6rem, 5.6vw, 5rem) }

/* Galleries: a wall of polaroids, and a photo essay */
.gal-polaroids { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 28px; padding: 12px 6px }
.gal-polaroids .g { padding: 12px 12px 48px; background: #fff; border-radius: 3px; overflow: visible; box-shadow: 0 20px 34px -20px rgba(0, 0, 0, .4); transform: rotate(-2deg); transition: transform .4s var(--ease) }
.gal-polaroids .g:nth-child(even) { transform: rotate(2.2deg) }
.gal-polaroids .g:nth-child(3n) { transform: rotate(-.8deg) }
.gal-polaroids .g:hover { transform: rotate(0) scale(1.04); z-index: 2 }
.gal-polaroids .g img { aspect-ratio: 1; height: auto }
.gal-polaroids .g figcaption { top: auto; bottom: 14px; padding: 0 10px; background: none; color: #2a2520; text-align: center; font-family: var(--head); font-size: 1.3rem; opacity: 1; transform: none }
.gal-essay { grid-template-columns: repeat(12, 1fr); gap: clamp(22px, 4vw, 52px) 22px }
.gal-essay .g:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 8 }
.gal-essay .g:nth-child(3n + 2) { grid-column: 1 / span 7; aspect-ratio: 4 / 3 }
.gal-essay .g:nth-child(3n) { grid-column: 8 / -1; aspect-ratio: 3 / 4; margin-top: clamp(30px, 6vw, 80px) }

@media (max-width: 860px) {
  .ph-polaroid, .ph-wall, .ph-duo, .ph-journal { grid-template-columns: 1fr; min-height: 0 }
  .ph-polaroid .ph-text, .ph-wall .ph-text { order: 0 }
  .ph-polaroid .ph-art { height: 380px }
  .ph-duo .ph-art { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; grid-row: 2 }
  .ph-duo .p0, .ph-duo .p1 { grid-column: auto; grid-row: auto; transform: none }
  .ph-duo .ph-text { grid-column: 1; grid-row: 1 }
  .ph-mosaic .ph-art { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 150px }
  .ph-mosaic .p0 { grid-column: span 2; grid-row: auto }
  .ph-mosaic .p3, .ph-mosaic .p4 { display: none }
  .ph-mosaic .ph-text { margin-top: -50px }
  .ph-film figure:nth-child(n + 3) { display: none }
  .ph-journal .p1 { right: 10px; bottom: -20px }
  .ph-journal .ph-text { border-left: 0; padding-left: 0 }
  .gal-essay .g:nth-child(n) { grid-column: 1 / -1; margin-top: 0; aspect-ratio: 4 / 3 }
}

/* Insta: a profile header and a 3 x 3 grid, like the partner's Instagram */
.ph-insta { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-insta .ph-text { order: -1 }
.ph-insta .ph-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px }
.ph-insta figure { aspect-ratio: 1; border-radius: 0 }
.ph-insta .ph-art { border-radius: var(--r); overflow: hidden }
.ph-ig { display: flex; align-items: center; gap: 22px; margin-bottom: 26px }
.ph-ig-av { width: 86px; height: 86px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--ink); font-family: var(--head); font-size: 2rem; font-weight: 700; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent) }
.ph-ig dl { display: flex; gap: 26px; margin: 0 }
.ph-ig dl div { display: grid; text-align: center }
.ph-ig dd { margin: 0; font-weight: 700; font-size: 1.25rem; color: var(--ink) }
.ph-ig dt { font-size: 13px; color: var(--muted) }
.ph-insta .display { font-size: clamp(2.4rem, 4.6vw, 4.2rem) }

/* Scrapbook: prints taped down at angles */
.ph-scrapbook { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 5vw, 70px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-scrapbook .ph-text { order: -1 }
.ph-scrapbook .ph-art { position: relative; height: min(74vh, 620px) }
.ph-scrapbook figure { position: absolute; padding: 8px; background: #fff; border-radius: 2px; overflow: visible; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .45) }
.ph-scrapbook figure::before { content: ""; position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, .7)); transform: rotate(-4deg); opacity: .85 }
.ph-scrapbook figure img { aspect-ratio: 4 / 5 }
.ph-scrapbook .p0 { left: 0; top: 6%; width: 40%; transform: rotate(-5deg) }
.ph-scrapbook .p1 { left: 34%; top: 0; width: 34%; transform: rotate(3deg) }
.ph-scrapbook .p2 { right: 0; top: 10%; width: 32%; transform: rotate(-2deg) }
.ph-scrapbook .p3 { left: 10%; bottom: 0; width: 38%; transform: rotate(4deg) }
.ph-scrapbook .p3 img, .ph-scrapbook .p4 img { aspect-ratio: 5 / 4 }
.ph-scrapbook .p4 { right: 4%; bottom: 4%; width: 44%; transform: rotate(-3deg) }
.ph-scrapbook .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }

/* Halo: a round portrait with the name turning around it */
.ph-ring { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-ring .ph-art { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center }
.ph-ring figure { position: absolute; inset: 13%; border-radius: 50% }
.ph-ring svg.ph-halo { position: absolute; inset: 0; width: 100%; height: 100%; animation: ph-spin 40s linear infinite }
.ph-ring svg text { font: 600 9.5px var(--body); letter-spacing: .32em; fill: var(--ink) }
@keyframes ph-spin { to { transform: rotate(360deg) } }
.ph-ring .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }
@media (prefers-reduced-motion: reduce) { .ph-ring svg.ph-halo { animation: none } }

/* Index: one big photo and a numbered list of the services */
.ph-index { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: stretch; min-height: calc(100svh - var(--nav-h)) }
.ph-index .ph-art figure { height: 100%; min-height: 460px; border-radius: 0 }
.ph-index .ph-text { display: flex; flex-direction: column; justify-content: center }
.ph-index .display { font-size: clamp(2.4rem, 4.8vw, 4.4rem) }
ol.ph-list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line-2) }
ol.ph-list li { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--head); font-size: 1.35rem; color: var(--ink) }
ol.ph-list li span { font: 600 12px var(--body); letter-spacing: .1em; color: var(--muted) }

/* Panels: tall photos side by side that open on hover */
.ph-panels { display: flex; flex-direction: column; gap: 34px; max-width: none }
.ph-panels .ph-text { order: -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px 50px; align-items: end; width: 100%; max-width: 1310px; margin: 0 auto }
.ph-panels .ph-text > .eyebrow, .ph-panels .ph-text > .display { grid-column: 1 }
.ph-panels .ph-text > .hero-sub, .ph-panels .ph-text > .row-btns, .ph-panels .ph-text > .hero-rating { grid-column: 2; margin-top: 0 }
.ph-panels .ph-text > .hero-sub { grid-row: 1 / span 2; align-self: end }
.ph-panels .display { font-size: clamp(2.8rem, 6.5vw, 6rem) }
.ph-panels .ph-art { display: flex; gap: 10px; height: min(62vh, 560px) }
.ph-panels figure { flex: 1 1 0; transition: flex-grow .7s var(--ease) }
.ph-panels figure:hover, .ph-panels .p0 { flex-grow: 2.4 }
.ph-panels .ph-art:hover .p0:not(:hover) { flex-grow: 1 }

/* Halves: a full-height photo beside a big title */
.ph-halves { display: grid; grid-template-columns: 1fr 1fr; max-width: none; padding: 0; min-height: calc(100svh - var(--nav-h)) }
.ph-halves figure { height: 100%; border-radius: 0 }
.ph-halves .ph-text { align-self: center; padding: clamp(40px, 6vw, 100px) }
.ph-halves .display { font-size: clamp(3rem, 6.6vw, 6.4rem); line-height: .95 }

/* Contact sheet: rows of frames with their numbers, one circled in red */
.ph-sheet { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-sheet .ph-text { order: -1 }
.ph-sheet .ph-art { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 8px; padding: 22px 18px 30px; background: #141414; border-radius: 4px; counter-reset: frame; box-shadow: var(--shadow) }
.ph-sheet figure { aspect-ratio: 3 / 2; border-radius: 0; overflow: visible; counter-increment: frame }
.ph-sheet figure::after { content: counter(frame, decimal-leading-zero) "A"; position: absolute; left: 0; bottom: -17px; font: 600 10px ui-monospace, monospace; color: #e9b44c; letter-spacing: .1em }
.ph-sheet .p2::before { content: ""; position: absolute; inset: -9px; border: 3px solid #e53935; border-radius: 46% 54% 50% 50%; transform: rotate(-4deg); z-index: 2 }
.ph-sheet .display { font-size: clamp(2.6rem, 5.2vw, 4.8rem) }

@media (max-width: 860px) {
  .ph-insta, .ph-scrapbook, .ph-ring, .ph-index, .ph-halves, .ph-sheet { grid-template-columns: 1fr; min-height: 0 }
  .ph-insta .ph-text, .ph-scrapbook .ph-text, .ph-sheet .ph-text { order: 0 }
  .ph-scrapbook .ph-art { height: 420px }
  .ph-index .ph-art figure { min-height: 340px }
  .ph-halves figure { height: 56vh }
  .ph-halves .ph-text { padding: 34px var(--gut) 56px }
  .ph-panels .ph-text { grid-template-columns: 1fr }
  .ph-panels .ph-text > * { grid-column: 1 !important; grid-row: auto !important }
  .ph-panels .ph-art { height: 360px }
  .ph-panels figure:nth-child(n + 4) { display: none }
  .ph-sheet .ph-art { grid-template-columns: repeat(3, 1fr) }
  .ph-sheet figure:nth-child(n + 7) { display: none }
  .ph-ig-av { width: 64px; height: 64px; font-size: 1.5rem }
  .ph-ig dl { gap: 16px }
}

/* Marquee: two columns of photos drifting slowly beside the text */
.ph-marquee { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-marquee .ph-text { order: -1 }
.ph-marquee .ph-art { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: min(82vh, 720px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent) }
.ph-marquee figure { aspect-ratio: 4 / 5 }
.ph-marquee figure:nth-child(odd) { animation: ph-up 26s ease-in-out infinite alternate }
.ph-marquee figure:nth-child(even) { animation: ph-down 26s ease-in-out infinite alternate }
@keyframes ph-up { from { transform: translateY(0) } to { transform: translateY(-58%) } }
@keyframes ph-down { from { transform: translateY(-58%) } to { transform: translateY(0) } }
.ph-marquee .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }

/* Deck: photos fanned like a hand of cards */
.ph-stack { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-stack .ph-text { order: -1 }
.ph-stack .ph-art { position: relative; height: min(70vh, 580px) }
.ph-stack figure { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 3 / 4; margin: 0; border: 6px solid var(--card); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .55); transition: transform .6s var(--ease) }
.ph-stack .p0 { transform: translate(-50%, -50%) translateX(-58%) rotate(-14deg) }
.ph-stack .p1 { transform: translate(-50%, -50%) translateX(-20%) rotate(-5deg) }
.ph-stack .p2 { transform: translate(-50%, -50%) translateX(20%) rotate(5deg) }
.ph-stack .p3 { transform: translate(-50%, -50%) translateX(58%) rotate(14deg); z-index: 1 }
.ph-stack .ph-art:hover .p0 { transform: translate(-50%, -50%) translateX(-78%) rotate(-18deg) }
.ph-stack .ph-art:hover .p3 { transform: translate(-50%, -50%) translateX(78%) rotate(18deg) }
.ph-stack .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }

/* Spotlight: one oval photo glowing on a dark page, the text below */
.ph-spotlight { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%) }
.ph-spotlight .ph-art { width: min(340px, 64vw, 44vh) }
.ph-spotlight figure { aspect-ratio: 3 / 4; border-radius: 50% / 42%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 90px -10px color-mix(in srgb, var(--accent) 55%, transparent) }
.ph-spotlight .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
.ph-spotlight .hero-sub { margin-left: auto; margin-right: auto }
.ph-spotlight .row-btns, .ph-spotlight .hero-rating { justify-content: center }

/* Triptych: three tall photos, the title over the middle */
.ph-triptych { max-width: none; padding: 0; position: relative; display: grid; align-items: center }
.ph-triptych .ph-art { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: calc(100svh - var(--nav-h)); min-height: 560px }
.ph-triptych figure { border-radius: 0 }
.ph-triptych .ph-text { grid-area: 1 / 1; justify-self: center; width: min(92%, 700px); padding: clamp(28px, 4vw, 48px); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--r); text-align: center; box-shadow: var(--shadow); position: relative; z-index: 2 }
.ph-triptych .display { font-size: clamp(2.4rem, 5vw, 4.4rem) }
.ph-triptych .hero-sub { margin-left: auto; margin-right: auto }
.ph-triptych .row-btns, .ph-triptych .hero-rating { justify-content: center }

/* Fan: photos spread in an arc, the text under them */
.ph-arc { display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden }
.ph-arc .ph-art { position: relative; width: 100%; height: clamp(280px, 42vw, 470px) }
.ph-arc figure { position: absolute; left: 50%; bottom: 0; width: clamp(130px, 19vw, 250px); aspect-ratio: 3 / 4; margin-left: calc(clamp(130px, 19vw, 250px) / -2); transform-origin: 50% 260%; border: 5px solid var(--card); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .5) }
.ph-arc .p0 { transform: rotate(-26deg) } .ph-arc .p1 { transform: rotate(-13deg) } .ph-arc .p2 { transform: rotate(0); z-index: 2 } .ph-arc .p3 { transform: rotate(13deg) } .ph-arc .p4 { transform: rotate(26deg) }
.ph-arc .ph-text { position: relative; z-index: 3; margin-top: 56px; max-width: 760px }
.ph-arc .display { font-size: clamp(2.6rem, 6vw, 5.2rem) }
.ph-arc .hero-sub { margin-left: auto; margin-right: auto }
.ph-arc .row-btns, .ph-arc .hero-rating { justify-content: center }

@media (prefers-reduced-motion: reduce) { .ph-marquee figure { animation: none !important } }
@media (max-width: 860px) {
  .ph-marquee, .ph-stack { grid-template-columns: 1fr; min-height: 0 }
  .ph-marquee .ph-art { height: 420px }
  .ph-stack .ph-art { height: 360px }
  .ph-triptych .ph-art { height: 72vh; min-height: 480px }
  .ph-arc .ph-art { height: 250px }
}

/* ======================= 45 more covers, one per design (Templates::VARIANTS) ======================= */
/* Shared: two columns, text first */
.ph-cutout, .ph-overlap, .ph-corner, .ph-blocks, .ph-petals, .ph-kaleido, .ph-plate, .ph-menucard, .ph-chalk, .ph-ticket, .ph-blueprint, .ph-mirror, .ph-swatch, .ph-compact, .ph-vinyl, .ph-poster, .ph-tape, .ph-lights, .ph-calendar, .ph-timeline, .ph-checklist, .ph-board { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-cutout .ph-text, .ph-corner .ph-text, .ph-blocks .ph-text, .ph-petals .ph-text, .ph-kaleido .ph-text, .ph-plate .ph-text, .ph-chalk .ph-text, .ph-blueprint .ph-text, .ph-swatch .ph-text, .ph-compact .ph-text, .ph-poster .ph-text, .ph-tape .ph-text, .ph-calendar .ph-text, .ph-timeline .ph-text, .ph-checklist .ph-text, .ph-board .ph-text { order: -1 }
/* Centered: text in the middle */
.ph-window, .ph-band, .ph-garland, .ph-canopy, .ph-drape, .ph-tray, .ph-portal, .ph-lookbook, .ph-silk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 34px }
.ph-window .hero-sub, .ph-band .hero-sub, .ph-garland .hero-sub, .ph-canopy .hero-sub, .ph-drape .hero-sub, .ph-tray .hero-sub, .ph-portal .hero-sub, .ph-lookbook .hero-sub, .ph-silk .hero-sub, .ph-bubbles .hero-sub, .ph-pillars .hero-sub, .ph-equalizer .hero-sub, .ph-invite .hero-sub { margin-left: auto; margin-right: auto }
.ph-window .row-btns, .ph-band .row-btns, .ph-garland .row-btns, .ph-canopy .row-btns, .ph-drape .row-btns, .ph-tray .row-btns, .ph-portal .row-btns, .ph-lookbook .row-btns, .ph-silk .row-btns, .ph-bubbles .row-btns, .ph-pillars .row-btns, .ph-equalizer .row-btns, .ph-invite .row-btns,
.ph-window .hero-rating, .ph-band .hero-rating, .ph-garland .hero-rating, .ph-canopy .hero-rating, .ph-drape .hero-rating, .ph-tray .hero-rating, .ph-portal .hero-rating, .ph-lookbook .hero-rating, .ph-silk .hero-rating, .ph-bubbles .hero-rating, .ph-pillars .hero-rating, .ph-equalizer .hero-rating, .ph-invite .hero-rating { justify-content: center }
.ph-window .ph-text, .ph-garland .ph-text, .ph-tray .ph-text { order: -1 }

/* -- Photography -- */
/* Cutout: a photo cut on a slant, a small print over its corner */
.ph-cutout .ph-art { position: relative; height: min(80vh, 700px) }
.ph-cutout .p0 { height: 100%; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); border-radius: 0 }
.ph-cutout .p1 { position: absolute; left: -6%; bottom: 8%; width: 36%; aspect-ratio: 1; border: 8px solid var(--bg); border-radius: 0 }
.ph-cutout .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }
/* Windows: three arched windows, the middle one taller */
.ph-window .ph-art { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 26px); width: 100% }
.ph-window figure { width: min(28%, 300px); aspect-ratio: 2 / 3; border-radius: 999px 999px 0 0; border: 10px solid var(--card); box-shadow: var(--shadow) }
.ph-window .p1 { aspect-ratio: 2 / 3.6 }
.ph-window .display { font-size: clamp(2.6rem, 6vw, 5rem) }
/* Pillars: photos stacked on both sides, the text between */
.ph-pillars { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: auto auto; gap: 14px clamp(20px, 4vw, 56px); align-items: center }
.ph-pillars .ph-art { display: contents }
.ph-pillars figure { aspect-ratio: 4 / 5 }
.ph-pillars .p0 { grid-area: 1 / 1 } .ph-pillars .p1 { grid-area: 2 / 1 } .ph-pillars .p2 { grid-area: 1 / 3 } .ph-pillars .p3 { grid-area: 2 / 3 }
.ph-pillars .ph-text { grid-area: 1 / 2 / 3 / 3; text-align: center }
.ph-pillars .display { font-size: clamp(2.6rem, 5vw, 4.6rem) }
/* Overlap: two prints crossing, each with an outline offset */
.ph-overlap .ph-art { position: relative; height: min(76vh, 640px) }
.ph-overlap figure { position: absolute; overflow: visible }
.ph-overlap figure::after { content: ""; position: absolute; inset: 0; transform: translate(16px, 16px); border: 1.5px solid var(--accent); border-radius: inherit; z-index: -1 }
.ph-overlap .p0 { left: 0; top: 0; width: 66%; height: 78% }
.ph-overlap .p1 { right: 0; bottom: 0; width: 48%; height: 56%; z-index: 2; box-shadow: var(--shadow) }
.ph-overlap .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Bubbles: round photos floating around the title */
.ph-bubbles { display: grid; align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-bubbles .ph-art { grid-area: 1 / 1; position: relative; height: min(84vh, 760px) }
.ph-bubbles figure { position: absolute; aspect-ratio: 1; border-radius: 50%; box-shadow: var(--shadow) }
.ph-bubbles .p0 { left: 2%; top: 8%; width: 21% } .ph-bubbles .p1 { right: 5%; top: 4%; width: 16% } .ph-bubbles .p2 { left: 9%; bottom: 4%; width: 14% }
.ph-bubbles .p3 { right: 2%; bottom: 10%; width: 23% } .ph-bubbles .p4 { left: 41%; top: -2%; width: 9% } .ph-bubbles .p5 { right: 34%; bottom: -1%; width: 11% }
.ph-bubbles .ph-text { grid-area: 1 / 1; justify-self: center; max-width: 620px; text-align: center; position: relative; z-index: 2 }
.ph-bubbles .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }

/* -- Every business -- */
/* Card: one big rounded card, a wide photo on top */
.ph-card { max-width: 1120px }
.ph-card .ph-art { border-radius: 28px 28px 0 0; overflow: hidden }
.ph-card figure { aspect-ratio: 21 / 8; border-radius: 0 }
.ph-card .ph-text { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px 40px; align-items: end; padding: clamp(26px, 4vw, 46px); background: var(--card); border-radius: 0 0 28px 28px; box-shadow: var(--shadow) }
.ph-card .ph-text > .eyebrow, .ph-card .ph-text > .display { grid-column: 1 }
.ph-card .ph-text > .hero-sub, .ph-card .ph-text > .row-btns, .ph-card .ph-text > .hero-rating { grid-column: 2; margin-top: 0 }
.ph-card .ph-text > .hero-sub { grid-row: 1 / span 2; align-self: end }
.ph-card .display { font-size: clamp(2.4rem, 5vw, 4.4rem) }
/* Slant: a full photo with a slanted bottom edge, the text on it */
.ph-slant { max-width: none; padding: 0; display: grid; align-items: center }
.ph-slant .ph-art { grid-area: 1 / 1 }
.ph-slant figure { height: calc(100svh - var(--nav-h)); min-height: 560px; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%) }
.ph-slant figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .1) 70%) }
.ph-slant .ph-text { grid-area: 1 / 1; z-index: 2; max-width: 620px; margin: -8% 0 0 max(var(--gut), calc((100vw - 1240px) / 2)); color: #fff }
.ph-slant .display { font-size: clamp(3rem, 6.6vw, 6rem) }
/* Band: the title above a wide band of photo, the rest below */
.ph-band .ph-text { display: contents }
.ph-band .eyebrow { order: 1; margin: 0 } .ph-band .display { order: 2; font-size: clamp(3rem, 9vw, 8rem); line-height: .9 } .ph-band .ph-art { order: 3; width: 100vw; margin: 6px calc(50% - 50vw) }
.ph-band .hero-sub { order: 4; margin-top: 0 } .ph-band .row-btns { order: 5 } .ph-band .hero-rating { order: 6; margin-top: 0 }
.ph-band figure { height: clamp(220px, 34vh, 380px); border-radius: 0 }
/* Corner: a photo with one big rounded corner, a colour block behind */
.ph-corner .ph-art { position: relative }
.ph-corner .ph-art::before { content: ""; position: absolute; left: -26px; bottom: -26px; width: 55%; height: 55%; background: var(--accent); border-radius: 0 0 0 var(--r) }
.ph-corner figure { aspect-ratio: 4 / 4.6; border-radius: 260px 0 0 0 }
.ph-corner .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }
/* Bauhaus: colour squares and circles around two photos */
.ph-blocks .ph-art { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
.ph-blocks figure { aspect-ratio: 1; border-radius: 0 }
.ph-blocks .ph-art::before, .ph-blocks .ph-art::after { content: ""; aspect-ratio: 1 }
.ph-blocks .ph-art::before { order: -1; background: radial-gradient(circle at 50% 50%, var(--bg) 0 32%, transparent 33%), var(--accent) }
.ph-blocks .p0 { order: 0 } .ph-blocks .p1 { order: 2 }
.ph-blocks .ph-art::after { order: 1; background: radial-gradient(circle at 0 100%, var(--accent) 0 60%, transparent 61%), var(--ink) }
.ph-blocks .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }

/* -- Decoration -- */
/* Garland: photos hanging on a string */
.ph-garland .ph-art { position: relative; display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); width: 100%; padding-top: 40px }
.ph-garland .ph-art::before { content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 120px; border-top: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: scaleY(-1); transform-origin: 50% 0 }
.ph-garland figure { width: min(22%, 230px); aspect-ratio: 3 / 4; padding: 8px; background: #fff; border-radius: 2px; overflow: visible; box-shadow: 0 20px 34px -20px rgba(0, 0, 0, .45) }
.ph-garland figure::before { content: ""; position: absolute; left: 50%; top: -14px; width: 10px; height: 22px; margin-left: -5px; background: var(--accent); border-radius: 3px }
.ph-garland .p0 { margin-top: 0; transform: rotate(-4deg) } .ph-garland .p1 { margin-top: 56px; transform: rotate(2deg) } .ph-garland .p2 { margin-top: 56px; transform: rotate(-2deg) } .ph-garland .p3 { margin-top: 0; transform: rotate(4deg) }
.ph-garland .display { font-size: clamp(2.6rem, 6vw, 5rem) }
/* Leaf: four photos cut like petals */
.ph-petals .ph-art { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.ph-petals figure { aspect-ratio: 1 }
.ph-petals .p0, .ph-petals .p3 { border-radius: 0 72% 0 72% } .ph-petals .p1, .ph-petals .p2 { border-radius: 72% 0 72% 0 }
.ph-petals .display { font-size: clamp(2.8rem, 6vw, 5.2rem); font-style: italic }
/* Canopy: a big arch over the photo, the text below */
.ph-canopy .ph-art { width: min(100%, 1100px) }
.ph-canopy figure { height: min(64vh, 560px); border-radius: 50% 50% 0 0 / 70% 70% 0 0 }
.ph-canopy .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Kaleido: four photos in a diamond */
.ph-kaleido .ph-art { width: 74%; justify-self: center; aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transform: rotate(45deg) }
.ph-kaleido figure { aspect-ratio: 1 }
.ph-kaleido figure img { transform: rotate(-45deg) scale(1.42) }
.ph-kaleido .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Drape: the photo between two curtains */
.ph-drape .ph-art { position: relative; width: min(100%, 1000px); padding: 0 16% }
.ph-drape .ph-art::before, .ph-drape .ph-art::after { content: ""; position: absolute; top: -8px; bottom: 0; width: 22%; z-index: 2; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, #000) 0 10px, var(--accent) 10px 22px, color-mix(in srgb, var(--accent) 70%, #fff) 22px 28px); box-shadow: 0 20px 30px -16px rgba(0, 0, 0, .45) }
.ph-drape .ph-art::before { left: 0; clip-path: polygon(0 0, 100% 0, 60% 50%, 34% 100%, 0 100%) }
.ph-drape .ph-art::after { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 100%, 40% 50%) }
.ph-drape figure { aspect-ratio: 16 / 10; border-radius: 0 }
.ph-drape .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }

/* -- Catering -- */
/* Plate: round photos with white rims, like plates on a table */
.ph-plate .ph-art { position: relative; aspect-ratio: 1.1; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%) }
.ph-plate figure { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 12px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 26px 40px -24px rgba(0, 0, 0, .5) }
.ph-plate .p0 { left: 8%; top: 12%; width: 62% } .ph-plate .p1 { right: 2%; top: 0; width: 34% } .ph-plate .p2 { right: 8%; bottom: 2%; width: 30% }
.ph-plate .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Menu card: the text on a printed menu with double borders, the photo beside */
.ph-menucard .ph-text { padding: clamp(28px, 4vw, 52px); background: var(--card); border: 1px solid var(--line-2); outline: 1px solid var(--line-2); outline-offset: -12px; text-align: center; box-shadow: var(--shadow) }
.ph-menucard .ph-text::before { content: "✦ Menu ✦"; display: block; font: 600 12px var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px }
.ph-menucard .hero-sub { margin-left: auto; margin-right: auto } .ph-menucard .row-btns, .ph-menucard .hero-rating { justify-content: center }
.ph-menucard figure { aspect-ratio: 3 / 4; border-radius: 999px 999px var(--r-img) var(--r-img) }
.ph-menucard .display { font-size: clamp(2.4rem, 5vw, 4.4rem) }
/* Tray: three photos served on a long tray */
.ph-tray .ph-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: min(100%, 1100px); padding: 18px; background: var(--card); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow) }
.ph-tray figure { aspect-ratio: 1; border-radius: 50% }
.ph-tray .display { font-size: clamp(2.6rem, 6vw, 5rem) }
/* Chalk: the text on a chalkboard, a photo taped beside it */
.ph-chalk .ph-text { padding: clamp(30px, 4vw, 52px); background: #1f2b25; color: #f1efe6; border: 12px solid #7a5534; border-radius: 6px; box-shadow: inset 0 0 60px rgba(0, 0, 0, .45), var(--shadow) }
.ph-chalk .ph-text .eyebrow { color: #f3d27a }
.ph-chalk .ph-art figure { aspect-ratio: 4 / 5; transform: rotate(3deg); border: 10px solid #fff; overflow: visible; box-shadow: var(--shadow) }
.ph-chalk .ph-art figure::before { content: ""; position: absolute; top: -18px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: rgba(255, 245, 210, .75); transform: rotate(-3deg); z-index: 2 }
.ph-chalk .display { font-size: clamp(2.6rem, 5.4vw, 4.8rem) }
/* Ticket: the text on an order ticket with a torn edge */
.ph-ticket .ph-text { padding: clamp(28px, 4vw, 48px) clamp(26px, 4vw, 44px) 54px; background: var(--card); font-family: var(--body); box-shadow: var(--shadow); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, transparent 90deg, #000 0) bottom / 28px 14px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, transparent 90deg, #000 0) bottom / 28px 14px repeat-x }
.ph-ticket .ph-text::before { content: "ORDER Nº 001"; display: block; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px dashed var(--line-2); font: 600 12px ui-monospace, monospace; letter-spacing: .2em; color: var(--muted) }
.ph-ticket figure { aspect-ratio: 4 / 5 }
.ph-ticket .display { font-size: clamp(2.4rem, 5vw, 4.4rem) }

/* -- Venues -- */
/* Blueprint: a plan grid behind, corner marks and a size line on the photo */
.ph-blueprint { background-image: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px); background-size: 32px 32px }
.ph-blueprint .ph-art { position: relative; padding: 26px }
.ph-blueprint .ph-art::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--accent) }
.ph-blueprint .ph-art::after { content: "◀  48 m  ▶"; position: absolute; left: 26px; right: 26px; bottom: -4px; text-align: center; font: 600 11px ui-monospace, monospace; letter-spacing: .2em; color: var(--accent); background: var(--bg) }
.ph-blueprint figure { aspect-ratio: 16 / 11; border-radius: 0 }
.ph-blueprint .display { font-size: clamp(2.6rem, 5.6vw, 5rem) }
/* Portal: a tall arched doorway, the text below */
.ph-portal figure { width: min(560px, 80vw); aspect-ratio: 3 / 3.6; border-radius: 999px 999px 0 0; outline: 2px solid var(--accent); outline-offset: 14px; margin: 16px }
.ph-portal .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Horizon: a very wide strip, the text on a card over its corner */
.ph-horizon { max-width: none; padding-left: 0; padding-right: 0; position: relative }
.ph-horizon figure { height: min(62vh, 560px); border-radius: 0 }
.ph-horizon .ph-text { position: relative; z-index: 2; width: min(92%, 640px); margin: -150px var(--gut) 0 auto; padding: clamp(26px, 4vw, 44px); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow) }
.ph-horizon .display { font-size: clamp(2.4rem, 5vw, 4.4rem) }
/* Tiles: six photo tiles with the text as a tile in the middle */
.ph-tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "a t t b" "c d e f"; gap: 10px }
.ph-tiles .ph-art { display: contents }
.ph-tiles figure { aspect-ratio: 1 } .ph-tiles .p0 { grid-area: a } .ph-tiles .p1 { grid-area: b } .ph-tiles .p2 { grid-area: c } .ph-tiles .p3 { grid-area: d } .ph-tiles .p4 { grid-area: e } .ph-tiles .p5 { grid-area: f }
.ph-tiles .ph-text { grid-area: t; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 40px); background: var(--card); border-radius: var(--r-img) }
.ph-tiles .display { font-size: clamp(2rem, 4vw, 3.6rem) }
/* Postcard: a postcard with a stamp and a postmark */
.ph-postcard { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; max-width: 1180px; margin-top: 20px; padding: 0; background: var(--card); box-shadow: var(--shadow); border-radius: 6px }
.ph-postcard .p0 { height: 100%; min-height: 480px; border-radius: 6px 0 0 6px }
.ph-postcard .p1 { position: absolute; right: 26px; top: 22px; width: 92px; aspect-ratio: 4 / 5; padding: 5px; background: #fff; border-radius: 0; outline: 2px dashed var(--line-2); outline-offset: -3px; transform: rotate(4deg); z-index: 3 }
.ph-postcard .p1::after { content: ""; position: absolute; left: -46px; top: 30px; width: 90px; height: 90px; border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 50%; box-shadow: inset 0 0 0 7px var(--card), inset 0 0 0 9px color-mix(in srgb, var(--accent) 50%, transparent) }
.ph-postcard .ph-text { padding: clamp(60px, 7vw, 100px) clamp(26px, 4vw, 48px) 40px; border-left: 1px solid var(--line) }
.ph-postcard .display { font-size: clamp(2.4rem, 4.6vw, 4.2rem) }

/* -- Makeup & styling -- */
/* Mirror: an oval mirror with a gold frame */
.ph-mirror figure { aspect-ratio: 3 / 4; width: 82%; justify-self: center; margin: 0 auto; border-radius: 50%; border: 14px solid color-mix(in srgb, var(--accent) 80%, #fff); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent), var(--shadow) }
.ph-mirror .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Swatch: shade swatches under the text, a tall photo beside */
.ph-swatch figure { aspect-ratio: 3 / 4; border-radius: 0 0 220px 0 }
.ph-swatches { display: flex; gap: 10px; margin-top: 30px }
.ph-swatches i { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35) }
.ph-swatches i:nth-child(1) { background: color-mix(in srgb, var(--accent) 35%, #fff) } .ph-swatches i:nth-child(2) { background: color-mix(in srgb, var(--accent) 65%, #fff) } .ph-swatches i:nth-child(3) { background: var(--accent) } .ph-swatches i:nth-child(4) { background: color-mix(in srgb, var(--accent) 70%, #000) } .ph-swatches i:nth-child(5) { background: color-mix(in srgb, var(--accent) 45%, #000) }
.ph-swatch .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Lookbook: an open book of two photos */
.ph-lookbook .ph-art { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 1000px); padding: 14px; background: var(--card); box-shadow: var(--shadow); transform: perspective(1600px) rotateX(6deg) }
.ph-lookbook .ph-art::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 80px; margin-left: -40px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28) 48%, rgba(255, 255, 255, .25) 52%, transparent) }
.ph-lookbook figure { aspect-ratio: 4 / 5; border-radius: 0 }
.ph-lookbook .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Silk: a wide photo with a soft wave along its bottom */
.ph-silk .ph-art { width: 100vw; margin: 0 calc(50% - 50vw); position: relative }
.ph-silk figure { height: min(60vh, 540px); border-radius: 0 }
.ph-silk .ph-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; background: var(--bg); -webkit-mask: radial-gradient(70px 46px at 50% 100%, #000 99%, transparent) 0 0 / 140px 90px repeat-x; mask: radial-gradient(70px 46px at 50% 100%, #000 99%, transparent) 0 0 / 140px 90px repeat-x }
.ph-silk .ph-text { order: -1 }
.ph-silk .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem); font-style: italic }
/* Compact: a big round photo and a small one, like a compact and its puff */
.ph-compact .ph-art { position: relative; aspect-ratio: 1.1 }
.ph-compact figure { position: absolute; aspect-ratio: 1; border-radius: 50% }
.ph-compact .p0 { left: 0; top: 0; width: 76%; border: 12px solid var(--card); box-shadow: 0 0 0 2px var(--accent), var(--shadow) }
.ph-compact .p1 { right: 0; bottom: 0; width: 40%; border: 8px solid var(--bg); box-shadow: var(--shadow) }
.ph-compact .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }

/* -- DJ & music -- */
/* Equalizer: a full photo with moving bars under the title */
.ph-equalizer { max-width: none; padding: 0; display: grid; align-items: center; color: #fff; text-align: center }
.ph-equalizer .ph-art { grid-area: 1 / 1 }
.ph-equalizer figure { height: calc(100svh - var(--nav-h)); min-height: 560px; border-radius: 0 }
.ph-equalizer figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, .8)) }
.ph-equalizer .ph-text { grid-area: 1 / 1; z-index: 2; max-width: 860px; margin: 0 auto; padding: 0 var(--gut) }
.ph-equalizer .display { font-size: clamp(3.2rem, 9vw, 8rem); line-height: .9 }
.ph-eq { display: flex; justify-content: center; align-items: flex-end; gap: 5px; height: 46px; margin-top: 26px }
.ph-eq i { width: 7px; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: bottom; animation: ph-eq 1.1s ease-in-out infinite alternate }
.ph-eq i:nth-child(3n) { animation-duration: .7s } .ph-eq i:nth-child(3n + 1) { animation-duration: 1.4s } .ph-eq i:nth-child(4n) { animation-delay: -.5s }
@keyframes ph-eq { from { transform: scaleY(.15) } to { transform: scaleY(1) } }
/* Vinyl: the photo is the label of a spinning record */
.ph-vinyl .ph-art { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1d1d1d 2px 4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 70px -30px rgba(0, 0, 0, .8); animation: ph-spin 14s linear infinite }
.ph-vinyl .ph-art::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3%; height: 3%; margin: -1.5% 0 0 -1.5%; border-radius: 50%; background: var(--bg); z-index: 2 }
.ph-vinyl figure { position: absolute; inset: 31%; border-radius: 50% }
.ph-vinyl .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Poster: a gig poster, the photo in two tones */
.ph-poster .ph-art { background: var(--accent) }
.ph-poster figure { aspect-ratio: 3 / 4; border-radius: 0 }
.ph-poster figure img { filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply }
.ph-poster .display { font-size: clamp(3.4rem, 10vw, 9rem); line-height: .85; text-transform: uppercase }
.ph-poster-date { display: inline-block; margin-top: 26px; padding: 8px 14px; border: 2px solid var(--ink); font: 700 13px var(--body); letter-spacing: .25em; text-transform: uppercase }
/* Cassette: the photo is the label of a tape */
.ph-tape .ph-art { position: relative; aspect-ratio: 1.6; padding: 7% 7% 26%; background: #222; border-radius: 22px; box-shadow: inset 0 0 0 6px #2d2d2d, var(--shadow) }
.ph-tape .ph-art::before, .ph-tape .ph-art::after { content: ""; position: absolute; bottom: 7%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#e9e9e9 0 20deg, #bbb 20deg 40deg); box-shadow: 0 0 0 8px #111; animation: ph-spin 4s linear infinite }
.ph-tape .ph-art::before { left: 26% } .ph-tape .ph-art::after { right: 26% }
.ph-tape figure { height: 100%; border-radius: 6px; border: 6px solid var(--accent) }
.ph-tape .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Lights: the photo framed by glowing bulbs */
.ph-lights figure { aspect-ratio: 4 / 5; border-radius: 6px; padding: 18px; background: #160d0d; overflow: visible }
.ph-lights figure::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4.5px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 6px; filter: drop-shadow(0 0 6px var(--accent)); animation: ph-blink 1.6s steps(2) infinite }
.ph-lights figure img { border-radius: 2px }
@keyframes ph-blink { 50% { opacity: .55 } }
.ph-lights .display { font-size: clamp(3rem, 7vw, 6rem); text-transform: uppercase }

/* -- Planners -- */
/* Calendar: a calendar page with the date circled, over the photo */
.ph-calendar .ph-art { position: relative }
.ph-calendar figure { aspect-ratio: 4 / 4.4 }
.ph-cal { position: absolute; right: -18px; bottom: -26px; width: min(64%, 300px); padding: 16px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); z-index: 2 }
.ph-cal b { display: block; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--head); font-size: 1.2rem; text-align: center }
.ph-cal div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 11.5px; color: var(--muted) }
.ph-cal span.on { color: var(--on-accent); background: var(--accent); border-radius: 50%; font-weight: 700 }
.ph-calendar .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Timeline: three photos on a line with the time of day */
.ph-timeline .ph-art { position: relative; display: grid; gap: 22px; padding-left: 40px }
.ph-timeline .ph-art::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2) }
.ph-timeline figure { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 18px; background: none; overflow: visible }
.ph-timeline figure::before { content: ""; position: absolute; left: -36px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--bg) }
.ph-timeline figure img { aspect-ratio: 16 / 10; border-radius: var(--r-img) }
.ph-timeline figcaption { font-family: var(--head); font-size: 1.3rem; color: var(--ink) }
.ph-timeline figcaption small { display: block; font: 600 11.5px var(--body); letter-spacing: .14em; color: var(--accent); text-transform: uppercase }
.ph-timeline .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Checklist: a lined note with ticked items, a photo clipped to it */
.ph-checklist .ph-art figure { aspect-ratio: 4 / 5; transform: rotate(-2deg); border: 10px solid #fff; overflow: visible; box-shadow: var(--shadow) }
.ph-checklist .ph-text { padding: clamp(28px, 4vw, 48px); background: var(--card) repeating-linear-gradient(transparent 0 33px, var(--line) 33px 34px); border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--shadow) }
ul.ph-check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 6px }
ul.ph-check li { display: flex; gap: 10px; align-items: center; font-size: 15px }
ul.ph-check li::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700 }
.ph-checklist .display { font-size: clamp(2.6rem, 5.4vw, 4.6rem) }
/* Invite: the text on an invitation card in front of its envelope */
.ph-invite { display: grid; justify-items: center; padding-top: clamp(60px, 8vw, 110px) }
.ph-invite .ph-art { position: relative; z-index: 3; margin-bottom: -60px }
.ph-invite figure { width: 132px; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--card); box-shadow: var(--shadow) }
.ph-invite .ph-text { position: relative; width: min(100%, 680px); padding: 86px clamp(26px, 5vw, 64px) 48px; background: var(--card); text-align: center; outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -14px; box-shadow: var(--shadow) }
.ph-invite .ph-text::before { content: ""; position: absolute; inset: 40% -6% -8%; z-index: -1; background: color-mix(in srgb, var(--accent) 22%, var(--bg-2)); clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%); border-radius: 6px }
.ph-invite .display { font-size: clamp(2.6rem, 6vw, 4.8rem); font-style: italic }
/* Pinboard: photos pinned to a cork board */
.ph-board .ph-art { position: relative; height: min(72vh, 600px); border-radius: 10px; background: radial-gradient(rgba(0, 0, 0, .1) 1px, transparent 1.5px) 0 0 / 7px 7px, #c49a6c; border: 12px solid #8a6240; box-shadow: var(--shadow) }
.ph-board figure { position: absolute; padding: 7px 7px 26px; background: #fff; border-radius: 2px; overflow: visible; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .55) }
.ph-board figure::before { content: ""; position: absolute; left: 50%; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a80, var(--accent) 60%, #6d1b1b); z-index: 2 }
.ph-board figure img { aspect-ratio: 1 }
.ph-board .p0 { left: 7%; top: 9%; width: 40%; transform: rotate(-5deg) } .ph-board .p1 { right: 8%; top: 6%; width: 34%; transform: rotate(4deg) } .ph-board .p2 { left: 34%; bottom: 7%; width: 34%; transform: rotate(-2deg) }
.ph-board .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }

@media (prefers-reduced-motion: reduce) { .ph-vinyl .ph-art, .ph-tape .ph-art::before, .ph-tape .ph-art::after, .ph-eq i, .ph-lights figure::before { animation: none } }
@media (max-width: 860px) {
  .ph-cutout, .ph-overlap, .ph-corner, .ph-blocks, .ph-petals, .ph-kaleido, .ph-plate, .ph-menucard, .ph-chalk, .ph-ticket, .ph-blueprint, .ph-mirror, .ph-swatch, .ph-compact, .ph-vinyl, .ph-poster, .ph-tape, .ph-lights, .ph-calendar, .ph-timeline, .ph-checklist, .ph-board, .ph-postcard { grid-template-columns: 1fr; min-height: 0 }
  .ph-cutout .ph-art, .ph-overlap .ph-art, .ph-board .ph-art { height: 400px }
  .ph-pillars { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto } .ph-pillars .ph-text { grid-area: 1 / 1 / 2 / 3 } .ph-pillars .p0 { grid-area: 2 / 1 } .ph-pillars .p2 { grid-area: 2 / 2 } .ph-pillars .p1, .ph-pillars .p3 { display: none }
  .ph-bubbles .ph-art { height: 70vh } .ph-bubbles .p4, .ph-bubbles .p5 { display: none }
  .ph-card .ph-text { grid-template-columns: 1fr } .ph-card .ph-text > * { grid-column: 1 !important; grid-row: auto !important }
  .ph-tiles { grid-template-columns: 1fr 1fr; grid-template-areas: "t t" "a b" "c d" } .ph-tiles .p4, .ph-tiles .p5 { display: none }
  .ph-postcard .p0 { min-height: 300px; border-radius: 6px 6px 0 0 } .ph-postcard .ph-text { border-left: 0 }
  .ph-garland figure { width: 30% } .ph-garland .p3 { display: none }
  .ph-kaleido .ph-art { width: 64% } .ph-tray .ph-art { border-radius: 26px }
  .ph-drape .ph-art { padding: 0 10% }
  .ph-cal { right: 8px }
  .ph-timeline figure { grid-template-columns: 1fr }
}

/* ======================= 100 more covers (6.0.394), one per design (Templates::VARIANTS with a 'frame') =======================
 * .ph-x-{frame} places the text: l (text left), r (text right), c (centred, photos below), c2 (centred, photos above),
 * o (over a full-width photo). .ph-art carries data-n (name), data-i (initials), data-c (city), data-y (year) and
 * the .ph div --ph-img (the first photo) for the covers that draw them in CSS. */
.ph-x .ph-art { position: relative; isolation: isolate }
.ph-x .display { overflow-wrap: break-word }
.ph-x-l, .ph-x-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--nav-h)) }
.ph-x-l .ph-text { order: -1 }
.ph-x-c, .ph-x-c2 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(30px, 4vw, 50px) }
.ph-x-c .ph-text { order: -1 }
.ph-x-c .ph-text, .ph-x-c2 .ph-text { max-width: 860px }
.ph-x-c .hero-sub, .ph-x-c2 .hero-sub { margin-left: auto; margin-right: auto }
.ph-x-c .row-btns, .ph-x-c2 .row-btns, .ph-x-c .hero-rating, .ph-x-c2 .hero-rating { justify-content: center }
.ph-x-o { max-width: none; padding: 0; display: grid; align-items: end; min-height: calc(100svh - var(--nav-h)); isolation: isolate; overflow: hidden; color: #fff }
.ph-x-o .ph-art { position: absolute; inset: 0; z-index: -1 }
.ph-x-o .ph-art figure { position: absolute; inset: 0; border-radius: 0 }
.ph-x-o figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .16) 62%, rgba(0, 0, 0, .3)) }
.ph-x-o .ph-text { width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(110px, 14vw, 170px) var(--gut) clamp(56px, 8vw, 100px); text-shadow: 0 2px 24px rgba(0, 0, 0, .35) }
.ph-x-o .ph-text .btn { text-shadow: none }
.ph-x-o .btn-line { color: #fff; border-color: rgba(255, 255, 255, .55) }
.ph-x-o .btn-line:hover { border-color: #fff }
.ph-x-o .hero-sub { max-width: 600px }
/* Centred text over a photo (Grain, Twin, Petal Rain, Estate, Gate, Signboard, Tulle) */
.ph-grain, .ph-twin, .ph-rain, .ph-estate, .ph-gate { align-items: center }
.ph-grain .ph-text, .ph-twin .ph-text, .ph-rain .ph-text, .ph-estate .ph-text, .ph-gate .ph-text, .ph-sign .ph-text { display: flex; flex-direction: column; align-items: center; text-align: center }
.ph-grain .hero-sub, .ph-twin .hero-sub, .ph-rain .hero-sub, .ph-estate .hero-sub, .ph-gate .hero-sub, .ph-sign .hero-sub { margin-left: auto; margin-right: auto }
.ph-grain .row-btns, .ph-twin .row-btns, .ph-rain .row-btns, .ph-estate .row-btns, .ph-gate .row-btns, .ph-sign .row-btns,
.ph-grain .hero-rating, .ph-twin .hero-rating, .ph-rain .hero-rating, .ph-estate .hero-rating, .ph-gate .hero-rating, .ph-sign .hero-rating { justify-content: center }
/* The few services some covers list (Receipt, Appointment, Setlist, Sticky Notes, Gantt, Muhurat) */
ul.ph-x-svcs { list-style: none; margin: 0; padding: 0 }
.ph-x-svcs li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ph-x-svcs li b { white-space: nowrap; font-weight: 600 }
@keyframes phx-spin { to { transform: rotate(360deg) } }

/* -- Every business -- */
/* Aurora: northern-light colours drifting over a full photo */
.ph-aurora figure img { filter: saturate(1.1) brightness(.85) }
.ph-aurora .ph-art::before { content: ""; position: absolute; inset: -20%; z-index: 1; background: radial-gradient(40% 35% at 25% 70%, color-mix(in srgb, var(--accent) 65%, transparent), transparent 70%), radial-gradient(35% 30% at 70% 30%, rgba(129, 92, 255, .5), transparent 70%), radial-gradient(30% 30% at 55% 85%, rgba(0, 200, 170, .4), transparent 70%); mix-blend-mode: screen; filter: blur(30px); animation: phx-aurora 16s ease-in-out infinite alternate }
@keyframes phx-aurora { to { transform: translate(6%, -4%) rotate(8deg) scale(1.1) } }
.ph-aurora .display { font-size: clamp(3rem, 7.4vw, 6.6rem); max-width: 12ch; font-style: italic }
/* Ledger: thick rules, a caption row and one framed figure */
.ph-ledger .ph-text { border-top: 3px solid var(--ink); padding-top: 26px }
.ph-ledger .ph-art { padding-top: 42px; border-top: 3px solid var(--ink) }
.ph-ledger .ph-art::before { content: attr(data-c) "  /  Est. " attr(data-y); position: absolute; left: 0; top: 14px; font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; white-space: pre }
.ph-ledger .ph-art::after { content: "Fig. 01 — " attr(data-n); position: absolute; right: 0; top: calc(100% + 12px); font: 500 12.5px/1 var(--body); color: var(--muted) }
.ph-ledger figure { aspect-ratio: 4 / 4.4; border-radius: 0 }
.ph-ledger .display { font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .95 }
/* Folio: an open book, a ruled page beside the photo */
.ph-folio .ph-art { display: grid; grid-template-columns: 1fr 1fr; filter: drop-shadow(0 30px 36px rgba(40, 25, 10, .26)) }
.ph-folio .ph-art::before { content: attr(data-n); padding: 26px 22px; background: repeating-linear-gradient(transparent 0 27px, var(--line-2) 27px 28px) 0 70px / 100% calc(100% - 110px) no-repeat, var(--card); border-radius: 8px 0 0 8px; font: italic 500 1.1rem/1.25 var(--head); color: var(--muted); text-align: center; box-shadow: inset -26px 0 30px -26px rgba(0, 0, 0, .35) }
.ph-folio .ph-art::after { content: attr(data-y); position: absolute; left: 25%; bottom: 14px; transform: translateX(-50%); font: 500 12px var(--body); color: var(--muted) }
.ph-folio figure { aspect-ratio: 3 / 4.1; border-radius: 0 8px 8px 0 }
.ph-folio figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 14%) }
.ph-folio .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Prism: three slanted slices stepping down */
.ph-prism .ph-art { display: flex; gap: 12px; height: min(74vh, 620px); padding: 0 6% }
.ph-prism figure { flex: 1; transform: skewX(-9deg) }
.ph-prism figure img { transform: skewX(9deg) scale(1.3) }
.ph-prism .p0 { margin-bottom: 70px } .ph-prism .p1 { margin: 35px 0 } .ph-prism .p2 { margin-top: 70px }
.ph-prism .ph-art::after { content: ""; position: absolute; right: 0; bottom: -14px; width: 120px; height: 120px; background: var(--accent); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); z-index: -1 }
.ph-prism .display { font-size: clamp(2.2rem, 4.6vw, 4.2rem) }
/* Capsule: tall pill-shaped photos of different heights */
.ph-capsule .ph-art { display: flex; align-items: flex-end; gap: clamp(10px, 1.6vw, 18px); height: min(74vh, 640px) }
.ph-capsule figure { flex: 1; border-radius: 999px }
.ph-capsule .p0 { height: 78% } .ph-capsule .p1 { height: 100% } .ph-capsule .p2 { height: 62% }
.ph-capsule .ph-art::before { content: ""; position: absolute; left: 26%; top: 6%; width: 50%; height: 52%; border-radius: 999px; background: color-mix(in srgb, var(--accent) 24%, transparent); z-index: -1; transform: translateX(-30%) }
.ph-capsule .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }
/* Orbit: a round photo with turning rings and planets */
.ph-orbit .ph-art { width: min(500px, 84vw, 54svh); aspect-ratio: 1 }
.ph-orbit figure { position: absolute; inset: 17%; border-radius: 50%; box-shadow: var(--shadow) }
.ph-orbit .ph-art::before, .ph-orbit .ph-art::after { content: ""; position: absolute; border-radius: 50%; animation: phx-spin 40s linear infinite }
.ph-orbit .ph-art::before { inset: 8%; border: 1.5px dashed color-mix(in srgb, var(--accent) 65%, transparent); background: radial-gradient(circle at 50% 12px, var(--accent) 0 9px, transparent 10px) }
.ph-orbit .ph-art::after { inset: 0; border: 1px solid var(--line-2); background: radial-gradient(circle at 85% 85%, var(--ink) 0 6px, transparent 7px), radial-gradient(circle at 6% 38%, color-mix(in srgb, var(--accent) 50%, var(--ink)) 0 5px, transparent 6px); animation-duration: 70s; animation-direction: reverse }
.ph-orbit .display { font-size: clamp(2.6rem, 6vw, 5rem) }
/* Stripe: the photo seen through wide slats, an accent block behind */
.ph-stripe .ph-art { padding: 0 0 28px 28px }
.ph-stripe .ph-art::before { content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 70%; background: var(--accent); z-index: -1 }
.ph-stripe figure { aspect-ratio: 4 / 4.6; border-radius: 0 }
.ph-stripe figure::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 46px, var(--bg) 46px 54px) }
.ph-stripe .display { font-size: clamp(3.4rem, 8vw, 7rem) }
/* Paper: a photo with torn edges on a tilted sheet, a strip of tape */
.ph-paper .ph-art { padding: 30px }
.ph-paper .ph-art::before { content: ""; position: absolute; inset: 0; background: var(--card); transform: rotate(-3deg); box-shadow: var(--shadow); z-index: -1 }
.ph-paper figure { aspect-ratio: 4 / 4.4; border-radius: 0; clip-path: polygon(0 3%, 6% 1%, 13% 3%, 21% 0, 29% 2%, 37% 1%, 46% 3%, 54% 0, 62% 2%, 71% 1%, 79% 3%, 87% 0, 94% 2%, 100% 1%, 100% 97%, 94% 99%, 86% 97%, 78% 100%, 70% 98%, 61% 100%, 53% 97%, 45% 99%, 37% 97%, 28% 100%, 20% 98%, 12% 100%, 5% 97%, 0 99%) }
.ph-paper .ph-art::after { content: ""; position: absolute; right: 9%; top: 4px; width: 110px; height: 30px; background: color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, .6)); transform: rotate(4deg) }
.ph-paper .display { font-size: clamp(2.8rem, 5.8vw, 5rem) }
/* Gridline: graph paper, four numbered photos in a row */
.ph-gridline { background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px }
.ph-gridline .ph-art { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; counter-reset: phx }
.ph-gridline figure { aspect-ratio: 3 / 4; counter-increment: phx }
.ph-gridline figure::after { content: "0" counter(phx); position: absolute; left: 10px; top: 8px; font: 700 12px var(--body); color: #fff; letter-spacing: .12em; text-shadow: 0 1px 4px rgba(0, 0, 0, .5) }
.ph-gridline .p1, .ph-gridline .p3 { margin-top: 40px }
.ph-gridline .display { font-size: clamp(3rem, 7vw, 6rem) }
/* Dusk: a round photo setting into a glowing horizon */
.ph-dusk .ph-art { aspect-ratio: 1; display: grid; place-items: center }
.ph-dusk figure { width: 76%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 120px -10px color-mix(in srgb, var(--accent) 70%, transparent) }
.ph-dusk figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 2%, transparent 40%), linear-gradient(0deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%) }
.ph-dusk .ph-art::before { content: ""; position: absolute; left: 0; right: 0; top: 72%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); z-index: 1 }
.ph-dusk .ph-art::after { content: ""; position: absolute; left: 4%; right: 4%; top: 73%; bottom: 4%; background: repeating-linear-gradient(0deg, transparent 0 10px, color-mix(in srgb, var(--accent) 24%, transparent) 10px 12px); -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent) }
.ph-dusk .display { font-size: clamp(3rem, 6.4vw, 5.8rem) }

/* -- Photography -- */
/* Darkroom: prints drying on a line under a red safelight */
.ph-darkroom { background: radial-gradient(60% 70% at 30% 30%, rgba(255, 40, 30, .2), transparent 70%) }
.ph-darkroom .ph-art { height: min(72vh, 600px) }
.ph-darkroom .ph-art::before { content: ""; position: absolute; left: -2%; right: -2%; top: 28px; height: 2px; background: color-mix(in srgb, var(--ink) 50%, transparent) }
.ph-darkroom figure { position: absolute; top: 30px; padding: 8px 8px 26px; background: #f3eee6; border-radius: 1px; overflow: visible; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8) }
.ph-darkroom figure img { aspect-ratio: 4 / 5; height: auto; filter: sepia(.25) saturate(.9) }
.ph-darkroom figure::before { content: ""; position: absolute; left: 50%; top: -12px; width: 12px; height: 26px; margin-left: -6px; background: #2b2b2b; border-radius: 2px }
.ph-darkroom .p0 { left: 2%; width: 31%; transform: rotate(-3deg) } .ph-darkroom .p1 { left: 36%; width: 29%; top: 50px; transform: rotate(2deg) } .ph-darkroom .p2 { left: 68%; width: 30%; transform: rotate(-1.5deg) }
.ph-darkroom .display { font-size: clamp(3rem, 6.4vw, 5.6rem) }
/* Negative: the photo beside its own film negative */
.ph-negative .ph-art { display: grid; grid-template-columns: 1fr 38%; gap: 16px; height: min(74vh, 620px) }
.ph-negative figure { grid-area: 1 / 1; height: 100%; border-radius: 0 }
.ph-negative .ph-art::after { content: ""; grid-area: 1 / 2; background: var(--ph-img) center / cover; filter: invert(1) sepia(.55) saturate(1.5) }
.ph-negative .ph-art::before { content: ""; grid-area: 1 / 2; z-index: 1; border: 18px solid #1a120c; outline: 3px dashed rgba(255, 255, 255, .7); outline-offset: -11px }
.ph-negative .display { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: .98 }
/* Viewfinder: corner marks, a focus box and a record dot */
.ph-viewfinder figure img { filter: brightness(.85) }
.ph-viewfinder figure::before { content: ""; position: absolute; left: 50%; top: 40%; width: 96px; height: 68px; margin: -34px 0 0 -48px; border: 1.5px solid rgba(255, 255, 255, .85); z-index: 1 }
.ph-viewfinder .ph-art::before { content: ""; position: absolute; inset: clamp(70px, 9vw, 110px) clamp(16px, 4vw, 60px) clamp(22px, 4vw, 50px); z-index: 1; opacity: .9; background: linear-gradient(#fff, #fff) 0 0 / 46px 2px, linear-gradient(#fff, #fff) 0 0 / 2px 46px, linear-gradient(#fff, #fff) 100% 0 / 46px 2px, linear-gradient(#fff, #fff) 100% 0 / 2px 46px, linear-gradient(#fff, #fff) 0 100% / 46px 2px, linear-gradient(#fff, #fff) 0 100% / 2px 46px, linear-gradient(#fff, #fff) 100% 100% / 46px 2px, linear-gradient(#fff, #fff) 100% 100% / 2px 46px; background-repeat: no-repeat }
.ph-viewfinder .ph-art::after { content: "● REC   " attr(data-c); position: absolute; z-index: 1; top: clamp(86px, 10.5vw, 130px); left: clamp(32px, 6vw, 84px); font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: pre; animation: phx-blink 1.6s steps(2) infinite }
@keyframes phx-blink { 50% { opacity: .35 } }
.ph-viewfinder .display { font-size: clamp(2.8rem, 6.6vw, 6rem) }
/* Light table: slides in their mounts on a glowing table */
.ph-lighttable .ph-art { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.6vw, 20px); padding: clamp(18px, 3vw, 34px); border-radius: 14px; background: radial-gradient(80% 120% at 50% 50%, #ffffff, #eaf1f5); box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 0 50px rgba(150, 200, 230, .35) }
.ph-lighttable figure { padding: 9px; background: #e8e2d4; border-radius: 4px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .35); transform: rotate(1.5deg) }
.ph-lighttable figure:nth-child(odd) { transform: rotate(-1.5deg) }
.ph-lighttable figure img { aspect-ratio: 1; height: auto; border-radius: 1px }
.ph-lighttable .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Archive: prints filed in a drawer with index tabs */
.ph-archive .ph-art { height: min(70vh, 580px) }
.ph-archive figure { position: absolute; left: 8%; width: 84%; height: 60%; padding: 10px; background: var(--card); border-radius: 4px; overflow: visible; box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .4) }
.ph-archive figure img { border-radius: 2px }
.ph-archive figure::before { content: ""; position: absolute; top: -22px; height: 24px; width: 86px; background: inherit; border-radius: 6px 6px 0 0 }
.ph-archive .p0 { top: 6%; transform: rotate(-1.5deg) } .ph-archive .p0::before { left: 10% }
.ph-archive .p1 { top: 15%; transform: rotate(1deg); background: color-mix(in srgb, var(--accent) 18%, var(--card)) } .ph-archive .p1::before { left: 42% }
.ph-archive .p2 { top: 24%; transform: rotate(-.5deg) } .ph-archive .p2::before { right: 10% }
.ph-archive .ph-art::after { content: attr(data-n); position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 2; display: grid; place-items: center; padding: 0 24px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #3a2410), color-mix(in srgb, var(--accent) 35%, #24160a)); border-radius: 6px; box-shadow: var(--shadow), inset 0 2px 0 rgba(255, 255, 255, .15); color: #fbf2e2; font: 700 1rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase }
.ph-archive .display { font-size: clamp(2.8rem, 5.8vw, 5rem) }
/* Scope: an edge-to-edge letterboxed frame with a scene slate */
.ph-scope { padding-top: 0 }
.ph-scope .ph-art { width: 100vw; padding: clamp(16px, 2.6vw, 32px) 0; background: #000 }
.ph-scope figure { width: min(100%, calc(62svh * 2.39)); margin: 0 auto; aspect-ratio: 2.39 / 1; border-radius: 0 }
.ph-scope .ph-art::after { content: "SC. 01   ·   " attr(data-c) "   ·   TAKE 1"; position: absolute; left: var(--gut); bottom: 0; font: 600 11px/clamp(16px, 2.6vw, 32px) var(--body); color: var(--accent); letter-spacing: .2em; white-space: pre; text-transform: uppercase }
.ph-scope .display { font-size: clamp(3rem, 8vw, 7rem) }
/* Bracket: one photo darker, right and brighter */
.ph-bracket .ph-art { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 10px }
.ph-bracket .ph-art::before, .ph-bracket .ph-art::after { content: "−1 EV"; aspect-ratio: 3 / 4.2; display: flex; align-items: flex-end; padding: 10px; background: var(--ph-img) center / cover; color: #fff; font: 700 11px var(--body); letter-spacing: .14em; filter: brightness(.5); border-radius: var(--r-img) }
.ph-bracket .ph-art::after { content: "+1 EV"; order: 2; filter: brightness(1.5) saturate(.8); color: #111 }
.ph-bracket figure { order: 1; aspect-ratio: 3 / 4.2; box-shadow: var(--shadow); z-index: 1 }
.ph-bracket figure::after { content: "0 EV"; position: absolute; left: 10px; bottom: 10px; color: #fff; font: 700 11px var(--body); letter-spacing: .14em; text-shadow: 0 1px 4px rgba(0, 0, 0, .5) }
.ph-bracket .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }
/* Grain: black and white, film grain, an outlined title */
.ph-grain figure img { filter: grayscale(1) contrast(1.15) brightness(.6) }
.ph-grain .ph-art::before { content: ""; position: absolute; inset: -50%; z-index: 1; pointer-events: none; background-image: repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 73% 61%, rgba(0, 0, 0, .2) 0 1px, transparent 1px 4px); animation: phx-grain 1s steps(4) infinite }
@keyframes phx-grain { 25% { transform: translate(-3%, 2%) } 50% { transform: translate(2%, -3%) } 75% { transform: translate(-1%, 3%) } }
.ph-grain .display { font-size: clamp(3.2rem, 9.4vw, 8.4rem); color: rgba(255, 255, 255, .22); -webkit-text-stroke: 2px #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .5) }
/* Mount: a fine-art print in a deep mat with a museum label */
.ph-mount .ph-art { padding: clamp(30px, 5vw, 64px); background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow); margin-bottom: 30px }
.ph-mount figure { aspect-ratio: 4 / 5; border-radius: 0; outline: 6px solid color-mix(in srgb, var(--card) 70%, #cfc8bb); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1) }
.ph-mount .ph-art::after { content: attr(data-n) "\A" attr(data-c) ", " attr(data-y); white-space: pre-line; position: absolute; right: 0; top: calc(100% + 12px); max-width: 70%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); font: 500 12px/1.5 var(--body); color: var(--ink-2) }
.ph-mount .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }
/* Zine: halftone prints, tape and a highlighter title */
.ph-zine .ph-art { height: min(74vh, 620px) }
.ph-zine figure { position: absolute; border-radius: 0; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6) }
.ph-zine figure::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .35) 1px, transparent 1.6px) 0 0 / 5px 5px; mix-blend-mode: multiply }
.ph-zine .p0 { left: 0; top: 4%; width: 64%; height: 70%; transform: rotate(-2.5deg) }
.ph-zine .p0 img, .ph-zine .p1 img { filter: grayscale(1) contrast(1.25) }
.ph-zine .p1 { right: 0; top: 30%; width: 46%; height: 50%; transform: rotate(3.5deg); z-index: 2; background: var(--accent) }
.ph-zine .p1 img { mix-blend-mode: multiply }
.ph-zine .p2 { left: 16%; bottom: 0; width: 34%; height: 32%; transform: rotate(-6deg); z-index: 3 }
.ph-zine .ph-art::before { content: ""; position: absolute; z-index: 4; left: 40%; top: 0; width: 120px; height: 34px; background: rgba(255, 255, 255, .6); transform: rotate(-8deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12) }
.ph-zine .ph-art::after { content: attr(data-c); position: absolute; z-index: 4; right: 4%; bottom: 8%; padding: 6px 12px; background: var(--ink); color: var(--bg); font: 700 13px var(--body); text-transform: uppercase; letter-spacing: .1em; transform: rotate(2deg) }
.ph-zine .display { display: inline; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.3; background: linear-gradient(transparent 52%, var(--accent) 52% 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone }
/* Loupe: a magnifier over the photo */
.ph-loupe figure { aspect-ratio: 4 / 4.8 }
.ph-loupe .ph-art::after { content: ""; position: absolute; right: -3%; bottom: 8%; width: 44%; aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--ink); background: var(--ph-img) 62% 38% / 260% auto no-repeat; box-shadow: var(--shadow), inset 0 0 0 3px rgba(255, 255, 255, .45); z-index: 2 }
.ph-loupe .ph-art::before { content: ""; position: absolute; right: -6%; bottom: 0; width: 26%; height: 22px; background: var(--ink); border-radius: 11px; transform: rotate(48deg); transform-origin: 0 50%; z-index: 1 }
.ph-loupe .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Twin: two full-height photos split down the middle */
.ph-twin .p0 { right: 50% } .ph-twin .p1 { left: 50% }
.ph-twin figure::after { background: rgba(0, 0, 0, .42) }
.ph-twin .ph-art::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--accent); z-index: 1 }
.ph-twin .ph-text { max-width: 940px }
.ph-twin .display { font-size: clamp(3rem, 7.4vw, 6.6rem) }
/* Square: one 6x6 frame with its film edge markings */
.ph-square .ph-art { width: min(560px, 100%, 56svh); padding: 22px 22px 46px; background: #1b1714; border-radius: 4px; box-shadow: var(--shadow) }
.ph-square figure { aspect-ratio: 1; border-radius: 0 }
.ph-square .ph-art::before { content: "120  ·  6×6  ·  " attr(data-y) "  ·  ▸ 7"; position: absolute; left: 22px; right: 22px; bottom: 15px; font: 600 11px/1 var(--body); letter-spacing: .22em; color: #f0a43a; white-space: pre; overflow: hidden; text-overflow: ellipsis; text-align: left }
.ph-square .ph-art::after { content: "7A"; position: absolute; top: 5px; right: 22px; font: 600 11px/1 var(--body); color: #f0a43a; letter-spacing: .2em }
.ph-square .display { font-size: clamp(2.6rem, 5.6vw, 4.8rem) }
/* Storyboard: six numbered scenes */
.ph-storyboard .ph-art { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 38px; padding-bottom: 20px; counter-reset: phx }
.ph-storyboard figure { aspect-ratio: 16 / 9; border: 2.5px solid var(--ink); border-radius: 3px; counter-increment: phx; overflow: visible; background: none }
.ph-storyboard figure img { border-radius: 1px }
.ph-storyboard figure::before { content: "Scene " counter(phx); position: absolute; left: 0; top: calc(100% + 6px); font: 400 1rem/1 var(--head); color: var(--ink-2) }
.ph-storyboard figure:not(:nth-child(3n))::after { content: "→"; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font: 700 20px/1 var(--body); color: var(--accent) }
.ph-storyboard .display { font-size: clamp(2.8rem, 6.4vw, 5.4rem) }

/* -- Decoration -- */
/* Toran: mango leaves and marigolds hanging over the page */
.ph-toran::before { content: ""; order: -2; align-self: stretch; height: 60px; margin: calc(clamp(24px, 4vw, 48px) * -1) calc(var(--gut) * -1) 0; background: radial-gradient(circle at 50% 13px, #f29f05 0 8px, transparent 9px) 17px 0 / 34px 28px repeat-x, radial-gradient(50% 100% at 50% 0, #3f7d3a 96%, transparent 100%) 0 6px / 34px 54px repeat-x, linear-gradient(var(--accent), var(--accent)) 0 4px / 100% 3px no-repeat }
.ph-toran .ph-art { width: 100% }
.ph-toran figure { width: 100%; aspect-ratio: 21 / 8 }
.ph-toran .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Rangoli: festive colour rings around a round photo */
.ph-rangoli .ph-art { width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto }
.ph-rangoli .ph-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--accent) 0 15deg, #f6b73c 15deg 30deg, #2a9d8f 30deg 45deg); -webkit-mask: radial-gradient(closest-side, transparent 71%, #000 72% 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 71%, #000 72% 98%, transparent 100%); animation: phx-spin 60s linear infinite }
.ph-rangoli .ph-art::after { content: ""; position: absolute; inset: 14.5%; border-radius: 50%; border: 5px dotted #fff; box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--accent) 70%, #f6b73c) }
.ph-rangoli figure { position: absolute; inset: 19%; border-radius: 50%; border: 6px solid var(--card) }
.ph-rangoli .display { font-size: clamp(2.6rem, 5.6vw, 4.8rem) }
/* Lantern: lantern-shaped photos hanging and glowing */
.ph-lantern .ph-art { overflow: hidden; height: min(76vh, 640px); display: flex; justify-content: space-around; align-items: flex-start }
.ph-lantern figure { width: 27%; overflow: visible; background: none; padding-top: 14px; transform-origin: 50% -300px; animation: phx-swing 6s ease-in-out infinite alternate }
.ph-lantern figure img { aspect-ratio: 3 / 4.4; height: auto; border-radius: 42% 42% 46% 46% / 26% 26% 30% 30%; box-shadow: 0 0 70px -6px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, #000) }
.ph-lantern figure::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 420px; background: color-mix(in srgb, var(--accent) 45%, transparent) }
.ph-lantern figure::after { content: ""; position: absolute; left: 30%; right: 30%; top: 0; height: 18px; background: var(--accent); border-radius: 4px 4px 2px 2px }
.ph-lantern .p0 { margin-top: 30px } .ph-lantern .p1 { margin-top: 130px; animation-delay: -2s } .ph-lantern .p2 { margin-top: 60px; animation-delay: -4s }
@keyframes phx-swing { from { transform: rotate(-1.5deg) } to { transform: rotate(1.5deg) } }
.ph-lantern .display { font-size: clamp(2.2rem, 4.6vw, 4.2rem) }
/* Trellis: a garden lattice framing the photo */
.ph-trellis figure { aspect-ratio: 4 / 4.8 }
.ph-trellis figure::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 34px, var(--bg) 34px 40px), repeating-linear-gradient(-45deg, transparent 0 34px, var(--bg) 34px 40px); -webkit-mask: radial-gradient(ellipse 58% 54% at 50% 52%, transparent 96%, #000 100%); mask: radial-gradient(ellipse 58% 54% at 50% 52%, transparent 96%, #000 100%) }
.ph-trellis .ph-art::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: var(--r-img); z-index: -1 }
.ph-trellis .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Balloon: photos floating like balloons on strings */
.ph-balloon .ph-art { height: min(76vh, 640px) }
.ph-balloon figure { position: absolute; overflow: visible; background: none; animation: phx-float 6s ease-in-out infinite alternate }
.ph-balloon figure img { aspect-ratio: 1 / 1.12; height: auto; border-radius: 50% 50% 48% 48% / 54% 54% 46% 46%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 24px -16px rgba(0, 0, 0, .35) }
.ph-balloon figure::before { content: ""; position: absolute; left: 50%; top: 99%; width: 16px; height: 12px; margin-left: -8px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.ph-balloon figure::after { content: ""; position: absolute; left: 50%; top: calc(99% + 11px); width: 1.5px; height: 220px; background: color-mix(in srgb, var(--ink) 35%, transparent) }
.ph-balloon .p0 { left: 4%; top: 4%; width: 40% } .ph-balloon .p1 { right: 2%; top: 0; width: 34%; animation-delay: -2s } .ph-balloon .p2 { left: 40%; top: 32%; width: 30%; animation-delay: -4s }
@keyframes phx-float { to { transform: translateY(-14px) } }
.ph-balloon .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Wreath: leaves and little flowers around a round photo */
.ph-wreath .ph-art { width: min(480px, 86vw, 54svh); aspect-ratio: 1 }
.ph-wreath .ph-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, #4d7c4a 85%, var(--accent)) 0 7deg, transparent 7deg 12deg); -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 76% 97%, transparent 99%); mask: radial-gradient(closest-side, transparent 74%, #000 76% 97%, transparent 99%) }
.ph-wreath .ph-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 6deg, var(--accent) 0 5deg, transparent 5deg 36deg); -webkit-mask: radial-gradient(closest-side, transparent 81%, #000 82% 92%, transparent 93%); mask: radial-gradient(closest-side, transparent 81%, #000 82% 92%, transparent 93%) }
.ph-wreath figure { position: absolute; inset: 15%; border-radius: 50% }
.ph-wreath .display { font-size: clamp(3.2rem, 7vw, 6rem) }
/* Ribbon: a satin ribbon across the corner with the name */
.ph-ribbon { align-items: center }
.ph-ribbon figure::after { background: linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .12) 75%) }
.ph-ribbon .ph-art::before { content: attr(data-n); position: absolute; z-index: 2; top: clamp(44px, 5vw, 64px); right: -96px; width: 400px; padding: 12px 80px; transform: rotate(40deg); background: var(--accent); color: var(--on-accent); font: 700 13px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5) }
.ph-ribbon .display { font-size: clamp(3rem, 6.6vw, 6rem); max-width: 12ch }
/* Glasshouse: four tinted panes in an arched window */
.ph-glass .ph-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; height: min(76vh, 640px); background: #2c2a28; border-radius: 50% 50% 10px 10px / 30% 30% 10px 10px; overflow: hidden; box-shadow: var(--shadow) }
.ph-glass figure { border-radius: 0 }
.ph-glass figure::after { content: ""; position: absolute; inset: 0; mix-blend-mode: color; opacity: .3; background: var(--accent) }
.ph-glass .p1::after { background: #c0392b } .ph-glass .p2::after { background: #d4a017 } .ph-glass .p3::after { background: #2e7d32 }
.ph-glass .ph-art::after { content: ""; position: absolute; left: 50%; top: 5%; width: 26%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 8px solid #2c2a28; background: radial-gradient(circle, #2c2a28 0 12%, transparent 13%), repeating-conic-gradient(rgba(255, 255, 255, .55) 0 15deg, color-mix(in srgb, var(--accent) 70%, transparent) 15deg 30deg); z-index: 2 }
.ph-glass .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Origami: photos cut in facets with fold lines */
.ph-origami .ph-art { display: grid; height: min(74vh, 620px) }
.ph-origami figure { grid-area: 1 / 1; border-radius: 0 }
.ph-origami .p0 { width: 78%; height: 84%; clip-path: polygon(0 6%, 100% 0, 88% 100%, 8% 90%) }
.ph-origami .p1 { width: 52%; height: 56%; justify-self: end; align-self: end; clip-path: polygon(14% 0, 100% 12%, 92% 100%, 0 84%); z-index: 2 }
.ph-origami figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 50%, rgba(0, 0, 0, .16) 50%) }
.ph-origami .ph-art::before { content: ""; grid-area: 1 / 1; justify-self: end; width: 34%; aspect-ratio: 1; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 70%); z-index: 1 }
.ph-origami .ph-art::after { content: ""; grid-area: 1 / 1; align-self: end; width: 22%; aspect-ratio: 1; margin-left: 4%; background: color-mix(in srgb, var(--accent) 45%, var(--ink)); clip-path: polygon(0 0, 100% 40%, 30% 100%); z-index: 3 }
.ph-origami .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Kolam: white dots and loops on a dark floor, the photo as a diamond */
.ph-kolam .ph-art { aspect-ratio: 1; width: 100%; max-width: 580px; margin: 0 auto; border-radius: var(--r); background: radial-gradient(circle, rgba(255, 255, 255, .85) 0 2.4px, transparent 3px) 14px 14px / 28px 28px, color-mix(in srgb, var(--bg-2) 80%, #000) }
.ph-kolam .ph-art::before { content: ""; position: absolute; inset: 11%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 46%; transform: rotate(45deg) }
.ph-kolam .ph-art::after { content: ""; position: absolute; inset: 3%; border: 2px dashed var(--accent); border-radius: 50% }
.ph-kolam figure { position: absolute; inset: 20%; z-index: 1; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) }
.ph-kolam .display { font-size: clamp(2.8rem, 6vw, 5rem) }
/* Petal rain: petals drifting down over a full photo */
.ph-rain figure::after { background: radial-gradient(ellipse at center, rgba(40, 20, 25, .5), rgba(40, 20, 25, .66)) }
.ph-rain .ph-art::before, .ph-rain .ph-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 7px 11px at 20px 30px, color-mix(in srgb, var(--accent) 85%, #fff) 0 90%, transparent 100%), radial-gradient(ellipse 6px 9px at 120px 140px, rgba(255, 255, 255, .85) 0 90%, transparent 100%), radial-gradient(ellipse 8px 12px at 190px 60px, color-mix(in srgb, var(--accent) 70%, #fff) 0 90%, transparent 100%), radial-gradient(ellipse 5px 8px at 70px 220px, #fff 0 90%, transparent 100%); background-size: 240px 300px; animation: phx-rain 14s linear infinite }
.ph-rain .ph-art::after { background-size: 340px 420px; opacity: .65; animation-name: phx-rain2; animation-duration: 22s }
@keyframes phx-rain { to { background-position: 40px 600px } }
@keyframes phx-rain2 { to { background-position: -60px 840px } }
.ph-rain .display { font-size: clamp(3.6rem, 9vw, 8rem) }

/* -- Catering -- */
/* Recipe: a lined recipe card with a photo clipped on */
.ph-recipe .ph-art { padding: 80px clamp(22px, 4vw, 40px) 74px; background: repeating-linear-gradient(transparent 0 31px, rgba(74, 144, 194, .3) 31px 32px) 0 70px / 100% calc(100% - 70px) no-repeat, #fffdf6; border-radius: 6px; box-shadow: var(--shadow); border-top: 4px solid color-mix(in srgb, var(--accent) 70%, transparent) }
.ph-recipe .ph-art::before { content: "Recipe from " attr(data-n); position: absolute; left: clamp(22px, 4vw, 40px); right: 22px; top: 22px; font: 700 1.8rem/1.1 var(--head); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-recipe .ph-art::after { content: "Made with love in " attr(data-c); position: absolute; left: clamp(22px, 4vw, 40px); right: 22px; bottom: 22px; font: 600 1.35rem/1.1 var(--head); color: #5b5148; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-recipe figure { width: 82%; margin-left: auto; aspect-ratio: 4 / 3.2; border: 8px solid #fff; border-radius: 2px; overflow: visible; transform: rotate(2.5deg); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .5) }
.ph-recipe figure::before { content: ""; position: absolute; top: -20px; left: 22px; width: 18px; height: 56px; border: 3px solid #9aa0a6; border-radius: 9px; z-index: 2 }
.ph-recipe .display { font-size: clamp(3.2rem, 7vw, 6rem) }
/* Ilai: dishes served as round photos on a banana leaf */
.ph-ilai .ph-art { height: min(70vh, 580px) }
.ph-ilai .ph-art::before { content: ""; position: absolute; inset: 6% 0; background: linear-gradient(to top right, transparent calc(50% - 1.5px), rgba(255, 255, 255, .45) 0 calc(50% + 1.5px), transparent 0), repeating-linear-gradient(-30deg, transparent 0 22px, rgba(255, 255, 255, .06) 22px 24px), linear-gradient(160deg, #5aa83f, #2f7a2d 60%, #24622a); border-radius: 0 100% 0 100%; box-shadow: var(--shadow) }
.ph-ilai figure { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 6px solid #f6f2e6; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5) }
.ph-ilai .p0 { left: 30%; top: 24%; width: 40% } .ph-ilai .p1 { left: 10%; top: 50%; width: 24% } .ph-ilai .p2 { right: 10%; top: 16%; width: 25% }
.ph-ilai .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Tiffin: a steel carrier of three stacked tiers */
.ph-tiffin .ph-art { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 70px }
.ph-tiffin .ph-art::before { content: ""; position: absolute; top: 0; left: 50%; width: 46%; height: 96px; transform: translateX(-50%); border: 9px solid #b7bcc4; border-bottom: 0; border-radius: 80px 80px 0 0 }
.ph-tiffin figure { width: min(420px, 92%); aspect-ratio: 2.5 / 1; border-radius: 999px; border: 9px solid #c9ced6; box-shadow: inset 0 0 0 2px #fff, 0 14px 22px -14px rgba(0, 0, 0, .45) }
.ph-tiffin .ph-art::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: min(300px, 64%); height: 14px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .25), transparent) }
.ph-tiffin .display { font-size: clamp(2.2rem, 4.6vw, 4rem) }
/* Receipt: the first dishes and prices on a paper receipt */
.ph-receipt .ph-art { padding-bottom: 40px }
.ph-receipt figure { width: 78%; aspect-ratio: 4 / 4.6 }
.ph-receipt .ph-x-svcs { position: absolute; right: 0; bottom: 0; width: min(330px, 64%); padding: 58px 22px 46px; background: #fff; color: #222; font: 400 13px/1.4 "Space Mono", ui-monospace, monospace; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .25)); transform: rotate(3deg); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100% }
.ph-receipt .ph-x-svcs::before { content: "★  OUR MENU  ★"; position: absolute; left: 0; right: 0; top: 22px; text-align: center; font-weight: 700; letter-spacing: .12em }
.ph-receipt .ph-x-svcs::after { content: "THANK YOU"; position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; letter-spacing: .3em; font-size: 11px }
.ph-receipt .ph-x-svcs li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed #bbb }
.ph-receipt .ph-x-svcs li span { flex: 1 }
.ph-receipt .display { font-size: clamp(2.4rem, 5vw, 4.4rem) }
/* Platter: a wide oval platter with a brass rim */
.ph-platter .ph-art { width: min(720px, 100%, calc(46svh * 2.2)); aspect-ratio: 2.2 / 1; padding: 4.2%; border-radius: 50%; background: radial-gradient(ellipse at 30% 20%, rgba(255, 245, 210, .7), transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, #fff3c4), color-mix(in srgb, var(--accent) 85%, #3b2a0a)); box-shadow: 0 40px 60px -34px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .35) }
.ph-platter figure { width: 100%; height: 100%; border-radius: 50% }
.ph-platter figure::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 8px 24px rgba(0, 0, 0, .35) }
.ph-platter .ph-art::after { content: ""; position: absolute; inset: 2.1%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); pointer-events: none }
.ph-platter .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Steam: steam rising off a food photo */
.ph-steam .ph-art { padding-top: 110px }
.ph-steam figure { aspect-ratio: 4 / 4.2 }
.ph-steam .ph-art::before, .ph-steam .ph-art::after { content: ""; position: absolute; top: 0; width: 22%; height: 46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .42), transparent); filter: blur(14px); animation: phx-steam 5s ease-in-out infinite; z-index: 1 }
.ph-steam .ph-art::before { left: 30% } .ph-steam .ph-art::after { left: 52%; animation-delay: -2.5s }
@keyframes phx-steam { 0% { transform: translateY(40px) scaleX(.8); opacity: 0 } 40% { opacity: .9 } 100% { transform: translateY(-50px) scaleX(1.3) skewX(10deg); opacity: 0 } }
.ph-steam .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Apron: gingham cloth with stitched edges behind a tilted photo */
.ph-apron .ph-art { padding: clamp(26px, 4vw, 44px); border-radius: var(--r); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 38%, transparent) 0 22px, transparent 22px 44px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 38%, transparent) 0 22px, transparent 22px 44px), #fff; outline: 2px dashed #fff; outline-offset: -14px }
.ph-apron figure { aspect-ratio: 4 / 4.6; border: 10px solid var(--card); transform: rotate(-2deg); box-shadow: var(--shadow) }
.ph-apron .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Live counter: a scalloped stall awning over a full photo */
.ph-counter .ph-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: 1; background: repeating-linear-gradient(90deg, var(--accent) 0 60px, #fffaf0 60px 120px); -webkit-mask: radial-gradient(30px at 50% 44px, #000 98%, #0000) 0 0 / 60px 100% repeat-x, linear-gradient(#000 0 0) top / 100% 44px no-repeat; mask: radial-gradient(30px at 50% 44px, #000 98%, #0000) 0 0 / 60px 100% repeat-x, linear-gradient(#000 0 0) top / 100% 44px no-repeat }
.ph-counter .ph-text { padding-top: 160px }
.ph-counter .display { font-size: clamp(3rem, 7vw, 6.2rem) }
/* Pickle jar: photos in jars with cloth lids and labels */
.ph-jar .ph-art { display: flex; align-items: flex-end; justify-content: center; gap: 24px }
.ph-jar figure { overflow: visible; background: none; padding-top: 30px }
.ph-jar figure img { border-radius: 28px 28px 46px 46px; outline: 6px solid rgba(255, 255, 255, .6); outline-offset: -6px }
.ph-jar .p0 { width: 54% } .ph-jar .p0 img { aspect-ratio: 3 / 4 } .ph-jar .p1 { width: 40% } .ph-jar .p1 img { aspect-ratio: 3 / 3.4 }
.ph-jar figure::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 42px; z-index: 2; background: radial-gradient(circle, rgba(255, 255, 255, .35) 1.5px, transparent 2px) 0 0 / 10px 10px, var(--accent); border-radius: 12px 12px 30% 30% / 12px 12px 60% 60%; box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--accent) 60%, #000) }
.ph-jar figure::after { content: "Homemade"; position: absolute; left: 16%; right: 16%; top: 54%; display: grid; place-items: center; padding: 12px 6px; background: #fffdf5; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); font: 400 1.4rem/1 var(--head); color: var(--accent) }
.ph-jar .p1::after { content: "Fresh" }
.ph-jar .display { font-size: clamp(3rem, 6.6vw, 5.6rem) }
/* Masala dabba: seven round bowls in a steel box */
.ph-dabba .ph-art { width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbfcfd, #c3c8cf 55%, #9097a1); box-shadow: var(--shadow), inset 0 0 0 10px #d9dde2, inset 0 0 0 12px #a8aeb6 }
.ph-dabba figure { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 5px solid #e9ecef; box-shadow: 0 2px 6px rgba(0, 0, 0, .25) }
.ph-dabba .p0 { left: 35%; top: 35% } .ph-dabba .p1 { left: 68%; top: 35% } .ph-dabba .p2 { left: 51.5%; top: 63.6% } .ph-dabba .p3 { left: 18.5%; top: 63.6% }
.ph-dabba .p4 { left: 2%; top: 35% } .ph-dabba .p5 { left: 18.5%; top: 6.4% } .ph-dabba .p6 { left: 51.5%; top: 6.4% }
.ph-dabba .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Diner: a round sign over a checkerboard floor */
.ph-diner .ph-art { aspect-ratio: 1 / 1.05; display: grid; place-items: center }
.ph-diner .ph-art::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 44%; background: conic-gradient(#1f1720 25%, #fff 0 50%, #1f1720 0 75%, #fff 0) 0 0 / 56px 56px; transform: perspective(500px) rotateX(55deg); transform-origin: bottom; border-radius: 6px }
.ph-diner figure { width: 74%; aspect-ratio: 1; margin-bottom: 18%; border-radius: 50%; border: 14px solid var(--accent); box-shadow: 0 0 0 8px #fff, 0 0 0 12px var(--accent), 0 30px 50px -20px rgba(0, 0, 0, .5); z-index: 1 }
.ph-diner .ph-art::after { content: attr(data-c); position: absolute; z-index: 2; left: 50%; top: 62%; max-width: 80%; transform: translateX(-50%) rotate(-6deg); padding: 10px 22px; background: #1f1720; color: #fff; font: 400 1.4rem/1.2 var(--head); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 0 3px var(--accent) }
.ph-diner .display { font-size: clamp(2.6rem, 5.4vw, 4.6rem) }

/* -- Venues -- */
/* Estate: a fine inset frame and a monogram over a full photo */
.ph-estate figure::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .34) 50%, rgba(0, 0, 0, .62)) }
.ph-estate .ph-art::before { content: ""; position: absolute; inset: clamp(14px, 2.4vw, 28px); z-index: 1; border: 1px solid rgba(255, 255, 255, .55); outline: 1px solid rgba(255, 255, 255, .3); outline-offset: -8px }
.ph-estate .ph-art::after { content: attr(data-i); position: absolute; z-index: 1; left: 50%; top: clamp(50px, 7vw, 84px); transform: translateX(-50%); width: 80px; height: 80px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; color: #fff; font: 400 1.6rem/1 var(--head); letter-spacing: .06em; background: rgba(0, 0, 0, .2) }
.ph-estate .ph-text { padding-top: 170px }
.ph-estate .display { font-size: clamp(3rem, 7vw, 6.4rem) }
/* Keycard: the photo printed on a room key card */
.ph-keycard .ph-art { width: min(520px, 100%); aspect-ratio: 1.586; margin: 40px auto; transform: rotate(-5deg) }
.ph-keycard .ph-art::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); transform: rotate(14deg) translate(5%, -4%); box-shadow: var(--shadow) }
.ph-keycard figure { position: absolute; inset: 0; border-radius: 22px; box-shadow: var(--shadow) }
.ph-keycard figure::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 55%) }
.ph-keycard figure::after { content: ""; position: absolute; left: 8%; top: 34%; width: 13%; aspect-ratio: 1.3; z-index: 1; border-radius: 6px; background: linear-gradient(135deg, #f6e27a, #c79a2c 60%, #f3d36c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25) }
.ph-keycard .ph-art::after { content: attr(data-n); position: absolute; left: 8%; right: 8%; bottom: 10%; color: #fff; font: 700 1.15rem/1.15 var(--head); letter-spacing: .02em }
.ph-keycard .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Aerial: map contour lines and a pin on a full photo */
.ph-aerial figure img { filter: saturate(.85) brightness(.82) }
.ph-aerial .ph-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 76% 26%, var(--accent) 0 7px, #fff 7px 10px, transparent 11px), repeating-radial-gradient(circle at 76% 26%, transparent 0 26px, rgba(255, 255, 255, .3) 26px 27.5px); -webkit-mask: radial-gradient(circle at 76% 26%, #000 0 22%, transparent 55%); mask: radial-gradient(circle at 76% 26%, #000 0 22%, transparent 55%) }
.ph-aerial .ph-art::after { content: attr(data-n); position: absolute; z-index: 2; left: 76%; top: 26%; max-width: 56vw; transform: translate(-50%, calc(-100% - 18px)); padding: 9px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 13.5px/1.1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5); animation: phx-drop .9s var(--ease) .2s both }
@keyframes phx-drop { from { transform: translate(-50%, calc(-100% - 70px)); opacity: 0 } }
.ph-aerial .display { font-size: clamp(3rem, 7vw, 6.2rem) }
/* Lobby: tall photo like lift doors, a floor dial and a brass plate */
.ph-lobby .ph-art { padding: 56px 0 70px; display: grid; justify-items: center }
.ph-lobby figure { width: min(380px, 80%); aspect-ratio: 3 / 4.4; border-radius: 0; border: 10px solid color-mix(in srgb, var(--accent) 75%, #000); box-shadow: 0 0 0 1px var(--accent), var(--shadow) }
.ph-lobby figure::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .4); box-shadow: 1px 0 0 rgba(255, 255, 255, .15) }
.ph-lobby .ph-art::before { content: "G  1  2  3  4  5"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 10px 24px 8px; border-radius: 40px 40px 6px 6px; background: linear-gradient(180deg, #e9cf86, #a77f2e); color: #3a2a0c; font: 700 14px/1 var(--body); letter-spacing: .2em; white-space: pre }
.ph-lobby .ph-art::after { content: attr(data-n); position: absolute; bottom: 0; left: 50%; max-width: 90%; transform: translateX(-50%); padding: 11px 24px; background: linear-gradient(180deg, #ecd391, #a98030); color: #2c2009; font: 400 1.05rem/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6) }
.ph-lobby .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Gate: grand doors swing open over the photo */
.ph-gate figure::after { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .38), rgba(0, 0, 0, .62)) }
.ph-gate .ph-art::before, .ph-gate .ph-art::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 60px), linear-gradient(90deg, #3a2414, #24150b); box-shadow: inset 0 0 0 clamp(10px, 1.6vw, 18px) #2a190d, inset 0 0 0 calc(clamp(10px, 1.6vw, 18px) + 2px) var(--accent); animation: phx-gate-l 2.4s var(--ease) .3s both }
.ph-gate .ph-art::before { left: 0; transform: translateX(-84%) }
.ph-gate .ph-art::after { right: 0; transform: translateX(84%); animation-name: phx-gate-r }
@keyframes phx-gate-l { from { transform: translateX(0) } }
@keyframes phx-gate-r { from { transform: translateX(0) } }
.ph-gate .ph-text { max-width: 860px }
.ph-gate .display { font-size: clamp(2.8rem, 6.6vw, 5.8rem) }
/* Skyline: a city skyline along the bottom of a wide photo */
.ph-skyline .ph-art { width: min(100%, calc(52svh * 21 / 8)) }
.ph-skyline figure { aspect-ratio: 21 / 8 }
.ph-skyline .ph-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%; background: var(--accent); clip-path: polygon(0 100%, 0 60%, 4% 60%, 4% 40%, 8% 40%, 8% 70%, 12% 70%, 12% 25%, 15% 25%, 15% 10%, 17% 10%, 17% 25%, 20% 25%, 20% 65%, 25% 65%, 25% 45%, 30% 45%, 30% 75%, 34% 75%, 34% 30%, 38% 30%, 38% 50%, 43% 50%, 43% 0, 45% 0, 45% 50%, 48% 50%, 48% 70%, 53% 70%, 53% 35%, 58% 35%, 58% 55%, 62% 55%, 62% 20%, 66% 20%, 66% 60%, 71% 60%, 71% 42%, 76% 42%, 76% 72%, 80% 72%, 80% 28%, 84% 28%, 84% 52%, 89% 52%, 89% 66%, 93% 66%, 93% 40%, 97% 40%, 97% 70%, 100% 70%, 100% 100%) }
.ph-skyline .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Poolside: the photo set in a tiled pool edge with ripples */
.ph-pool figure { aspect-ratio: 4 / 3.6; border-radius: 40px; padding: 14px; background: conic-gradient(#e6f6fa 25%, color-mix(in srgb, var(--accent) 55%, #fff) 0 50%, #e6f6fa 0 75%, color-mix(in srgb, var(--accent) 55%, #fff) 0) 0 0 / 14px 14px; box-shadow: var(--shadow) }
.ph-pool figure img { border-radius: 28px }
.ph-pool figure::after { content: ""; position: absolute; inset: 14px; border-radius: 28px; background: repeating-radial-gradient(ellipse at 30% 40%, transparent 0 18px, rgba(255, 255, 255, .2) 20px 22px, transparent 24px 40px); mix-blend-mode: screen; animation: phx-ripple 6s linear infinite }
@keyframes phx-ripple { to { background-position: 40px 20px } }
.ph-pool .display { font-size: clamp(2.6rem, 5.6vw, 4.8rem) }
/* Brochure: a tri-fold standing open */
.ph-brochure .ph-art { display: flex; perspective: 1400px; height: min(66vh, 560px) }
.ph-brochure figure { flex: 1; border-radius: 0; box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .45) }
.ph-brochure .p0 { transform: rotateY(24deg); transform-origin: right center } .ph-brochure .p2 { transform: rotateY(-24deg); transform-origin: left center } .ph-brochure .p1 { z-index: 1 }
.ph-brochure .p0::after, .ph-brochure .p2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .28)) }
.ph-brochure .p2::after { background: linear-gradient(270deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .28)) }
.ph-brochure .ph-art::after { content: attr(data-n); position: absolute; left: 33.4%; right: 33.4%; bottom: 8%; z-index: 2; padding: 10px; text-align: center; background: var(--accent); color: var(--on-accent); font: 700 12.5px/1.25 var(--body); text-transform: uppercase; letter-spacing: .08em }
.ph-brochure .display { font-size: clamp(2.6rem, 5.4vw, 4.8rem) }
/* Signboard: a hanging wooden sign over a full photo */
.ph-sign { align-items: center }
.ph-sign .ph-text { position: relative; width: min(760px, calc(100% - 2 * var(--gut))); margin: 150px auto 80px; padding: clamp(28px, 4vw, 46px); background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent), repeating-linear-gradient(0deg, #6b4423 0 34px, #5c3a1e 34px 36px); color: #fdf4e3; border: 8px solid #3f2814; border-radius: 10px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6); text-shadow: none }
.ph-sign .ph-text::before, .ph-sign .ph-text::after { content: ""; position: absolute; bottom: calc(100% + 8px); left: 18%; width: 3px; height: 220px; background: #c9b48a }
.ph-sign .ph-text::after { left: auto; right: 18% }
.ph-sign .eyebrow { color: #f3c98b }
.ph-sign .display { font-size: clamp(2.4rem, 5.4vw, 4.6rem) }
/* Terrace: four photos rising like steps */
.ph-terrace .ph-art { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 10px; height: min(70vh, 600px) }
.ph-terrace figure { border-radius: var(--r-img) var(--r-img) 0 0 }
.ph-terrace .p0 { height: 46% } .ph-terrace .p1 { height: 64% } .ph-terrace .p2 { height: 82% } .ph-terrace .p3 { height: 100% }
.ph-terrace .ph-art::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -8px; height: 8px; background: var(--accent) }
.ph-terrace .display { font-size: clamp(2.8rem, 6vw, 5.4rem) }
/* Locale: a hand-drawn map with a photo pin */
.ph-locale .ph-art { aspect-ratio: 4 / 3.6; border-radius: var(--r); background: linear-gradient(115deg, transparent 0 46%, rgba(74, 163, 223, .45) 46% 52%, transparent 52%), repeating-linear-gradient(28deg, transparent 0 70px, var(--card) 70px 78px), repeating-linear-gradient(-62deg, transparent 0 90px, var(--card) 90px 96px), color-mix(in srgb, var(--bg-2) 70%, #d8e3c8); box-shadow: var(--shadow) }
.ph-locale figure { position: absolute; left: 32%; top: 18%; width: 38%; aspect-ratio: 1; z-index: 1; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 6px solid var(--card); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5) }
.ph-locale figure img { transform: rotate(45deg) scale(1.45) }
.ph-locale .ph-art::before { content: ""; position: absolute; left: 51%; top: 67%; width: 44px; height: 14px; margin-left: -22px; border-radius: 50%; background: rgba(0, 0, 0, .25); filter: blur(2px) }
.ph-locale .ph-art::after { content: attr(data-c); position: absolute; left: 51%; top: 74%; max-width: 80%; transform: translateX(-50%); padding: 7px 14px; background: var(--ink); color: var(--bg); border-radius: 6px; font: 700 13px var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-locale .display { font-size: clamp(2.6rem, 5.6vw, 4.8rem) }

/* -- Makeup & styling -- */
/* Palette: an eyeshadow palette, the photo as its mirror */
.ph-pans .ph-art { aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, .08); background: radial-gradient(closest-side, var(--accent) 0 92%, transparent 95%) 56% 24% / 15% 20% no-repeat, radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, #fff) 0 92%, transparent 95%) 76% 24% / 15% 20% no-repeat, radial-gradient(closest-side, #e5c3a6 0 92%, transparent 95%) 96% 24% / 15% 20% no-repeat, radial-gradient(closest-side, color-mix(in srgb, var(--accent) 65%, #000) 0 92%, transparent 95%) 56% 76% / 15% 20% no-repeat, radial-gradient(closest-side, #8e5b7e 0 92%, transparent 95%) 76% 76% / 15% 20% no-repeat, radial-gradient(closest-side, #c99a6e 0 92%, transparent 95%) 96% 76% / 15% 20% no-repeat, linear-gradient(160deg, #2a2224, #141012) }
.ph-pans figure { position: absolute; left: 5%; top: 7%; width: 38%; height: 86%; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) }
.ph-pans .ph-art::after { content: attr(data-n); position: absolute; left: 48%; right: 6%; bottom: 4.5%; font: 500 11px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #d9c7b8; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-pans .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Rouge: two lipstick bullets in gold cases */
.ph-rouge .ph-art { display: flex; align-items: flex-end; justify-content: center; gap: clamp(18px, 3vw, 36px); height: min(74vh, 620px) }
.ph-rouge figure { width: 30%; border-radius: 6px 6px 4px 4px; background: none }
.ph-rouge .p0 { height: 100% } .ph-rouge .p1 { height: 78% }
.ph-rouge figure img { clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%) }
.ph-rouge figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(90deg, #8a6a2c, #f3dc95 35%, #b8913f 60%, #e8cd7d 85%, #7d5f25); border-top: 4px solid #6e5420 }
.ph-rouge .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Brush: the photo painted on in one brush stroke */
.ph-brush .ph-art { aspect-ratio: 4 / 3.4 }
.ph-brush figure, .ph-brush .ph-art::before { position: absolute; inset: 0; border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 340' preserveAspectRatio='none'%3E%3Cpath d='M14 40C60 18 140 30 210 14C270 2 340 22 388 10C380 60 396 120 384 170C374 230 396 280 380 330C320 318 250 336 180 326C120 318 60 336 18 324C28 270 6 210 20 150C30 100 4 80 14 40Z'/%3E%3Cpath d='M30 6L120 2L118 8L32 12ZM300 334L392 330L390 338L298 340ZM0 200L6 120L10 122L4 202Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 340' preserveAspectRatio='none'%3E%3Cpath d='M14 40C60 18 140 30 210 14C270 2 340 22 388 10C380 60 396 120 384 170C374 230 396 280 380 330C320 318 250 336 180 326C120 318 60 336 18 324C28 270 6 210 20 150C30 100 4 80 14 40Z'/%3E%3Cpath d='M30 6L120 2L118 8L32 12ZM300 334L392 330L390 338L298 340ZM0 200L6 120L10 122L4 202Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat }
.ph-brush .ph-art::before { content: ""; background: var(--accent); transform: translate(5%, 6%) rotate(-3deg); opacity: .85 }
.ph-brush .display { font-size: clamp(3rem, 6.4vw, 5.6rem) }
/* Mehndi: a henna-dot border around an arched photo */
.ph-mehndi .ph-art { padding: 26px; border-radius: 999px 999px 24px 24px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 80%, #000) 0 1.6px, transparent 2.2px) 0 0 / 13px 13px, radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0 1px, transparent 1.6px) 6.5px 6.5px / 13px 13px, var(--card); box-shadow: var(--shadow) }
.ph-mehndi .ph-art::before { content: ""; position: absolute; inset: 10px; z-index: 2; border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 999px 999px 18px 18px; pointer-events: none }
.ph-mehndi .ph-art::after { content: ""; position: absolute; inset: -14px; z-index: -1; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px 999px 34px 34px }
.ph-mehndi figure { aspect-ratio: 4 / 5; border-radius: 999px 999px 14px 14px }
.ph-mehndi .display { font-size: clamp(2.8rem, 6vw, 5rem) }
/* Gloss: a glossy light sweep over a full beauty shot */
.ph-gloss figure::after { background: linear-gradient(0deg, rgba(60, 10, 40, .7), rgba(60, 10, 40, .1) 60%), linear-gradient(120deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent 55%) }
.ph-gloss .ph-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .45) 48%, rgba(255, 255, 255, 0) 56%) no-repeat; background-size: 250% 100%; animation: phx-sheen 5s ease-in-out infinite; mix-blend-mode: soft-light }
@keyframes phx-sheen { 0% { background-position: 120% 0 } 60%, 100% { background-position: -40% 0 } }
.ph-gloss .display { font-size: clamp(3rem, 7.4vw, 6.6rem) }
/* Parfum: the photo inside a perfume bottle with a gold cap */
.ph-parfum .ph-art { display: grid; justify-items: center; padding-top: 100px }
.ph-parfum .ph-art::before { content: ""; position: absolute; top: 0; left: 50%; width: 26%; height: 70px; transform: translateX(-50%); border-radius: 10px 10px 4px 4px; background: linear-gradient(90deg, #7b5f2a, #f1d78e 40%, #b38c3d 70%, #e5c979); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6) }
.ph-parfum .ph-art::after { content: ""; position: absolute; top: 70px; left: 50%; width: 16%; height: 32px; transform: translateX(-50%); background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .4); border-top: 0 }
.ph-parfum figure { width: min(380px, 78%); aspect-ratio: 3 / 3.4; border-radius: 40px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 11px rgba(255, 255, 255, .25), var(--shadow) }
.ph-parfum figure::after { content: ""; position: absolute; top: 8%; bottom: 8%; left: 9%; width: 9%; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)) }
.ph-parfum .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Before After: two looks in one frame with a sliding divider */
.ph-beforeafter .ph-art { aspect-ratio: 4 / 4.6; border-radius: var(--r-img); overflow: hidden; box-shadow: var(--shadow) }
.ph-beforeafter figure { position: absolute; inset: 0; border-radius: 0 }
.ph-beforeafter .p0 img { filter: saturate(.45) }
.ph-beforeafter .p1 { clip-path: inset(0 0 0 50%); animation: phx-slide 6s ease-in-out infinite alternate }
.ph-beforeafter .ph-art::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; z-index: 2; animation: phx-slide-at 6s ease-in-out infinite alternate }
.ph-beforeafter .ph-art::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #222; font: 700 18px/1 var(--body); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); z-index: 3; animation: phx-slide-at 6s ease-in-out infinite alternate }
.ph-beforeafter figure::after { content: "Before"; position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 700 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase }
.ph-beforeafter .p1::after { content: "After"; left: auto; right: 14px; background: var(--accent); color: var(--on-accent) }
@keyframes phx-slide { from { clip-path: inset(0 0 0 38%) } to { clip-path: inset(0 0 0 62%) } }
@keyframes phx-slide-at { from { left: 38% } to { left: 62% } }
.ph-beforeafter .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Jewel: the photo cut like a gemstone, with sparkles */
.ph-jewel .ph-art { width: min(440px, 80vw, 50svh); aspect-ratio: 1; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)) }
.ph-jewel figure { position: absolute; inset: 0; border-radius: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%) }
.ph-jewel figure::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 22.5deg, rgba(255, 255, 255, .2) 0 45deg, transparent 0 90deg, rgba(255, 255, 255, .1) 0 135deg, transparent 0 180deg, rgba(255, 255, 255, .2) 0 225deg, transparent 0 270deg, rgba(255, 255, 255, .1) 0 315deg, transparent 0) }
.ph-jewel .ph-art::before, .ph-jewel .ph-art::after { content: ""; position: absolute; z-index: 2; width: 36px; aspect-ratio: 1; background: var(--accent); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: phx-twinkle 2.6s ease-in-out infinite }
.ph-jewel .ph-art::before { right: 2%; top: 6% } .ph-jewel .ph-art::after { left: 4%; bottom: 10%; width: 24px; background: #f5d77a; animation-delay: -1.3s }
@keyframes phx-twinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .5 } }
.ph-jewel .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Tulle: a soft net veil over a full photo, dark text on it */
.ph-tulle { align-items: center; color: var(--ink) }
.ph-tulle .ph-text { text-shadow: none }
.ph-tulle figure::after { background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0 40%, color-mix(in srgb, var(--bg) 30%, transparent) 75%, transparent) }
.ph-tulle .btn-line { color: var(--ink); border-color: var(--line-2) }
.ph-tulle .display { font-size: clamp(3.4rem, 8vw, 7rem) }
/* Appointment: a slot card listing the services beside a portrait */
.ph-appoint .ph-art { padding-bottom: 60px }
.ph-appoint figure { width: 76%; margin-left: auto; aspect-ratio: 4 / 5 }
.ph-appoint .ph-x-svcs { position: absolute; left: 0; bottom: 0; width: min(330px, 74%); padding: 56px 20px 14px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); border-top: 6px solid var(--accent) }
.ph-appoint .ph-x-svcs::before { content: "Book a slot"; position: absolute; left: 20px; top: 18px; font: 400 1.25rem/1 var(--head) }
.ph-appoint .ph-x-svcs li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px }
.ph-appoint .ph-x-svcs li::before { content: "10:00"; font: 700 12px var(--body); color: var(--accent) }
.ph-appoint .ph-x-svcs li:nth-child(2)::before { content: "12:30" } .ph-appoint .ph-x-svcs li:nth-child(3)::before { content: "15:00" } .ph-appoint .ph-x-svcs li:nth-child(4)::before { content: "17:30" }
.ph-appoint .ph-x-svcs li b { font-size: 13px; color: var(--muted) }
.ph-appoint .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Polish: nail-polish bottles, one holding the photo */
.ph-polish .ph-art { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 2vw, 22px); height: min(70vh, 580px) }
.ph-polish figure { width: 40%; aspect-ratio: 3 / 3.8; margin-top: 110px; border-radius: 22px 22px 26px 26px; overflow: visible; background: none }
.ph-polish figure img { border-radius: 22px 22px 26px 26px }
.ph-polish figure::before { content: ""; position: absolute; bottom: 100%; left: 32%; right: 32%; height: 110px; background: linear-gradient(90deg, #111, #444 40%, #111); border-radius: 8px 8px 2px 2px }
.ph-polish .ph-art::before, .ph-polish .ph-art::after { content: ""; width: 20%; height: 52%; border-radius: 14px; background: linear-gradient(90deg, #141414, #3a3a3a 40%, #141414) top center / 44% 38% no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .35) 0 10%, transparent 10%) 18% 100% / 100% 58% no-repeat, linear-gradient(color-mix(in srgb, var(--accent) 60%, #fff), color-mix(in srgb, var(--accent) 60%, #fff)) bottom / 100% 62% no-repeat }
.ph-polish .ph-art::after { height: 44%; background: linear-gradient(90deg, #141414, #3a3a3a 40%, #141414) top center / 44% 38% no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .3) 0 10%, transparent 10%) 18% 100% / 100% 58% no-repeat, linear-gradient(color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent) 70%, #000)) bottom / 100% 62% no-repeat }
.ph-polish .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }

/* -- DJ & music -- */
/* Melam: a thavil drum with rope lacing and a stick */
.ph-melam .ph-art { width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto }
.ph-melam .ph-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#f0dfb4 0 3deg, transparent 3deg 9deg), #5a2e14; -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79%); mask: radial-gradient(closest-side, transparent 78%, #000 79%) }
.ph-melam figure { position: absolute; inset: 11%; border-radius: 50%; border: 14px solid #7a4421; box-shadow: 0 0 0 4px #3d200d }
.ph-melam figure::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 55%, rgba(60, 30, 10, .4)) }
.ph-melam .ph-art::after { content: ""; position: absolute; right: 4%; top: -4%; width: 14px; height: 52%; border-radius: 7px; background: linear-gradient(90deg, #8a5a2b, #d6a86a 50%, #8a5a2b); transform: rotate(32deg); box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .4) }
.ph-melam .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Ghungroo: a string of small gold bells under a wide photo */
.ph-ghungroo .ph-art { width: min(100%, calc(50svh * 21 / 8)); padding-bottom: 46px }
.ph-ghungroo figure { aspect-ratio: 21 / 8 }
.ph-ghungroo .ph-art::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 46px; background: radial-gradient(circle at 50% 24px, #fbe39a 0 7px, #c99a2e 8px 11px, transparent 12px) 0 0 / 30px 46px repeat-x, linear-gradient(color-mix(in srgb, var(--accent) 80%, #000), color-mix(in srgb, var(--accent) 80%, #000)) 0 10px / 100% 4px no-repeat; animation: phx-jingle 1.8s ease-in-out infinite }
@keyframes phx-jingle { 50% { transform: translateY(2px) } }
.ph-ghungroo .display { font-size: clamp(3rem, 6.6vw, 5.8rem) }
/* Mixer: the photo on the screen beside faders and level lights */
.ph-mixer .ph-art { display: grid; grid-template-columns: 1fr clamp(80px, 14vw, 130px); gap: 18px; padding: 44px 20px 20px; background: linear-gradient(180deg, #1d2128, #12151a); border-radius: 18px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08) }
.ph-mixer figure { aspect-ratio: 4 / 3.4; border-radius: 8px; border: 2px solid #2b313b; box-shadow: 0 0 30px -6px color-mix(in srgb, var(--accent) 50%, transparent) }
.ph-mixer .ph-art::before { content: ""; position: absolute; left: 20px; right: 20px; top: 16px; height: 12px; background: linear-gradient(90deg, #22c55e 0 60%, #facc15 60% 80%, #ef4444 80%); -webkit-mask: radial-gradient(circle, #000 0 4px, transparent 5px) 0 0 / 18px 12px repeat-x; mask: radial-gradient(circle, #000 0 4px, transparent 5px) 0 0 / 18px 12px repeat-x; animation: phx-level 1.4s steps(5) infinite alternate }
@keyframes phx-level { 0% { clip-path: inset(0 45% 0 0) } 40% { clip-path: inset(0 12% 0 0) } 70% { clip-path: inset(0 55% 0 0) } 100% { clip-path: inset(0 22% 0 0) } }
.ph-mixer .ph-art::after { content: ""; border-radius: 8px; background: linear-gradient(90deg, transparent calc(50% - 13px), var(--accent) 0 calc(50% + 13px), transparent 0) 0 28% / 33.34% 14px no-repeat, linear-gradient(90deg, transparent calc(50% - 13px), #e5e7eb 0 calc(50% + 13px), transparent 0) 50% 72% / 33.34% 14px no-repeat, linear-gradient(90deg, transparent calc(50% - 13px), var(--accent) 0 calc(50% + 13px), transparent 0) 100% 46% / 33.34% 14px no-repeat, linear-gradient(90deg, transparent calc(50% - 2px), #000 0 calc(50% + 2px), transparent 0) 0 50% / 33.34% 86% repeat-x, #0c0e12 }
.ph-mixer .display { font-size: clamp(2.2rem, 5vw, 4.6rem) }
/* Waveform: a sound wave across a full photo */
.ph-wave figure img { filter: grayscale(.6) brightness(.6) }
.ph-wave .ph-art::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: clamp(90px, 14vw, 150px); z-index: 1; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 8px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 48L20 40L40 26L60 36L80 16L100 30L120 8L140 22L160 34L180 12L200 4L220 20L240 38L260 24L280 10L300 28L320 42L340 32L360 20L380 40L400 48L400 52L380 60L360 80L340 68L320 58L300 72L280 90L260 76L240 62L220 80L200 96L180 88L160 66L140 78L120 92L100 70L80 84L60 64L40 74L20 60L0 52Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 48L20 40L40 26L60 36L80 16L100 30L120 8L140 22L160 34L180 12L200 4L220 20L240 38L260 24L280 10L300 28L320 42L340 32L360 20L380 40L400 48L400 52L380 60L360 80L340 68L320 58L300 72L280 90L260 76L240 62L220 80L200 96L180 88L160 66L140 78L120 92L100 70L80 84L60 64L40 74L20 60L0 52Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: phx-wave 6s linear infinite }
@keyframes phx-wave { to { background-position: 80px 0 } }
.ph-wave .display { font-size: clamp(2rem, 5vw, 4.4rem) }
/* Mic: the photo inside a microphone head */
.ph-mic .ph-art { display: grid; justify-items: center; padding-bottom: 160px }
.ph-mic figure { width: min(380px, 76%); aspect-ratio: 1; border-radius: 50%; border: 12px solid #2a2a2a; box-shadow: 0 0 0 3px #8d8d8d, var(--shadow) }
.ph-mic figure::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .3) 0 1.4px, transparent 2px) 0 0 / 8px 8px; -webkit-mask: radial-gradient(circle, transparent 40%, #000 72%); mask: radial-gradient(circle, transparent 40%, #000 72%) }
.ph-mic .ph-art::before { content: ""; position: absolute; bottom: 132px; left: 50%; z-index: 1; width: min(190px, 40%); height: 32px; transform: translateX(-50%); border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, #000), var(--accent) 40%, color-mix(in srgb, var(--accent) 60%, #000)) }
.ph-mic .ph-art::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 70px; height: 140px; transform: translateX(-50%); background: linear-gradient(90deg, #1b1b1b, #4a4a4a 45%, #1b1b1b); clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%) }
.ph-mic .display { font-size: clamp(3rem, 7vw, 6rem) }
/* Setlist: a handwritten set list taped beside a live photo */
.ph-setlist .ph-art { padding-bottom: 40px }
.ph-setlist figure { width: 74%; aspect-ratio: 4 / 5; border-radius: 4px }
.ph-setlist figure img { filter: grayscale(.3) contrast(1.05) }
.ph-setlist .ph-x-svcs { position: absolute; right: 0; bottom: 0; width: min(300px, 62%); padding: 52px 22px 22px; background: linear-gradient(rgba(231, 223, 198, .85), rgba(231, 223, 198, .85)) 50% 0 / 96px 24px no-repeat, #fbf8f1; color: #1d1a16; transform: rotate(-3deg); box-shadow: 0 20px 34px -16px rgba(0, 0, 0, .7); counter-reset: phx; font: 400 .95rem/1.3 var(--head) }
.ph-setlist .ph-x-svcs::before { content: "Set list"; position: absolute; top: 18px; left: 22px; font: 400 1.1rem var(--head); color: var(--accent) }
.ph-setlist .ph-x-svcs li { counter-increment: phx; display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .1) }
.ph-setlist .ph-x-svcs li::before { content: counter(phx) "."; color: var(--accent) }
.ph-setlist .ph-x-svcs li b { display: none }
.ph-setlist .display { font-size: clamp(2rem, 4.4vw, 3.6rem) }
/* Disco: a mirror ball of the photo scattering sparkles */
.ph-disco .ph-art { width: min(420px, 74vw, 46svh); aspect-ratio: 1; margin-top: 60px }
.ph-disco .ph-art::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 220px; background: linear-gradient(transparent, #999) }
.ph-disco figure { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 80px -10px color-mix(in srgb, var(--accent) 70%, transparent) }
.ph-disco figure::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1.5px, transparent 1.5px 20px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 1.5px, transparent 1.5px 20px), radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .75), transparent 26%), radial-gradient(circle, transparent 46%, rgba(0, 0, 0, .6) 72%); animation: phx-disco 6s linear infinite }
@keyframes phx-disco { to { background-position: 0 40px, 40px 0, 0 0, 0 0 } }
.ph-disco .ph-art::after { content: ""; position: absolute; inset: -60%; z-index: -1; background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 0 0 / 70px 90px, radial-gradient(circle, var(--accent) 0 1.5px, transparent 2.5px) 30px 40px / 110px 80px; -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); animation: phx-glint 3s ease-in-out infinite alternate }
@keyframes phx-glint { to { opacity: .3 } }
.ph-disco .display { font-size: clamp(2.2rem, 6vw, 5rem) }
/* Amp: a speaker stack with the photos in the woofers */
.ph-amp .ph-art { display: grid; gap: 18px; justify-items: center; padding: 26px; background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 6px 6px, #18181b; border-radius: 14px; box-shadow: var(--shadow), inset 0 0 0 3px #2a2a2e }
.ph-amp .ph-art::before { content: ""; width: 60%; height: 18px; background: radial-gradient(circle, #d1d5db 0 6px, #333 7px 8px, transparent 9px) 0 50% / 40px 18px repeat-x }
.ph-amp figure { width: min(290px, 66%); aspect-ratio: 1; border-radius: 50%; border: 16px solid #0b0b0c; box-shadow: 0 0 0 4px #2f2f33, 0 0 0 7px #0b0b0c; animation: phx-pulse 1.1s ease-in-out infinite }
.ph-amp .p1 { width: min(190px, 46%); animation-delay: -.55s }
@keyframes phx-pulse { 50% { transform: scale(1.03) } }
.ph-amp .ph-art::after { content: attr(data-n); max-width: 90%; padding: 6px 14px; border: 1.5px solid #555; border-radius: 4px; color: #ccc; font: 700 12px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-amp .display { font-size: clamp(2.6rem, 7vw, 6rem) }
/* Baraat: festive bunting over a full photo */
.ph-baraat .ph-art::before { content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 60px; z-index: 1; transform-origin: top; background: conic-gradient(from -23.5deg at 50% 100%, var(--accent) 0 47deg, transparent 0) 0 6px / 80px 46px repeat-x, conic-gradient(from -23.5deg at 50% 100%, #fff3d6 0 47deg, transparent 0) 40px 6px / 80px 46px repeat-x, linear-gradient(#fff, #fff) 0 5px / 100% 2px no-repeat; animation: phx-flutter 3s ease-in-out infinite alternate }
@keyframes phx-flutter { to { transform: skewX(3deg) } }
.ph-baraat .ph-text { padding-top: 170px }
.ph-baraat .display { font-size: clamp(3.2rem, 8vw, 7rem) }
/* Keys: a wide photo resting on piano keys */
.ph-keys .ph-art { width: 100%; padding-bottom: 96px }
.ph-keys figure { aspect-ratio: 21 / 7.4; border-radius: var(--r-img) var(--r-img) 0 0 }
.ph-keys .ph-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; border-radius: 0 0 6px 6px; border-top: 6px solid var(--accent); background: linear-gradient(90deg, transparent 0 26px, #111 26px 52px, transparent 52px 66px, #111 66px 92px, transparent 92px 146px, #111 146px 172px, transparent 172px 186px, #111 186px 212px, transparent 212px 226px, #111 226px 252px, transparent 252px) 0 0 / 280px 58% repeat-x, repeating-linear-gradient(90deg, #fffdf8 0 38px, #c9c3b6 38px 40px); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .4) }
.ph-keys .display { font-size: clamp(3rem, 7vw, 6rem) }

/* -- Planners -- */
/* Agenda: a spiral-bound planner open on two pages */
.ph-agenda .ph-art { display: grid; grid-template-columns: 1fr 1fr; padding: 18px; background: var(--card); border-radius: 10px; box-shadow: var(--shadow) }
.ph-agenda .ph-art::before { content: attr(data-y); padding: 14px 18px 0 30px; font: 400 1.6rem/1 var(--head); color: var(--accent); background: linear-gradient(90deg, transparent 20px, rgba(220, 60, 60, .35) 20px 21px, transparent 21px), repeating-linear-gradient(transparent 0 29px, color-mix(in srgb, var(--accent) 22%, transparent) 29px 30px) 0 50px / 100% calc(100% - 50px) no-repeat }
.ph-agenda figure { aspect-ratio: 3 / 4; border-radius: 4px; margin-left: 24px }
.ph-agenda .ph-art::after { content: ""; position: absolute; top: 22px; bottom: 22px; left: 50%; width: 30px; margin-left: -6px; background: repeating-linear-gradient(180deg, transparent 0 10px, #9aa0a8 10px 15px, transparent 15px 26px); border-radius: 4px }
.ph-agenda .display { font-size: clamp(3rem, 6.6vw, 5.6rem) }
/* Moodboard: photos, a colour chip and a fabric swatch */
.ph-mood .ph-art { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, clamp(110px, 17vh, 180px)); gap: 12px; padding: 16px; background: var(--card); border-radius: 6px; box-shadow: var(--shadow) }
.ph-mood .p0 { grid-area: 1 / 1 / 3 / 3 } .ph-mood .p1 { grid-area: 1 / 3 / 2 / 4 } .ph-mood .p2 { grid-area: 3 / 2 / 4 / 4 }
.ph-mood .ph-art::before { content: "Accent"; grid-area: 2 / 3 / 3 / 4; display: flex; align-items: flex-end; padding: 8px 10px; background: linear-gradient(var(--accent), var(--accent)) top / 100% 70% no-repeat, #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #222 }
.ph-mood .ph-art::after { content: ""; grid-area: 3 / 1 / 4 / 2; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 6px), color-mix(in srgb, var(--accent) 35%, #e9dcc9); -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x }
.ph-mood .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Seating chart: round tables, the photo as the head table */
.ph-seating .ph-art { aspect-ratio: 1; width: 100%; max-width: 580px; margin: 0 auto; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: radial-gradient(closest-side, var(--card) 0 84%, var(--line-2) 86% 90%, transparent 92%) 6% 8% / 22% 22% no-repeat, radial-gradient(closest-side, var(--card) 0 84%, var(--line-2) 86% 90%, transparent 92%) 94% 8% / 22% 22% no-repeat, radial-gradient(closest-side, var(--card) 0 84%, var(--line-2) 86% 90%, transparent 92%) 6% 92% / 22% 22% no-repeat, radial-gradient(closest-side, var(--card) 0 84%, var(--line-2) 86% 90%, transparent 92%) 94% 92% / 22% 22% no-repeat, radial-gradient(var(--line) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--bg-2) }
.ph-seating figure { position: absolute; inset: 29%; border-radius: 50%; border: 6px solid var(--card); box-shadow: 0 0 0 1px var(--line-2) }
.ph-seating .ph-art::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: repeating-conic-gradient(from -5deg, color-mix(in srgb, var(--accent) 85%, transparent) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85% 100%); mask: radial-gradient(closest-side, transparent 84%, #000 85% 100%) }
.ph-seating .ph-art::after { content: "Table 1 · " attr(data-n); position: absolute; left: 50%; bottom: 11%; max-width: 70%; transform: translateX(-50%); padding: 7px 13px; background: var(--card); border: 1px solid var(--line-2); border-radius: 999px; font: 700 12px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-seating .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Split flap: a flap board with the city and "Now booking" */
.ph-splitflap .ph-art { width: 100%; display: grid; gap: 22px; justify-items: center }
.ph-x-flap { order: -1; display: grid; gap: 8px; max-width: 100%; padding: clamp(12px, 2vw, 22px); background: #050608; border-radius: 10px; box-shadow: var(--shadow); perspective: 600px }
.ph-x-flap p { margin: 0; display: flex; gap: 4px; justify-content: center }
.ph-x-flap i { display: grid; place-items: center; width: clamp(22px, 4vw, 46px); height: clamp(32px, 5.6vw, 64px); background: linear-gradient(#25282d 49%, #0b0c0e 49% 51%, #1c1f23 51%); border-radius: 4px; color: #f5f5f0; font: 400 clamp(1.1rem, 3vw, 2.4rem)/1 var(--head); font-style: normal; animation: phx-flap .5s calc(var(--d, 0) * 70ms) both }
.ph-x-flap p + p i { color: var(--accent) }
@keyframes phx-flap { from { transform: rotateX(90deg) } }
.ph-splitflap figure { width: 100%; aspect-ratio: 21 / 7 }
.ph-splitflap .display { font-size: clamp(2.6rem, 6vw, 5.2rem) }
/* Roadmap: four round stops along a winding dotted path */
.ph-roadmap .ph-art { width: 100%; height: clamp(260px, 34vw, 400px); counter-reset: phx }
.ph-roadmap .ph-art::before { content: ""; position: absolute; inset: 10% 6%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M2 30C15 30 18 6 32 8S50 34 62 30S80 6 98 8' fill='none' stroke='%23b3a796' stroke-width='3' stroke-linecap='round' stroke-dasharray='1 9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat }
.ph-roadmap figure { position: absolute; width: clamp(88px, 15vw, 190px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 6px solid var(--card); box-shadow: var(--shadow); overflow: visible; counter-increment: phx }
.ph-roadmap figure img { border-radius: 50% }
.ph-roadmap figure::after { content: "0" counter(phx); position: absolute; right: -6px; top: -6px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 800 13px/1 var(--body) }
.ph-roadmap .p0 { left: 13%; top: 70% } .ph-roadmap .p1 { left: 34%; top: 26% } .ph-roadmap .p2 { left: 61%; top: 70% } .ph-roadmap .p3 { left: 87%; top: 28% }
.ph-roadmap .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Wax seal: a letter sealed with the initials */
.ph-seal .ph-art { padding: 22px 22px 130px; background: repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px) 0 calc(100% - 24px) / 100% 84px no-repeat, var(--card); box-shadow: var(--shadow); border-radius: 4px; transform: rotate(-1.5deg) }
.ph-seal figure { aspect-ratio: 4 / 3.4; border-radius: 2px }
.ph-seal .ph-art::before { content: attr(data-n); position: absolute; left: 26px; bottom: 60px; max-width: 55%; font: 400 1.9rem/1.2 var(--head); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-seal .ph-art::after { content: attr(data-i); position: absolute; right: 8%; bottom: 36px; width: 110px; height: 110px; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--accent) 70%, #fff) 0 6%, var(--accent) 30%, color-mix(in srgb, var(--accent) 70%, #000) 75%); box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--accent) 85%, #000), inset 0 0 0 12px color-mix(in srgb, var(--accent) 60%, #fff), 0 8px 16px -6px rgba(0, 0, 0, .5); color: color-mix(in srgb, var(--accent) 45%, #000); font: 700 2rem/1 var(--body); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); transform: rotate(-8deg) }
.ph-seal .display { font-size: clamp(3.4rem, 7.4vw, 6.6rem) }
/* Kanban: photos moving across Ideas, Planning and Done */
.ph-kanban .ph-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; padding: 14px; height: min(70vh, 580px); border-radius: var(--r); background: linear-gradient(90deg, var(--bg-2) 0 calc(33.33% - 8px), transparent 0 calc(33.33% + 4px), var(--bg-2) 0 calc(66.66% - 4px), transparent 0 calc(66.66% + 8px), var(--bg-2) 0) }
.ph-kanban figure { padding: 8px 8px 44px; background: var(--card); border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); border-top: 4px solid var(--accent) }
.ph-kanban figure img { aspect-ratio: 4 / 4.6; height: auto; border-radius: 6px }
.ph-kanban figure::after { content: "Ideas"; position: absolute; left: 10px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 700 11.5px/1.2 var(--body) }
.ph-kanban .p0 { margin-top: 20px } .ph-kanban .p1 { margin-top: 110px; border-top-color: #f59e0b } .ph-kanban .p2 { margin-top: 50px; border-top-color: #16a34a }
.ph-kanban .p1::after { content: "Planning"; color: #b45309; background: #fef3c7 } .ph-kanban .p2::after { content: "Done ✓"; color: #15803d; background: #dcfce7 }
.ph-kanban .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Compass: a round photo in a compass ring with its needle */
.ph-compass .ph-art { width: min(460px, 84vw, 54svh); aspect-ratio: 1 }
.ph-compass .ph-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); background: repeating-conic-gradient(from -.25deg, var(--ink) 0 .5deg, transparent .5deg 5deg), repeating-conic-gradient(from -.6deg, var(--accent) 0 1.2deg, transparent 1.2deg 45deg); -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89% 100%); mask: radial-gradient(closest-side, transparent 88%, #000 89% 100%) }
.ph-compass .ph-art::after { content: "N"; position: absolute; left: 50%; top: 9%; z-index: 2; width: 34px; height: 34px; transform: translateX(-50%); display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 15px/1 var(--head) }
.ph-compass figure { position: absolute; inset: 12%; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2), var(--shadow) }
.ph-compass figure::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 44%; margin: -22% 0 0 -8px; background: linear-gradient(var(--accent) 50%, rgba(255, 255, 255, .9) 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: .92; transform: rotate(28deg); animation: phx-needle 5s ease-in-out infinite alternate }
@keyframes phx-needle { from { transform: rotate(18deg) } to { transform: rotate(40deg) } }
.ph-compass .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Sticky notes: the services on notes around a photo */
.ph-sticky .ph-art { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start }
.ph-sticky figure { grid-row: span 2; aspect-ratio: 3 / 4.4; border-radius: 4px; box-shadow: var(--shadow); transform: rotate(-2deg) }
.ph-sticky .ph-x-svcs { display: contents }
.ph-sticky .ph-x-svcs li { aspect-ratio: 1; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; background: #fff3a8; color: #2a2414; box-shadow: 0 14px 20px -14px rgba(0, 0, 0, .45); font: 400 1.3rem/1.15 var(--head); transform: rotate(2deg) }
.ph-sticky .ph-x-svcs li:nth-child(2) { background: #ffd1dc; transform: rotate(-3deg) } .ph-sticky .ph-x-svcs li:nth-child(3) { background: #c8f0d8; transform: rotate(1deg) } .ph-sticky .ph-x-svcs li:nth-child(4) { background: color-mix(in srgb, var(--accent) 25%, #fff); transform: rotate(-1.5deg) }
.ph-sticky .ph-x-svcs li span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical }
.ph-sticky .ph-x-svcs li b { font: 700 13px var(--body); color: #5a4a20 }
.ph-sticky .display { font-size: clamp(3rem, 6.6vw, 5.6rem) }
/* Gantt: the services as bars on a timeline under a wide photo */
.ph-gantt .ph-art { display: grid; gap: 16px }
.ph-gantt figure { aspect-ratio: 16 / 8.4 }
.ph-gantt .ph-x-svcs { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(90deg, var(--line) 1px, transparent 1px) 40% 0 / 15% 100%, var(--card) }
.ph-gantt .ph-x-svcs li { display: grid; grid-template-columns: minmax(0, 40%) 1fr; align-items: center; gap: 12px; min-height: 30px; font: 600 13px/1.2 var(--body) }
.ph-gantt .ph-x-svcs li b { display: none }
.ph-gantt .ph-x-svcs li::after { content: ""; height: 12px; border-radius: 6px; background: var(--accent); margin: 0 var(--b, 40%) 0 var(--a, 0) }
.ph-gantt .ph-x-svcs li:nth-child(2) { --a: 20%; --b: 22% } .ph-gantt .ph-x-svcs li:nth-child(2)::after { opacity: .8 }
.ph-gantt .ph-x-svcs li:nth-child(3) { --a: 44%; --b: 6% } .ph-gantt .ph-x-svcs li:nth-child(3)::after { opacity: .62 }
.ph-gantt .ph-x-svcs li:nth-child(4) { --a: 62%; --b: 0% } .ph-gantt .ph-x-svcs li:nth-child(4)::after { opacity: .45 }
.ph-gantt .display { font-size: clamp(2.6rem, 5.6vw, 4.8rem) }

/* -- Pandits & rituals -- */
/* Diya: flickering lamps under an arched photo */
.ph-diya { background: radial-gradient(50% 60% at 50% 30%, rgba(255, 150, 40, .18), transparent 70%) }
.ph-diya .ph-art { width: min(600px, 100%, 62svh); padding-bottom: 70px }
.ph-diya figure { aspect-ratio: 4 / 3.4; border-radius: 999px 999px var(--r-img) var(--r-img); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 90px -20px var(--accent) }
.ph-diya .ph-art::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 64px; background: radial-gradient(ellipse 7px 15px at 50% 22px, #fff6c8 0 25%, #ffc94a 55%, #ff8a00 85%, transparent 100%) 0 0 / 64px 64px repeat-x, radial-gradient(ellipse 22px 10px at 50% 46px, #c97a2c 0 70%, #8a4a17 95%, transparent 100%) 0 0 / 64px 64px repeat-x; animation: phx-flicker 1.6s ease-in-out infinite alternate }
@keyframes phx-flicker { from { filter: brightness(.9) } to { filter: brightness(1.15) drop-shadow(0 0 8px #ffb347) } }
.ph-diya .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Kalash: the photo in a sacred pot under mango leaves and a coconut */
.ph-kalash .ph-art { display: grid; justify-items: center; padding-top: 150px }
.ph-kalash figure { width: min(420px, 82%); aspect-ratio: 1 / .95; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; border: 8px solid color-mix(in srgb, var(--accent) 80%, #8a5a00); box-shadow: var(--shadow) }
.ph-kalash .ph-art::before { content: ""; position: absolute; top: 118px; left: 50%; z-index: 1; width: min(150px, 30%); height: 48px; transform: translateX(-50%); background: linear-gradient(90deg, #a86a12, #f2c14e 45%, #a86a12); border-radius: 10px 10px 4px 4px }
.ph-kalash .ph-art::after { content: ""; position: absolute; top: 0; left: 50%; width: min(300px, 64%); height: 140px; transform: translateX(-50%); background: radial-gradient(circle at 50% 62%, #8b5a2b 0 30px, #6b4220 31px 34px, transparent 35px), conic-gradient(from -80deg at 50% 100%, #2f7d32 0 14deg, transparent 0 20deg, #3f8f3a 0 34deg, transparent 0 40deg, #2f7d32 0 54deg, transparent 0 60deg, #3f8f3a 0 74deg, transparent 0 80deg, #2f7d32 0 94deg, transparent 0 100deg, #3f8f3a 0 114deg, transparent 0 120deg, #2f7d32 0 134deg, transparent 0 140deg, #3f8f3a 0 160deg, transparent 0); -webkit-mask: radial-gradient(ellipse 50% 100% at 50% 100%, #000 98%, transparent); mask: radial-gradient(ellipse 50% 100% at 50% 100%, #000 98%, transparent) }
.ph-kalash .display { font-size: clamp(2.6rem, 5.6vw, 4.8rem) }
/* Gopuram: the photo shaped like a stepped temple tower */
.ph-gopuram .ph-art { padding-top: 34px }
.ph-gopuram figure, .ph-gopuram .ph-art::before { aspect-ratio: 3 / 4; border-radius: 0; clip-path: polygon(6% 100%, 6% 72%, 12% 72%, 12% 57%, 18% 57%, 18% 43%, 25% 43%, 25% 30%, 32% 30%, 32% 18%, 39% 18%, 39% 0, 61% 0, 61% 18%, 68% 18%, 68% 30%, 75% 30%, 75% 43%, 82% 43%, 82% 57%, 88% 57%, 88% 72%, 94% 72%, 94% 100%) }
.ph-gopuram .ph-art::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; background: var(--accent); opacity: .28; transform: translate(14px, 14px) }
.ph-gopuram .ph-art::after { content: ""; position: absolute; top: 0; left: 39%; right: 39%; height: 34px; background: radial-gradient(ellipse 7px 14px at 50% 62%, #d4a017 0 90%, transparent 100%) 0 0 / 33.33% 100% repeat-x, linear-gradient(#d4a017, #d4a017) 0 100% / 100% 4px no-repeat }
.ph-gopuram .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Mandala: a turning gold mandala around a round photo */
.ph-mandala .ph-art { width: min(500px, 86vw, 54svh); aspect-ratio: 1 }
.ph-mandala .ph-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 85%, transparent) 0 1deg, transparent 1deg 11.25deg); -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 67% 99%, transparent 100%); mask: radial-gradient(closest-side, transparent 66%, #000 67% 99%, transparent 100%); animation: phx-spin 80s linear infinite }
.ph-mandala .ph-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 64%, var(--accent) 64.5% 65.5%, transparent 66% 82%, color-mix(in srgb, var(--accent) 50%, transparent) 82.5% 83.5%, transparent 84% 98%, var(--accent) 98.5% 100%, transparent 100%), repeating-conic-gradient(from 5.6deg, color-mix(in srgb, var(--accent) 70%, transparent) 0 3deg, transparent 3deg 22.5deg); -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 64.5% 100%, transparent 100.5%); mask: radial-gradient(closest-side, transparent 64%, #000 64.5% 100%, transparent 100.5%); animation: phx-spin 120s linear infinite reverse }
.ph-mandala figure { position: absolute; inset: 18%; z-index: 1; border-radius: 50%; box-shadow: 0 0 0 6px var(--card), 0 0 0 7px var(--accent) }
.ph-mandala .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Muhurat: an almanac card listing the poojas under a photo */
.ph-muhurat .ph-art { padding: 18px; background: var(--card); border: 2px solid var(--accent); outline: 1px solid var(--accent); outline-offset: -10px; box-shadow: var(--shadow) }
.ph-muhurat .ph-art::before, .ph-muhurat .ph-art::after { content: "❖"; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); padding: 0 10px; background: var(--bg); color: var(--accent); font: 22px/1 var(--body) }
.ph-muhurat .ph-art::after { top: auto; bottom: -13px }
.ph-muhurat figure { aspect-ratio: 16 / 10; border-radius: 2px }
.ph-muhurat .ph-x-svcs { margin-top: 12px }
.ph-muhurat .ph-x-svcs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); font: 500 15px/1.3 var(--body) }
.ph-muhurat .ph-x-svcs li:last-child { border-bottom: 0 }
.ph-muhurat .ph-x-svcs li b { color: var(--accent); font-family: var(--head) }
.ph-muhurat .display { font-size: clamp(2.8rem, 6vw, 5rem) }
/* Shloka: palm-leaf manuscripts under a wide photo */
.ph-shloka .ph-art { width: 100%; display: grid; gap: 12px; justify-items: center }
.ph-shloka figure { width: 100%; aspect-ratio: 21 / 8 }
.ph-shloka .ph-art::before, .ph-shloka .ph-art::after { content: ""; order: 2; width: 92%; height: clamp(34px, 4.6vw, 54px); border-radius: 999px; background: radial-gradient(circle, #5b3a12 0 4px, transparent 5px) 22% 50% / 12px 12px no-repeat, radial-gradient(circle, #5b3a12 0 4px, transparent 5px) 78% 50% / 12px 12px no-repeat, repeating-linear-gradient(0deg, rgba(90, 58, 18, .22) 0 1px, transparent 1px 7px), linear-gradient(180deg, #ecd9a8, #d8bd7f); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5) }
.ph-shloka .ph-art::after { order: 3; width: 84% }
.ph-shloka .display { font-size: clamp(2.8rem, 6.4vw, 5.4rem) }

/* -- Return gifts & invitations -- */
/* Gift box: the photo wrapped with a ribbon, a bow and a tag */
.ph-giftbox .ph-art { padding-top: 70px; display: grid; justify-items: center }
.ph-giftbox figure { width: min(440px, 86%); aspect-ratio: 1; border-radius: 10px; box-shadow: var(--shadow) }
.ph-giftbox figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 22px), var(--accent) 0 calc(50% + 22px), transparent 0), linear-gradient(0deg, transparent calc(50% - 22px), var(--accent) 0 calc(50% + 22px), transparent 0) }
.ph-giftbox .ph-art::before { content: ""; position: absolute; top: 4px; left: 50%; z-index: 2; width: 160px; height: 90px; transform: translateX(-50%); background: radial-gradient(ellipse 36px 26px at 30% 60%, transparent 0 40%, var(--accent) 42% 100%, transparent 101%), radial-gradient(ellipse 36px 26px at 70% 60%, transparent 0 40%, var(--accent) 42% 100%, transparent 101%), radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent) 75%, #000) 0 14px, transparent 15px) }
.ph-giftbox .ph-art::after { content: attr(data-n); position: absolute; right: 0; top: 48%; z-index: 2; max-width: 48%; padding: 9px 14px 9px 24px; background: #fff8e7; color: #3a2a14; font: 400 1.15rem/1 var(--head); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); transform: rotate(10deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ph-giftbox .display { font-size: clamp(3rem, 6.6vw, 5.6rem) }
/* Gift tag: a big kraft tag with an eyelet holding the photo */
.ph-gifttag .ph-art { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(70px, 9vw, 100px); filter: drop-shadow(0 24px 30px rgba(60, 40, 20, .28)); transform: rotate(-4deg) }
.ph-gifttag .ph-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #d8b98a, #c49a62); clip-path: polygon(clamp(50px, 7vw, 76px) 0, 100% 0, 100% 100%, clamp(50px, 7vw, 76px) 100%, 0 50%) }
.ph-gifttag .ph-art::after { content: ""; position: absolute; left: clamp(22px, 3vw, 32px); top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 5px #f3e6cc, inset 0 2px 4px rgba(0, 0, 0, .25) }
.ph-gifttag figure { aspect-ratio: 4 / 4.2; border-radius: 4px; border: 6px solid #fffaf0 }
.ph-gifttag .display { font-size: clamp(3rem, 6.6vw, 5.6rem) }
/* Hamper: round photos peeking out of a woven basket */
.ph-hamper .ph-art { width: min(820px, 100%); display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); padding: 30px 6% clamp(60px, 9vw, 110px) }
.ph-hamper figure { width: 30%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--card); box-shadow: var(--shadow) }
.ph-hamper .p1 { transform: translateY(-24px) }
.ph-hamper .ph-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 17vw, 200px); z-index: 2; border-radius: 0 0 60px 60px / 0 0 46px 46px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 3px, transparent 3px 14px), repeating-linear-gradient(90deg, #c88d4c 0 16px, #a8722f 16px 32px); box-shadow: inset 0 10px 0 #8d5d25, 0 24px 30px -18px rgba(0, 0, 0, .45) }
.ph-hamper .ph-art::before { content: ""; position: absolute; z-index: 3; left: 50%; bottom: clamp(36px, 6vw, 70px); width: 90px; height: 40px; transform: translateX(-50%); background: radial-gradient(ellipse 22px 16px at 28% 50%, var(--accent) 0 98%, transparent), radial-gradient(ellipse 22px 16px at 72% 50%, var(--accent) 0 98%, transparent), radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, #000) 0 9px, transparent 10px) }
.ph-hamper .display { font-size: clamp(2.8rem, 6.4vw, 5.6rem) }
/* Letterpress: a deckle-edged card, embossed initials, a photo in corners */
.ph-letterpress .ph-art { aspect-ratio: 5 / 4.4; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .16)) }
.ph-letterpress .ph-art::before { content: ""; position: absolute; inset: 0; background: var(--card); clip-path: polygon(0 1%, 3% 0, 7% .8%, 12% .2%, 18% 1%, 24% 0, 31% .9%, 38% .1%, 45% 1%, 52% .2%, 59% .8%, 66% 0, 73% 1%, 80% .2%, 87% .9%, 94% 0, 100% 1%, 99.2% 7%, 100% 14%, 99.3% 22%, 100% 30%, 99.1% 38%, 100% 46%, 99.4% 54%, 100% 62%, 99.2% 70%, 100% 78%, 99.3% 86%, 100% 93%, 99% 100%, 92% 99.2%, 85% 100%, 78% 99.1%, 70% 100%, 62% 99.3%, 54% 100%, 46% 99.2%, 38% 100%, 30% 99.1%, 22% 100%, 14% 99.3%, 7% 100%, 0 99%, .8% 92%, 0 84%, .7% 76%, 0 68%, .9% 60%, 0 52%, .6% 44%, 0 36%, .8% 28%, 0 20%, .7% 12%, 0 6%) }
.ph-letterpress .ph-art::after { content: attr(data-i); position: absolute; left: 7%; top: 7%; font: 700 clamp(4rem, 9vw, 8rem)/1 var(--head); color: var(--card); text-shadow: -1px -1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .9) }
.ph-letterpress figure { position: absolute; right: 7%; bottom: 9%; width: 54%; aspect-ratio: 4 / 4.6; border-radius: 0; transform: rotate(2deg); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4) }
.ph-letterpress figure::after { content: ""; position: absolute; inset: 0; opacity: .85; background: linear-gradient(135deg, var(--ink) 0 16px, transparent 16px) 0 0 / 34px 34px no-repeat, linear-gradient(225deg, var(--ink) 0 16px, transparent 16px) 100% 0 / 34px 34px no-repeat, linear-gradient(45deg, var(--ink) 0 16px, transparent 16px) 0 100% / 34px 34px no-repeat, linear-gradient(315deg, var(--ink) 0 16px, transparent 16px) 100% 100% / 34px 34px no-repeat }
.ph-letterpress .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }
/* Lace: a laser-cut lace border around a photo card */
.ph-lace .ph-art { width: min(520px, 88%, 54svh); margin: 22px; padding: clamp(20px, 3vw, 30px); background: var(--card); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .14)) }
.ph-lace .ph-art::before { content: ""; position: absolute; inset: -18px; z-index: -1; padding: 9px; background: radial-gradient(circle, transparent 0 2.6px, var(--card) 3.2px) 0 0 / 12px 12px; -webkit-mask: radial-gradient(circle, #000 8px, transparent 8.6px) 0 0 / 18px 18px, linear-gradient(#000 0 0) content-box; mask: radial-gradient(circle, #000 8px, transparent 8.6px) 0 0 / 18px 18px, linear-gradient(#000 0 0) content-box }
.ph-lace .ph-art::after { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); pointer-events: none }
.ph-lace figure { aspect-ratio: 4 / 3.6; border-radius: 2px }
.ph-lace .display { font-size: clamp(3.4rem, 7.6vw, 6.6rem) }
/* Stamp sheet: perforated stamps with a round postmark */
.ph-stamps .ph-art { width: min(520px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; padding: 14px; background: #f7f4ea; box-shadow: var(--shadow); transform: rotate(-2deg) }
.ph-stamps figure { aspect-ratio: 4 / 4.8; padding: 12px; background: #fffef9; border-radius: 0; -webkit-mask: radial-gradient(circle, transparent 0 4.5px, #000 5px) -6px -6px / 12px 12px, linear-gradient(#000 0 0) content-box; mask: radial-gradient(circle, transparent 0 4.5px, #000 5px) -6px -6px / 12px 12px, linear-gradient(#000 0 0) content-box }
.ph-stamps figure::after { content: "₹5"; position: absolute; right: 20px; top: 18px; color: #fff; font: 700 15px/1 var(--head); text-shadow: 0 1px 4px rgba(0, 0, 0, .55) }
.ph-stamps .ph-art::after { content: attr(data-c); position: absolute; right: -5%; top: -7%; width: 124px; height: 124px; display: grid; place-items: center; padding: 14px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); color: color-mix(in srgb, var(--accent) 85%, transparent); font: 800 12px/1.15 var(--body); letter-spacing: .14em; text-transform: uppercase; text-align: center; transform: rotate(14deg); overflow: hidden; word-break: break-word }
.ph-stamps .display { font-size: clamp(2.8rem, 6vw, 5.2rem) }

/* The 100 designs above (html[data-x]): long names in wide fonts wrap instead of widening the page on phones */
html[data-x] .menu-body, html[data-x] .about-grid > *, html[data-x] .faq-grid > *, html[data-x] .contact-grid > *, html[data-x] .enquire-grid > *, html[data-x] .svc-l-main { min-width: 0 }
html[data-x] .h2, html[data-x] .h1, html[data-x] .h3 { overflow-wrap: break-word }
html[data-x] .menu-top .h4 { min-width: 0; max-width: 100% }
html[data-x] .menu-body { grid-template-columns: minmax(0, 1fr) }
html[data-v="zine"] .h2, html[data-v="wave"] .h2 { font-size: clamp(1.7rem, 4.6vw, 3.4rem) }
html[data-v="zine"] .cta .h1, html[data-v="wave"] .cta .h1 { font-size: clamp(2rem, 6vw, 4.4rem) }

/* ---------- Galleries added in 6.0.394: rows, stagger, circles, frames, tall, checker ---------- */
.gal-rows { display: flex; flex-wrap: wrap; gap: 12px }
.gal-rows .g { flex: 1 1 260px; height: clamp(200px, 26vw, 300px) }
.gal-rows .g:nth-child(4n + 1) { flex-basis: 420px } .gal-rows .g:nth-child(4n + 3) { flex-basis: 340px }
.gal-stagger { grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 80px }
.gal-stagger .g { aspect-ratio: 4 / 5 }
.gal-stagger .g:nth-child(3n + 2) { transform: translateY(80px) }
.gal-circles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(16px, 2.6vw, 30px) }
.gal-circles .g { aspect-ratio: 1; border-radius: 50% }
.gal-circles .g figcaption { text-align: center; padding-bottom: 22% }
.gal-frames { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 36px) }
.gal-frames .g { padding: 16px; background: #fff; border: 10px solid color-mix(in srgb, var(--ink) 82%, #6b4a2b); border-radius: 2px; box-shadow: 0 22px 30px -20px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .08) }
.gal-frames .g img { aspect-ratio: 4 / 5; height: auto }
.gal-frames .g figcaption { left: 16px; right: 16px; bottom: 16px }
.gal-tall { grid-template-columns: repeat(5, 1fr); gap: 10px }
.gal-tall .g { aspect-ratio: 9 / 16 }
.gal-checker { grid-template-columns: repeat(4, 1fr); gap: 0 }
.gal-checker .g { aspect-ratio: 1; border-radius: 0 }
.gal-checker .g:nth-child(4n + 2), .gal-checker .g:nth-child(4n + 3) { border-radius: 50%; transform: scale(.88) }

@media (prefers-reduced-motion: reduce) {
  .ph-x .ph-art::before, .ph-x .ph-art::after, .ph-x figure, .ph-x figure::after, .ph-x-flap i { animation: none !important }
}
@media (max-width: 1080px) {
  .gal-tall { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 860px) {
  .ph-x-l, .ph-x-r { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px }
  .ph-x-o { min-height: calc(92svh - var(--nav-h)) }
  .ph-x-o .ph-text { padding-top: 130px }
  .ph-prism .ph-art, .ph-capsule .ph-art, .ph-archive .ph-art, .ph-zine .ph-art, .ph-darkroom .ph-art, .ph-balloon .ph-art, .ph-lantern .ph-art, .ph-ilai .ph-art,
  .ph-origami .ph-art, .ph-kanban .ph-art, .ph-terrace .ph-art, .ph-brochure .ph-art, .ph-rouge .ph-art, .ph-polish .ph-art, .ph-negative .ph-art, .ph-glass .ph-art { height: 440px }
  .ph-gridline .ph-art { grid-template-columns: 1fr 1fr; gap: 12px } .ph-gridline .p1, .ph-gridline .p3 { margin-top: 24px }
  .ph-lighttable .ph-art { grid-template-columns: repeat(3, 1fr) }
  .ph-storyboard .ph-art { grid-template-columns: 1fr 1fr; gap: 34px 14px } .ph-storyboard figure::after { display: none }
  .ph-toran figure, .ph-skyline figure, .ph-ghungroo figure, .ph-keys figure, .ph-splitflap figure, .ph-shloka figure { aspect-ratio: 4 / 3 }
  .ph-ribbon .ph-art::before { top: 26px; right: -120px; width: 340px }
  .ph-sign .ph-text { margin-top: 110px }
  .ph-tulle figure::after { background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 1px, transparent 1.6px) 0 0 / 7px 7px, color-mix(in srgb, var(--bg) 82%, transparent) }
  .ph-mixer .ph-art { grid-template-columns: 1fr 76px; gap: 12px; padding: 40px 14px 14px }
  .ph-mood .ph-art { grid-template-rows: repeat(3, 110px) }
  .ph-roadmap figure { width: 86px; border-width: 4px } .ph-roadmap figure::after { width: 28px; height: 28px; font-size: 11px }
  .ph-stamps .ph-art::after { width: 96px; height: 96px; font-size: 10px; right: -2% }
  .ph-receipt .ph-x-svcs, .ph-setlist .ph-x-svcs { width: 72% }
  .ph-receipt figure, .ph-setlist figure { width: 86% }
  .ph-keycard .ph-art { width: 86% }
  .ph-aerial .ph-art::before { background: radial-gradient(circle at 68% 24%, var(--accent) 0 7px, #fff 7px 10px, transparent 11px), repeating-radial-gradient(circle at 68% 24%, transparent 0 26px, rgba(255, 255, 255, .3) 26px 27.5px); -webkit-mask: radial-gradient(circle at 68% 24%, #000 0 22%, transparent 55%); mask: radial-gradient(circle at 68% 24%, #000 0 22%, transparent 55%) }
  .ph-aerial .ph-art::after { top: 24%; left: 60% }
  .ph-agenda .ph-art { padding: 12px } .ph-agenda .ph-art::before { padding: 8px 6px 0 26px; font-size: 1.2rem }
  .ph-kalash .ph-art { padding-top: 130px } .ph-kalash .ph-art::before { top: 100px } .ph-kalash .ph-art::after { height: 120px }
  .ph-twin .p0 { right: 0 } .ph-twin .p1 { left: 0; top: 50% } .ph-twin .p0 { bottom: 50% } .ph-twin .ph-art::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 3px; margin: -1.5px 0 0 }
  .gal-stagger { grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 50px } .gal-stagger .g:nth-child(3n + 2) { transform: none } .gal-stagger .g:nth-child(even) { transform: translateY(50px) }
  .gal-circles { grid-template-columns: repeat(2, 1fr) }
  .gal-frames { grid-template-columns: 1fr 1fr; gap: 16px } .gal-frames .g { padding: 8px; border-width: 6px }
  .gal-checker { grid-template-columns: repeat(2, 1fr) } .gal-checker .g:nth-child(n) { border-radius: 0; transform: none } .gal-checker .g:nth-child(4n + 2), .gal-checker .g:nth-child(4n + 3) { border-radius: 50%; transform: scale(.88) }
  .gal-tall { grid-template-columns: 1fr 1fr }
  .gal-rows .g { flex-basis: 40%; height: 180px } .gal-rows .g:nth-child(3n + 1) { flex-basis: 100% }
}
@media (max-width: 560px) {
  .ph-x .display { font-size: clamp(2.1rem, 11vw, var(--phx-m, 3rem)) }
  .ph-lighttable figure { padding: 5px }
  .ph-gate .ph-art::before { transform: translateX(-90%) } .ph-gate .ph-art::after { transform: translateX(90%) }
}

/* ---- Ivory (6.0.394): ivory, champagne and gold; Playfair Display and DM Sans ---- */
html[data-v="ivory"][data-t] { --line: #e4dccb; --line-2: #d6c8ab; --champagne: #ebdcc1; --gold-deep: color-mix(in srgb, var(--accent) 78%, #3a2a10); --display: clamp(2.6rem, 6vw, 4.6rem) }
html[data-v="ivory"] body { font-size: 15.5px }
html[data-v="ivory"] .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .25em; color: var(--gold-deep) }
html[data-v="ivory"] .btn { border-radius: 0; height: 47px; padding: 0 22px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; box-shadow: none }
html[data-v="ivory"] .btn-lg { height: 50px }
html[data-v="ivory"] .btn-accent { color: #fff }
/* Header: a calm ivory bar, uppercase serif name, an outlined Book button */
html[data-v="ivory"] .nav { background: color-mix(in srgb, #f9f6ef 88%, transparent); border-bottom-color: var(--line) }
html[data-v="ivory"] .brand-name { font-size: 1.15rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase }
html[data-v="ivory"] .links a { font-size: 13px; color: var(--ink) }
html[data-v="ivory"] .nav-cta { background: transparent; color: var(--ink); border: 1px solid var(--accent); height: 40px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px }
html[data-v="ivory"] .nav-cta svg { display: none }
html[data-v="ivory"] .nav-cta::after { content: "↗"; margin-left: 2px }
/* Cover: full-screen slideshow, centred, a gold italic second line and a ✦ divider */
.hero-ivory { min-height: min(calc(100svh - var(--nav-h)), 900px); display: flex; align-items: center; color: #fff; isolation: isolate; text-align: center }
.hero-ivory .hero-shade { background: linear-gradient(180deg, rgba(20, 18, 14, .42), rgba(20, 18, 14, .5) 50%, rgba(20, 18, 14, .62)) }
.hero-ivory .hero-in { display: flex; flex-direction: column; align-items: center; padding-top: 60px; padding-bottom: 80px; text-shadow: 0 2px 24px rgba(0, 0, 0, .3) }
.hero-ivory .eyebrow { color: #f0d8a5; opacity: 1 }
.hero-ivory .display { font-weight: 500; letter-spacing: -0.03em; line-height: 1.02 }
.hero-ivory .display em { display: block; font-style: italic; color: var(--accent) }
.hero-ivory .display::after { content: "—   ✦   —"; display: block; margin-top: 18px; font: 400 14px/1 var(--body); letter-spacing: .1em; color: var(--accent); white-space: pre }
.hero-ivory .hero-sub { margin: 18px auto 0; max-width: 520px; font-size: 1.05rem }
.hero-ivory .row-btns { flex-direction: column; align-items: center; gap: 12px; margin-top: 26px }
.hero-ivory .row-btns .btn { min-width: 260px }
.hero-ivory .row-btns svg { display: none }
.hero-ivory .btn-ghost { background: rgba(24, 24, 24, .25); border-color: rgba(255, 255, 255, .78); backdrop-filter: none; -webkit-backdrop-filter: none }
.hero-ivory .hero-rating { justify-content: center }
.hero-ivory .scroll-hint { display: none }
/* The strip under the cover: what you shoot, on champagne */
.iv-strip { background: var(--champagne, #ebdcc1); padding: 23px 0 }
.iv-strip-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; text-align: center }
.iv-strip b { display: block; font: 500 1.2rem/1.3 var(--head); color: var(--ink) }
.iv-strip span { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted) }
/* Section heads: eyebrow, serif title, and the ✦ divider on centred ones */
html[data-v="ivory"] .sec { padding: calc(clamp(64px, 8vw, 104px) * var(--space, 1)) 0 }
html[data-v="ivory"] .h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 400 }
html[data-v="ivory"] .services .sec-head, html[data-v="ivory"] .gallery .sec-head { text-align: left; margin-left: 0; max-width: 620px }
html[data-v="ivory"] .process .sec-head, html[data-v="ivory"] .reviews .sec-head { text-align: center; margin-left: auto; margin-right: auto }
html[data-v="ivory"] .process .h2::after, html[data-v="ivory"] .reviews .h2::after { content: "—   ✦   —"; display: block; margin-top: 14px; font: 400 13px/1 var(--body); color: var(--accent); white-space: pre }
html[data-v="ivory"] .services { background: transparent }
html[data-v="ivory"] .gallery { background: color-mix(in srgb, var(--champagne, #ebdcc1) 28%, var(--bg)) }
/* Story cards: a photo on champagne, "01 · Category", the title, "View details ↗" */
html[data-v="ivory"] .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; counter-reset: iv }
html[data-v="ivory"] .card { counter-increment: iv; background: var(--champagne, #ebdcc1); border: 0; border-radius: 3px }
html[data-v="ivory"] .card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -24px rgba(50, 38, 20, .5) }
html[data-v="ivory"] .card-img { aspect-ratio: 4 / 4.4; border-radius: 0; margin: 0 }
html[data-v="ivory"] .card-body { padding: 16px 16px 18px; text-align: left; align-items: flex-start; gap: 4px; background: var(--card) }
html[data-v="ivory"] .card-body .eyebrow { font-size: 10.5px; letter-spacing: .2em; color: var(--gold-deep) }
html[data-v="ivory"] .card-body .eyebrow::before { content: "0" counter(iv) " · " }
html[data-v="ivory"] .card-body .h4 { font: 400 1.25rem/1.25 var(--head) }
html[data-v="ivory"] .card-body .muted { font-size: 14px }
html[data-v="ivory"] .card-body::after { content: "View details ↗"; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gold-deep) }
/* Gallery: even tiles, the caption always shown in small capitals */
html[data-v="ivory"] .gal-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 13px }
html[data-v="ivory"] .gal-grid .g:nth-child(n) { grid-column: auto; grid-row: auto }
html[data-v="ivory"] .g { border-radius: 3px }
html[data-v="ivory"] .g figcaption { opacity: 1; transform: none; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
/* Why choose us: bordered cards with a number and a ✦ */
html[data-v="ivory"] .process { background: #f1e8d8 }
html[data-v="ivory"] .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
html[data-v="ivory"] .steps li { display: flex; flex-direction: column; padding: 24px 20px; border: 1px solid var(--line); background: #fffdf8 }
html[data-v="ivory"] .steps li::before { content: "✦"; position: static; display: block; width: auto; height: auto; margin: 0 0 14px; background: none; color: var(--accent); font-size: 20px; order: 1 }
html[data-v="ivory"] .steps li > .h4 { order: 2 } html[data-v="ivory"] .steps li > p { order: 3 }
html[data-v="ivory"] .step-n { font: 700 11px/1 var(--body); letter-spacing: .2em; color: var(--muted); margin-bottom: 14px }
html[data-v="ivory"] .steps .h4 { font: 400 1.25rem/1.3 var(--head) }
/* Find us: an address card beside the map */
html[data-v="ivory"] .contact-list { padding: 22px; border: 1px solid var(--line); background: #fffdf8 }
html[data-v="ivory"] .map { border-radius: 0 }
/* Reviews: a big gold quote mark, the event, the words and a numbered name */
html[data-v="ivory"] .reviews { background: color-mix(in srgb, var(--champagne, #ebdcc1) 28%, var(--bg)) }
html[data-v="ivory"] .revs { counter-reset: ivr }
html[data-v="ivory"] .rev { counter-increment: ivr; padding: 24px; border: 1px solid var(--line); border-radius: 0; background: #fffdf8; text-align: left; align-items: flex-start }
html[data-v="ivory"] .rev .q { position: static; opacity: 1; color: var(--accent) }
html[data-v="ivory"] .rev .q svg { width: 34px; height: 34px }
html[data-v="ivory"] .rev blockquote { font: 400 1.05rem/1.6 var(--body); font-style: normal; color: var(--ink-2) }
html[data-v="ivory"] .rev figcaption { position: relative; padding: 14px 0 0 50px; border-top: 1px solid var(--line); width: 100% }
html[data-v="ivory"] .rev figcaption::before { content: "0" counter(ivr); position: absolute; left: 0; top: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--champagne, #ebdcc1); font: 700 12px/1 var(--body) }
html[data-v="ivory"] .rev figcaption b { font: 500 1.05rem var(--head) }
html[data-v="ivory"] .stars { color: var(--accent) }
/* Enquiry: two columns, the form in a gold-edged card */
html[data-v="ivory"] .enquire-card { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 0; box-shadow: 0 16px 44px rgba(50, 38, 20, .075) }
html[data-v="ivory"] .cta::after { background: linear-gradient(0deg, rgba(40, 43, 43, .82), rgba(40, 43, 43, .6)) }
/* Footer: dark ink with ivory text */
html[data-v="ivory"] .foot { background: #282b2b; color: #f8f6f0; --muted: rgba(248, 246, 240, .66); --line: rgba(248, 246, 240, .14) }
html[data-v="ivory"] .foot a { color: #f8f6f0 }
@media (max-width: 1080px) {
  html[data-v="ivory"] .cards, html[data-v="ivory"] .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  html[data-v="ivory"] .gal-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 860px) {
  .iv-strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px }
  html[data-v="ivory"] .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px }
  .hero-ivory .row-btns .btn { min-width: 0; width: 100% }
}
@media (max-width: 560px) {
  html[data-v="ivory"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  html[data-v="ivory"] .card-body { padding: 12px }
  html[data-v="ivory"] .card-body .muted { display: none }
  html[data-v="ivory"] .steps { grid-template-columns: 1fr }
}