/* Type system, after ysl.com: one 12px size, uppercase, pure black, almost no tracking.
   Contrast comes from weight alone — Benton Sans Black against Light.
   Tokens live in fonts.css. */

body, body *, input, textarea, select, button {
  font-family: var(--font) !important;
  font-weight: var(--light);
}
body {
  font-size: var(--size);
  line-height: var(--lh);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
p { letter-spacing: 0; font-weight: var(--light); color: var(--ink); }

/* Heavy: one rule, so every Black element is listed in one place */
b, strong,
.pg-title, .pg-h2, .pg-form label.pg-label, .submit-button {
  font-family: var(--font-heavy) !important;
  font-weight: var(--heavy) !important;
  letter-spacing: var(--track-heavy) !important;
}

/* Nav: Medium caps — holds up over photos. Uses the self-hosted Medium file, so every visitor sees the same weight. */
.nav-container, .nav-container * { font-weight: var(--medium) !important; }
.nav-container ul li a {
  font-family: "Benton", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: var(--size) !important;
  font-weight: var(--medium) !important;
  letter-spacing: .04em !important;
  line-height: var(--lh) !important;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .nav-container ul li a { color: var(--ink) !important; }
  .nav-container ul li a:hover { color: var(--ink-2) !important; }
}

/* Mobile menu: white panel, black uppercase list, top left */
@media screen and (max-width: 767px) {
  .nav-container { background: #fff !important; }
  .nav-container ul { position: absolute !important; top: 92px !important; left: 0 !important; right: 0 !important; transform: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  .nav-container ul li { float: none !important; width: auto !important; text-align: left !important; margin: 0 !important; }
  .nav-container ul li a { display: block; text-align: left !important; color: var(--ink) !important; font-size: 14px !important; padding: 12px 20px !important; }
  #nav:checked + .nav-open i { background: var(--ink) !important; }
  header:has(#nav:checked) .logo img { filter: none !important; }
  /* the open panel is always white, even over images that switch the nav to white */
  header:has(#nav:checked) .nav-container ul li a { color: var(--ink) !important; }
}

/* Form controls */
input, textarea, select { letter-spacing: 0; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ink-2); }
.submit-button {
  font-size: var(--size) !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  background: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink) !important;
}
.submit-button:hover { background: #fff !important; color: var(--ink) !important; }

/* Text-page footer */
.footer-josuito, .footer-josuito * { font-size: var(--size); color: var(--ink); text-transform: uppercase; letter-spacing: var(--track); }
.footer-josuito a { text-decoration: none; }
.footer-josuito a:hover { text-decoration: underline; }

/* Small finishes */
::selection { background: var(--ink); color: #fff; }
a:focus-visible, button:focus-visible, label:focus-visible, select:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Shop: the one call to action in the nav, a small solid pill (black; white over photos where the nav turns white).
   Capitals sit high in a normal line box, so the box is sized to the cap height and padded evenly. */
@media screen and (min-width: 768px) {
  .nav-container ul li.nav-shop a {
    display: inline-block; margin-top: -7px !important; padding: 8px 14px 7px !important;
    line-height: 1 !important; text-box: trim-both cap alphabetic;
    border-radius: 999px; background: var(--ink); color: #fff !important;
    transition: opacity .2s ease, background-color .2s ease, color .2s ease !important;
  }
  @supports (text-box: trim-both cap alphabetic) {
    .nav-container ul li.nav-shop a { padding: 8px 14px !important; }
  }
  html.jv-nav-light .nav-container ul li.nav-shop a { background: #fff; color: var(--ink) !important; }
  /* hover: the pill inverts (thin inset outline so the size doesn't change) */
  .nav-container ul li.nav-shop a:hover { background: #fff; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); opacity: 1; }
  html.jv-nav-light .nav-container ul li.nav-shop a:hover { background: var(--ink); color: #fff !important; box-shadow: inset 0 0 0 1px var(--ink); }
}
/* phone menu: same pill, set apart from the list */
@media screen and (max-width: 767px) {
  .nav-container ul li.nav-shop { margin-top: 14px !important; }
  .nav-container ul li.nav-shop a { display: inline-block !important; margin-left: 20px !important; padding: 11px 20px 10px !important;
    line-height: 1 !important; text-box: trim-both cap alphabetic; border-radius: 999px; background: var(--ink); color: #fff !important; }
  @supports (text-box: trim-both cap alphabetic) { .nav-container ul li.nav-shop a { padding: 11px 20px !important; } }
}

/* Nav dot: a small filled dot to the left of the current page; on hover it fades in beside the link you're pointing at
   (instead of greying the text). Absolutely placed so links don't shift; currentColor keeps it white over photos
   where the nav turns white. Centred on the capitals, not the line box (caps sit ~.1em above the line's middle). */
.nav-container ul li:not(.nav-shop) a { position: relative; }
.nav-container ul li:not(.nav-shop) a::before {
  content: ''; position: absolute; left: -11px; top: 50%; width: 5px; height: 5px; margin-top: calc(-2.5px - .1em);
  border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .2s ease;
}
.nav-container ul li a[aria-current="page"] { text-decoration: none !important; }
.nav-container ul li a[aria-current="page"]::before { opacity: 1; }
@media (hover: hover) {
  .nav-container ul li:not(.nav-shop) a:hover::before { opacity: 1; }
  .nav-container ul li:not(.nav-shop) a:hover,
  html.jv-nav-light .nav-container ul li:not(.nav-shop) a:hover { color: inherit !important; }
  .nav-container ul li:not(.nav-shop) a:hover { color: var(--ink) !important; }
  html.jv-nav-light .nav-container ul li:not(.nav-shop) a:hover { color: #fff !important; }
}
@media screen and (max-width: 767px) {
  .nav-container ul li:not(.nav-shop) a::before { left: 8px; }   /* phone menu: links have 20px side padding */
  .nav-container ul li:not(.nav-shop) a:hover { color: var(--ink) !important; }
}

/* Phone menu: the Shop pill keeps white text. The "menu links are black on the white panel" rule above
   (header:has(#nav:checked) …) is more specific than the pill's own rule, so it needs this explicit override. */
@media screen and (max-width: 767px) {
  header:has(#nav:checked) .nav-container ul li.nav-shop a,
  html.jv-nav-light header:has(#nav:checked) .nav-container ul li.nav-shop a { color: #fff !important; background: var(--ink); }
}