/* TOMASZ FELPEL - Shared Site Styles */
:root {
  --bg: #fdfaf5;
  --bg2: #f6f0e6;
  --bg3: #ede4d4;
  --dk: #1c1108;
  --dk2: #261508;
  --dk3: #321c0c;
  --ink: #1c1108;
  --ink2: #3c2d1c;
  --ink3: #6b5540;
  --ink4: #8c7460;
  --lit1: #f5efe5;
  --lit2: #c8b49a;
  --lit3: #806858;
  --gold: #8c6018;
  --goldh: #a8762a;
  --glit: #d4a040;
  --va-bg: #0b1028;
  --va-bg2: #12183a;
  --va-text: #eef2ff;
  --va-muted: #b8c6ef;
  --va-accent: #4ba3ff;
  --gpale: rgba(140, 96, 24, 0.1);
  --gbord: rgba(140, 96, 24, 0.22);
  --bord: rgba(28, 17, 8, 0.1);
  --bord2: rgba(28, 17, 8, 0.06);
  --bordd: rgba(245, 239, 229, 0.1);
  --feed-bg: var(--bg2);
  --feed-card: var(--bg);
  --feed-bord: var(--bord);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --max: 1160px;
  --pad: clamp(20px, 5vw, 60px);
  --r: 10px;
  --rl: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.section {
  padding: clamp(56px, 7vw, 88px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}

.rule {
  border: none;
  border-top: 1px solid var(--bord);
}

.rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.rv.in {
  opacity: 1;
  transform: translateY(0);
}

.d1 {
  transition-delay: 0.05s;
}
.d2 {
  transition-delay: 0.11s;
}
.d3 {
  transition-delay: 0.17s;
}
.d4 {
  transition-delay: 0.23s;
}
.d5 {
  transition-delay: 0.29s;
}

nav {
  position: sticky;
  top: 0;
  z-index: 300;
  height: 58px;
  background: rgba(253, 250, 245, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bord);
}

.nav-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-brand {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
}

.nav-links a {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink3);
  padding: 6px 11px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--bg2);
}

.nav-links a.on {
  color: var(--gold);
}

.nav-cta {
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 18px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.nav-cta:hover {
  background: var(--dk2);
}

.kicker {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.kicker::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: var(--gold);
  flex-shrink: 0;
}

.kicker-lit {
  color: var(--glit);
}

.kicker-lit::before {
  background: var(--glit);
}

h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3.9rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 em {
  font-style: italic;
  color: var(--gold);
}

h1.lit {
  color: var(--lit1);
}

h1.lit em {
  color: var(--glit);
}

h2 {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

h2 em {
  font-style: italic;
  color: var(--gold);
}

h2.lit {
  color: var(--lit1);
}

h2.lit em {
  color: var(--glit);
}

.btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  transition: all 0.15s;
  text-decoration: none;
}

.btn-dk {
  background: var(--ink);
  color: #fff;
}

.btn-dk:hover {
  background: var(--dk2);
}

.btn-gold {
  background: var(--gold);
  color: #fff;
}

.btn-gold:hover {
  background: var(--goldh);
}

.btn-out {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--bord);
}

.btn-out:hover {
  border-color: var(--ink3);
  background: var(--bg2);
}

.btn-outl {
  background: transparent;
  color: var(--lit1);
  border: 1.5px solid var(--bordd);
}

.btn-outl:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 239, 229, 0.3);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.more-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.15s;
}

.more-link:hover {
  gap: 9px;
}

