/* TAYREEN POP / an independent youth-media identity. */
:root{
  --color-bg:#09090b;--color-surface:#17171c;--color-text:#fafaf7;
  --red:#e0ff36;--pop-lime:#e0ff36;--pop-blue:#5168ff;--pop-pink:#ff7fd4;
  --font-display:'General Sans','Satoshi',sans-serif;
  --text-2xl:clamp(2.5rem,5.5vw,5.75rem);
}
body{background:#09090b}
#header{height:88px;background:#0b0b0ef2}
.wordmark{font-style:normal;font-size:2rem;letter-spacing:-.075em;font-weight:900}
.wordmark .dot{color:var(--pop-lime)}
.brand-note{letter-spacing:.08em;font-weight:700}
.nav{border-radius:12px;background:#19191e}
.nav a{border-radius:8px}
.nav a.active{background:var(--pop-lime);color:#101209;box-shadow:none}
.header-tools{gap:var(--space-1)}
.sound-toggle,.motion-toggle{position:relative;border:1px solid #ffffff2b;background:#19191f;width:40px;height:40px;min-height:40px}
.sound-toggle[aria-pressed=true]{background:var(--pop-lime);color:#111;border-color:var(--pop-lime)}
.motion-toggle[aria-pressed=false]{color:#92929e}
.hero{height:650px;background:#0d0d13;overflow:hidden;border-bottom:1px solid #ffffff17}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff20 .7px,transparent .7px);background-size:16px 16px;opacity:.32;mask-image:linear-gradient(90deg,#000,transparent 70%)}
.hero-pop{position:relative;height:100%;width:min(1440px,calc(100% - 96px));margin-inline:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-8);align-items:center;padding-bottom:var(--space-8)}
.hero-copy{position:relative;z-index:3;padding-block:var(--space-10);text-align:start}
.hero-copy .tag{border-radius:3px;color:var(--pop-lime);border-color:#e0ff3644;background:#e0ff360c;text-transform:uppercase;letter-spacing:.06em}
.hero-copy .red-dot{background:var(--pop-lime)}
.hero-copy h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;letter-spacing:-.065em;line-height:.98;margin-block:var(--space-6);max-width:820px;text-transform:uppercase;text-wrap:balance}
.hero-copy h1 .pop-line{display:block}
.hero-copy h1 .color-line{color:var(--pop-lime)}
.hero-copy h1 .pop-line{animation:pop-type-in .4s cubic-bezier(.2,.8,.2,1) both}
.hero-copy h1 .color-line{animation-delay:.07s}
@keyframes pop-type-in{from{opacity:0;transform:translateY(10px) skewY(1deg)}to{opacity:1;transform:translateY(0) skewY(0)}}
.hero-desc{font-size:var(--text-base);max-width:450px;color:#bbbcc7}
.hero-actions{margin-top:var(--space-6)}
.button{border-radius:7px;background:var(--pop-lime);font-weight:900;min-height:48px}
.button.outline{background:transparent;border-color:#ffffff40;color:white}
.button:hover{filter:brightness(1.08)}
.pop-visual{height:495px;position:relative;isolation:isolate}
.pop-backplate{position:absolute;inset:var(--space-5) -1rem var(--space-2) var(--space-5);background:var(--pop-blue);border-radius:14px;transform:rotate(7deg)}
.pop-photo{position:absolute;inset:0;border:1px solid #ffffff30;border-radius:14px;overflow:hidden;transform:rotate(-4deg) translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0);background:#292933;transition:transform .25s ease-out}
.pop-photo img{height:100%;width:100%;object-fit:cover;object-position:70% center}
.pop-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000a,transparent 45%)}
.pop-corner{position:absolute;inset-inline:var(--space-4);top:var(--space-4);display:flex;align-items:center;justify-content:space-between;z-index:2;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.pop-camera-label{display:flex;align-items:center;gap:var(--space-2)}
.pop-camera-label i{height:7px;width:7px;background:var(--pop-lime);border-radius:50%}
.pop-photo-bottom{position:absolute;bottom:var(--space-16);inset-inline:var(--space-5);z-index:2}
.pop-photo-bottom small{font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}
.pop-photo-bottom p{font-size:var(--text-lg);font-weight:900;line-height:1.25;margin-top:var(--space-2);max-width:320px}
.pop-sticker{position:absolute;z-index:4;background:var(--pop-lime);color:#111;top:var(--space-6);inset-inline-end:-1rem;padding:var(--space-3) var(--space-4);font-weight:900;font-size:var(--text-sm);text-transform:uppercase;transform:rotate(9deg);box-shadow:4px 4px 0 #08080b;border:1px solid #151515}
.pop-sticker-bottom{position:absolute;z-index:4;bottom:-.5rem;inset-inline-start:-1rem;display:flex;align-items:center;gap:var(--space-2);background:var(--pop-pink);color:#171019;font-size:var(--text-sm);padding:var(--space-3) var(--space-4);font-weight:900;transform:rotate(-7deg);box-shadow:4px 4px 0 #08080b}
.pop-sticker-bottom{animation:sticker-bob 5s ease-in-out infinite}
@keyframes sticker-bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-5px)}}
.pop-spark{position:absolute;inset-inline-start:-2.5rem;top:42%;width:84px;height:84px;color:var(--pop-lime);z-index:5;transform:rotate(-10deg);filter:drop-shadow(3px 3px 0 #09090b)}
.pop-spark svg{height:100%;width:100%;fill:currentColor;stroke:none}
.hero-bottom{inset-inline:0;bottom:0;position:absolute;height:45px}
.hero-index{font-variant-numeric:tabular-nums;font-size:var(--text-xs);font-weight:900}
.hero-dots button.active:before{background:var(--pop-lime)}
.demo-small{font-size:var(--text-xs);color:#c1c1ca;border-color:#ffffff30}
.ticker{overflow:hidden;background:var(--pop-lime);color:#10120a;height:49px;display:flex;align-items:center;user-select:none}
.ticker-track{display:flex;width:max-content;animation:ticker-move 38s linear infinite}
.ticker-unit{display:flex;align-items:center;gap:var(--space-8);white-space:nowrap;padding-inline:var(--space-4);font-weight:900;font-size:var(--text-sm);letter-spacing:.045em;text-transform:uppercase}
.ticker-unit svg{width:19px;height:19px;fill:currentColor;stroke:none}
@keyframes ticker-move{to{transform:translateX(-50%)}}
.topic-strip{background:#111116}
.topics a{padding-block:var(--space-2);color:#c3c3cf}
.topics a:hover{color:var(--pop-lime)}
.topics .strip-label{font-weight:900;font-size:var(--text-xs);text-transform:uppercase}
.section-head h2{font-family:var(--font-display);font-weight:900;letter-spacing:-.045em;font-size:clamp(1.5rem,2.8vw,2.5rem)}
.section-mark{height:27px;width:8px;border-radius:0;transform:rotate(13deg)}
.shorts-row{grid-auto-columns:calc((100% - 4 * 16px)/5)}
.short-card{aspect-ratio:9/16;border-radius:10px;isolation:isolate;border:1px solid #ffffff22;transition:transform .18s,border-color .18s}
.short-card:hover{transform:translateY(-4px);border-color:var(--pop-lime)}
.short-shade{background:linear-gradient(0deg,#08080bf5 1%,#08080b33 60%,#08080b00)}
.short-top .badge{background:var(--pop-lime);color:#13150b;font-weight:900;font-size:var(--text-xs);border-radius:3px}
.short-copy h3{font-family:var(--font-display);font-size:clamp(1.45rem,2.1vw,2.2rem);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;line-height:1}
.short-copy small{font-size:var(--text-xs);display:inline-block;border-radius:3px;color:#e7e7ef;font-weight:700}
.short-copy .short-footer{color:#b9b9c5}
.round-play{background:#0005;backdrop-filter:blur(10px);width:35px;height:35px}
.shorts-number{font-size:var(--text-xs);font-weight:900;letter-spacing:.07em;color:#fff;display:block;margin-bottom:var(--space-3)}
.news-card .eyebrow{color:var(--pop-lime)}
.news-card h3{font-family:var(--font-display);letter-spacing:-.03em;font-weight:900}
.news-image{border-radius:10px}.news-image .image-label{border-radius:3px;background:#15151bdd}
.feed-number{font-size:var(--text-lg);font-weight:900;color:#e0ff36}
.feed-item h3{font-size:var(--text-base);font-weight:700}
.feature-band{background:#101016;position:relative}
.feature-card{border-radius:12px;border:1px solid #ffffff26}
.feature-card:first-child .tag{background:var(--pop-pink);color:#171019;border:0;border-radius:3px}
.feature-card:nth-child(2) .tag{background:var(--pop-lime);color:#111;border:0;border-radius:3px}
.feature-card .red-dot{background:currentColor}
.feature-copy h3{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.8rem);max-width:510px;line-height:1.05}
.editorial-note{border-bottom:1px solid #ffffff25}
.editorial-note h2{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.15;max-width:620px}
.page-heading h1,.article-head h1{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,4rem);letter-spacing:-.045em;max-width:1000px}
.filter-row button.active{background:var(--pop-lime);border-color:var(--pop-lime)}
@media(max-width:600px){
 .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-block:4px 12px;margin-block:20px 8px;scrollbar-width:thin;scrollbar-color:var(--pop-lime) transparent}
 .filter-row button{flex-shrink:0;white-space:nowrap}
 .page-heading{padding-bottom:16px}
 .archive-shorts .empty{padding-block:28px 48px}
}
.disclosure{border-inline-start-color:var(--pop-lime)}
.player-shell{position:relative;width:min(400px,100%);margin:auto;background:#08080c;overflow:hidden;border-radius:8px}
.player-video{aspect-ratio:9/16;max-height:65dvh;width:100%;object-fit:cover}
.reel-hud{position:absolute;top:var(--space-4);inset-inline:var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);pointer-events:none}
.reel-hud .tag{background:var(--pop-lime);color:#141509;border:0;border-radius:3px;font-size:var(--text-xs)}
.reel-hud small{font-size:var(--text-xs);background:#000b;padding:var(--space-1) var(--space-2);border-radius:3px}
.reel-progress{position:absolute;bottom:53px;inset-inline:var(--space-4);height:3px;background:#ffffff35;pointer-events:none}
.reel-progress:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--reel-progress,0%);background:var(--pop-lime)}
.saved{color:var(--pop-lime)}
.player-details h3{font-family:var(--font-display);font-weight:900}
dialog{border-radius:12px;background:#121217}
.modal-top{border-color:#ffffff20}
.pop-article-label{font-size:var(--text-xs);color:var(--pop-lime);font-weight:700}
html[dir=rtl] .hero-copy h1{line-height:1.15;letter-spacing:0}
html[dir=rtl] .ticker-track{animation-direction:reverse}
html[dir=rtl] .short-copy h3{line-height:1.2;letter-spacing:0}
.motion-off .ticker-track{animation-play-state:paused}
.motion-off *{transition:none!important;animation:none!important}
.motion-off .pop-photo{transform:rotate(-4deg)}
@media(min-width:1700px){.hero{height:740px}.pop-visual{height:560px}}
@media(max-width:1150px){
 .hero-pop{width:calc(100% - 64px);grid-template-columns:1.1fr 1fr;gap:var(--space-6)}
 .hero-copy h1{font-size:clamp(2.7rem,5vw,4.5rem)}.pop-visual{height:430px}
 .brand-note{display:none}.header-tools{gap:0}.languages{margin-inline-start:0}.languages a{min-width:29px}
 .nav a{padding-inline:var(--space-3)}.shorts-row{grid-auto-columns:calc((100% - 3 * 16px)/4)}
}
@media(max-width:800px){
 #header{height:auto}.header-inner{row-gap:var(--space-3)}.nav{order:3}
 .hero{height:auto;min-height:830px}.hero-pop{width:calc(100% - 48px);display:flex;flex-direction:column;gap:var(--space-6);padding-block:var(--space-8) var(--space-16)}
 .hero-copy{width:100%;padding:0}.hero-copy h1{font-size:clamp(2.75rem,7vw,4.5rem);max-width:680px;margin-block:var(--space-5)}
 .hero-desc{max-width:560px}.hero-actions{margin-top:var(--space-5)}
 .pop-visual{width:min(100% - 32px,580px);height:370px;margin-block:var(--space-3)}
 .hero-bottom{inset-inline:0;bottom:0}.pop-spark{height:64px;width:64px;inset-inline-start:-1.5rem}
 .sound-toggle,.motion-toggle{height:40px;width:40px}
 .short-copy h3{font-size:1.8rem}
}
@media(max-width:520px){
 .wordmark{font-size:1.5rem}.header-inner{padding-block:var(--space-3);column-gap:var(--space-2)}
 .header-tools>.icon-btn{width:34px;height:38px;min-height:38px}
 .header-tools>a[aria-label]{display:none}
 .languages a{min-width:29px;min-height:40px}.nav{padding:var(--space-1);border-radius:10px}
 .nav a{border-radius:6px;min-height:40px}.hero{min-height:810px}
 .hero-pop{width:calc(100% - 40px);padding-top:var(--space-6);gap:var(--space-6)}
 .hero-copy h1{font-size:clamp(2.6rem,11vw,3.4rem);line-height:1.01;letter-spacing:-.06em}
 .hero-copy .tag{font-size:var(--text-xs)}.hero-desc{font-size:var(--text-sm);max-width:330px}
 .hero-actions{gap:var(--space-2)}.hero-actions .button{padding-inline:var(--space-4);min-height:46px}
 .pop-visual{height:300px;width:calc(100% - 24px);margin-inline:var(--space-3)}
 .pop-backplate{inset:var(--space-3) -.5rem var(--space-1) var(--space-3);transform:rotate(5deg)}
 .pop-sticker{font-size:var(--text-xs);top:var(--space-4);inset-inline-end:-.7rem;padding:var(--space-2) var(--space-3)}
 .pop-sticker-bottom{font-size:var(--text-xs);inset-inline-start:-.5rem;padding:var(--space-2) var(--space-3)}
 .pop-photo-bottom p{font-size:var(--text-base);max-width:225px}
 .hero-bottom{gap:var(--space-2)}.hero-index{font-size:var(--text-xs)}
 .ticker{height:43px}.ticker-unit{gap:var(--space-5);font-size:var(--text-xs)}
 .shorts-row{grid-auto-columns:68%}.short-card{aspect-ratio:9/15}.short-copy h3{font-size:2rem}
 .news-card h3{font-size:var(--text-lg)}.section-controls .meta{display:none}
 .archive-shorts .short-copy h3{font-size:1.4rem}
 .article-head h1{font-size:2.2rem}.feature-copy h3{font-size:1.8rem}
 .player-video{max-height:54dvh}
 .player-details{padding:var(--space-4)}
 .player-details h3{font-size:var(--text-base);line-height:1.35}
 .player-actions{margin-top:var(--space-3)}
}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.pop-photo{transform:rotate(-4deg);transition:none}.short-card:hover{transform:none}}