/* ============================================================
   VERSION 1 · STILLNESS
   White, warm off-white, one thought per view. A quiet room.
   Classical serif titles, light humanist sans body, hairline
   captions, a single muted Lanna-gold accent. Motion: slow
   fades only.
   ============================================================ */

html[data-skin="stillness"] {
  --wrap: 860px;
  --bg: #fcfbf7;
  --bg-soft: #f6f4ec;
  --text: #3b3833;
  --soft: #6e6960;
  --gold: #9c7c35;
  --hairline: #e6e1d4;
  --focus: #9c7c35;
  background: var(--bg);
}

html[data-skin="stillness"] body {
  background: var(--bg);
  color: var(--text);
  font-family: "Mulish", "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
}

html[data-skin="stillness"] h1,
html[data-skin="stillness"] h2,
html[data-skin="stillness"] h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .005em;
}

html[data-skin="stillness"] a { color: var(--text); text-decoration-color: var(--gold); text-underline-offset: 3px; }
html[data-skin="stillness"] a:hover { color: var(--gold); }
html[data-skin="stillness"] .ph { border-color: #c9c2b0; color: var(--soft); }

/* Header: centred, breathing */
html[data-skin="stillness"] .site-head {
  padding: clamp(40px, 7vh, 72px) 0 0;
  text-align: center;
}
html[data-skin="stillness"] .head-in { display: block; }
html[data-skin="stillness"] .brand { text-decoration: none; display: inline-block; }
html[data-skin="stillness"] .brand-name {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 500;
}
html[data-skin="stillness"] .brand-name em { font-style: italic; color: var(--gold); }
html[data-skin="stillness"] .brand-line {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--soft);
}
html[data-skin="stillness"] .site-nav {
  justify-content: center;
  gap: clamp(14px, 2.6vw, 30px);
  margin-top: clamp(26px, 4vh, 40px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
html[data-skin="stillness"] .site-nav a {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft);
  padding: 4px 2px;
}
html[data-skin="stillness"] .site-nav a:hover { color: var(--gold); }
html[data-skin="stillness"] .site-nav a[aria-current="page"] {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
}

/* Hero: a print resting on a table */
html[data-skin="stillness"] .hero {
  padding: clamp(64px, 10vh, 120px) clamp(18px, 4.5vw, 36px) 0;
  text-align: center;
}
html[data-skin="stillness"] .hero-fig img {
  margin-inline: auto;
  width: auto;
  max-width: min(100%, 620px);
  max-height: 74vh;
  object-fit: contain;
}
html[data-skin="stillness"] .hero-fig .credit {
  max-width: 620px;
  margin: 14px auto 0;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
html[data-skin="stillness"] .hero-copy { max-width: 640px; margin: clamp(56px, 9vh, 96px) auto 0; }
html[data-skin="stillness"] .hero-kicker {
  font-size: 11.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}
html[data-skin="stillness"] .hero h1 {
  margin-top: 18px;
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 400;
}
html[data-skin="stillness"] .hero h1 em { font-style: italic; color: var(--gold); }
html[data-skin="stillness"] .hero-line {
  margin: 26px auto 0;
  max-width: 34em;
  font-size: 18px;
  color: var(--soft);
}

/* Captions: thin hairlines beneath prints */
html[data-skin="stillness"] .credit,
html[data-skin="stillness"] .yt-caption {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--soft);
}
html[data-skin="stillness"] figure .credit { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--hairline); }

/* Sections: one thought per view */
html[data-skin="stillness"] .section { padding: clamp(84px, 13vh, 150px) 0 0; }
html[data-skin="stillness"] .sec-title {
  text-align: center;
  font-family: "Mulish", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}
html[data-skin="stillness"] .sec-title::after {
  content: "";
  display: block;
  width: 44px; height: 1px;
  margin: 18px auto 0;
  background: var(--hairline);
}
html[data-skin="stillness"] .sec-lede {
  max-width: 36em;
  margin: 30px auto 0;
  text-align: center;
  color: var(--soft);
}