.sec-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.badge {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.badge-g {
  background: var(--gpale);
  border: 1px solid var(--gbord);
  color: var(--gold);
}

.badge-s {
  background: var(--bg2);
  border: 1px solid var(--bord);
  color: var(--ink3);
}

.hero-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--bg2);
  border: 1px solid var(--bord);
  color: var(--ink3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lm {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lm-va {
  background: var(--gpale);
  border: 1px solid var(--gbord);
  color: var(--gold);
}

.lm-sv {
  background: rgba(40, 110, 90, 0.1);
  border: 1px solid rgba(40, 110, 90, 0.2);
  color: #286e5a;
}

.lm-fv {
  background: var(--bg2);
  border: 1px solid var(--bord);
  color: var(--ink3);
}

.lm-sm {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.pg-hero {
  background: var(--dk);
  padding: clamp(44px, 6vw, 72px) var(--pad);
  border-bottom: 1px solid var(--bordd);
}

.pg-hero-in {
  max-width: var(--max);
  margin: 0 auto;
}

.pg-sub {
  font-size: 0.97rem;
  color: var(--lit2);
  line-height: 1.75;
  max-width: 560px;
  margin-top: 14px;
}

.hero {
  padding: clamp(56px, 7vw, 96px) var(--pad) clamp(44px, 5vw, 72px);
  max-width: var(--max);
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 60px;
  align-items: start;
}

.hero-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hero-desc {
  font-size: 1.02rem;
  color: var(--ink2);
  line-height: 1.82;
  max-width: 500px;
  margin: 18px 0 26px;
}

.hero-desc strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
}

.hero-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.photo-card {
  border-radius: var(--rl);
  border: 1px solid var(--bord);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(28, 17, 8, 0.1);
}

.photo-slot {
  aspect-ratio: 3 / 4;
  background: var(--bg3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-ph {
  text-align: center;
}

.photo-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1.5px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.photo-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--ink4);
  fill: none;
  stroke-width: 1.5;
}

.photo-lbl {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--ink4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.photo-foot {
  background: var(--bg2);
  padding: 13px 16px;
  border-top: 1px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.photo-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
}

.photo-role {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: var(--ink3);
  margin-top: 2px;
}

.photo-soc {
  display: flex;
  gap: 7px;
}

.sdot {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--ink3);
  transition: all 0.15s;
}

.sdot:hover {
  background: var(--gpale);
  color: var(--gold);
  border-color: var(--gbord);
}

.metrics {
  background: var(--bg2);
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}

.metrics-row {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.metric {
  padding: 26px 18px;
  border-right: 1px solid var(--bord);
}

.metric:last-child {
  border-right: none;
}

.metric-val {
  font-family: var(--serif);
  font-size: 1.95rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}

.metric-lbl {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--ink3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.55;
}

.co-band {
  background: var(--bg2);
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}

.co-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--pad);
}

.co-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.co-card {
  background: var(--bg);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(28, 17, 8, 0.05);
}

.co-card:hover {
  border-color: var(--gbord);
  box-shadow: 0 8px 28px rgba(28, 17, 8, 0.1);
  transform: translateY(-2px);
}

.co-stripe {
  height: 4px;
}

.stripe-va {
  background: linear-gradient(90deg, #52b6ff, #2f6fff);
}

.stripe-sv {
  background: #000;
}

.co-body {
  padding: 26px;
  flex: 1;
}

.co-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.co-ext {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--ink4);
  transition: color 0.15s;
}

.co-card:hover .co-ext {
  color: var(--gold);
}

h3.co-name {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.co-tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--ink4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.co-desc {
  font-size: 0.87rem;
  color: var(--ink2);
  line-height: 1.75;
}

.co-foot {
  padding: 13px 26px;
  background: var(--bg2);
  border-top: 1px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.co-year {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--ink4);
}

.co-url {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--gold);
  font-weight: 500;
}

.teasers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.teaser {
  background: var(--bg2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.18s;
  position: relative;
  overflow: hidden;
}

.teaser::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.18s;
}

.teaser:hover {
  border-color: var(--gbord);
  background: var(--bg);
  transform: translateY(-2px);
}

.teaser:hover::after {
  opacity: 1;
}

.t-lm {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--bg);
  border: 1px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
}

h3.t-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}

.t-desc {
  font-size: 0.8rem;
  color: var(--ink3);
  line-height: 1.65;
  flex: 1;
}

.t-link {
  font-family: var(--mono);
  font-size: 0.57rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.meet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.meet-body {
  font-size: 1rem;
  color: var(--ink2);
  line-height: 1.82;
}

.meet-body p {
  margin-bottom: 18px;
}

.meet-body strong {
  color: var(--ink);
  font-weight: 600;
}

.cred-list {
  display: flex;
  flex-direction: column;
}

.cred {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bord);
  align-items: start;
}

