/* Chihuahua Julep's own site, dark and set in the bar's own face.
 * The product's tokens are restated in the bar's cream, sage and teal for
 * the product's parts its front page carries, such as the map dialog, beside
 * the front page itself, which is the bar's door, ported from
 * `prototypes/work/julep-site/` (Tomi 2026-10-26), which refines the bar's
 * own site. A rule here names a `julep-` class, so it styles this site's own
 * markup and never the product's (`tests/sites.rs`). */

/* The face of the bar's own site. The font carries its licence: Apache 2.0. */
@font-face {
  font-family: "Cherry Cream Soda";
  src: url("/static/sites/julep/cherry-cream-soda-70c8775e8f4ff666.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-scheme: dark;

  /* The palette of the bar's site: cream words on a near-black page, sage
   * for what is said second, and the teal of its buttons as the accent. */
  --text: #f4f0e7;
  --text-prose: #e2ded4;
  --text-muted: #bdcdae;
  --text-disabled: #8e9886;
  --text-secondary-blend: normal;
  --text-hover: #ffffff;
  --ground: #222222;
  --surface: #2c2d2b;
  --fill: #383a37;
  --line: rgb(225 224 215 / 0.2);
  --interactive-wash: rgb(255 255 255 / 0.08);
  --shadow-contact-color: rgb(0 0 0 / 0.3);
  --shadow-ambient-color: rgb(0 0 0 / 0.36);

  /* Names are set in the bar's face, prose in the product's, which stays
   * readable at length. */
  --font-display: "Cherry Cream Soda", var(--font-body);

  --accent: #8ab5bc;
  --accent-strong: #a8cbd1;
  --accent-text: #182628;
  --accent-wash: rgb(138 181 188 / 0.14);

  --control-line: rgb(255 255 255 / 0.16);
  --control-line-hover: rgb(255 255 255 / 0.28);
  --control-recess: inset 0 1px 1px rgb(0 0 0 / 0.2), inset 0 -1px 0 rgb(255 255 255 / 0.06);
  --control-disabled-fill: rgb(255 255 255 / 0.08);

  --edge-light-fill: rgb(255 255 255 / 0.14);
  --edge-light-saturation: 2;

  /* A map dark like the page, its light tiles turned round. */
  --map-tile-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) sepia(0.12);
  --veil-display: none;
  --location-map-fade-stacked: linear-gradient(to top, transparent 22%, black 72%);
  --location-map-fade-beside: linear-gradient(to right, transparent 26%, black 70%);
  --drawing-filter: invert(0.86) sepia(0.2);

  /* The door's own colours: the frame's light line, the button and its hover, and
   * the photograph's shade, clear under the logotype and dark under the
   * words. */
  --julep-frame-line: #e1e0d7;
  --julep-button: #376c75;
  --julep-button-hover: #427e88;
  --julep-shade-top: rgb(15 17 15 / 0.1);
  --julep-shade-clear: rgb(15 17 15 / 0);
  --julep-shade-bottom: rgb(15 17 15 / 0.88);
}

/* The door: the doorway photograph in a light frame filling the screen, the
 * logotype at its head and the visit at its foot, every word in the bar's
 * face. The face is set on the words rather than on the door, because the
 * address's map dialog opens inside it and is the product's. */
.julep-door {
  padding: 16px;
}

:is(.julep-masthead, .julep-doorbell, .julep-admission, .julep-details, .julep-events) {
  font-family: var(--font-display);
  line-height: 1.5;
}

.julep-frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* The window, less the door's margin above and below. */
  min-block-size: calc(100svh - 32px);
  max-inline-size: 1600px;
  margin-inline: auto;
  padding: 28px 40px 22px;
  border: 2px solid var(--julep-frame-line);
  background: url("/static/sites/julep/doorway-608f8e16b43484e6.webp") center 48% / cover no-repeat;
}

.julep-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    var(--julep-shade-top) 15%,
    var(--julep-shade-clear) 32%,
    var(--julep-shade-bottom) 100%
  );
}

.julep-masthead {
  margin-block-end: 64px;
}

.julep-logo {
  margin: 0;
  line-height: 0;
}

.julep-logo img {
  display: block;
  inline-size: 300px;
  max-inline-size: 100%;
  block-size: auto;
}

.julep-tagline {
  margin: 20px 0 0;
  font-size: 16px;
}

