:root {
  /* Declared, not inherited. Without it Chrome on Android auto-darkens and drags the
     warm paper toward a cool grey. */
  color-scheme: light;

  /* Palette sampled from "something wild-3065" */
  --paper:  #FCFBF9;
  --ink:    #161A21;
  --accent: #662C1F;
  --deep:   #0E1119;
  --tint:   #C98466;
  --muted:  #6F6B66;
  --rule:   #E5E1DA;

  --sans: "Lato", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --s:      1.5;   /* nav, titles, labels, status, footer */
  --s-body: 1.25;  /* descriptions */
  --s-did:  1;     /* medium, dimensions, status */

  /* the two ends of the glide — the mark is rendered once, at nav size, and scaled up */
  --mark-nav:  calc(1.06rem * var(--s));
  --mark-hero: clamp(2.1rem, 7.6vw, 5.4rem);

}

* { box-sizing: border-box; }
body { margin:0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
img { max-width:100%; display:block; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.wrap { max-width:1240px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3.5rem); }

/* ---------------- the opener ---------------- */
.stage { position:relative; height:100vh; height:100svh; overflow:hidden; background:var(--deep); }
.stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* scrim — the name sits on the photograph, so it has to stay legible on any of them */
.stage::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,10,14,.72) 0%, rgba(8,10,14,.34) 26%, rgba(8,10,14,0) 55%);
}
.stage-in {
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding-bottom:clamp(4.2rem,10vh,6.5rem);
}
/* The wordmark, at both its sizes. Same weight and tracking at each end, so the glide
   is a clean interpolation and nothing re-flows mid-flight.
   .mark-target is the REAL nav mark and is visible on every page. Only Home hides it,
   because there the flying copy takes its place — which is exactly what we will do to
   Squarespace's own site title. */
.mark-origin, .mark-target { white-space:nowrap; font-weight:300; letter-spacing:-.02em; line-height:1; }
.mark-origin { font-size:var(--mark-hero); visibility:hidden; }
.mark-target { font-size:var(--mark-nav); color:var(--ink); text-decoration:none; }
.mark-target em { font-style:normal; color:var(--accent); }
.glide-on .mark-target { visibility:hidden; }

