/* ============================================================
   lang.css - the language switcher, and typography for the
   scripts the Latin webfonts do not cover.

   Loaded last, after the page's own styles, so the CJK overrides win.
   ============================================================ */

/* ---------- the switcher ----------

   It sits in the header next to ŒUVRES / ATELIER / BIOGRAPHIE, so it has to
   read as one of them, not as a label someone stuck on afterwards. The first
   version was 62% opacity, lowercase and two sizes smaller than its
   neighbours, and over the hero photograph it simply could not be read.
   Matching the nav's weight and tracking fixes that; a drawn globe says what
   the control is to someone who cannot read the language it is currently in,
   which is exactly the person reaching for it.                              */

.langs a, .langs-btn {
  font-family: var(--sans);
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.langs-head { position: relative; display: inline-block; margin-left: 30px; }

.langs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* the nav's own type, so the two sit level */
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 0;
  color: inherit;
  opacity: .85;
  transition: opacity .3s cubic-bezier(.16,1,.3,1);
}
.langs-btn:hover, .langs-btn[aria-expanded="true"] { opacity: 1; }

.langs-globe {
  width: 13px; height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.langs-btn:hover .langs-globe { transform: rotate(24deg); }
.langs-btn[aria-expanded="true"] .langs-globe { transform: rotate(180deg); }

/* CJK names carry no case and want their own size next to tracked Latin. */
.langs-btn span:lang(ja),
.langs-btn span:lang(zh-Hant),
.langs-btn span:lang(zh-Hans) { font-size: 12px; letter-spacing: .06em; }

/* Over the hero every nav link goes solid white. This was the one thing that
   stayed grey, on top of a busy painting. */
header.over .langs-btn { color: #FFF; opacity: .92; }
header.over .langs-btn:hover, header.over .langs-btn[aria-expanded="true"] { opacity: 1; }

/* ---- the menu ----

   The first version was an opaque white card with a drawn squiggle under the
   current language. Both were wrong: a hard white box has nothing to do with
   a site built on warm paper, and a fake brushstroke on a real painter's
   site reads as decoration pretending to be craft.

   What replaces it: no card at all, in the sense of an opaque object. A
   frosted sheet of the page's own paper, so the painting behind it stays
   present; the same treatment as the hamburger panel, so the two controls
   feel like one system. The current language is marked by a single small
   square of gold - the pigment that recurs through the work - set in the
   margin. One considered detail instead of an imitation of one. */

.langs-menu {
  /* header.over flips --ink white for the nav over the hero; this sheet has
     its own ground and takes the page palette back. */
  --ink: #1A1A16;
  --gold: #A07C34;

  position: absolute;
  top: calc(100% + 16px);
  right: -6px;
  /* Eight names stacked in one column made a tall narrow slab - which is
     most of what read as "a big box". Two columns of four is a calmer
     proportion: wider, half the height, and it stops the sheet running down
     over the artwork behind it. */
  width: 300px;
  padding: 20px 10px 18px;

  /* No backdrop blur. On an artwork page there is only paper behind the
     sheet, so the blur added nothing and instead smeared the breadcrumb
     underneath into a grey mud. A solid ground in the site's own warm paper
     - not white - with one hairline and a real shadow reads as a considered
     surface on both the paper pages and the hero. */
  background: #FAF8F3;
  border: 0;
  border-radius: 0;
  box-shadow:
    0 1px 2px rgba(26,26,22,.06),
    0 18px 40px -22px rgba(26,26,22,.38),
    0 40px 80px -50px rgba(26,26,22,.5);
  color: var(--ink);

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  z-index: 60;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .26s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
}
.langs-menu[hidden] { display: none; }
.langs-menu.open { opacity: 1; transform: none; pointer-events: auto; }

/* The sheet's only edge: a hairline along the top, in ink, with a short
   length of gold laid over its centre. It defines the plane on paper, where
   a shadow alone is not enough, and it is the one thing that ties the
   control back to the pigment in the paintings. */
.langs-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(26,26,22,.14);
}
.langs-menu::after {
  content: "";
  position: absolute;
  left: 20px; top: 0;
  width: 34px;
  height: 1px;
  background: var(--gold);
}

.langs-menu a {
  position: relative;
  font-size: 14px;
  line-height: 1;
  text-transform: none;
  letter-spacing: .015em;
  padding: 10px 12px 10px 20px;
  color: var(--ink);
  opacity: .5;
  white-space: nowrap;
  transition: opacity .28s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.langs-menu a:hover,
.langs-menu a:focus-visible { opacity: .9; transform: translateX(3px); }

/* The mark: a dab of gold in the margin. Nothing else. */
.langs-menu a[aria-current="true"] { opacity: 1; }
.langs-menu a[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  background: var(--gold);
}

.langs-menu.open a {
  animation: langIn .38s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--i) * 24ms + 50ms);
}
@keyframes langIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: .5; transform: none; }
}
/* the current one must not animate back down to the muted state */
.langs-menu.open a[aria-current="true"] { animation-name: langInCurrent; }
@keyframes langInCurrent {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .langs-menu, .langs-menu.open a, .langs-globe { transition: none; animation: none; }
}

