@font-face {
    font-family: 'Gijinkakun Kalam';
    src: url('fonts/Kalam-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.gp-portfolio {
    --gp-ink: var(--wp--preset--color--contrast, CanvasText);
    --gp-paper: var(--wp--preset--color--surface, var(--wp--preset--color--base, Canvas));
    --gp-caption: color-mix(in srgb, var(--gp-ink) 78%, var(--gp-paper));
    --gp-accent: var(--wp--preset--color--accent, #ff641e);
    --gp-border: color-mix(in srgb, var(--gp-ink) 16%, transparent);
    --gp-media: color-mix(in srgb, var(--gp-paper) 92%, var(--gp-ink));
    --gp-button-background: var(--wp--preset--color--contrast, CanvasText);
    --gp-button-ink: var(--wp--preset--color--base, Canvas);
    --gp-shadow-near: rgb(35 25 10 / 9%);
    --gp-shadow-far: rgb(35 25 10 / 13%);
    container-type: inline-size;
    color: inherit;
    isolation: isolate;
}

.gp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin-block: 0 2.5rem;
}

.gp-filters a,
.gp-pagination a {
    display: inline-flex;
    padding: .35rem .1rem;
    border-block-end: 2px solid transparent;
    color: inherit;
    text-decoration: none;
    font: inherit;
}

.gp-filters a[aria-current],
.gp-filters a:hover,
.gp-pagination a {
    border-color: var(--gp-accent);
}

.gp-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.25rem 2rem;
    align-items: start;
    align-content: start;
    padding: 1.25rem 1rem 2rem;
}

.gp-card {
    --gp-angle: 3deg;
    position: relative;
    min-width: 0;
    margin: 0;
    transform-origin: top left;
}

.gp-card:nth-child(3n + 1) {
    --gp-angle: -4deg;
    grid-row: span 2;
    z-index: 1;
}

.gp-card:nth-child(3n) {
    --gp-angle: -5deg;
    margin-block-start: -.75rem;
    margin-inline-start: .75rem;
    z-index: 2;
}

.gp-card:nth-child(6n + 4) { --gp-angle: 3deg; }
.gp-card:nth-child(6n + 5) { --gp-angle: -3deg; }
.gp-card:nth-child(6n) { --gp-angle: 4deg; }

.gp-card-link {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(.65rem, 1.7cqi, 1.25rem);
    background: var(--gp-paper);
    color: var(--gp-ink);
    border: 1px solid var(--gp-border);
    border-radius: 2px;
    box-shadow: 0 3px 6px var(--gp-shadow-near), 0 12px 25px var(--gp-shadow-far);
    transform: rotate(var(--gp-angle));
    transform-origin: center;
    text-decoration: none !important;
}

.gp-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gp-media);
}

.gp-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.gp-card:nth-child(3n + 1) .gp-media {
    aspect-ratio: 4 / 3;
}

