/* ==========================================================================
   Stone Sails Sculpture — site.css
   Palette derived from the artist's own materials:
   marine slate (sea before dawn), alabaster, sea fog, ship's-bell brass,
   Cor-Ten oxide, and a single stroke of dawn light.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #0E1518;   /* deep marine slate — the sea at night */
  --ink-2:      #131C20;   /* raised surface */
  --ink-3:      #1A2529;   /* card / plate */
  --stone:      #E8E4DC;   /* alabaster */
  --stone-dim:  #B7BEBB;
  --fog:        #8A9598;   /* weathered grey-green */
  --brass:      #B98F4C;   /* ship's bell */
  --brass-lt:   #D8B472;
  --oxide:      #8A4F33;   /* Cor-Ten */
  --dawn:       #EBCB92;   /* first light — used once, at the horizon */
  --verdigris:  #7FA893;   /* patina on bronze left out in the weather */

  --line:       rgba(232, 228, 220, 0.13);
  --line-soft:  rgba(232, 228, 220, 0.07);

  --display: "Cinzel", Georgia, serif;                 /* carved Roman capitals */
  --body:    "Spectral", Georgia, serif;               /* the prose voice */
  --util:    "Barlow Condensed", "Arial Narrow", sans-serif; /* manifest / stencil */

  --gut: clamp(1.25rem, 4vw, 3rem);
  --max: 1240px;
  --rule: 1px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--stone);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.12; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- utilities ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 68ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--stone); color: var(--ink);
  padding: 0.6rem 1rem; font-family: var(--util); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; }

/* ---------- eyebrow / label ---------- */
.eyebrow {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.1rem;
}
.eyebrow--fog { color: var(--fog); }

/* ---------- SIGNATURE: the horizon ----------
   A single luminous rule. It divides every major section the way a horizon
   divides sea from sky — and in the hero it is the axis the page hangs on.
   "Turn to the dawn, till the darkness is gone."
   ------------------------------------------------------------------------ */
.horizon {
  position: relative;
  height: var(--rule);
  background: linear-gradient(90deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
  margin: 0;
}
.horizon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: radial-gradient(58% 100% at 50% 100%, rgba(235, 203, 146, 0.075), transparent 72%);
  pointer-events: none;
}

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 21, 24, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--rule) solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.masthead.is-stuck {
  background: rgba(14, 21, 24, 0.94);
  border-bottom-color: var(--line);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}
.wordmark { text-decoration: none; display: block; line-height: 1; }
.wordmark__name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}
.wordmark__sub {
  display: block;
  margin-top: 0.42rem;
  font-family: var(--util);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav a {
  font-family: var(--util);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-dim);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.2s ease;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover, .nav a:focus-visible { color: var(--stone); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--stone); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--brass); }

.navtoggle {
  display: none;
  background: none; border: var(--rule) solid var(--line);
  color: var(--stone); padding: 0.55rem 0.85rem;
  font-family: var(--util); font-size: 0.85rem;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}

@media (max-width: 900px) {
  .navtoggle { display: block; }
  .nav {
    position: fixed; inset: 78px 0 auto;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--ink-2);
    border-block: var(--rule) solid var(--line);
    padding: 0.5rem var(--gut) 1.5rem;
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav.is-open { max-height: 70vh; }
  .nav a { width: 100%; padding: 0.95rem 0; border-bottom: var(--rule) solid var(--line-soft); font-size: 1.05rem; }
  .nav a::after { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) 0; }
/* A full-width opening starts straight under the masthead; the breathing room
   the side-by-side layout needs at the top would read as a gap here. */

.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero__lines {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.6rem);
  line-height: 1.5;
  color: var(--stone-dim);
  margin-bottom: 2.2rem;
}
.hero__lines span { display: block; }
/* ---------- the opening image ----------
   Never cropped. It keeps its own proportions and is held back by height, so
   a tall photograph cannot run off the screen and a wide one fills the width.
   --hero-mono is set on the element by the Working Page: 0 leaves the colour
   alone, 1 is fully black and white, anything between is a partial wash. */
.hero__figure { position: relative; --hero-mono: 0; }
.hero__figure img {
  width: 100%; height: auto; display: block;
  max-height: 78vh; object-fit: contain; margin-inline: auto;
  filter: saturate(calc(0.82 * (1 - var(--hero-mono)))) contrast(calc(1.04 + 0.06 * var(--hero-mono)));
}
.hero__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 21, 24, 0.55), transparent 45%);
  pointer-events: none;
}



/* Title laid over the picture. The scrim is part of this layout rather than
   an effect — without it the type is at the mercy of whatever is behind. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(14, 21, 24, 0.86) 0%, rgba(14, 21, 24, 0.62) 38%, rgba(14, 21, 24, 0.1) 72%, transparent 100%),
    linear-gradient(to top, rgba(14, 21, 24, 0.7), transparent 55%);
}
.hero__over {
  position: absolute; inset: 0; display: flex; align-items: center;
}
.hero__over .wrap { width: 100%; }
@media (max-width: 720px) {
  .hero__scrim { background: linear-gradient(to top, rgba(14, 21, 24, 0.92) 0%, rgba(14, 21, 24, 0.72) 45%, rgba(14, 21, 24, 0.3) 100%); }
  .hero__over { align-items: flex-end; padding-bottom: 1.5rem; }
}


/* ---- treatments, each independent of the others ---- */

/* A very slow push in. Anyone who has asked their system for less motion
   gets none of it. */
@keyframes ss-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.085); }
}
.hero__figure--drift img { animation: ss-drift 38s ease-out both; transform-origin: 50% 45%; }
@media (prefers-reduced-motion: reduce) {
  .hero__figure--drift img { animation: none; }
}

/* Film grain, plus a darkened edge to carry the eye inward. */
.hero__figure--grain::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.hero__figure--grain { box-shadow: inset 0 0 clamp(60px, 12vw, 190px) rgba(10, 15, 17, 0.75); }

/* Dissolve into the page instead of stopping on a hard line. */
.hero__figure--fade img {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}


/* The horizon rule is drawn for the side-by-side composition; the full-width
   layouts have the picture itself doing that work. */

/* the horizon crosses behind the composition */
.hero__horizon {
  position: absolute; left: 0; right: 0; bottom: 118px; z-index: 1;
  height: var(--rule);
  background: linear-gradient(90deg, transparent, rgba(235, 203, 146, 0.34) 20%, rgba(235, 203, 146, 0.34) 80%, transparent);
}
.hero__horizon::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(235, 203, 146, 0.12), transparent 70%);
}
.hero__foot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 0.7rem 2rem;
  padding-block: 2.4rem 2.6rem;
  font-family: var(--util);
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
}

