/****************************
Homepage
****************************/

/****************************
Lead story and score rail
****************************/

/* White, so the lead sits on the same ground as the masthead. */
.homeMain {
    border-bottom: 1px solid var(--rule);
}

.homeMainInner {
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
    padding-block: 40px 56px;
}

@media (min-width: 1000px) {
    .homeMainInner {
        align-items: start;
        column-gap: 48px;
        grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
    }
}

.homeLead {
    min-width: 0;
}

.homeLeadMedia .figurePicture {
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
}

.homeLeadMedia .figurePictureImage {
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    width: 100%;
}

.homeLeadMedia .figureCaption {
    font-size: 11px;
}

.homeLeadEyebrow {
    display: block;
    margin-top: 24px;
}

.homeLeadTitle {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.16;
    margin-top: 16px;
    text-wrap: balance;
}

@media (min-width: 700px) {
    .homeLeadTitle {
        font-size: 38px;
    }
}

.homeLeadTitleLink:hover {
    color: var(--claret);
}

.homeLeadNote {
    color: var(--ink-70);
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.66;
    margin-top: 20px;
    max-width: 46ch;
}

.homeLeadBar {
    align-items: flex-end;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
    padding-top: 20px;
}

.homeLeadBarScore {
    color: var(--claret);
    font-family: var(--font-display);
    font-size: 52px;
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.82;
}

.homeLeadBarFacts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 0;
}

