/* ============================================================
BACKYARD BAR & CAFÉ — Design System
Identidade visual oficial: Lais Sindorf
Paleta: verde #2c5611, azul #1859c1, bordô #9e1b2b,
quase-preto #231f1c (dominante), creme #dcdcd0
Tipografia: Bricolage Grotesque + Libre Baskerville Italic
============================================================ */
/* Fonte do Google Fonts: movida para no (generator.py) com
preconnect — @import aqui criava uma cadeia sequencial lenta (o navegador
só descobria a fonte depois de baixar e interpretar todo este arquivo). */
:root{
/* Paleta oficial */
--ink: #231f1c; /* quase-preto — fundo dominante */
--ink-soft: #2a2521; /* variação sutil pra profundidade entre seções */
--cream: #dcdcd0; /* off-white — texto sobre fundo escuro */
--cream-dim: #b9b8ad; /* creme acinzentado — texto secundário */
--green: #2c5611; /* cardápio / natureza / quintal */
--green-soft: #3d7318;
--blue: #1859c1; /* eventos / institucional / letreiro */
--blue-soft: #2f6fd6;
--wine: #9e1b2b; /* karaokê / música / noite */
--wine-soft: #b93042;
--white: #f7f6f2;
/* Tipografia */
--f-display: 'Bricolage Grotesque', system-ui, sans-serif;
--f-body: 'Bricolage Grotesque', system-ui, sans-serif;
--f-editorial: 'Libre Baskerville', Georgia, serif;
--f-menu: 'Archivo Black', 'Bricolage Grotesque', system-ui, sans-serif; /* aproximação da Horizon (fonte de marca não disponível via web font) — reservada para títulos de cardápio */
/* Escala tipográfica fluida (clamp = responsivo sem media query) */
--fs-hero: clamp(2.6rem, 6vw + 1rem, 5.6rem);
--fs-h1: clamp(2.1rem, 4vw + 1rem, 3.4rem);
--fs-h2: clamp(1.6rem, 2.4vw + 1rem, 2.3rem);
--fs-h3: clamp(1.25rem, 1.4vw + 1rem, 1.6rem);
--fs-h4: clamp(1.05rem, 0.6vw + 1rem, 1.2rem);
--fs-lead: clamp(1.1rem, 1vw + 0.9rem, 1.35rem);
--fs-body: 1.0625rem;
--fs-small: 0.9rem;
--fs-eyebrow: 0.96rem; /* +20% a pedido de Fábio (era 0.8rem) */
/* Ritmo vertical — espaçamento assertivo entre seções (pedido explícito) */
--section-pad: clamp(4.5rem, 9vw, 8.5rem);
--section-pad-sm: clamp(3rem, 6vw, 5rem);
--stack-lg: clamp(2.5rem, 5vw, 4rem);
--stack-md: clamp(1.5rem, 3vw, 2.25rem);
--stack-sm: clamp(0.9rem, 1.6vw, 1.25rem);
--radius: 2px;
--radius-lg: 4px;
--container: 1180px;
--container-narrow: 780px;
--ease: cubic-bezier(.25,.7,.35,1);
}
*,*::before,*::after{ box-sizing:border-box; min-width:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
body{
margin:0;
background:var(--ink);
color:var(--cream);
font-family:var(--f-body);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
/* ---------- Foco visível (acessibilidade) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
outline:2px solid var(--cream);
outline-offset:3px;
border-radius:1px;
}
/* ---------- Tipografia ---------- */
h1,h2,h3,h4{
font-family:var(--f-display);
font-weight:800;
line-height:1.08;
letter-spacing:-0.01em;
margin:0;
color:var(--white);
text-wrap:balance; /* equilibra automaticamente a extensão das linhas, evita órfãs */
max-width:22ch;
}
h1{ font-size:var(--fs-h1); max-width:18ch; }
h2{ font-size:var(--fs-h2); max-width:20ch; }
h3{ font-size:var(--fs-h3); font-weight:700; max-width:26ch; }
h4{ font-size:var(--fs-h4); font-weight:700; max-width:28ch; }
.hero h1{ max-width:16ch; }
p{ margin:0 0 1em; max-width:65ch; text-wrap:pretty; overflow-wrap:break-word; }
p:last-child{ margin-bottom:0; }
.lead{
font-size:var(--fs-lead);
color:var(--cream);
max-width:56ch;
line-height:1.55;
text-wrap:pretty;
}
.editorial{
font-family:var(--f-editorial);
font-style:italic;
font-weight:400;
}
.eyebrow{
font-family:var(--f-body);
font-size:var(--fs-eyebrow);
font-weight:700;
letter-spacing:0.14em;
text-transform:uppercase;
display:inline-flex;
align-items:center;
gap:0.6em;
margin-bottom:1em;
}
.eyebrow::before{
content:"";
width:28px; height:2px;
background:currentColor;
display:inline-block;
}
/* Cores de acento por pilar — sistema de wayfinding cromático */
.accent-green{ color:var(--green-soft); }
.accent-blue{ color:var(--blue-soft); }
.accent-wine{ color:var(--wine-soft); }
.bg-green{ background:var(--green); color:var(--white); }
.bg-blue{ background:var(--blue); color:var(--white); }
.bg-wine{ background:var(--wine); color:var(--white); }
.bg-cream{ background:var(--cream); color:var(--ink); }
.bg-cream h1,.bg-cream h2,.bg-cream h3,.bg-cream h4{ color:var(--ink); }
.bg-ink-soft{ background:var(--ink-soft); }
/* ---------- Layout ---------- */
.container{
width:100%;
max-width:var(--container);
margin-inline:auto;
padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}
.container-narrow{
width:100%;
max-width:var(--container-narrow);
margin-inline:auto;
padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}
.section{
padding-block:var(--section-pad);
position:relative;
}
.section-sm{ padding-block:var(--section-pad-sm); }
.section-tight-top{ padding-top:var(--section-pad-sm); }
.section-tight-bottom{ padding-bottom:var(--section-pad-sm); }
.stack > * + *{ margin-top:var(--stack-md); }
.stack-lg > * + *{ margin-top:var(--stack-lg); }
.stack-sm > * + *{ margin-top:var(--stack-sm); }
.divider{
width:100%; height:1px;
background:linear-gradient(90deg, transparent, rgba(220,220,208,0.18), transparent);
border:0;
margin:0;
}
/* ---------- Grid utilitário ---------- */
.grid{ display:grid; gap:clamp(1.5rem, 3vw, 2.5rem); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
@media(min-width:680px){
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:960px){
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
}
/* ---------- Header / navegação ---------- */
.site-header{
position:sticky; top:0; z-index:100;
background:rgba(35,31,28,0.92);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(220,220,208,0.1);
}
.site-header .container{
display:flex; align-items:center; justify-content:space-between;
padding-block:0.9rem;
}
.logo{
display:flex; flex-direction:column; gap:2px;
color:var(--white); /* alimenta o fill=currentColor do SVG */
width:fit-content; /* evita que o CSS Grid do rodapé estique o link e distorça a logo */
}
.logo .logo-svg{ height:24px; align-self:flex-start; } /* +20% a pedido de Fábio (era 20px) */
.logo span{ color:var(--cream-dim); font-family:var(--f-body); font-style:normal; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }
.nav-desktop{ display:none; }
@media(min-width:1100px){
.nav-desktop{ display:flex; align-items:center; gap:clamp(0.9rem,1.4vw,1.7rem); }
.nav-desktop a{
font-size:0.9rem; font-weight:600; color:var(--cream-dim);
transition:color .2s var(--ease);
position:relative; padding-block:0.3rem;
white-space:nowrap;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"]{ color:var(--white); }
.nav-desktop a[aria-current="page"]::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--wine-soft);
}
}
.nav-cta.btn{
display:none;
}
@media(min-width:1100px){
.nav-cta.btn{ display:inline-flex; white-space:nowrap; }
}
.nav-toggle{
background:none; border:1px solid rgba(220,220,208,0.3); border-radius:var(--radius);
width:42px; height:42px; display:flex; align-items:center; justify-content:center;
color:var(--cream);
}
@media(min-width:1100px){ .nav-toggle{ display:none; } }
.nav-mobile{
display:none;
position:fixed; inset:0; top:64px;
background:var(--ink);
z-index:101;
padding:2rem clamp(1.25rem,4vw,2.5rem);
overflow-y:auto;
}
.nav-mobile.is-open{ display:block; }
.nav-mobile ul{ display:flex; flex-direction:column; gap:0; }
.nav-mobile li{ border-bottom:1px solid rgba(220,220,208,0.1); }
.nav-mobile a{
display:block; padding:1.1rem 0; font-size:1.15rem; font-weight:700; color:var(--white);
}
.nav-mobile .nav-mobile-cta{ margin-top:2rem; }
/* ---------- Botões ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:0.5em;
font-family:var(--f-body); font-weight:700; font-size:0.95rem;
padding:0.9rem 1.7rem;
border-radius:var(--radius);
border:1.5px solid transparent;
transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
white-space:normal;
text-align:center;
max-width:100%;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--wine); color:var(--white); }
.btn-primary:hover{ background:var(--wine-soft); }
.btn-green{ background:var(--green); color:var(--white); }
.btn-green:hover{ background:var(--green-soft); }
.btn-blue{ background:var(--blue); color:var(--white); }
.btn-blue:hover{ background:var(--blue-soft); }
.btn-outline{ border-color:rgba(220,220,208,0.4); color:var(--cream); }
.btn-outline:hover{ border-color:var(--cream); background:rgba(220,220,208,0.06); }
.btn-outline-dark{ border-color:rgba(35,31,28,0.35); color:var(--ink); }
.btn-outline-dark:hover{ border-color:var(--ink); background:rgba(35,31,28,0.06); }
.btn-hover-green:hover{ background:var(--green) !important; border-color:var(--green) !important; color:#fff !important; }
.btn-block{ width:100%; }
/* ---------- Hero ---------- */
.hero{
padding-block: clamp(5rem, 12vw, 9rem) var(--section-pad);
position:relative;
overflow:hidden;
}
.hero::before{
content:"";
position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 50% at 15% 0%, rgba(158,27,43,0.18), transparent 60%),
radial-gradient(ellipse 50% 40% at 100% 20%, rgba(24,89,193,0.14), transparent 60%);
pointer-events:none;
}
.hero-inner{ position:relative; max-width:820px; }
.hero h1{ font-size:var(--fs-hero); }
.hero .lead{ margin-top:var(--stack-md); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:var(--stack-lg); }
.hero-breadcrumb{
display:flex; flex-wrap:wrap; gap:0.4em;
font-size:0.82rem; color:var(--cream-dim); margin-bottom:var(--stack-sm);
}
.hero-breadcrumb a:hover{ color:var(--white); }
.hero-breadcrumb span[aria-hidden]{ opacity:0.5; }
/* ---------- Cards ---------- */
.card{
background:var(--ink-soft);
border:1px solid rgba(220,220,208,0.08);
border-radius:var(--radius-lg);
padding:clamp(1.5rem,3vw,2.25rem);
border-top:3px solid var(--wine);
transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{ transform:translateY(-3px); }
.card.card-green{ border-top-color:var(--green-soft); }
.card.card-blue{ border-top-color:var(--blue-soft); }
.card.card-wine{ border-top-color:var(--wine-soft); }
.card h3{ margin-bottom:0.6em; }
.card p{ color:var(--cream-dim); font-size:0.97rem; }
.card-icon{ width:34px; height:34px; margin-bottom:1rem; color:var(--cream); }
/* ---------- Ícones line-art (assinatura visual da marca) ---------- */
.line-icon{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
/* ---------- Selos / Badges (Opção 16 — direção escolhida) ---------- */
.badges-row{
display:flex; gap:0.7rem; flex-wrap:wrap;
}
.selo{
padding:0.5rem 1.1rem;
border-radius:30px;
font-size:0.8rem;
font-weight:700;
border:1.5px solid;
white-space:nowrap;
}
.selo-wine{ color:var(--wine-soft); border-color:var(--wine-soft); }
.selo-green{ color:var(--green-soft); border-color:var(--green-soft); }
.selo-blue{ color:var(--blue-soft); border-color:var(--blue-soft); }
.selo-cream{ color:var(--cream); border-color:rgba(220,220,208,0.4); }
/* Selo/etiqueta flutuante no topo do card (marca a categoria) */
.card{ position:relative; overflow:visible; }
.card .card-tag{
position:absolute; top:-11px; left:1.5rem;
background:var(--wine); color:#fff;
font-size:0.68rem; font-weight:800;
padding:0.32rem 0.8rem;
border-radius:20px;
text-transform:uppercase;
letter-spacing:0.03em;
z-index:2;
}
.card.card-green .card-tag{ background:var(--green-soft); }
.card.card-blue .card-tag{ background:var(--blue-soft); }
.card.card-wine .card-tag{ background:var(--wine-soft); }
/* ---------- Título estilo cardápio (aproximação da Horizon) ---------- */
.menu-heading{
font-family:var(--f-menu);
font-weight:400;
text-transform:uppercase;
letter-spacing:0.01em;
color:var(--white);
line-height:1;
}
/* ---------- Logo em SVG real ---------- */
.logo-svg{
height:22px;
width:auto;
display:block;
}
.logo-svg.cream path{ fill:var(--cream); }
/* ---------- Ícone real da marca (line-art autêntico) ---------- */
.real-icon{ width:56px; height:56px; object-fit:contain; }
.real-icon-lg{ width:88px; height:88px; object-fit:contain; }
/* ---------- Ilustração de categoria (cardápio real) ---------- */
.category-illustration{
max-width:280px;
width:100%;
margin-inline:auto;
opacity:0.92;
}
/* ---------- Foto real (páginas institucionais / ambiente) ---------- */
.real-photo{
width:100%; height:100%; object-fit:cover; display:block;
border-radius:var(--radius-lg);
}
.photo-frame{
border-radius:var(--radius-lg);
overflow:hidden;
aspect-ratio:4/3;
}
.photo-frame.square{ aspect-ratio:1/1; }
.photo-frame.tall{ aspect-ratio:3/4; }
.photo-frame.wide{ aspect-ratio:16/9; }
.photo-grid{
display:grid; gap:0.9rem;
grid-template-columns:repeat(2,1fr);
}
@media(max-width:679px){ .photo-grid-3{ grid-template-columns:1fr; } }
@media(min-width:680px){ .photo-grid-3{ grid-template-columns:repeat(3,1fr); } }
/* ---------- Item de cardápio ---------- */
.menu-item{
padding-block:1.4rem;
border-bottom:1px solid rgba(220,220,208,0.14);
min-width:0;
}
.menu-item.has-photo{
display:flex; gap:1.1rem; align-items:flex-start;
}
.menu-item-photo{
width:84px; height:84px; flex-shrink:0; border-radius:6px; object-fit:cover;
border:1px solid rgba(220,220,208,0.15);
}
.menu-item-body{ flex:1; min-width:0; }
.menu-item-head{
display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0.4rem 1rem;
min-width:0;
}
.menu-item-head h4{ font-size:1.05rem; min-width:0; flex:1 1 auto; }
.menu-item-price{
font-weight:800; color:var(--white); white-space:nowrap; font-size:1.02rem; flex-shrink:0;
}
.menu-item-ref{
font-family:var(--f-editorial); font-style:italic; font-size:0.88rem;
color:var(--cream-dim); margin-top:0.15rem;
}
.menu-item-desc{ color:var(--cream-dim); font-size:0.92rem; margin-top:0.4rem; max-width:60ch; overflow-wrap:break-word; }
/* ---------- FAQ ---------- */
.faq-item{
border-bottom:1px solid rgba(220,220,208,0.14);
padding-block:1.4rem;
}
.faq-item summary{
cursor:pointer; list-style:none;
display:flex; align-items:center; justify-content:space-between; gap:1rem;
font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--white);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
content:"+"; font-size:1.5rem; font-weight:400; color:var(--cream-dim); flex-shrink:0;
transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-a{ margin-top:0.9rem; color:var(--cream-dim); max-width:68ch; }
/* ---------- Blockquote / prova social ---------- */
.pull-quote{
font-family:var(--f-editorial); font-style:italic;
font-size:clamp(1.3rem,2vw,1.7rem);
line-height:1.5;
color:var(--white);
border-left:3px solid var(--wine);
padding-left:clamp(1.2rem,3vw,2rem);
max-width:56ch;
}
.pull-quote cite{ display:block; font-style:normal; font-family:var(--f-body); font-size:0.85rem; color:var(--cream-dim); margin-top:1em; font-weight:600; }
/* ---------- Footer ---------- */
.site-footer{
background:#1a1714;
padding-block:var(--section-pad-sm) 2.5rem;
border-top:1px solid rgba(220,220,208,0.08);
}
.footer-grid{
display:grid; gap:2.5rem;
grid-template-columns:1fr;
}
@media(min-width:680px){ .footer-grid{ grid-template-columns:1.1fr 1fr 1.1fr; } }
.footer-grid h4{ color:var(--cream-dim); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-grid ul{ display:flex; flex-direction:column; gap:0.65rem; }
.footer-grid a{ color:var(--cream-dim); font-size:0.92rem; transition:color .18s var(--ease); }
.footer-grid a:hover{ color:var(--white); }
/* Coluna Explorar — hover colorido com as cores da identidade, sem repetir cor adjacente (mesmo esquema do Music Box) */
.footer-explore .fx-1:hover{ color:var(--wine-soft); }
.footer-explore .fx-2:hover{ color:var(--green-soft); }
.footer-explore .fx-3:hover{ color:var(--blue-soft); }
.footer-logo{ margin-bottom:0; }
.social-icon{ display:inline-flex; align-items:center; gap:0.5em; }
.social-icon svg{ flex-shrink:0; }
.footer-address{ font-size:0.82rem; line-height:1.5; white-space:normal; }
.footer-bottom{
margin-top:var(--stack-lg);
padding-top:1.75rem;
border-top:1px solid rgba(220,220,208,0.08);
display:flex; flex-wrap:wrap; gap:1rem;
justify-content:space-between; align-items:center;
font-size:0.82rem; color:var(--cream-dim);
}
.footer-bottom a:hover{ color:var(--white); }
/* ---------- Utilitários de texto ---------- */
.text-center{ text-align:center; }
/* Correção definitiva: h1/h2/h3 têm max-width próprio (para legibilidade),
o que sem margin:auto trava o bloco à esquerda mesmo com text-align:center
herdado do pai. Força centralização real do bloco sempre que estiver
dentro de um container .text-center. */
.text-center h1, .text-center h2, .text-center h3, .text-center .lead{
margin-inline:auto;
}
.max-w-content{ max-width:var(--container-narrow); margin-inline:auto; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
position:absolute; left:1rem; top:-100px;
background:var(--wine); color:#fff; padding:0.8rem 1.2rem; border-radius:var(--radius);
z-index:200; transition:top .2s var(--ease); font-weight:700;
}
.skip-link:focus{ top:1rem; }
/* ---------- CTA banda final ---------- */
.cta-band{
text-align:center;
}
.cta-band h2{ max-width:24ch; margin-inline:auto; }
.cta-band .lead{ margin-inline:auto; }
.cta-band .hero-actions{ justify-content:center; }
/* ---------- WhatsApp flutuante ---------- */
.whatsapp-float{
position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
width:56px; height:56px; border-radius:50%;
background:var(--green); color:#fff; /* cor oficial da marca #2c5611, a pedido de Fábio (era verde genérico do WhatsApp) */
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 20px rgba(0,0,0,0.35);
transition:transform .2s var(--ease);
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; }
/* ---------- Responsivo — ajustes finos mobile ---------- */
@media(max-width:679px){
.hero-actions .btn{ width:100%; min-width:0; white-space:normal; text-align:center; }
.hero-actions{ flex-direction:column; }
}
/* text-wrap:balance (nos títulos) já resolve palavras órfãs e equilibra as linhas automaticamente —
quebras manuais
ficam neutralizadas para não conflitar com o balanceamento nativo */
.brk{ display:none; }
/* ---------- Foto do hero (acima do H1, carregamento prioritário) ---------- */
.hero-photo{ line-height:0; }
.hero-photo img{
display:block; width:100%; height:auto;
aspect-ratio:1400/933;
object-fit:cover;
}
/* Home: espaço entre a foto do hero e o H1 reduzido pela metade
(metade de clamp(5rem, 12vw, 9rem), o padding-top padrão de .hero) */
.hero-photo + .hero{
padding-top: clamp(2.5rem, 6vw, 4.5rem);
padding-bottom: clamp(2.25rem, 4.5vw, 4.25rem);
}
/* ---------- Carrossel de fotos (home) ---------- */
/* Técnica inline-block + white-space:nowrap (não flexbox) — é o padrão de
scroll horizontal mais testado entre navegadores/motores mobile, evita
qualquer inconsistência de flex-wrap/gap em engines mais antigos. */
.carousel-section{ overflow:hidden; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.carousel-wrap{ position:relative; }
.carousel-track{
display:block;
white-space:nowrap;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
padding-bottom:0.6rem; margin:0 -0.25rem;
scrollbar-width:thin; scrollbar-color:var(--wine) transparent;
font-size:0; /* remove whitespace gap between inline-block children */
}
.carousel-track::-webkit-scrollbar{ height:6px; }
.carousel-track::-webkit-scrollbar-thumb{ background:var(--wine); border-radius:10px; }
.carousel-slide{
display:inline-block; vertical-align:top; white-space:normal; font-size:1rem;
width:78%; max-width:340px;
margin-right:1rem;
scroll-snap-align:start;
}
.carousel-slide:last-child{ margin-right:0; }
.carousel-slide .photo-frame{ aspect-ratio:4/3; }
.carousel-btn{
position:absolute; top:50%; transform:translateY(-50%);
width:44px; height:44px; border-radius:50%;
background:var(--ink); border:1px solid rgba(255,255,255,0.25); color:var(--white);
display:flex; align-items:center; justify-content:center;
cursor:pointer; z-index:5; font-size:1.3rem; line-height:1;
transition:background .2s var(--ease), transform .2s var(--ease);
}
.carousel-btn:hover{ background:var(--wine); transform:translateY(-50%) scale(1.06); }
.carousel-btn-prev{ left:-6px; }
.carousel-btn-next{ right:-6px; }
@media(max-width:679px){
.carousel-slide{ width:82%; }
.carousel-btn{ display:none; }
}
@media(min-width:960px){
.carousel-slide{ width:31%; }
}