.cred:first-child {
  border-top: 1px solid var(--bord);
}

.cred-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.cred-sub {
  font-size: 0.77rem;
  color: var(--ink3);
  line-height: 1.55;
}

.feed-band {
  background: var(--feed-bg);
  border-top: 1px solid var(--feed-bord);
  border-bottom: 1px solid var(--feed-bord);
}

.feed-band .sec-hd h2.lit {
  color: var(--ink);
}

.feed-band .sec-hd h2.lit em {
  color: var(--glit);
}

.feed-band .sec-hd .kicker.kicker-lit {
  color: var(--gold);
}

.feed-band .sec-hd .kicker.kicker-lit::before {
  background: var(--glit);
}

.feed-band .sec-hd .more-link {
  color: var(--ink2);
  font-weight: 500;
}

.feed-band .sec-hd .more-link:hover {
  color: var(--glit);
}

.feed-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--pad);
}

.feed-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-top: 28px;
}

.feed-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feed-band .fcard {
  background: var(--feed-card);
  border: 1px solid var(--feed-bord);
  border-radius: var(--r);
  overflow: hidden;
  display: block;
  transition: all 0.18s;
}

.feed-band .fcard:hover {
  border-color: var(--gbord);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28, 17, 8, 0.08);
}

.feed-band .fcard h3.ftitle {
  color: var(--ink);
}

.feed-band .fcard:hover h3.ftitle {
  color: var(--gold);
}

.feed-band .fcard .fexcerpt {
  color: var(--ink2);
}

.feed-band .fcard .fmeta {
  color: var(--ink3);
}

.feed-band .fcard:hover .farr {
  color: var(--glit);
}

.feed-band .vid-thumb {
  background: var(--bg3);
}

.feed-band .vid-ph {
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
}

.feed-band .vid-ph-lbl {
  color: var(--ink3);
}

.fcard-body {
  padding: 18px 20px;
}

.vid-thumb {
  aspect-ratio: 16 / 9;
  background: var(--dk3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.vid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vid-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--dk3), var(--dk2));
}

.vid-ph-lbl {
  font-family: var(--mono);
  font-size: 0.57rem;
  color: var(--lit3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.15s;
}

.fcard:hover .play {
  background: var(--goldh);
  transform: scale(1.08);
}

.play svg {
  width: 17px;
  height: 17px;
  fill: #fff;
  margin-left: 3px;
}

.ftype {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.ft-vid {
  color: #e06060;
}

.ft-art {
  color: var(--glit);
}

.ft-pr {
  color: #60a8d8;
}

.ft-soc {
  color: #9878d4;
}

h3.ftitle {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--lit1);
  line-height: 1.4;
  margin-bottom: 7px;
  transition: color 0.15s;
}

.fcard:hover h3.ftitle {
  color: var(--glit);
}

.fexcerpt {
  font-size: 0.8rem;
  color: var(--lit2);
  line-height: 1.7;
  margin-bottom: 12px;
}

.fmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--lit3);
}

.farr {
  transition: all 0.15s;
}

.fcard:hover .farr {
  color: var(--glit);
  transform: translateX(3px);
}

.fcard-sm .fcard-body {
  padding: 16px 18px;
}

.fcard-sm h3.ftitle {
  font-size: 0.9rem;
}

.fcard-sm .fexcerpt {
  font-size: 0.77rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ct-band {
  background: var(--dk);
}

.ct-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

h2.ct-head {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: var(--lit1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

h2.ct-head em {
  font-style: italic;
  color: var(--glit);
}

.ct-sub {
  font-size: 0.95rem;
  color: var(--lit2);
  line-height: 1.8;
  max-width: 380px;
  margin-bottom: 26px;
}

.cl-rows {
  display: flex;
  flex-direction: column;
}

.cl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordd);
  transition: padding-left 0.12s;
  background: transparent;
}

.cl-row:first-child {
  border-top: 1px solid var(--bordd);
}

.cl-row:hover {
  padding-left: 5px;
}

.cl-row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.cl-row-link:link,
.cl-row-link:visited,
.cl-row-link:hover,
.cl-row-link:active,
.cl-row-link:focus,
.cl-row-link:focus-visible {
  background: transparent;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.cl-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--lit3);
  letter-spacing: 0.08em;
  min-width: 100px;
}