/* ---- the panel, which below 760px is the only switcher there is ---- */

.langs-panel { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.langs-panel a {
  font-size: 15px;
  text-transform: none;
  letter-spacing: .01em;
  opacity: .66;
  padding: 5px 0;
  transition: opacity .2s;
}
.langs-panel a:hover { opacity: 1; }
.langs-panel a .l { position: relative; display: inline-block; }
.langs-panel a[aria-current="true"] { opacity: 1; }
/* the same dab of gold, set under the word rather than beside it, because
   the panel lays the languages out in rows across the sheet */
.langs-panel a[aria-current="true"] .l::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 4px; height: 4px;
  background: #A07C34;
}

/* Below 760px the nav collapses into the hamburger, but the language control
   stays: a phone otherwise had no way to change language without opening the
   menu first. The globe alone is enough at this size - which language you are
   in is already obvious from the page you are reading. */
@media (max-width: 760px) {
  .langs-head { margin-left: 0; }
  .langs-btn {
    min-width: 44px; min-height: 44px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  .langs-btn span { display: none; }
  .langs-globe { width: 17px; height: 17px; }
  .langs-menu a { display: flex; align-items: center; }
  .langs-menu { right: -8px; width: min(300px, calc(100vw - 32px)); }
  header nav { gap: 2px; }
}

/* ---------- scripts the Latin webfonts do not cover ----------

   Satoshi and General Sans have no CJK glyphs, so on those pages the
   browser silently falls back to whatever it has and the page ends up in
   a different typeface than the one it was designed in - usually a heavy
   default gothic that fights the layout.

   The stacks below name the system faces that are actually installed on
   macOS, iOS, Windows and Android, in that order, and end at Noto for
   Linux. Deliberately no webfont: a CJK webfont is 3-8 MB even subset,
   which is not a trade worth making for a page whose point is a photograph.

   Both custom properties are redefined rather than the rules that use
   them, so every rule in the site follows without being touched. Latin
   characters in these pages still come from the webfont, because it is
   still first in the stack - which is what keeps AvM006 and the year
   ranges looking like the rest of the site. */

html[lang="ja"] {
  --sans:  "General Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
           "Yu Gothic Medium", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --serif: "Satoshi", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
           "Yu Gothic Medium", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}
html[lang="zh-Hant"] {
  --sans:  "General Sans", "PingFang TC", "Hiragino Sans CNS",
           "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --serif: "Satoshi", "PingFang TC", "Hiragino Sans CNS",
           "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
html[lang="zh-Hans"] {
  --sans:  "General Sans", "PingFang SC", "Hiragino Sans GB",
           "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --serif: "Satoshi", "PingFang SC", "Hiragino Sans GB",
           "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* CJK has no spaces, so a line can break anywhere; strict keeps small
   kana and closing punctuation off the start of a line. The tracked-out
   uppercase labels are a Latin device - on CJK the same tracking reads as
   broken spacing, so it comes back down. */
html[lang="ja"], html[lang^="zh"] {
  line-break: strict;
  overflow-wrap: anywhere;
}
html[lang="ja"] .label, html[lang^="zh"] .label,
html[lang="ja"] .langs-btn, html[lang^="zh"] .langs-btn {
  letter-spacing: .04em;
}
/* Latin display sizes are set for lowercase with descenders; CJK glyphs
   fill their em box, so the same size reads noticeably larger and the
   same line-height reads tight. */
html[lang="ja"] h1, html[lang^="zh"] h1 { font-size: .88em; letter-spacing: .02em; }
html[lang="ja"] h2, html[lang^="zh"] h2,
html[lang="ja"] h3, html[lang^="zh"] h3 { letter-spacing: .02em; }
html[lang="ja"] p, html[lang^="zh"] p,
html[lang="ja"] dd, html[lang^="zh"] dd { line-height: 1.85; }