@font-face {font-family: "Mercury Display Semibold"; src: url("MercuryDisplay-Semibold.otf"); font-style: normal; font-weight: normal;}
@font-face {font-family: "Mercury Display"; src: url("MercuryDisplay-Roman.otf"); font-style: normal; font-weight: normal;}
@font-face {font-family: "Mercury Display"; src: url("MercuryDisplay-Italic.otf"); font-style: italic; font-weight: normal;}
@font-face {font-family: "Brandon Grotesque Medium"; src: url("Brandon_med.otf"); font-style: normal; font-weight: normal;}

/* Page background */
html {background-image: url('4T4A8301-HDR.jpeg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center 0;}
.attop, .attop.notlast {background-color: rgba(255, 255, 255, 0.9); transition: background-color 0.3s;}

#back {background-image: none; background-color: transparent;} /* drop the gradient/body-color background, let html.3b.css handle position/sizing/centering */
#back svg {fill: #707070;}

.info {display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: 1px; background: url('Information_Icon.png') center/contain no-repeat;} /* one CSS background fetch shared across ~800 wine rows, replacing 800 <img> elements (citrone XSL emits <span class="info"/> instead of <img>); +1px lifts the 12px icon so its center sits near cap-height of the 20px uppercase producer text */

/* TOC initial page (built by index.js): #nav full-width photo, nav[focus] is the TOC block */
#nav {position: fixed; top: 0; left: 0; right: 0; height: 100vh; background-image: url('citronenofront.jpg'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; z-index: 200;}
#nav > nav {display: flex; flex-direction: column; height: 100%; overflow: auto; font-family: "Brandon Grotesque Medium", sans-serif; font-size: 25px; color: white; text-transform: uppercase; text-align: center;}
#nav > nav::before {content: "Menu"; font-family: "Mercury Display Semibold", serif; font-size: 53px; border-bottom: 1px solid grey; margin: 0 20px; display: block; flex-shrink: 0; color: #EBA937;}
#nav > nav > nav {cursor: pointer;}
#nav > nav > nav:hover {opacity: 0.8;}
#nav[hidden] {display: none !important;}
@media (min-width: 801px) {#nav {background-position: 283px;} #nav > nav {width: 421px; background-color: black;}}

/* Detail page — main[wine_id] replaces v2 body#wine */
main[wine_id] {background-color: rgba(255, 255, 255, 0.75);} /* translucent white over the page background image; min-height:100vh inherited from html.3b.css ensures it covers the viewport */
main[wine_id] div {background-color: transparent;} /* override html.3b.css `div {background-color: inherit}` so 0.75 alpha doesn't stack on every nested div */
main[wine_id] #content {font-family: "Mercury Display", serif; font-size: 18px; padding-top: 30px; height: auto;}
main[wine_id] #content::before {content: "DETAILS"; display: block; font-family: "Mercury Display", serif; font-size: 74px; line-height: 1; color: #707070; text-transform: uppercase;} /* line-height:1 makes the DETAILS line exactly 74px tall so #back (top:30 height:74) aligns 1:1 with it */
main[wine_id] #section {font-family: "Brandon Grotesque Medium", sans-serif; font-size: 17px; text-transform: uppercase;}
main[wine_id] #producer {font-family: "Brandon Grotesque Medium", sans-serif; font-size: 25px; text-transform: uppercase; border-bottom: none; margin-bottom: 20px;}
main[wine_id] #type {font-family: "Mercury Display Semibold", serif; font-size: 18px; color: #707070;}
main[wine_id] #origin {font-style: italic; font-size: 18px; color: #707070; margin-top: 0;}
main[wine_id] .stories.heading {font-family: "Brandon Grotesque Medium", sans-serif; font-weight: normal; font-size: 20px; text-transform: uppercase; color: black;}
main[wine_id] .stories {color: #707070;}

/* GC-based section color (v3: attr on <main wine_id gc="…">) */
main[gc="1"] #section, main[gc="2"] #section {color: #c9a450;}
main[gc="2rose"] #section {color: #D85FA2;}
main[gc="3"] #section {color: #8d0e09;}
main[gc="4"] #section {color: rgb(213,132,0);}

/* Pairings / detail secondary content */
main[wine_id] .detailheader {font-family: "Mercury Display", serif; font-size: 74px; text-align-last: justify; text-transform: uppercase; color: #707070; padding: 0 40px;}
main[wine_id] .fooditem {font-family: "Brandon Grotesque Medium", sans-serif; font-size: 25px; text-transform: uppercase; padding: 0 40px;}
main[wine_id] .suggestions {font-family: "Brandon Grotesque Medium", sans-serif; font-style: italic; font-size: 25px; text-transform: uppercase; color: #707070; padding: 0 40px;}

div[menu_template_id]:not(.filtermenu) ~ div[menu_template_id] {margin-top: 0; padding-top: 0; border-top: none;}