/* A project gallery: coloured presentation surfaces, framed work and staggered rows. */
.work-section{background:#f7f8f8}
.work-grid{grid-template-columns:1.08fr 1fr;gap:30px;align-items:start;padding-bottom:68px}
.archive-grid{gap:28px;align-items:start;padding-bottom:48px}
.work-grid>.project,.archive-grid>.project{
 --card-bg:#e1e8e4;--card-ink:#202d29;--card-muted:#58655f;--card-edge:#c3cdc6;--card-angle:-3deg;--card-offset:0px;
 position:relative;isolation:isolate;min-width:0;margin:0;border:1px solid var(--card-edge);border-radius:26px;
 background:var(--card-bg);color:var(--card-ink);transform:translateY(var(--card-offset));
 transition:box-shadow .3s,border-color .3s;
}
.project[data-tone="sage"]{--card-bg:#dfe7db;--card-ink:#23352b;--card-muted:#546859;--card-edge:#c5d2c2}
.project[data-tone="rose"]{--card-bg:#ecded7;--card-ink:#4a302c;--card-muted:#7d625d;--card-edge:#dac5bd}
.project[data-tone="blue"]{--card-bg:#dce5f0;--card-ink:#253b56;--card-muted:#5b6e87;--card-edge:#c5d1e2;--card-angle:3deg}
.project[data-tone="lilac"]{--card-bg:#e8e0ee;--card-ink:#42354e;--card-muted:#75637f;--card-edge:#d6c8df}
.project[data-tone="yellow"]{--card-bg:#f0e7c9;--card-ink:#4c4124;--card-muted:#7a6d47;--card-edge:#ded1aa;--card-angle:3deg}
.project[data-project="waveeject"]{--card-bg:#172841;--card-ink:#f3f7ff;--card-muted:#c0cede;--card-edge:#344966;--card-angle:3deg}
.work-grid>.project:nth-child(even){--card-offset:68px}
.archive-grid>.project.offset-3{--card-offset:48px}
.work-grid>.project:hover,.archive-grid>.project:hover{box-shadow:0 18px 45px #19263314}
.project:focus-within{outline:2px solid #168698;outline-offset:5px}

.project .project-media{
 position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
 aspect-ratio:1.3;border-radius:25px 25px 0 0;background:transparent!important;overflow:hidden;
}
.archive-grid .project-media{aspect-ratio:1.26}
.project .project-media::before{
 content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
 background:radial-gradient(ellipse at 28% 16%,#ffffff65,transparent 62%),linear-gradient(130deg,transparent 52%,#ffffff1a 52%,#ffffff1a 53%,transparent 53%);
}
.project .project-media::after{
 content:"";position:absolute;z-index:-1;width:73%;aspect-ratio:1;border:1px solid #ffffff69;border-radius:50%;right:-27%;top:-22%;pointer-events:none;
}
.project .project-index{top:23px;left:25px;border:0;background:transparent;padding:0;color:var(--card-muted);font-size:8px;letter-spacing:.12em}

/* The white browser shell separates light website screenshots from the card. */
.project .website-art{padding:42px 27px 18px}
.project-browser{
 display:block;width:100%;min-width:0;overflow:hidden;background:#fff;border:1px solid #ffffffa6;border-radius:8px;
 box-shadow:0 22px 30px -15px #15253665,0 3px 8px #15253614;transform:rotate(var(--card-angle));
 transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;
}
.project-browser-bar{display:flex;align-items:center;gap:4px;height:26px;padding:0 10px;background:#fafbfc;border-bottom:1px solid #e4e6e8;color:#757d87}
.project-browser-bar i{width:4px;height:4px;flex-shrink:0;border-radius:50%;background:#c9cdd2}
.project-browser-bar>span{margin-left:8px;font-size:7px;letter-spacing:.03em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.project-browser>img{width:100%;height:auto;aspect-ratio:1.58;object-fit:cover;object-position:top}
.project:hover .project-browser,.project:focus-within .project-browser{transform:translateY(-5px) rotate(0deg);box-shadow:0 26px 35px -15px #15253665,0 4px 10px #15253614}
.work-grid .website-art{padding:55px 36px 22px}
.work-grid .project-browser-bar{height:29px}

/* The caption belongs to the same coloured surface, with a clear project link. */
.project .project-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px 27px;min-height:118px}
.project-caption{min-width:0}
.project .project-meta h3{font-size:26px;line-height:1.2;font-weight:550;letter-spacing:-.05em}
.project .project-meta h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:26px}
.project .project-media{z-index:3}
.project .project-meta h3 a{position:static}
.project .project-meta p{display:inline-block;max-width:100%;margin-top:13px;padding:5px 10px;border:1px solid var(--card-edge);border-radius:20px;background:#ffffff47;color:var(--card-ink);font-size:9px;line-height:1.5}
.project[data-project="waveeject"] .project-meta p{background:#ffffff0b}
.project .project-meta .circle-arrow{position:static;flex-shrink:0;width:43px;height:43px;margin:0;border:1px solid var(--card-edge);background:#ffffff83;color:var(--card-ink);transition:background .25s,color .25s,transform .25s}
.project[data-project="waveeject"] .circle-arrow{background:#ffffff10}
.project:hover .project-meta .circle-arrow,.project:focus-within .project-meta .circle-arrow{background:var(--card-ink);color:var(--card-bg);transform:rotate(45deg)}
.archive-grid .project-meta h3{font-size:23px}
.archive-grid .project-meta{padding:19px 23px 25px;min-height:115px}

.project .project-media.device-mix{padding:28px 27px 20px;gap:20px}
.project .device-mix img{width:35%;height:auto;max-height:90%;object-fit:contain;transform:rotate(-5deg) translateY(-5px);border-radius:9px;box-shadow:0 15px 25px #26314426;transition:transform .45s}
.project .device-mix img+img{transform:rotate(5deg) translateY(14px)}
.project:hover .device-mix img{transform:rotate(-3deg) translateY(-9px)}
.project:hover .device-mix img+img{transform:rotate(3deg) translateY(9px)}
.project .project-media.covers{padding:30px;gap:14px}
.project .covers img{box-shadow:0 16px 25px #28304036}

.project .project-media.youtube-project{display:flex;flex-direction:column;justify-content:flex-start;padding:18px 18px 16px;gap:12px;aspect-ratio:1.26}
.project .youtube-project>.yt-project-banner{width:100%;border-radius:9px;height:auto;aspect-ratio:1060/175;box-shadow:0 4px 12px #1c29300c}
.project .yt-project-identity strong{font-size:18px;color:var(--card-ink)}
.project .yt-project-identity>span{color:var(--card-muted)}
.project .yt-project-avatar{width:clamp(48px,5.2vw,76px);height:clamp(48px,5.2vw,76px);margin-bottom:3px}
.project .yt-project-platform{margin-top:auto;font-size:9px;color:var(--card-muted)}
.project .yt-project-platform svg{width:22px;height:19px}
.project .youtube-project>.yt-banner-empty{display:none}
.project .youtube-project:has(>.yt-banner-empty) .yt-project-identity{margin-top:24px}
.project .youtube-project:has(>.yt-banner-empty) .yt-project-avatar{width:108px;height:108px}

@media(max-width:1100px){
 .archive-grid{gap:25px}
 .archive-grid>.project.offset-3{--card-offset:0px}
 .archive-grid>.project.offset-2{--card-offset:48px}
 .work-grid{gap:25px}
 .work-grid .website-art{padding:48px 26px 18px}
 .project .project-meta h3{font-size:24px}
}
@media(max-width:780px){
 .work-grid{grid-template-columns:1fr 1fr;gap:20px;padding-bottom:42px}
 .work-grid>.project:nth-child(even){--card-offset:42px}
 .archive-grid{gap:22px}
 .project .website-art,.work-grid .website-art{padding:36px 18px 17px}
 .project-browser-bar{height:21px}
 .work-grid .project-browser-bar{height:21px}
 .project .project-index{top:17px;left:20px;font-size:7px}
 .project .project-meta,.archive-grid .project-meta{padding:17px 19px 22px;min-height:118px;gap:12px}
 .project .project-meta h3,.archive-grid .project-meta h3{font-size:21px}
 .project .project-meta p{font-size:8px;margin-top:10px;padding:5px 8px}
 .project .project-meta .circle-arrow{width:35px;height:35px}
 .project .project-media.device-mix{padding:22px 15px 15px;gap:13px}
 .project .project-media.youtube-project{padding:13px;gap:9px;aspect-ratio:auto;min-height:255px}
 .project .yt-project-avatar{width:62px;height:62px}
 .project .yt-project-identity strong{font-size:17px}
}
@media(max-width:600px){
 .work-grid,.archive-grid{grid-template-columns:1fr;gap:25px;padding-bottom:0}
 .work-grid>.project:nth-child(even),.archive-grid>.project.offset-2,.archive-grid>.project.offset-3{--card-offset:0px}
 .work-grid>.project,.archive-grid>.project{border-radius:23px}
 .project .project-media,.archive-grid .project-media{aspect-ratio:1.22;border-radius:22px 22px 0 0}
 .project .website-art,.work-grid .website-art{padding:43px 25px 18px}
 .project .project-meta,.archive-grid .project-meta{padding:19px 22px 24px;min-height:112px}
 .project .project-meta h3,.archive-grid .project-meta h3{font-size:25px}
 .project .project-meta p{font-size:9px}
 .project .project-meta .circle-arrow{width:40px;height:40px}
 .project .project-media.youtube-project,.archive-grid .project-media.youtube-project{aspect-ratio:auto;min-height:285px;padding:17px;gap:14px}
 .project .yt-project-avatar{width:76px;height:76px}
 .project .yt-project-identity strong{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
 .project:hover .project-browser,.project:focus-within .project-browser{transform:rotate(var(--card-angle))}
 .project:hover .device-mix img{transform:rotate(-5deg) translateY(-5px)}
 .project:hover .device-mix img+img{transform:rotate(5deg) translateY(14px)}
 .project:hover .project-meta .circle-arrow{transform:none}
}