/* Lavinia Marie-Rose — site styles (Editorial direction)
   Colors and type are defined once here; change them in one place. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Nav links glide to their section instead of jumping (fallback when the
   Lenis script isn't running), and the scrollbar's space stays reserved
   even while it's hidden, so opening the lightbox never shifts the page. */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* When Lenis smooth-scrolling is active it drives all gliding itself. */
html.lenis { scroll-behavior: auto; }
/* Lenis pauses scrolling with `overflow: clip`, which would drop the
   reserved scrollbar space — use `hidden` instead to keep it. */
html.lenis.lenis-stopped { overflow: hidden; }

/* Visitors who've asked their system for less motion get none of the
   gliding or pop animations. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
}

:root {
  --bg: #0a0a0c;          /* page background, near-black */
  --ink: #c8c5be;         /* body text */
  --ink-bright: #f0ede6;  /* name, hovered links */
  --ink-dim: #a6a299;     /* quiet links, subtitle */
  --ink-faint: #8a867e;   /* footer */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;       /* the light (300) weight is too thin to read
                             at small sizes on a dark background */
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- masthead ---------- */

header {
  text-align: center;
  padding: 64px 24px 20px;
}

.name {
  color: var(--ink-bright);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}
.name a {
  color: inherit;
  text-decoration: none;
}

.sub {
  margin-top: 10px;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 17px;
  letter-spacing: 0.04em;
}

nav {
  text-align: center;
  padding: 6px 0 72px;
}
nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-style: italic;
  font-size: 17px;
}
nav a:hover { color: var(--ink-bright); }
nav a + a::before {
  content: "\00b7";            /* a small dot between nav links */
  color: var(--ink-faint);
  margin: 0 14px;
  font-style: normal;
}

/* ---------- gallery ---------- */

.section-title {
  text-align: center;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-dim);
  font-size: 18px;
  letter-spacing: 0.06em;
  padding: 26px 0 34px;
  scroll-margin-top: 26px;      /* breathing room when a nav link jumps here */
}
.section-title:first-child { padding-top: 0; }

.flow {
  columns: 3 320px;
  column-gap: 28px;
  padding: 0 56px;
  max-width: 1400px;
  margin: 0 auto;
}
.flow a {
  display: block;
  break-inside: avoid;
  margin-bottom: 28px;
  cursor: zoom-in;
}
.flow img {
  width: 100%;
  display: block;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.flow a:hover img { opacity: 1; }

/* A photo marked "big-" in its filename: full-width block above/between
   the columns, centered, noticeably larger than the column photos. */
.feature {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 56px 28px;
}
.feature a {
  display: block;
  cursor: zoom-in;
}
.feature img {
  width: 100%;
  display: block;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.feature a:hover img { opacity: 1; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  /* A lighter tint plus backdrop-filter: the gallery stays faintly
     visible behind the open photo, softened to a frosted blur. */
  background: rgba(8, 8, 10, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: none;
  z-index: 10;
}
.lightbox.open { display: block; animation: lightbox-fade 0.22s ease-out; }
.lightbox.open figure {
  /* The slight overshoot at the end of this curve is the "pop". */
  animation: lightbox-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.12);
}

/* Closing plays the pop backwards. These must be differently-NAMED
   animations (not the opening ones reversed): browsers only restart an
   animation when its name changes, so reusing the opening names plays
   nothing at all. gallery.js hides the lightbox when these finish. */
.lightbox.closing { display: block; animation: lightbox-fade-out 0.22s ease-in forwards; }
.lightbox.closing figure {
  animation: lightbox-pop-out 0.22s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes lightbox-fade {
  from { opacity: 0; }
}
@keyframes lightbox-pop {
  from { opacity: 0; transform: scale(0.94); }
}
@keyframes lightbox-fade-out {
  to { opacity: 0; }
}
@keyframes lightbox-pop-out {
  to { opacity: 0; transform: scale(0.94); }
}

.lightbox figure {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  display: block;
}
.lightbox figcaption {
  margin-top: 14px;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 17px;
}

.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 30px;
  font-weight: 300;
  cursor: pointer;
  padding: 18px;
  line-height: 1;
  z-index: 11;
}
.lightbox button:hover { color: var(--ink-bright); }
.lightbox .close { top: 12px; right: 16px; }
.lightbox .prev  { left: 6px;  top: 50%; transform: translateY(-50%); }
.lightbox .next  { right: 6px; top: 50%; transform: translateY(-50%); }

/* ---------- about page ---------- */

.about {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px 80px;
  text-align: center;
}
.about p { margin-bottom: 1.2em; }
.about a {
  color: var(--ink-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}
.about a:hover { border-bottom-color: var(--ink-bright); }

/* ---------- footer ---------- */

footer {
  text-align: center;
  padding: 80px 24px 48px;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 16px;
}
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--ink-bright); }

/* ---------- small screens ---------- */

@media (max-width: 700px) {
  header { padding-top: 44px; }
  .name { font-size: 18px; }
  .flow { padding: 0 16px; }              /* becomes a single column on phones
                                             automatically via `columns` */
  .feature { padding: 0 16px 28px; }
  .lightbox figure { padding: 40px 8px 56px; }
  .lightbox .prev, .lightbox .next { display: none; }  /* swipe instead */
}