.sample-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px; }
.sample-grid .sample-card { padding:10px 10px 18px; background:white; }
.sample-card .eyebrow, .sample-card h3 { margin:12px 8px 0; }
.sample-card h3 { font-size:1.35rem; }
.sample-card h3 a { text-decoration:none; }
.studio { --bg:#e8e6df; --fg:#202522; --highlight:#a7baa7; --type:Georgia,serif; }
.cafe { --bg:#f8ce93; --fg:#48281e; --highlight:#fbf1d9; --type:Georgia,serif; }
.folio { --bg:#221e31; --fg:#f9f4ff; --highlight:#ac88ff; --type:system-ui,sans-serif; }
.blog { --bg:#daeabd; --fg:#23351f; --highlight:#9bb975; --type:Georgia,serif; }
.press { --bg:#f8f5ee; --fg:#242124; --highlight:#efb6ac; --type:Georgia,serif; }
.journal { --bg:#dce9f7; --fg:#132b48; --highlight:#9dc2e8; --type:Georgia,serif; }
.stay { --bg:#c3eee8; --fg:#153d42; --highlight:#77c9bf; --type:Georgia,serif; }
.market { --bg:#f4dfd4; --fg:#382b29; --highlight:#dda993; --type:system-ui,sans-serif; }
.shop { --bg:#212c27; --fg:#f5faee; --highlight:#d7f06d; --type:system-ui,sans-serif; }
.sample-art, .mock-hero { background:var(--bg); color:var(--fg); }
.sample-art { position:relative; overflow:hidden; min-height:175px; display:grid; align-content:space-between; gap:20px; padding:16px; border-radius:6px; text-decoration:none; isolation:isolate; }
.sample-art::before, .mock-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 86% 82%,var(--highlight) 0 22%,transparent 23%); }
.press::before, .journal::before, .press .mock-hero::before, .journal .mock-hero::before { background:repeating-linear-gradient(90deg,transparent 0 22%,var(--highlight) 22% 24%,transparent 24% 30%); opacity:.45; }
.sample-art strong { max-width:15ch; font:700 clamp(1.25rem,2.3vw,2rem)/1.04 var(--type); }
.sample-art span { position:absolute; top:12px; right:14px; }
.sample-art:hover strong { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:760px) { .sample-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .sample-grid { grid-template-columns:1fr; } }
.demo-page { margin:0; background:#fff; color:#222; font:16px/1.5 system-ui,sans-serif; }
.mock { min-height:100vh; }
.mock header { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:20px 6vw; border-bottom:1px solid #ddd; }
.mock header strong { font:700 1.6rem var(--type); }
.mock header a { color:inherit; }
.mock-hero { position:relative; isolation:isolate; padding:clamp(40px,9vw,115px) 6vw; }
.mock-hero h1 { max-width:12ch; font:700 clamp(2.5rem,8vw,6.5rem)/.98 var(--type); margin:20px 0; }
.mock-hero p { max-width:38ch; }
.mock-button, .mock button { display:inline-block; border:1px solid #222; background:var(--highlight); color:#181818; padding:10px 16px; border-radius:4px; font:inherit; font-weight:700; cursor:pointer; }
.mock-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:18px; padding:30px 6vw; }
.mock-content article { border:1px solid #ddd; padding:12px; border-radius:8px; }
.mock-content h2 { font:700 1.5rem var(--type); }
.tile { display:grid; place-items:center; min-height:120px; margin-bottom:12px; background:linear-gradient(145deg,var(--highlight),var(--bg)); color:var(--fg); font:700 2rem var(--type); }
.tile-2 { background:repeating-linear-gradient(45deg,var(--bg) 0 22px,var(--highlight) 22px 24px); }
.tile-3 { background:radial-gradient(ellipse at center,var(--bg) 0 37%,var(--highlight) 38%); }
.bag { margin:0 6vw 30px; padding:12px; border:1px solid #aaa; }
/* Each gallery card shows a miniature of its linked site. */
.sample-art { display: block; padding: 0; min-height: 0; border: 1px solid #0002; }
.sample-art::before { content: none; }
.sample-art span { position: static; }
.mini-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; font-size: .7rem; }
.mini-bar small { text-align: right; }
.mini-page { display: grid; position: relative; min-height: 155px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--bg); }
.mini-page img { display: block; width: 100%; height: 0; min-height: 100%; object-fit: cover; }
.mini-copy { display: grid; align-content: center; justify-items: start; gap: 10px; padding: 10px; }
.mini-copy strong { font-size: clamp(.95rem, 1.55vw, 1.45rem); }
.mini-cta { display: inline-block; font: 700 .6rem/1.25 system-ui, sans-serif; padding: 4px 6px; color: #171717; background: var(--highlight); }
.studio .mini-page img, .market .mini-page img { grid-column: 2; grid-row: 1; }
.studio .mini-copy, .market .mini-copy { grid-column: 1; grid-row: 1; }
.cafe .mini-page, .folio .mini-page, .stay .mini-page { grid-template-columns: 1fr; }
.cafe .mini-page > *, .folio .mini-page > *, .stay .mini-page > * { grid-area: 1/1; }
.cafe .mini-copy, .folio .mini-copy, .stay .mini-copy { background: linear-gradient(90deg,#000d,#0005); color: white; z-index: 1; }
.press .mini-page, .journal .mini-page { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border-top: 2px solid currentColor; }
.mock .mock-hero {
  background-image: linear-gradient(90deg,var(--bg) 0%,var(--bg) 42%,transparent 72%), var(--hero-image);
  background-position: center, right center;
  background-size: cover, 62% auto;
  background-repeat: no-repeat;
}
.mock .mock-hero::before { content: none; }
@media (max-width: 650px) {
  .mock .mock-hero {
    padding-top: 220px;
    background-image: linear-gradient(transparent 195px, var(--bg) 195px), var(--hero-image);
    background-position: top center;
    background-size: 100% 100%, max(100%, 400px) auto;
  }
}

.sample-grid .sample-card { box-shadow: 0 8px 24px #0000000c; }
.mini-frame { display: flex; align-items: center; gap: 4px; padding: 7px 10px; background: #252525; }
.mini-frame i { width: 5px; height: 5px; border-radius: 50%; background: #eee; opacity: .65; }
.mini-frame span { width: 42%; height: 5px; margin-inline: auto; border-radius: 4px; background: #ffffff30; }
.mini-page img { transition: filter 180ms ease; }
.sample-art:hover img, .sample-art:focus-visible img { filter: saturate(1.25); }