.cl-val {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--lit1);
  flex: 1;
  transition: color 0.12s;
}

.cl-row:hover .cl-val {
  color: var(--glit);
}

.cl-arr {
  font-size: 0.62rem;
  color: var(--lit3);
  transition: all 0.12s;
}

.cl-row:hover .cl-arr {
  color: var(--glit);
  transform: translateX(4px);
}

/* Force Email row to match dark contact band (override browser mailto styling) */
.ct-band .cl-row {
  background: var(--dk) !important;
}
.ct-band .cl-row-link[href^="mailto:"] {
  background: transparent !important;
  color: inherit !important;
  -webkit-tap-highlight-color: transparent;
}
.ct-band .cl-row-link[href^="mailto:"]:link,
.ct-band .cl-row-link[href^="mailto:"]:visited,
.ct-band .cl-row-link[href^="mailto:"]:hover,
.ct-band .cl-row-link[href^="mailto:"]:active,
.ct-band .cl-row-link[href^="mailto:"]:focus,
.ct-band .cl-row-link[href^="mailto:"]:focus-visible {
  background: transparent !important;
  color: inherit !important;
}
.ct-band .cl-row-link[href^="mailto:"] .cl-label,
.ct-band .cl-row-link[href^="mailto:"]:visited .cl-label {
  color: var(--lit3) !important;
}
.ct-band .cl-row-link[href^="mailto:"] .cl-val,
.ct-band .cl-row-link[href^="mailto:"]:visited .cl-val {
  color: var(--lit1) !important;
}
.ct-band .cl-row-link[href^="mailto:"] .cl-arr,
.ct-band .cl-row-link[href^="mailto:"]:visited .cl-arr {
  color: var(--lit3) !important;
}
.ct-band .cl-row:hover .cl-row-link[href^="mailto:"] .cl-val,
.ct-band .cl-row:hover .cl-row-link[href^="mailto:"] .cl-arr {
  color: var(--glit) !important;
}

.feat-essay {
  background: var(--dk2);
  border: 1px solid var(--bordd);
  border-radius: var(--rl);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  text-decoration: none;
  transition: border-color 0.2s;
  margin-bottom: 18px;
}

.feat-essay:hover {
  border-color: var(--gbord);
}

.fe-kicker {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--glit);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.fe-title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 300;
  color: var(--lit1);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.fe-exc {
  font-size: 0.87rem;
  color: var(--lit2);
  line-height: 1.8;
}

.fe-arr {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #fff;
  transition: all 0.15s;
}

.feat-essay:hover .fe-arr {
  background: var(--goldh);
  transform: translateX(4px);
}

.essays-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.essay-card {
  background: var(--bg2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.18s;
  min-height: 200px;
}

.essay-card:hover {
  border-color: var(--gbord);
  background: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(28, 17, 8, 0.07);
}

.e-pillar {
  font-family: var(--mono);
  font-size: 0.57rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h3.e-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
  flex: 1;
  transition: color 0.15s;
}

.essay-card:hover h3.e-title {
  color: var(--gold);
}

.e-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--ink4);
  margin-top: auto;
}

.e-arr {
  transition: all 0.15s;
}

.essay-card:hover .e-arr {
  color: var(--gold);
  transform: translateX(3px);
}

.essay-more {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  background: transparent;
}

.essay-more span {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--gold);
  font-style: italic;
  display: block;
  margin-bottom: 8px;
}

.cat-panel {
  background: var(--bg2);
  border: 1px solid var(--gbord);
  border-radius: var(--rl);
  padding: 26px 30px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cat-sep {
  border: none;
  border-left: 1px solid var(--gbord);
}

.cat-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}

.cat-text {
  font-size: 0.87rem;
  color: var(--ink2);
  line-height: 1.7;
}

