/* ==========================================================================
   cecedesigner.com — Week 10 extras
   Bullet-first typography · project index stamps · process rows · film zone
   ========================================================================== */

/* ---------- Bullet-first list (all paragraph-like text is bulleted) ---------- */
.bullet-list {
  list-style: none;
  max-width: 72ch;
}
.bullet-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.95;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 16px;
  height: 1px;
  background: var(--ochre);
}
.bullet-list li strong { color: var(--ink); font-weight: 600; }
.bullet-list.tight li { margin-bottom: 9px; font-size: 13.5px; }

/* ---------- Section label ---------- */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 16px;
}
.sec-label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--ochre);
}

/* ---------- Cover background — slow crossfade + Ken Burns (after the Week-2 slides) ---------- */
.cover-hero > *:not(.cover-bg) { position: relative; z-index: 2; }
.cover-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #26261F;
}
.cover-bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity;
}
.cover-bg-slide.is-on { opacity: 1; }
.cover-bg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 42%;
  animation: coverZoom 20s cubic-bezier(0.16, 0.55, 0.3, 1) forwards;
}
.cover-bg-slide:not(.is-on) img { animation: none; }
@keyframes coverZoom {
  from { transform: scale(1.14); }
  to   { transform: scale(1.02); }
}
.cover-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(22, 22, 19, 0.52) 0%,
    rgba(22, 22, 19, 0.30) 46%,
    rgba(22, 22, 19, 0.56) 100%);
}
/* Cover text on the dark imagery — light paper palette */
.home .cover-name { color: #F6F1E6; }
.home .cover-role { color: #E0B184; }
.home .cover-meta { color: rgba(246, 241, 230, 0.68); }
.home .cover-rule { background: rgba(246, 241, 230, 0.30); }
.home .cover-theme { color: rgba(246, 241, 230, 0.88); }
.home .cover-scroll { color: rgba(246, 241, 230, 0.78); }
.home .cover-scroll::after { background: linear-gradient(rgba(246, 241, 230, 0.8), transparent); }
.home .cover-hero .ghost { color: #F6F1E6; opacity: 0.09; }
.home .cover-mark { background: #E0B184; }
.home .nav:not(.scrolled) .brand,
.home .nav:not(.scrolled) .nav-links a { color: #F4EFE6; }
.home .nav:not(.scrolled) .nav-links a:hover { color: #E0B184; }
.home .nav:not(.scrolled) .nav-toggle span { background: #F4EFE6; }
@media (max-width: 640px) {
  .cover-bg-slide img { animation-duration: 24s; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-bg-slide { transition: none; }
  .cover-bg-slide img { animation: none; }
  .cover-scroll::after { animation: none; }
}

/* ---------- Cover hero (index) — Paper. Ink. Space. ---------- */
.cover-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 24px 40px;
  overflow: hidden;
}
.cover-mark {
  position: absolute;
  top: 104px;
  left: max(28px, 4vw);
  width: 64px;
  height: 2px;
  background: var(--ochre);
}
.cover-name {
  font-family: var(--serif);
  font-size: clamp(58px, 12vw, 148px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.cover-role {
  font-family: var(--serif);
  font-size: clamp(17px, 3vw, 32px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-top: 14px;
}
.cover-meta {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cover-rule {
  width: min(360px, 62vw);
  height: 1px;
  background: var(--line-strong);
  margin: 36px auto 30px;
}
.cover-theme {
  font-family: var(--serif);
  font-size: clamp(16px, 2.4vw, 25px);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.cover-scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cover-scroll::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--ink-soft), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}

/* Staggered rise for cover elements */
.fade-rise {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeRise 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes fadeRise {
  to { opacity: 1; transform: none; }
}
.fade-d1 { animation-delay: 0.18s; }
.fade-d2 { animation-delay: 0.36s; }
.fade-d3 { animation-delay: 0.54s; }
.fade-d4 { animation-delay: 0.72s; }

/* ---------- Giant ghost "我" on index ---------- */
.hero-ghost-cn {
  position: absolute;
  z-index: 0;
  font-family: var(--serif);
  font-size: clamp(180px, 34vw, 460px);
  line-height: 1;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  right: -2vw;
  top: 4vh;
}

/* ---------- Four threads ---------- */
.four-threads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.thread-item {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.thread-num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--ochre);
}
.thread-name {
  font-family: var(--serif);
  font-size: 22px;
  margin: 12px 0 8px;
}
.thread-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; }
@media (max-width: 820px) {
  .four-threads { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .four-threads { grid-template-columns: 1fr; }
}

/* ---------- Works page: project blocks ---------- */
.project-block {
  position: relative;
  padding: 96px 0 20px;
  border-top: 1px solid var(--line);
}
.project-block:first-of-type { border-top: 0; }
.proj-head {
  display: flex;
  gap: 34px;
  align-items: flex-start;
  margin-bottom: 38px;
}
.project-index {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
  color: var(--ochre);
  padding-right: 26px;
  border-right: 1px solid var(--line-strong);
  white-space: nowrap;
}
.proj-titles { flex: 1; }
.proj-titles h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.25;
  margin: 6px 0 10px;
}
.proj-titles .subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faint);
}
.proj-hero-img {
  width: 100%;
  max-height: 76vh;
  object-fit: cover;
  margin-bottom: 20px;
}

/* Overview block — centred narrow column */
.overview {
  max-width: 860px;
  margin: 52px auto 20px;
}
.overview .sec-label { margin-bottom: 20px; }
.overview .bullet-list { max-width: 100%; }

/* Process rows — alternating figure / notes */
.process-row {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 46px;
  align-items: center;
  margin: 30px 0 44px;
}
.process-row.flip .process-figure { order: 2; }
.process-figure { margin: 0; }
.process-figure img {
  width: 100%;
  display: block;
}
.process-figure figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.process-notes .sec-label { margin-bottom: 18px; }
.process-notes .bullet-list { max-width: 100%; }
@media (max-width: 820px) {
  .process-row { grid-template-columns: 1fr; gap: 26px; }
  .process-row.flip .process-figure { order: 0; }
}

/* Gallery rows */
.gallery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 30px 0 44px;
}
.gallery-row img { width: 100%; display: block; }
.gallery-row.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) {
  .gallery-row, .gallery-row.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .gallery-row, .gallery-row.three { grid-template-columns: 1fr; }
}

/* Quote inside projects */
.proj-quote-cn {
  border-left: 3px solid var(--ochre);
  padding: 4px 0 4px 24px;
  margin: 8px 0 34px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.9;
  color: var(--moss);
}

/* ---------- Film & audio zone ---------- */
.film-zone {
  position: relative;
  background: var(--ink);
  color: #F1EBDD;
  padding: 110px 0;
  overflow: hidden;
}
.film-zone .sec-label { color: #E3B48F; }
.film-zone .sec-label::before { background: var(--ochre); }
.film-zone h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  margin-bottom: 40px;
}
.film-zone .bullet-list li {
  border-color: rgba(241, 235, 221, 0.72);
  color: rgba(241, 235, 221, 0.72);
}
.film-zone .bullet-list li::before { background: var(--ochre); }
.film-zone .bullet-list li strong { color: #F1EBDD; }
.film-block { margin-bottom: 64px; }
.film-block .video-frame { margin: 0 0 18px; }
.film-block h3 {
  font-family: var(--serif);
  font-size: 21px;
  color: #F1EBDD;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.film-block h3 .chip {
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  border: 1px solid rgba(227, 180, 143, 0.55);
  color: #E3B48F;
  border-radius: 2px;
}
.film-block .video-frame { border: 1px solid rgba(241, 235, 221, 0.18); }

/* Audio player row */
.audio-row {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(241, 235, 221, 0.06);
  border: 1px solid rgba(241, 235, 221, 0.2);
  padding: 18px 22px;
  margin: 24px 0 12px;
}
.audio-row .a-title {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E3B48F;
  white-space: nowrap;
}
.audio-row audio { width: 100%; }

/* Light audio row (inside project blocks) */
.audio-row.light {
  background: var(--paper-deep);
  border-color: var(--line);
}
.audio-row.light .a-title { color: var(--ochre); }

/* ---------- Journalism page helpers ---------- */
.jrn-entry {
  max-width: 860px;
  margin: 0 auto 20px;
}
.jrn-entry .block-head { margin-bottom: 34px; }
.jrn-entry h2 { font-size: clamp(24px, 3vw, 34px); margin: 64px 0 20px; }
.jrn-entry .bullet-list { margin-bottom: 26px; }
.lemma {
  font-style: italic;
  color: var(--moss);
  border-left: 3px solid var(--ochre);
  padding-left: 22px;
  margin: 28px 0;
  font-size: 16.5px;
  line-height: 2;
}

/* ---------- About helpers ---------- */
.about-body .bullet-list { max-width: 100%; margin-bottom: 22px; }
.about-body h3.h-lab {
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 34px 0 16px;
}
.kv-line {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 18px;
}
.kv-line .k { color: var(--ink-soft); letter-spacing: 0.04em; }
.kv-line a:hover { color: var(--ochre); }

/* ---------- Footer (pure text, no links) ---------- */
.footer-domain {
  font-family: var(--serif);
  color: #F1EBDD;
}