/* ============================================================
   VERSION 3 · INK & EMBER
   Bone white, ink black, Akaoni red, a whisper of Maya Yak
   violet. Oversized brush-inflected display type, asymmetric
   editorial grids, tight crops. Works arrive concealed and
   reveal on approach. Fast ink-wipe motion, never gimmicky.
   ============================================================ */

html[data-skin="ink"] {
  --wrap: 1180px;
  --bg: #f4efe4;
  --ink: #1a1613;
  --red: #c22a1c;
  --violet: #b7a6c6;
  --soft: #6b645c;
  --line: #d9d2c0;
  --focus: #c22a1c;
  background: var(--bg);
}

html[data-skin="ink"] body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
}

html[data-skin="ink"] h1,
html[data-skin="ink"] h2,
html[data-skin="ink"] h3 {
  font-family: "Shippori Mincho B1", "Yu Mincho", serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.005em;
}

html[data-skin="ink"] a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-skin="ink"] a:hover { color: var(--red); }
html[data-skin="ink"] .ph { border-color: #b3a993; color: var(--soft); }

/* Brush stroke rule, reused under headings */
html[data-skin="ink"] .sec-title::after {
  content: "";
  display: block;
  width: min(220px, 46%);
  height: 12px;
  margin-top: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C40 4 70 11 110 7 C150 3 180 12 220 8 C255 5 280 9 298 6 L298 9 C270 12 240 8 210 11 C170 14 140 6 100 10 C60 13 30 8 2 12 Z' fill='%23c22a1c'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Header: a poster masthead */
html[data-skin="ink"] .site-head { padding: 26px 0 0; }
html[data-skin="ink"] .head-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 30px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--ink);
}
html[data-skin="ink"] .brand { text-decoration: none; }
html[data-skin="ink"] .brand-name {
  display: block;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
}
html[data-skin="ink"] .brand-name em { font-style: normal; color: var(--red); }
html[data-skin="ink"] .brand-line {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--soft);
}
html[data-skin="ink"] .site-nav { gap: 2px 18px; }
html[data-skin="ink"] .site-nav a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 3px solid transparent;
}
html[data-skin="ink"] .site-nav a:hover { color: var(--red); }
html[data-skin="ink"] .site-nav a[aria-current="page"] { border-bottom-color: var(--red); }

/* Hero: a poster you can walk into */
html[data-skin="ink"] .hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: end;
  gap: 0 clamp(20px, 3vw, 44px);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(40px, 6vh, 72px) clamp(18px, 4.5vw, 36px) 0;
}
html[data-skin="ink"] .hero-fig { grid-column: 2; grid-row: 1 / span 2; }
html[data-skin="ink"] .hero-fig img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 18%;
}
html[data-skin="ink"] .hero-fig .credit { margin-top: 12px; }
html[data-skin="ink"] .hero-copy { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2; }
html[data-skin="ink"] .hero-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);
}
html[data-skin="ink"] .hero h1 {
  margin-top: 14px;
  font-size: clamp(44px, 7.2vw, 104px);
  margin-right: clamp(-90px, -6vw, -20px); /* type overlaps the image */
}
html[data-skin="ink"] .hero h1 em { font-style: normal; color: var(--red); }
html[data-skin="ink"] .hero-line {
  grid-column: 1; grid-row: 2;
  margin-top: 26px;
  max-width: 30em;
  font-size: 16.5px;
  color: var(--soft);
}
@media (max-width: 760px) {
  html[data-skin="ink"] .hero { grid-template-columns: 1fr; }
  html[data-skin="ink"] .hero-fig { grid-column: 1; grid-row: 2; margin-top: 30px; }
  html[data-skin="ink"] .hero-copy, html[data-skin="ink"] .hero-line { grid-column: 1; }
  html[data-skin="ink"] .hero-line { grid-row: auto; }
  html[data-skin="ink"] .hero h1 { margin-right: 0; }
}

/* Captions */
html[data-skin="ink"] .credit,
html[data-skin="ink"] .yt-caption {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
}
html[data-skin="ink"] figure .credit { margin-top: 10px; }

/* Sections: bold moments, lots of white between */
html[data-skin="ink"] .section { padding: clamp(90px, 13vh, 150px) 0 0; }
html[data-skin="ink"] .sec-title {
  font-size: clamp(36px, 5.6vw, 72px);
}
html[data-skin="ink"] .sec-lede { max-width: 34em; margin-top: 24px; color: var(--soft); }

