/* ============================================================
   ui.css — chrome that must behave identically on every page.

   The homepage and the artwork pages grew separate implementations of the
   same three things, and they drifted:

     the slide-out panel   home: pale scrim + blur(3px), 359px wide
                           work: dark scrim, no blur at all, 320px wide
     the header on scroll  home: fixed, animates `top`, four properties at once
                           work: sticky, no scroll behaviour whatsoever
     the language control  hidden below 760px, so phones had none in the header

   Loaded last on both, so these win on equal specificity. Anything that has
   to look the same everywhere belongs here rather than in either page's own
   stylesheet.
   ============================================================ */

/* ---------- 1. the slide-out panel ----------

   The scrim, the blur and the sheet width now live in each page's own
   stylesheet, because they were not overrides - they were corrections, and a
   correction belongs at source. What is left here is the part that genuinely
   has to be shared: the close bar, which neither page had. */

#panel .sheet {
  --sheet-pad: clamp(24px, 4vw, 46px);
  padding: 0 var(--sheet-pad) 48px;
  box-shadow: -24px 0 60px -30px rgba(26, 26, 22, .35);
  overscroll-behavior: contain;
}
#panel:not(.open) .scrim,
#panel:not(.open) .sheet { pointer-events: none; }

/* The close control was position:sticky with no ground under it, so every
   menu item scrolled up and passed straight through the word "Close". It is
   now a bar: full bleed across the sheet, its own paper background and a
   hairline, so the menu scrolls beneath it instead of behind it. */
#panelClose {
  position: sticky;
  top: 0;
  z-index: 3;
  align-self: stretch;
  width: calc(100% + var(--sheet-pad) * 2);
  margin: 0 calc(-1 * var(--sheet-pad)) 6px;
  padding: 0 var(--sheet-pad);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  transition: color .3s ease;
}
#panelClose:hover, #panelClose:focus-visible { color: var(--ink); }
/* A cross beside the word, so the control reads as a control at a glance. */
#panelClose::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.1px 100% no-repeat;
  transform: rotate(45deg);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
#panelClose:hover::after { transform: rotate(135deg); }

/* The homepage rules a line under every link in the panel. That reads well
   for a list of destinations and badly for the language row and the eleven
   catalogue references, which are chips rather than rows. */
#panel .langs-panel a,
#panel .sheet-cat a { border-bottom: 0; padding-left: 0; }
#panel .sheet-cat { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; }
#panel .sheet-cat a:hover { padding-left: 0; color: var(--ink); }

#panel .sheet h4:first-of-type,
#panel .sheet h4:first-child { margin-top: 20px; }

/* ---------- 3. the header on scroll ---------- */

header#hdr.top0 { top: var(--bar) !important; transform: translateY(calc(-1 * var(--bar))); }

/* `top` was being animated on a fixed element, which forces layout on every
   frame of a 450ms transition, on every threshold crossing, while the
   announcement bar slid at the same time. transform is compositor-only. */
html header {
  transition: transform .42s cubic-bezier(.16, 1, .3, 1),
              padding .42s cubic-bezier(.16, 1, .3, 1),
              background-color .42s ease,
              border-color .42s ease;
  will-change: transform;
}

/* The artwork pages stay position:sticky - it already pins correctly, and
   converting 91 pages to fixed would move layout for no gain. What they get
   is the homepage's settling behaviour: the rule under the header only
   appears once you have scrolled, rather than sitting there from the start. */
html body.is-work-page header {
  border-bottom-color: transparent;
  transition: background-color .42s ease, border-color .42s ease;
}
body.is-work-page.is-scrolled header {
  border-bottom-color: var(--line-soft);
  background-color: rgba(252, 251, 248, .94);
}

/* ---------- 4. opening a painting ----------

   Clicking a painting used to open a modal lightbox. It now opens that
   work's catalogue page, so the cursor says "this goes somewhere" rather
   than "this magnifies": the site's own hand, an arrow into a frame. */
.shot { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='12.5' fill='rgba(252,251,248,.35)' stroke='%23FCFBF8' stroke-width='1.2'/%3E%3Ccircle cx='17' cy='17' r='12.5' fill='none' stroke='%231A1A16' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M13 17h8M17.5 13.5L21 17l-3.5 3.5' fill='none' stroke='%231A1A16' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='.85'/%3E%3C/svg%3E") 17 17, pointer; }

/* ---------- the screenshot note ----------
   Small, at the foot of the screen, never over the painting; once a visit,
   and it takes itself away. */
.shotnote{position:fixed;z-index:80;
  left:clamp(12px,4vw,28px);bottom:calc(clamp(12px,4vw,28px) + env(safe-area-inset-bottom));
  width:min(340px,calc(100vw - 24px));
  padding:18px 40px 18px 20px;
  background:#FAF8F3;color:var(--ink);
  box-shadow:0 1px 2px rgba(26,26,22,.06),0 20px 44px -24px rgba(26,26,22,.42);
  opacity:0;transform:translateY(10px);
  transition:opacity .32s ease,transform .5s var(--ease)}
.shotnote.in{opacity:1;transform:none}
.shotnote::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(26,26,22,.14)}
.shotnote::after{content:"";position:absolute;left:20px;top:0;width:34px;height:1px;
  background:#A07C34}
.shotnote .sn-t{margin:0;font-family:var(--sans);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink)}
.shotnote .sn-b{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.shotnote .sn-a{display:flex;gap:18px;margin-top:14px}
.shotnote .sn-a button,.shotnote .sn-a a{appearance:none;background:none;border:0;padding:0;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);padding-bottom:3px}
.shotnote .sn-a button:hover,.shotnote .sn-a a:hover{border-bottom-color:#A07C34}
.shotnote .sn-x{position:absolute;top:8px;right:8px;width:34px;height:34px;
  appearance:none;background:none;border:0;cursor:pointer;color:var(--mute)}
.shotnote .sn-x::before,.shotnote .sn-x::after{content:"";position:absolute;
  left:11px;top:16px;width:12px;height:1px;background:currentColor}
.shotnote .sn-x::before{transform:rotate(45deg)}
.shotnote .sn-x::after{transform:rotate(-45deg)}
.shotnote .sn-x:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){.shotnote{transition:none}}
@media (max-width:560px){ .shotnote{left:12px;right:12px;width:auto} }

/* ---------- 5. getting back off an artwork page ----------

   The breadcrumb is the only way back to the catalogue, and at 11px with no
   vertical padding it was a hard thing to hit with a thumb. Same words, a
   target you can actually land on, and the first crumb reads as a link
   rather than as a heading. */
@media (max-width: 760px) {
  .crumb { display: flex; flex-wrap: wrap; align-items: center; }
  .crumb a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding-right: 2px;
  }
  .crumb a:first-child { border-bottom-color: var(--line-soft); }
  .crumb i { padding-inline: 7px; }
}

/* ---------- 6. the light control ----------

   The layout of the control itself now lives in work.css. What stays here is
   the one thing that is a page-level decision rather than a component one:
   capping the painting so that it and the control share the first screen.

   The cap goes on the STAGE, never on the image. The light canvas is
   absolutely positioned to the stage, so if the image is narrower than its
   container the canvas still covers the container and the painting is
   stretched to fit it - AvM011 was rendered 18% too wide under the light
   before this was corrected. Constraining the stage by its own aspect ratio
   keeps stage, image and canvas as one identical box. */
@media (min-width: 901px) {
  .stage {
    max-width: min(100%, calc((100vh - 340px) * var(--ar, 1)));
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #panel .scrim, #panel .sheet, header, .vclose, .pay-close { transition: none !important; }
}