/* ============================================================
   Juan Zuleta — shared design system (v2: scaled / sleek)
   Flat ink on paper. Type is the content. No shadow, no tilt.
   ============================================================ */

:root{
  --paper:#FFFCF7;
  --paper-deep:#E7DFCC;
  --paper-card:#EFE9DB;
  --ink:#1B1A16;
  --ink-soft:#5b5748;
  --cobalt:#2C3BD6;
  --stone:#CFC6AF;
  --rule: rgba(27,26,22,0.18);

  --font-display:'Londrina Sketch', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
}

*{box-sizing:border-box;}
html{background:var(--paper);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  padding-inline:var(--gutter);
  position:relative;
}

h1,h2,h3{font-family:var(--font-display); font-weight:400; margin:0; text-wrap:balance;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}

.wrap{max-width:1240px; margin-inline:auto;}
.prose{max-width:62ch;}

.kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.kicker a{display:inline-block; border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;}
.kicker a:hover{color:var(--cobalt); border-color:var(--cobalt);}

/* ---------- nav — small and quiet on purpose: the contrast is the point ---------- */
header.site-header{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  max-width:1240px;
  margin-inline:auto;
}
.logo{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
nav.links{display:flex; gap:clamp(12px,2.4vw,28px); font-size:12px; flex-wrap:wrap;}
nav.links a{
  font-family:var(--font-mono);
  letter-spacing:0.08em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:3px;
}
nav.links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--cobalt);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav.links a:hover::after, nav.links a[aria-current="page"]::after{transform:scaleX(1);}

