/* Real work takes the same three-window stage. The studio interface stays monochrome. */
.portfolio-reel{display:grid;place-items:center;background:var(--project-bg,#eee)}
.portfolio-reel>img{width:100%;height:100%;object-fit:cover;object-position:center}
.portfolio-reel.screen-reel>img{object-fit:contain;padding:10px;animation:portfolio-screen-drift 8s ease-in-out infinite}
.portfolio-reel.apparel-reel>img{object-position:right center}
.portfolio-reel.identity-reel>img{object-position:50% 46%}
.portfolio-reel.pattern-reel>img{object-position:50% 50%}
.portfolio-reel.graphic-reel>img{object-fit:contain}
.portfolio-reel.screen-reel .reel-project-status{position:absolute;left:12px;bottom:10px;font:5px/1.4 var(--mono);color:#aaa;letter-spacing:.04em}
body:is(.motion-paused,.page-hidden,.hero-out-of-view,.intro-active,.modal-open) .portfolio-reel>img,.reel-slide:not(.is-active)>img{animation-play-state:paused}
.hero-reel:has(:focus-visible) .portfolio-reel>img{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.hero-reel:hover .portfolio-reel>img{animation-play-state:paused}}
@keyframes portfolio-screen-drift{0%,100%{transform:scale(.97) rotate(-1deg)}50%{transform:scale(1.015) rotate(.6deg)}}
.concept-ribbon .ribbon-project{font:500 21px/1.05 var(--sans);letter-spacing:-1px}.concept-ribbon .ribbon-project.richards-name{font-weight:650;letter-spacing:-1.3px}.concept-ribbon .ribbon-project.doyle-name{font-size:28px;font-style:italic;font-weight:600}.concept-ribbon .ribbon-project.uncommon-name{font-size:22px;letter-spacing:-.8px;font-weight:700}
.concept-ribbon .ribbon-logo{width:155px;flex-shrink:0}.concept-ribbon .ribbon-logo.richards-name{width:110px}.ribbon-logo>img{display:block;width:100%;height:36px;object-fit:contain;filter:brightness(0)}html[data-theme=dark] .ribbon-logo>img{filter:brightness(0) invert(1)}
.portfolio-showcase{background:var(--project-bg);color:var(--project-fg,#111)}
.portfolio-showcase .showcase-copy{background:none}.portfolio-showcase .tags>span{border-color:currentColor;opacity:.75}
.portfolio-showcase .showcase-copy p{max-width:235px}
.portfolio-art{background:var(--art-bg);display:flex;align-items:center;justify-content:center;padding:38px}
.portfolio-screen{display:block;width:100%;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 22px 50px #0003;transform:rotate(-2deg);transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.portfolio-screen>img{display:block;width:100%;height:auto;object-fit:contain}
.richards-art .portfolio-screen{transform:rotate(2deg);box-shadow:0 22px 50px #0007}
.portfolio-art:hover .portfolio-screen,.portfolio-art:focus-visible .portfolio-screen{transform:translateY(-6px) rotate(0deg) scale(1.025)}
.portfolio-status{position:absolute;left:26px;bottom:24px;font:7px/1.4 var(--mono);letter-spacing:.08em;color:var(--project-fg,#111);opacity:.65}
.doyle-art{padding:0;overflow:hidden}.doyle-art>img{height:100%;width:100%;position:absolute;inset:0;object-fit:cover;object-position:right center}
.doyle-art>img{inset:auto;right:0;top:50%;width:215%;height:auto;translate:0 -50%;object-fit:contain}
.selected-more{padding:65px 24px 0}
.selected-more-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:24px}
.selected-more-heading>p{font:8px/1.5 var(--mono);letter-spacing:.03em;color:var(--muted)}
.selected-more-heading h3{font-size:clamp(26px,3.5vw,48px);letter-spacing:-.055em}
.selected-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.selected-card{padding:0;background:none;text-align:left;min-width:0}
.selected-card-image{display:block;position:relative;width:100%;aspect-ratio:1.15;background:var(--project-bg,#eee);overflow:hidden;border-radius:16px}
.selected-card-image>img{height:100%;width:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.selected-card[data-project=doyle] .selected-card-image>img{position:absolute;right:0;top:50%;width:215%;height:auto;translate:0 -50%;object-fit:contain}
.selected-card:hover .selected-card-image>img,.selected-card:focus-visible .selected-card-image>img{transform:scale(1.035)}
.selected-card-info{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 0;min-height:64px}
.selected-card-info strong{display:block;font-size:17px;line-height:1.3;font-weight:450;letter-spacing:-.55px}
.selected-card-info small{display:block;font:7px/1.5 var(--mono);color:var(--muted);margin-top:5px}
.selected-card-info .arrow-icon{height:44px;width:35px}
.project-art.is-portfolio{display:grid;place-items:center;padding:24px;background:var(--project-bg,#eee);height:auto;min-height:330px}
.project-art.is-portfolio>img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.project-gallery{display:grid;gap:25px;margin-top:32px}.project-gallery:empty{display:none}
.project-gallery figure{margin:0}.project-gallery img{width:100%;height:auto;border-radius:6px;background:#eee}
.project-gallery figcaption{font:8px/1.6 var(--mono);color:var(--muted);margin-top:10px}
.project-external{margin-top:28px}.project-external[hidden]{display:none}
@media(max-width:1050px){.portfolio-art{padding:26px}.portfolio-status{left:23px;bottom:22px}}
@media(max-width:800px){.portfolio-art{padding:23px}.doyle-art{padding:0}.portfolio-status{font-size:6px;left:20px;bottom:19px}.selected-more{padding:48px 22px 0}.selected-grid{gap:13px}.selected-card-info strong{font-size:15px}.selected-card-info small{font-size:6px}.concept-ribbon .ribbon-project{font-size:18px}.concept-ribbon .ribbon-project.doyle-name{font-size:25px}.concept-ribbon .ribbon-project.uncommon-name{font-size:20px}}
@media(max-width:540px){.portfolio-reel.screen-reel>img{object-fit:cover;object-position:17% top;padding:0;animation:none}.portfolio-reel.identity-reel>img{object-fit:contain}.portfolio-reel.apparel-reel>img{object-position:87% center}.portfolio-reel.screen-reel .reel-project-status{display:none}.portfolio-art{padding:23px;min-height:300px}.doyle-art{padding:0;min-height:340px}.portfolio-showcase .showcase-copy p{max-width:160px}.portfolio-status{font-size:5px;left:20px;bottom:18px}.selected-more{padding:40px 20px 0}.selected-more-heading{display:block;margin-bottom:22px}.selected-more-heading>p{font-size:7px;margin-bottom:10px}.selected-more-heading h3{font-size:35px}.selected-grid{grid-template-columns:1fr;gap:20px}.selected-card-image{aspect-ratio:1.35;border-radius:14px}.selected-card-info strong{font-size:18px}.selected-card-info small{font-size:7px}.project-art.is-portfolio{min-height:0;padding:15px}.project-art.is-portfolio>img{max-height:420px}.project-gallery{gap:20px;margin-top:25px}.project-external{font-size:10px;min-height:44px}.concept-ribbon .ribbon-project{font-size:17px}}
@media(hover:none),(pointer:coarse){.portfolio-art:hover .portfolio-screen{transform:rotate(-2deg)}.richards-art:hover .portfolio-screen{transform:rotate(2deg)}.selected-card:hover .selected-card-image>img{transform:none}}
@media(max-width:540px){.portfolio-reel.apparel-reel>img{position:absolute;top:50%;right:-10%;width:450%;height:auto;translate:0 -50%;object-fit:contain}}
@media(prefers-reduced-motion:reduce){.portfolio-reel.screen-reel>img{animation:none;transform:none}.portfolio-art:hover .portfolio-screen,.portfolio-art:focus-visible .portfolio-screen{transform:none}.selected-card:hover .selected-card-image>img{transform:none}}

/* Original brand assets; the flat Doyle mark has transparent counters. */
.concept-ribbon .ribbon-logo.doyle-name{width:95px}
.concept-ribbon .ribbon-logo.doyle-name>img{height:52px;filter:brightness(0)}
.concept-ribbon .ribbon-logo.crossing-name{width:162px}
html[data-theme=dark] .concept-ribbon .ribbon-logo.doyle-name>img{filter:brightness(0) invert(1)}
.sprout-art .portfolio-screen{transform:rotate(2deg)}
.uncommon-art .portfolio-screen{transform:rotate(-2deg);box-shadow:0 22px 50px #0007}
.portfolio-showcase.uncommon-showcase .showcase-copy p{max-width:240px}
@media(max-width:540px){.selected-card[data-project=doyle] .selected-card-image{aspect-ratio:1.35}.selected-grid{grid-template-columns:1fr}}
@media(hover:none),(pointer:coarse){.sprout-art:hover .portfolio-screen{transform:rotate(2deg)}}

.uncommon-showcase h3{font-size:clamp(34px,3.8vw,64px)}

/* The first pair stays generous, with three more identities at a glance beneath. */
.selected-card{grid-column:span 3}
.selected-card.logo-card{grid-column:span 2}
.selected-card.brand-preview .selected-card-image>img{transform:scale(1.5)}
.selected-card.brand-preview:hover .selected-card-image>img,.selected-card.brand-preview:focus-visible .selected-card-image>img{transform:scale(1.55)}
.apparel-preview{display:block;position:relative;aspect-ratio:1.7;background:#f2f2f2;border-radius:10px;overflow:hidden}
.project-gallery .apparel-preview img{position:absolute;right:0;top:50%;width:215%;height:auto;max-width:none;translate:0 -50%;border-radius:0}
.apparel-preview:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.project-gallery .apparel-caption{display:flex;justify-content:space-between;gap:15px}
.apparel-caption small{font-size:7px;white-space:nowrap}
@media(max-width:540px){.selected-card,.selected-card.logo-card{grid-column:auto}.apparel-preview{aspect-ratio:1.35}.apparel-caption small{font-size:6px}}
@media(hover:none),(pointer:coarse){.selected-card.brand-preview:hover .selected-card-image>img{transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.selected-card.brand-preview:hover .selected-card-image>img,.selected-card.brand-preview:focus-visible .selected-card-image>img{transform:scale(1.5)}}

.project-dialog-controls{position:sticky;top:0;height:0;z-index:10}

/* Uncommon keeps its original website image in the same orange as its feature card. */
.portfolio-reel[data-key="uncommon"] .reel-project-status{color:#171717}
@media(max-width:540px){.portfolio-reel.screen-reel[data-key="uncommon"]>img{padding:6px}}