/* =========================================================================
   Luciffer's — Praça da Alegria 60, 4000-029 Porto

   Direction: the two reference images (The Eclectica / Astro Attic) —
   sage-mint, salmon, brass and cream, symmetrical and filmic. Checker is
   the connective device: framing, bands, rules. Palette is derived from the
   green & gold laurel logo, warmed toward the references.

   All colour lives in the tokens below. Change these and the site reskins.
   ========================================================================= */

:root {
  --bone:    #F2EADA;   /* primary ground */
  --paper:   #FBF6EC;   /* raised surface */
  --forest:  #24402F;   /* brand green — structure + ink */
  --forest-2:#33553F;
  --forest-deep: #14241B;  /* footer only — a darker step so a forest CTA
                              section doesn't run straight into the footer */
  --sage:    #9DBCA6;   /* mint, from the Eclectica desk */
  --sage-dim:#C4D6C9;
  --salmon:  #E0968A;   /* the salmon walls */
  --salmon-d:#B8675C;   /* text-safe salmon */
  --brass:   #C9A24A;   /* gold */
  --brass-d: #96751F;   /* text-safe gold on light */
  --ink:     #1C2A21;
  --muted:   #6C7A70;
  --line:    #DED3BE;

  --display: "Bodoni MT", "Didot", "Playfair Display", Georgia, serif;
  --sans:    "Futura", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  --body:    Georgia, "Iowan Old Style", "Palatino Linotype", serif;

  --col: 72rem;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --hdr: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--salmon-d); outline-offset: 3px; }

.wrap { max-width: var(--col); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.measure { max-width: 36rem; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------- the checker -- */
/* One device, three jobs: a band between sections, a frame around a photo,
   and a hairline rule. Never a full-height background. */

.checker {
  height: 14px;
  background-image: conic-gradient(var(--forest) 0 25%, transparent 0 50%, var(--forest) 0 75%, transparent 0);
  background-size: 14px 14px;
}
.checker--sm   { height: 8px;  background-size: 8px 8px; }
.checker--lg   { height: 22px; background-size: 22px 22px; }
.checker--brass{ background-image: conic-gradient(var(--brass) 0 25%, transparent 0 50%, var(--brass) 0 75%, transparent 0); }
.checker--salmon{background-image: conic-gradient(var(--salmon) 0 25%, transparent 0 50%, var(--salmon) 0 75%, transparent 0); }
.checker--sage { background-image: conic-gradient(var(--sage) 0 25%, transparent 0 50%, var(--sage) 0 75%, transparent 0); }

/* The only remaining checker frame is around the hero video — see .hero-frame */

/* ----------------------------------------------------------------- type -- */
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
.display {
  font-family: var(--display);
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  line-height: .98; letter-spacing: -0.015em;
}
.h1 { font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.06; }
.h2 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; }
.h3 { font-family: var(--sans); font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.display, .h1, .h2 { text-wrap: balance; }

.label {
  font-family: var(--sans); font-size: .6875rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brass-d); margin: 0;
}
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--muted); }
p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
.dim { color: var(--muted); }
.rule { width: 3.5rem; height: 1px; background: var(--brass); border: 0; margin: 1.75rem 0; }
.rule.mid { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------- buttons -- */
/* Safari on iPhone paints button text in the system blue unless a colour is
   set, and adds its own rounded chrome. Both are switched off here. */
button { color: inherit; font-family: inherit; -webkit-appearance: none; appearance: none; }
.btn {
  display: inline-block; font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding: .9rem 1.9rem; border: 1px solid var(--forest);
  background: var(--forest); color: var(--bone); transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--forest-2); }