.menu-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; padding:0;
  background:none; border:none; cursor:pointer;
}
.menu-toggle span{display:block; width:100%; height:2px; background:var(--ink); transition:background .2s ease;}
header.site-header.on-hero .menu-toggle span{background:#fff;}

/* homepage-only: nav overlaid transparently on the hero photo, white text.
   Deliberately not sticky here — once you scroll past a dark hero, a sticky
   white-text nav would go illegible over the cream page below. It simply
   scrolls away with the hero; every other page keeps the normal sticky nav. */
header.site-header.on-hero{
  position:relative; z-index:2;
  background:transparent;
  border-bottom:none;
}
header.site-header.on-hero .logo,
header.site-header.on-hero nav.links a{color:#fff;}
header.site-header.on-hero nav.links a::after{background:#fff;}

/* ---------- page hero (interior pages) — full-width, edge-to-edge scale ---------- */
.page-hero{
  padding-block:clamp(28px,5vw,52px) clamp(20px,4vw,36px);
  max-width:1240px;
  margin-inline:auto;
  border-bottom:1px solid var(--rule);
}
.page-hero h1{
  font-size:clamp(84px,17vw,260px);
  line-height:0.78;
  letter-spacing:-0.01em;
  margin-top:6px;
}
/* used for any heading sourced from editable content (project/piece/item titles) —
   Londrina Sketch has no accented-character glyphs, so CMS-entered titles
   (e.g. "Državljan", "vžigalicami", "slišiš") must render in the body face instead */
.page-hero h1.plain{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-0.03em;
  font-size:clamp(46px,10vw,150px);
  line-height:0.94;
}
.page-hero .lede{
  margin-top:clamp(20px,5vw,72px);
  font-size:clamp(16px,1.8vw,20px);
  color:var(--ink-soft);
  max-width:58ch;
}

/* ---------- next show banner — full-bleed, deliberately smaller than the nav ---------- */
.next-show{
  background:var(--cobalt);
  color:var(--paper);
  margin-inline:calc(var(--gutter) * -1);
}
.next-show a.next-show-link{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px;
  max-width:calc(1240px + (var(--gutter) * 2)); margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:7px;
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.3;
}
.next-show .kicker{
  color:var(--paper); opacity:0.85;
  flex-shrink:0;
  font-size:10.5px;
}
.next-show .what{font-weight:700; flex-shrink:0;}
.next-show .when{opacity:0.9; flex-shrink:0;}
.next-show .cta{
  margin-left:auto;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:2px solid var(--paper); padding-bottom:1px; white-space:nowrap;
}
@media (max-width:600px){
  .next-show .cta{margin-left:0;}
}

/* ---------- dates page ---------- */
.dates-list{max-width:1240px; margin-inline:auto; padding-bottom:clamp(40px,6vw,72px);}
.date-row{
  display:grid;
  grid-template-columns:200px 1fr auto;
  gap:6px 20px;
  align-items:baseline;
  padding-block:20px;
  border-top:1px solid var(--rule);
}
.dates-list .date-row:last-child{border-bottom:1px solid var(--rule);}
.date-row .when{font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.date-row .what{font-family:var(--font-body); font-weight:700; font-size:19px;}
.date-row .where{grid-column:2; font-size:14px; color:var(--ink-soft); margin-top:-4px;}
.date-row .note{grid-column:2; font-size:13px; color:var(--cobalt); margin-top:2px;}
.date-row .get-tickets{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:2px solid var(--cobalt); padding-bottom:2px; white-space:nowrap; align-self:center;
}
.dates-list.past .date-row .what, .dates-list.past .date-row .when{color:var(--ink-soft); font-weight:600;}
@media (max-width:640px){
  .date-row{grid-template-columns:1fr; gap:4px;}
  .date-row .where, .date-row .note{grid-column:1;}
  .date-row .get-tickets{justify-self:start; margin-top:6px;}
}

/* ---------- hero (home) — full 100vw/100vh photo, nav overlaid on top ---------- */
.hero-split{
  position:relative; z-index:1;
  margin-inline:calc(var(--gutter) * -1);
  /* pulls the image up to sit directly behind the transparent header above —
     driven by the header's actual measured height (set in base.njk) rather
     than a fixed guess, so it's exact regardless of font-rendering variance */
  margin-top:calc(-1 * var(--header-h, 51.5px));
  height:100vh; height:100svh;
  /* when the "next up" strip is showing, shrink by exactly its real height
     so strip + header + hero still total one full screen, instead of the
     strip adding extra height on top of an already-100vh hero */
  height:calc(100vh - var(--strip-h, 0px)); height:calc(100svh - var(--strip-h, 0px));
  overflow:hidden;
  background:#010101;
}
.hero-split-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:25% center;
  filter:grayscale(1) contrast(1.05) brightness(0.95);
}
.hero-split-copy{
  position:relative; z-index:1;
  height:100%;
  max-width:min(640px, 46%);
  display:flex; align-items:center;
  padding:51.5px var(--gutter) 0;
  /* aligns the left edge with the logo above it: the header sits in a
     centered max-width:1240px box, so past that breakpoint its left edge
     is (100vw - 1240px)/2 — matching that here keeps title and logo
     locked together at any width instead of drifting apart on wide screens */
  margin-left:max(0px, calc((100vw - 1240px) / 2 - var(--gutter)));
}
.hero-split-copy-inner{transform:translateY(clamp(-70px,-6vw,-30px)) rotate(-3.23deg);}
.hero-split-copy h1{
  color:#fff;
  font-size:clamp(84px,17vw,260px); /* matches the Music/Stage/Stories page-hero h1 size exactly */
  line-height:0.78;
}
.hero-split-copy .tagline{
  margin-top:clamp(14px,2vw,22px);
  font-family:var(--font-mono);
  font-size:clamp(13px,1.3vw,16px);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  opacity:0.9;
}
@media (max-width:680px){
  .hero-split{
    margin-top:0;
    /* the whole first screen (header + hero, or "next up" strip + header +
       hero when there's an upcoming show) should total exactly one screen —
       subtract the real measured height (set in base.njk) so there's
       nothing left to scroll through, exact regardless of font-rendering
       variance between browsers. On mobile the header isn't overlaid
       behind the hero (see the .on-hero override below), so both its own
       height and the strip's have to be subtracted here. */
    height:calc(100svh - var(--header-h, 65px) - var(--strip-h, 0px));
    position:relative;
  }
  /* photo sits in the lower ~80% only, anchored to the bottom — the gap
     above it is plain hero-split black, matching the photo's own dark
     backdrop, so the title has clear room and never sits over his face */
  .hero-split picture{position:absolute; left:0; right:0; bottom:0; display:block; height:80%; width:100%;}
  .hero-split-bg{
    position:absolute; inset:0; height:100%; width:100%; object-position:top center;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 14%);
  }
  /* dark-to-transparent scrim instead of a hard split, so the photo reads as
     one continuous image behind the title rather than two stacked blocks */
  .hero-split::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to bottom, rgba(1,1,1,0.82) 0%, rgba(1,1,1,0.82) 20%, rgba(1,1,1,0) 34%);
    pointer-events:none;
  }
  .hero-split-copy{
    position:relative; z-index:2;
    max-width:100%; height:auto; display:block;
    padding:32px 20px 0;
    margin-left:0;
  }
  .hero-split-copy-inner{transform:rotate(-3.23deg);}
  .hero-split-copy h1{font-size:clamp(48px,15vw,80px); line-height:0.85;}
  /* the pull-up-under-header trick only works at the desktop split layout —
     on mobile the header goes back to its normal solid, sticky, dark-on-cream self */
  header.site-header.on-hero{
    position:sticky; top:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  header.site-header.on-hero .logo,
  header.site-header.on-hero nav.links a{color:var(--ink);}
  header.site-header.on-hero nav.links a::after{background:var(--cobalt);}
  header.site-header.on-hero .menu-toggle span{background:var(--ink);}

  /* ---------- mobile nav: full-bleed bar, hamburger menu ---------- */
  header.site-header{
    position:relative;
    max-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
  }
  .menu-toggle{display:flex;}
  nav.links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:4px var(--gutter) 12px;
  }
  header.site-header.menu-open nav.links{display:flex;}
  nav.links a{padding-block:12px; border-top:1px solid var(--rule);}
  nav.links a::after{display:none;}
}