.cat-text strong {
  color: var(--ink);
  font-weight: 600;
}

.vc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.vc-card {
  background: var(--bg);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}

.vc-card:hover {
  border-color: var(--gbord);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28, 17, 8, 0.09);
}

/* Value Alpha brand treatment to avoid green conflict */
.co-card.va-theme,
.vc-card.va-theme {
  background: var(--va-bg);
  border-color: rgba(122, 148, 255, 0.35);
}

.co-card.va-theme .co-body,
.vc-card.va-theme .vc-body {
  background: var(--va-bg);
}

.co-card.va-theme h3.co-name,
.vc-card.va-theme h3.vc-name {
  color: var(--va-text);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.co-card.va-theme .co-tag,
.vc-card.va-theme .vc-tag {
  color: var(--va-muted);
}

.co-card.va-theme .co-desc,
.vc-card.va-theme .vc-desc {
  color: var(--va-text);
}

.co-card.va-theme .co-foot,
.vc-card.va-theme .vc-foot {
  background: var(--va-bg2);
  border-top-color: rgba(122, 148, 255, 0.22);
}

.co-card.va-theme .co-year,
.vc-card.va-theme .vc-year {
  color: var(--va-muted);
}

.co-card.va-theme .co-url,
.vc-card.va-theme .vc-url,
.co-card.va-theme .co-ext,
.vc-card.va-theme .vc-ext {
  color: var(--va-accent);
}

/* Sonnerie VC: black border and stripe only (no green) */
.co-card.sv-theme,
.vc-card.sv-theme {
  border-color: #000 !important;
}

.co-card.sv-theme:hover,
.vc-card.sv-theme:hover {
  border-color: #000 !important;
}

.vc-stripe {
  height: 4px;
}

.vc-body {
  padding: 24px;
  flex: 1;
}

.vc-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.brand-logo {
  display: block;
  object-position: center;
}

.brand-logo-va {
  width: 170px;
  height: 68px;
  object-fit: contain;
  background: #090909;
  padding: 8px 10px;
  box-sizing: border-box;
  border-radius: 8px;
}

.brand-logo-sv {
  width: 170px;
  height: 52px;
  object-fit: contain;
  border-radius: 4px;
}

.cl-row {
  background: transparent;
}

.cl-row:visited,
.cl-row:active,
.cl-row:focus-visible {
  background: transparent;
}

.feed-band .sec-hd .more-link:hover {
  color: var(--glit);
}

.vc-ext {
  font-family: var(--mono);
  font-size: 0.57rem;
  color: var(--ink4);
  transition: color 0.15s;
}

.vc-card:hover .vc-ext {
  color: var(--gold);
}

h3.vc-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.vc-tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--ink4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.vc-desc {
  font-size: 0.86rem;
  color: var(--ink2);
  line-height: 1.75;
}

.vc-foot {
  padding: 13px 24px;
  background: var(--bg2);
  border-top: 1px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vc-year {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--ink4);
}

.vc-url {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--gold);
  font-weight: 500;
}

.vc-minor {
  background: var(--bg);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
  transition: all 0.15s;
}

.vc-minor:hover {
  border-color: var(--gbord);
}

h3.vm-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 3px;
}

.vm-desc {
  font-size: 0.78rem;
  color: var(--ink3);
  line-height: 1.55;
}

.vm-arr {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink4);
  transition: all 0.15s;
}

.vc-minor:hover .vm-arr {
  color: var(--gold);
  transform: translateX(3px);
}

.con-layout {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 56px;
  align-items: start;
}

.con-intro {
  font-size: 1rem;
  color: var(--ink2);
  line-height: 1.82;
  margin-bottom: 28px;
}

.con-intro strong {
  color: var(--ink);
  font-weight: 600;
}

.svcs {
  display: flex;
  flex-direction: column;
}

.svc {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bord);
  align-items: start;
}

.svc:first-child {
  border-top: 1px solid var(--bord);
}

.svc-n {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--gold);
  padding-top: 1px;
}