.btn--line { background: transparent; color: var(--forest); }
.btn--line:hover { background: var(--forest); color: var(--bone); }
.btn--brass { background: var(--brass); border-color: var(--brass); color: var(--forest); }
.btn--brass:hover { background: #D8B565; }
.btn--bone { background: var(--bone); border-color: var(--bone); color: var(--forest); }
.btn--bone:hover { background: #fff; }

.tlink {
  font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--brass); padding-bottom: 3px;
}
.tlink:hover { border-bottom-color: var(--forest); }

/* --------------------------------------------------------------- header -- */
/* Announcement strip above the nav. Deliberately not sticky — it scrolls away
   once read, so it never eats height on long pages. */
.notice { background: var(--brass); color: var(--forest); }
.notice-in {
  max-width: var(--col); margin: 0 auto; padding: .6rem var(--gut);
  display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.notice-in a { color: var(--forest); text-decoration: none; border-bottom: 1px solid rgba(36,64,47,.45); padding-bottom: 1px; }
.notice-in a:hover { border-bottom-color: var(--forest); }
.notice-in .dot { opacity: .5; }
@media (max-width: 44rem) {
  .notice-in { font-size: .625rem; letter-spacing: .1em; gap: .35rem; }
  .notice-in .dot { display: none; }
}

.hdr { position: sticky; top: 0; z-index: 60; background: var(--forest); }
.hdr-in {
  height: var(--hdr); max-width: var(--col); margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.mark { display: block; line-height: 0; flex-shrink: 0; }
.mark img { height: 30px; width: auto; }

.menu { display: flex; align-items: center; gap: 1.5rem; }
.menu a.nav-item {
  font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: rgba(242,234,218,.75);
  padding: .35rem 0; border-bottom: 1px solid transparent;
}
.menu a.nav-item:hover { color: var(--brass); }
.menu a.nav-item[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); }
.menu a.btn { padding: .6rem 1.2rem; font-size: .6875rem; }
.menu a.btn--brass { color: var(--forest); }
.menu a.btn--brass:hover { color: var(--forest); }

.langsw { display: flex; align-items: center; gap: .3rem; }
.langsw button {
  font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  background: none; border: 0; cursor: pointer; padding: .3rem .2rem;
  color: rgba(242,234,218,.55);
}
.langsw button[aria-pressed="true"] { color: var(--brass); }
.langsw span { color: rgba(242,234,218,.3); font-size: .6875rem; }

/* The top-right copy is for phones only; on wide screens the switch that
   lives inside the menu is the one shown. */
.langsw--top { display: none; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--bone); margin: 4px 0; }

@media (max-width: 62rem) {
  .burger { display: block; }
  .hdr-in { gap: .5rem; }
  .langsw--top { display: flex; margin-left: auto; }
  .menu .langsw { display: none; }
  .menu {
    position: absolute; top: var(--hdr); left: 0; right: 0;
    background: var(--forest); flex-direction: column; align-items: flex-start;
    gap: .35rem; padding: 1.25rem var(--gut) 1.75rem;
    border-top: 1px solid rgba(201,162,74,.3);
  }
  .menu[data-open="false"] { display: none; }
  .menu a.nav-item { font-size: .8125rem; padding: .5rem 0; }
  .menu a.btn { margin-top: .75rem; }
}

/* ----------------------------------------------------------------- hero -- */
/* Hero grading. --hero-sat / --hero-con push the footage back toward the
   saturation of the real shop; the scrim is now a vignette that is only heavy
   where type actually sits (the top bar and the bottom edge) instead of a flat
   wash over the whole frame, which was flattening the colour. */
:root {
  --hero-sat: 1.65;   /* nudge down toward 1.35 for calmer, up toward 2 for louder */
  --hero-con: 1.18;
  --hero-scrim-top: .55;
  --hero-scrim-mid: .10;
  --hero-scrim-bot: .70;
}

/* The checker band that used to sit under the hero now wraps it as a frame.
   The band height is the frame thickness, so it reads as one continuous edge. */
.hero-frame {
  padding: 14px;
  /* Gold on the header's dark green (Ricardo, 2026-09-15). Only this frame;
     the section bands keep their own colours (.checker above). */
  background-color: var(--forest);
  background-image: conic-gradient(var(--brass) 0 25%, transparent 0 50%, var(--brass) 0 75%, transparent 0);
  background-size: 14px 14px;
}
.hero-frame .hero { height: calc(100svh - 28px); }
@media (max-width: 44rem) { .hero-frame { padding: 8px; background-size: 8px 8px; } .hero-frame .hero { height: calc(100svh - 16px); } }

.hero { position: relative; height: 100vh; height: 100svh; min-height: 540px; background: #14201A; overflow: hidden; }
.hero video, .hero .poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(var(--hero-sat)) contrast(var(--hero-con));
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(20,32,26,0) 40%, rgba(20,32,26,.34) 100%),
    linear-gradient(180deg,
      rgba(20,32,26,var(--hero-scrim-top)) 0%,
      rgba(20,32,26,var(--hero-scrim-mid)) 38%,
      rgba(20,32,26,var(--hero-scrim-mid)) 52%,
      rgba(20,32,26,var(--hero-scrim-bot)) 100%);
}
.hero-body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--gut); color: var(--bone);
}
/* With the scrim lightened so the colour survives, the type needs to carry its
   own contrast rather than relying on a dark wash over the whole frame. */