/* ---------- section headings ---------- */
.section-head{
  padding-top:clamp(48px,7vw,86px);
  padding-bottom:clamp(16px,2.4vw,28px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:1240px; margin-inline:auto;
}

/* ---------- role filter chips (Stage) ---------- */
.filter-row{
  display:flex; flex-wrap:wrap; gap:10px;
  padding-top:clamp(28px,4vw,40px);
  max-width:1240px; margin-inline:auto;
}
.filter-chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding:9px 16px; border:1.5px solid var(--stone); border-radius:999px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-chip:hover{border-color:var(--ink);}
.filter-chip.is-active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.section-head h2{font-size:clamp(26px,3.4vw,38px);}

/* ---------- card grid (doors / projects / works / words / archive) — flat, sharp, no tilt ---------- */
.card-grid{
  margin-top:clamp(20px,3vw,32px);
  /* matches .dates-list's padding-bottom, so this + .about-strip's own
     padding-top equals the Dates-to-grid gap above it */
  padding-bottom:clamp(40px,6vw,72px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:clamp(10px,1.6vw,20px);
  row-gap:clamp(30px,4.8vw,60px);
  max-width:1240px; margin-inline:auto;
}
.card-grid.two-col{grid-template-columns:repeat(2, 1fr);}

.card{
  position:relative;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.card[hidden]{display:none;}

.card-frame{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--paper-card);}
.card-frame img{width:100%; height:100%; object-fit:cover; filter:saturate(0.78) contrast(1.08) brightness(0.96); transition:transform .35s cubic-bezier(0.22,1,0.36,1);}
.card-frame .tint{position:absolute; inset:0; background:var(--cobalt); mix-blend-mode:color; opacity:0;}
.card:hover .card-frame img{transform:scale(1.05);}
.card-frame .num{
  position:absolute; top:0; left:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  color:var(--paper); background:var(--ink); padding:6px 10px;
}
.card-frame .tag{
  position:absolute; top:0; right:0;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--paper); background:var(--cobalt); padding:6px 10px;
}

/* default: safe for any CMS-entered title, including diacritics Londrina Sketch lacks */
.card-label{margin-top:16px; font-family:var(--font-body); font-weight:700; letter-spacing:-0.01em; font-size:clamp(21px,2.6vw,28px); text-wrap:balance;}
/* only for fixed words we hardcode ourselves (never CMS content) — the hand-drawn moment */
.card-label.display{font-family:var(--font-display); font-weight:400; letter-spacing:0.01em; font-size:clamp(28px,4vw,46px);}
.card-teaser{margin-top:6px; font-size:14.5px; color:var(--ink-soft); max-width:44ch;}
.card-meta{margin-top:4px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:0.04em;}
.card-enter{
  margin-top:12px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); border-bottom:2px solid var(--cobalt); padding-bottom:2px; width:fit-content;
}
.card-enter svg{transition:transform .3s ease;}
.card:hover .card-enter svg{transform:translateX(6px);}

