/* Links from the main site to the Founders' Edition. Every style for them lives
   in this one file, so nothing in main.css changes and all of it can be taken
   out again by removing this file and the marked lines in the pages. */

/* The Cellar Door and the Founders' Edition: two small engraved plaques, each its
   own destination. They never sit together: the Founders' plaque holds the top
   centre of the page, the Cellar Door keeps the corner where Shop always was.
   Dark glass with a silver hairline and a fine inner rule, so they read over the
   dark hero and the cream panels alike. Sizes are in px because the site changes
   its root font size by page and by width. */
.feLink { position: fixed; z-index: 9000; }
.feLink--desk { left: 50%; margin-left: -98px; }
.feCellar__btn.btn.btn-primary,
.feLink__btn.btn.btn-primary {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; height: 46px; padding: 0; margin: 36px 0 0 !important;
  line-height: 1 !important; border-radius: 0; border: 1px solid transparent;
  border-image: linear-gradient(135deg, #f4f2ec 0%, #8f8c86 45%, #e8e5de 100%) 1;
  background: rgba(13, 12, 11, .94); box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%);
  transition: height .55s cubic-bezier(.22, .7, .2, 1), background-color .45s ease;
}
.feCellar__btn.btn.btn-primary { width: 150px; }
.feLink__btn.btn.btn-primary { width: 196px; }

/* The fine inner rule, as on an engraved card. */
.feCellar__btn::before, .feLink__btn::before {
  content: ''; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; pointer-events: none;
  border: 1px solid rgba(233, 230, 223, .2); transition: border-color .45s ease;
}
.feCellar__name, .feLink__name { flex: none; display: flex; align-items: center; justify-content: center; height: 44px; }
.feCellar__name {
  font-family: Schnyder S, Georgia, serif; font-weight: 300; font-size: 16px; letter-spacing: .03em; text-transform: none;
  color: #e9e6df;
}
.feLink__art { display: block; width: 148px; height: auto; }

/* What opens under the name on hover: the plain word, and for the Founders'
   Edition the first step and where it delivers. */
.feCellar__more, .feLink__more {
  flex: none; display: block; margin: 0 14px; padding-top: 12px; border-top: 1px solid rgba(233, 230, 223, .18);
  font-family: Neue Haas Grotesk Text Pro, Helvetica, Arial, sans-serif; font-weight: 400; color: #e9e6df; text-transform: none;
  opacity: 0; transition: opacity .35s ease;
}
.feCellar__more, .feLink__ask { display: block; font-family: Schnyder S, Georgia, serif; font-weight: 300; font-size: 12.5px; line-height: 1.2; letter-spacing: .01em; }
.feLink__step { display: block; margin-top: 8px; font-size: 9px; line-height: 1.2; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; }
.feLink__uk { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .01em; color: rgba(233, 230, 223, .62); }
@media (hover: hover) {
  .feCellar:hover .feCellar__btn.btn.btn-primary { height: 90px; }
  .feLink--desk:hover .feLink__btn.btn.btn-primary { height: 124px; }
  .feCellar:hover .feCellar__more, .feLink--desk:hover .feLink__more { opacity: 1; transition-delay: .12s; }
}
.feCellar:focus-visible .feCellar__btn.btn.btn-primary { height: 90px; }
.feLink--desk:focus-visible .feLink__btn.btn.btn-primary { height: 124px; }
.feCellar:focus-visible .feCellar__more, .feLink--desk:focus-visible .feLink__more { opacity: 1; }

/* The bootstrap colours must not flash through on hover or press. */
.feCellar__btn.btn.btn-primary:hover,
.feCellar__btn.btn.btn-primary:focus,
.feCellar__btn.btn.btn-primary:active,
.feLink__btn.btn.btn-primary:hover,
.feLink__btn.btn.btn-primary:focus,
.feLink__btn.btn.btn-primary:active {
  background: rgb(13, 12, 11) !important; box-shadow: none !important; outline: none;
  border-image: linear-gradient(135deg, #fff 0%, #c9c6bf 45%, #fff 100%) 1;
}
/* A slow band of light on hover, as on the Founders' Edition lettering. */
.feCellar__btn::after, .feLink__btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: skewX(-18deg); transition: left 1.1s ease;
}
.feCellar__btn:hover::after, .feLink__btn:hover::after { left: 115%; }

