@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;
    --page: #ffffff;
    --page-deep: #ffffff;
    --paper: #1b332c;
    --paper-muted: #637167;
    --ink: #1b332c;
    --ink-muted: #637167;
    --line: rgb(27 51 44 / 18%);
    --line-strong: rgb(27 51 44 / 42%);
    --glass: #ffffff;
    --accent: #177a74;
    --accent-pale: #ffc400;
    --focus: #ffc400;
    --shadow: 8px 8px 0 #ffc400;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background: var(--page);
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
}

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 78px;
    padding: max(14px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 14px max(32px, env(safe-area-inset-left));
    background: var(--glass);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line);
}

.home-button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--paper);
    border-radius: 0;
    box-shadow: 4px 4px 0 #ffc400;
    font-size: 23px;
    line-height: 1;
    transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}

.breadcrumbs {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    color: var(--paper-muted);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .025em;
    white-space: nowrap;
    scrollbar-width: none;
}

.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs a { transition: color 160ms ease; }
.breadcrumbs a:last-child { color: var(--paper); font-weight: 600; }
.separator { color: rgb(43 42 38 / 35%); }

.sorter {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
}

.sorter a {
    min-width: 59px;
    padding: 8px 13px;
    color: var(--paper-muted);
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: center;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.sorter a.active {
    color: #fff;
    background: var(--accent);
    box-shadow: none;
}

.gallery-shell {
    width: min(1680px, 100%);
    margin: 0 auto;
    padding: clamp(46px, 6vw, 96px) max(26px, env(safe-area-inset-right)) 100px max(26px, env(safe-area-inset-left));
}

.section {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 38px;
}

.eyebrow {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 15px;
    color: var(--accent-pale);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 26px;
    height: 1px;
    content: "";
    background: currentColor;
}

h1 {
    max-width: 13ch;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--paper);
    font-family: "Space Grotesk", ui-sans-serif, sans-serif;
    font-size: clamp(46px, 6.5vw, 94px);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -.075em;
    line-height: .86;
}

.counter {
    flex: 0 0 auto;
    margin: 0 0 4px;
    padding: 9px 12px;
    color: var(--paper-muted);
    border: 1px solid var(--line);
    border-radius: 0;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.folder-grid, .media-grid { display: grid; }

.folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px;
    margin: 0 0 60px;
}