@media (max-width: 860px) {
  .hero__horizon { bottom: 96px; }
}

/* ---------- fellowship bar ---------- */
.fellowship {
  border-block: var(--rule) solid var(--line);
  background: var(--ink-2);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
.fellowship__inner {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
}
.fellowship__mark {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  color: var(--brass); letter-spacing: 0.04em;
}
.fellowship p { margin: 0; color: var(--stone-dim); max-width: 62ch; }
.fellowship__links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 780px) {
  .fellowship__inner { grid-template-columns: 1fr; }
}

/* ---------- sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section__head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pagetitle {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.pagehead { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.pagehead p { color: var(--stone-dim); max-width: 62ch; }

/* ---------- links & buttons ---------- */
.link {
  font-family: var(--util);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass-lt);
  text-decoration: none;
  border-bottom: var(--rule) solid rgba(216, 180, 114, 0.35);
  padding-bottom: 0.22rem;
  transition: border-color 0.24s ease, color 0.24s ease;
  display: inline-block;
}
.link:hover, .link:focus-visible { color: var(--dawn); border-bottom-color: var(--dawn); }

.btnrow { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn {
  display: inline-block;
  font-family: var(--util);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border: var(--rule) solid var(--line);
  color: var(--stone);
  background: transparent;
  transition: background 0.26s ease, border-color 0.26s ease, color 0.26s ease;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { border-color: var(--brass); color: var(--dawn); }
.btn--solid { background: var(--stone); color: var(--ink); border-color: var(--stone); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }

/* ---------- prose ---------- */
.prose p { color: var(--stone-dim); }
.prose p + p { margin-top: 0; }
.prose--lead p { font-size: 1.08em; color: var(--stone); }

.pullquote {
  border-left: 2px solid var(--brass);
  padding-left: clamp(1.2rem, 3vw, 2.2rem);
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.pullquote p {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  line-height: 1.5;
  color: var(--stone);
}

/* ---------- studio strip ---------- */
/* The strip holds however many pictures the Working Page says it does, so the
   columns are worked out from the width rather than fixed at three. */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(0.6rem, 1.6vw, 1.2rem); align-items: start; }
.strip figure { margin: 0; position: relative; overflow: hidden; }
.strip img {
  width: 100%; height: auto; display: block; object-fit: contain;
  filter: saturate(0.78) contrast(1.03);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.strip figure:hover img { transform: scale(1.035); filter: saturate(0.95) contrast(1.05); }
.strip figcaption {
  font-family: var(--util); font-size: 0.82rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fog); padding-top: 0.75rem;
}
@media (max-width: 720px) { .strip { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); } }

/* ---------- split (image + text) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center;
}
.split--wide-text { grid-template-columns: 0.85fr 1.15fr; }
.split img { width: 100%; height: auto; display: block; object-fit: contain; filter: saturate(0.82) contrast(1.04); }
/* ratio hints are no longer applied to photographs — they set their own
   height now — but the classes stay harmless on anything else. */
.split .ratio-tall, .split .ratio-square { aspect-ratio: auto; }
@media (max-width: 820px) {
  .split, .split--wide-text { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WORKS — museum tombstone plates.
   Each piece is set the way it is set on a gallery wall: title, then a
   manifest line of material, dimensions, and status. Structure carries the
   catalogue information, not decoration.
   ========================================================================== */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.filter {
  font-family: var(--util); font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: transparent; color: var(--fog);
  border: var(--rule) solid var(--line);
  padding: 0.55rem 1.15rem; cursor: pointer;
  transition: color 0.22s ease, border-color 0.22s ease;
}
.filter:hover { color: var(--stone); }
.filter[aria-pressed="true"] { color: var(--ink); background: var(--stone); border-color: var(--stone); }

.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.9rem);
}
.work {
  background: var(--ink-3);
  border: var(--rule) solid var(--line);
  display: flex; flex-direction: column;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.work:hover { border-color: rgba(185, 143, 76, 0.45); }
.works { align-items: start; }
.work[hidden] { display: none; }

/* ---------- how a photograph sits in a frame ----------
   Three behaviours, chosen in the Working Page under Site settings and
   carried on the <body> as data-fit:

     natural  the frame takes the shape of the picture      (the default)
     whole    a fixed frame, the whole picture inside it, ground around
     fill     a fixed frame, the picture cropped to fill it

   Only "fill" ever loses part of a picture, and nothing ever stretches one. */
.work__plate {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(232, 228, 220, 0.045), transparent 60%),
    var(--ink-2);
  display: grid; place-items: center;
}
.work__plate img {
  width: 100%; height: auto; display: block; object-fit: contain;
  filter: saturate(0.8) contrast(1.04);
}
/* a plate with no photograph still needs a shape to hold the sail glyph */
.work__plate--empty { aspect-ratio: 4 / 5; }

/* fit rules moved to the per-device block at the end */
/* engraved sail glyph stands in until a photograph is placed */
.work__plate--empty::before {
  content: "";
  width: 44%; height: 60%;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cg fill='none' stroke='%23E8E4DC' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M50 6 L50 104' opacity='.32'/%3E%3Cpath d='M50 12 C74 46 82 80 77 100 L50 100' opacity='.26'/%3E%3Cpath d='M14 104 L86 104' opacity='.16'/%3E%3C/g%3E%3C/svg%3E");
}
.work__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.work__title {
  font-family: var(--display); font-weight: 600;
  font-size: 0.98rem; letter-spacing: 0.11em; text-transform: uppercase;
  line-height: 1.3; margin-bottom: 0.7rem;
}
.manifest { margin: 0 0 1.05rem; }
.manifest div {
  display: flex; gap: 0.7rem; align-items: baseline;
  font-family: var(--util); font-size: 0.86rem; letter-spacing: 0.055em;
  padding: 0.2rem 0; border-top: var(--rule) solid var(--line-soft);
}
.manifest div:first-child { border-top: 0; }
.manifest dt { color: var(--fog); text-transform: uppercase; letter-spacing: 0.14em; flex: 0 0 5.5rem; }
.manifest dd { margin: 0; color: var(--stone-dim); }
.work__foot {
  margin-top: auto; padding-top: 0.9rem;
  border-top: var(--rule) solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
}
/* status marker — replaces the old price line (shop removed in v1.1) */
.status {
  font-family: var(--util); font-size: 0.84rem; font-weight: 500;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--fog);
}
.status--studio     { color: var(--brass); }
.status--exhibited  { color: var(--stone-dim); }
.status--collection { color: var(--oxide); }
.work__note {
  font-size: 0.94rem; color: var(--fog); line-height: 1.6;
  margin: 0 0 1rem; font-style: italic;
}

