/* ============================================================
   PHENIX — THEME TOKENS
   Cultural-salon: warm parchment, cream, dusty clay, muted
   oxblood, a trace of bronze, dark-brown ink. Every colour on
   the site resolves from this block; nothing below hard-codes
   a value.

   Unlike the previous rose-marble pass, this palette's identity
   colour is dark enough that cream text ON oxblood clears AA on
   its own (~4.6:1) — no dark "fill" substitute is needed for
   buttons/Contact. Two things still need a derived shade:
     --oxblood-dark (#74453F, ~7:1 on cream) — deeper hover/fill
       states, and the darker end of any oxblood-family gradient.
     --oxblood-dark is also reused (via --accent-text) for oxblood
       AS SMALL running text — numerals, nav link, idx — on
       parchment: plain --oxblood on --parchment measures ~4.26:1,
       just under 4.5, because parchment is very slightly darker
       than cream, so anywhere oxblood colours small text on a
       light ground, use the dark variant instead of the literal
       swatch.
     --oxblood-light (#C4A096, derived — oxblood lightened toward
       cream) — the one pairing the given palette can't do at all:
       literal oxblood AS TEXT on near-black --ink only measures
       ~2.9:1. Footer headings/hover and lightbox hover icons use
       this lighter derived tone instead (still unmistakably
       oxblood, just legible against near-black).
   Bronze is intentionally never used as running text — bronze on
   parchment is ~2.5:1 and bronze-dark on parchment ~4.1:1, both
   short of 4.5 — so bronze stays confined to decorative rules,
   borders and non-text hover fills, exactly as briefed ("use very
   selectively," "do not make bronze dominant").
   ============================================================ */
:root{
  /* ---------- brand palette ---------- */
  --parchment:    #F1E8DC;   /* primary warm background            */
  --cream:        #F7F1E8;   /* lighter editorial surface           */
  --clay:         #C89E88;   /* tonal wash / decorative surface     */
  --clay-light:   #DEC2B1;   /* subtle layering / highlights        */
  --oxblood:      #9A5D52;   /* PHENIX identity — literal swatch    */
  --oxblood-dark: #74453F;   /* derived — hover / deep fills / gradients */
  --oxblood-light:#C4A096;   /* derived — oxblood as text on near-black */
  --bronze:       #B88A5A;   /* very selective — rules, tiny details */
  --bronze-dark:  #8D6845;   /* bronze hover / small high-contrast   */

  --bg:         #F1E8DC;   /* = --parchment, page background      */
  --surface:    #F7F1E8;   /* = --cream, lighter/breathing surfaces */
  --ink:        #312522;   /* dark brown — primary text, footer, structural contrast */
  --ink-soft:   #6F5E56;   /* secondary text — metadata, captions  */
  --muted:      #6F5E56;
  --line:       #D6C6B8;   /* hairlines, borders, dividers         */
  --accent:     #9A5D52;   /* oxblood — literal, fills + large text */
  --accent-ink: #F7F1E8;   /* cream text on top of --accent (~4.6:1) */

  /* text-safe variants: oxblood as SMALL running text or a small
     fill needs the darker derived tone (see note above). */
  --accent-text: var(--oxblood-dark);
  --accent-dark: var(--oxblood-dark);

  /* full-bleed dark brand surfaces (Contact, and a fallback for
     any other true dark surface) — most sections this pass are
     LIGHT, tonally-layered parchment/clay, not this dark fill. */
  --accent-surface: var(--oxblood-dark);

  /* on dark (accent-surface / footer) surfaces. */
  --d-ink:      #F7F1E8;
  --d-soft:     #F7F1E8;
  --d-muted:    #F7F1E8;
  --d-faint:    #F7F1E8;
  --d-line:     rgba(247,241,232,.20);

  /* legacy aliases — kept so older rules keep resolving */
  --paper:      var(--bg);
  --paper-warm: var(--surface);

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 2px;

  /* single source of truth for the sticky header's height — every
     sticky/fixed offset that needs to clear the header reads this
     instead of repeating the pixel value. */
  --hdr-h: 76px;

  /* logo mask — resolved relative to this stylesheet */
  --logo: url("logo.png");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  /* Flat parchment. Every top-level block — hero, pillars, #services,
     .section--warm, .section--dark, #about and .ftr — paints its
     own opaque background, so the document-level radial washes that used
     to sit here were occluded everywhere. They
     cost a full-document-height gradient rasterisation for no visible
     result; the base colour below is what actually rendered. */
  background:var(--bg);
  font-family:var(--body); font-weight:400; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.12; margin:0; letter-spacing:-.01em}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* visible, consistent focus everywhere */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--accent-text); outline-offset:3px; border-radius:var(--r);
}

