{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ --ink:#07070a; --ink-raised:#101015; --bone:#dcd6c8; --bone-dim:#8a857a; --blood:#7a0f0f; --rot:#6b7d4e; --edge:rgba(232,227,217,.14); --display:'Cinzel Decorative',serif; --type:'Special Elite','Courier New',monospace; --body:'Outfit',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ink); color:var(--bone); font-family:var(--body); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9998; background:radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(0,0,0,.72) 100%); } /* ---------- hero ---------- */ .hero{ padding:clamp(3.5rem,10vw,7rem) 1.5rem clamp(2.5rem,6vw,4rem); max-width:1180px; margin:0 auto; border-bottom:1px solid var(--edge); } .eyebrow{ font-family:var(--type); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blood); font-weight:400; margin-bottom:1.6rem; } .hero h1{ font-family:var(--type); font-weight:400; font-size:clamp(2.3rem,7.4vw,5.2rem); line-height:1.16; letter-spacing:-.005em; max-width:15ch; text-shadow:0 0 34px rgba(122,15,15,.42); } .hero h1 em{ font-style:normal; font-weight:400; color:var(--blood); animation:flicker 7s infinite steps(1); } @keyframes flicker{ 0%,42%,44.2%,45.6%,47%,100%{opacity:1} 43%,44.8%,46.2%{opacity:.28} } .hero-lede{ font-family:var(--type); margin-top:1.4rem; font-size:clamp(.92rem,2.4vw,1.12rem); letter-spacing:.16em; text-transform:uppercase; color:var(--blood); } .hero-sub{ margin-top:1.6rem; max-width:52ch; font-size:1.05rem; color:var(--bone-dim); } .meta{ font-family:var(--type); margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:0 2.5rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; } .meta div{padding:.5rem 0} .meta span{font-family:var(--type);display:block;color:var(--bone-dim);font-size:.68rem;letter-spacing:.2em;margin-bottom:.25rem} /* ---------- filter ---------- */ .filters{ max-width:1180px; margin:0 auto; padding:2rem 1.5rem .5rem; display:flex; flex-wrap:wrap; gap:.5rem; } .filters button{ background:none; border:1px solid var(--edge); color:var(--bone-dim); font-family:var(--type); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:.55rem 1rem; cursor:pointer; transition:all .18s ease; } .filters button:hover{color:var(--bone);border-color:var(--bone-dim)} .filters button[aria-pressed="true"]{ background:var(--blood); border-color:var(--blood); color:var(--bone); } .filters button:focus-visible{outline:2px solid var(--rot);outline-offset:2px} /* ---------- grid ---------- */ .filters-day{padding-bottom:0} .filters-day button[aria-pressed="true"]{background:var(--rot);border-color:var(--rot);color:var(--ink)} .card-days{ font-family:var(--type); margin-top:.4rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rot); } .panel .days{ font-family:var(--type); margin-top:1.1rem; padding:.6rem .85rem; border-left:3px solid var(--rot); background:rgba(107,125,78,.08); font-size:.82rem; letter-spacing:.06em; color:#cfc9bf; } .grid{ max-width:1080px; margin:0 auto; padding:1.5rem 1.5rem 5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge); } @media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr);max-width:640px}} .card{ background:var(--ink-raised); border:none; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:0; position:relative; display:flex; flex-direction:column; transition:background .22s ease; } .card:hover,.card:focus-visible{background:#171018} .card::before{ content:""; position:absolute; left:0;right:0;bottom:0; height:2px; background:var(--blood); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .card:hover::before,.card:focus-visible::before{transform:scaleX(1)} .card:focus-visible{outline:2px solid var(--rot);outline-offset:-2px} .card[hidden]{display:none} .portrait{ aspect-ratio:3/4; background: radial-gradient(circle at 50% 34%, #241a20 0%, #0a090d 74%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(.62) contrast(1.06) brightness(.88)} .card:hover .portrait img{filter:grayscale(0) contrast(1) brightness(1)} .initials{ font-family:var(--display); font-size:2.6rem; font-weight:900; color:rgba(220,214,200,.17); letter-spacing:.04em; text-shadow:0 0 22px rgba(122,15,15,.5); } .portrait::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(11,10,13,.92) 0%,transparent 55%); } .card-body{padding:1rem 1.05rem 1.25rem} .card-name{ font-family:var(--display); font-size:1.02rem; font-weight:700; line-height:1.25; letter-spacing:.01em; } .card-genres{ font-family:var(--type); margin-top:.55rem; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim); } .card-cue{ font-family:var(--type); position:absolute; right:1rem; bottom:1.25rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blood); opacity:0; transition:opacity .18s ease; } .card:hover .card-cue,.card:focus-visible .card-cue{opacity:1} /* ---------- panel ---------- */ dialog{ border:none; padding:0; background:var(--ink-raised); color:var(--bone); max-width:640px; width:calc(100% - 2rem); border-top:3px solid var(--blood); } dialog::backdrop{background:rgba(5,4,7,.86)} .panel{padding:2.5rem} .panel h2{ font-family:var(--display); font-size:clamp(1.5rem,4.2vw,2.2rem); font-weight:900; line-height:1.14; letter-spacing:.01em; text-shadow:0 0 26px rgba(122,15,15,.4); } .panel .legal{ font-family:var(--type); margin-top:.6rem; font-size:.8rem; color:var(--bone-dim); font-style:italic; } .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0} .tag{ font-family:var(--type); border:1px solid var(--edge); padding:.32rem .7rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); } .panel p.bio{margin-top:1rem;color:#cfc9bf} .books{margin-top:1.8rem;border-top:1px solid var(--edge);padding-top:1.3rem} .books h3{ font-family:var(--type); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--rot); font-weight:400; margin-bottom:.8rem; } .books ul{list-style:none} .books li{ padding:.45rem 0; border-bottom:1px solid rgba(232,227,217,.06); font-size:.95rem; } .books li:last-child{border-bottom:none} .alink{ font-family:var(--type); margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--edge); font-size:.8rem; color:var(--rot); letter-spacing:.05em; } .closebtn{ position:absolute; top:1rem; right:1.1rem; background:none; border:none; color:var(--bone-dim); font-size:1.6rem; line-height:1; cursor:pointer; padding:.3rem .5rem; font-family:var(--body); } .closebtn:hover{color:var(--bone)} .closebtn:focus-visible{outline:2px solid var(--rot)} /* ---------- footer ---------- */ footer{ border-top:1px solid var(--edge); padding:3.5rem 1.5rem 5rem; max-width:1180px; margin:0 auto; text-align:center; } footer p{color:var(--bone-dim);max-width:46ch;margin:0 auto 1.8rem;font-size:.95rem} .cta{ font-family:var(--type); display:inline-block; background:var(--blood); color:var(--bone); text-decoration:none; padding:.95rem 2.2rem; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; transition:background .18s ease; } .cta:hover{background:#9c1414;box-shadow:0 0 30px rgba(122,15,15,.55)} .cta:focus-visible{outline:2px solid var(--rot);outline-offset:3px} @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}} @media(max-width:520px){ .filters-day{padding-bottom:0} .filters-day button[aria-pressed="true"]{background:var(--rot);border-color:var(--rot);color:var(--ink)} .card-days{ font-family:var(--type); margin-top:.4rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rot); } .panel .days{ font-family:var(--type); margin-top:1.1rem; padding:.6rem .85rem; border-left:3px solid var(--rot); background:rgba(107,125,78,.08); font-size:.82rem; letter-spacing:.06em; color:#cfc9bf; } .grid{grid-template-columns:repeat(2,1fr)} .panel{padding:2rem 1.4rem} .card-name{font-size:1.08rem} }