/* plain photo gallery — Pinterest-style masonry: full colour, natural aspect
   ratio per image (portrait, square or landscape all sit fine), no hover
   tint/zoom, no title. Built with CSS columns since column-count is the one
   pure-CSS way to get true variable-height masonry without JS. */
.card-grid.gallery{
  display:block;
  column-count:4;
  column-gap:clamp(10px,1.6vw,20px);
}
.card-grid.gallery .card{
  display:block;
  break-inside:avoid;
  margin-bottom:clamp(10px,1.6vw,20px);
}
.card-grid.gallery .lightbox-trigger{cursor:zoom-in;}
.card-grid.gallery .card-frame{
  aspect-ratio:auto;
  height:auto;
}
.card-grid.gallery .card-frame img{
  height:auto;
  object-fit:initial;
  filter:none;
  transition:none;
}
.card-grid.gallery .card:hover .card-frame img{transform:none;}
.card-grid.gallery .card-teaser{margin-top:8px; font-size:13px;}

/* ---------- about strip (home) — flat ring, no tilt, no shadow ---------- */
.about-strip{
  /* matches .card-grid's margin-top, pairing with its padding-bottom above
     to equal the Dates-to-grid gap */
  padding-top:clamp(20px,3vw,32px);
  /* the CTA band's own top padding is inside its texture, which reads as
     busy rather than open space, so the entire visible About-to-CTA gap
     (same total as the other section gaps) has to live here instead */
  padding-bottom:calc(clamp(40px,6vw,72px) + clamp(20px,3vw,32px));
  display:flex;
  align-items:center;
  gap:clamp(28px,6vw,80px);
  max-width:1240px; margin-inline:auto;
}
.about-strip .photo{width:clamp(220px,45vw,604px); height:clamp(220px,45vw,604px); overflow:hidden; flex-shrink:0;}
.about-strip .photo img{width:100%; height:100%; object-fit:cover; filter:saturate(0.78) contrast(1.06);}
.about-strip .text{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2vw,22px);}
.about-strip p{font-family:var(--font-body); font-weight:700; font-size:19px; line-height:1.5; max-width:52ch;}
.about-strip .go{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; border-bottom:2px solid var(--cobalt); padding-bottom:3px;
  width:fit-content;
}
.about-strip .go svg{transition:transform .3s ease;}
.about-strip .go:hover svg{transform:translateX(6px);}
/* the desktop side-by-side ratio (photo ~49% of the row) leaves too little
   room for the text to wrap once the row itself is this narrow — stack
   instead, with the photo full-width */
@media (max-width:680px){
  .about-strip{flex-direction:column; align-items:flex-start;}
  .about-strip .photo{width:100%; height:auto; aspect-ratio:1/1;}
}

/* ---------- generic content section ---------- */
.content-section{max-width:1240px; margin-inline:auto; padding-block:clamp(28px,5vw,56px); display:grid; grid-template-columns:1fr; gap:20px;}
.content-section.with-rule{border-top:1px solid var(--rule);}
.content-section h2{font-size:clamp(24px,3vw,34px);}
.body-text{font-size:16px; line-height:1.65; max-width:62ch; color:var(--ink);}
.body-text p + p{margin-top:14px;}
.body-text a{color:var(--cobalt); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;}
.body-text a.card-enter{text-decoration:none;}
.body-text a:hover{color:var(--ink);}
.body-text a.btn{text-decoration:none;}
.body-text a.btn:hover{color:var(--paper);}
.body-text h2, .body-text h3{font-family:var(--font-body); font-weight:700; letter-spacing:-0.01em; font-size:1.15em; margin-top:32px; margin-bottom:4px;}
.body-text h2:first-child, .body-text h3:first-child{margin-top:0;}
.body-text ul, .body-text ol{margin-top:14px; padding-left:1.2em; list-style:disc;}
.body-text li + li{margin-top:6px;}
.body-text img{margin-block:20px; filter:saturate(0.78) contrast(1.06);}
.body-text hr{border:none; border-top:1px solid var(--rule); margin-block:28px;}