/* skip-to-content: off-screen until keyboard focus brings it in */
.skip-link{
  position:fixed; top:12px; left:12px; z-index:999;
  transform:translateY(-160%);
  background:var(--ink); color:var(--d-ink);
  padding:12px 22px; font-size:13.5px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; border-radius:var(--r);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:none; }
.section--dark :where(a,button):focus-visible,
.ftr :where(a,button):focus-visible{outline-color:var(--d-ink)}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:var(--muted);
}
.section{padding:clamp(64px,9vw,120px) 0; scroll-margin-top:var(--hdr-h)}
.section--warm{
  background:
    radial-gradient(100% 160% at 92% 100%, color-mix(in srgb, var(--clay-light) 8%, transparent) 0%, transparent 55%),
    radial-gradient(90% 140% at 4% 0%, color-mix(in srgb, var(--clay-light) 6%, transparent) 0%, transparent 55%),
    var(--surface);
}
.section--dark{
  background:
    radial-gradient(70% 90% at 85% 100%, color-mix(in srgb, var(--oxblood-dark) 25%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--oxblood-dark) 0%, var(--oxblood) 100%);
  color:var(--d-ink);
}
.section--dark .eyebrow{color:var(--d-soft)}
.section-head{max-width:720px; margin-bottom:clamp(36px,5vw,64px)}
.section-head h2{font-size:clamp(30px,4.4vw,50px); margin:14px 0 18px}
.section-head p{color:var(--ink-soft); font-size:clamp(16px,1.6vw,18.5px)}
.section--dark .section-head p{color:var(--d-soft)}

/* ---------- logo mark (CSS mask → inherits theme colour) ---------- */
.mark{
  display:block;
  background-color:currentColor;
  -webkit-mask:var(--logo) center/contain no-repeat;
          mask:var(--logo) center/contain no-repeat;
}

/* ---------- header ---------- */
/* The blur is re-computed every scroll frame, since the backdrop behind a
   sticky header changes continuously and cannot be cached. The background
   above it is 88% opaque, so only ~12% of the result is ever visible —
   8px reads identically to 14px at that opacity for roughly half the
   per-frame cost, and a saturation boost on 12% of the backdrop was not
   perceivable at all. Keep these two in step with .filters below. */
.hdr{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex; align-items:center; gap:28px; height:var(--hdr-h)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand .mark{width:30px; height:33px; color:var(--oxblood); flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--display); font-size:23px; letter-spacing:.06em}
.brand-sub{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:4px}

.nav{display:flex; align-items:center; gap:4px}
.nav a,.nav > .has-menu > button{
  display:flex; align-items:center; gap:6px;
  padding:9px 14px; font-size:14.5px; font-weight:450;
  text-decoration:none; border-radius:var(--r); white-space:nowrap;
  transition:color .18s, background .18s;
}
.nav a:hover,.nav > .has-menu > button:hover{background:var(--surface)}
.nav a[aria-current="page"]{color:var(--accent-text); font-weight:550}
.nav .caret{width:9px; height:9px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s}
.has-menu{position:relative}
.has-menu[data-open="true"] .caret{transform:rotate(225deg) translate(-3px,-3px)}