/* ---------- exhibition record ---------- */
.record { border-top: var(--rule) solid var(--line); }
.entry {
  display: grid; grid-template-columns: 12rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-bottom: var(--rule) solid var(--line);
}
.entry__when {
  font-family: var(--util); font-size: 0.92rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass); padding-top: 0.3rem;
}
.entry__venue {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.entry__where {
  font-family: var(--util); font-size: 0.95rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fog); margin-bottom: 1.1rem;
}
.entry__piece {
  font-family: var(--body); font-style: italic; font-size: 1.1rem;
  color: var(--stone); margin-bottom: 0.9rem;
}
.entry__links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.2rem; }
.entry figure { margin: 1.4rem 0 0; }
.entry figure img { filter: saturate(0.85) contrast(1.03); }
.entry__media { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; margin-top: 1.5rem; }
/* Each exhibition picture is a link to its show. The anchor has to behave as
   the grid cell the <img> used to be, or the layout shifts. */
.entry__shot { display: block; text-decoration: none; overflow: hidden; }
.entry__shot img { width: 100%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease; }
.entry__shot:hover img { transform: scale(1.03); filter: saturate(0.98) contrast(1.04); }
@media (prefers-reduced-motion: reduce) { .entry__shot img { transition: none; } .entry__shot:hover img { transform: none; } }
@media (max-width: 760px) { .entry { grid-template-columns: 1fr; gap: 0.9rem; } }

/* ---------- checklist (compact past list) ---------- */
.checklist { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.checklist li { break-inside: avoid; padding-block: 0.85rem; border-bottom: var(--rule) solid var(--line-soft); }
.checklist b {
  display: block; font-family: var(--body); font-style: italic; font-weight: 400;
  color: var(--stone); font-size: 1.05rem;
}
.checklist span {
  display: block; font-family: var(--util); font-size: 0.88rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); margin-top: 0.2rem;
}
@media (max-width: 720px) { .checklist { columns: 1; } }

/* ---------- posts ---------- */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.post { border: var(--rule) solid var(--line); background: var(--ink-3); display: flex; flex-direction: column; }
.post img { width: 100%; height: auto; display: block; object-fit: contain; background: var(--ink-2); filter: saturate(0.82); }
/* fit rules moved to the per-device block at the end */
.post__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.post__meta { font-family: var(--util); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog); margin-bottom: 0.7rem; }
.post__title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.35; margin-bottom: 0.8rem; }
.post p { color: var(--stone-dim); }
.post .link { margin-top: auto; align-self: flex-start; padding-top: 1rem; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.detail { padding-block: 1.3rem; border-top: var(--rule) solid var(--line); }
.detail dt { font-family: var(--util); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog); margin-bottom: 0.45rem; }
/* A pasted URL is one long unbreakable word. Left alone, the Instagram link
   pushed the whole contact column 76px past the right edge of a phone. */
.detail dd { margin: 0; font-size: 1.05rem; color: var(--stone); overflow-wrap: anywhere; }
.detail dd a { text-decoration: none; border-bottom: var(--rule) solid var(--line); transition: border-color 0.2s ease; }
.detail dd a:hover { border-bottom-color: var(--brass); }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block; font-family: var(--util); font-size: 0.84rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); margin-bottom: 0.5rem;
}
.field input, .field textarea, .field select {
  width: 100%; background: var(--ink-2); color: var(--stone);
  border: var(--rule) solid var(--line); padding: 0.85rem 1rem;
  font-family: var(--body); font-size: 1rem; font-weight: 300;
  transition: border-color 0.24s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brass); outline-offset: 2px; }
.field textarea { min-height: 160px; resize: vertical; }
.formnote { font-family: var(--util); font-size: 0.88rem; letter-spacing: 0.08em; color: var(--fog); margin-top: 1rem; }

/* ---------- footer ---------- */
.footer { background: var(--ink-2); border-top: var(--rule) solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: clamp(3rem, 7vw, 6rem); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(1.8rem, 4vw, 3.5rem); }
.footer h2 { font-family: var(--util); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fog); margin-bottom: 1.1rem; font-weight: 500; }
.footer address { font-style: normal; color: var(--stone-dim); line-height: 1.85; }
.footer a { color: var(--stone-dim); text-decoration: none; transition: color 0.2s ease; }
.footer a:hover { color: var(--dawn); }
.footer__social { display: flex; flex-direction: column; gap: 0.65rem; font-family: var(--util); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.9rem; }
.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: var(--rule) solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  font-family: var(--util); font-size: 0.84rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fog);
}
/* The mark and its motto, as one piece. Sized off the line of type beside it
   so it stays in proportion however the footer text scales. */
.footer__mark { display: inline-flex; align-items: center; gap: 0.8rem; }
.footer__mark img { height: 3.4em; width: auto; display: block; }

