/* ==========================================================================
   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 */

  --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; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative; z-index: 2;
}
.hero__lede { max-width: 34ch; }
.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; }
.hero__figure { position: relative; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04);
}
.hero__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 21, 24, 0.55), transparent 45%);
  pointer-events: none;
}
/* 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__grid { grid-template-columns: 1fr; }
  .hero__figure { order: -1; }
  .hero__figure img { aspect-ratio: 3 / 2; }
  .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 ---------- */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.6vw, 1.2rem); }
.strip figure { margin: 0; position: relative; overflow: hidden; }
.strip img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  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: 1fr 1fr; } .strip figure:last-child { display: none; } }

/* ---------- 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%; object-fit: cover; filter: saturate(0.82) contrast(1.04); }
.split .ratio-tall { aspect-ratio: 3 / 4; }
.split .ratio-square { aspect-ratio: 1 / 1; }
@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); }
.work[hidden] { display: none; }

.work__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  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: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.04); }
/* 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; }
@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 { aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.82); }
.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; }
.detail dd { margin: 0; font-size: 1.05rem; color: var(--stone); }
.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);
}
.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 { min-height: 170px; }
.cinema__media.img-fallback { border: 0; }
.cinema__media.img-fallback::before { display: none; }