/* ============================================================
   Journalous display ads — shared styles
   3 concepts (c1 typewriter · c2 distraction-free · c3 private)
   4 sizes (s300 300x250 · s728 728x90 · s160 160x600 · s320 320x50)
   Served from journalo.us/ads/ and embedded by advertisers via iframe.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Slab:wght@600;700;800;900&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  --pink:#fe386e; --pink-deep:#c41c4a; --cyan:#38dff2;
  --navy1:#1a1a2e; --navy2:#16213e; --navy3:#0f3460; --ink:#0d0d14;
  --paper:#f9f9f9; --slab:'Roboto Slab',Georgia,serif;
  --sans:Inter,Helvetica,sans-serif; --mono:'Roboto Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
.ad-link{display:block;text-decoration:none;color:inherit;cursor:pointer}

/* --- size frames --- */
.ad{position:relative;overflow:hidden;font-family:var(--sans);-webkit-font-smoothing:antialiased}
.s300{width:300px;height:250px}
.s728{width:728px;height:90px}
.s160{width:160px;height:600px}
.s320{width:320px;height:50px}

/* --- shared primitives --- */
.mark{display:block;border-radius:6px}
.wordmark{font-family:var(--slab);font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1}
.lockup{display:flex;align-items:center;gap:9px}
.eyebrow{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.caret{display:inline-block;width:2px;background:var(--pink);vertical-align:text-bottom;animation:blink .8s step-end infinite}
@keyframes blink{50%{opacity:0}}
@keyframes caretBlink{50%{border-color:transparent}}

/* ============================================================
   CONCEPT 1 — TYPEWRITER
   ============================================================ */
.c1{background:linear-gradient(140deg,var(--navy1) 0%,var(--navy2) 55%,var(--navy3) 100%)}
.c1 .typed{display:inline-block;vertical-align:bottom;font-family:var(--mono);color:#f2f2f7;white-space:nowrap;overflow:hidden;width:0;border-right:2px solid var(--pink)}
.c1 .tagline{font-family:var(--slab);font-weight:700;color:#fff}
.c1 .foot{font-family:var(--mono);color:var(--pink)}
.c1 .foot b{color:#fff}

/* 300x250 : type-scene cross-fades to logo-scene */
.c1.s300 .c1-type{position:absolute;inset:0;padding:0 26px;display:flex;flex-direction:column;justify-content:center;animation:c1SceneA 11s infinite}
.c1.s300 .eyebrow{font-size:10px;margin-bottom:14px;opacity:.85}
.c1.s300 .typed{font-size:15px;line-height:1.5;animation:c1Type300 11s steps(25,end) infinite,caretBlink .8s step-end infinite}
.c1.s300 .c1-resolve{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;animation:c1SceneB 11s infinite}
.c1.s300 .mark{width:34px;height:34px}
.c1.s300 .wordmark{font-size:26px}
.c1.s300 .tagline{font-size:17px;text-align:center}
.c1.s300 .foot{font-size:11px;letter-spacing:.08em}
@keyframes c1Type300{0%{width:0}26%{width:25ch}44%{width:25ch}46%{width:0}100%{width:0}}
@keyframes c1SceneA{0%{opacity:1}42%{opacity:1}48%{opacity:0}100%{opacity:0}}
@keyframes c1SceneB{0%,48%{opacity:0;transform:translateY(6px)}56%{opacity:1;transform:translateY(0)}94%{opacity:1}100%{opacity:0}}

/* 728x90 : persistent lockup left, message types then resolves right */
.c1.s728{display:flex;align-items:center;padding:0 30px}
.c1.s728 .lockup.persist{position:absolute;left:30px;top:50%;transform:translateY(-50%)}
.c1.s728 .mark{width:40px;height:40px}
.c1.s728 .wordmark{font-size:26px}
.c1.s728 .c1-type{position:absolute;left:250px;right:30px;top:0;height:100%;display:flex;align-items:center;animation:c1SceneA 11s infinite}
.c1.s728 .typed{font-size:19px;animation:c1Type728 11s steps(25,end) infinite,caretBlink .8s step-end infinite}
.c1.s728 .c1-resolve{position:absolute;left:250px;right:30px;top:0;height:100%;display:flex;flex-direction:column;justify-content:center;gap:3px;opacity:0;animation:c1SceneB 11s infinite}
.c1.s728 .tagline{font-size:20px}
.c1.s728 .foot{font-size:12px;letter-spacing:.06em}
@keyframes c1Type728{0%{width:0}26%{width:25ch}44%{width:25ch}46%{width:0}100%{width:0}}

/* 160x600 : tall stack, types once and holds */
.c1.s160{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:36px 18px}
.c1.s160 .mark{width:40px;height:40px;margin:0 auto 10px}
.c1.s160 .wordmark{font-size:22px}
.c1.s160 .eyebrow{display:block;font-size:9px;margin:18px 0 10px;opacity:.8}
.c1.s160 .typed{font-size:14px;margin:0 auto;animation:c1Type160 6s steps(16,end) infinite,caretBlink .8s step-end infinite}
.c1.s160 .tagline{font-size:19px;line-height:1.25;margin-top:12px}
.c1.s160 .foot{font-size:11px;line-height:1.7;letter-spacing:.05em}
@keyframes c1Type160{0%{width:0}40%{width:16ch}100%{width:16ch}}

/* 320x50 : compact brand bar with blinking caret */
.c1.s320{display:flex;align-items:center;gap:11px;padding:0 14px}
.c1.s320 .mark{width:30px;height:30px;flex:0 0 auto}
.c1.s320 .tagline{font-family:var(--slab);font-weight:700;color:#fff;font-size:11.5px;letter-spacing:-.01em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c1.s320 .caret{height:13px;margin-left:1px}
.c1.s320 .foot{font-size:11px;letter-spacing:.04em;white-space:nowrap;flex:0 0 auto}

/* ============================================================
   CONCEPT 2 — DISTRACTION-FREE
   ============================================================ */
.c2{background:linear-gradient(180deg,#fff 0%,var(--paper) 100%)}
.c2 .rules{position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(15,52,96,.07) 37px 38px);opacity:.9}
.c2 .cursor{position:absolute;width:2px;background:var(--pink);animation:blink 1s step-end infinite}
.c2 .headline{font-family:var(--slab);font-weight:800;color:#12121a}
.c2 .headline .hl{color:var(--pink)}
.c2 .url{font-family:var(--mono);color:var(--pink-deep);font-weight:500}
.c2 .wordmark{color:#12121a}

/* 300x250 */
.c2.s300 .rules{background-position:0 44px}
.c2.s300 .cursor{left:34px;top:52px;height:22px;animation:blink 1s step-end infinite,c2Hide300 9s infinite}
.c2.s300 .headline{position:absolute;left:34px;right:34px;top:44px;font-size:23px;line-height:1.15;opacity:0;animation:c2Rise 9s infinite}
.c2.s300 .c2-foot{position:absolute;left:34px;right:28px;bottom:26px;display:flex;align-items:center;justify-content:space-between;opacity:0;animation:c2FootIn 9s infinite}
.c2.s300 .mark{width:26px;height:26px}
.c2.s300 .wordmark{font-size:18px}
.c2.s300 .url{font-size:11px}
@keyframes c2Hide300{0%,18%{opacity:1}26%,100%{opacity:0}}
@keyframes c2Rise{0%,20%{opacity:0;transform:translateY(4px)}30%{opacity:1;transform:translateY(0)}100%{opacity:1}}
@keyframes c2FootIn{0%,55%{opacity:0}66%{opacity:1}100%{opacity:1}}

/* 728x90 : headline left with cursor, lockup right */
.c2.s728{display:flex;align-items:center;justify-content:space-between;padding:0 34px}
.c2.s728 .rules{background-position:0 20px}
.c2.s728 .cursor{left:34px;top:50%;transform:translateY(-50%);height:26px;animation:blink 1s step-end infinite,c2Hide728 9s infinite}
.c2.s728 .headline{position:relative;font-size:26px;opacity:0;animation:c2Rise 9s infinite;padding-left:0}
.c2.s728 .c2-foot{display:flex;flex-direction:column;align-items:flex-end;gap:4px;opacity:0;animation:c2FootIn 9s infinite}
.c2.s728 .mark{width:30px;height:30px}
.c2.s728 .wordmark{font-size:20px}
.c2.s728 .url{font-size:12px}
@keyframes c2Hide728{0%,16%{opacity:1}24%,100%{opacity:0}}

/* 160x600 : blank top with cursor, headline mid, lockup bottom */
.c2.s160{display:flex;flex-direction:column;padding:40px 22px}
.c2.s160 .rules{background-position:0 46px}
.c2.s160 .cursor{left:22px;top:50px;height:22px;animation:blink 1s step-end infinite,c2Hide300 9s infinite}
.c2.s160 .headline{position:absolute;left:22px;right:18px;top:42px;font-size:22px;line-height:1.2;opacity:0;animation:c2Rise 9s infinite}
.c2.s160 .c2-foot{position:absolute;left:22px;right:18px;bottom:30px;display:flex;flex-direction:column;gap:14px;opacity:0;animation:c2FootIn 9s infinite}
.c2.s160 .lockup{flex-direction:column;align-items:flex-start;gap:7px}
.c2.s160 .mark{width:28px;height:28px}
.c2.s160 .wordmark{font-size:18px}
.c2.s160 .url{font-size:12px}

/* 320x50 : brand bar, blinking cursor accent */
.c2.s320{display:flex;align-items:center;gap:9px;padding:0 14px}
.c2.s320 .cursor{position:static;width:2px;height:16px;flex:0 0 auto;animation:blink 1s step-end infinite}
.c2.s320 .headline{font-family:var(--slab);font-weight:800;color:#12121a;font-size:12.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c2.s320 .mark{width:28px;height:28px;flex:0 0 auto}
.c2.s320 .url{font-size:11px;white-space:nowrap;flex:0 0 auto}

/* ============================================================
   CONCEPT 3 — PRIVATE BY DESIGN
   ============================================================ */
.c3{background:radial-gradient(120% 100% at 20% 0%,#1c1c34 0%,var(--ink) 70%)}
.c3 .line{position:relative;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.16);animation:c3Enc 10s infinite}
.c3 .line::after{content:"";position:absolute;inset:0;border-radius:5px;background:repeating-linear-gradient(90deg,var(--cyan) 0 7px,transparent 7px 14px);opacity:0;animation:c3Cipher 10s infinite}
.c3 .lock svg{display:block;width:100%;height:100%}
.c3 .big{font-family:var(--slab);font-weight:700;color:#fff;line-height:1.2}
.c3 .big .cy{color:var(--cyan)}
.c3 .url{font-family:var(--mono);color:var(--cyan)}
@keyframes c3Enc{0%,30%{filter:none;opacity:1}42%{filter:blur(1px)}54%,100%{filter:blur(2.5px);opacity:.35}}
@keyframes c3Cipher{0%,32%{opacity:0}50%{opacity:.9}100%{opacity:.9}}

/* 300x250 */
.c3.s300 .lines{position:absolute;left:26px;right:26px;top:34px;display:flex;flex-direction:column;gap:11px}
.c3.s300 .line{height:9px}
.c3.s300 .l1{width:88%}.c3.s300 .l2{width:72%}.c3.s300 .l3{width:80%}.c3.s300 .l4{width:56%}
.c3.s300 .lock{position:absolute;left:50%;top:96px;transform:translateX(-50%) scale(.6);width:40px;height:40px;opacity:0;animation:c3Lock 10s infinite}
.c3.s300 .c3-copy{position:absolute;left:26px;right:26px;bottom:24px;opacity:0;animation:c3Copy 10s infinite}
.c3.s300 .big{font-size:19px}
.c3.s300 .c3-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.c3.s300 .mark{width:24px;height:24px}
.c3.s300 .wordmark{font-size:16px}
.c3.s300 .url{font-size:11px}
@keyframes c3Lock{0%,40%{opacity:0;transform:translateX(-50%) scale(.6)}54%{opacity:1;transform:translateX(-50%) scale(1)}90%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1)}}
@keyframes c3Copy{0%,58%{opacity:0;transform:translateY(8px)}70%{opacity:1;transform:translateY(0)}100%{opacity:1}}

/* 728x90 : cipher lines left, lock, copy + lockup right */
.c3.s728{display:flex;align-items:center;gap:26px;padding:0 30px}
.c3.s728 .lines{flex:0 0 200px;display:flex;flex-direction:column;gap:9px}
.c3.s728 .line{height:8px}
.c3.s728 .l1{width:100%}.c3.s728 .l2{width:78%}.c3.s728 .l3{width:90%}.c3.s728 .l4{width:60%}
.c3.s728 .lock{flex:0 0 auto;width:34px;height:34px;opacity:0;animation:c3LockFlat 10s infinite}
.c3.s728 .c3-copy{flex:1;opacity:0;animation:c3Copy 10s infinite}
.c3.s728 .big{font-size:22px}
.c3.s728 .c3-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.c3.s728 .mark{width:26px;height:26px}
.c3.s728 .wordmark{font-size:17px}
.c3.s728 .url{font-size:12px}
@keyframes c3LockFlat{0%,40%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}

/* 160x600 : cipher lines top, lock mid, copy bottom */
.c3.s160{display:flex;flex-direction:column;padding:34px 22px}
.c3.s160 .lines{display:flex;flex-direction:column;gap:11px}
.c3.s160 .line{height:9px}
.c3.s160 .l1{width:100%}.c3.s160 .l2{width:76%}.c3.s160 .l3{width:88%}.c3.s160 .l4{width:58%}
.c3.s160 .lock{width:44px;height:44px;margin:40px auto 0;opacity:0;animation:c3LockFlat 10s infinite}
.c3.s160 .c3-copy{position:absolute;left:22px;right:22px;bottom:30px;opacity:0;animation:c3Copy 10s infinite}
.c3.s160 .big{font-size:24px}
.c3.s160 .c3-row{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.c3.s160 .lockup{flex-direction:column;align-items:flex-start;gap:7px}
.c3.s160 .mark{width:28px;height:28px}
.c3.s160 .wordmark{font-size:18px}
.c3.s160 .url{font-size:12px}

/* 320x50 : brand bar with cyan lock accent */
.c3.s320{display:flex;align-items:center;gap:9px;padding:0 14px}
.c3.s320 .lock{flex:0 0 auto;width:20px;height:20px}
.c3.s320 .big{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c3.s320 .mark{width:28px;height:28px;flex:0 0 auto}
.c3.s320 .url{font-size:11px;white-space:nowrap;flex:0 0 auto}

/* ============================================================
   Respect reduced motion — settle on the resolved end-state
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ad *{animation-duration:.001s!important;animation-iteration-count:1!important}
  .c1 .c1-type{opacity:0!important}
  .c1 .c1-resolve,.c2 .headline,.c2 .c2-foot,.c3 .c3-copy,.c3 .lock{opacity:1!important;transform:none!important}
  .c1 .typed{width:16ch!important}
  .c2 .cursor{opacity:0!important}
  .c3 .line{opacity:.35!important;filter:blur(2px)!important}
  .c3 .line::after{opacity:.9!important}
}