/* editorial grouped dropdown (desktop) */
.menu{
  position:absolute; top:calc(100% + 10px); left:0;
  display:grid; grid-template-columns:1fr 1fr; gap:4px 26px;
  min-width:560px; padding:22px 24px;
  background:var(--bg); border:1px solid var(--line);
  box-shadow:0 24px 60px -20px color-mix(in srgb, var(--ink) 26%, transparent);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.has-menu[data-open="true"] .menu{opacity:1; visibility:visible; transform:none}
.menu-group{display:flex; flex-direction:column}
.menu-group + .menu-group{margin-top:2px}
.menu-label{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); padding:8px 10px 10px; border-bottom:1px solid var(--line);
  margin-bottom:6px;
}
.menu a{display:block; padding:10px; font-size:14.5px; line-height:1.35; border-radius:var(--r); transition:background .18s}
.menu a:hover{background:var(--surface)}
.menu a small{display:block; font-size:12px; color:var(--muted); margin-top:2px}

/* wrapper around lang+burger exists only so the mobile 3-zone grid
   (below) can treat them as one right-hand cluster; on desktop it
   must be invisible to layout so .lang/.burger remain direct flex
   items of .hdr-in exactly as before. */
.hdr-actions{display:contents}

.lang{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; flex:none}
.lang button{padding:7px 11px; font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--accent-dark); color:var(--d-ink)}

.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; flex:none}
.burger span{display:block; width:20px; height:1.5px; background:var(--ink); position:relative; transition:.25s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); transition:.25s}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0; transform:rotate(45deg)}
body.nav-open .burger span::after{top:0; transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; font-size:14.5px; font-weight:500; letter-spacing:.02em;
  text-decoration:none; border-radius:var(--r); border:1px solid transparent;
  transition:.22s; cursor:pointer;
}
.btn-solid{background:var(--accent); color:var(--accent-ink)}
.btn-solid:hover{background:var(--oxblood-dark)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:currentColor}
.btn-ghost:hover span{color:var(--bg)}
.section--dark .btn-solid{background:var(--d-ink); color:var(--ink)}
.btn .arrow{transition:transform .22s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- hero ---------- */
/* Ready for a real photograph: drop an <img> inside .hero-media and the
   mark hides itself automatically. Add class="hero hero--photo" on the
   section for the full-bleed composition with text over the image.      */
.hero{
  position:relative; overflow:hidden; color:var(--ink);
  background:
    radial-gradient(120% 140% at 85% 10%, color-mix(in srgb, var(--clay-light) 35%, transparent) 0%, transparent 60%),
    radial-gradient(90% 110% at 78% 78%, color-mix(in srgb, var(--clay) 12%, transparent) 0%, transparent 55%),
    linear-gradient(115deg, var(--parchment) 0%, var(--parchment) 55%, color-mix(in srgb, var(--parchment) 78%, var(--clay) 22%) 100%);
}
.hero-in{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px);
  align-items:center; min-height:min(84vh,760px); padding:clamp(60px,8vw,96px) 0;
}
.hero h1{font-size:clamp(58px,11vw,132px); letter-spacing:.02em; margin:16px 0 0; line-height:.95}
.hero .eyebrow{color:var(--ink-soft)}
.hero-lead{margin-top:26px; max-width:44ch; color:var(--ink-soft); font-size:clamp(16px,1.85vw,20px); font-weight:300; line-height:1.5}
.hero-cap{margin-top:20px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero-rule{display:flex; gap:28px; flex-wrap:wrap; margin-top:44px; padding-top:26px; border-top:1px solid color-mix(in srgb, var(--bronze) 55%, transparent)}
.hero-rule div{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}

.hero-media{
  position:relative; margin:0; display:flex; align-items:center; justify-content:center;
  min-height:min(52vh,440px);
}
.hero-media img{width:100%; height:100%; max-height:min(64vh,620px); object-fit:cover}
.hero-media .mark{width:min(100%,340px); height:min(50vh,400px); color:var(--oxblood); opacity:.9}
.hero-media:has(img) .mark{display:none}

/* full-bleed variant — activate once the hero photograph exists */
.hero--photo .hero-in{grid-template-columns:1fr; min-height:min(88vh,820px); position:relative; z-index:2}
.hero--photo .hero-media{
  position:absolute; inset:0; z-index:1; margin:0; min-height:0;
}
.hero--photo .hero-media img{width:100%; height:100%; max-height:none; opacity:.5}
.hero--photo .hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--ink) 62%, transparent) 48%,
    color-mix(in srgb, var(--ink) 35%, transparent) 100%);
}
.hero--photo .hero-text{max-width:min(56ch,72%)}