/* Featured: asymmetric pairings */
html[data-skin="ink"] .feat-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(56px, 8vh, 96px) clamp(18px, 2.6vw, 36px);
  margin-top: clamp(44px, 7vh, 76px);
}
html[data-skin="ink"] .feat { grid-column: span 12; }
@media (min-width: 761px) {
  html[data-skin="ink"] .feat:nth-child(4n+1) { grid-column: 1 / span 7; }
  html[data-skin="ink"] .feat:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: clamp(56px, 9vh, 120px); }
  html[data-skin="ink"] .feat:nth-child(4n+3) { grid-column: 1 / span 5; margin-top: clamp(-60px, -4vh, -20px); }
  html[data-skin="ink"] .feat:nth-child(4n+4) { grid-column: 6 / span 7; }
}
html[data-skin="ink"] .feat a { text-decoration: none; display: block; }
html[data-skin="ink"] .feat figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
html[data-skin="ink"] .feat h3 { margin-top: 20px; font-size: clamp(24px, 3vw, 34px); }
html[data-skin="ink"] .feat:hover h3 { color: var(--red); }
html[data-skin="ink"] .feat .meta {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
html[data-skin="ink"] .feat .blurb { margin-top: 10px; max-width: 30em; color: var(--soft); }

/* Concealed → revealed */
html[data-skin="ink"] .feat figure img,
html[data-skin="ink"] .entry .figs img,
html[data-skin="ink"] .yt-lite img {
  filter: grayscale(.95) contrast(1.04);
  transition: filter .45s ease;
}
html[data-skin="ink"] .feat.in figure img,
html[data-skin="ink"] .feat:hover figure img,
html[data-skin="ink"] .feat:focus-within figure img,
html[data-skin="ink"] .entry.in .figs img,
html[data-skin="ink"] .entry:hover .figs img,
html[data-skin="ink"] .yt-lite:hover img,
html[data-skin="ink"] .yt-lite:focus-visible img { filter: none; }
html[data-skin="ink"] .feat .credit,
html[data-skin="ink"] .entry .figs .credit {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease .1s, transform .45s ease .1s;
}
html[data-skin="ink"] .feat.in .credit,
html[data-skin="ink"] .feat:hover .credit,
html[data-skin="ink"] .entry.in .figs .credit,
html[data-skin="ink"] .entry:hover .figs .credit { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-skin="ink"] .feat figure img,
  html[data-skin="ink"] .entry .figs img,
  html[data-skin="ink"] .yt-lite img { filter: none !important; }
  html[data-skin="ink"] .feat .credit,
  html[data-skin="ink"] .entry .figs .credit { opacity: 1 !important; transform: none !important; }
}

/* Entries: alternating asymmetric case blocks */
html[data-skin="ink"] .strand { margin-top: clamp(90px, 13vh, 150px); }
html[data-skin="ink"] .strand:first-of-type { margin-top: 0; }
html[data-skin="ink"] .entry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px clamp(18px, 2.6vw, 36px);
  align-items: start;
  padding: clamp(60px, 9vh, 100px) 0 0;
}
html[data-skin="ink"] .entry .head { grid-column: 1 / span 12; }
html[data-skin="ink"] .entry h3 { font-size: clamp(28px, 4vw, 46px); }
html[data-skin="ink"] .entry .meta {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
html[data-skin="ink"] .entry .body { grid-column: 1 / span 12; max-width: 36em; color: var(--soft); }
html[data-skin="ink"] .entry .body p + p { margin-top: 13px; }
html[data-skin="ink"] .entry .figs {
  grid-column: 1 / span 12;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 36px);
  align-items: flex-start;
  margin-top: 10px;
}
html[data-skin="ink"] .entry .figs figure { flex: 1 1 300px; max-width: 620px; }
html[data-skin="ink"] .entry .figs figure.small { flex: 0 1 260px; }
html[data-skin="ink"] .entry .figs figure.fig-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover; /* tight crops on masks, faces, hands */
}
html[data-skin="ink"] .entry .figs figure.fig-poster img { width: 100%; }
@media (min-width: 761px) {
  html[data-skin="ink"] .entry .head { grid-column: 1 / span 8; }
  html[data-skin="ink"] .entry .body { grid-column: 1 / span 5; }
  html[data-skin="ink"] .entry .figs { grid-column: 6 / span 7; margin-top: 0; }
  html[data-skin="ink"] .entry:nth-of-type(even) .head { grid-column: 5 / span 8; text-align: right; }
  html[data-skin="ink"] .entry:nth-of-type(even) .head .meta { justify-self: end; }
  html[data-skin="ink"] .entry:nth-of-type(even) .body { grid-column: 8 / span 5; grid-row: 2; }
  html[data-skin="ink"] .entry:nth-of-type(even) .figs { grid-column: 1 / span 7; grid-row: 2; }
}

