/* Silma Retreat — photo delivery · Spark X Agency
   The interface stays nearly monochrome; the photographs carry the colour. */

/* The hero's two lines, embedded so they paint at once in their real typeface.
   Subsets from Google Fonts containing only the glyphs used: "Silma Retreat" in Cormorant Light,
   and capital letters A–Z in Montserrat Medium (the subhead and the buttons are all caps).
   Both fonts: SIL Open Font License 1.1 — Cormorant © The Cormorant Project Authors,
   Montserrat © The Montserrat Project Authors. */
@font-face {
  font-family: "Silma Title";
  font-weight: 300;
  font-display: block;
  src: url("data:font/woff2;base64,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") format("woff2");
  unicode-range: U+20, U+52-53, U+61, U+65, U+69, U+6C-6D, U+72, U+74;
}

@font-face {
  font-family: "Silma Caps";
  font-weight: 500;
  font-display: block;
  src: url("data:font/woff2;base64,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") format("woff2");
  unicode-range: U+20, U+2D, U+41-5A;
}

:root {
  --bg: #0e0e0c;
  --bg-raised: #161613;
  --fg: #ece8e1;
  --fg-soft: rgba(236, 232, 225, 0.8);
  --muted: rgba(236, 232, 225, 0.54);         /* the quietest text that still reads (≈5:1) */
  --line: rgba(236, 232, 225, 0.28);

  --serif: "Cormorant", "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Montserrat", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* One easing curve for everything; a softer in-out only for the scroll cue's slow draw. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-draw: cubic-bezier(0.55, 0, 0.25, 1);
  --ease-drift: cubic-bezier(0.45, 0, 0.55, 1);   /* the hero's slow zoom: even in, even out */

  --gutter: clamp(20px, 6vw, 96px);
  --max: 1320px;                              /* keep in sync with MAX in script.js */
  --section-gap: clamp(72px, 9vw, 150px);     /* before the gallery, and before the film */
  --seam: 3px;                                /* the line between photographs — 0 for none at all */
}

/* ── base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; -webkit-tap-highlight-color: transparent; }

::selection { background: rgba(236, 232, 225, 0.2); }

:focus-visible { outline: 1px solid var(--fg); outline-offset: 5px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  /* Pinned behind the page: the gallery scrolls up over it while it fades (script.js). */
  position: sticky;
  top: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  background: var(--bg);
}

.hero.is-passed { pointer-events: none; }

main,
.credit { position: relative; z-index: 1; }

.hero__bg,
.hero__bg picture,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__bg { background: var(--bg-raised); }
.hero__bg img { object-fit: cover; object-position: 50% 50%; }

/* A slow push-in on the photograph — just enough to feel alive — then a drift back.
   Pauses once the hero has faded out of view. */
.hero__bg img {
  transform-origin: 50% 60%;
  animation: hero-drift 20s var(--ease-drift) infinite alternate both;
}

.hero.is-gone .hero__bg img { animation-play-state: paused; }

@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Darkens the top and bottom so the type holds over any frame, and lets the
   bottom edge settle into the page rather than stopping hard. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(14, 14, 12, 0.5) 0%,
    rgba(14, 14, 12, 0.14) 24%,
    rgba(14, 14, 12, 0.1) 50%,
    rgba(14, 14, 12, 0.22) 72%,
    rgba(14, 14, 12, 0.82) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter);
}

.hero__title {
  margin: 0;
  font-family: "Silma Title", var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
  animation: hero-in 1.8s var(--ease) 0.1s both;
}

.hero__sub {
  margin: 1.9em 0 0;
  padding-left: 0.36em; /* re-centres the tracked capitals optically */
  font-family: "Silma Caps", var(--sans);
  font-size: clamp(0.64rem, 0.6rem + 0.22vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-soft);
  animation: hero-in 1.8s var(--ease) 0.35s both;
}

/* Starts at 0.01, not 0: Chrome ignores text first painted fully transparent when measuring
   LCP, and the full-bleed hero image doesn't count either — so the title is the LCP. */
@keyframes hero-in {
  from { opacity: 0.01; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-in-still {
  from { opacity: 0.01; }
  to   { opacity: 1; }
}

/* Scroll cue — a hairline that draws downward, fades, rests, and goes again. */
.cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(env(safe-area-inset-bottom), clamp(20px, 4.5vh, 44px));
  display: flex;
  justify-content: center;
  width: 48px;
  margin-left: -24px;
  padding: 12px 0;
}

.cue__line {
  position: relative;
  display: block;
  animation: fade-in 1.6s var(--ease) 1.1s both;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(236, 232, 225, 0.12);
}

.cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(236, 232, 225, 0), rgba(236, 232, 225, 0.9));
  transform: scaleY(0);
  transform-origin: 50% 0;
  animation: cue-draw 5.2s var(--ease-draw) 1.8s infinite;
}

@keyframes cue-draw {
  0%   { transform: scaleY(0); opacity: 1; }
  36%  { transform: scaleY(1); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── gallery ──────────────────────────────────────────────────────────── */

/* A seamless mosaic: full-width rows, photographs side by side at a shared height
   (each grows in proportion to its aspect ratio), a hairline seam between. */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--seam);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: 0 auto;
  padding-top: var(--section-gap);
}

.row {
  display: flex;
  gap: var(--seam);
}

.row .shot { flex: var(--ar) 1 0%; min-width: 0; }

/* ── a photograph ─────────────────────────────────────────────────────── */

.shot,
.film__frame {
  position: relative;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 1.1s var(--ease) var(--delay, 0ms),
    transform 1.1s var(--ease) var(--delay, 0ms);
}

.shot.is-in,
.film__frame.is-in { opacity: 1; transform: none; }