.homeLeadBarFactsItemLabel {
    color: var(--ink-45);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.homeLeadBarFactsItemValue {
    font-size: 14px;
    font-variant-numeric: tabular-nums lining-nums;
    margin: 4px 0 0;
}

.homeLeadBarFactsItemValueLink {
    border-bottom: 1px solid var(--rule-strong);
}

.homeLeadBarFactsItemValueLink:hover {
    border-color: var(--claret);
    color: var(--claret);
}

.homeLeadMore {
    border-bottom: 1px solid var(--claret);
    color: var(--claret);
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-top: 24px;
    text-transform: uppercase;
}

.homeLeadMore:hover {
    color: var(--claret-dark);
}

.homeRail {
    min-width: 0;
}

@media (min-width: 1000px) {
    .homeRail {
        border-left: 1px solid var(--rule);
        padding-left: 48px;
    }
}

.homeRailHeading {
    border-bottom: 2px solid var(--ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.homeRailList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.homeRailListItem {
    border-bottom: 1px solid var(--rule);
}

/* The link is the row. */
.homeRailListItemLink {
    align-items: center;
    display: grid;
    gap: 16px;
    /* the wine and its score */
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 12px;
}

.homeRailListItemLink:hover {
    background-color: var(--parchment);
}

.homeRailListItemLink:hover .homeRailListItemLinkBodyName {
    color: var(--claret);
}

.homeRailListItemLinkBody {
    display: block;
    min-width: 0;
}

.homeRailListItemLinkBodyProducer {
    color: var(--ink-45);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.homeRailListItemLinkBodyName {
    display: block;
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.35;
    margin-top: 4px;
}

.homeRailListItemLinkBodyNameVintage {
    color: var(--ink-45);
    font-variant-numeric: tabular-nums lining-nums;
}

.homeRailListItemLinkScore {
    font-family: var(--font-display);
    font-size: 22px;
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 700;
    line-height: 1;
}

.homeRailMore {
    border: 1px solid var(--rule-strong);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-top: 20px;
    padding: 12px;
    text-align: center;
    text-transform: uppercase;
}

.homeRailMore:hover {
    border-color: var(--claret);
    color: var(--claret);
}

/****************************
Estate in focus
****************************/

/* The first tinted band. */
.homeFocus {
    background-color: var(--parchment);
    border-bottom: 1px solid var(--rule);
}

.homeFocusInner {
    padding-block: 48px 56px;
}

.homeFocusHead {
    margin-bottom: 32px;
}

.homeFocusHeadTitle {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-top: 12px;

    max-width: 28ch;
    text-wrap: balance;
}

@media (min-width: 700px) {
    .homeFocusHeadTitle {
        font-size: 44px;
    }
}

.homeFocusHeadTitleLink:hover {
    color: var(--claret);
}

.homeFocusLayout {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
    .homeFocusLayout {
        align-items: start;
        column-gap: 48px;
        grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
    }
}

.homeFocusMedia {
    display: block;
}

/* 16/9,
matching .homeLeadMedia. */
.homeFocusMedia .figurePicture {
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
}

.homeFocusMedia .figurePictureImage {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

@media (min-width: 1000px) {
    .homeFocusBody {
        border-left: 1px solid var(--rule);
        padding-left: 48px;
    }
}

.homeFocusBodyRegion {
    display: block;
}

@media (min-width: 700px) {
    .homeFocusBodyName {
        font-size: 32px;
    }
}

.homeFocusBodySubtitle {
    color: var(--ink-70);
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.68;
    margin-top: 16px;
}

.homeFocusBodyButton {
    margin-top: 24px;
}

/****************************
Photo essay
****************************/

/* White. */
.homeEssay {
    border-bottom: 1px solid var(--rule);
}

.homeEssayInner {
    padding-block: 56px 64px;
}

.homeEssayHead {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 32px;
}

@media (min-width: 900px) {
    .homeEssayHead {
        align-items: end;
        column-gap: 48px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.homeEssayHeadTitle {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.18;
    max-width: 24ch;
}

@media (min-width: 700px) {
    .homeEssayHeadTitle {
        font-size: 32px;
    }
}

.homeEssayHeadSubtitle {
    color: var(--ink-70);
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.68;
}

.homeEssayGrid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 700px) {
    .homeEssayGrid {
        grid-auto-rows: 172px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* The first frame carries the story,
so it gets four times the area. */
    .homeEssayGridItem:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.homeEssayGridItemLink {
    background-color: var(--parchment-deep);
    display: block;
    height: 100%;
    overflow: hidden;
}

.homeEssayGridItemLinkImage {
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
    width: 100%;
}

.homeEssayGridItemLink:hover .homeEssayGridItemLinkImage {
    transform: scale(1.05);
}

@media (max-width: 699px) {
    .homeEssayGridItemLink {
        aspect-ratio: 1;
    }
}

.homeEssayCredit {
    align-items: baseline;
    color: var(--ink-45);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 20px;
    margin-top: 20px;
}

.homeEssayCreditLink {
    border-bottom: 1px solid var(--claret);
    color: var(--claret);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/****************************
From the road
****************************/

/* The second tinted band,
completing white / tint / white / tint / ink down the page. */
.homeReports {
    background-color: var(--parchment);
}

.homeReportsGrid {
    display: grid;
    gap: 32px 24px;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 600px) {
    /* The second tinted band,
completing white / tint / white / tint / ink down the page. */
.homeReports {
    background-color: var(--parchment);
}

.homeReportsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    /* The second tinted band,
completing white / tint / white / tint / ink down the page. */
.homeReports {
    background-color: var(--parchment);
}

.homeReportsGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.homeReportsGridItemLink {
    display: block;
}

.homeReportsGridItemLinkMedia {
    aspect-ratio: 3 / 2;
    background-color: var(--parchment-deep);
    display: block;
    overflow: hidden;
}

.homeReportsGridItemLinkMediaImage {
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
    width: 100%;
}

.homeReportsGridItemLink:hover .homeReportsGridItemLinkMediaImage {
    transform: scale(1.04);
}

.homeReportsGridItemLinkKicker {
    color: var(--claret);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    margin-top: 16px;
    text-transform: uppercase;
}

.homeReportsGridItemLinkTitle {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.32;
    margin-top: 8px;
}

.homeReportsGridItemLink:hover .homeReportsGridItemLinkTitle {
    color: var(--claret);
}

.homeReportsGridItemLinkMeta {
    color: var(--ink-45);
    display: block;
    font-size: 12px;
    margin-top: 8px;
}

/****************************
Events we return to
****************************/

@media (min-width: 800px) {
}