.newsletter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.newsletter input { flex: 1 1 11rem; background: var(--ink-3); border: var(--rule) solid var(--line); color: var(--stone); padding: 0.7rem 0.85rem; font-family: var(--body); font-size: 0.95rem; }
.newsletter button { flex: 0 0 auto; padding: 0.7rem 1.1rem; font-size: 0.84rem; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* page-load sequence for the hero */
.lift { opacity: 0; transform: translateY(22px); animation: lift 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.lift--1 { animation-delay: 0.05s; }
.lift--2 { animation-delay: 0.18s; }
.lift--3 { animation-delay: 0.31s; }
.lift--4 { animation-delay: 0.44s; }
@keyframes lift { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lift { opacity: 1; transform: none; animation: none; } }

/* ==========================================================================
   v1.1 — refinement pass
   ========================================================================== */

/* ---------- cross-document view transitions ----------
   "Every page turn should feel like walking into a new room."
   The native View Transitions API does this with no framework and no AJAX
   router. The masthead is given its own transition name so it holds still
   while the room changes around it. Browsers without support just navigate.
   ------------------------------------------------------------------------ */
@view-transition { navigation: auto; }

.masthead { view-transition-name: masthead; }
.pagetitle, .hero h1 { view-transition-name: pagetitle; }

::view-transition-old(root) { animation: vt-out 240ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 420ms cubic-bezier(0, 0, 0.2, 1) both; }
::view-transition-old(masthead),
::view-transition-new(masthead) { animation: none; mix-blend-mode: normal; }
::view-transition-old(pagetitle) { animation: vt-out 180ms ease both; }
::view-transition-new(pagetitle) { animation: vt-title 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes vt-out   { to   { opacity: 0; } }
@keyframes vt-in    { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-title { from { opacity: 0; transform: translateY(20px); letter-spacing: 0.14em; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(pagetitle), ::view-transition-new(pagetitle) { animation: none; }
}

/* ---------- cinematic band ----------
   Full-bleed, art seen in context rather than isolated in a square.
   Lives outside .wrap so it needs no negative-margin trickery.
   ------------------------------------------------------------------------ */
.cinema { position: relative; overflow: clip; isolation: isolate; }
.cinema__media {
  position: absolute; inset: 0; z-index: -2;
}
.cinema__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  filter: saturate(0.62) contrast(1.08) brightness(0.72);
  transform: scale(1.04);
}
.cinema::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(14,21,24,0.94) 0%, rgba(14,21,24,0.62) 46%, rgba(14,21,24,0.30) 100%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 22%, transparent 74%, var(--ink) 100%);
}
.cinema__inner {
  min-height: clamp(420px, 62vh, 680px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.cinema__line {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.1rem);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.18;
  max-width: 18ch;
}
.cinema__sub {
  font-family: var(--body); font-style: italic;
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--stone-dim); max-width: 46ch; margin-top: 1.5rem;
}
.cinema .horizon { margin-top: clamp(2rem, 4vw, 3rem); max-width: 30rem; }

/* ---------- pointer-tracked perspective on works ----------
   Hovering a piece shifts its perspective a few degrees, the way a plinth
   reads differently when you step around it. Pointer devices only.
   ------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .works { perspective: 1500px; }
  .work {
    transform:
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translate3d(0, var(--ty, 0px), 0);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
    will-change: transform;
  }
  .work.is-tracking { transition: transform 90ms linear, border-color 0.3s ease; }
  .work__plate::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(38% 38% at var(--mx, 50%) var(--my, 50%),
                rgba(235, 203, 146, 0.13), transparent 68%);
    opacity: 0; transition: opacity 320ms ease;
  }
  .work:hover .work__plate::after { opacity: 1; }
}

/* ---------- viewing room ---------- */
.vr-note {
  border: var(--rule) solid var(--line);
  border-left: 2px solid var(--brass);
  background: var(--ink-2);
  padding: clamp(1.2rem, 3vw, 2rem);
  margin-block: clamp(1.6rem, 3vw, 2.4rem);
}
.vr-note p { color: var(--stone-dim); }
.vr-note p:first-child { color: var(--stone); }

/* ==========================================================================
   v1.2 — graceful image fallback
   If a photograph fails to load we never show a broken-image icon. The
   container becomes a stone-toned panel carrying the engraved sail glyph,
   so an incomplete gallery still reads as a deliberate empty plate.
   ========================================================================== */
.img-fallback {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(232, 228, 220, 0.05), transparent 62%),
    var(--ink-2);
  border: var(--rule) solid var(--line-soft);
  display: grid; place-items: center;
  min-height: 220px;
}
.img-fallback img { display: none !important; }
.img-fallback::before {
  content: "";
  width: 38%; max-width: 150px; aspect-ratio: 100 / 124;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cg fill='none' stroke='%23E8E4DC' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M50 6 L50 104' opacity='.30'/%3E%3Cpath d='M50 12 C74 46 82 80 77 100 L50 100' opacity='.24'/%3E%3Cpath d='M14 104 L86 104' opacity='.15'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__figure.img-fallback { aspect-ratio: 4 / 5; }
.strip figure.img-fallback { aspect-ratio: 3 / 4; }
.entry__media .img-fallback,
.entry__media .entry__shot.img-fallback { min-height: 170px; }
.cinema__media.img-fallback { border: 0; }
.cinema__media.img-fallback::before { display: none; }

/* ==========================================================================
   v1.5 — one page per sculpture
   ========================================================================== */

.crumbs {
  padding-block: clamp(2rem, 4vw, 3rem) 0;
  font-family: var(--util); font-size: 0.86rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--fog);
  display: flex; gap: 0.7rem; align-items: center;
}
.crumbs a { color: var(--brass-lt); text-decoration: none; }
.crumbs a:hover { color: var(--dawn); }

.workpage {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 900px) { .workpage { grid-template-columns: 1fr; } }

.workpage__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.1; margin-bottom: 1.4rem;
}
.workpage__single {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(232, 228, 220, 0.045), transparent 60%),
    var(--ink-2);
  border: var(--rule) solid var(--line);
}
.workpage__single img {
  width: 100%; height: auto; max-height: 82vh; object-fit: contain;
  display: block; margin-inline: auto;
}
.workpage__plate {
  width: 100%; aspect-ratio: 4 / 5;
  border: var(--rule) solid var(--line);
}
.workpage__plate {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(232, 228, 220, 0.045), transparent 60%),
    var(--ink-2);
  display: grid; place-items: center;
}
.hint-note {
  font-family: var(--util); font-size: 0.88rem; letter-spacing: 0.1em;
  color: var(--fog); margin-top: 0.9rem;
}

/* ---------- carousel ---------- */
/* The same ground as a card plate, so a photograph that does not fill the
   frame sits in a lit case rather than against a gap. */
.carousel { position: relative; border: var(--rule) solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(232, 228, 220, 0.045), transparent 60%),
    var(--ink-2); }
