.hub-discovery { margin-bottom: 3rem; }
.hub-intro { display: grid; grid-template-columns: 2fr 3fr; gap: 3rem; align-items: start; margin-bottom: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-outline-variant); }
.hub-intro h2 { max-width: 20ch; margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.25; }
.hub-copy { font-size: 1rem; line-height: 1.75; color: var(--color-on-surface-variant); }
.hub-copy p { margin: 0 0 .75rem; }
.hub-copy p:last-child { margin-bottom: 0; }
.hub-copy a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.hub-copy a:hover { text-decoration-thickness: 2px; }
.hub-copy a:focus-visible, .hub-directory-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.hub-directory-link { display: inline-flex; align-items: center; gap: 1rem; padding: .7rem 0; color: var(--color-primary); text-decoration: underline; text-underline-offset: 5px; }
.grapes-hero { padding-bottom: 2rem; }
.hub-grape-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.hub-comparison-heading { padding: 0 0 1.2rem; border-bottom: 1px solid var(--color-outline-variant); }
.hub-comparison-heading h3 { margin: 0; font-size: 1.35rem; line-height: 1.4; }
.hub-grape-examples { list-style: none; margin: 0; padding: 0; }
.hub-grape-examples li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: 1.4rem 0; border-bottom: 1px solid var(--color-outline-variant); }
.hub-grape-examples .hub-copy > a:first-child { font-weight: 700; }
.hub-grape-photo { width: 88px; height: 100px; overflow: hidden; border-radius: .35rem; }
.hub-grape-photo img { width: 100%; height: 100%; object-fit: cover; }
.hub-note { display: grid; grid-template-columns: 2fr 3fr; column-gap: 3rem; padding: 2rem 0; margin-top: 1rem; }
.hub-note h3 { grid-column: 1; grid-row: 1 / span 2; font-size: 1.5rem; line-height: 1.4; max-width: 25ch; margin: 0; color: var(--color-on-surface); }
.hub-note p { grid-column: 2; }
.hub-note p:last-child, .hub-sources { font-size: .85rem; }
.hub-directory-heading { margin: 0 0 1.25rem; font-size: 2rem; line-height: 1.3; }
#grape-directory { scroll-margin-top: 6rem; }
@media (min-width: 768px) {
    .grapes-density-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.hub-styles-hero.wsi-hero { padding-top: 2rem !important; padding-bottom: 2.5rem !important; }
.hub-intro.hub-styles-intro { display: block; }
.hub-styles-intro h2 { max-width: none; margin-bottom: 1.5rem; }
.hub-style-explainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; align-items: start; }
.hub-style-explainer > p { grid-column: 1; }
.hub-style-explainer > ul { grid-column: 2; grid-row: 1 / span 4; list-style: none; padding: 0; margin: 0; }
.hub-style-explainer li { margin-bottom: 1rem; }
.hub-style-explainer li:last-child { margin-bottom: 0; }
.hub-style-explainer strong { color: var(--color-on-surface); }
.hub-bottle-selection { padding-top: 2rem; padding-bottom: 3rem; }
.hub-selection-copy { max-width: 72ch; margin-bottom: 2rem; }
.hub-selection-copy h2 { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.25; color: var(--color-on-surface); }
.hub-bottle-grid { display: flex; flex-wrap: wrap; gap: 2rem; }
.hub-bottle-example { display: flex; flex-direction: column; flex: 1 1 calc((100% - 4rem) / 3); min-width: 0; }
.hub-bottle-example:only-child { max-width: 420px; }
.hub-bottle-style { margin-bottom: .75rem; }
@media (min-width: 1001px) {
    .hub-bottle-grid:has(> :nth-child(4):last-child) > .hub-bottle-example { flex-basis: calc((100% - 2rem) / 2); }
}
.hub-style-row { display: grid; grid-template-columns: 230px minmax(180px, 1fr) minmax(0, 2fr); gap: 2rem; align-items: start; padding: 2rem 0; border-top: 1px solid var(--color-outline-variant); }
.hub-style-photo-link { display: block; border-radius: .4rem; }
.hub-style-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .4rem; }
.hub-style-heading h3 { margin: 0; font-size: 1.4rem; line-height: 1.4; }
.hub-style-heading a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hub-style-heading a:hover { text-decoration-thickness: 2px; }
.hub-style-heading a:focus-visible, .hub-style-photo-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.hub-style-row > .hub-copy > p:last-child > a:only-child { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem 0; font-weight: 700; }
.hub-style-count { margin-top: 1rem; color: var(--color-on-surface-variant); font-size: .8rem; line-height: 1.6; }
.hub-sources { padding: 1.5rem 0; border-top: 1px solid var(--color-outline-variant); }
@media (max-width: 1000px) {
    .hub-bottle-example { flex-basis: calc((100% - 2rem) / 2); }
    .hub-style-row { grid-template-columns: 170px minmax(0, 1fr); gap: 1rem 2rem; }
    .hub-style-photo-link { grid-row: 1 / span 2; }
    .hub-style-row > .hub-copy { grid-column: 2; }
    .hub-style-count { margin-top: .5rem; }
    .hub-grape-comparison { gap: 2rem; }
    .hub-grape-examples li { grid-template-columns: 64px minmax(0, 1fr); gap: .85rem; }
    .hub-grape-photo { width: 64px; height: 80px; }
}
@media (max-width: 700px) {
    .hub-style-explainer { display: block; }
    .hub-style-explainer > ul { margin-top: 1.5rem; }
    .hub-intro, .hub-note { grid-template-columns: 1fr; gap: 1rem; }
    .hub-intro { margin-bottom: 1.75rem; padding-top: 1.5rem; }
    .hub-intro h2 { max-width: 25ch; }
    .hub-copy { font-size: .95rem; line-height: 1.7; }
    .hub-grape-comparison { grid-template-columns: 1fr; gap: 2rem; }
    .hub-grape-examples li { padding: 1.1rem 0; }
    .hub-note h3, .hub-note p { grid-column: 1; grid-row: auto; }
    .hub-note h3 { font-size: 1.3rem; }
    .hub-style-row { grid-template-columns: 100px minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; align-items: center; }
    .hub-style-photo-link { grid-row: 1; }
    .hub-style-photo { aspect-ratio: 1; }
    .hub-style-heading h3 { font-size: 1.2rem; }
    .hub-style-row > .hub-copy { grid-column: 1 / -1; }
    .hub-styles-hero.wsi-hero { padding-top: 1.5rem !important; padding-bottom: 1.75rem !important; }
    .hub-discovery { margin-bottom: 2rem; }
}
@media (max-width: 540px) {
    .hub-bottle-example { flex-basis: 100%; }
}