/* Adier — look swatches: the eight ad directions a client can pick.
   Used by the home pages (/, /fi/) and the brief (/start/). Each tile is a tiny mock of an ad
   style, so its fonts, colors and effects depict that style rather than the Adier UI. */
@font-face{font-family:"Fraunces";src:url(fonts/Fraunces-600.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Anton";src:url(fonts/Anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Press Start 2P";src:url(fonts/PressStart2P.woff2) format("woff2");font-display:swap}

.looks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:980px){.looks{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.looks{grid-template-columns:1fr 1fr}}
.look{container-type:inline-size;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;isolation:isolate}
.look .name{position:relative;z-index:2;font-weight:800;font-size:clamp(13.5px,6cqw,15px);line-height:1.2;letter-spacing:-.01em}
.look .sub{position:relative;z-index:2;font-size:12.5px;opacity:.75;margin-top:2px}
.look .art{position:absolute;inset:0;display:grid;place-items:center;z-index:1}

/* Your brand: Adier's own vermilion fill with ink type */
.lk-brand{background:var(--sig);color:var(--ink)}
.lk-brand .sub{opacity:.8}
.lk-brand .art{display:flex;align-items:baseline;justify-content:center;gap:6px;padding-bottom:18%;font:900 42cqw/1 var(--sans);letter-spacing:-.06em}
.lk-brand .art span{display:inline-block;animation:bob 4s var(--ease-io) infinite}
.lk-brand .art span:nth-child(2){animation-delay:.15s;font-family:var(--serif);font-style:italic;font-weight:400}
.lk-brand .art span:nth-child(2){font-size:50cqw}
.lk-brand .art span:nth-child(3){animation-delay:.3s;font-family:"Press Start 2P";font-size:19cqw}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-8px)}}

/* Modern tech: a single diagonal light sweep behind a glass panel */
.lk-tech{background:linear-gradient(155deg,#3B5BFF 0%,#6A4CF5 32%,#1B1850 64%,#0B0D1E 100%);color:#fff}
.lk-tech .art{padding-bottom:14%}
.lk-tech .art i{width:62%;height:44%;border-radius:16px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.15),0 18px 30px -18px rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:float 5s var(--ease-io) infinite}
@keyframes float{50%{transform:translateY(-6px) rotate(-2deg)}}

.lk-pop{background:#FFD83D;color:#0E0E12}
.lk-pop .art{padding-bottom:16%;font:400 23cqw/.88 "Anton";text-transform:uppercase;text-align:center;text-shadow:4px 4px 0 #FF3E9A}
.lk-pop .art b{font-weight:400;display:block;transform:rotate(-6deg);animation:pulse 1.6s var(--ease-out) infinite}
@keyframes pulse{0%,100%{transform:rotate(-6deg) scale(1)}12%{transform:rotate(-6deg) scale(1.08)}}

.lk-lux{background:radial-gradient(100% 70% at 50% 30%,#2a2418,#0b0a08 72%);color:#E7CF9A}
.lk-lux .art{padding-bottom:14%;font:400 64cqw/1 var(--serif)}
.lk-lux::before{content:"";position:absolute;inset:12px;border:1px solid rgba(214,180,106,.4);border-radius:12px;z-index:1}

.lk-meme{background:#fff;color:#000}
.lk-meme .art{padding-bottom:14%;font:400 12.5cqw/1 "Anton";text-transform:uppercase;text-align:center;-webkit-text-stroke:1.5px #000;color:#fff;letter-spacing:.02em}
.lk-meme .art div{display:grid;gap:18cqw;justify-items:center}
.lk-meme .art span{display:inline-block;padding:0 8px;background:#000;color:#fff;-webkit-text-stroke:0}

.lk-warm{background:#F3E6D2;color:#5B2A16}
.lk-warm .art{padding-bottom:14%;font:600 27cqw/1 "Fraunces",serif;letter-spacing:-.03em}
.lk-warm .art::before{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#F7B267,#D9642B);z-index:-1;animation:float 6s var(--ease-io) infinite}

/* Retro gaming: CRT phosphor glow and scanlines are the style being shown */
.lk-retro{background:#050805;color:#39F27A}
.lk-retro .art{padding-bottom:14%;font:400 17cqw/1 "Press Start 2P";text-shadow:0 0 14px rgba(57,242,122,.55)}
.lk-retro::after{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);pointer-events:none}
.lk-retro .art b{font-weight:400;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.lk-clean{background:#fff;color:#0E0E12}
.lk-clean .art{padding-bottom:14%;font:800 21cqw/1 var(--sans);letter-spacing:-.05em}
.lk-clean .art::after{content:"";position:absolute;bottom:40%;left:28%;right:28%;height:4px;border-radius:2px;background:#0E0E12;transform-origin:left;animation:line 3s var(--ease-out) infinite}
@keyframes line{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}