.yarl__fullsize{width:100%;height:100%}.yarl__relative{position:relative}.yarl__portal{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;overflow:hidden;z-index:var(--yarl__portal_zindex,9999);transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);pointer-events:auto}.yarl__portal_open{opacity:1}.yarl__container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:var(--yarl__controller_touch_action,none);overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain)}.yarl__carousel{display:flex;flex:0 0 auto;height:100%;align-content:center;justify-content:center;align-items:stretch;width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%));transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));opacity:var(--yarl__pull_opacity,1)}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{display:flex;justify-content:center;align-content:center;align-items:center}.yarl__slide{flex:1;position:relative;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%)}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);line-height:0}.yarl__slide_loading{color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));animation:yarl__delayed_fadein 1s linear}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{width:var(--yarl__slide_icon_error_size,48px);height:var(--yarl__slide_icon_error_size,48px);color:var(--yarl__slide_icon_error_color,red)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{position:absolute;top:0;right:0;bottom:auto;left:auto;display:flex;justify-content:flex-end;padding:var(--yarl__toolbar_padding,8px)}[dir=rtl] .yarl__toolbar{top:0;right:auto;bottom:auto;left:0}.yarl__icon{width:var(--yarl__icon_size,32px);height:var(--yarl__icon_size,32px)}.yarl__button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);margin:var(--yarl__button_margin,0);outline:none;line-height:0;padding:var(--yarl__button_padding,8px);color:var(--yarl__color_button,hsla(0,0%,100%,.8));filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{position:absolute;top:50%;transform:translateY(-50%);padding:var(--yarl__navigation_button_padding,24px 16px)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}.yarl__slide_captions_container{position:absolute;left:var(--yarl__slide_captions_container_left,0);right:var(--yarl__slide_captions_container_right,0);padding:var(--yarl__slide_captions_container_padding,16px);background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{overflow:hidden;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);text-align:var(--yarl__slide_description_text_align,start);color:var(--yarl__slide_description_color,#fff)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}.yarl__counter{position:var(--yarl__counter_position,absolute);top:var(--yarl__counter_top,0);left:var(--yarl__counter_left,0);bottom:var(--yarl__counter_bottom,unset);right:var(--yarl__counter_right,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));-webkit-user-select:var(--yarl__counter_user_select,none);-moz-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}[dir=rtl] .yarl__counter{left:var(--yarl__counter_rtl_left,unset);right:var(--yarl__counter_rtl_right,0)}.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{flex:0 0 auto;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));padding:var(--yarl__thumbnails_container_padding,16px);position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__thumbnails_vignette{position:absolute;pointer-events:none;--yarl__thumbnails_vignette_size:12%}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{height:100%;left:0;right:0;background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{width:100%;top:0;bottom:0;background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_track{outline:none;gap:var(--yarl__thumbnails_thumbnail_gap,16px)}.yarl__thumbnails_thumbnail{flex:0 0 auto;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-width:var(--yarl__thumbnails_thumbnail_border,1px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);outline:none;width:var(--yarl__thumbnails_thumbnail_width,120px);height:var(--yarl__thumbnails_thumbnail_height,80px);box-sizing:content-box}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{opacity:0;animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{visibility:hidden;cursor:unset}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px);height:var(--yarl__thumbnails_thumbnail_icon_size,32px)}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}.yarl__toolbar .yarl__button[title="Zoom in"],
.yarl__toolbar .yarl__button[title="Zoom out"] {
    display: none !important;
}

.yarl__navigation_next, .yarl__navigation_prev {
    visibility: hidden !important;
}

/* The overlay itself is fully transparent: the background is the
   .lightbox-backdrop layer below (current photo hyper-blurred) */
.yarl__root {
    --yarl__color_backdrop: transparent;
}

/* Ambient backdrop: fullscreen blurred thumbnail of the current photo under
   a dark overlay, sitting just below the yarl portal (z-index 9999) */
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: #0b0c0b;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.lightbox-backdrop.shown {
    opacity: 1;
    visibility: visible;
}

.lightbox-backdrop img {
    position: absolute;
    /* Oversized so the blur never reveals fading edges */
    inset: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    /* The src is the tiny 24px placeholder, so upscaling does most of the
       smoothing; a modest radius is enough and much cheaper to rasterize
       than the old blur(64px) over a real thumbnail */
    filter: blur(32px) saturate(120%) brightness(0.6);
    opacity: 0;
    will-change: opacity;
    animation: lightbox-backdrop-fade 0.5s ease forwards;
}

@keyframes lightbox-backdrop-fade {
    to {
        opacity: 1;
    }
}

/* Dark overlay on top of the blurred photo */
.lightbox-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(11, 12, 11, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-backdrop {
        transition: none;
    }

    .lightbox-backdrop img {
        animation: none;
        opacity: 1;
    }
}

/* Blur-up under the fullsize slide: base64 placeholder (instant) with the
   thumbnail stacked on top, both hyper-blurred, fading out once the real
   image has loaded. Padding mirrors .yarl__slide so the contained blurred
   layer lines up with where the fullsize image will appear. */
.slide-blur-up {
    position: absolute;
    inset: 0;
    padding: calc(
        var(--yarl__carousel_padding_px, 0) * 1px + 100 /
            (
                var(--yarl__carousel_slides_count) * 100 +
                    (var(--yarl__carousel_slides_count) - 1) *
                    var(--yarl__carousel_spacing_percent, 0)
            ) * var(--yarl__carousel_padding_percent, 0) * 1%
    );
    display: grid;
    /* Definite 100% tracks: with auto tracks the imgs' height:100% would
       resolve to auto and overflow the slide */
    grid-template: 100% / 100%;
    pointer-events: none;
    /* Blur the stack as a group: one rasterization per slide instead of one
       per stacked image */
    filter: blur(32px) saturate(115%);
    transition: opacity 0.4s ease;
}

.slide-blur-up.hidden {
    opacity: 0;
}

.slide-blur-up img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Soften the fullsize image swap over the blurred placeholder */
.yarl__slide_image {
    transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .slide-blur-up,
    .yarl__slide_image {
        transition: none;
    }
}

/* Frosted round toolbar buttons (info, share, close) */
.yarl__toolbar {
    padding: 14px;
    gap: 10px;
}

.yarl__toolbar .yarl__button {
    width: 44px;
    height: 44px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(236, 233, 226, 0.08);
    border: 1px solid rgba(236, 233, 226, 0.22);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, color 0.2s ease,
        background-color 0.2s ease, transform 0.15s ease;
}

/* Press feedback (the only feedback touch devices get, where :hover is inert) */
.yarl__toolbar .yarl__button:active {
    transform: scale(0.88);
    border-color: rgba(201, 168, 106, 0.7);
    background: rgba(236, 233, 226, 0.16);
}

/* Pointer devices only: on touch a tap would leave the hover style stuck */
@media (hover: hover) {
    .yarl__toolbar .yarl__button:hover {
        border-color: rgba(201, 168, 106, 0.7);
        background: rgba(236, 233, 226, 0.14);
        color: #c9a86a;
    }
}

/* Captions: no black bars, just text with a shadow (plus a soft gradient
   under the description for legibility). Everything — title included —
   lives in the bottom description block. */
.yarl__slide_captions_container {
    background: none;
}

.yarl__slide_description_container {
    /* Right padding reserves room for the counter pinned to the bottom-right
       corner, so long caption lines wrap instead of running under it */
    padding: 44px 96px 16px 22px;
    /* Tall black scrim fading upward, so the caption stays readable over
       bright/busy photos */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88),
        rgba(0, 0, 0, 0.6) 55%,
        rgba(0, 0, 0, 0.25) 80%,
        transparent
    );
}