/* Featured list: vertical, one work at a time */
html[data-skin="stillness"] .feat-grid {
  display: grid;
  gap: clamp(72px, 11vh, 130px);
  margin-top: clamp(52px, 8vh, 90px);
}
html[data-skin="stillness"] .feat { text-align: center; }
html[data-skin="stillness"] .feat a { text-decoration: none; }
html[data-skin="stillness"] .feat figure img {
  margin-inline: auto;
  width: auto;
  max-width: min(100%, 480px);
  max-height: 58vh;
  object-fit: contain;
}
html[data-skin="stillness"] .feat h3 {
  margin-top: 30px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
}
html[data-skin="stillness"] .feat .meta {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
html[data-skin="stillness"] .feat .blurb {
  max-width: 30em;
  margin: 14px auto 0;
  color: var(--soft);
}

/* Works / performances entries: a single quiet column */
html[data-skin="stillness"] .entry { padding: clamp(72px, 11vh, 130px) 0 0; text-align: center; }
html[data-skin="stillness"] .entry:first-of-type { padding-top: clamp(48px, 7vh, 80px); }
html[data-skin="stillness"] .entry h3 { font-size: clamp(26px, 3.4vw, 34px); }
html[data-skin="stillness"] .entry .meta {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
html[data-skin="stillness"] .entry .body { max-width: 33em; margin: 22px auto 0; text-align: center; }
html[data-skin="stillness"] .entry .body p + p { margin-top: 14px; }
html[data-skin="stillness"] .entry .figs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin-top: clamp(36px, 6vh, 60px);
}
html[data-skin="stillness"] .entry .figs figure { flex: 0 1 auto; max-width: min(100%, 560px); }
html[data-skin="stillness"] .entry .figs figure.small { max-width: min(100%, 380px); }
html[data-skin="stillness"] .entry .figs img { margin-inline: auto; width: auto; max-width: 100%; max-height: 62vh; object-fit: contain; }
html[data-skin="stillness"] .strand { margin-top: clamp(84px, 13vh, 150px); }
html[data-skin="stillness"] .strand:first-of-type { margin-top: 0; }

/* Video */
html[data-skin="stillness"] .yt { max-width: 640px; margin-inline: auto; }
html[data-skin="stillness"] .yt-lite { border: 1px solid var(--hairline); }
html[data-skin="stillness"] .yt-play { background: rgba(252, 251, 247, .88); }
html[data-skin="stillness"] .yt-play::after { border-color: transparent transparent transparent var(--gold); }
html[data-skin="stillness"] .yt-cta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #f4f2ea; background: linear-gradient(transparent, rgba(20, 18, 14, .55)); }
html[data-skin="stillness"] .yt-caption { margin: 12px auto 0; max-width: 640px; padding-top: 9px; border-top: 1px solid var(--hairline); }
html[data-skin="stillness"] .vids { display: grid; gap: 44px; margin-top: clamp(36px, 6vh, 60px); }

/* Recognition */
html[data-skin="stillness"] .recog-line {
  max-width: 40em;
  margin: 34px auto 0;
  text-align: center;
  font-size: 13.5px;
  letter-spacing: .1em;
  line-height: 2.3;
  color: var(--soft);
}
html[data-skin="stillness"] .recog-more { margin-top: 26px; text-align: center; font-size: 14px; }

/* Prose pages (about, cv, press, contact) */
html[data-skin="stillness"] .prose { max-width: 620px; margin-inline: auto; }
html[data-skin="stillness"] .prose p + p { margin-top: 18px; }
html[data-skin="stillness"] .prose h2 {
  margin: clamp(56px, 8vh, 84px) 0 18px;
  text-align: center;
  font-size: clamp(24px, 3vw, 30px);
}
html[data-skin="stillness"] .prose figure { margin: clamp(44px, 7vh, 70px) auto; }
html[data-skin="stillness"] .page-head { padding: clamp(56px, 9vh, 100px) 0 clamp(40px, 6vh, 64px); text-align: center; }
html[data-skin="stillness"] .page-head h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 400; }
html[data-skin="stillness"] .page-head .lede { max-width: 34em; margin: 20px auto 0; color: var(--soft); }

/* CV lists */
html[data-skin="stillness"] .cv-block { max-width: 680px; margin: 0 auto; }
html[data-skin="stillness"] .cv-year { display: grid; grid-template-columns: 84px 1fr; gap: 8px 26px; padding: 22px 0; border-top: 1px solid var(--hairline); }
html[data-skin="stillness"] .cv-year > dt { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--gold); }
html[data-skin="stillness"] .cv-year > dd { margin: 0; grid-column: 2; }
html[data-skin="stillness"] .cv-item { margin: 0 0 10px; }
html[data-skin="stillness"] .cv-item .t { font-weight: 600; font-size: 15.5px; }
html[data-skin="stillness"] .cv-item .d { display: block; font-size: 14px; color: var(--soft); }
@media (max-width: 560px) {
  html[data-skin="stillness"] .cv-year { grid-template-columns: 1fr; }
  html[data-skin="stillness"] .cv-year > dd { grid-column: 1; }
}

/* Press list */
html[data-skin="stillness"] .press-list { max-width: 620px; margin: 0 auto; padding: 0; list-style: none; }
html[data-skin="stillness"] .press-list li { padding: 26px 0; border-top: 1px solid var(--hairline); text-align: center; }
html[data-skin="stillness"] .press-list .src { font-family: "Cormorant Garamond", serif; font-size: 23px; }
html[data-skin="stillness"] .press-list .what { display: block; margin-top: 6px; font-size: 14.5px; color: var(--soft); }

/* Footer */
html[data-skin="stillness"] .site-foot {
  margin-top: clamp(96px, 15vh, 170px);
  padding: clamp(48px, 7vh, 72px) 0 42px;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 14px;
  color: var(--soft);
}
html[data-skin="stillness"] .foot-in { display: grid; gap: 20px; }
html[data-skin="stillness"] .foot-name { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--text); }
html[data-skin="stillness"] .foot-note { font-size: 12.5px; }
html[data-skin="stillness"] .foot-base { margin-top: 28px; font-size: 12.5px; letter-spacing: .08em; }

/* Motion: soft, slow fades only */
html[data-skin="stillness"] .reveal { transition: opacity 1.5s ease; }