.shot__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: var(--bg-raised);
}

/* The 20px placeholder, blown up and softened, until the real image arrives. */
.shot__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px);
  transform: scale(1.12);
}

.shot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity 0.9s var(--ease),
    transform 0.6s var(--ease),
    filter 0.6s var(--ease);
}

.shot.is-loaded .shot__img { opacity: 1; }

/* While the lightbox copy flies to or from it. Opacity, not visibility, so it can still take focus. */
.shot__frame.is-hidden { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .shot__frame { cursor: zoom-in; }
  .shot__frame:hover .shot__img { transform: scale(1.03); filter: brightness(1.05); }
}

/* ── film ─────────────────────────────────────────────────────────────── */

.film {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: var(--section-gap) auto 0;
}

.film__frame {
  display: grid;
  place-items: center;
  width: min(100%, calc(86vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg-raised);
}

/* A soft wash of the hero's colours — a hint of what's coming, not a picture. */
.film__poster {
  position: absolute;
  inset: -10%;
  background: center / cover no-repeat;
  filter: blur(42px) saturate(1.1);
  opacity: 0.72;
}

.film__note {
  position: relative;
  padding: 0 var(--gutter);
  text-align: center;
}

.film__mark {
  display: block;
  width: clamp(44px, 4.5vw, 60px);
  height: auto;
  margin: 0 auto;
  fill: none;
  stroke: var(--fg-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.film__mark * { vector-effect: non-scaling-stroke; }

.film__text {
  margin: 1.9em 0 0;
  padding-left: 0.36em; /* re-centres the tracked capitals optically */
  font-family: "Silma Caps", var(--sans);
  font-size: clamp(0.64rem, 0.6rem + 0.22vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.film__frame.is-playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── closing ──────────────────────────────────────────────────────────── */

.closing {
  padding: clamp(160px, 24vh, 280px) var(--gutter) 0;
  text-align: center;
}

.download {
  display: inline-block;
  padding: 1.35em 2.6em;
  border: 1px solid var(--line);
  font-family: "Silma Caps", var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  transition:
    border-color 0.6s var(--ease),
    background-color 0.6s var(--ease);
}

.download:hover {
  border-color: rgba(236, 232, 225, 0.72);
  background-color: rgba(236, 232, 225, 0.035);
}

/* The same button in the hero: transparent over the photograph, a slightly firmer line,
   arriving just after the title and leaving with it on scroll. */
.download--hero {
  margin-top: clamp(2.2rem, 5.5vh, 3.6rem);
  border-color: rgba(236, 232, 225, 0.55);
  animation: hero-in 1.8s var(--ease) 0.6s both;
}

.download--hero:hover {
  border-color: rgba(236, 232, 225, 0.95);
  background-color: rgba(236, 232, 225, 0.08);
}

/* Short screens (a phone on its side): no room for the scroll cue under the button. */
@media (max-height: 520px) {
  .cue { display: none; }
}

.credit {
  padding: clamp(96px, 16vh, 180px) var(--gutter) max(env(safe-area-inset-bottom), clamp(32px, 6vh, 56px));
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.credit a {
  text-decoration: none;
  transition: color 0.6s var(--ease);
}

.credit a:hover { color: var(--fg-soft); }

/* ── lightbox ─────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  cursor: zoom-out;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: #080807;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}

.lightbox__slot {
  position: absolute;
  overflow: hidden;
  transform-origin: 0 0;
}

.lightbox__slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox__low.is-blurred { filter: blur(18px); transform: scale(1.12); }
.lightbox__hi { opacity: 0; transition: opacity 0.5s var(--ease); }
.lightbox__hi.is-loaded { opacity: 1; }

.lightbox__ui {
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}

.lightbox.is-open .lightbox__backdrop,
.lightbox.is-open .lightbox__ui { opacity: 1; }

.lightbox__btn {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--fg-soft);
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease);
}

.lightbox__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: square;
}

.lightbox__btn:hover { color: var(--fg); }
.lightbox__btn[hidden] { display: none; }

.lightbox__close { top: max(env(safe-area-inset-top), 14px); right: max(env(safe-area-inset-right), 14px); }
.lightbox__prev  { top: 50%; left: max(env(safe-area-inset-left), 14px); margin-top: -26px; }
.lightbox__next  { top: 50%; right: max(env(safe-area-inset-right), 14px); margin-top: -26px; }

.lightbox__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(env(safe-area-inset-bottom), 22px);
  margin: 0;
  font-size: 0.64rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}

/* Portrait screens: the title sits up in the sky, clear of the building. */
@media (max-aspect-ratio: 4/5) {
  .hero { align-items: start; }
  .hero__content { padding-top: 17vh; padding-top: 17svh; }
}

/* ── phones: the mosaic and the film run edge to edge ─────────────────── */

@media (max-width: 719px) {
  :root {
    --section-gap: 64px;
    --seam: 2px;
  }

  .gallery,
  .film { width: 100%; }

  .download {
    padding: 1.3em 1.4em;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-wrap: balance;
  }

  .lightbox__prev,
  .lightbox__next { top: auto; bottom: max(env(safe-area-inset-bottom), 8px); margin-top: 0; }
  .lightbox__count { bottom: max(env(safe-area-inset-bottom), 26px); }
}

/* ── reduced motion: opacity only, the cue holds still ────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__sub,
  .download--hero { animation-name: hero-in-still; }

  .cue__line::after { animation: none; transform: none; opacity: 0.55; }

  .hero__bg img { animation: none; }

  .shot,
  .film__frame { transform: none; }

  .shot__img { transition: opacity 0.9s var(--ease); }
  .shot__frame:hover .shot__img { transform: none; filter: none; }
}