:root {
--grape-ink: #23191d;
--grape-wine: #6f1938;
--grape-wine-light: #a93e67;
--grape-cream: #fbf7f2;
--grape-line: #e6d9dc;
}
.grapeful-intro {
border-left: 4px solid var(--grape-wine);
color: #47383e;
font-size: 1.05rem;
line-height: 1.7;
margin: 0 0 1.5rem;
padding: .9rem 1.15rem;
background: var(--grape-cream);
}
.grapeful-map {
width: 100%;
height: min(68vh, 680px);
min-height: 470px;
border: 1px solid var(--grape-line);
border-radius: 4px;
box-shadow: 0 14px 35px rgba(45, 20, 29, .08);
z-index: 1;
}
.grapeful-wine-marker-wrap {
background: transparent;
border: 0;
}
.grapeful-wine-marker {
display: block;
filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
height: 42px;
overflow: visible;
width: 32px;
}
.grapeful-wine-marker .grapeful-glass { fill: rgba(255, 255, 255, .92); stroke: #5f1530; stroke-width: 2; }
.grapeful-wine-marker .grapeful-wine { fill: #8c294d; }
.grapeful-wine-marker .grapeful-stem { fill: none; stroke: #5f1530; stroke-linecap: round; stroke-width: 2.2; }
.grapeful-popup h3 {
font-size: 1.05rem;
margin: 0 0 .45rem;
}
.grapeful-popup p { margin: .4rem 0; }
.grapeful-popup-events { margin: .5rem 0 0 1.1rem; }
.grapeful-popup-events li { margin-bottom: .32rem; }
.grapeful-list-heading {
font-size: 1.4rem;
margin: 2rem 0 1rem;
}
.grapeful-section-heading {
border-bottom: 1px solid var(--grape-line);
color: var(--grape-ink);
font-size: 1.55rem;
margin: 2.2rem 0 1rem;
padding-bottom: .55rem;
}
.grapeful-index-grid,
.grapeful-card-grid,
.grapeful-profile-grid,
.grapeful-stat-grid {
display: grid;
gap: 1rem;
}
.grapeful-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grapeful-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grapeful-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grapeful-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 1.2rem; }
.grapeful-stat-grid-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grapeful-index-item,
.grapeful-profile,
.grapeful-card,
.grapeful-stat-grid > div,
.grapeful-origin-summary,
.grapeful-story-links {
background: #fff;
border: 1px solid var(--grape-line);
border-radius: 4px;
padding: 1rem 1.1rem;
}
.grapeful-index-item { display: flex; flex-direction: column; gap: .35rem; }
.grapeful-index-item small { color: #66565c; line-height: 1.45; }
.grapeful-index-item .grapeful-winery-city,
.grapeful-popup .grapeful-winery-city { color: var(--grape-wine); font-weight: 700; margin: 0; }
.grapeful-index-item .grapeful-popup-events { font-size: .88rem; }
.grapeful-card {
color: var(--grape-ink);
display: flex;
flex-direction: column;
min-height: 180px;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.grapeful-card:hover,
.grapeful-card:focus {
box-shadow: 0 15px 35px rgba(45, 20, 29, .12);
color: var(--grape-wine);
transform: translateY(-3px);
}
.grapeful-card span,
.grapeful-kicker {
color: var(--grape-wine);
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
margin: 0 0 .6rem;
}
.grapeful-card strong { font-size: 1.35rem; margin-bottom: .65rem; }
.grapeful-card small { color: #62545a; line-height: 1.55; }
.grapeful-stat-grid > div {
background: linear-gradient(145deg, #fff 0%, #f8edf1 100%);
border-top: 4px solid var(--grape-wine-light);
box-shadow: 0 8px 22px rgba(63, 24, 39, .07);
text-align: center;
}
.grapeful-stat-grid > div:nth-child(2n) { border-top-color: #c87a56; }
.grapeful-stat-grid strong { color: var(--grape-wine); display: block; font-size: clamp(1.65rem, 4vw, 2.6rem); }
.grapeful-stat-grid span { color: #66565c; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.grapeful-origin-summary { margin-bottom: 1.2rem; }
.grapeful-origin-summary h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.grapeful-origin-summary p { margin: 0 0 .5rem; }
.grapeful-origin-summary small { color: #6b5b61; }
.grapeful-ranking-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grapeful-ranking { background: var(--grape-cream); border-radius: 4px; padding: 1rem; }
.grapeful-ranking h3 { color: var(--grape-wine); font-size: 1.02rem; margin: 0 0 .75rem; }
.grapeful-ranking ol { list-style: none; margin: 0; padding: 0; }
.grapeful-ranking li { align-items: baseline; border-top: 1px solid #eadde1; display: flex; gap: .65rem; justify-content: space-between; padding: .48rem 0; }
.grapeful-ranking li:first-child { border-top: 0; }
.grapeful-ranking li span { color: #4e3e44; font-size: .86rem; line-height: 1.35; }
.grapeful-ranking li strong { color: var(--grape-wine); flex: 0 0 auto; font-size: .9rem; }
.grapeful-profile h3 { color: var(--grape-wine); font-size: 1.25rem; margin: 0 0 .7rem; }
.grapeful-profile p { line-height: 1.6; }
.grapeful-profile-link { color: var(--grape-ink); display: block; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.grapeful-profile-link:hover,
.grapeful-profile-link:focus { box-shadow: 0 15px 35px rgba(45, 20, 29, .12); color: var(--grape-wine); transform: translateY(-3px); }
.grapeful-profile-link > span:last-child { color: var(--grape-wine); font-weight: 700; }
.grapeful-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.grapeful-tags span { background: #f6e9ee; border-radius: 999px; color: #62213a; font-size: .82rem; padding: .27rem .62rem; text-transform: capitalize; }
.grapeful-search-label { display: block; font-weight: 700; margin-bottom: .45rem; }
.grapeful-search { border: 1px solid #cbbac0; border-radius: 3px; margin-bottom: 1.25rem; max-width: 620px; padding: .8rem 1rem; width: 100%; }
.grapeful-profile[hidden] { display: none; }
.grapeful-map-search-panel,
.grapeful-atlas-controls {
background: var(--grape-cream);
border: 1px solid var(--grape-line);
border-left: 4px solid var(--grape-wine);
border-radius: 4px;
margin: 1.5rem 0 0;
padding: 1rem 1.15rem .85rem;
}
.grapeful-map-search-panel .grapeful-search { margin-bottom: .4rem; }
.grapeful-atlas-controls .grapeful-search { margin-bottom: .8rem; }
.grapeful-atlas-controls select.grapeful-search { background: #fff; min-height: 48px; }
.grapeful-atlas-stats { margin-bottom: 1.5rem; }
.grapeful-map-search-status { color: #66565c; font-size: .88rem; min-height: 1.35em; margin: 0; }
.grapeful-index-item[hidden],
.grapeful-country-group[hidden] { display: none !important; }
.grapeful-story-links { border-left: 4px solid var(--grape-wine); margin-top: 2.5rem; }
.grapeful-story-links h2 { font-size: 1.4rem; margin: 0 0 .5rem; }
.grapeful-story-links ul { margin-bottom: 0; }
.grapeful-error { color: #8a1d1d; font-weight: 700; }
.grapeful-origin-index { display: grid; gap: 1.35rem; }
.grapeful-country-group { border-top: 3px solid var(--grape-wine); padding-top: .85rem; }
.grapeful-country-group > h3 { color: var(--grape-wine); font-size: 1.35rem; margin: 0 0 .85rem; padding-left: 1.1rem; }
.grapeful-instagram-fallback {
background: linear-gradient(145deg, #fff 0%, #fbf0f4 100%);
border: 1px solid var(--grape-line);
border-left: 4px solid var(--grape-wine);
border-radius: 4px;
margin: 1.5rem 0;
max-width: 540px;
padding: 1.2rem 1.3rem;
}
.grapeful-instagram-fallback h3 { color: var(--grape-wine); font-size: 1.25rem; margin: 0 0 .55rem; }
.grapeful-instagram-fallback p { margin: 0 0 .8rem; }
.grapeful-instagram-fallback a { font-weight: 700; }
@media screen and (min-width: 56.875em) {
body .site-header .main-navigation > div > ul > li > a {
font-size: 16px;
padding-left: .7em;
padding-right: .7em;
white-space: nowrap;
}
body .site-header .main-navigation > div > ul {
align-items: center;
}
body .site-header .main-navigation ul.sub-menu {
max-width: calc(100vw - 2rem) !important;
min-width: max-content !important;
width: max-content !important;
}
body .site-header .main-navigation ul.sub-menu li {
box-sizing: border-box;
width: 100% !important;
}
body .site-header .main-navigation ul.sub-menu li > a {
box-sizing: border-box;
line-height: 1.3;
padding-left: .875em;
padding-right: .875em;
padding-bottom: .72em;
padding-top: .72em;
white-space: nowrap;
width: auto !important;
}
body .site-header .main-navigation .menu-item-has-children > a::after {
content: none !important;
display: none !important;
}
body .site-header .main-navigation > div > ul > li.menu-item-has-children > a {
padding-right: .7em;
}
body .site-header .main-navigation > div > ul > li > ul.sub-menu {
left: -999em !important;
right: auto !important;
}
body .site-header .main-navigation > div > ul > li:hover > ul.sub-menu,
body .site-header .main-navigation > div > ul > li.focus > ul.sub-menu,
body .site-header .main-navigation > div > ul > li:focus-within > ul.sub-menu {
left: 0 !important;
right: auto !important;
}
body .site-header .main-navigation > div > ul > li > ul.sub-menu::before {
left: 9px !important;
right: auto !important;
}
body .site-header .main-navigation > div > ul > li > ul.sub-menu::after {
left: 11px !important;
right: auto !important;
}
body .site-header .main-navigation ul.sub-menu ul.sub-menu {
left: -999em !important;
margin-left: -1px;
right: auto !important;
top: -1px;
}
body .site-header .main-navigation ul.sub-menu li:hover > ul.sub-menu,
body .site-header .main-navigation ul.sub-menu li.focus > ul.sub-menu,
body .site-header .main-navigation ul.sub-menu li:focus-within > ul.sub-menu {
left: 100% !important;
right: auto !important;
}
}
@media (max-width: 760px) {
.grapeful-map { min-height: 420px; }
.grapeful-index-grid,
.grapeful-profile-grid,
.grapeful-card-grid,
.grapeful-ranking-grid { grid-template-columns: 1fr; }
.grapeful-stat-grid { gap: .5rem; }
.grapeful-stat-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grapeful-stat-grid > div { padding: .75rem .35rem; }
}
@media (min-width: 761px) and (max-width: 1100px) {
.grapeful-ranking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}