.yarl__slide_description {
    /* No line limit: undo the plugin's -webkit-box line clamp (default 3) */
    display: block;
    -webkit-line-clamp: unset;
    /* The plugin hyphenates ("uc-cello"); prose lines are short enough not to */
    hyphens: none;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #cfccc4;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Caption blocks: photo title, species name (italic serif), free-text
   description, and the EXIF shooting-data line */
.caption-title {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.25;
    color: #ece9e2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.8);
}

.caption-species {
    display: block;
    margin-top: 2px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: #ece9e2;
    opacity: 0.85;
}

.caption-text {
    display: block;
    margin-top: 6px;
    /* Personal notes can run long: keep prose lines readable */
    max-width: 62ch;
}

.caption-exif {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #a8a49a;
}

/* Feedback pill for the share button (clipboard copy) */
.share-toast {
    position: fixed;
    left: 50%;
    bottom: 116px;
    transform: translate(-50%, 8px);
    z-index: 10001;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(19, 21, 19, 0.85);
    border: 1px solid rgba(236, 233, 226, 0.18);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    color: #ece9e2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.share-toast.shown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.yarl__counter {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #cfccc4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Filmstrip: dimmed thumbnails, gold border on the active one.
   The container is fixed-width (5 thumbnails) with the edge fade on it,
   not on the track: the track slides during navigation, so a mask on it
   would drag the fade along and snap back — this way the strip scrolls
   under a stationary fade, like a conveyor belt. */
.yarl__thumbnails_container {
    width: 530px; /* 5 × (96px + 2px border) + 4 × 10px gap */
    max-width: 100%;
    margin-inline: auto;
    padding: 14px 0 30px;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 15%,
        black 85%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 15%,
        black 85%,
        transparent
    );
}

/* The slide is a WAAPI transform animation: promoting the track to its own
   compositor layer keeps it smooth while the main thread decodes the
   freshly-changed full-size photo */
.yarl__thumbnails_track {
    will-change: transform;
}

/* The plugin's enter/leave keyframes end at full opacity; ours must end at
   the dimmed resting opacity or the new thumbnail pops from 1 to 0.45 */
@keyframes yarl__thumbnails_thumbnail_fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.45;
    }
}

