/* Photographs remain source-colored across every style and palette. */
.specimen-board.specimen-website-board .website-photo-frame{position:relative;min-width:0;margin:0;overflow:hidden;border-radius:min(12px,var(--sp-radius));background:#ececea;isolation:isolate}
.specimen-board.specimen-website-board .website-photo{display:block;width:100%;height:100%;object-fit:cover;filter:none;mix-blend-mode:normal;opacity:1}
.specimen-board.specimen-website-board .website-hero-media{height:270px;align-self:stretch}
.specimen-board.specimen-website-board .website-project-media{height:auto;aspect-ratio:3/2;border-radius:0}
.specimen-board.specimen-website-board .website-team-media{height:auto;aspect-ratio:3/2}
.specimen-board.specimen-website-board:is(.style-brutalist,.style-neobrutalist,.style-bauhaus,.style-memphis) .website-hero-media{border:2px solid var(--sp-ink)}
.specimen-board.specimen-website-board.style-neobrutalist .website-hero-media{box-shadow:5px 5px 0 var(--sp-ink)}
.specimen-board.specimen-website-board.style-clay .website-photo-frame{border-radius:24px}
.specimen-board.specimen-website-board.style-editorial .website-hero-media{border-radius:0}
.specimen-board.specimen-website-board.style-retro .website-hero-media{border:2px inset #d5d5d5;border-radius:0}
.specimen-board.specimen-website-board.style-skeuomorphic .website-hero-media{border:4px ridge #b6a58e;box-shadow:0 4px 9px #0002}
.specimen-board.specimen-website-board.style-artdeco .website-hero-media{border:3px double var(--sp-accent);border-radius:48% 48% 0 0}

/* The glass surface sits over a real scene, as it would on a production site. */
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero{display:block;min-height:360px;padding:22px;isolation:isolate;overflow:hidden;border:1px solid #ffffff7a;background:#f1f1ef}
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;border-radius:inherit}
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero-media .website-photo{object-position:58% center}
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero>.specimen-hint{left:8px;top:8px;z-index:3}
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero-copy{--sp-ink:#22252b;--sp-muted:#515761;--pal-ink:#22252b;--pal-muted:#515761;position:relative;z-index:1;width:min(380px,67%);padding:22px;background:#ffffffd9;border:1px solid #fffffff0;border-radius:17px;box-shadow:0 8px 24px #00000012;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero-copy h3{color:#22252b;text-shadow:none}
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero-copy .website-eyebrow,
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero-copy .website-hero-description{color:#515761}
.specimen-board.specimen-website-board.style-glass[data-demo-style] .website-hero-copy .website-text-button{color:#22252b}
.specimen-board.specimen-website-board.style-glass:not([data-palette]) .website-hero-copy .website-primary{background:#3155e7;color:#fff!important}
.specimen-board.specimen-website-board.style-glass[data-palette="midnight"] .website-hero-copy .website-primary{background:#134f62;color:#fff!important}

@container(max-width:600px){
  .specimen-board.specimen-website-board:not(.specimen-compact) .website-hero-media{height:230px}
  .specimen-board.specimen-website-board:not(.specimen-compact) .website-team-media{height:190px}
  .specimen-board.specimen-website-board.style-glass[data-demo-style]:not(.specimen-compact) .website-hero{min-height:375px;padding:18px;display:flex;align-items:center}
  .specimen-board.specimen-website-board.style-glass[data-demo-style]:not(.specimen-compact) .website-hero-media{height:100%}
  .specimen-board.specimen-website-board.style-glass[data-demo-style]:not(.specimen-compact) .website-hero-copy{width:min(340px,85%);padding:20px}
}
@container(max-width:420px){
  .specimen-board.specimen-website-board:not(.specimen-compact) .website-hero-media{height:200px}
  .specimen-board.specimen-website-board:not(.specimen-compact) .website-project-media{height:170px}
  .specimen-board.specimen-website-board.style-glass[data-demo-style]:not(.specimen-compact) .website-hero{margin-left:-8px;margin-right:-8px;padding:14px;min-height:390px}
  .specimen-board.specimen-website-board.style-glass[data-demo-style]:not(.specimen-compact) .website-hero-media{height:100%}
  .specimen-board.specimen-website-board.style-glass[data-demo-style]:not(.specimen-compact) .website-hero-copy{width:100%;padding:18px;background:#ffffffe3}
  .specimen-board.specimen-website-board.style-glass[data-demo-style]:not(.specimen-compact) .website-hero-copy h3{font-size:clamp(26px,8.4cqw,34px)}
}
.specimen-board.specimen-website-board.specimen-compact .website-hero-media{height:253px}
.specimen-board.specimen-website-board.specimen-compact.style-glass[data-demo-style] .website-hero-media{height:100%}
.specimen-board.specimen-website-board.specimen-compact .website-project-media{height:145px}
.specimen-board.specimen-website-board.specimen-compact .website-team-media{height:175px}