/* ---------- pillars (four categories) ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:color-mix(in srgb, var(--bronze) 40%, var(--line) 60%);
  border-block:1px solid var(--line);
}
.pillar{
  padding:clamp(30px,4vw,48px);
  background:
    radial-gradient(85% 100% at 25% 0%, color-mix(in srgb, var(--clay-light) 14%, transparent) 0%, transparent 60%),
    var(--cream);
}
.pillar:nth-child(2){
  background:
    radial-gradient(85% 100% at 75% 0%, color-mix(in srgb, var(--clay-light) 14%, transparent) 0%, transparent 60%),
    var(--cream);
}
.pillar:nth-child(3){
  background:
    radial-gradient(90% 100% at 50% 100%, color-mix(in srgb, var(--clay-light) 12%, transparent) 0%, transparent 55%),
    var(--cream);
}
/* fourth category — continues the existing alternation so it does not
   simply repeat the first pillar's top-left wash */
.pillar:nth-child(4){
  background:
    radial-gradient(90% 100% at 80% 100%, color-mix(in srgb, var(--clay-light) 12%, transparent) 0%, transparent 55%),
    var(--cream);
}
.pillar h3{font-size:24px; margin:0 0 10px}
/* items are separated by the same hairline the programme rows use */
.pillar-list{list-style:none; margin:12px 0 0; padding:0}
.pillar-list li{
  color:var(--ink-soft); font-size:15.5px; line-height:1.5;
  padding:9px 0; border-top:1px solid var(--line);
}
.pillar-list li:first-child{border-top:0}

/* ---------- programme (editorial rows, not cards) ---------- */
#services{background:var(--bg)}
.svc{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,6vw,96px);
}
.svc-card{
  display:grid; grid-template-columns:auto 1fr;
  column-gap:clamp(18px,2.2vw,32px);
  padding:clamp(30px,3.6vw,46px) clamp(16px,2.5vw,28px);
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--hdr-h) + 24px);
}
/* soft clay tonal bands — fades at both edges so the row reads as a
   soft wash rather than a rectangular panel */
.svc-card:nth-child(even){
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--clay) 7%, transparent) 20%,
    color-mix(in srgb, var(--clay) 7%, transparent) 80%,
    transparent 100%);
}
.svc-card .idx{
  font-family:var(--display); font-size:15px; color:var(--accent-text);
  padding-top:7px; transition:color .3s;
}
.svc-card h3{font-size:clamp(21px,2.2vw,26px); margin-bottom:12px; transition:opacity .3s}
.svc-card p{color:var(--ink-soft); font-size:15.5px; margin-bottom:18px}
.svc-card p:last-child{margin-bottom:0}   /* row 03 carries no CTA */
.svc-card .more{
  font-size:13.5px; letter-spacing:.04em; text-decoration:none;
  color:var(--muted); transition:color .25s;
}
.svc-card:hover .idx,.svc-card:hover .more{color:var(--ink)}
.svc-card .more:hover{color:var(--ink)}

/* ---------- image slots (shared) ----------
   A slot is: <figure class="tile"><img …></figure>. Visible captions were
   removed at the owner's request; each <img> keeps its translated alt text. */
.tile{position:relative; margin:0; background:var(--surface); overflow:hidden; border:1px solid var(--line)}
.tile::before{content:""; display:block; padding-top:var(--ar,100%)}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}