@keyframes yarl__thumbnails_thumbnail_fadeout {
    from {
        opacity: 0.45;
    }
    to {
        opacity: 0;
    }
}

.yarl__thumbnails_thumbnail {
    --yarl__thumbnails_thumbnail_border_color: rgba(236, 233, 226, 0.18);
    --yarl__thumbnails_thumbnail_active_border_color: #c9a86a;
    border-radius: 6px;
    background: #131513;
    opacity: 0.45;
    transition: opacity 0.25s ease, border-color 0.25s ease;
}

.yarl__thumbnails_thumbnail_active {
    opacity: 1;
}

@media (hover: hover) {
    .yarl__thumbnails_thumbnail:hover {
        opacity: 1;
    }
}

/* Smaller thumbnails on phones (element-level vars win over the inline
   ones the plugin sets on the container) */
@media (max-width: 640px) {
    .yarl__thumbnails_container {
        width: 402px; /* 5 × (72px + 2px border) + 4 × 8px gap */
        padding: 10px 0 24px;
    }

    .yarl__thumbnails_track {
        --yarl__thumbnails_thumbnail_gap: 8px;
    }

    .yarl__thumbnails_thumbnail {
        --yarl__thumbnails_thumbnail_width: 72px;
        --yarl__thumbnails_thumbnail_height: 48px;
    }
}
/* ---------- Self-hosted fonts (latin subset, variable weight files) ---------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0b0c0b;
  --surface: #131513;
  --text: #ece9e2;
  --muted: #a8a49a;
  --accent: #c9a86a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Replace the default blue mobile tap flash with an accent-tinted one
     (the property is inherited, so this covers every tappable element) */
  -webkit-tap-highlight-color: rgba(201, 168, 106, 0.15);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

button:focus-visible,
.gallery-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Shared typography ---------- */

.overline {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.15;
  margin: 0 0 18px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  animation: hero-drift 18s ease-out forwards;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-bg.loaded {
  opacity: 1;
}

.hero-bg-placeholder {
  opacity: 1;
  filter: blur(24px);
  animation: none;
  transform: scale(1.1);
}

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

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 40% at 50% 52%,
      rgba(11, 12, 11, 0.2),
      transparent 75%
    ),
    linear-gradient(
      to bottom,
      rgba(11, 12, 11, 0.55) 0%,
      rgba(11, 12, 11, 0.15) 18%,
      rgba(11, 12, 11, 0.08) 40%,
      rgba(11, 12, 11, 0.18) 80%,
      rgba(11, 12, 11, 0.5) 93%,
      var(--bg) 100%
    );
}

