.db-site-shell {
    --db-paper: #f5f1e7;
    --db-ink: #181512;
    width: 100%;
}

.db-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.5vw, 28px);
    align-items: stretch;
}

.db-card {
    position: relative;
    min-width: 0;
    aspect-ratio: 0.78;
    padding: 14px;
    background: var(--db-paper);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 11px 24px rgba(26, 22, 18, .22), 0 3px 7px rgba(26, 22, 18, .13);
    overflow: hidden;
    transform: translateZ(0);
}

/* Real raster paper frames taken from the distressed-card art direction.
   The centre of each asset is transparent so project artwork remains live HTML/image content. */
.db-card::before,
.db-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.db-card::before {
    z-index: 6;
    background-image: var(--db-frame-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.db-card::after {
    z-index: 5;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(65, 50, 38, .16),
        inset 0 0 18px rgba(50, 38, 28, .08);
}

.db-frame-1 { --db-frame-image: url('../frames/frame-1.webp'); }
.db-frame-2 { --db-frame-image: url('../frames/frame-2.webp'); }
.db-frame-3 { --db-frame-image: url('../frames/frame-3.webp'); }
.db-frame-4 { --db-frame-image: url('../frames/frame-4.webp'); }
.db-frame-5 { --db-frame-image: url('../frames/frame-5.webp'); }

.db-scuff-1 { --db-scuff-image: url('../frames/scuff-1.webp'); }
.db-scuff-2 { --db-scuff-image: url('../frames/scuff-2.webp'); }
.db-scuff-3 { --db-scuff-image: url('../frames/scuff-3.webp'); }
.db-scuff-4 { --db-scuff-image: url('../frames/scuff-4.webp'); }

.db-card__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    padding: clamp(24px, 2.2vw, 38px);
    display: flex;
    flex-direction: column;
    color: #fff;
    isolation: isolate;
}

.db-card__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .72;
    background-image:
        var(--db-scuff-image),
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.30) 0 .7px, transparent 1.1px),
        radial-gradient(circle at 73% 61%, rgba(0,0,0,.28) 0 .7px, transparent 1.1px);
    background-repeat: no-repeat, repeat, repeat;
    background-size: 100% 100%, 19px 23px, 29px 31px;
    background-position: center, 0 0, 0 0;
    mix-blend-mode: soft-light;
}