.carousel__slide { margin: 0; }
.carousel__slide[hidden] { display: none; }
.carousel__slide img {
  width: 100%; height: auto; max-height: 82vh; object-fit: contain;
  display: block; margin-inline: auto;
  filter: saturate(0.85) contrast(1.03);
}
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(14, 21, 24, 0.72); color: var(--stone);
  border: var(--rule) solid var(--line);
  width: 44px; height: 56px; cursor: pointer;
  font-size: 1.1rem; display: grid; place-items: center;
  transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.carousel__arrow:hover { background: var(--ink); border-color: var(--brass); color: var(--dawn); }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__count {
  position: absolute; right: 0.8rem; bottom: 0.8rem; margin: 0;
  font-family: var(--util); font-size: 0.82rem; letter-spacing: 0.18em;
  color: var(--stone-dim); background: rgba(14, 21, 24, 0.72);
  padding: 0.3rem 0.7rem; border: var(--rule) solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.thumb {
  width: 68px; height: 68px; padding: 0; cursor: pointer;
  border: var(--rule) solid var(--line); background: var(--ink-2);
  transition: border-color 0.24s ease, opacity 0.24s ease;
  opacity: 0.55;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { opacity: 0.85; }
.thumb--on { border-color: var(--brass); opacity: 1; }

.workvideo {
  width: 100%; margin-top: 1rem;
  border: var(--rule) solid var(--line); background: var(--ink-2);
}

/* ---------- the record column ---------- */
.manifest--page div { padding: 0.5rem 0; }
.manifest--page dt { flex: 0 0 7rem; }

.workpage__shows { margin-top: 2.2rem; padding-top: 1.6rem; border-top: var(--rule) solid var(--line); }
.showlist li { padding-block: 0.7rem; border-bottom: var(--rule) solid var(--line-soft); }
.showlist b {
  display: block; font-family: var(--body); font-style: italic;
  font-weight: 400; color: var(--stone); font-size: 1.02rem;
}
.showlist span {
  display: block; font-family: var(--util); font-size: 0.86rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); margin-top: 0.2rem;
}

/* ---------- walk the collection ---------- */
.pager {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem; align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
}
.pager__side { text-decoration: none; display: block; }
.pager__side--next { text-align: right; }
.pager__dir {
  display: block; font-family: var(--util); font-size: 0.8rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
}
.pager__name {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stone-dim); margin-top: 0.4rem; transition: color 0.2s ease;
}
.pager__side:hover .pager__name { color: var(--dawn); }
.pager__all {
  font-family: var(--util); font-size: 0.88rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--fog); text-decoration: none;
  border: var(--rule) solid var(--line); padding: 0.6rem 1.2rem;
  transition: border-color 0.24s ease, color 0.24s ease;
}
.pager__all:hover { border-color: var(--brass); color: var(--stone); }
@media (max-width: 680px) {
  .pager { grid-template-columns: 1fr; text-align: left; }
  .pager__side--next { text-align: left; }
}

/* ---------- gallery card: more-photos marker + whole-card link ---------- */
.work__plate { position: relative; }
.plate__more {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  font-family: var(--util); font-size: 0.76rem; letter-spacing: 0.16em;
  color: var(--stone); background: rgba(14, 21, 24, 0.74);
  padding: 0.25rem 0.6rem; border: var(--rule) solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.work__title a { text-decoration: none; color: inherit; }
.work__title a:hover { color: var(--dawn); }
.work__plate-link { display: block; width: 100%; height: 100%; }

/* Keep a failed image from stretching the small containers. The fallback
   plate is sized for a work card; thumbnails and the carousel need their
   own aspect ratio honoured instead of its minimum height. */
.thumb.img-fallback { min-height: 0; width: 68px; height: 68px; }
.thumb.img-fallback::before { width: 54%; }
.carousel__slide.img-fallback { min-height: 0; aspect-ratio: 4 / 5; }
.workpage__single.img-fallback { min-height: 0; aspect-ratio: 4 / 5; }

/* ==========================================================================
   v1.6 — cycling plates, video gate, exhibition pages
   ========================================================================== */

/* ---------- cycling photo plate ----------
   Every photograph is stacked in the same box; only one carries .is-on.
   The fade crossfades, the slide eases across, the cut swaps instantly. */
/* The plate carries the shape itself.
   Nothing inside it is ever in normal flow — the photographs sit inside an
   absolutely positioned link so the whole tile is clickable — so the box has
   to come from the plate. It used to come from ::after with padding-top,
   which collided with the pointer-tracked hover sheen that also uses
   .work__plate::after; an element has only one, the sheen's position:absolute
   won, and the plate collapsed to nothing on every device with a real
   pointer. Touch screens were fine because the sheen rule is behind
   @media (hover: hover), which is exactly the split that showed up.

   4/5 is the same shape padding-top:125% described, and object-fit:contain
   keeps every photograph whole inside it — several pictures of different
   shapes need one box, and none of them should be cropped to fit it. */
.plate--cycling { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.plate--cycling .plate__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; object-fit: contain;
}
/* fit rules moved to the per-device block at the end */
.plate--cycling .plate__img:not(.is-on) { opacity: 0; pointer-events: none; }

.plate--fade .plate__img { transition: opacity 1.1s ease; }
.plate--fade .plate__img.is-on { opacity: 1; }

.plate--slide .plate__img {
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(6%);
}
.plate--slide .plate__img.is-on { opacity: 1; transform: none; }

.plate--cut .plate__img { transition: none; }
.plate--cut .plate__img.is-on { opacity: 1; }

/* The box the stack sits in.
   This used to be done with ::after and padding-top, which quietly broke:
   the pointer-tracked hover sheen further up also uses .work__plate::after,
   an element only ever has one, and the sheen's position:absolute took the
   spacer out of flow — so the plate collapsed to nothing on any device with
   a real pointer, while touch screens (where the sheen rule does not apply)
   looked fine. aspect-ratio does the same job without the collision. */
.plate--cycling .work__plate-link { position: absolute; inset: 0; z-index: 2; }
.plate--cycling .plate__more { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .plate--cycling .plate__img { transition: none; }
}

/* ---------- video gate ---------- */
.videogate {
  position: relative; margin-top: 1rem;
  aspect-ratio: 16 / 9;
  background: var(--ink-2) center / cover no-repeat;
  border: var(--rule) solid var(--line);
  display: grid; place-items: center;
}
.videogate::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 21, 24, 0.7), rgba(14, 21, 24, 0.25));
}
.videogate__play {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(14, 21, 24, 0.78); color: var(--stone);
  border: var(--rule) solid var(--line);
  padding: 0.9rem 1.6rem; cursor: pointer;
  font-family: var(--util); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: border-color 0.24s ease, color 0.24s ease, background 0.24s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.videogate__play:hover { border-color: var(--brass); color: var(--dawn); background: var(--ink); }
.videogate__icon { font-size: 0.8rem; }

/* ---------- exhibition detail page ---------- */
.exhead {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 900px) { .exhead { grid-template-columns: 1fr; } }
.exhead__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
  letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.12; margin-bottom: 0.8rem;
}
.exhead__where {
  font-family: var(--util); font-size: 1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fog);
}
.exhead__media .work__plate { aspect-ratio: 4 / 3; }
.exhead__media .plate--cycling { aspect-ratio: 4 / 3; }