/* Phones: one row under the header, sized to fit the narrowest screen. On the inner
   pages the site has a back arrow at the left of that band, so the row sits to its
   right, level with the arrow, and never over it. */
@media (max-width: 767px) {
  :root {
    --feF: min(calc((100vw - 48px) * .56), 190px); --feC: min(calc((100vw - 48px) * .44), 150px); --feG: 16px;
    --feT: 68px; --feL: calc(50% - (var(--feF) + var(--feG) + var(--feC)) / 2);
  }
  body:has(.pageIntro__btn) {
    --feF: min(calc((100vw - 111px) * .55), 190px); --feC: min(calc((100vw - 111px) * .45), 150px); --feG: 10px;
    --feT: 77px; --feL: calc(100% - 16px - var(--feC) - var(--feG) - var(--feF));
  }
  .feLink--mob { top: var(--feT); left: var(--feL); }
  a.header__logo.feCellar {
    top: var(--feT) !important; left: calc(var(--feL) + var(--feF) + var(--feG)); right: auto; transform: none; width: auto;
  }
  .feCellar__btn.btn.btn-primary, .feLink__btn.btn.btn-primary { height: 38px; margin: 0 !important; }
  .feCellar__btn.btn.btn-primary { width: var(--feC); }
  .feLink__btn.btn.btn-primary { width: var(--feF); }
  .feCellar__name, .feLink__name { height: 36px; }
  .feCellar__name { font-size: clamp(11.5px, 3.5vw, 14px); letter-spacing: .01em; }
  .feLink__art { width: calc(var(--feF) - 28px); max-width: 146px; }
}
@media (prefers-reduced-motion: reduce) {
  .feCellar__btn::after, .feLink__btn::after { display: none; }
  .feCellar__btn.btn.btn-primary, .feLink__btn.btn.btn-primary, .feCellar__more, .feLink__more { transition: none; }
}

/* Both plaques step aside while the menu is open. The Founders plaque also steps
   aside while the home page has its own Founders panel on screen, so the lettering
   is never shown twice at once. */