h3.svc-title {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.svc-desc {
  font-size: 0.8rem;
  color: var(--ink2);
  line-height: 1.7;
}

.cta-card {
  background: var(--dk);
  border: 1px solid var(--gbord);
  border-radius: var(--rl);
  padding: 28px;
  position: sticky;
  top: 76px;
}

.cta-k {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--glit);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cta-h {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--lit1);
  line-height: 1.3;
  margin-bottom: 12px;
}

.cta-h em {
  font-style: italic;
  color: var(--glit);
}

.cta-body {
  font-size: 0.84rem;
  color: var(--lit2);
  line-height: 1.75;
  margin-bottom: 20px;
}

.cta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 22px;
}

.cta-tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--glit);
  border: 1px solid rgba(212, 160, 64, 0.28);
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(140, 96, 24, 0.1);
}

.cta-note {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--lit3);
  line-height: 1.6;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bordd);
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bord);
  border: 1px solid var(--bord);
  border-radius: var(--rl);
  overflow: hidden;
  margin-bottom: 28px;
}

.press-card {
  background: var(--bg);
  padding: 22px;
  display: block;
  transition: background 0.15s;
}

.press-card:hover {
  background: var(--bg2);
}

.pc-pub {
  font-family: var(--mono);
  font-size: 0.57rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}

h3.pc-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 6px;
  transition: color 0.15s;
}

.press-card:hover h3.pc-title {
  color: var(--gold);
}

.pc-date {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--ink4);
}

.press-quiet {
  background: var(--bg);
  grid-column: 1 / -1;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.pq-text {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink2);
  max-width: 500px;
  line-height: 1.7;
}

.story-layout {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 64px;
  align-items: start;
}

.story-body {
  font-size: 0.97rem;
  color: var(--ink2);
  line-height: 1.85;
}

.story-body p {
  margin-bottom: 18px;
}

.story-body p:last-child {
  margin-bottom: 0;
}

.story-body strong {
  color: var(--ink);
  font-weight: 600;
}

.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}

.pillar {
  background: var(--bg2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 18px;
}

.p-n {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--gold);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 7px;
}

h3.p-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.p-desc {
  font-size: 0.76rem;
  color: var(--ink3);
  line-height: 1.6;
}

.timeline {
  display: flex;
  flex-direction: column;
}

.tl {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bord);
  align-items: start;
}

.tl:first-child {
  border-top: 1px solid var(--bord);
}

.tl-yr {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  font-weight: 500;
  padding-top: 2px;
}

h3.tl-title {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.tl-sub {
  font-size: 0.78rem;
  color: var(--ink3);
  line-height: 1.65;
}

footer {
  background: var(--dk);
  border-top: 1px solid var(--bordd);
  padding: 22px var(--pad);
}

.foot-in {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.foot-txt {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--lit3);
}

.foot-txt a {
  color: var(--lit3);
  text-decoration: none;
}

.foot-txt a:hover {
  color: var(--glit);
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 240px;
    gap: 40px;
  }
  .co-grid {
    grid-template-columns: 1fr;
  }
  .teasers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feed-grid {
    grid-template-columns: 1fr;
  }
  .feed-col:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .story-layout,
  .con-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cta-card {
    position: static;
  }
  .ct-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .cat-panel {
    grid-template-columns: 1fr;
  }
  .cat-sep {
    display: none;
  }
  .vc-grid {
    grid-template-columns: 1fr;
  }
  .meet-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feat-essay {
    grid-template-columns: 1fr;
  }
  .fe-arr {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-right {
    order: -1;
    max-width: 240px;
  }
  .metrics-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric:nth-child(4),
  .metric:nth-child(5) {
    border-top: 1px solid var(--bord);
  }
  .essays-grid {
    grid-template-columns: 1fr 1fr;
  }
  .press-grid {
    grid-template-columns: 1fr;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .nav-links {
    display: none;
  }
  .feed-col:last-child {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .essays-grid {
    grid-template-columns: 1fr;
  }
  .teasers-grid {
    grid-template-columns: 1fr;
  }
  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric:nth-child(3) {
    border-top: 1px solid var(--bord);
    border-right: none;
  }
  .metric:nth-child(4) {
    border-right: 1px solid var(--bord);
  }
}