.count-sub {
  font-family: var(--util); font-size: 0.85em;
  letter-spacing: 0.1em; color: var(--fog); margin-left: 0.5rem;
}
.work__also {
  font-size: 0.92rem; color: var(--fog); margin: 0 0 1rem;
  font-family: var(--body);
}
.work__also a { color: var(--brass-lt); text-decoration: none; border-bottom: var(--rule) solid rgba(216,180,114,.3); }
.work__also a:hover { color: var(--dawn); }

.entry__venue a { color: inherit; text-decoration: none; }
.entry__venue a:hover { color: var(--dawn); }
.entry__piece a { color: inherit; text-decoration: none; border-bottom: var(--rule) solid var(--line); }
.entry__piece a:hover { color: var(--dawn); border-bottom-color: var(--brass); }
.entry__more { margin: 1.2rem 0 0; }

/* ==========================================================================
   v1.7 — a piece can be on exhibition AND in the studio
   ========================================================================== */
.status--oncurrent { color: var(--dawn); }
.status--oncurrent::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dawn); margin-right: 0.45rem;
  vertical-align: 0.1em;
}
.status--exhibited  { color: var(--stone-dim); }
.status--studio     { color: var(--brass); }
.status--collection { color: var(--oxide); }
.status__sep { color: var(--fog); margin: 0 0.45rem; opacity: 0.6; }

/* v1.8 — accepted into a show that has not opened yet. A hollow ring rather
   than the filled dot of a running show: the difference reads at a glance. */
.status--upcoming { color: var(--brass); }
.status--upcoming::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--brass); margin-right: 0.45rem;
  vertical-align: 0.1em;
}

/* v1.9 — a piece standing somewhere the public can walk up to it. Verdigris,
   because it is neither the studio's brass nor a private collection's oxide. */
.status--public { color: var(--verdigris); }

/* The badge on the exhibitions index sits under the dates, not beside them,
   so a long date range and a badge never fight for the same line. */
.entry__when .status { display: block; margin-top: 0.4rem; font-size: 0.86rem; }

/* …and on a work page, beside the venue it belongs to. */
.showlist .status { font-size: 0.8rem; margin-left: 0.6rem; white-space: nowrap; }

.work__foot { flex-wrap: wrap; row-gap: 0.4rem; }
.eyebrow--state { display: flex; align-items: center; flex-wrap: wrap; }
.eyebrow--state .status { font-size: 0.68rem; letter-spacing: 0.26em; }

/* the admin's derived-state note */
.derived {
  background: var(--ink-3); border: 1px solid var(--line-soft);
  border-left: 2px solid var(--brass);
  padding: 0.9rem 1.1rem; margin-top: 0.6rem;
}
.derived p { margin: 0; color: var(--dim); font-size: 0.95rem; }
.derived strong { color: var(--stone); }

/* ==========================================================================
   v2.3 — blocks you can add to the home page
   ========================================================================== */

/* A block that runs the full width of the window rather than the text column. */
.section--bleed { padding-inline: 0; }
.vblock__bleed, .pblock__bleed { width: 100%; }

.vblock__video {
  width: 100%; height: auto; display: block;
  background: var(--ink-2);
  border: var(--rule) solid var(--line);
}
.section--bleed .vblock__video,
.section--bleed .pblock img { border-inline: 0; }

/* The still, with the file left unfetched until someone asks for it. */
.vblock__gate {
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--ink-2) center / cover no-repeat;
  border: var(--rule) solid var(--line);
  display: grid; place-items: center;
}
.section--bleed .vblock__gate { border-inline: 0; }
.vblock__caption, .pblock figcaption {
  font-family: var(--util); font-size: 0.82rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fog); padding-top: 0.8rem;
}
.section--bleed .vblock__caption { padding-inline: var(--gut); }

.pblock { margin: 0; }
.pblock img { width: 100%; height: auto; display: block; object-fit: contain; }
.section--bleed .pblock figcaption { padding-inline: var(--gut); }

/* Anyone who has asked their device for less motion gets the poster frame
   rather than a loop running behind them. The script pauses it; this is only
   the note that says why it is still. */
.vblock__still {
  font-family: var(--util); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fog); padding-top: 0.6rem;
}
.section--bleed .vblock__still { padding-inline: var(--gut); }

/* The opening picture dimming off as the page scrolls. The transition is on
   the image alone so the words over it never move or soften. */
.hero__figure--scrollfade img { transition: opacity 0.12s linear; will-change: opacity; }
.hero__figure--scrollfade .hero__scrim { transition: opacity 0.12s linear; }

/* ==========================================================================
   v2.4 — the opening, arranged per device
   --------------------------------------------------------------------------
   One piece of markup, three arrangements. The section carries the choice for
   each size as data-hero-d, -t and -m, and the rules below are written once
   per arrangement and applied inside the matching width.

     mobile   up to 639px
     tablet   640px to 1023px
     desktop  1024px and up
   ========================================================================== */

.hero__stage { position: relative; z-index: 2; display: grid; }
/* A text column beside a picture wants a readable measure. Laid over or
   under a full-width picture it spans the page instead, and only the prose
   keeps a measure. */
.hero__ledein { max-width: 34ch; }
[data-hero-d="over"] .hero__lines, [data-hero-d="band"] .hero__lines,
[data-hero-t="over"] .hero__lines, [data-hero-t="band"] .hero__lines,
[data-hero-m="over"] .hero__lines, [data-hero-m="band"] .hero__lines { max-width: 34ch; }
.hero__scrim { display: none; }

/* Written three times because a media query cannot be reused like a mixin,
   and three plain copies are easier to read than anything clever. */

/* ---------------- mobile ---------------- */
@media (max-width: 639px) {
  [data-hero-m="beside"] .hero__stage {
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
    grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2.4rem); align-items: center;
  }
  [data-hero-m="beside"] .hero__figure { order: -1; }

  [data-hero-m="over"] .hero__stage > * { grid-area: 1 / 1; }
  [data-hero-m="over"] .hero__lede { align-self: end; padding-block: 1.5rem; }
  [data-hero-m="over"] .hero__ledein,
  [data-hero-m="band"] .hero__ledein {
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  }
  [data-hero-m="over"] .hero__scrim { display: block; }
  [data-hero-m="band"] .hero__lede { padding-top: clamp(1.4rem, 5vw, 2.4rem); }
  [data-hero-m="over"], [data-hero-m="band"] { padding-block: 0; }
  [data-hero-m="over"] .hero__horizon,
  [data-hero-m="band"] .hero__horizon { display: none; }
  [data-hero-m="over"] .hero__figure img,
  [data-hero-m="band"] .hero__figure img { max-height: 70vh; }
}