.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 26px clamp(20px, 4vw, 56px);
}

.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
}

.nav-links button {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 6px rgba(0, 0, 0, 0.95), 0 4px 18px rgba(0, 0, 0, 0.9);
  transition: color 0.2s ease;
}

.nav-links button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links button:focus-visible::after {
  transform: scaleX(1);
}

/* Hover styles only on devices with a real pointer: on touch screens a tap
   would leave them stuck on after the click */
@media (hover: hover) {
  .nav-links button:hover::after {
    transform: scaleX(1);
  }

  .nav-links button:hover {
    opacity: 1;
    color: var(--accent);
  }
}

.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(236, 233, 226, 0.08);
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}

/* Background + blur live on a pseudo-element, not on the nav itself: Android
   Chromium stops rendering backdrop-filter on the element that carries the
   slide-in transform transition (crbug 1194050), leaving the bar see-through */
.sticky-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(11, 12, 11, 0.82),
    rgba(11, 12, 11, 0.55)
  );
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.sticky-nav.shown {
  transform: none;
}

/* Reading-progress hairline along the bottom edge of the sticky nav */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(201, 168, 106, 0.35),
    var(--accent)
  );
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

.sticky-nav .nav-links button {
  text-shadow: none;
}

.sticky-brand {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .sticky-brand:hover {
    color: var(--accent);
  }
}

/* ---------- Mobile hamburger + drawer ---------- */

/* Hidden on desktop; the max-width: 600px block swaps it in for .nav-links */
.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin: -8px -10px;
}

.nav-burger span {
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
}

/* Over the hero photo the lines need a shadow, like the text links */
.nav .nav-burger span {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7);
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-drawer-root.open .nav-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Horizontal glass sheet sliding down from the top edge */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  padding: 10px 28px 30px;
  background: linear-gradient(
    to bottom,
    rgba(11, 12, 11, 0.72),
    rgba(11, 12, 11, 0.45)
  );
  border-bottom: 1px solid rgba(236, 233, 226, 0.12);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}

.nav-drawer-root.open .nav-drawer {
  transform: none;
}

.nav-drawer-close {
  align-self: flex-end;
  width: 42px;
  height: 42px;
  margin-right: -14px;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .nav-drawer-close:hover {
    color: var(--text);
  }
}

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}

.nav-drawer-links button {
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px 60px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.hero-content.visible {
  opacity: 1;
  transform: none;
}

.hero-content h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 8vw, 92px);
  line-height: 1.05;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 4px 14px rgba(0, 0, 0, 0.85), 0 8px 50px rgba(0, 0, 0, 0.9);
}

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--text);
  opacity: 0.9;
  max-width: 560px;
  margin: 18px 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 24px rgba(0, 0, 0, 0.85);
}

.hero-content .overline {
  font-size: clamp(14px, 1.5vw, 18px);
  margin: 16px 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 34px rgba(0, 0, 0, 0.9);
}

/* ---------- Sections ---------- */

.section {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 56px) 0;
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(36px, 5vw, 64px);
}

.section-header .section-title {
  margin-bottom: 0;
}

.section-header .section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--accent);
  opacity: 0.8;
  margin: 18px auto 0;
}

.section-sub {
  color: var(--muted);
  font-size: 15px;
  margin: 14px 0 0;
}

/* ---------- Gallery ---------- */

.gallery-grid {
  column-count: 3;
  column-gap: 14px;
}

.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-item.shown {
  opacity: 1;
  transform: none;
}

.gallery-item {
  position: relative;
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
}

.gallery-item img {
  /* Positioned so it always paints above the absolutely-positioned blur
     placeholder, even once the load transform settles to none */
  position: relative;
  width: 100%;
  /* Keep height derived from the width/height attributes' aspect ratio, so
     unloaded lazy images already reserve their final space */
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.7s ease, transform 0.6s ease;
}

.gallery-item img.loaded {
  opacity: 1;
  transform: none;
}

/* Tiny inline blur-up placeholder: fills the space the width/height
   attributes reserve, covered when the thumbnail fades in on top */
.gallery-item img.gallery-placeholder {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: blur(16px);
  transform: scale(1.08);
  opacity: 1;
  transition: none;
}

