/* ========================================================================
   coresnaps.com — chapter-style portfolio index
   Dark theme · indigo accent · minimal
   ======================================================================== */

   :root {
    --bg: #09090b;
    --surface: #111113;
    --border: rgba(250, 250, 249, 0.07);
    --border-strong: rgba(250, 250, 249, 0.14);
    --fg: #fafaf9;
    --fg-dim: #a1a1aa;
    --muted: #52525b;
    --muted-2: #3f3f46;
    --accent: #6366f1;
    --accent-bright: #818cf8;
  
    --font-sans: "Geist", "Inter Tight", system-ui, -apple-system, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  
    --maxw: 1080px;
    --gutter: clamp(20px, 4vw, 56px);
  }
  
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }
  ::selection { background: var(--accent); color: #fafaf9; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  
  .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  
  /* ========================================================================
     Hero
     ======================================================================== */
  
  .hero {
    padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
  }
  
  .hero h1 {
    font-family: var(--font-mono);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--fg);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.36em;
    flex-wrap: wrap;
  }
  
  .hero h1 .hero-mark {
    display: inline-block;
    width: 0.92em;
    height: 0.92em;
    flex-shrink: 0;
    color: var(--accent);
  }
  .hero h1 .hero-mark svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .hero h1 .hero-word {
    display: inline-flex;
    align-items: baseline;
  }
  .hero h1 .hero-word .core  { color: var(--accent); }
  .hero h1 .hero-word .snaps { color: var(--fg); }
  .hero h1 .hero-word .tld   { color: var(--muted); }
  
  .hero p {
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--fg-dim);
    max-width: 52ch;
    line-height: 1.5;
  }
  
  /* ========================================================================
     Chapter banners
     ======================================================================== */
  
  .chapters {
    padding-bottom: clamp(20px, 2.5vw, 32px);
    position: relative;
    --zone-h: calc((clamp(160px, 20vw, 220px) + 240px) / 4);
  }

  .chapter {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(160px, 20vw, 220px);
    border: 1px solid var(--border);
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    /* Pull the next card up so only a tab peeks below */
    margin-bottom: calc(-1 * (clamp(160px, 20vw, 220px) - 80px));
    transition:
      border-color 220ms ease,
      transform 420ms cubic-bezier(.16, 1, .3, 1),
      box-shadow 420ms ease;
    background: #0d0d0f;
  }
  .chapter:last-child { margin-bottom: 0; }

  /* [01] sits on top of the pile, [04] at the bottom */
  .chapter[data-ch="01"] { z-index: 4; }
  .chapter[data-ch="02"] { z-index: 3; }
  .chapter[data-ch="03"] { z-index: 2; }
  .chapter[data-ch="04"] { z-index: 1; }

  /* ---- Pile zones — invisible links that map Y position to each card ---- */

  .pile-zone {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    cursor: pointer;
    display: block;
  }

  .pile-zone[data-zone="01"] { top: 0;                      height: var(--zone-h); }
  .pile-zone[data-zone="02"] { top: var(--zone-h);           height: var(--zone-h); }
  .pile-zone[data-zone="03"] { top: calc(var(--zone-h) * 2); height: var(--zone-h); }
  .pile-zone[data-zone="04"] { top: calc(var(--zone-h) * 3); height: var(--zone-h); }

  /* Zone 01 */
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="01"] {
    border-color: var(--border-strong); transform: translateY(-32px); z-index: 10; box-shadow: 0 24px 72px rgba(0,0,0,0.75);
  }
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="01"] .chapter-img { transform: scale(1.025); }
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="01"]::before { transform: scaleX(1); }
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="01"] .chapter-title { color: var(--accent-bright); }
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="01"] .chapter-arrow { color: var(--accent); transform: translateX(8px); }
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="02"],
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="03"],
  .pile-zone[data-zone="01"]:hover ~ .chapter[data-ch="04"] { transform: translateY(28px); }

  /* Zone 02 */
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="01"] { transform: translateY(-20px); }
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="02"] {
    border-color: var(--border-strong); transform: translateY(-32px); z-index: 10; box-shadow: 0 24px 72px rgba(0,0,0,0.75);
  }
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="02"] .chapter-img { transform: scale(1.025); }
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="02"]::before { transform: scaleX(1); }
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="02"] .chapter-title { color: var(--accent-bright); }
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="02"] .chapter-arrow { color: var(--accent); transform: translateX(8px); }
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="03"],
  .pile-zone[data-zone="02"]:hover ~ .chapter[data-ch="04"] { transform: translateY(28px); }

  /* Zone 03 */
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="01"],
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="02"] { transform: translateY(-20px); }
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="03"] {
    border-color: var(--border-strong); transform: translateY(-32px); z-index: 10; box-shadow: 0 24px 72px rgba(0,0,0,0.75);
  }
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="03"] .chapter-img { transform: scale(1.025); }
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="03"]::before { transform: scaleX(1); }
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="03"] .chapter-title { color: var(--accent-bright); }
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="03"] .chapter-arrow { color: var(--accent); transform: translateX(8px); }
  .pile-zone[data-zone="03"]:hover ~ .chapter[data-ch="04"] { transform: translateY(28px); }

  /* Zone 04 */
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="01"],
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="02"],
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="03"] { transform: translateY(-20px); }
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="04"] {
    border-color: var(--border-strong); transform: translateY(-32px); z-index: 10; box-shadow: 0 24px 72px rgba(0,0,0,0.75);
  }
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="04"] .chapter-img { transform: scale(1.025); }
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="04"]::before { transform: scaleX(1); }
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="04"] .chapter-title { color: var(--accent-bright); }
  .pile-zone[data-zone="04"]:hover ~ .chapter[data-ch="04"] .chapter-arrow { color: var(--accent); transform: translateX(8px); }
  
  .chapter-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: transform 600ms cubic-bezier(.2,.6,.2,1);
    background-color: #0d0d0f;
    background-image:
      radial-gradient(ellipse at 30% 50%, rgba(99,102,241,0.05) 0%, transparent 60%),
      repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.012) 0px,
        rgba(255,255,255,0.012) 1px,
        transparent 1px,
        transparent 8px
      ),
      linear-gradient(180deg, #131315 0%, #09090b 100%);
  }
  
  .chapter[data-ch="01"] .chapter-img { background-color: #0b0b0f; }
  .chapter[data-ch="02"] .chapter-img { background-color: #090c0f; }
  .chapter[data-ch="03"] .chapter-img { background-color: #0a0b0f; }
  .chapter[data-ch="04"] .chapter-img { background-color: #0c0a0f; }
  
  .chapter-img::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, rgba(9,9,11,0.6) 60%, rgba(9,9,11,0.9) 100%);
  }
  
  .chapter::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--accent);
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms cubic-bezier(.2,.6,.2,1);
  }
  
  .chapter-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 22px clamp(20px, 3vw, 36px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
  }
  .chapter-label-main {
    display: flex;
    align-items: baseline;
    gap: 6px clamp(14px, 1.8vw, 22px);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
  }
  
  .chapter-num {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-transform: uppercase;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .chapter-num .br { color: var(--muted); }
  
  .chapter-title {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3.2vw, 40px);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--fg);
    transition: color 200ms ease;
    flex-shrink: 0;
  }
  
  .chapter-arrow {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--fg-dim);
    transition: transform 280ms cubic-bezier(.2,.6,.2,1), color 200ms ease;
    flex-shrink: 0;
    padding-bottom: 2px;
    align-self: flex-end;
  }
  
  @media (max-width: 560px) {
    .chapter { height: 160px; }
    .chapter-title { font-size: 22px; }
    .chapter-label-main { gap: 12px; }
  }
  
  /* ========================================================================
     Footer — compact socials row + colophon
     ======================================================================== */
  
  .site-footer {
    padding: clamp(20px, 2.5vw, 28px) 0 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .footer-socials {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px clamp(12px, 2vw, 28px);
    align-items: baseline;
  }
  @media (max-width: 720px) {
    .footer-socials { flex-wrap: wrap; }
  }
  
  .social {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-mono);
    color: var(--fg-dim);
    transition: color 180ms ease;
    white-space: nowrap;
  }
  
  .social .s-num {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .social .s-num .br { color: var(--muted); }
  
  .social .s-name {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 500;
    color: var(--fg);
    transition: color 180ms ease;
  }
  .social:hover .s-name,
  .social:focus-visible .s-name { color: var(--accent); }
  
  .social .s-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 200ms cubic-bezier(.2,.6,.2,1);
    z-index: 5;
    text-transform: none;
  }
  .social .s-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) rotate(45deg) translateY(-4px);
    width: 7px; height: 7px;
    background: var(--surface);
    border-right: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
  }
  .social:hover .s-tip,
  .social:focus-visible .s-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
  
  .social.is-dead {
    cursor: help;
  }
  .social.is-dead .s-name {
    text-decoration: line-through;
    text-decoration-color: var(--muted);
    text-decoration-thickness: 1.5px;
  }
  .social.is-dead:hover .s-name,
  .social.is-dead:focus-visible .s-name {
    text-decoration-color: var(--accent);
  }
  .social.is-dead:focus { outline: none; }
  .social.is-dead:hover .s-tip-dead,
  .social.is-dead:focus-visible .s-tip-dead {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
  
  .s-tip-dead {
    padding: 9px 14px;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    border-color: var(--accent);
  }
  .s-tip-dead .skull {
    width: 18px;
    height: 18px;
    color: var(--accent);
    display: inline-block;
    flex-shrink: 0;
  }
  .s-tip-dead .rip {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-block;
  }
  
  .social.is-dead:hover .s-tip-dead .skull,
  .social.is-dead:focus-visible .s-tip-dead .skull {
    animation: skull-glitch 0.28s steps(5) infinite;
  }
  .social.is-dead:hover .s-tip-dead .rip,
  .social.is-dead:focus-visible .s-tip-dead .rip {
    animation: rip-flicker 0.22s steps(3) infinite;
  }
  
  @keyframes skull-glitch {
    0% {
      filter: drop-shadow(1px 0 0 rgba(232,90,90,0.85)) drop-shadow(-1px 0 0 rgba(60,200,220,0.85));
      transform: translate(0, 0);
    }
    20% {
      filter: drop-shadow(-2px 0 0 rgba(232,90,90,0.85)) drop-shadow(2px 0 0 rgba(60,200,220,0.85));
      transform: translate(1px, -1px);
    }
    40% {
      filter: drop-shadow(1px 1px 0 rgba(232,90,90,0.7)) drop-shadow(-1px -1px 0 rgba(60,200,220,0.7));
      transform: translate(-1px, 1px);
    }
    60% {
      filter: drop-shadow(0 0 6px rgba(232,90,90,0.9));
      transform: translate(0, -1px);
    }
    80% {
      filter: drop-shadow(2px 0 0 rgba(232,90,90,0.85)) drop-shadow(-2px 0 0 rgba(60,200,220,0.85));
      transform: translate(2px, 0);
    }
    100% {
      filter: none;
      transform: translate(0, 0);
    }
  }
  
  @keyframes rip-flicker {
    0%, 60%, 100% { opacity: 1; }
    20% { opacity: 0.55; }
    40% { opacity: 0.85; }
    80% { opacity: 0.4; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .social.is-dead:hover .s-tip-dead .skull,
    .social.is-dead:focus-visible .s-tip-dead .skull,
    .social.is-dead:hover .s-tip-dead .rip,
    .social.is-dead:focus-visible .s-tip-dead .rip {
      animation: none;
    }
  }
  
  .footer-colophon {
    margin-top: 14px;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    flex-wrap: wrap;
  }
  .footer-colophon b { color: var(--fg-dim); font-weight: 500; }
  .footer-colophon a { color: var(--muted); transition: color 160ms ease; }
  .footer-colophon a:hover { color: var(--accent); }