.folder-tile {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    gap: 13px;
    align-items: center;
    min-height: 76px;
    padding: 15px;
    --folder-accent: #177a74;
    background: #fff;
    border: 1px solid var(--folder-accent);
    border-left-width: 10px;
    border-radius: 0;
    box-shadow: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.folder-tile::after {
    align-self: center;
    color: var(--folder-accent);
    content: "↗";
    font-family: "Space Grotesk", ui-sans-serif, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.folder-icon {
    position: relative;
    width: 35px;
    height: 25px;
    border: 1px solid currentColor;
    color: var(--folder-accent);
    border-radius: 0;
}

.folder-icon::before {
    position: absolute;
    top: -6px;
    left: 3px;
    width: 15px;
    height: 7px;
    content: "";
    border: 1px solid currentColor;
    border-bottom: 0;
    border-radius: 0;
}

.folder-label {
    min-width: 0;
}

.folder-name {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-family: "Space Grotesk", ui-sans-serif, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-date {
    display: block;
    margin-top: 3px;
    color: var(--folder-accent);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.1;
}

.folder-tile:nth-child(7n + 1) { --folder-accent: #177a74; }
.folder-tile:nth-child(7n + 2) { --folder-accent: #ffc400; }
.folder-tile:nth-child(7n + 3) { --folder-accent: #00a878; }
.folder-tile:nth-child(7n + 4) { --folder-accent: #a3e635; }
.folder-tile:nth-child(7n + 5) { --folder-accent: #b3594b; }
.folder-tile:nth-child(7n + 6) { --folder-accent: #a68585; }
.folder-tile:nth-child(7n + 7) { --folder-accent: #1b1c4f; }

.media-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: clamp(10px, 1.25vw, 20px);
}

.media-tile {
    position: relative;
    display: block;
    grid-column: span 3;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    color: #fff;
    cursor: zoom-in;
    background: #177a74;
    border: 2px solid #1b332c;
    border-radius: 0;
    box-shadow: 7px 7px 0 #ffc400;
    isolation: isolate;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}

.media-tile:nth-child(9n + 1),
.media-tile:nth-child(9n + 6) { grid-column: span 4; }

.media-tile:nth-child(9n + 1) { grid-row: span 2; }

.media-tile img, .video-fallback {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 215px;
    object-fit: cover;
    background: #177a74;
    filter: saturate(.9) contrast(1.03);
    transform: scale(1.002);
    transition: transform 540ms cubic-bezier(.2,.75,.2,1), filter 240ms ease;
}

.media-tile:nth-child(9n + 1) img,
.media-tile:nth-child(9n + 1) .video-fallback { min-height: 450px; }

.media-tile::before {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 13px;
    padding: 5px 7px;
    content: attr(data-number);
    color: #1b332c;
    background: #ffc400;
    border: 1px solid #1b332c;
    border-radius: 0;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: .06em;
}

.media-tile::after { display: none; }

.media-name {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 10px 14px;
    color: #fff;
    background: #177a74;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .015em;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-fallback { display: grid; place-items: center; }

.video-fallback::before,
.play-badge::before {
    width: 0;
    height: 0;
    margin-left: 3px;
    content: "";
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid #fff;
}

.play-badge {
    position: absolute;
    z-index: 3;
    top: 13px;
    right: 13px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    background: #ffc400;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 0;
}

.play-badge::before {
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 11px;
    border-left-color: #1b332c;
}

.empty-state {
    margin: 76px 0;
    padding: 34px;
    color: var(--paper-muted);
    background: #fff;
    border: 1px dashed var(--line-strong);
    border-radius: 0;
    text-align: center;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    grid-template-columns: 78px minmax(0, 1fr) 78px;
    align-items: center;
    min-height: 100dvh;
    padding: max(70px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: #fff;
}

.lightbox.open { display: grid; }

.lightbox-frame {
    display: grid;
    justify-items: center;
    min-width: 0;
    margin: 0;
}

.lightbox img, .lightbox video {
    display: none;
    max-width: 100%;
    max-height: calc(100dvh - 150px);
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 12px 12px 0 #177a74;
}

.lightbox img.active, .lightbox video.active { display: block; }
.lightbox img { touch-action: pinch-zoom; }

.lightbox-close, .lightbox-prev, .lightbox-next {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #1b332c;
    cursor: pointer;
    background: #ffc400;
    border: 2px solid #1b332c;
    border-radius: 0;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.lightbox-close {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    right: max(22px, env(safe-area-inset-right));
    font-size: 29px;
    line-height: 1;
}

.lightbox-prev, .lightbox-next {
    width: 52px;
    height: 66px;
    border-radius: 28px;
    font-size: 42px;
    line-height: .7;
}

#lightboxCaption {
    max-width: min(860px, 92vw);
    margin-top: 16px;
    overflow: hidden;
    color: #1b332c;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) {
    .home-button:hover { color: #fff; background: #177a74; transform: translateY(-2px); }
    .breadcrumbs a:hover { color: var(--accent-pale); }
    .sorter a:not(.active):hover { color: #fff; background: #177a74; }
    .folder-tile:hover { box-shadow: 7px 7px 0 var(--folder-accent); transform: translateY(-3px); }
    .media-tile:hover { z-index: 3; border-color: #1b332c; box-shadow: var(--shadow); transform: translateY(-6px); }
    .media-tile:hover img, .media-tile:hover .video-fallback { filter: saturate(1.06) contrast(1.04); transform: scale(1.055); }
    .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: #1b332c; background: var(--focus); border-color: var(--focus); transform: scale(1.06); }
}

@media (max-width: 980px) {
    .media-tile { grid-column: span 4; }
    .media-tile:nth-child(9n + 1), .media-tile:nth-child(9n + 6) { grid-column: span 6; }
    .media-tile:nth-child(9n + 1) { grid-row: span 1; }
    .media-tile:nth-child(9n + 1) img, .media-tile:nth-child(9n + 1) .video-fallback { min-height: 300px; }
}

@media (max-width: 700px) {
    .topbar {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px 12px;
        min-height: 0;
        padding-right: max(17px, env(safe-area-inset-right));
        padding-left: max(17px, env(safe-area-inset-left));
    }
    .home-button { width: 40px; height: 40px; font-size: 21px; }
    .breadcrumbs { font-size: 12px; }
    .sorter { grid-column: 1 / -1; justify-self: start; }
    .sorter a { min-width: 54px; padding: 7px 11px; }
    .gallery-shell { padding: 48px max(14px, env(safe-area-inset-right)) 72px max(14px, env(safe-area-inset-left)); }
    .section { display: block; margin-bottom: 28px; }
    h1 { font-size: clamp(44px, 15vw, 66px); }
    .counter { display: inline-block; margin-top: 21px; }
    .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
    .folder-tile { grid-template-columns: 28px minmax(0, 1fr) 15px; gap: 8px; min-height: 64px; padding: 11px; border-radius: 0; }
    .folder-icon { width: 28px; height: 20px; }
    .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .media-tile, .media-tile:nth-child(9n + 1), .media-tile:nth-child(9n + 6) { grid-column: auto; grid-row: auto; }
    .media-tile img, .video-fallback, .media-tile:nth-child(9n + 1) img, .media-tile:nth-child(9n + 1) .video-fallback { min-height: 0; aspect-ratio: .86; }
    .media-tile:nth-child(5n + 1) { grid-column: span 2; }
    .media-tile:nth-child(5n + 1) img, .media-tile:nth-child(5n + 1) .video-fallback { aspect-ratio: 1.42; }
    .media-tile { border-radius: 11px; }
    .media-tile::before { top: 9px; left: 9px; }
    .media-name { padding: 26px 11px 10px; font-size: 11px; }
    .lightbox { grid-template-columns: 1fr; padding: max(68px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom)); }
    .lightbox img, .lightbox video { max-height: calc(100dvh - 142px); }
    .lightbox-prev, .lightbox-next { position: absolute; top: 50%; width: 40px; height: 58px; transform: translateY(-50%); }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-close { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}