/* TATUARTE R21 — visual polish + demo media */
:root{
  --r21-bg:#08090c;
  --r21-panel:#0d0f14;
  --r21-panel-2:#12151c;
  --r21-line:rgba(255,255,255,.11);
  --r21-line-hot:rgba(132,112,255,.42);
  --r21-text:#f7f8fb;
  --r21-muted:#b8beca;
  --r21-soft:#8e95a3;
  --r21-violet:#8675ff;
  --r21-ice:#8fd8ff;
}

.r21-body{background:var(--r21-bg);color:var(--r21-text);font-size:16px;line-height:1.5}
.r21-body .r19-nav a,.r21-body .r19-head-actions a,.r21-body .r19-footer a{font-size:14px}
.r21-body .r20-kicker,.r21-body .eyebrow,.r21-body .r20-section-head>div>span,.r21-body .r20-mini-head>span{font-size:12px;letter-spacing:.15em}
.r21-body .r20-hero-lede{font-size:18px;line-height:1.5;color:#c9ced8;max-width:62ch}
.r21-body .r20-section-head p,.r21-body .r20-portal-copy p,.r21-body .r20-style-copy p,.r21-body .r20-pro-cta p{font-size:15.5px;line-height:1.5}
.r21-body .r17-listing-hero>p:not(.eyebrow){font-size:17px;line-height:1.55;max-width:70ch}
.r21-body .r17-list-count,.r21-body .r17-result-card p,.r21-body .r17-result-card small{font-size:14.5px}

/* Search and chips: stronger, faster to scan */
.r21-body .r20-search{min-height:74px;border:1px solid rgba(255,255,255,.18);background:rgba(11,13,18,.92);box-shadow:0 18px 60px rgba(0,0,0,.34),0 0 0 1px rgba(132,112,255,.05) inset}
.r21-body .r20-search:focus-within{border-color:rgba(143,216,255,.55);box-shadow:0 18px 70px rgba(0,0,0,.4),0 0 32px rgba(132,112,255,.12)}
.r21-body .r20-search input{font-size:17px;color:#fff}
.r21-body .r20-search input::placeholder{color:#9ea5b2;opacity:1}
.r21-body .r20-search button{min-height:52px;padding-inline:26px;font-size:15px;font-weight:760;letter-spacing:.01em;background:linear-gradient(135deg,#f7f8fb 0%,#dfe7ff 58%,#d6ceff 100%);color:#0a0b0f;box-shadow:0 8px 28px rgba(119,104,255,.16)}
.r21-body .r20-search button span{transition:transform .22s ease}
.r21-body .r20-search button:hover span{transform:translateX(4px)}
.r21-body .r20-quick{gap:9px;margin-top:14px}
.r21-body .r20-quick>span{font-size:13px;color:#9299a5}
.r21-body .r20-quick a{min-height:38px;display:inline-flex;align-items:center;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));font-size:14px;font-weight:650;color:#e8ebf2;transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease,color .22s ease}
.r21-body .r20-quick a:hover,.r21-body .r20-quick a:focus-visible{border-color:var(--r21-line-hot);background:rgba(132,112,255,.10);box-shadow:0 0 26px rgba(105,90,255,.10);transform:translateY(-2px);color:#fff}

/* Image layer */
.r21-demo-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#0b0d12}
.r21-demo-hero{object-position:62% 42%}
.r20-hero-media>img,.r20-portal-media img,.r20-style-media img,.r20-mini-media img,.r20-avatar img,.r21-demo-profile .media-frame img,.r21-demo-work .media-frame img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.r20-portal-card:hover .r20-portal-media img,.r20-style-card:hover .r20-style-media img,.r20-work-strip a:hover .r20-mini-media img,.r21-demo-profile:hover .media-frame img,.r21-demo-work:hover .media-frame img{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}
.r20-hero-media:after,.r20-portal-media:after,.r20-style-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(5,6,9,.26) 100%)}
.r20-hero-media,.r20-portal-media,.r20-style-media{position:relative;overflow:hidden}

/* Cards: less template, more editorial energy */
.r21-body .r20-portal-card,.r21-body .r20-style-card,.r21-body .r20-discovery-panel,.r21-body .r20-city-box,.r21-body .r20-guides-box{border-color:var(--r21-line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.r21-body .r20-portal-card,.r21-body .r20-style-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}
.r21-body .r20-portal-card:hover,.r21-body .r20-style-card:hover{transform:translateY(-3px);border-color:rgba(134,117,255,.34);box-shadow:0 22px 60px rgba(0,0,0,.28),0 0 36px rgba(105,90,255,.065);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018))}
.r21-body .r20-portal-copy h3,.r21-body .r20-style-copy h3{font-size:clamp(22px,1.55vw,29px);letter-spacing:-.025em}
.r21-body .r20-portal-copy b,.r21-body .r20-style-copy b,.r21-body .r20-panel-head a,.r21-body .r20-text-link{transition:transform .22s ease,color .22s ease}
.r21-body .r20-portal-card:hover .r20-portal-copy b,.r21-body .r20-style-card:hover .r20-style-copy b{transform:translate(3px,-1px);color:#fff}

/* Directory listings gain the same visual system */
.r21-body .r17-listing-hero{background:radial-gradient(circle at 82% 20%,rgba(113,94,255,.10),transparent 34%),#090a0d}
.r21-body .r17-simple-filter form{gap:10px}
.r21-body .r17-simple-filter input,.r21-body .r17-simple-filter select,.r21-body .r17-simple-filter button{min-height:46px;font-size:14px;border-radius:10px}
.r21-body .r17-simple-filter input,.r21-body .r17-simple-filter select{border-color:rgba(255,255,255,.13);background:#101218;color:#e9ecf2}
.r21-body .r17-simple-filter button{padding-inline:20px;font-weight:700;background:#f2f4f8;color:#0a0b0e}
.r21-body .r17-result-card{border-color:rgba(255,255,255,.10);background:#0e1015;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.r21-body .r17-result-card:hover{transform:translateY(-3px);border-color:rgba(134,117,255,.32);box-shadow:0 18px 55px rgba(0,0,0,.25)}
.r21-body .r17-result-card h2{font-size:21px}
.r21-body .r17-card-topline{font-size:12.5px}
.r21-body .r17-card-topline b{padding:5px 8px;border-radius:999px;background:rgba(134,117,255,.12);color:#d8d2ff;border:1px solid rgba(134,117,255,.22)}
.r21-body .work-caption{background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));padding:28px 16px 14px}
.r21-body .work-caption strong{font-size:17px}
.r21-body .work-caption span{font-size:13.5px;color:#d2d6de}

/* Guide preview gets an image without becoming a huge block */
.r21-guide-demo{display:grid!important;grid-template-columns:92px 42px minmax(0,1fr) 24px!important;align-items:center!important;gap:12px!important;min-height:76px!important}
.r21-guide-demo>img{width:92px;height:64px;border-radius:8px;object-fit:cover}

/* Slight luminous breathing only in ambient layers */
.r21-body .r20-glow-a{animation:r21-breathe 9s ease-in-out infinite}
.r21-body .r20-glow-b{animation:r21-breathe 11s ease-in-out infinite reverse}
@keyframes r21-breathe{0%,100%{opacity:.38;transform:scale(.98)}50%{opacity:.62;transform:scale(1.025)}}

/* Focus must remain obvious on black */
.r21-body a:focus-visible,.r21-body button:focus-visible,.r21-body input:focus-visible,.r21-body select:focus-visible{outline:2px solid var(--r21-ice);outline-offset:3px}

@media (max-width:900px){
  .r21-body{font-size:16px}
  .r21-body .r20-search{min-height:66px}
  .r21-body .r20-search input{font-size:16px}
  .r21-body .r20-quick a{min-height:36px;font-size:13.5px}
}
@media (max-width:620px){
  .r21-body .r20-hero-lede{font-size:16.5px}
  .r21-body .r20-search{min-height:auto}
  .r21-body .r20-search button{min-height:48px}
  .r21-guide-demo{grid-template-columns:76px 34px minmax(0,1fr) 20px!important}
  .r21-guide-demo>img{width:76px;height:58px}
}
@media (prefers-reduced-motion:reduce){
  .r21-body .r20-glow-a,.r21-body .r20-glow-b{animation:none!important}
  .r21-body *{scroll-behavior:auto!important}
  .r20-hero-media>img,.r20-portal-media img,.r20-style-media img,.r20-mini-media img,.r20-avatar img,.r21-demo-profile .media-frame img,.r21-demo-work .media-frame img,.r21-body .r20-portal-card,.r21-body .r20-style-card,.r21-body .r20-quick a{transition:none!important;transform:none!important}
}