.gp-card-body { padding: .65rem .35rem .25rem; }
.gp-card-body :is(h2, h3) {
    margin: 0 0 .15rem;
    color: var(--gp-ink);
    font-family: 'Gijinkakun Kalam', cursive;
    font-size: clamp(1.35rem, 3cqi, 2rem);
    font-weight: 400;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.gp-card:nth-child(3n + 1) :is(h2, h3) { font-size: clamp(1.7rem, 4cqi, 2.7rem); }
.gp-card-body p {
    margin: 0;
    color: var(--gp-caption);
    font-size: .875rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.gp-caption:empty { display: none; }
.gp-pagination { display: flex; justify-content: center; gap: 1.5rem; margin-block: 1.5rem; }
.gp-announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.gp-card-exiting { pointer-events: none; }

.gp-portfolio a:focus-visible { outline: 3px solid var(--gp-ink); outline-offset: 5px; }
.gp-card:focus-within { z-index: 5; outline: 3px solid var(--gp-ink); outline-offset: 5px; }
.gp-portfolio[aria-busy=true] { cursor: progress; }
.gp-archive:not(.wp-block-group) {
    padding-left: var(--wp--style--root--padding-left, 0px);
    padding-right: var(--wp--style--root--padding-right, 0px);
}
.gp-archive:not(.wp-block-group) > * {
    max-width: var(--wp--style--global--content-size, 100%);
    margin-inline: auto;
}

/* Archive cards share a wider table, with frames crossing into the gutters. */
.gp-archive .gp-grid { gap: 1rem 1.5rem; padding: 2rem 1.5rem 3rem; }
.gp-archive .gp-card:nth-child(3n + 2) { margin-inline-start: -2.25rem; margin-block-end: -.5rem; z-index: 2; }
.gp-archive .gp-card:nth-child(3n) { margin-inline-start: -1rem; margin-inline-end: .5rem; margin-block-start: -1rem; }
.gp-archive .gp-card:nth-child(6n + 4) { margin-block-start: -.5rem; }

.gp-card:nth-child(3n + 1):nth-last-child(-n + 2) { grid-row: auto; }
.gp-card:first-child:nth-last-child(-n + 2) .gp-media { aspect-ratio: 4 / 3; min-height: 0; flex: none; }
.gp-card:only-child { grid-column: 1 / -1; max-width: 42rem; width: auto; }

@container (max-width: 620px) {
    .gp-grid,
    .gp-archive .gp-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 1rem .85rem 2rem; }
    .gp-grid .gp-card,
    .gp-archive .gp-grid .gp-card { grid-row: auto; grid-column: auto; margin: 0; --gp-angle: -2deg; }
    .gp-grid .gp-card:nth-child(even) { --gp-angle: 2deg; }
    .gp-grid .gp-card .gp-media { aspect-ratio: 4 / 3; min-height: 0; flex: none; }
    .gp-grid .gp-card :is(h2, h3) { font-size: clamp(1.5rem, 6cqi, 2rem); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .gp-card-link { transition: transform .18s ease, box-shadow .18s ease; }
    .gp-card:hover .gp-card-link { transform: rotate(0deg) translateY(-.25rem); box-shadow: 0 5px 10px var(--gp-shadow-near), 0 16px 30px var(--gp-shadow-far); }
}

@media (forced-colors: active) {
    .gp-card { border: 1px solid CanvasText; }
    .gp-filters a[aria-current] { border-color: Highlight; }
}

.gp-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin-block-end: 1.75rem;
}
.gp-section-header h2 {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: clamp(2rem, 6cqi, 3.5rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.05;
}
.gp-all-projects {
    flex-shrink: 0;
    padding-block-end: .25rem;
    border-block-end: 2px solid var(--gp-accent);
    color: inherit;
    font-size: .9375rem;
    text-decoration: none;
}
.gp-all-projects:hover { border-block-end-width: 3px; }

.gp-pagination [data-gp-more] {
    justify-content: center;
    min-width: 9rem;
    padding: .8rem 1.75rem;
    border: 1px solid var(--gp-button-background);
    border-radius: 999px;
    background: var(--gp-button-background);
    color: var(--gp-button-ink);
    font-weight: 600;
}
.gp-pagination [data-gp-more]:hover { background: color-mix(in srgb, var(--gp-button-background) 88%, var(--gp-button-ink)); }

.gp-exit-layer { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.gp-portfolio { position: relative; }
.gp-grid[data-gp-animating] .gp-card-link { transition: none; }
.gp-filters a.gp-filter-pending { border-color: var(--gp-accent); opacity: .65; }

.gp-archive .gp-filters {
    justify-content: center;
    margin-block-end: var(--wp--custom--rhythm--heading, 2rem);
    text-align: center;
}
.gp-archive > header { text-align: center; }

@supports (color: light-dark(white, black)) {
    .gp-portfolio {
        --gp-shadow-near: light-dark(rgb(35 25 10 / 9%), rgb(0 0 0 / 25%));
        --gp-shadow-far: light-dark(rgb(35 25 10 / 13%), rgb(0 0 0 / 45%));
    }
}