/* LunarStarr Photography & Design: dark, elegant, with a touch of whimsy. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); }

:root {
    /* Colors taken from the logo: the night sky, the purple moon and the gold star. */
    --bg: #0d0b12;
    --bg-raised: #17141f;
    --text: #ece8f1;
    --muted: #a59fb3;
    --moon: #6b5bb5;
    --moon-light: #a497e6;
    --star: #f2d675;

    --font: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
    --gutter: clamp(16px, 4vw, 48px);
    --row: 240px; /* target height of a row in the photo grids */

    color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.25rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--moon-light); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--star); }
:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 16px; background: var(--bg-raised); color: var(--text); }
.skip-link:focus { left: 8px; }

.muted { color: var(--muted); }

/* ── Navigation ───────────────────────────────────────────────────────────── */

.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; }

.nav a {
    position: relative;
    color: var(--text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .95rem;
    font-weight: 500;
    padding: 6px 0;
}

/* A tiny star twinkles over the current page and on hover. */
.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 9px;
    height: 9px;
    translate: -50% 0;
    background: var(--star);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    opacity: 0;
    scale: .3;
    transition: opacity .3s, scale .3s;
}
.nav a:hover { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { opacity: 1; scale: 1; }

/* ── Inner page header ───────────────────────────────────────────────────── */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    padding: 20px var(--gutter);
    border-bottom: 1px solid #ffffff12;
}
.brand img { height: 58px; width: auto; }

@media (max-width: 640px) {
    .site-header { justify-content: center; }
    .nav { gap: 4px 20px; }
    .nav a { font-size: .85rem; letter-spacing: .15em; }
}

/* ── Homepage slideshow ──────────────────────────────────────────────────── */

.hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: #000; }

.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease-in-out; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.08;
    transition: scale 9s linear;
}
.hero__slide.is-active img { scale: 1; }

/* Darken the middle (for the logo) and fade into the page below. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 40% at 50% 47%, #0d0b12bb, #0d0b1244 70%, transparent 100%),
        linear-gradient(to bottom, #0d0b1255 0%, transparent 25%, transparent 70%, var(--bg) 100%);
    pointer-events: none;
}

.hero__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: var(--gutter);
}
.hero__logo { margin: 0; width: min(88vw, 720px); filter: drop-shadow(0 2px 18px #000c); }
.hero__logo img { width: 100%; height: auto; }
.hero__content .nav a { text-shadow: 0 1px 10px #000; }

.hero__scroll {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 20px;
    translate: -50% 0;
    color: var(--text);
    opacity: .7;
    animation: bob 3s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(6px); } }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section { padding: 56px var(--gutter); max-width: 1600px; margin: 0 auto; }

.section__title, .page-title {
    margin: 0 0 8px;
    text-align: center;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: .01em;
}
.section__title { margin-bottom: 28px; }
.page-sub { margin: 0 0 32px; text-align: center; color: var(--muted); text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; }

.lede { max-width: 40ch; margin: 0 auto 40px; text-align: center; font-size: 1.45rem; font-style: italic; color: var(--muted); }

.prose { max-width: 720px; }
.prose p { margin: 0 0 1.2em; }
.signoff { margin-top: 2em; text-align: center; font-style: italic; font-size: 1.4rem; color: var(--star); }

/* The star divider, which slowly twinkles. */
.star { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 24px; color: var(--star); }
.star::before, .star::after { content: ""; width: 72px; height: 1px; background: linear-gradient(to var(--dir, right), transparent, #f2d67566); }
.star::before { --dir: right; }
.star::after { --dir: left; }
.star svg { fill: currentColor; animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .7; scale: .9; } 50% { opacity: 1; scale: 1.1; } }

/* ── Photo grid (justified: each row the same height, edges flush) ────────── */

.grid { display: flex; flex-wrap: wrap; gap: 8px; }
.grid::after { content: ""; flex-grow: 1000000; } /* keeps the last row from stretching */

.grid__item {
    flex-grow: var(--ratio);
    flex-basis: calc(var(--ratio) * var(--row));
    aspect-ratio: var(--ratio);
    overflow: hidden;
    background: var(--bg-raised);
}
.grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .6s ease, filter .6s ease;
}
.grid__item:hover img { scale: 1.03; filter: brightness(1.08); }

/* Phones: two simple columns, so a lone portrait never takes over a whole row. */
@media (max-width: 640px) {
    .grid { display: block; columns: 2; column-gap: 4px; }
    .grid::after { display: none; }
    .grid__item { display: block; margin-bottom: 4px; break-inside: avoid; }
}

/* ── Gallery cards on the homepage ───────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }

.card { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; color: var(--text); text-decoration: none; background: var(--bg-raised); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s ease; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #0d0b12f0, #0d0b1288 35%, transparent 65%); }
.card:hover { color: var(--text); }
.card:hover img { scale: 1.04; }

.card__text { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 20px; display: flex; flex-direction: column; }
.card__title { font-size: 2.2rem; font-style: italic; line-height: 1.1; }
.card__sub { color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: .85rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
    padding: 40px var(--gutter) 48px;
    text-align: center;
    color: var(--muted);
    font-size: 1rem;
    /* a faint scatter of stars */
    background:
        radial-gradient(1px 1px at 12% 30%, #fff8, transparent),
        radial-gradient(1px 1px at 28% 70%, #fff6, transparent),
        radial-gradient(1.5px 1.5px at 47% 22%, #f2d675aa, transparent),
        radial-gradient(1px 1px at 66% 64%, #fff7, transparent),
        radial-gradient(1px 1px at 83% 35%, #fff5, transparent),
        radial-gradient(1.5px 1.5px at 92% 78%, #a497e6aa, transparent);
}
.site-footer p { margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.social { color: var(--muted); display: inline-flex; }

/* ── Full-screen viewer (PhotoSwipe) ─────────────────────────────────────── */

.pswp { --pswp-bg: #07060a; --pswp-icon-color: var(--text); }

/* ── Respect "reduce motion" ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hero__slide img { scale: 1; }
}