.stage-sub {
  color:#EDE9E4; font-size: calc(.86rem * var(--s-body)); line-height:1.6;
  max-width:44ch; margin:1.5rem 0 0; text-shadow:0 1px 12px rgba(8,10,14,.5);
}
.cue {
  position:absolute; left:50%; bottom:1.6rem; z-index:3; transform:translateX(-50%);
  color:#EDE9E4; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.85;
}
.cue span { display:block; width:1px; height:2.1rem; background:linear-gradient(to bottom,#EDE9E4,transparent);
  transform-origin:top; animation:cue-drip 2.4s cubic-bezier(.6,0,.3,1) infinite; }
/* the line draws down, then wipes away from the top, and repeats — reads as "scroll" */
@keyframes cue-drip {
  0%   { transform:scaleY(0); transform-origin:top; }
  45%  { transform:scaleY(1); transform-origin:top; }
  55%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}
@media (prefers-reduced-motion: reduce) { .cue span { animation:none; } }

/* ---------------- the glide ---------------- */
/* One element, positioned where it lands, scaled and offset back to where it starts.
   Ending at scale 1 keeps the type crisp at the size it spends most of its life. */
/* Drawn once at the big size, then moved and shrunk with a transform (js/chrome.js).
   Shrinking stays sharp; growing a small drawing is what went pixelated. Resizing the
   font each frame instead made an iPhone redo layout and text every frame. */
.mark-fly {
  position:fixed; left:0; top:0; z-index:50; margin:0; white-space:nowrap; line-height:1;
  font-size:var(--mark-nav); font-weight:300; letter-spacing:-.02em;
  transform-origin:0 0; will-change:transform;
}
/* two copies stacked: one lit for the photograph, one inked for the paper.
   Cross-fading them beats interpolating a colour, and keeps the accent correct on both. */
.mark-fly .on-photo { display:block; color:#FBF9F7; text-shadow:0 1px 14px rgba(8,10,14,.55); }
.mark-fly .on-photo em { color:var(--tint); }
.mark-fly .on-paper { position:absolute; left:0; top:0; color:var(--ink); opacity:0; }
.mark-fly .on-paper em { color:var(--accent); }
.mark-fly em { font-style:normal; }

/* ---------------- the glide, run by the browser ---------------- */
/* Where the browser supports scroll-linked animation, js/chrome.js only hands over the
   two ends of the journey (--x0 .. --travel) and adds .glide-css. Every move below is
   then tied to the scroll position by the browser itself, off the main thread, so the
   name stays locked to the page instead of trailing behind it. The timings are the same
   bands the script path uses: a fraction of --travel, start to end. */
@supports (animation-timeline: scroll()) {
  .glide-css .mark-fly,
  .glide-css .mark-fly .on-photo, .glide-css .mark-fly .on-paper,
  .glide-css .top, .glide-css .bar-in nav, .glide-css .stage-sub, .glide-css .cue {
    animation-duration:auto; animation-fill-mode:both; animation-timing-function:linear;
    animation-timeline:scroll(root block);
  }
  .glide-css .mark-fly {
    animation-name:fly-move; animation-timing-function:cubic-bezier(.215,.61,.355,1);
    animation-range:0px var(--travel);
  }
  .glide-css .mark-fly .on-photo { animation-name:fade-out; animation-range:calc(var(--travel)*.42) calc(var(--travel)*.78); }
  .glide-css .mark-fly .on-paper { animation-name:fade-in;  animation-range:calc(var(--travel)*.42) calc(var(--travel)*.78); }
  .glide-css .top     { animation-name:fade-in;  animation-range:calc(var(--travel)*.5)  var(--travel); }
  .glide-css .bar-in nav { animation-name:nav-in; animation-range:calc(var(--travel)*.62) var(--travel); }
  .glide-css .stage-sub  { animation-name:fade-out; animation-range:calc(var(--travel)*.05) calc(var(--travel)*.42); }
  .glide-css .cue        { animation-name:cue-out;  animation-range:0px calc(var(--travel)*.25); }
  /* once it has landed, the real nav wordmark takes over, same place and size */
  .glide-done .mark-fly { visibility:hidden; }
  .glide-done.glide-on .mark-target { visibility:visible; }
}
@keyframes fly-move {
  from { transform:translate3d(var(--x0),var(--y0),0) scale(1); }
  to   { transform:translate3d(var(--x1),var(--y1),0) scale(var(--s1)); }
}
@keyframes fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes fade-out { from { opacity:1; } to { opacity:0; } }
@keyframes nav-in   { from { opacity:0; transform:translateY(.45rem); } to { opacity:1; transform:none; } }
@keyframes cue-out  { from { opacity:.85; } to { opacity:0; } }

/* ---------------- header that arrives ---------------- */
/* The header holds its final position the whole time and simply fades up. Sliding it
   made the mark and the chrome arrive on two different paths, which read as a glitch. */
.top { position:fixed; top:0; left:0; right:0; z-index:40; }
/* Only Home starts with the header hidden — it fades up as the name arrives. Every other
   page shows it immediately. */
.glide-on .top { opacity:0; pointer-events:none; }
.whatson { background: var(--deep); color: var(--paper); }
.whatson-in { display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; align-items:baseline;
  padding-top:.9rem; padding-bottom:.9rem; }
.whatson-k { font-size: calc(.64rem * var(--s)); letter-spacing:.18em; text-transform:uppercase;
  color: var(--tint); flex:none; }
.whatson-t { font-size: calc(.74rem * var(--s)); color:#E4E1E6; }

.bar { background:var(--paper); border-bottom:1px solid var(--rule); }
.bar-in { display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding-top:1.5rem; padding-bottom:1.4rem; flex-wrap:wrap; }
.bar-in ul { display:flex; flex-wrap:wrap; gap:.6rem clamp(.9rem,2.6vw,2rem); list-style:none; margin:0; padding:0; }
.bar-in nav a { font-size: calc(.52rem * var(--s)); letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); text-decoration:none; }
.bar-in nav a:hover { color: var(--accent); }
.glide-on .bar-in nav { opacity:0; transform:translateY(.4rem); }
.bar-in button { background:none; border:0; padding:0; cursor:pointer;
  font-size: calc(.52rem * var(--s)); letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); display:inline-flex; align-items:center; gap:.45rem; }
.bar-in button:hover, .bar-in button[aria-expanded="true"] { color: var(--accent); }
.caret { width:.42em; height:.42em; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:translateY(-.12em) rotate(45deg);
  transition:transform .2s ease; }
[aria-expanded="true"] .caret { transform:translateY(.06em) rotate(-135deg); }

/* The dropdown. Nineteen names in one column is what makes Moss's menu her site's worst
   feature — grouped columns let the whole archive sit open without a scroll. */
.menu { background:var(--paper); border-bottom:1px solid var(--rule);
  box-shadow:0 18px 40px -28px rgba(14,17,25,.5); }
.menu-in { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.6rem 2.6rem; padding-top:2rem; padding-bottom:2.4rem; }
.menu-h { font-size: calc(.5rem * var(--s)); letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); border-bottom:1px solid var(--rule); padding-bottom:.7rem; margin-bottom:.9rem; }
.menu-col ul { list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.menu-col a { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  text-decoration:none; color:var(--ink); font-size: calc(.72rem * var(--s-body));
  line-height:1.35; padding:.42rem 0; text-transform:none; letter-spacing:0; }
.menu-col a:hover { color:var(--accent); }
.mi-y { color:var(--muted); font-size:.72em; letter-spacing:.1em; flex:none;
  font-variant-numeric:tabular-nums; }
@media (max-width:640px) { .menu-in { padding-bottom:1.6rem; } .menu-h[aria-hidden] { display:none; } }

/* ---------------- page below the fold ---------------- */
.sec-label { font-size: calc(.5rem * var(--s)); letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); border-top:1px solid var(--rule); padding-top:1rem; margin:0 0 2.2rem; }
.sec-gap { margin-top:clamp(4rem,9vw,6.5rem); }