.db-palette-logo .db-card__inner { background: linear-gradient(145deg, #302768, #7252aa 62%, #dc5c91); }
.db-palette-1 .db-card__inner { background: linear-gradient(145deg, #ee3524, #f37022 62%, #f2b227); }
.db-palette-2 .db-card__inner { background: linear-gradient(145deg, #0e4c6d, #166b8e 55%, #252e5f); }
.db-palette-3 .db-card__inner { background: linear-gradient(145deg, #ef2f80, #c72786 55%, #6b2ea1); }
.db-palette-4 .db-card__inner { background: linear-gradient(145deg, #f2a51d, #f36522 58%, #e4402a); }
.db-palette-5 .db-card__inner { background: linear-gradient(145deg, #c93291, #7d2aa8 58%, #39246e); }
.db-palette-6 .db-card__inner { background: linear-gradient(145deg, #19835a, #0f6d66 58%, #1b4e5b); }
.db-palette-7 .db-card__inner { background: linear-gradient(145deg, #533b96, #3b397f 52%, #201f50); }
.db-palette-8 .db-card__inner { background: linear-gradient(145deg, #e4482d, #d52752 55%, #75246d); }

.db-peel {
    position: absolute;
    top: 17px;
    left: 16px;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: #efe9d9;
    color: #17130f;
    border: 1px solid rgba(0,0,0,.28);
    box-shadow: 1px 2px 0 rgba(0,0,0,.18);
    font: 900 8px/0.9 Arial, sans-serif;
    text-align: center;
    transform: rotate(-9deg);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}

.db-number {
    position: absolute;
    top: 22px;
    right: 23px;
    z-index: 8;
    color: rgba(255,255,255,.95);
    font: 800 15px/1 Arial, sans-serif;
    letter-spacing: .02em;
    text-shadow: 0 1px 1px rgba(0,0,0,.22);
}

.db-card__copy {
    position: relative;
    z-index: 3;
    max-width: 86%;
    margin-top: 36px;
}

.db-card__title {
    margin: 0 0 12px;
    color: #fff;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(30px, 2.45vw, 48px);
    line-height: .94;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 1px 2px 0 rgba(0,0,0,.18);
}

.db-card__description,
.db-card__kicker {
    margin: 0;
    color: rgba(255,255,255,.96);
    font: 700 clamp(13px, .95vw, 17px)/1.25 Arial, sans-serif;
    max-width: 24em;
}

/* Project artwork is a full-bleed background layer. */
.db-card--project .db-card__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.db-card--project .db-card__art::before {
    content: none;
}

.db-card--project .db-card__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.06) contrast(1.03);
}

/* Colour treatment sits above the image but below all card content. */
.db-card--project .db-card__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(20,16,14,.52) 0%, rgba(20,16,14,.18) 50%, rgba(20,16,14,.34) 100%);
}

.db-card--project.db-palette-1 .db-card__inner::before { background: linear-gradient(145deg, rgba(238,53,36,.58), rgba(243,112,34,.25) 58%, rgba(242,178,39,.18)); }
.db-card--project.db-palette-2 .db-card__inner::before { background: linear-gradient(145deg, rgba(14,76,109,.62), rgba(22,107,142,.24) 55%, rgba(37,46,95,.24)); }
.db-card--project.db-palette-3 .db-card__inner::before { background: linear-gradient(145deg, rgba(239,47,128,.58), rgba(199,39,134,.24) 55%, rgba(107,46,161,.22)); }
.db-card--project.db-palette-4 .db-card__inner::before { background: linear-gradient(145deg, rgba(242,165,29,.56), rgba(243,101,34,.24) 58%, rgba(228,64,42,.20)); }
.db-card--project.db-palette-5 .db-card__inner::before { background: linear-gradient(145deg, rgba(201,50,145,.58), rgba(125,42,168,.25) 58%, rgba(57,36,110,.24)); }
.db-card--project.db-palette-6 .db-card__inner::before { background: linear-gradient(145deg, rgba(25,131,90,.58), rgba(15,109,102,.24) 58%, rgba(27,78,91,.22)); }
.db-card--project.db-palette-7 .db-card__inner::before { background: linear-gradient(145deg, rgba(83,59,150,.60), rgba(59,57,127,.26) 52%, rgba(32,31,80,.24)); }
.db-card--project.db-palette-8 .db-card__inner::before { background: linear-gradient(145deg, rgba(228,72,45,.58), rgba(213,39,82,.25) 55%, rgba(117,36,109,.22)); }

.db-card__button {
    position: absolute;
    z-index: 4;
    left: clamp(22px, 2vw, 34px);
    bottom: clamp(22px, 2vw, 34px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 17px;
    border: 1px solid rgba(22,18,15,.22);
    border-radius: 999px;
    background: #f5f1e7;
    color: #1b1714;
    box-shadow: 0 2px 0 rgba(0,0,0,.18);
    text-decoration: none;
    font: 900 12px/1 Arial, sans-serif;
    letter-spacing: .025em;
    transition: transform .16s ease, box-shadow .16s ease;
}

.db-card__button:hover,
.db-card__button:focus-visible {
    transform: translateY(-2px) rotate(-.6deg);
    box-shadow: 0 5px 0 rgba(0,0,0,.16);
}

.db-card--identity .db-card__inner {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.db-card__identity-image {
    width: min(92%, 430px);
    max-height: 70%;
    object-fit: contain;
    filter: drop-shadow(0 4px 0 rgba(0,0,0,.18));
}

.db-card__identity-mark {
    width: 90%;
    color: #ed2b2b;
    -webkit-text-stroke: 3px #20130f;
    paint-order: stroke fill;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(45px, 4.25vw, 84px);
    line-height: .84;
    text-transform: uppercase;
    transform: rotate(-2deg);
    text-shadow: 0 6px 0 #e6c64e, 0 9px 0 rgba(0,0,0,.18);
}

.db-card__kicker {
    margin-top: 24px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
}

.db-card__demo-art {
    position: absolute;
    right: -4%;
    bottom: -5%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 48% 52% 43% 57%;
    background:
      radial-gradient(circle at 40% 35%, rgba(255,255,255,.24), transparent 22%),
      radial-gradient(circle at 52% 56%, rgba(0,0,0,.2), transparent 56%);
    opacity: .8;
}

@media (max-width: 1100px) {
    .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .db-card__title { font-size: clamp(34px, 5vw, 54px); }
}

@media (max-width: 640px) {
    .db-grid { grid-template-columns: 1fr; gap: 18px; }
    .db-card { aspect-ratio: .82; }
    .db-card__title { font-size: clamp(36px, 10vw, 54px); }
    .db-card__description { font-size: 14px; }
}