/* =========================
   Credits – Final Polished Chain
   Home icon block now matches archive/list.html
   ========================= */

* { box-sizing: border-box; }

:root{
  --left-gutter: 36px;
  --content-pad: 24px;

  --mobile-side-pad: 14px;
  --mobile-top-pad: 12px;
  --icon-size: 26px;
  --mobile-icon-gap: 10px;

  --bg: #fff;
  --fg: #000;
  --muted: #7a7a7a;

  --rule: rgba(0,0,0,0.18);

  /* ===== row geometry ===== */
  --rowH: 18px;
  --rowGap: 10px;
  --tileH: calc(var(--rowH) + var(--rowGap));

  /* ===== left lane ===== */
  --spinePad: 20px;

  /* ===== outer segment ===== */
  --outerW: 18px;
  --outerSvgH: 28px;
  --outerX: -1px;        /* moved slightly LEFT */
  --outerDown: 14px;

  /* ===== inner C ===== */
  --innerW: 12px;
  --innerH: 14px;
  --innerGap: 3px;
  --innerPullLeft: 10px;

  /* micro vertical tweak */
  --projectTextLift: -1px;
}

/* Base */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Helvetica, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ───────────── Links (match archive/list.html behavior) ───────────── */
a,
a:visited{
  color: inherit;
  text-decoration: none; /* credits page style */
  -webkit-tap-highlight-color: transparent; /* same as archive */
}

/* ───────────── Home icon base (EXACTLY like archive/list.html) ───────────── */
.home-icon{
  width: var(--icon-size);
  height: var(--icon-size);
  opacity: 0.95;
  -webkit-tap-highlight-color: transparent; /* same as archive */
  display: inline-block;
}
.home-icon img{
  width: 100%;
  height: auto;          /* key: matches archive sizing */
  display: block;
}
.home-icon:hover{ opacity: 1; }

/* Keep keyboard accessibility visible without changing size */
.home-icon:focus{ outline: none; }
.home-icon:focus-visible{
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ───────────── Mobile-only top area (match archive/list.html) ───────────── */
.mobile-top{
  position: relative;
  padding-top: var(--mobile-top-pad);
  padding-left: var(--mobile-side-pad);
  padding-right: var(--mobile-side-pad);
  height: calc(var(--icon-size) + (var(--mobile-top-pad) * 2));
}

.home-icon--mobile{
  position: absolute;
  top: var(--mobile-top-pad);
  left: calc(env(safe-area-inset-left) + var(--mobile-side-pad));
}

/* ───────────── Desktop-only fixed icon (match archive/list.html) ───────────── */
.home-icon--desktop{
  position: fixed;
  top: 16px;
  left: 8px;
  z-index: 1000;
}

@media (min-width: 901px){ .mobile-top{ display: none; } }
@media (max-width: 900px){ .home-icon--desktop{ display: none; } }

/* Layout */
.credits-layout{
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 var(--mobile-side-pad) 2rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 42px;
}
@media (min-width: 900px){
  .credits-layout{
    margin: 0;
    max-width: none;
    padding: var(--content-pad);
    margin-left: var(--left-gutter);
  }
}
@media (max-width: 900px){
  .credits-layout{
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: var(--mobile-icon-gap);
  }
  .credits-main{ margin-top: 18px; }
}

.left-rail{ padding-top: 6px; }

/* Projects list */
.project-list{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  padding-left: var(--spinePad);
}

/* Each row */
.project-item{
  height: var(--tileH);
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 12px;
  text-transform: lowercase;
  position: relative;
}

/* OUTER chain segment */
.project-item::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--spinePad) + var(--outerX));
  top: var(--outerDown);

  width: var(--outerW);
  height: var(--outerSvgH);

  background-repeat: no-repeat;
  background-size: var(--outerW) var(--outerSvgH);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28' viewBox='0 0 18 28'%3E%3Cpath d='M17 1 C3 1 3 27 17 27' fill='none' stroke='rgba(0,0,0,0.26)' stroke-width='1'/%3E%3C/svg%3E");
}

/* No final dangling */
.project-item.is-last::before{ display: none; }

/* Button */
.project-item button{
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--innerGap);
  transform: translateY(var(--projectTextLift));
}

/* Inner C */
.project-item button::before{
  content: "";
  width: var(--innerW);
  height: var(--innerH);
  margin-left: calc(-1 * var(--innerPullLeft));

  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M11 1 C4 1 4 13 11 13' fill='none' stroke='rgba(0,0,0,0.26)' stroke-width='1'/%3E%3C/svg%3E");
}

.project-item.is-active{ color: var(--muted); }

/* Right side */
.credits-main{ min-width: 0; }
.credits-header{ margin-bottom: 16px; }

.kicker{ font-size: 11px; opacity: 0.7; text-transform: lowercase; }
.subtitle{ margin-top: 10px; font-size: 14px; text-transform: lowercase; }

.words{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  min-height: 60vh;
}

.word{
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.word.show{ opacity: 1; transform: translateY(0); }

@media (max-width: 900px){
  .word{ font-size: 34px; }
}

@media (prefers-reduced-motion: reduce){
  .word{ transition: none; transform: none; }
}