.bodies { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2.8rem 2.2rem; }
.body-card { display:block; text-decoration:none; color:inherit; }
.body-img { overflow:hidden; background:#F2EFEA; aspect-ratio:4/5; }
.body-img img { width:100%; height:100%; object-fit:cover; transition:opacity .35s ease, transform .6s ease; }
.body-card:hover .body-img img { opacity:.94; transform:scale(1.014); }
.body-t { font-size: calc(1rem * var(--s)); font-weight:300; line-height:1.25; margin-top:1rem; }
.body-d { font-size: calc(.72rem * var(--s-did)); color:var(--muted); line-height:1.55; margin-top:.4rem; }

/* Works — masonry, three across. Nothing is cropped: 298 images across the archive
   carry between 5 and 13 different aspect ratios per folder and only 30% land on 3:2,
   because a work's proportion is part of the work. So the frame gives way, not the art.

   This is a row-span grid, not CSS columns. Columns would flow items DOWN each column,
   which silently breaks chronology on a dated list. Spanning rows keeps left-to-right
   order and still staggers. Without JS it degrades to a plain aligned grid. */
.ex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:3.6rem 2.6rem; align-items:start; }
.ex-grid.masonry { gap:0 2.6rem; grid-auto-rows:8px; }
.ex-grid.masonry > * { margin-bottom:3.6rem; }
.ex-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.ex-img { overflow:hidden; background:#F4F1EC; }
.ex-img img { width:100%; height:auto; transition:opacity .35s ease, transform .6s ease; }
.ex-card:hover .ex-img img { opacity:.94; transform:scale(1.012); }
.ex-t { font-size: calc(1rem * var(--s)); font-weight:300; line-height:1.25; margin-top:1rem; }
.ex-v { font-size: calc(.72rem * var(--s-did)); color:var(--muted); line-height:1.55; margin-top:.4rem; }
.ex-y { font-size: calc(.62rem * var(--s-did)); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-top:.5rem; }

.more { display:inline-block; margin-top:2.6rem; text-decoration:none; font-weight:700;
  font-size: calc(.5rem * var(--s)); letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); border:1px solid var(--accent); padding:.8rem 1.3rem; }