/* ---------------- tablet ---------------- */
@media (min-width: 640px) and (max-width: 1023px) {
  [data-hero-t="beside"] .hero__stage {
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
    grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center;
  }
  [data-hero-t="beside"] .hero__figure { order: -1; }

  [data-hero-t="over"] .hero__stage > * { grid-area: 1 / 1; }
  [data-hero-t="over"] .hero__lede { align-self: center; }
  [data-hero-t="over"] .hero__ledein,
  [data-hero-t="band"] .hero__ledein {
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  }
  [data-hero-t="over"] .hero__scrim { display: block; }
  [data-hero-t="band"] .hero__lede { padding-top: clamp(1.6rem, 4vw, 2.8rem); }
  [data-hero-t="over"], [data-hero-t="band"] { padding-block: 0; }
  [data-hero-t="over"] .hero__horizon,
  [data-hero-t="band"] .hero__horizon { display: none; }
  [data-hero-t="over"] .hero__figure img,
  [data-hero-t="band"] .hero__figure img { max-height: 76vh; }
}

/* ---------------- desktop ---------------- */
@media (min-width: 1024px) {
  [data-hero-d="beside"] .hero__stage {
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
    grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  }

  [data-hero-d="over"] .hero__stage > * { grid-area: 1 / 1; }
  [data-hero-d="over"] .hero__lede { align-self: center; }
  [data-hero-d="over"] .hero__ledein,
  [data-hero-d="band"] .hero__ledein {
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  }
  [data-hero-d="over"] .hero__ledein { max-width: calc(var(--max)); }
  [data-hero-d="over"] .hero__scrim { display: block; }
  [data-hero-d="band"] .hero__lede { padding-top: clamp(2rem, 4vw, 3.5rem); }
  [data-hero-d="over"], [data-hero-d="band"] { padding-block: 0; }
  [data-hero-d="over"] .hero__horizon,
  [data-hero-d="band"] .hero__horizon { display: none; }
  /* An upright photograph cannot fill a full-width band without being
     cropped, so it stands to one side and the title takes the space. */
  [data-hero-d="over"] .hero__figure img { margin-inline: auto 6vw; }
}

/* The picture itself, in any arrangement: its own proportions, capped by
   height, never stretched. */
.hero__figure {
  margin: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(232, 228, 220, 0.04), transparent 60%),
    var(--ink-2);
  overflow: hidden;
}
.hero__figure picture { display: block; }
.hero__figure img {
  width: auto; max-width: 100%; height: auto; max-height: 82vh;
  object-fit: contain; display: block; margin-inline: auto;
}
.hero__lede { position: relative; z-index: 2; }

.hero__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to right, rgba(14, 21, 24, 0.86) 0%, rgba(14, 21, 24, 0.62) 38%, rgba(14, 21, 24, 0.1) 72%, transparent 100%),
    linear-gradient(to top, rgba(14, 21, 24, 0.7), transparent 55%);
}
@media (max-width: 860px) {
  .hero__scrim {
    background: linear-gradient(to top, rgba(14, 21, 24, 0.92) 0%, rgba(14, 21, 24, 0.72) 45%, rgba(14, 21, 24, 0.3) 100%);
  }
}


/* ==========================================================================
   v2.4 — how a picture sits in a frame, per device
   --------------------------------------------------------------------------
   The same three behaviours as before, but each size can choose its own. A
   four-across grid on a desktop and a single column on a phone are not the
   same problem, so they no longer have to share an answer.
   ========================================================================== */