/* ---------- two-col media/text layout (project & about pages) — flat, sharp ---------- */
.split{
  max-width:1240px; margin-inline:auto;
  padding-block:clamp(28px,5vw,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start;
}
.split .media{aspect-ratio:4/5; overflow:hidden;}
.split .media img{width:100%; height:100%; object-fit:cover; filter:saturate(0.78) contrast(1.06);}

/* ---------- list blocks (education, collaborations) ---------- */
.def-list{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.def-list li{display:flex; gap:14px; padding-block:8px; border-top:1px solid var(--rule); font-size:15px;}
.def-list li:first-child{border-top:none;}
.def-list .when{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); min-width:88px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 20px; border:1.5px solid var(--stone); background:transparent; color:var(--ink); cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.btn.solid{background:var(--cobalt); border-color:var(--cobalt); color:var(--paper);}
.btn.solid:hover{background:var(--ink); border-color:var(--ink);}

/* ---------- project detail meta ---------- */
.meta-row{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:18px;}
.meta-row div{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}
.meta-row div b{display:block; color:var(--ink); font-family:var(--font-body); font-size:15px; font-weight:600; margin-top:2px;}

/* ---------- contact form ---------- */
.contact-grid{max-width:1240px; margin-inline:auto; padding-block:clamp(28px,5vw,56px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px);}
form.contact-form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);}
.field input, .field textarea{
  font-family:var(--font-body); font-size:15px; padding:12px 14px;
  border:1.5px solid var(--rule); background:var(--paper-card); color:var(--ink);
  resize:vertical;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--cobalt); outline-offset:1px; border-color:var(--cobalt);}
.contact-details{display:flex; flex-direction:column; gap:18px;}
.contact-details a{border-bottom:2px solid var(--cobalt); padding-bottom:2px; display:inline-block; width:fit-content;}

/* ---------- book-now CTA (every page except contact itself) ---------- */
.book-cta{
  padding-block:clamp(40px,6vw,64px);
  padding-inline:clamp(20px,4vw,40px);
  max-width:1240px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  text-align:center;
  background-image:url('/assets/img/uploads/cta-texture.jpg');
  background-size:cover; background-position:center;
}
.book-cta p{font-size:24px; line-height:1.2;}

/* ---------- footer ---------- */
footer.site-footer{
  /* margin (not padding) so the blank gap lands *before* the border-top
     line, on plain page background — using padding here instead left the
     line sitting flush against the textured band's own edge, reading as
     part of the CTA section rather than the footer's own opening rule.
     Matches .dates-list's padding-bottom + .card-grid's margin-top, since
     the CTA band's own bottom padding is inside the busy texture and
     doesn't register visually as open space the way blank background does. */
  margin-top:calc(clamp(40px,6vw,72px) + clamp(20px,3vw,32px));
  border-top:1px solid var(--rule);
  padding-block:clamp(28px,5vw,44px);
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
  max-width:1240px; margin-inline:auto;
}
footer.site-footer .logo{font-size:12px;}
footer.site-footer nav.links{font-size:12px;}
footer.site-footer .meta{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:0.04em;}
footer.site-footer .meta a{text-decoration:underline; text-underline-offset:2px;}
footer.site-footer .meta a:hover{color:var(--ink);}

:focus-visible{outline:2px solid var(--cobalt); outline-offset:3px;}

.skip-link{
  position:absolute; left:16px; top:-60px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding:10px 16px; z-index:3000;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}

@media (max-width:860px){
  .card-grid{grid-template-columns:1fr;}
  .card-grid.two-col{grid-template-columns:1fr;}
  .card-grid.gallery{column-count:2;}
  .split{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- gallery lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,6vw,64px);
  cursor:zoom-out;
}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain;}
.lightbox-close{
  position:absolute; top:20px; right:24px;
  background:none; border:none; color:#fff; font-size:32px; line-height:1;
  cursor:pointer;
}