.hero-body > * { text-shadow: 0 1px 14px rgba(12,20,15,.75), 0 1px 3px rgba(12,20,15,.5); }
.hero-body .crest, .hero-body .mark-lg { filter: drop-shadow(0 2px 12px rgba(12,20,15,.6)); }
.hero-body .hero-cta { text-shadow: none; }

.hero-body .crest { width: clamp(88px, 9vw, 108px); margin: 0 auto 1.6rem; opacity: .95; }
.hero-body .mark-lg { width: min(560px, 84vw); margin: 0 auto; }   /* mark-hero.png is 560px wide */
.hero-body .label { color: var(--brass); margin-top: 1.75rem; }
.hero-body .lead { color: rgba(242,234,218,.86); margin: 1.1rem auto 0; max-width: 34ch; }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: 2.25rem; }
.hero-cta .btn--line { color: var(--bone); border-color: rgba(242,234,218,.55); }
.hero-cta .btn--line:hover { background: var(--bone); color: var(--forest); border-color: var(--bone); }

/* -------------------------------------------------------------- section -- */
.sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sec--tight { padding: clamp(2.25rem, 4vw, 3.25rem) 0; }
.sec--paper  { background: var(--paper); }
.sec--sage   { background: var(--sage-dim); }
.sec--forest { background: var(--forest); color: var(--bone); }
.sec--forest .label { color: var(--brass); }
.sec--forest .dim, .sec--forest .lead { color: rgba(242,234,218,.8); }
.sec--forest .btn--line { color: var(--bone); border-color: rgba(242,234,218,.5); }
.sec--forest .btn--line:hover { background: var(--bone); color: var(--forest); }
.sec--forest .tlink { border-bottom-color: var(--brass); }

.head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.head .label { margin-bottom: .9rem; }
.head .lead { margin: 1.1rem auto 0; max-width: 44ch; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: center; }
.split--top { align-items: start; }
/* Both columns share a height and the map grows to fill it, instead of the
   short column leaving a void underneath. */
.split--stretch { align-items: stretch; }
.split--stretch > .map,
.split--stretch > .ph  { align-self: stretch; height: auto; min-height: 340px; }
/* Stacked, a stretched photo has no height to inherit, so give it a shape. */
@media (max-width: 44rem) { .split--stretch > .ph { aspect-ratio: 4/5; min-height: 0; } }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.25rem,2.5vw,2rem); }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem,2.5vw,2rem); }
.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 60rem) { .cols3, .cols4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 44rem) { .split, .cols2, .cols3, .cols4 { grid-template-columns: minmax(0,1fr); } }