.more:hover { background: var(--accent); color: var(--paper); }

.foot { background: var(--deep); color:#CFCBC6; margin-top:5.5rem; }
.foot-in { display:grid; gap:1.5rem; padding-top:3.2rem; padding-bottom:3.4rem; }
.foot-mark { font-size: calc(1.06rem * var(--s)); color: var(--paper); white-space:nowrap; }
.foot-mark em { font-style:normal; color: var(--tint); }
.foot-country { margin:0; max-width:60ch; font-size: calc(.6rem * var(--s)); line-height:1.7; color:#A5A19C; }
.foot-meta { display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; border-top:1px solid #232730;
  padding-top:1.4rem; font-size: calc(.5rem * var(--s)); letter-spacing:.12em; text-transform:uppercase; }
.foot-meta a { color: var(--tint); text-decoration:none; }
.foot-meta a:hover { color: var(--paper); }

.tbc { display:inline-block; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px dashed var(--accent); border-radius:2px;
  padding:.16rem .45rem; margin-left:.5rem; vertical-align:.14em; font-weight:700; }
/* iron-oxide disappears against the photograph — the marker uses the lifted ochre there */
.stage-sub .tbc { color:var(--tint); border-color:var(--tint); }

.below { padding-top:clamp(3.5rem,8vw,6rem); }
/* the header is fixed, so a page with no opener has to make room for it itself */
.page-top { padding-top:clamp(12.5rem,24vh,17rem); }

/* Nothing here depends on motion to be usable — with it off, the page simply starts
   in its landed state. */
@media (prefers-reduced-motion: reduce) {
  * { transition:none!important; animation:none!important; }
}


/* ---------------- click to enlarge ---------------- */
.hint { font-size: calc(.62rem * var(--s-did)); color:var(--muted); letter-spacing:.02em;
  margin:-1.4rem 0 2.4rem; }
.hint::before { content:"\2316"; color:var(--accent); margin-right:.5rem; }
.ex-card[data-lb] { cursor:zoom-in; }

.lb { position:fixed; inset:0; z-index:90; background:rgba(14,17,25,.975); display:none;
  padding:clamp(1rem,3vw,2.5rem); }
.lb.on { display:grid; grid-template-rows:1fr auto; gap:1.4rem; }
.lb-stage { display:flex; align-items:center; justify-content:center; min-height:0; }
.lb-stage img { max-height:100%; max-width:100%; width:auto; object-fit:contain; }
.lb-did { color:#EDEAE5; max-width:62ch; margin:0 auto; text-align:center; }
.lb-did .did-t { font-size:1.15rem; }
.lb-did .did-y { color:#8D8A85; }
.lb-did .did-m, .lb-did .did-c { color:#ABA59D; }
.lb-did .did-q { color:var(--tint); }
.lb-btn { position:absolute; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:#EDEAE5; width:2.75rem; height:2.75rem; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1rem; }
.lb-btn:hover { background:rgba(255,255,255,.14); }
.lb-x { top:1rem; right:1rem; }
.lb-prev { left:1rem; top:50%; transform:translateY(-50%); }
.lb-next { right:1rem; top:50%; transform:translateY(-50%); }
.lb-count { position:absolute; top:1.35rem; left:1.35rem; font-size:.72rem; letter-spacing:.14em;
  color:#7E848C; font-variant-numeric:tabular-nums; }

/* ---------------- arriving on scroll ---------------- */
/* Opacity and transform only — neither changes layout, so the masonry measurement taken
   before an item reveals is still the right one. */
.reveal { opacity:0; transform:translateY(10px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } }