/* =========================================================== framebyraph — per-series palette overrides Applied via [data-series="..."] on =========================================================== */ body[data-series="sentiment-1"]{ --bg: #12181F; --ink: #DCE4EC; --accent: #6F9BC2; } body[data-series="sentiment-2"]{ --bg: #F7F1DE; --ink: #3A3220; --accent: #E3A82B; } body[data-series="sentiment-3"]{ --bg: #1A0E0B; --ink: #FBEDE6; --accent: #E36A3D; } body[data-series="sentiment-4"]{ --bg: #F2ECE1; --ink: #3D362B; --accent: #B08A4E; } body[data-series="deadair"]{ --bg: #141A12; --ink: #E4EEDD; --accent: #8FB84A; } body[data-series="theresidence"]{ --bg: #0F0F0F; --ink: #EDEDED; --accent: #8C8C8C; } body[data-series="dbtk"]{ --bg: #F5F1E8; --ink: #1A1A1A; --accent: #D6472E; --sage: #3B7A3E; } body[data-series="anino-ng-lungsod"]{ --bg: #131313; --ink: #E8E4DC; --accent: #9A8E76; } body[data-series="piyesa"]{ --bg: #F3E4D3; --ink: #4A2E1D; --accent: #C1592B; } body[data-series="cosplay"]{ --bg: #FAF3E0; --ink: #2B2B2B; --accent: #E0553F; } body[data-series="prnd"]{ --bg: #141414; --ink: #ECECEC; --accent: #9A8F80; } /* ---------- series subpage layout ---------- */ .series-hero{ padding-block: clamp(4rem, 12vw, 8rem) clamp(2.5rem, 6vw, 4rem); text-align: center; } .series-hero .eyebrow{ display: block; } .series-hero h1{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 0.4rem 0 0; line-height: 1.05; } .series-desc{ max-width: 62ch; margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; text-align: center; font-size: 1.05rem; line-height: 1.85; } .series-desc p{ margin: 0 0 1.1rem; } .series-desc p:last-child{ margin-bottom: 0; } .series-desc .hl{ color: var(--accent); font-style: italic; font-weight: 500; } .pull-quote{ margin: clamp(2rem, 5vw, 3rem) 0; padding: 0; border: none; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.3; color: var(--accent); position: relative; } .pull-quote::before{ content: "\201C"; display: block; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 0.5; opacity: 0.35; margin-bottom: 0.5rem; } /* ---------------- floating spotify player ---------------- */ .spotify-float{ position: fixed; right: clamp(0.75rem, 3vw, 1.5rem); bottom: clamp(0.75rem, 3vw, 1.5rem); z-index: 50; width: min(320px, calc(100vw - 1.5rem)); background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-top: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); overflow: hidden; transition: transform .3s ease, opacity .3s ease; } .spotify-float.is-collapsed .spotify-float-body{ display: none; } .spotify-float-head{ display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: 0.7; cursor: pointer; user-select: none; } .spotify-float-head:hover{ opacity: 1; } .spotify-float-head .toggle-icon{ font-size: 0.9rem; transition: transform .25s ease; } .spotify-float.is-collapsed .toggle-icon{ transform: rotate(180deg); } .spotify-float-body iframe{ display: block; width: 100%; border: none; } .series-meta{ display: flex; justify-content: center; gap: 1.75rem; margin-top: 2rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; } .back-link{ display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; transition: opacity .2s ease, gap .2s ease; } .back-link:hover{ opacity: 1; gap: 0.75rem; } .photo-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.4vw, 1.1rem); width: calc(100vw - clamp(1.5rem, 5vw, 4rem) * 2); margin-left: calc(50% - 50vw + clamp(1.5rem, 5vw, 4rem)); padding-block: 0; } @media (max-width: 780px){ .photo-grid{ grid-template-columns: repeat(2, 1fr); } } .photo-grid figure{ margin: 0; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); aspect-ratio: 4/5; cursor: zoom-in; box-shadow: 0 4px 14px rgba(0,0,0,0.1); transition: opacity .9s ease, transform .9s ease, box-shadow .3s ease; } .photo-grid figure:hover{ box-shadow: 0 12px 28px rgba(0,0,0,0.2); } .photo-grid figure:hover img{ transform: scale(1.035); } .photo-grid img{ transition: transform .4s ease; } /* ---------------- lightbox ---------------- */ .lightbox{ position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(10,10,10,0.92); opacity: 0; transition: opacity .25s ease; } .lightbox.is-open{ display: flex; opacity: 1; } .lb-img{ max-width: min(88vw, 1100px); max-height: 86vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .lb-close, .lb-prev, .lb-next{ position: absolute; background: none; border: none; color: #F2F2F2; cursor: pointer; font-family: var(--font-mono); transition: opacity .2s ease; opacity: 0.7; } .lb-close:hover, .lb-prev:hover, .lb-next:hover{ opacity: 1; } .lb-close{ top: 1.5rem; right: 1.75rem; font-size: 1.3rem; } .lb-prev{ left: clamp(0.75rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); font-size: 1.8rem; padding: 0.5rem; } .lb-next{ right: clamp(0.75rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); font-size: 1.8rem; padding: 0.5rem; } .lb-count{ position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: rgba(242,242,242,0.65); } @media (max-width: 640px){ .lb-prev, .lb-next{ font-size: 1.4rem; } } .photo-grid img{ width: 100%; height: 100%; object-fit: cover; } .photo-grid.is-placeholder figure{ display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.35; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); padding: 1rem; text-align: center; }