.ph { overflow: hidden; background: var(--sage-dim); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.r11 { aspect-ratio: 1/1; } .r34 { aspect-ratio: 3/4; } .r23 { aspect-ratio: 2/3; }
.r43 { aspect-ratio: 4/3; } .r32 { aspect-ratio: 3/2; }
.cap { font-family: var(--sans); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; text-align: center; }

/* -------------------------------------------------------------- reviews -- */
.rv-top { text-align: center; margin-bottom: 2.5rem; }
.rv-score { font-family: var(--display); font-size: 3.5rem; line-height: 1; }
.rv-stars { color: var(--brass); letter-spacing: .18em; margin-top: .5rem; }
.rv-of { font-family: var(--sans); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .7rem; }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem,2.5vw,2rem); }
/* 3 across on a computer, 2 on a tablet, 1 on a phone — so the text always
   has room to breathe instead of wrapping a word per line. */
@media (max-width: 60rem) { .rv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 44rem) { .rv-grid { grid-template-columns: minmax(0,1fr); } }
.rv {
  /* margin: 0 — a <figure> also carries default side margins, which were
     shrinking every card inside its grid column. */
  margin: 0;
  background: var(--paper); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex; flex-direction: column;
}
/* margin: 0 matters — a <blockquote> carries 40px side margins by default,
   which was squeezing the review text into a narrow strip inside the card. */
.rv .q { font-style: italic; flex: 1; margin: 0; font-size: 1rem; line-height: 1.65; }
.rv .who { font-family: var(--sans); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-d); margin-top: 1.25rem; }
.rv .s { color: var(--brass); letter-spacing: .14em; font-size: .8125rem; margin-bottom: .8rem; }

/* ----------------------------------------------------------------- info -- */
.deflist { border-top: 1px solid var(--line); margin: 0; }
.deflist div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.deflist dt { margin: 0; color: var(--muted); }
.deflist dd { margin: 0; font-variant-numeric: tabular-nums; }
.sec--forest .deflist, .sec--forest .deflist div { border-color: rgba(242,234,218,.18); }
.sec--forest .deflist dt { color: rgba(242,234,218,.6); }
.map { width: 100%; min-height: 360px; border: 0; }

/* ---------------------------------------------------------------- bands -- */
.band + .band { border-top: 1px solid var(--line); }
/* The service photos are portrait as shot (4:5 and 2:3). Stretching the cell to
   the text height and using object-fit:cover cropped away most of the frame, so
   the photo now sits at its own ratio, centred, with nothing cut off. */
.band-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
.band .ph {
  min-height: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.band .ph img {
  width: auto; height: auto;
  max-width: 100%; max-height: 620px;
  object-fit: contain;
}
.band .txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem,5vw,4.5rem); }
.band .txt ul { margin: .9rem 0 0; padding-left: 1.15rem; color: var(--muted); font-size: 1rem; }
.band .txt ul li { margin-bottom: .55rem; line-height: 1.6; }
.band .txt ul li::marker { color: var(--brass); }
.band .txt .strong { color: var(--ink); font-weight: 700; margin-top: 1.2rem; }
.band--flip .ph { order: 2; }
.band--paper { background: var(--paper); }
@media (max-width: 52rem) {
  .band-in { grid-template-columns: minmax(0,1fr); }
  .band--flip .ph { order: 0; }
  /* still no crop on mobile — just a shorter cap so the portrait doesn't
     fill the whole screen before the text is reached */
  .band .ph img { max-height: 460px; }
}


/* -------------------------------------------------------------- gallery -- */
/* Each row is one client photographed from three angles, so the grouping
   carries meaning rather than being an arbitrary grid. */
.gal-set + .gal-set { margin-top: clamp(1rem, 2vw, 1.5rem); }
.gal-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
@media (max-width: 44rem) { .gal-row { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .4rem; } }

