/* ============ The bar ==================================================
   One bar for every page: the home loads it next to style.css, the other
   pages next to their own inline styles. Everything the bar needs is in
   here, palette included, so a page's element rules (a, button, nav) can
   not reach in and restyle it.

   Closed the bar is a single row. Open (phones only), the same rounded box
   grows downwards and the row stays where it is: the control you pressed
   does not move. The height eases through grid-template-rows 0fr -> 1fr,
   the one way to animate to an auto height without measuring it in JS. */

/* --bar-ease is for the handover with the offer strip only: a gentle ease
   rather than the expo used everywhere else, because an expo spends most of
   its run already arrived, which is precisely the snap being fixed. Declared
   on the root so the strip (style.css) reads the same curve. */
/* The action colour, declared once for the whole site: the bar reads it here
   and buttons.css reads the same. Back to ink after the teal and the light
   blue: black and white, and the colour of this button stays an open
   question in one variable rather than scattered through two stylesheets.
   It only ever appears on the paper — on a photograph or a dark band the
   action is the white pill, because a filled pill there fights the picture
   instead of sitting on it. */
:root { --bar-ease:cubic-bezier(.36,.03,.2,1); --buy:#252420; --buy-deep:#000; }
#nav, .nav-scrim {
  --crt:#252420; --ink:rgb(37,36,32); --paper:#F4F4EF; --tan:#c5a28c; --tan-text:#8a6046;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

#nav { position:fixed; top:14px; left:0; right:0; margin:0 auto; z-index:100;
  width:calc(100% - clamp(1.6rem,5vw,4rem)); max-width:1080px; box-sizing:border-box;
  padding:0 12px 0 16px; background:rgba(246,244,239,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6); border-radius:22px;
  box-shadow:rgba(19,18,16,.05) 0 1px 2px, rgba(19,18,16,.3) 0 20px 44px -26px; overflow:hidden;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; line-height:1.5; color:var(--ink);
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
  color .3s var(--ease), box-shadow .4s var(--ease),
  opacity .6s var(--bar-ease), transform .8s var(--bar-ease);
  /* arriving: hold back until the strip is on its way out (style.css) */
  transition-delay:0s, 0s, 0s, 0s, .2s, .2s; }
/* the home sends the bar away over its hero film (script.js) */
/* leaving: go at once, so the strip coming back is never covered */
#nav.nav-away { opacity:0; transform:translateY(calc(-100% - 20px)); pointer-events:none;
  transition-delay:0s; }
#nav a { border-bottom:0; }

.nav-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:10px 0; }

/* Phone: burger, mark, buy. From tablet up: mark, entries, buy. The two
   side columns are equal, so the entries sit on the bar's own centre. */
.nav-burger { grid-column:1; grid-row:1; }
.nav-mark { grid-column:2; grid-row:1; }
#nav .nav-buy { grid-column:3; grid-row:1; }

/* The entries in the bar. Plain text in the site's own weight, no pills, no
   underlines: they colour under the pointer and that is the whole effect. */
.nav-links { display:none; grid-column:2; grid-row:1; justify-self:center;
  align-items:center; gap:clamp(2.4rem,4.5vw,4rem); }
/* inline-block with line-height 1 so the box hugs the word: inline, the
   link carries half the leading of the bar's 1.5 under the letters, and the
   rule would hang that much further away than it looks in the CSS. */
.nav-links a { position:relative; display:inline-block; line-height:1;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.01em; color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:color .2s var(--ease); }
/* The rule opens from the middle of the word and runs out to both ends, then
   closes back to the middle when the pointer leaves. One origin, dead centre,
   for both directions: the line belongs to the word rather than crossing it,
   and the word stays the centre of the gesture. */
.nav-links a::after { content:''; position:absolute; left:0; right:0; bottom:-5px; height:1.5px;
  background:var(--tan-text); border-radius:1px;
  transform:scaleX(0); transform-origin:center center;
  transition:transform .42s var(--ease); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform:scaleX(1); }