.julep-visit {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: end;
  gap: 54px;
  margin-block-start: auto;
}

.julep-address {
  padding-block-end: 6px;
}

.julep-address p {
  margin: 0;
}

.julep-street-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

@media (hover: hover) {
  .julep-street-name:hover {
    color: var(--accent);
  }
}

.julep-doorbell {
  margin-block: 8px 2px;
  color: var(--text-muted);
  font-size: 19px;
}

.julep-admission {
  color: var(--text-muted);
  font-size: 16px;
}

.julep-details {
  justify-self: end;
  inline-size: 100%;
  max-inline-size: 590px;
  text-align: center;
}

/* A line per set of days the bar states hours for, and under them, smaller
 * and in sage, the coming dates that differ: a private evening or a night
 * the bar closes. */
.julep-hours {
  margin: 0 0 24px;
}

.julep-hours > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 14px;
  margin: 0 0 12px;
}

.julep-hours :is(dt, dd) {
  margin: 0;
  font-size: clamp(16px, 1.65vw, 22px);
}

.julep-hours dd {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.julep-hours .julep-hours-named :is(dt, dd) {
  font-size: clamp(14px, 1.4vw, 19px);
}

.julep-hours .julep-hours-changed :is(dt, dd) {
  color: var(--text-muted);
  font-size: clamp(14px, 1.4vw, 19px);
}

.julep-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  padding: 10px 24px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--julep-button);
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .julep-reserve:hover {
    background: var(--julep-button-hover);
  }
}

.julep-house {
  margin-block-start: 21px;
  color: var(--text-muted);
  font-size: 17px;
}

.julep-house p {
  margin: 0;
}

.julep-house span {
  font-size: 15px;
}

.julep-events {
  margin: 28px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: end;
}

.julep-events a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .julep-events a:hover {
    text-decoration: underline;
  }
}

@media (max-width: 950px) {
  .julep-frame {
    padding: 26px;
  }

  .julep-visit {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 26px;
  }

  .julep-logo img {
    inline-size: 260px;
  }

  .julep-tagline {
    font-size: 14px;
  }

  .julep-doorbell {
    font-size: 15px;
  }

  .julep-street-name {
    font-size: 28px;
  }
}

/* On a phone the photograph keeps the doorway in view above the words, and
 * everything stands centred in one column. */
@media (max-width: 680px) {
  .julep-door {
    padding: 10px;
  }

  .julep-frame {
    min-block-size: calc(100svh - 20px);
    padding: clamp(16px, 2.8svh, 24px) 20px;
    background-size: auto max(580px, 82svh);
    background-position: 55% top;
    background-color: var(--ground);
  }

  .julep-frame::before {
    background: linear-gradient(
      180deg,
      var(--julep-shade-top) 12%,
      var(--julep-shade-clear) 27%,
      var(--ground) 84%
    );
  }

  .julep-masthead {
    margin-block-end: clamp(20px, calc(100svh - 700px), 160px);
    text-align: center;
  }

  .julep-logo img {
    inline-size: clamp(180px, 28svh, 240px);
    margin-inline: auto;
  }

  .julep-tagline {
    max-inline-size: 280px;
    margin: 14px auto 0;
    font-size: 12px;
  }

  .julep-visit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(18px, 3.5svh, 32px);
  }

  .julep-address {
    padding: 0;
    text-align: center;
  }

  /* The address's map dialog draws its trigger at the start of its box, so
   * the box is centred. */
  .julep-street {
    display: flex;
    justify-content: center;
  }

  .julep-street-name {
    font-size: clamp(23px, 6.2vw, 34px);
  }

  .julep-details {
    max-inline-size: none;
  }

  .julep-hours :is(dt, dd) {
    font-size: 16px;
  }

  .julep-hours :is(.julep-hours-named, .julep-hours-changed) :is(dt, dd) {
    font-size: 13px;
  }

  .julep-hours {
    margin-block-end: clamp(16px, 2.8svh, 24px);
  }

  .julep-house {
    margin-block-start: clamp(14px, 2.5svh, 21px);
    font-size: 14px;
  }

  .julep-house span {
    font-size: 13px;
  }

  .julep-events {
    margin-block-start: clamp(18px, 3.5svh, 32px);
    font-size: 11px;
    text-align: center;
  }

  .julep-events a {
    display: block;
    margin-block-start: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .julep-reserve {
    transition: none;
  }
}