/* -------------------------------------------------------------- premium -- */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.5rem,3vw,2.5rem); align-items: start; }
@media (max-width: 62rem) { .packs { grid-template-columns: minmax(0,1fr); max-width: 34rem; margin: 0 auto; } }
.pack { display: flex; flex-direction: column; height: 100%; }
.pack .ph { margin-bottom: 1.5rem; }
.pack h3 { color: var(--brass); margin-bottom: .5rem; }
.pack .tag { font-style: italic; color: rgba(242,234,218,.9); margin-bottom: 1.1rem; }
.pack ul { list-style: none; margin: 0; padding: 0; }
.pack ul li {
  position: relative; padding-left: 1.1rem; margin-bottom: .55rem;
  font-size: .9375rem; line-height: 1.55; color: rgba(242,234,218,.8);
}
.pack ul li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
/* margin-top:auto pushes the button to the bottom of the card, so all three
   line up even though the packs have different amounts of text. */
.pack .cta { margin-top: auto; padding-top: 1.6rem; }

/* -------------------------------------------------------------- product -- */
.brandgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 44rem) { .brandgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.brandgrid div {
  background: var(--paper); padding: 1.75rem 1.5rem;
  display: flex; align-items: center; justify-content: center; min-height: 150px;
}
.brandgrid img {
  width: 100%; max-width: 190px; height: auto;
  /* the logos are black, green and gold on transparency — a touch of
     desaturation settles them into the palette without washing them out */
  filter: saturate(.9);
  transition: transform .25s ease;
}
.brandgrid div:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------- footer -- */
.ftr { background: var(--forest-deep); color: rgba(242,234,218,.72); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.ftr a { color: rgba(242,234,218,.72); text-decoration: none; }
.ftr a:hover { color: var(--brass); }
.ftr h4 { font-family: var(--sans); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 52rem) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: .5rem; font-size: .9375rem; }
.ftr .mark img { height: 34px; margin-bottom: 1.1rem; }
.ftr-base {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(242,234,218,.16);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(242,234,218,.45);
}

/* ------------------------------------------------------------ page head -- */
.phead { text-align: center; padding: clamp(3rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem); }
.phead .label { margin-bottom: 1rem; }
.phead .lead { margin: 1.2rem auto 0; max-width: 46ch; }

.todo { color: var(--muted); font-style: italic; }

/* Available to screen readers and search engines, invisible on screen. Used for
   the homepage <h1>, since the hero's headline is the logo image. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- shop photo gallery --
   Square tiles carrying a 560px thumbnail. The full-size version of each
   photo is named in data-full and is only requested when the tile is opened,
   so the grid costs no more than the six-photo block it replaced. */
.gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(.5rem, 1.1vw, .85rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 60rem) { .gal { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 34rem) { .gal { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.gal button {
  display: block; width: 100%; aspect-ratio: 1/1;
  margin: 0; padding: 0; border: 0; font: inherit;
  background: var(--sage-dim); overflow: hidden; cursor: zoom-in;
}
.gal img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.gal button:hover img, .gal button:focus-visible img { transform: scale(1.06); }
.gal button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ------------------------------------------------------------ lightbox -- */
.lb { display: none; }
.lb.open {
  display: grid; grid-template-rows: 1fr auto;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,36,27,.97);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  padding: clamp(1rem, 3vw, 2.5rem);
}
.lb-stage { position: relative; min-height: 0; }
/* Absolutely positioned with inset 0 and auto margins: the photo is centred
   and genuinely bounded by the stage, whatever its own aspect ratio. */
.lb-stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  background: var(--forest-deep);
}
.lb-bar {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  padding-top: 1rem;
  font-family: var(--sans); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(242,234,218,.6);
}
.lb button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 1px solid rgba(242,234,218,.28);
  color: var(--bone); padding: .55rem .95rem; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.lb button:hover { background: rgba(242,234,218,.1); border-color: var(--brass); }
.lb button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lb-close { position: absolute; top: clamp(.75rem,2vw,1.5rem); right: clamp(.75rem,2vw,1.5rem); }

@media (prefers-reduced-motion: reduce) {
  .gal img { transition: none; }
  .gal button:hover img, .gal button:focus-visible img { transform: none; }
}