.nav-links a:hover { color:var(--tan-text); }
.nav-links a[aria-current="page"] { color:var(--tan-text); }
.nav-links a:focus-visible { outline:2px solid var(--crt); outline-offset:4px; border-radius:2px; }
body.nav-open .nav-links a { color:rgb(236,233,226); }
@media (min-width:760px) {
  .nav-links { display:flex; }
  #nav .nav-burger { display:none; }
  #nav .nav-mark { grid-column:1; justify-self:start; }
}
/* on a tablet the four entries and the mark share ~700px: tighter, smaller */
@media (min-width:760px) and (max-width:959px) {
  .nav-links { gap:1.8rem; }
  .nav-links a { font-size:.72rem; }
}

.nav-mark { justify-self:center; position:relative; display:flex; align-items:center; }
.nav-mark img { width:78px; height:auto; display:block; transition:opacity .3s var(--ease); }
.nav-mark .mark-paper { position:absolute; inset:0; opacity:0; }

/* Buy: the one pill in the bar, black on the paper. The sweep of light in
   the letters is the same one the buy panel's button has (style.css). The
   arrow is a pseudo-element of the pill, not part of the shine's span, so
   it stays solid while the light travels through the letters. */
/* justify-content and the min-width are what stop the tremble: the arrow
   used to widen the pill, and a pill that grows from its right edge while it
   is pinned to the right moves its left edge under the pointer. Wide enough
   to hold label and arrow from the start, the box never changes size; the
   label slides left by half the arrow and the arrow arrives beside it. */
