/* PhotoHost — Plan 36 P7: "Futuristic" design.
   45° structure: the homepage hero joins two pickable photos along a true
   45° cut so they read as one image; the same diagonal recurs as corner
   cuts on tiles, covers and buttons, with Space Grotesk display type set
   in tracked uppercase. Like a layout, a design owns structure only —
   colors stay with the user's theme/atmosphere (--bg/--text/--accent). */

@font-face {
    font-family: 'Space Grotesk';
    src: url('/static/fonts/space-grotesk-500-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.design-futuristic {
    --d-font-display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
    /* Depth of the 45° corner cuts; the cut edges run parallel to the
       hero seam (top-right → bottom-left). */
    --fut-cut: 14px;
}

/* ── Split hero/cover: two photos joined on a true 45° diagonal ───────────
   Used by the homepage hero (P7) and album/gallery covers (P7b) — all
   100dvh sections. The cut passes through the center; ±50dvh of horizontal
   offset over 100dvh of height = 45° exactly, at any viewport size. A 3px
   gap between the two polygons lets the page background show through as a
   crisp seam, so the join reads as a deliberate cut, not a collage error.
   Browsers without clip-path simply show photo B full-bleed (a normal
   single-photo cover). */
.design-futuristic .hero-split-a {
    clip-path: polygon(0 0, calc(50% + 50vh) 0, calc(50% - 50vh) 100%, 0 100%);
    clip-path: polygon(0 0, calc(50% + 50dvh) 0, calc(50% - 50dvh) 100%, 0 100%);
}

.design-futuristic .hero-split-b {
    clip-path: polygon(calc(50% + 50vh + 3px) 0, 100% 0, 100% 100%, calc(50% - 50vh + 3px) 100%);
    clip-path: polygon(calc(50% + 50dvh + 3px) 0, 100% 0, 100% 100%, calc(50% - 50dvh + 3px) 100%);
}

/* Diagonal scrim echoes the cut on every cover (incl. single-photo ones). */
.design-futuristic .gallery-cover-scrim {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.4));
}

/* Tracked-uppercase display voice. */
.design-futuristic .gallery-cover-title {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.design-futuristic .gallery-header .gallery-photographer,
.design-futuristic .portfolio-info h2,
.design-futuristic .journal-card-title {
    font-family: var(--d-font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95em;
}

/* The enter button picks up the 45° corner cut instead of the pill. */
.design-futuristic .gallery-cover-enter {
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
        calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ── Grid: tight 6px gutters, 45° corner-cut tiles ────────────────────────
   The layout-qualified selectors out-rank the per-layout gap rules in
   layouts.css/public-base.css (the P6.5 design×layout matrix rule), for
   both the client gallery (.gallery-*) and the public album body
   (.album-view .photo-*). */
.design-futuristic .gallery-main {
    padding: 6px;
    max-width: none;
}

.design-futuristic .gallery-grid,
.design-futuristic .gallery-main[data-layout="editorial"] .gallery-grid,
.design-futuristic .album-view .photo-grid,
.design-futuristic .album-view.editorial .photo-grid {
    gap: 6px;
}

.design-futuristic .gallery-main[data-layout="masonry"] .gallery-grid,
.design-futuristic .album-view.masonry .photo-grid {
    column-gap: 6px;
}

.design-futuristic .gallery-main[data-layout="masonry"] .gallery-tile,
.design-futuristic .album-view.masonry .photo-item {
    margin-bottom: 6px;
}

/* Corner cuts parallel to the hero seam (top-left + bottom-right). */
.design-futuristic .gallery-tile,
.design-futuristic .photo-item,
.design-futuristic .portfolio-cover,
.design-futuristic .journal-card-cover {
    border-radius: 0;
    clip-path: polygon(var(--fut-cut) 0, 100% 0,
        100% calc(100% - var(--fut-cut)),
        calc(100% - var(--fut-cut)) 100%, 0 100%, 0 var(--fut-cut));
}

.design-futuristic .gallery-tile .gallery-img,
.design-futuristic .story-section img,
.design-futuristic .roll-photo img {
    border-radius: 0;
}

/* Captions speak the same tracked voice, small. */
.design-futuristic .section-caption,
.design-futuristic .roll-caption {
    font-family: var(--d-font-display);
    font-size: var(--d-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--d-track-caps);
}

/* P4 — public portfolio surfaces: same tight rhythm. */
.design-futuristic .portfolio-grid {
    gap: 10px;
}