@media (max-width: 639px) {
  [data-fit-m="whole"] .work__plate,
  [data-fit-m="fill"]  .work__plate { aspect-ratio: 4 / 5; }
  [data-fit-m="whole"] .work__plate img { height: 100%; object-fit: contain; }
  [data-fit-m="fill"]  .work__plate img { height: 100%; object-fit: cover; }
  [data-fit-m="whole"] .post img { aspect-ratio: 4 / 3; object-fit: contain; }
  [data-fit-m="fill"]  .post img { aspect-ratio: 4 / 3; object-fit: cover; }
  /* Every photograph goes out of flow here, so the plate carries the shape. */
  [data-fit-m="whole"] .plate--cycling,
  [data-fit-m="fill"]  .plate--cycling { aspect-ratio: 4 / 5; }
  [data-fit-m="whole"] .plate--cycling .plate__img,
  [data-fit-m="fill"]  .plate--cycling .plate__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  [data-fit-m="whole"] .plate--cycling .plate__img { object-fit: contain; }
  [data-fit-m="fill"]  .plate--cycling .plate__img { object-fit: cover; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  [data-fit-t="whole"] .work__plate,
  [data-fit-t="fill"]  .work__plate { aspect-ratio: 4 / 5; }
  [data-fit-t="whole"] .work__plate img { height: 100%; object-fit: contain; }
  [data-fit-t="fill"]  .work__plate img { height: 100%; object-fit: cover; }
  [data-fit-t="whole"] .post img { aspect-ratio: 4 / 3; object-fit: contain; }
  [data-fit-t="fill"]  .post img { aspect-ratio: 4 / 3; object-fit: cover; }
  /* Every photograph goes out of flow here, so the plate carries the shape. */
  [data-fit-t="whole"] .plate--cycling,
  [data-fit-t="fill"]  .plate--cycling { aspect-ratio: 4 / 5; }
  [data-fit-t="whole"] .plate--cycling .plate__img,
  [data-fit-t="fill"]  .plate--cycling .plate__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  [data-fit-t="whole"] .plate--cycling .plate__img { object-fit: contain; }
  [data-fit-t="fill"]  .plate--cycling .plate__img { object-fit: cover; }
}
@media (min-width: 1024px) {
  [data-fit="whole"] .work__plate,
  [data-fit="fill"]  .work__plate { aspect-ratio: 4 / 5; }
  [data-fit="whole"] .work__plate img { height: 100%; object-fit: contain; }
  [data-fit="fill"]  .work__plate img { height: 100%; object-fit: cover; }
  [data-fit="whole"] .post img { aspect-ratio: 4 / 3; object-fit: contain; }
  [data-fit="fill"]  .post img { aspect-ratio: 4 / 3; object-fit: cover; }
  /* Every photograph goes out of flow here, so the plate carries the shape. */
  [data-fit="whole"] .plate--cycling,
  [data-fit="fill"]  .plate--cycling { aspect-ratio: 4 / 5; }
  [data-fit="whole"] .plate--cycling .plate__img,
  [data-fit="fill"]  .plate--cycling .plate__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  [data-fit="whole"] .plate--cycling .plate__img { object-fit: contain; }
  [data-fit="fill"]  .plate--cycling .plate__img { object-fit: cover; }
}

/* ==========================================================================
   Articles — the strip tiles became doors, and the rooms behind them.
   ========================================================================== */

/* ---------- a strip tile that is a link ---------- */
.striptile { display: block; text-decoration: none; color: inherit; }
.striptile:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; }
.striptile figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.striptile__go {
  font-family: var(--util); font-size: 0.74rem; letter-spacing: 0.2em;
  color: var(--brass); opacity: 0; transform: translateX(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.striptile:hover .striptile__go,
.striptile:focus-visible .striptile__go { opacity: 1; transform: translateX(0); }
.striptile:hover figcaption { color: var(--stone); }

/* Six tiles, not three: two rows of three, and on a phone two columns with
   nothing hidden. The old rule dropped the last tile on small screens, which
   was fine for a decorative strip and is not fine when the tile is a door. */
@media (max-width: 720px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip figure:last-child { display: block; }
}

/* ---------- under construction ---------- */
.underway { background: rgba(185, 143, 76, 0.1); border-bottom: 1px solid rgba(185, 143, 76, 0.3); }
.underway p {
  margin: 0; padding: 0.9rem 0; color: var(--dawn);
  font-family: var(--util); letter-spacing: 0.1em; font-size: 0.92rem;
}
.underway strong { letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- an article ---------- */
.piece__head { padding: clamp(2.6rem, 7vw, 5rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.piece__title {
  font-family: var(--display); font-weight: 600; line-height: 1.08;
  font-size: clamp(2rem, 5.5vw, 3.4rem); margin: 0.3rem 0 0; max-width: 20ch;
}
.piece__dek {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--stone-dim);
  max-width: 50ch; margin: 1rem 0 0; line-height: 1.55;
}
.piece__meta {
  font-family: var(--util); font-size: 0.8rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fog); margin: 1.4rem 0 0;
}
.piece__figure { margin: 0 0 clamp(2rem, 5vw, 3.4rem); }
.piece__figure img {
  width: 100%; max-height: 78vh; object-fit: cover; display: block;
  filter: saturate(0.82) contrast(1.04);
}
.piece__body { max-width: 68ch; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.piece__body p { font-size: 1.08rem; line-height: 1.78; margin: 0 0 1.5rem; }
.piece__lede { font-size: 1.22rem !important; color: var(--stone); }
.piece__body p + p { text-indent: 0; }
.piece__more { border-top: 1px solid var(--line); padding: clamp(2rem, 5vw, 3.4rem) 0; }
.piece__more .eyebrow { margin-bottom: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .striptile__go { transition: none; }
}

/* ==========================================================================
   v3.0 — one set of tiles, six across, scrolling sideways past that
   ========================================================================== */

.stripwrap { position: relative; }

/* The window. The row scrolls inside it and snaps, so a swipe lands square
   on a tile rather than halfway across one. */
.stripview {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stripview::-webkit-scrollbar { display: none; }
.stripview:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 4px; }

/* One row. Each tile is a sixth of the width, so six fill the row exactly and
   a seventh waits just off the edge — which is what tells a visitor there is
   more without needing to be told. */
.striptrack.strip {
  display: flex; gap: clamp(0.6rem, 1.6vw, 1.2rem);
  grid-template-columns: none;
  --per-view: 6;
}
.striptrack .striptile {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * clamp(0.6rem, 1.6vw, 1.2rem)) / var(--per-view));
  scroll-snap-align: start;
}
.striptrack .striptile img { aspect-ratio: 3 / 4; object-fit: cover; }
.striptrack figcaption { font-size: 0.74rem; letter-spacing: 0.12em; }

/* The controls: a small cluster under the strip, never over a picture. */
.stripctl { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; margin-top: 1.1rem; }
.stripnav {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: transparent; color: var(--stone);
  border: var(--rule) solid var(--line); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0 0 0.12em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.stripnav:hover:not([disabled]) { background: var(--ink-3); border-color: var(--brass); color: var(--dawn); }
.stripnav:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }
.stripnav[disabled] { opacity: 0.28; cursor: default; }

.stripcount {
  margin: 0; min-width: 6.5em; text-align: center;
  font-family: var(--util); font-size: 0.78rem; letter-spacing: 0.16em;
  color: var(--fog); font-variant-numeric: tabular-nums;
}

/* Fewer across as the screen narrows, so a tile never becomes a sliver. */
@media (max-width: 1100px) { .striptrack.strip { --per-view: 4; } }
@media (max-width: 760px)  { .striptrack.strip { --per-view: 3; } }
@media (max-width: 520px)  { .striptrack.strip { --per-view: 2; } .stripctl { justify-content: flex-start; } }

/* ---------- the writing index ---------- */
.writinglist { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); }
.writing {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  border-bottom: var(--rule) solid var(--line-soft);
}
.writing:last-child { border-bottom: 0; }
.writing__shot { display: block; overflow: hidden; }
.writing__shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(0.82) contrast(1.03);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.writing:hover .writing__shot img { transform: scale(1.035); }
.writing__title { font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); margin: 0; line-height: 1.2; }
.writing__title a { color: var(--stone); text-decoration: none; }
.writing__title a:hover { color: var(--dawn); }
.writing__dek { color: var(--stone-dim); margin: 0.6rem 0 0; max-width: 58ch; }
.writing__meta {
  font-family: var(--util); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fog); margin: 0.9rem 0 0;
  display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap;
}
@media (max-width: 620px) {
  .writing { grid-template-columns: 1fr; gap: 0.9rem; }
  .writing__shot img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .writing__shot img { transition: none; }
  .writing:hover .writing__shot img { transform: none; }
}

/* the full-width band's way through to its article */
.cinema__more { margin: 1.4rem 0 0; }
.cinema__more .link { font-size: 0.95rem; }