.nav-buy { justify-self:end; display:inline-flex; align-items:center; justify-content:center; gap:0;
  min-width:5.7rem; background:var(--buy,#2C7A78); color:rgb(236,233,226);
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; font-weight:900; letter-spacing:.03em;
  text-transform:uppercase; text-decoration:none; padding:.66rem 1.15rem; border-radius:100px; white-space:nowrap;
  box-shadow:rgba(19,18,16,.28) 0 6px 16px -8px, rgba(19,18,16,.14) 0 1px 2px;
  transition:background-color .25s var(--ease), box-shadow .25s var(--ease); }
/* The same arrow as every other button on the site: no width at rest, so it
   opens from nothing under the pointer and the pill grows with it. The gap
   travels with the arrow, or a zero-width one would leave a hole between the
   label and the right edge. */
.nav-buy::after { content:'\2192'; display:inline-flex; align-items:center; overflow:hidden;
  width:0; margin-left:0; opacity:0; transform:scaleX(0); transform-origin:left center;
  transition:width .4s var(--ease), margin-left .4s var(--ease),
             opacity .3s var(--ease), transform .4s var(--ease); }
/* No rise, and no deeper shadow to sell one. Every other button on the site
   answers the pointer by darkening and opening its arrow, and this one was
   the only thing in the bar that came up off the page to meet you. The pill
   keeps the shadow it is born with; the movement is the arrow's. */
.nav-buy:hover { background:var(--buy-deep,#000); }
.nav-buy:hover::after, .nav-buy:focus-visible::after {
  width:14px; margin-left:.4rem; opacity:1; transform:scaleX(1); }
@media (hover:none) {
  .nav-buy::after { width:14px; margin-left:.4rem; opacity:1; transform:none; }
}
.nav-buy:focus-visible { outline:2px solid var(--crt); outline-offset:3px; }
.nav-buy .shine {
  background-image:linear-gradient(100deg,
    rgba(236,233,226,.65) 0 30%, #fff 48% 52%, rgba(236,233,226,.65) 70% 100%);
  background-size:200% 100%; background-repeat:repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:navShine 2.8s linear infinite; }
@keyframes navShine { 0% { background-position:200% 0; } 100% { background-position:0% 0; } }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .nav-buy .shine { -webkit-text-fill-color:currentColor; animation:none; }
}

/* Two lines, not three: the middle bar of a three-line icon has nowhere to go
   when it becomes an X and ends up cross-fading, which reads as a glitch. */
.nav-burger { justify-self:start; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; border:0; border-radius:12px; background:transparent;
  color:var(--ink); cursor:pointer; transition:background .2s var(--ease); }
.nav-burger:hover { background:rgba(19,18,16,.06); }
.nav-burger:focus-visible { outline:2px solid var(--crt); outline-offset:2px; }
.nav-burger-box { position:relative; display:block; width:20px; height:12px; }
.nav-burger-box i { position:absolute; left:0; width:100%; height:1.5px; border-radius:2px;
  background:currentColor; transition:transform .34s var(--ease); }
.nav-burger-box i:first-child { top:0; }
.nav-burger-box i:last-child { bottom:0; }
.nav-burger[aria-expanded="true"] .nav-burger-box i:first-child { transform:translateY(5.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-box i:last-child { transform:translateY(-5.25px) rotate(-45deg); }

.nav-panel { display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .52s var(--ease); }
.nav-panel-clip { overflow:hidden; }
body.nav-open .nav-panel { grid-template-rows:1fr; }

.np-inner { display:flex; flex-direction:column; gap:clamp(1.2rem,3vh,2rem);
  padding:.4rem 0 1.3rem; border-top:1px solid rgba(236,233,226,.16); margin-top:2px; }
/* the contents come up a moment after the fold has started to open */
.np-inner > * { opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease); }
body.nav-open .np-inner > * { opacity:1; transform:none; }
body.nav-open .np-inner > :nth-child(1) { transition-delay:.16s; }

/* The fold lists where you can go, one line each; a name colours under the
   pointer only. */
.np-menu { list-style:none; margin:0; padding:.6rem 0 0; }
.np-menu li { border-bottom:1px solid rgba(236,233,226,.14); }
.np-menu li:last-child { border-bottom:0; }
.np-menu a { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:1.5rem;
  padding:clamp(.8rem,2.2vh,1.15rem) 0; text-decoration:none; }
.np-name { font-size:clamp(1.5rem,3.6vw,2.2rem); font-weight:900; letter-spacing:-.03em; line-height:1;
  color:rgb(236,233,226); transition:color .25s var(--ease); }
.np-note { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.76rem; font-weight:500;
  letter-spacing:.02em; color:rgba(236,233,226,.48); text-align:right; }
.np-menu a:hover .np-name, .np-menu a:focus-visible .np-name { color:var(--tan); }
.np-menu a[aria-current="page"] .np-name { color:var(--tan); }
.np-menu a:focus-visible { outline:2px solid var(--tan); outline-offset:4px; }
@media (max-width:560px) { .np-menu a { grid-template-columns:1fr; gap:.25rem; } .np-note { text-align:left; } }

/* Open, the bar sits on its own dark ground and everything in it inverts. */
/* This list replaces the one above (later wins). It used to carry transform
   as well, for the lift on hover; nothing on the pill is transformed now. */
.nav-burger, .nav-buy { transition:background-color .4s var(--ease),
  border-color .4s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease); }
body.nav-open #nav { background:rgba(26,25,23,.86);
  border-color:rgba(236,233,226,.16);
  box-shadow:rgba(19,18,16,.5) 0 40px 80px -30px; }
body.nav-open .nav-burger { color:rgb(236,233,226); }
body.nav-open .nav-burger:hover { background:rgba(236,233,226,.1); }
body.nav-open .nav-mark .mark-ink { opacity:0; }
body.nav-open .nav-mark .mark-paper { opacity:1; }
/* Buy inverts too and becomes the one bright thing. The sweep is a gradient
   of near-whites clipped to the glyphs: on a paper pill it would be white on
   white, so it stands down and the text takes the ink. */
body.nav-open .nav-buy { background:rgb(236,233,226); color:var(--crt); box-shadow:none; }
body.nav-open .nav-buy .shine { -webkit-text-fill-color:currentColor; animation:none; }

/* On a dark page (artists.html) the bar is born inverted: black bar, paper
   entries and mark, the pill in paper. The same look the fold gives it
   when it opens on a phone, so a dark page and an open fold agree. */
#nav.nav-dark { background:rgba(26,25,23,.86); border-color:rgba(236,233,226,.16);
  box-shadow:rgba(0,0,0,.5) 0 24px 60px -28px; color:rgb(236,233,226); }
#nav.nav-dark .nav-links a { color:rgb(236,233,226); }
#nav.nav-dark .nav-links a:hover { color:var(--tan); }
#nav.nav-dark .nav-links a::after, body.nav-open .nav-links a::after { background:var(--tan); }
#nav.nav-dark .nav-links a[aria-current="page"] { color:var(--tan); }
#nav.nav-dark .nav-links a:focus-visible { outline-color:rgb(236,233,226); }
#nav.nav-dark .nav-burger { color:rgb(236,233,226); }
#nav.nav-dark .nav-burger:hover { background:rgba(236,233,226,.1); }
#nav.nav-dark .nav-mark .mark-ink { opacity:0; }
#nav.nav-dark .nav-mark .mark-paper { opacity:1; }
#nav.nav-dark .nav-buy { background:rgb(236,233,226); color:var(--crt);
  box-shadow:rgba(0,0,0,.45) 0 6px 16px -8px; }
/* On the dark bar the pill is paper, so it cannot darken to black: it takes
   a tone off the top, the same small step the paper pill on a photograph
   takes in buttons.css. */
#nav.nav-dark .nav-buy:hover { background:rgb(224,220,212); }
#nav.nav-dark .nav-buy:focus-visible { outline-color:rgb(236,233,226); }
#nav.nav-dark .nav-buy .shine { -webkit-text-fill-color:currentColor; animation:none; }

/* The way back, top left of a page's own content. Quiet: it is the way out
   of a detour, not an invitation to leave. */
.page-back { display:inline-flex; align-items:center; gap:.45rem;
  margin:0 0 1.4rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.8rem; font-weight:500; letter-spacing:.01em;
  color:var(--ink-faint, #6d6960); text-decoration:none; border:0;
  transition:color .2s var(--ease), gap .25s var(--ease); }
.page-back::before { content:'\2190'; font-size:1em; line-height:1; }
.page-back:hover { color:var(--ink, rgb(37,36,32)); gap:.65rem; }
.page-back:focus-visible { outline:2px solid var(--tan); outline-offset:3px; border-radius:4px; }
/* on the dark pages it reads the other way round */
.page-back.on-dark { color:rgba(244,244,239,.55); }
.page-back.on-dark:hover { color:rgba(244,244,239,.95); }

/* The dim is a sibling of the bar: nested inside it, it would sit under the
   bar's own backdrop-filter and have nothing left to blur. */
.nav-scrim { position:fixed; inset:0; z-index:99; background:rgba(20,19,17,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s var(--ease); }
.nav-scrim[hidden] { display:none; }
.nav-scrim.is-on { opacity:1; }

@media (max-width:640px) {
  .np-inner { max-height:min(70vh, 560px); overflow-y:auto; overscroll-behavior:contain; }
}
/* The pill measured 31px tall, under the 44px a finger needs. Keyed on the
   pointer rather than the width: a tablet is a touch device at 834px, and a
   width rule left it short. */
@media (hover:none) {
  #nav .nav-buy { min-height:44px; }
  .nav-burger { width:46px; height:46px; }
}
@media (prefers-reduced-motion:reduce) {
  .nav-panel, .nav-scrim { transition:none; }
  .nav-links a::after, .nav-buy::after { transition:none; }
  .np-inner > * { transition:none; transform:none; }
  .nav-buy .shine { animation:none; -webkit-text-fill-color:currentColor; }
}