/* ---------- homepage space showcase (1 primary + 2 supporting) ---------- */
/* The dominant tile is portrait (--ar:150%) and the two supporting tiles are
   landscape (--ar:67%) stacked beside it, so 1fr / 1.1fr is what makes the two
   columns resolve to the same height without cropping any of the three. */
.space-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(14px,1.8vw,24px); align-items:stretch}
.space-side{display:grid; grid-template-rows:1fr 1fr; gap:clamp(14px,1.8vw,24px)}
.space-more{
  display:inline-block; margin-top:clamp(26px,3vw,38px);
  font-size:14.5px; letter-spacing:.04em; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:5px; transition:border-color .25s;
}
.space-more:hover{border-color:currentColor}

/* ---------- contact / capacity ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,7vw,110px); align-items:start}
.contact-h{font-size:clamp(28px,4.2vw,50px); line-height:1.05; margin:14px 0 22px; max-width:15ch}
.contact-body{color:var(--d-soft); font-size:clamp(15px,1.55vw,17px); max-width:46ch; font-weight:300}
.contact-body + .contact-body{margin-top:18px}
.capacity{
  margin-top:clamp(32px,4.2vw,48px); padding-top:19px; border-top:1px solid var(--d-line);
  font-family:var(--display); font-size:clamp(17px,1.8vw,20px); color:var(--d-ink);
}
.capacity-label{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--d-soft); font-family:var(--body); margin-bottom:10px;
}

/* the phone is the anchor of the whole section */
.ct-panel{
  border:1px solid var(--d-line);
  padding:clamp(28px,3.6vw,48px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.ct-label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--d-soft)}
.phone{
  display:block; margin:20px 0 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,4.7vw,56px); line-height:1.04; letter-spacing:.005em;
  color:var(--d-ink); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:6px;
  transition:border-color .3s;
}
.phone:hover,.phone:focus-visible{border-color:var(--bronze)}
.ct-note{margin-top:18px; max-width:34ch; font-size:14.5px; line-height:1.6; color:var(--d-muted); font-weight:300}
.ct-rule{width:100%; height:1px; background:var(--d-line); margin:28px 0 26px}
.ct-mail{font-size:13.5px; color:var(--d-faint); margin-top:18px}
.ct-mail a{text-decoration:none; border-bottom:1px solid var(--d-line); padding-bottom:2px; transition:border-color .25s}
.ct-mail a:hover{border-color:var(--d-soft)}

/* ---------- about ---------- */
#about{
  color:var(--ink);
  border-top:1px solid var(--line);
  background:
    radial-gradient(70% 90% at 88% 20%, color-mix(in srgb, var(--clay-light) 20%, transparent) 0%, transparent 55%),
    radial-gradient(60% 70% at 80% 85%, color-mix(in srgb, var(--clay) 14%, transparent) 0%, transparent 60%),
    linear-gradient(100deg, var(--parchment) 0%, var(--parchment) 55%, color-mix(in srgb, var(--parchment) 82%, var(--clay) 18%) 100%);
}
#about h2{color:var(--oxblood)}
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center}
.about p + p{margin-top:18px}
.about-mark{display:flex; justify-content:center}
.about-mark .mark{width:min(100%,300px); height:340px; color:var(--oxblood); opacity:.2}