/* Video */
html[data-skin="ink"] .yt { max-width: 720px; }
html[data-skin="ink"] .yt-play { background: var(--bg); border: 2px solid var(--ink); border-radius: 0; }
html[data-skin="ink"] .yt-play::after { border-color: transparent transparent transparent var(--red); }
html[data-skin="ink"] .yt-cta {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f4efe4;
  background: linear-gradient(transparent, rgba(20, 16, 12, .78));
}
html[data-skin="ink"] .yt-caption { margin-top: 10px; }
html[data-skin="ink"] .vids { display: grid; gap: 40px; margin-top: 8px; }

/* Recognition: a bold ink block */
html[data-skin="ink"] .recognition .wrap > div {
  border: 3px solid var(--ink);
  padding: clamp(28px, 4vw, 48px);
}
html[data-skin="ink"] .recog-line {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 2.4;
}
html[data-skin="ink"] .recog-more { margin-top: 18px; font-size: 14px; }

/* Prose pages */
html[data-skin="ink"] .page-head {
  padding: clamp(48px, 8vh, 90px) 0 clamp(30px, 4vh, 48px);
}
html[data-skin="ink"] .page-head h1 { font-size: clamp(40px, 6.4vw, 84px); }
html[data-skin="ink"] .page-head h1::after {
  content: "";
  display: block;
  width: min(220px, 40%);
  height: 12px;
  margin-top: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C40 4 70 11 110 7 C150 3 180 12 220 8 C255 5 280 9 298 6 L298 9 C270 12 240 8 210 11 C170 14 140 6 100 10 C60 13 30 8 2 12 Z' fill='%23c22a1c'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
html[data-skin="ink"] .page-head .lede { max-width: 34em; margin-top: 20px; color: var(--soft); }
html[data-skin="ink"] .prose { max-width: 660px; }
html[data-skin="ink"] .prose p + p { margin-top: 16px; }
html[data-skin="ink"] .prose h2 { margin: clamp(48px, 7vh, 72px) 0 14px; font-size: clamp(26px, 3.4vw, 38px); }
html[data-skin="ink"] .prose figure { margin: clamp(36px, 5vh, 56px) 0; }

/* CV */
html[data-skin="ink"] .cv-block { max-width: 780px; }
html[data-skin="ink"] .cv-year { display: grid; grid-template-columns: 110px 1fr; gap: 8px 28px; padding: 22px 0; border-top: 2px solid var(--ink); }
html[data-skin="ink"] .cv-year > dt { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 24px; color: var(--red); }
html[data-skin="ink"] .cv-year > dd { margin: 0; grid-column: 2; }
html[data-skin="ink"] .cv-item { margin: 0 0 10px; }
html[data-skin="ink"] .cv-item .t { font-weight: 500; font-size: 15.5px; }
html[data-skin="ink"] .cv-item .d { display: block; font-size: 13.5px; color: var(--soft); }
@media (max-width: 560px) {
  html[data-skin="ink"] .cv-year { grid-template-columns: 1fr; }
  html[data-skin="ink"] .cv-year > dd { grid-column: 1; }
}

/* Press */
html[data-skin="ink"] .press-list { max-width: 720px; padding: 0; list-style: none; }
html[data-skin="ink"] .press-list li { padding: 24px 0; border-top: 2px solid var(--ink); }
html[data-skin="ink"] .press-list .src { font-family: "Shippori Mincho B1", serif; font-weight: 700; font-size: 22px; }
html[data-skin="ink"] .press-list .what { display: block; margin-top: 6px; font-size: 14.5px; color: var(--soft); }

/* Footer: an ink block */
html[data-skin="ink"] .site-foot {
  margin-top: clamp(96px, 15vh, 170px);
  padding: clamp(44px, 7vh, 66px) 0 40px;
  background: var(--ink);
  color: #cfc8ba;
  font-size: 14px;
}
html[data-skin="ink"] .site-foot a { color: #f4efe4; text-decoration-color: var(--red); }
html[data-skin="ink"] .site-foot a:hover { color: var(--violet); }
html[data-skin="ink"] .foot-in { display: grid; gap: 18px; }
html[data-skin="ink"] .foot-name { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 22px; color: #f4efe4; }
html[data-skin="ink"] .foot-note { font-size: 12.5px; }
html[data-skin="ink"] .foot-base { margin-top: 26px; font-size: 12.5px; letter-spacing: .1em; }
html[data-skin="ink"] .site-foot .ph { border-color: #57503f; color: #a99f8d; }

/* Motion: fast ink wipes */
html[data-skin="ink"] .reveal {
  clip-path: inset(0 100% 0 0);
  transition: opacity .5s ease, clip-path .55s cubic-bezier(.3, .7, .2, 1);
}
html[data-skin="ink"] .reveal.in { clip-path: inset(0 0 0 0); }