.hero{background:radial-gradient(ellipse at 85% 25%,#fffdf4,transparent 45%),linear-gradient(125deg,#fff6d6,#f8e4a1)}.hero-photo{cursor:zoom-in;transition:transform .35s,box-shadow .35s}.hero-photo:hover{transform:rotate(-1deg) scale(1.025);box-shadow:0 20px 45px #70511130}.photos{grid-template-columns:repeat(3,minmax(0,1fr))}.card{border:1px solid var(--line);background:#fffef7;border-radius:22px;padding:8px;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-7px);box-shadow:0 15px 35px #70511124}.card img{aspect-ratio:16/10;object-fit:cover}.card span{display:flex;justify-content:space-between;align-items:center;padding:12px 8px;gap:8px}.card small{color:var(--muted)}button:focus-visible{outline:3px solid #806217;outline-offset:4px}dialog{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:16px;width:min(860px,calc(100% - 24px));max-height:calc(100dvh - 24px)}dialog[open]{animation:pop .25s ease-out}dialog::backdrop{background:#2b221ccb;backdrop-filter:blur(8px)}.dialog-head,.controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.dialog-head h2{font-size:24px;margin:0}dialog button{font:inherit;cursor:pointer;color:inherit;background:#fff0b9;border:1px solid var(--line);border-radius:12px;padding:6px 12px}.stage{height:min(53dvh,520px);background:#30281a;border-radius:14px;overflow:hidden}.stage img{height:100%;object-fit:contain;animation:pop .2s ease-out}.controls{margin-top:10px}.thumbs{display:flex;gap:8px;overflow:auto;padding:4px}.thumbs button{flex:0 0 66px;padding:2px;opacity:.7}.thumbs button[aria-pressed=true]{outline:2px solid #806217;opacity:1}.thumbs img{aspect-ratio:4/3;object-fit:cover;border-radius:8px}@keyframes pop{from{opacity:0;transform:translateY(7px)}}@media(max-width:700px){.photos{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
:root{--ink:#28271f;--muted:#625c4d;--paper:#fbfaf5;--line:#e4dece;--yellow:#f4e2a0}
.wrap{width:min(1280px,calc(100% - 80px))}
header{background:#fbfaf5}nav{min-height:76px}.brand{font-size:28px}.nav-link{font-size:14px;text-decoration:none}
.hero{background:#f6efd9;padding:clamp(46px,7vw,100px) 0}
.hero-grid{grid-template-columns:minmax(0, .76fr) minmax(0,1.24fr);gap:clamp(28px,6vw,90px)}
.eyebrow{font-size:14px;margin-bottom:15px}.lead{max-width:32ch;margin-bottom:26px}.button{background:#2b2920;color:#fffdf5;border:0;border-radius:8px}.button:hover{background:#514732}
.showcase{min-width:0}.showcase .hero-photo{display:block;width:100%;padding:0;border:0;border-radius:12px;background:#e4d6ad;overflow:hidden;box-shadow:0 16px 35px #342b161c}.showcase .hero-photo:hover{transform:none}.showcase img{border-radius:0;aspect-ratio:16/9;object-fit:cover}.showcase img.changing{animation:appear .42s ease-out}
@keyframes appear{from{opacity:.4;transform:scale(1.015)}}
.slide-controls{display:flex;align-items:center;gap:7px;margin-top:12px}.slide-label{margin-right:auto;font-size:14px;color:var(--muted)}.slide-controls button{font:inherit;font-size:14px;background:transparent;color:inherit;border:1px solid #cfc4a8;border-radius:7px;padding:4px 9px;cursor:pointer}.slide-controls button:hover{background:#fff9e9}
.gallery{padding-block:clamp(44px,7vw,88px)}.gallery .photos{gap:22px}.card{padding:0;overflow:hidden;border-radius:12px;background:#fffefa}.card img{border-radius:0}.card span{padding:13px 15px}.card:hover{transform:translateY(-3px)}.contact{background:#f6efd9;border-radius:12px}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.hero-grid{grid-template-columns:1fr}.gallery .photos{grid-template-columns:1fr}}

.hero .lead { color: #423b2b; }
.showcase .hero-photo {
  position: relative;
  box-shadow: 0 3px 6px #36271330, 13px 23px 38px #37281747;
}


.hero { padding-top: 0; }
.hero::before {
  content: "";
  display: block;
  height: clamp(170px, 27vw, 395px);
  margin-bottom: clamp(26px, 4vw, 58px);
  background: linear-gradient(0deg, #f6efd9, transparent 28%),
    url("images/coffee-hero.webp") 23% center / cover no-repeat #f6efd9;
}
.showcase .hero-photo { cursor: default; }

.showcase .cover-fade { position:absolute; inset:0; height:100%; animation:cover-fade .55s ease-out both; }
.showcase .hero-photo { aspect-ratio:16 / 9; }
.showcase .hero-photo img { height:100%; }
@keyframes cover-fade { from { opacity:0; } to { opacity:1; } }
.card .card-photo { display:block; padding:0; overflow:hidden; }
.card:is(:hover,:focus-visible) small { text-decoration:underline; text-underline-offset:3px; }
.stage { touch-action:pan-y pinch-zoom; }
@media (prefers-reduced-motion: no-preference) {
  .card-photo img { transition:transform .45s ease; }
  .card:is(:hover,:focus-visible) .card-photo img { transform:scale(1.045); }
}


@media (max-width: 760px) {
  .hero::before {
    height: clamp(110px, 34vw, 195px);
    margin-bottom: 18px;
    background-position: 23% center;
  }
  .hero-grid { gap: 22px; }
  .hero .eyebrow { margin-bottom: 6px; }
  .hero h1 { margin-bottom: 10px; }
  .hero .lead { margin-bottom: 14px; }
}
.stage iframe{display:block;width:100%;height:100%;border:0}.thumbs .video-thumb{font-weight:700;min-height:48px}

.stage.has-video { width:min(100%, calc(63dvh * 16 / 9)); height:auto; aspect-ratio:16 / 9; margin-inline:auto; }
.stage:not(.has-video) {
  height: auto;
  background: transparent;
}
.stage:not(.has-video) img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 63dvh;
  margin-inline: auto;
}
.stage.has-video {
  width: min(100%, calc(63dvh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  background: transparent;
}

.

.site-nav { background:#fbfaf5; }
.site-nav nav { min-height:62px; }
.studio-name { font:700 clamp(17px,4.5vw,24px) "Playfair Display",Georgia,serif; text-decoration:none; }
.site-nav-links { display:flex; gap:clamp(12px,3vw,28px); }
.site-nav-links a { font-weight:700; text-decoration:none; }
.site-nav-links a:hover { text-decoration:underline; text-underline-offset:4px; }