/* ---------- footer ---------- */
.ftr{
  color:var(--line); padding:clamp(52px,7vw,80px) 0 34px; font-size:14.5px;
  background:
    radial-gradient(80% 120% at 90% 0%, color-mix(in srgb, var(--oxblood-dark) 18%, transparent) 0%, transparent 60%),
    var(--ink);
}
.ftr-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid color-mix(in srgb, var(--bronze) 35%, var(--d-line) 65%)}
.ftr h4{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--oxblood-light); font-family:var(--body); font-weight:600; margin-bottom:18px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ftr a{text-decoration:none; transition:color .2s}
.ftr a:hover{color:var(--oxblood-light)}
.ftr .brand .mark,.ftr .brand-name{color:var(--d-ink)}
.ftr .brand{margin-bottom:18px}
.ftr-bot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:12.5px; color:var(--line)}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gal-head{
  color:var(--ink); padding:clamp(56px,8vw,104px) 0 clamp(44px,6vw,72px);
  background:
    radial-gradient(80% 120% at 94% 0%, color-mix(in srgb, var(--clay-light) 16%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--parchment) 0%, color-mix(in srgb, var(--parchment) 88%, var(--clay) 12%) 100%);
}
.gal-head h1{font-size:clamp(38px,6vw,72px); margin:16px 0 20px}
.gal-head .eyebrow{color:var(--ink-soft)}
.gal-head p{color:var(--ink-soft); max-width:52ch; font-weight:300; font-size:clamp(16px,1.7vw,18.5px)}

.filters{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:22px 0; border-bottom:1px solid var(--line);
  position:sticky; top:var(--hdr-h); z-index:60;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);   /* matches .hdr — see note there */
}
.filters button{
  padding:8px 16px; font-size:13.5px; letter-spacing:.03em; color:var(--muted);
  border:1px solid transparent; border-radius:var(--r); transition:.2s;
}
.filters button:hover{color:var(--ink); background:var(--surface)}
.filters button[aria-pressed="true"]{color:var(--accent-ink); background:var(--accent-dark); border-color:var(--accent-dark)}

/* editorial grid — varied widths, deliberate gaps, carefully aligned */
.gal-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(32px,4.5vw,56px);
  align-items:start;
}
.g-item{grid-column:span 2; padding:0; border:0; background:none; text-align:left; cursor:zoom-in; display:block; width:100%}
.g-item--lg{grid-column:span 4}
.g-item--md{grid-column:span 3}
.g-item[hidden]{display:none}
.g-item:hover .tile img{transform:scale(1.03)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:200; background:color-mix(in srgb, var(--ink) 97%, transparent);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,64px);
  opacity:0; visibility:hidden; transition:opacity .32s ease, visibility .32s;
}
.lb[data-open="true"]{opacity:1; visibility:visible}
.lb-stage{
  position:relative; max-width:min(1100px,100%); max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  transform:scale(.985); transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.lb[data-open="true"] .lb-stage{transform:none}
.lb-frame{
  position:relative; width:min(80vw,1000px); max-height:76vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--ink); border:1px solid var(--d-line);
}
.lb-frame img{max-width:100%; max-height:76vh; width:auto; height:auto; object-fit:contain}
.lb-count{color:var(--d-faint); font-size:12px; letter-spacing:.16em; margin:0}
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  color:var(--d-ink); background:color-mix(in srgb, var(--ink) 58%, transparent); border:1px solid var(--d-line);
  border-radius:50%; font-size:20px; line-height:1; transition:.2s; z-index:2;
}
.lb-btn:hover{background:var(--ink); color:var(--oxblood-light)}
.lb-prev{left:clamp(8px,2vw,26px)} .lb-next{right:clamp(8px,2vw,26px)}
.lb-close{
  position:absolute; top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px);
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  color:var(--d-ink); background:color-mix(in srgb, var(--ink) 58%, transparent); border:1px solid var(--d-line);
  border-radius:50%; font-size:20px; line-height:1; z-index:3; transition:.2s;
}
.lb-close:hover{background:var(--ink); color:var(--oxblood-light)}
body.lb-open{overflow:hidden}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ---------- responsive ----------
   Note: the Programmes dropdown's open/close state (hover, click,
   keyboard focus) is driven entirely by JS toggling [data-open] —
   see assets/phenix.js — so there is no parallel CSS :hover rule
   here to fall out of sync with it. */
/* The approved descriptor is ~40% longer than the old one, and the nav
   now carries a sixth item (Събития), so between 821px and 1080px the
   full desktop header no longer fits on one line and the descriptor
   would wrap. It is hidden only in that band: above 1080px there is
   room for it, and at 820px and below the nav leaves the flow (burger)
   so the descriptor fits again. Below 430px the true-centering block
   already hides it. The footer descriptor is never hidden, and no
   header sizing/centring rule is modified. */