/* Pointer devices only: on touch a tap would leave the hover zoom stuck */
@media (hover: hover) {
  .gallery-item:hover img.loaded {
    transform: scale(1.045);
  }
}

.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 72px 16px 14px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.22) 55%,
    transparent 95%
  );
  z-index: 2;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.gallery-caption-species {
  display: block;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(236, 233, 226, 0.75);
}

/* Progressive blur in two stacked layers — a soft tall one and a stronger
   short one — each fading out with its own mask, so the blur eases in
   gradually instead of starting at a visible edge. They live on the item
   (not inside the fading caption) and carry will-change because Chromium
   renders a black backdrop for the first frames when it has to create the
   backdrop-filter surface mid-hover. */
.gallery-item::before,
.gallery-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(150px, 62%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

.gallery-item::before {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to top, black 45%, transparent 92%);
  -webkit-mask-image: linear-gradient(to top, black 45%, transparent 92%);
}

.gallery-item::after {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(to top, black 18%, transparent 58%);
  -webkit-mask-image: linear-gradient(to top, black 18%, transparent 58%);
}

/* Pointer devices only: on touch the tapped item kept its :hover state after
   closing the lightbox, leaving the caption stuck on */
@media (hover: hover) {
  .gallery-item:hover::before,
  .gallery-item:hover::after {
    opacity: 1;
  }

  .gallery-item:hover .gallery-caption {
    opacity: 1;
    transform: none;
  }
}

.gallery-item:focus-visible::before,
.gallery-item:focus-visible::after {
  opacity: 1;
}

.gallery-item:focus-visible .gallery-caption {
  opacity: 1;
  transform: none;
}

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  max-width: 1100px;
}

.about-photo {
  position: relative;
}

.about-photo img,
.about-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.about-photo::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  opacity: 0.5;
  pointer-events: none;
}

.about-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 64px;
  letter-spacing: 0.1em;
}

.about-text p {
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 60ch;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.shown {
  opacity: 1;
  transform: none;
}

/* ---------- Contacts ---------- */

.contacts {
  text-align: center;
}

.contacts .section-header {
  margin-bottom: 28px;
}

.contacts-email {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vw, 34px);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 106, 0.45);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .contacts-email:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
}

.contacts-email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- Footer ---------- */

.footer {
  text-align: center;
  padding: clamp(70px, 9vw, 120px) 24px 40px;
  color: var(--muted);
  font-size: 12.5px;
}

.footer-mark {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--text);
  margin: 0;
}

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.footer p {
  margin: 0;
}

.footer .footer-legal {
  margin-top: 10px;
}

.footer-legal a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 164, 154, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .footer-legal a:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
}

/* ---------- Legal pages (privacy / cookie policy) ---------- */

.policy {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(90px, 12vw, 140px) 24px 40px;
}

.policy-back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 34px;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .policy-back:hover {
    color: var(--accent);
  }
}

.policy-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1;
  margin: 0 0 6px;
}

.policy-updated {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 36px;
}

.policy h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  margin: 34px 0 8px;
}

.policy p {
  margin: 0 0 14px;
  color: var(--muted);
}

.policy a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 106, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .policy a:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .gallery-grid {
    column-count: 2;
  }

  .about {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }

  .about-photo {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* Tighter vertical rhythm: shorter hero, less air around section headers */
  .section {
    padding-top: 40px;
  }

  .section-header {
    margin-bottom: 26px;
  }

  .gallery-grid {
    column-gap: 8px;
  }

  .gallery-item {
    margin-bottom: 8px;
    border-radius: 4px;
  }

  .gallery-caption {
    font-size: 15px;
    padding: 48px 10px 10px;
  }

  .hero {
    min-height: 62vh;
  }

  /* Collapse the text links into the hamburger, in both navs */
  .nav-links {
    display: none;
  }

  .nav-burger {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-bg {
    animation: none;
  }

  .reveal,
  .reveal-item,
  .hero-content,
  .sticky-nav,
  .nav-links button::after,
  .gallery-item::before,
  .gallery-item::after,
  .gallery-item img,
  .nav-drawer,
  .nav-drawer-backdrop {
    transition: none;
  }
}