.feLink, .feCellar { transition: opacity .6s ease; }
body:has(.header.opened) .feLink, body:has(.header.opened) .feCellar,
body:has(#home-sec-founders.is-inview) .feLink { opacity: 0; pointer-events: none; }

/* The panel on the home page, in the same dark as the Founders' Edition site. */
.feSec { background: #0d0c0b; color: #f4f2ee; width: 100vw; }
.feSec__inner { display: flex; height: 100vh; }
.feSec__text { flex: 1 1 58%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6vh 4vw 6vh calc(4vw + 70px); min-width: 0; }
.feSec__elephant { width: clamp(150px, 15vw, 280px); height: auto; }
.feSec__lettering { width: min(34vw, 560px); height: auto; margin-top: 1.5rem; }
.feSec__line { font-size: clamp(1.1rem, 1.7vw, 1.9rem); line-height: 1.4; margin: 1.8rem 0 2.2rem; color: #f4f2ee; }
.feSec__photo { flex: 0 0 42%; height: 100vh; overflow: hidden; }
.feSec__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; }

/* The button and the small print, shared by the panel and the band. */
.feBtn { display: inline-block; padding: 1rem 2rem; border: 1px solid rgba(244, 242, 238, .55); color: #f4f2ee !important;
  font-family: Neue Haas Grotesk Text Pro, Helvetica, Arial, sans-serif; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.feBtn:hover, .feBtn:focus { background: #f4f2ee; color: #0d0c0b !important; text-decoration: none; }
.feSmall { display: block; margin-top: 1.1rem; font-family: Neue Haas Grotesk Text Pro, Helvetica, Arial, sans-serif; font-size: .7rem; letter-spacing: .04em; color: rgba(244, 242, 238, .55); }

/* The band above "Back to top" on the magnum and coffret pages. */
.feBand { background: #0d0c0b; color: #f4f2ee; text-align: center; padding: 11vh 6vw; margin-top: 9vh; }
.feBand__lettering { width: min(70vw, 460px); height: auto; }
.feBand__line { font-size: clamp(1.05rem, 1.5vw, 1.6rem); line-height: 1.45; margin: 1.6rem auto 2rem; max-width: 34em; color: #f4f2ee; }

/* Where the site stacks instead of scrolling sideways: portrait screens only. */
@media (orientation: portrait) {
  .feSec { width: 100%; min-width: 100vw; }
  .feSec__inner { flex-direction: column; height: auto; }
  .feSec__text { flex: none; width: 100%; padding: 12vh 8vw 8vh; }
  .feSec__elephant { width: clamp(130px, 38vw, 240px); }
  .feSec__lettering { width: min(78vw, 480px); }
  .feSec__line { font-size: clamp(1.05rem, 4.6vw, 1.5rem); }
  .feSec__photo { flex: none; width: 100%; height: 120vw; max-height: 90vh; }
}

/* Low landscape screens still scroll sideways, so the panel stays one screen wide and tightens to fit. */
@media (orientation: landscape) and (max-height: 600px) {
  .feSec__text { padding-top: 3vh; padding-bottom: 3vh; }
  .feSec__elephant { width: auto; height: 24vh; }
  .feSec__lettering { width: min(30vw, 420px); margin-top: .5rem; }
  .feSec__line { font-size: clamp(.95rem, 4.2vh, 1.4rem); margin: .7rem 0 .9rem; }
  .feSec .feBtn { padding: .6rem 1.6rem; }
  .feSec .feSmall { margin-top: .5rem; }
}

/* The third entry on the Champagne page: a dark column running to the page edge, so
   the silver lettering reads. The column is drawn behind the entry and its section
   clips it. Three across keeps the whole range in one view, so the titles step down
   a little to stay on two lines. */
article:has(> .champagne-sel__grid > .feSel) { overflow: hidden; }
.feSel { position: relative; z-index: 0; margin-left: 1.6em; margin-right: -3.6vw; color: #f4f2ee; }
.feSel::before { content: ''; position: absolute; z-index: -1; top: -100vh; bottom: -100vh; left: -1.6em; right: -100vw; background: #0d0c0b; }
.feSel .champagne-sel__img-wrap { overflow: hidden; }
.feSel .champagne-sel__img-wrap img { object-fit: cover; object-position: 50% 82%; }
.feSel .champagne-sel__name { min-height: 2.2em; display: flex; align-items: center; }
.feSel__lettering { display: block; width: 100%; height: auto; }
.feSel .champagne-sel__edition { opacity: .55; }
.feSel .champagne-sel__desc { color: #f4f2ee; opacity: .78; }
.feSel .champagne-sel__cta { color: #f4f2ee; }
.feSel .feSmall { margin-top: .9rem; }
@media (min-width: 992px) {
  .champagne-sel__grid .champagne-sel__name { font-size: clamp(28px, 3.1vw, 62px); }
}
/* Too narrow for three across: the two entries keep their row and this one runs the full width beneath. */
@media (max-width: 991px) {
  .champagne-sel__grid { flex-wrap: wrap; }
  .feSel { flex: 1 0 100%; margin: 2.4em 0 0; }
  .feSel::before { top: -2.4em; left: -100vw; }
  .feSel__lettering { max-width: 420px; }
  .feSel .champagne-sel__img-wrap { aspect-ratio: 4/3; max-height: 60vh; }
  .feSel .champagne-sel__name { min-height: 0; margin: .3em 0 .6em; }
}
@media (max-width: 767px) {
  .feSel { flex: none; }
}

/* The responsible drinking line, word for word as on the Founders' Edition site.
   In the footer's empty left column, and at the foot of the home page's last panel,
   the one page with no footer. */
.feResp a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.feResp--home { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-size: 13px; line-height: 1.4; color: rgba(20, 19, 15, .62); z-index: 2; }

/* Narrow windows, where the responsible drinking line and the links share a row: the
   line's margin in main.css would otherwise sit it below the links. */
@media (max-width: 767px) {
  .footer { align-items: center; }
}