@media (min-width:821px) and (max-width:1080px){
  .hdr .brand-sub{display:none}
}

@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr; min-height:0}
  .hero-media{order:-1; justify-content:flex-start; min-height:0}
  .hero-media .mark{width:150px; height:165px}
  .hero-media img{max-height:44vh}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .contact,.about{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  /* With 13 items, keeping the --lg full-bleed exception here strands a
     half-empty row mid-grid, so every item spans the same two tracks and
     the four-column layout fills two-up with no holes. */
  .gal-grid{grid-template-columns:repeat(4,1fr)}
  .g-item--lg,.g-item--md,.g-item{grid-column:span 2}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* 3-zone header: two equal-fr side tracks flank an auto-sized
     centre track, so the brand is truly centred on the viewport —
     not just centred in whatever space happens to be left over —
     regardless of how wide the brand text or the right-hand
     controls end up being. */
  .hdr-in{display:grid; grid-template-columns:1fr auto 1fr}
  .hdr .brand{grid-column:2; margin-right:0}
  .hdr-actions{
    display:flex; align-items:center; gap:12px;
    grid-column:3; justify-self:end;
  }
  .burger{display:flex}
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:12px var(--gut) 26px;
    max-height:calc(100dvh - var(--hdr-h)); overflow:auto;
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:.25s;
  }
  body.nav-open .nav{transform:none; opacity:1; visibility:visible}
  .nav a,.nav > .has-menu > button{padding:14px 4px; font-size:16px; justify-content:space-between; width:100%}
  /* mobile keeps the simple flat list — groups collapse away */
  .menu{
    position:static; display:block; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-left:1px solid var(--line);
    margin:0 0 8px 6px; padding:0 0 0 10px; min-width:0;
  }
  .has-menu:not([data-open="true"]) .menu{display:none}
  .menu-label{display:none}
  .menu-group + .menu-group{margin-top:0}
  .ct-panel{padding:28px 22px}
  .filters{position:static}
  .lb-frame{width:100%}
  .lb-btn{width:44px; height:44px}
  .ftr-top{grid-template-columns:1fr}
}
@media (max-width:430px){
  /* True viewport-centering: brand is taken out of flow entirely and
     centered on .hdr-in's own box (left:50% + translateX(-50%)), so
     its position no longer depends on matching widths with the
     right-hand controls at all — it's exact by construction. The
     grid from the 820px block is dropped back to a plain flex row
     here since brand no longer needs a track; hdr-actions is the
     only in-flow child left, pushed to the edge by justify-content.
     max-width is a hard safety cap (not the primary sizing lever)
     derived from the controls' own real width, so brand physically
     cannot overlap them even under font-rendering variance.
     Every brand rule here is scoped to .hdr: the footer wordmark
     carries the same classes, and unscoped rules used to drag it out
     of flow and centre it on top of the footer intro copy. */
  .hdr-in{display:flex; justify-content:flex-end; position:relative}
  .hdr .brand{
    position:absolute; left:50%; transform:translateX(-50%);
    gap:6px; max-width:calc(100% - 258px);
  }
  .hdr .brand-name{font-size:12px}
  .hdr .brand-sub{display:none}
  .hdr-actions{gap:8px}
  .lang button{padding:7px 8px}
}
@media (max-width:640px){
  .pillars{grid-template-columns:1fr}
  .space-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr}
  .g-item,.g-item--lg,.g-item--md{grid-column:span 1}
  .space-side{grid-template-columns:1fr}
}
/* Footer brand, narrow mobile. The header's centering rules above are
   scoped to .hdr, so the footer wordmark stays in normal flow on its
   base styles — nothing to reset here. Only two footer-specific
   intentions are declared: the descriptor stays hidden at this width,
   and the brand gets a little more room above the intro copy. */
@media (max-width:430px){
  .ftr .brand-sub{display:none}
  .ftr .brand{margin-bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}